@helpdice/ui 1.7.5 → 1.7.8

package/esm/page/page.js

@@ -7,7 +7,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { tuple } from '../utils/prop-types';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import PageContent from './page-content';
 import { hasChild } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';

package/esm/pagination/pagination-item.js

@@ -4,9 +4,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["active", "children", "disabled", "onClick"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { addColorAlpha } from '../utils/color';
-import useClasses from '../use-classes';
 var PaginationItem = function PaginationItem(_ref) {
   var active = _ref.active,
     children = _ref.children,

package/esm/pagination/pagination.js

@@ -10,7 +10,7 @@ import PaginationPrevious from './pagination-previous';
 import PaginationNext from './pagination-next';
 import PaginationPages from './pagination-pages';
 import { PaginationContext } from './pagination-context';
-import useCurrentState from '../utils/use-current-state';
+import { useCurrentState } from '@helpdice/theme';
 import { pickChild } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
 var PaginationComponent = function PaginationComponent(_ref) {

package/esm/popover/popover-item.js

@@ -3,10 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
 import { usePopoverContext } from './popover-context';
-import useClasses from '../use-classes';
 var PopoverItemComponent = function PopoverItemComponent(_ref) {
   var children = _ref.children,
     _ref$line = _ref.line,

package/esm/popover/popover.js

@@ -9,7 +9,7 @@ import Tooltip from '../tooltip/tooltip';
 import { getReactNode } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
 import { PopoverContext } from './popover-context';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var PopoverComponent = function PopoverComponent(_ref) {
   var child = _ref.child,
     children = _ref.children,

package/esm/progress/progress.js

@@ -3,10 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["value", "max", "className", "type", "colors", "fixedTop", "fixedBottom"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { useProportions } from '../utils/calculations';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getCurrentColor = function getCurrentColor(ratio, palette, type) {
   var colors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var defaultColors = {

package/esm/radio/radio-description.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "children"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
 var RadioDescriptionComponent = function RadioDescriptionComponent(_ref) {
   var _ref$className = _ref.className,

package/esm/radio/radio-group.js

@@ -8,7 +8,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useEffect, useMemo, useState } from 'react';
 import { RadioContext } from './radio-context';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var RadioGroupComponent = function RadioGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,

package/esm/radio/radio.js

@@ -6,14 +6,13 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { useRadioContext } from './radio-context';
 import RadioDescription from './radio-description';
 import { pickChild } from '../utils/collections';
 import useWarning from '../utils/use-warning';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var RadioComponent = function RadioComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/rating/rating.js

@@ -9,9 +9,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useEffect, useMemo, useState } from 'react';
 import { tupleNumber } from '../utils/prop-types';
 import RatingIcon from './rating-icon';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var ratingCountTuple = tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10);
 var ratingValueTuple = tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
 var getColor = function getColor(type, palette) {

package/esm/row/row.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "component", "gap", "justify", "align", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var getFlexAlignment = function getFlexAlignment(justify, align) {
   var flexJustifyMap = {
     end: 'flex-end',

package/esm/select/select-dropdown.js

@@ -2,10 +2,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useImperativeHandle, useRef } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, Dropdown, useClasses } from '@helpdice/theme';
 import { useSelectContext } from './select-context';
-import Dropdown from '../shared/dropdown';
-import useClasses from '../use-classes';
 var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef) {
   var visible = _ref.visible,
     children = _ref.children,

package/esm/select/select-icon-clear.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var SelectIconClear = function SelectIconClear(_ref) {
   var onClick = _ref.onClick;
   var theme = useTheme();

package/esm/select/select-multiple-value.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import Grid from '../grid';
 import SelectClearIcon from './select-icon-clear';
 var SelectMultipleValue = function SelectMultipleValue(_ref) {

package/esm/select/select-option.js

@@ -3,12 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, Ellipsis, useClasses } from '@helpdice/theme';
 import { useSelectContext } from './select-context';
 import useWarning from '../utils/use-warning';
-import Ellipsis from '../shared/ellipsis';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var SelectOptionComponent = function SelectOptionComponent(_ref) {
   var identValue = _ref.value,
     _ref$className = _ref.className,

package/esm/select/select.js

@@ -7,8 +7,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-import useCurrentState from '../utils/use-current-state';
+import { useTheme, Ellipsis, useClasses, useCurrentState } from '@helpdice/theme';
 import { pickChildByProps } from '../utils/collections';
 import SelectIcon from './select-icon';
 import SelectDropdown from './select-dropdown';
@@ -16,10 +15,8 @@ import SelectMultipleValue from './select-multiple-value';
 import Grid from '../grid';
 import { SelectContext } from './select-context';
 import { getColors } from './styles';
-import Ellipsis from '../shared/ellipsis';
 import SelectInput from './select-input';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var children = _ref.children,
     label = _ref.label,
@@ -169,7 +166,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     multiple: multiple
   }, className);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
   }, label && /*#__PURE__*/React.createElement("label", {
     style: {
       display: 'block',
@@ -177,7 +174,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
       fontSize: '14px',
       fontWeight: 'light'
     },
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
   }, label), /*#__PURE__*/React.createElement(SelectContext.Provider, {
     value: initialValue
   }, /*#__PURE__*/React.createElement("div", _extends({
@@ -185,7 +182,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     onClick: clickHandler,
     onMouseDown: mouseDownHandler
   }, props, {
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement(SelectInput, {
     ref: inputRef,
     visible: visible,
@@ -194,11 +191,11 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
       return setSelectFocus(true);
     }
   }), isEmpty && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value placeholder"
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value placeholder"
   }, /*#__PURE__*/React.createElement(Ellipsis, {
     height: "var(--select-height)"
   }, placeholder)), value && !multiple && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value"
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value"
   }, selectedChild), value && multiple && /*#__PURE__*/React.createElement(Grid.Container, {
     gap: 0.5
   }, selectedChild), /*#__PURE__*/React.createElement(SelectDropdown, {
@@ -209,11 +206,11 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     disableMatchWidth: disableMatchWidth,
     getPopupContainer: getPopupContainer
   }, children), !pure && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "icon"
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "icon"
   }, /*#__PURE__*/React.createElement(Icon, {
-    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
+    className: _JSXStyle.dynamic([["2996243684", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
   })))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3282295248",
+    id: "2996243684",
     dynamic: [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]
   }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:90vw;overflow:hidden;-webkit-transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;border:1px solid ").concat(border, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(disabled ? theme.palette.accents_1 : theme.palette.background, ";--select-font-size:").concat(SCALES.font(0.875), ";--select-height:").concat(SCALES.height(2.25), ";min-width:11.5em;width:").concat(SCALES.width(1, 'initial'), ";height:var(--select-height);padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.667), ";}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:").concat(disabled ? theme.palette.border : borderActive, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(disabled ? theme.palette.accents_5 : borderActive, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25em;font-size:var(--select-font-size);color:").concat(disabled ? theme.palette.accents_4 : theme.palette.foreground, ";width:calc(100% - 1.25em);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(placeholderColor, ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(iconBorder, ";}")));
 });

package/esm/slider/slider-dot.js

@@ -1,7 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
-import useClasses from '../use-classes';
+import { useTheme, useClasses } from '@helpdice/theme';
 var SliderDot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$disabled = _ref.disabled,

package/esm/slider/slider-mark.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var getMarks = function getMarks(min, max, step) {
   var value = max - min;
   var roundFunc = !(value % step) ? Math.floor : Math.ceil;

package/esm/slider/slider.js

@@ -6,14 +6,12 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses, useCurrentState } from '@helpdice/theme';
 import useDrag from '../utils/use-drag';
-import useCurrentState from '../utils/use-current-state';
 import SliderDot from './slider-dot';
 import SliderMark from './slider-mark';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getRefWidth = function getRefWidth(elementRef) {
   if (!elementRef || !elementRef.current) return 0;
   var rect = elementRef.current.getBoundingClientRect();

package/esm/snippet/snippet.js

@@ -5,13 +5,11 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useMemo, useRef } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useToasts, useClasses } from '@helpdice/theme';
 import { getStyles } from './styles';
 import SnippetIcon from './snippet-icon';
 import useClipboard from '../utils/use-clipboard';
