@helpdice/ui 1.7.4 → 1.7.7

package/esm/carousal/utils.js

@@ -0,0 +1,49 @@
+import { Children } from 'react';
+import CSSTranslate from '../../CSSTranslate';
+export var noop = function noop() {};
+export var defaultStatusFormatter = function defaultStatusFormatter(current, total) {
+  return "".concat(current, " of ").concat(total);
+};
+export var isKeyboardEvent = function isKeyboardEvent(e) {
+  return e ? e.hasOwnProperty('key') : false;
+};
+
+/**
+ * Gets the list 'position' relative to a current index
+ * @param index
+ */
+export var getPosition = function getPosition(index, props) {
+  if (props.infiniteLoop) {
+    // index has to be added by 1 because of the first cloned slide
+    ++index;
+  }
+  if (index === 0) {
+    return 0;
+  }
+  var childrenLength = Children.count(props.children);
+  if (props.centerMode && props.axis === 'horizontal') {
+    var currentPosition = -index * props.centerSlidePercentage;
+    var lastPosition = childrenLength - 1;
+    if (index && (index !== lastPosition || props.infiniteLoop)) {
+      currentPosition += (100 - props.centerSlidePercentage) / 2;
+    } else if (index === lastPosition) {
+      currentPosition += 100 - props.centerSlidePercentage;
+    }
+    return currentPosition;
+  }
+  return -index * 100;
+};
+
+/**
+ * Sets the 'position' transform for sliding animations
+ * @param position
+ * @param forceReflow
+ */
+export var setPosition = function setPosition(position, axis) {
+  var style = {};
+  ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
+    // @ts-ignore
+    style[prop] = CSSTranslate(position, '%', axis);
+  });
+  return style;
+};

package/esm/checkbox/checkbox-group.js

@@ -10,7 +10,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { CheckboxContext } from './checkbox-context';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,

package/esm/checkbox/checkbox.icon.js

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

package/esm/checkbox/checkbox.js

@@ -10,9 +10,8 @@ import { useCheckbox } from './checkbox-context';
 import CheckboxIcon from './checkbox.icon';
 import useWarning from '../utils/use-warning';
 import { getColors } from './styles';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var CheckboxComponent = function CheckboxComponent(_ref) {
   var checked = _ref.checked,
     _ref$initialChecked = _ref.initialChecked,

package/esm/code/code.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "block", "className", "name", "classic"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import useScale, { withScale } from '../use-scale';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import { addColorAlpha } from '../utils/color';
 var CodeComponent = function CodeComponent(_ref) {
   var children = _ref.children,

package/esm/collapse/collapse-group.js

@@ -8,11 +8,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useMemo } from 'react';
 import Collapse from './collapse';
-import useCurrentState from '../utils/use-current-state';
 import { setChildrenIndex } from '../utils/collections';
 import { CollapseContext } from './collapse-context';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses, useCurrentState } from '@helpdice/theme';
 var CollapseGroupComponent = function CollapseGroupComponent(_ref) {
   var children = _ref.children,
     _ref$accordion = _ref.accordion,

package/esm/collapse/collapse.js

@@ -7,13 +7,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useEffect } from 'react';
 import CollapseIcon from './collapse-icon';
-import useTheme from '../use-theme';
-import Expand from '../shared/expand';
+import { useTheme, Expand, useClasses, useCurrentState } from '@helpdice/theme';
 import { useCollapseContext } from './collapse-context';