-import useToasts from '../use-toasts';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var textArrayToString = function textArrayToString(text) {
   return text.reduce(function (pre, current) {
     if (!current) return pre;

package/esm/spinner/spinner.js

@@ -4,9 +4,8 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var _excluded = ["className"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getSpans = function getSpans(theme) {
   return _toConsumableArray(new Array(12)).map(function (_, index) {
     return /*#__PURE__*/React.createElement("span", {

package/esm/table/table-body.js

@@ -2,10 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import TableCell from './table-cell';
 import { useTableContext } from './table-context';
-import useClasses from '../use-classes';
 import _ from 'lodash';
 import Placeholder from '../Placeholder';
 // import { DataTable } from '@helpdice/pro';

package/esm/table/table-head.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import Input from '../input';
 import Select from '../select';
 // import Button from '../button'
@@ -83,7 +83,8 @@ var TableHead = function TableHead(props) {
       // }
       return /*#__PURE__*/React.createElement("th", {
         style: {
-          padding: '3px'
+          padding: '3px',
+          display: 'flex'
         },
         "data-column": Header
       }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select

package/esm/tabs/tabs-item.js

@@ -4,9 +4,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useTabsContext } from './tabs-context';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var TabsItemComponent = function TabsItemComponent(_ref) {
   var children = _ref.children,
     value = _ref.value,

package/esm/tabs/tabs.js

@@ -7,13 +7,11 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, Highlight, useClasses } from '@helpdice/theme';
 import { TabsContext } from './tabs-context';
 import useScale, { withScale } from '../use-scale';
-import Highlight from '../shared/highlight';
 import { useRect } from '../utils/layouts';
 import { isUiElement } from '../utils/collections';
-import useClasses from '../use-classes';
 var TabsComponent = function TabsComponent(_ref) {
   var userCustomInitialValue = _ref.initialValue,
     value = _ref.value,

package/esm/tag/tag.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["type", "children", "className", "invert"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
 var getColors = function getColors(type, palette, invert) {
   var colors = {

package/esm/text/child.js

@@ -5,7 +5,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import useScale from '../use-scale';
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {

package/esm/textarea/textarea.js

@@ -6,11 +6,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useRef, useImperativeHandle, useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { tuple } from '../utils/prop-types';
 import { getColors } from '../input/styles';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,

package/esm/toggle/toggle.js

@@ -6,10 +6,9 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var ToggleComponent = function ToggleComponent(_ref) {
   var _ref$initialChecked = _ref.initialChecked,
     initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,

package/esm/tooltip/tooltip-content.js

@@ -4,17 +4,15 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import useTheme from '../use-theme';
+import { useTheme, useClasses, CssTransition } from '@helpdice/theme';
 import usePortal from '../utils/use-portal';
 import useResize from '../utils/use-resize';
-import CssTransition from '../shared/css-transition';
 import useClickAnyWhere from '../utils/use-click-anywhere';
 import { getColors } from './styles';
 import { getPosition, defaultTooltipPosition } from './placement';
 import TooltipIcon from './tooltip-icon';
 import useScale from '../use-scale';
 import { getRect } from './helper';
-import useClasses from '../use-classes';
 var TooltipContent = function TooltipContent(_ref) {
   var children = _ref.children,
     parent = _ref.parent,

package/esm/tooltip/tooltip-icon.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import { getIconPosition } from './placement';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var TooltipIcon = function TooltipIcon(_ref) {
   var placement = _ref.placement,
     shadow = _ref.shadow;

package/esm/tooltip/tooltip.js

@@ -10,7 +10,7 @@ import TooltipContent from './tooltip-content';
 import useClickAway from '../utils/use-click-away';
 import { withScale } from '../use-scale';
 import { getRect } from './helper';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var TooltipComponent = function TooltipComponent(_ref) {
   var children = _ref.children,
     _ref$initialVisible = _ref.initialVisible,

package/esm/tree/tree-file-icon.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var TreeFileIcon = function TreeFileIcon(_ref) {
   var color = _ref.color,
     _ref$width = _ref.width,

package/esm/tree/tree-file.js

@@ -3,12 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["name", "parentPath", "level", "extra", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import TreeFileIcon from './tree-file-icon';
 import { useTreeContext } from './tree-context';
 import TreeIndents from './tree-indents';
 import { makeChildPath, stopPropagation } from './tree-help';
-import useClasses from '../use-classes';
 var TreeFile = function TreeFile(_ref) {
   var name = _ref.name,
     _ref$parentPath = _ref.parentPath,

package/esm/tree/tree-folder-icon.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var TreeFolderIcon = function TreeFolderIcon(_ref) {
   var color = _ref.color,
     _ref$width = _ref.width,

package/esm/tree/tree-folder.js

@@ -6,16 +6,14 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, Expand, useClasses } from '@helpdice/theme';
 import { setChildrenProps } from '../utils/collections';
 import TreeFile from './tree-file';
-import Expand from '../shared/expand';
 import TreeIndents from './tree-indents';
 import { useTreeContext } from './tree-context';
 import TreeFolderIcon from './tree-folder-icon';
 import TreeStatusIcon from './tree-status-icon';
 import { sortChildren, makeChildPath, stopPropagation } from './tree-help';
-import useClasses from '../use-classes';
 var _TreeFolder = function TreeFolder(_ref) {
   var name = _ref.name,
     _ref$children = _ref.children,

package/esm/tree/tree-status-icon.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var TreeStatusIcon = function TreeStatusIcon(_ref) {
   var color = _ref.color,
     _ref$width = _ref.width,

package/esm/tree/tree.js

@@ -8,7 +8,7 @@ import TreeFolder from './tree-folder';
 import { TreeContext } from './tree-context';
 import { tuple } from '../utils/prop-types';
 import { sortChildren } from './tree-help';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var FileTreeValueType = tuple('directory', 'file');
 var directoryType = FileTreeValueType[0];
 var _makeChildren = function makeChildren() {

package/esm/use-input/use-input.js

@@ -2,7 +2,7 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /* "use client" */
 
-import useCurrentState from '../utils/use-current-state';
+import { useCurrentState } from '@helpdice/theme';
 var useInput = function useInput(initialValue) {
   var _useCurrentState = useCurrentState(initialValue),
     _useCurrentState2 = _slicedToArray(_useCurrentState, 3),

package/esm/use-modal/use-modal.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /* "use client" */
 
-import useCurrentState from '../utils/use-current-state';
+import { useCurrentState } from '@helpdice/theme';
 var useModal = function useModal() {
   var initialVisible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var _useCurrentState = useCurrentState(initialVisible),

package/esm/use-network-status/index.d.ts

@@ -0,0 +1,2 @@
+import useNetworkStatus from "./use-netowork-status";
+export default useNetworkStatus;

package/esm/use-network-status/index.js

@@ -0,0 +1,2 @@
+import useNetworkStatus from "./use-netowork-status";
+export default useNetworkStatus;

package/esm/use-network-status/use-netowork-status.d.ts

@@ -0,0 +1,4 @@
+declare const useNetworkStatus: () => {
+    isOnline: boolean;
+};
+export default useNetworkStatus;