-import useCurrentState from '../utils/use-current-state';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var CollapseComponent = function CollapseComponent(_ref) {
   var children = _ref.children,
     title = _ref.title,

package/esm/description/description.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["title", "content", "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 DescriptionComponent = function DescriptionComponent(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? 'Title' : _ref$title,

package/esm/display/display.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "caption", "shadow", "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 useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var DisplayComponent = function DisplayComponent(_ref) {
   var children = _ref.children,
     _ref$caption = _ref.caption,

package/esm/divider/divider.js

@@ -5,9 +5,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useMemo } 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 getColor = function getColor(type, palette) {
   var colors = {
     "default": palette.border,

package/esm/dot/dot.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["type", "children", "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 useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getColor = function getColor(type, theme) {
   var colors = {
     "default": theme.palette.accents_2,

package/esm/drawer/drawer-wrapper.js

@@ -6,11 +6,9 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import useScale from '../use-scale';
-import useTheme from '../use-theme';
-import CssTransition from '../shared/css-transition';
+import { useTheme, useClasses, CssTransition } from '@helpdice/theme';
 import { isChildElement } from '../utils/collections';
 import { getDrawerTransform } from './helper';
-import useClasses from '../use-classes';
 var DrawerWrapper = function DrawerWrapper(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/drawer/drawer.js

@@ -10,7 +10,7 @@ import usePortal from '../utils/use-portal';
 import useBodyScroll from '../utils/use-body-scroll';
 import useKeyboard, { KeyCode } from '../use-keyboard';
 import { createPortal } from 'react-dom';
-import Backdrop from '../shared/backdrop';
+import { Backdrop } from '@helpdice/theme';
 import DrawerWrapper from './drawer-wrapper';
 var DrawerComponent = function DrawerComponent(_ref) {
   var customVisible = _ref.visible,

package/esm/fieldset/fieldset-content.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "children"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var FieldsetContentComponent = function FieldsetContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/fieldset/fieldset-footer.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 FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
   var _ref$className = _ref.className,

package/esm/fieldset/fieldset-group.js

@@ -7,12 +7,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import useCurrentState from '../utils/use-current-state';
+import { useTheme, useClasses, useCurrentState } from '@helpdice/theme';
 import { FieldsetContext } from './fieldset-context';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var FieldsetGroupComponent = function FieldsetGroupComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/fieldset/fieldset-title.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 useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var FieldsetTitle = function FieldsetTitle(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/fieldset/fieldset.js

@@ -6,7 +6,7 @@ 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 FieldsetTitle from './fieldset-title';
 import FieldsetSubtitle from './fieldset-subtitle';
 import FieldsetFooter from './fieldset-footer';
@@ -15,7 +15,6 @@ import { hasChild, pickChild } from '../utils/collections';
 import { useFieldset } from './fieldset-context';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var FieldsetComponent = function FieldsetComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/grid/basic-item.js

@@ -4,9 +4,8 @@ var _excluded = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignIte
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */;
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale from '../use-scale';
-import useClasses from '../use-classes';
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
   if (typeof val === 'number') {

package/esm/grid/grid-container.js

@@ -5,7 +5,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import GridBasicItem from './basic-item';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 0 : _ref$gap,

package/esm/grid/grid.js

@@ -6,7 +6,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import GridBasicItem from './basic-item';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,

package/esm/image/image-browser.js

@@ -4,12 +4,11 @@ var _excluded = ["url", "title", "children", "showFullLink", "invert", "anchorPr
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import Link from '../link';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import ImageBrowserHttpsIcon from './image-browser-https-icon';
 import { getBrowserColors } from './styles';
 import { getHostFromUrl } from './helpers';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getTitle = function getTitle(title, colors) {
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title"

package/esm/image/image.js

@@ -6,11 +6,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import ImageSkeleton from './image.skeleton';
 import { transformDataSource } from './helpers';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var ImageComponent = function ImageComponent(_ref) {
   var src = _ref.src,
     _ref$disableSkeleton = _ref.disableSkeleton,

package/esm/image/image.skeleton.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["opacity"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,

package/esm/index.d.ts

@@ -36,8 +36,6 @@ export type { DrawerProps } from './drawer';
 export { default as Fieldset } from './fieldset';
 export type { FieldsetProps, FieldsetTitleProps, FieldsetSubtitleProps, FieldsetGroupProps, FieldsetFooterProps, FieldsetContentProps, } from './fieldset';
 export * from './form';
-export { default as UiProvider } from './ui-provider';
-export type { UiProviderProps } from './ui-provider';
 export { default as Grid } from './grid';
 export { default as Container } from './grid/grid-container';
 export type { GridProps, GridContainerProps } from './grid';
@@ -100,35 +98,25 @@ export type { TooltipProps } from './tooltip';
 export { default as Tree } from './tree';
 export type { TreeProps } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
-export { default as useAllThemes } from './use-all-themes';
-export type { AllThemesConfig } from './use-all-themes';
-export { default as useToasts } from './use-toasts';
-export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
 export { default as User } from './user';
 export type { UserProps } from './user';
 export { default as useBodyScroll } from './use-body-scroll';
 export type { BodyScrollOptions } from './use-body-scroll';
 export { default as useClipboard } from './use-clipboard';
 export type { UseClipboardOptions } from './use-clipboard';
-export { default as useMediaQuery } from './use-media-query';
-export type { ResponsiveOptions, ResponsiveBreakpoint } from './use-media-query';
 export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard';
 export type { KeyboardOptions, UseKeyboardHandler } from './use-keyboard';
 export { default as useInput } from './use-input';
 export { default as useModal } from './use-modal';
 export { default as useTabs } from './use-tabs';
 export { default as useClickAway } from './use-click-away';
-export { default as useCurrentState } from './use-current-state';
-export { default as CssBaseline } from './css-baseline';
-export { default as useTheme } from './use-theme';
-export { default as useClasses } from './use-classes';
+export { default as LinearProgress } from './LinearProgress';
 export { default as useScale } from './use-scale';
 export { withScale, ScalePropKeys, ScaleContext } from './use-scale';
 export type { ScaleProps, ScaleConfig, GetScalePropsFunction, GetAllScalePropsFunction, } from './use-scale';
+export { default as useNetworkStatus } from './use-network-status';
 export { useRect } from './utils/layouts';
 export type { ReactiveDomReact } from './utils/layouts';
-export { default as Highlight } from './shared/highlight';
-export type { HighlightProps } from './shared/highlight';
 export { default as CodeBlock } from './code-block';
 export { default as Skeleton } from './skeleton';
 export * from './login-with';

package/esm/index.js

@@ -24,7 +24,6 @@ export * from './form';
 
 // export * as captcha from './captcha'
 
-export { default as UiProvider } from './ui-provider';
 export { default as Grid } from './grid';
 export { default as Container } from './grid/grid-container';
 export { default as HtmlRenderer } from './html-renderer';
@@ -59,25 +58,22 @@ export { default as Toggle } from './toggle';
 export { default as Tooltip } from './tooltip';
 export { default as Tree } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
-export { default as useAllThemes } from './use-all-themes';
-export { default as useToasts } from './use-toasts';
 export { default as User } from './user';
 export { default as useBodyScroll } from './use-body-scroll';
 export { default as useClipboard } from './use-clipboard';
-export { default as useMediaQuery } from './use-media-query';
 export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard';
 export { default as useInput } from './use-input';
 export { default as useModal } from './use-modal';
 export { default as useTabs } from './use-tabs';
 export { default as useClickAway } from './use-click-away';
-export { default as useCurrentState } from './use-current-state';
-export { default as CssBaseline } from './css-baseline';
-export { default as useTheme } from './use-theme';
-export { default as useClasses } from './use-classes';
+
+// export { default as CssBaseline } from './css-baseline'
+
+export { default as LinearProgress } from './LinearProgress';
 export { default as useScale } from './use-scale';
 export { withScale, ScalePropKeys, ScaleContext } from './use-scale';
+export { default as useNetworkStatus } from './use-network-status';
 export { useRect } from './utils/layouts';
-export { default as Highlight } from './shared/highlight';
 export { default as CodeBlock } from './code-block';
 export { default as Skeleton } from './skeleton';
 

package/esm/input/input-block-label.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 InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
   var children = _ref.children;
   var theme = useTheme();

package/esm/input/input-icon-clear.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 InputIconClear = function InputIconClear(_ref) {
   var onClick = _ref.onClick,
     disabled = _ref.disabled,

package/esm/input/input-label.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 InputLabel = function InputLabel(_ref) {
   var children = _ref.children,
     isRight = _ref.isRight;

package/esm/input/input.js

@@ -8,14 +8,13 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import InputLabel from './input-label';
 import InputBlockLabel from './input-block-label';
 import InputIcon from './input-icon';
 import InputClearIcon from './input-icon-clear';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _extends({}, event, {
     target: el,

package/esm/keyboard/keyboard.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["command", "shift", "option", "ctrl", "children", "className"];
 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 KeyboardComponent = function KeyboardComponent(_ref) {
   var _ref$command = _ref.command,

package/esm/link/link.js

@@ -5,11 +5,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 // "use client"
 
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import LinkIcon from './icon';
 import { addColorAlpha } from '../utils/color';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
     href = _ref$href === void 0 ? '' : _ref$href,

package/esm/list/list-item.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "direction", "justify", "alignItems", "line", "showTitle", "className", "onClick", "leading", "primary", "secondary", "trailing", "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 useClasses from '../use-classes';
 var ListItemComponent = function ListItemComponent(_ref) {
   var children = _ref.children,
     _ref$direction = _ref.direction,

package/esm/loading/loading.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "type", "color", "className", "spaceRatio"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } 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 getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,

package/esm/modal/modal-action.js

@@ -5,11 +5,10 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useImperativeHandle, useMemo, useRef } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import { useModalContext } from './modal-context';
 import Button from '../button/button';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var ModalActionComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/modal/modal-actions.js

@@ -6,7 +6,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useRef, useState } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 var ModalActionsComponent = function ModalActionsComponent(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);

package/esm/modal/modal-content.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "children"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var ModalContentComponent = function ModalContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/modal/modal-subtitle.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 ModalSubtitleComponent = function ModalSubtitleComponent(_ref) {
   var _ref$className = _ref.className,

package/esm/modal/modal-title.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 ModalTitleComponent = function ModalTitleComponent(_ref) {
   var _ref$className = _ref.className,

package/esm/modal/modal-wrapper.js

@@ -5,11 +5,9 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useEffect, useRef } from 'react';
-import useTheme from '../use-theme';
-import CssTransition from '../shared/css-transition';
+import { useTheme, useClasses, CssTransition } from '@helpdice/theme';
 import { isChildElement } from '../utils/collections';
 import useScale from '../use-scale';
-import useClasses from '../use-classes';
 var ModalWrapper = function ModalWrapper(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,

package/esm/modal/modal.js

@@ -8,7 +8,7 @@ import usePortal from '../utils/use-portal';
 import ModalWrapper from './modal-wrapper';
 import ModalAction from './modal-action';
 import ModalActions from './modal-actions';
-import Backdrop from '../shared/backdrop';
+import { Backdrop } from '@helpdice/theme';
 import { ModalContext } from './modal-context';
 import { pickChild } from '../utils/collections';
 import useBodyScroll from '../utils/use-body-scroll';

package/esm/note/note.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "type", "label", "filled", "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 useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getStatusColor = function getStatusColor(type, filled, theme) {
   var colors = {
     secondary: theme.palette.secondary,

package/esm/page/page-header.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "center", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var PageHeaderComponent = function PageHeaderComponent(_ref) {
   var children = _ref.children,
     _ref$center = _ref.center,