@via-profit/ui-kit 0.5.0 → 0.6.0

package/esm/Switch/SwitchDot.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import useSwitchColor from './useSwitchColor';
+import { elevation } from '../ThemeProvider/tokens';
 const ToggleContainer = styled.span `
   display: inline-flex;
   align-items: center;
@@ -36,10 +37,7 @@ const Dot = styled.span `
   width: 1.4rem;
   height: 1.4rem;
   border-radius: 50%;
-  box-shadow:
-    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
-    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
-    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  box-shadow: ${({ theme }) => elevation(theme, 'control')};
   background-color: ${({ $color, $checked, theme }) => {
     switch (true) {
         case $checked:

package/esm/Switch/index.js

@@ -18,9 +18,8 @@ import Track from './SwitchTrack';
 import Wrapper from './SwitchWrapper';
 import ErrorText from './SwitchErrorText';
 import Asterisk from './SwitchAsterisk';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const Switch = (props, ref) => {
-    const _a = useThemeProps('Switch', props), { checked, onChange, defaultChecked, overrides, disabled, labelPosition, children, color, name, error, errorText, requiredAsterisk } = _a, nativeProps = __rest(_a, ["checked", "onChange", "defaultChecked", "overrides", "disabled", "labelPosition", "children", "color", "name", "error", "errorText", "requiredAsterisk"]);
+    const { checked, onChange, defaultChecked, overrides, disabled, labelPosition, children, color, name, error, errorText, requiredAsterisk } = props, nativeProps = __rest(props, ["checked", "onChange", "defaultChecked", "overrides", "disabled", "labelPosition", "children", "color", "name", "error", "errorText", "requiredAsterisk"]);
     const [internalChecked, setInternalChecked] = React.useState(typeof defaultChecked !== 'undefined' ? defaultChecked : false);
     const overridesMap = React.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,

package/esm/Table/Table.js

@@ -26,7 +26,7 @@ const StyledTable = styled.table `
   overflow: hidden;
   background: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => elevation(theme, 'surface', `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`)};
+  box-shadow: ${({ theme }) => elevation(theme, 'surface')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   font-size: 1em;
   ${({ $fullWidth }) => $fullWidth &&

package/esm/Table/TableCaption.js

@@ -11,9 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../ThemeProvider/tokens';
 const StyledTableCaption = styled.caption `
   text-align: start;
-  padding: 0.8em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'item', 1.2);
+    return `${y} ${x}`;
+}};
   font-size: 1.2em;
   font-weight: 700;
 `;

package/esm/Table/TableCell.js

@@ -11,10 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding, BORDER_WIDTH } from '../ThemeProvider/tokens';
 const StyledTableCell = styled.td `
   vertical-align: inherit;
-  padding: 0.8em;
-  border-bottom: 0.1em solid ${({ theme }) => theme.color.surface.darken(20).toString()};
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'item');
+    return `${y} ${x}`;
+}};
+  border-bottom: ${BORDER_WIDTH} solid ${({ theme }) => theme.color.surface.darken(20).toString()};
 `;
 const TableCell = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/esm/Table/TableFooter.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { BORDER_WIDTH } from '../ThemeProvider/tokens';
 const StyledTableFooter = styled.tfoot `
   vertical-align: middle;
 
@@ -22,7 +23,7 @@ const StyledTableFooter = styled.tfoot `
 
   & > tr:first-of-type > th,
   & > tr:first-of-type > td {
-    border-top: 0.1em solid ${({ theme }) => theme.color.surface.darken(30).toString()};
+    border-top: ${BORDER_WIDTH} solid ${({ theme }) => theme.color.surface.darken(30).toString()};
   }
 `;
 const TableFooter = (props, ref) => {

package/esm/Table/TableHeaderCell.js

@@ -11,16 +11,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding, BORDER_WIDTH } from '../ThemeProvider/tokens';
 /**
  * The column header inside `<TableHeader>` or the row header (`scope="row"`) inside `<TableBody>`.
  * The role (columnheader/rowheader) is implied by the position, so no explicit role
  */
 const StyledTableHeaderCell = styled.th `
   vertical-align: inherit;
-  padding: 0.8em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'item');
+    return `${y} ${x}`;
+}};
   text-align: start;
   font-weight: 600;
-  border-bottom: 0.1em solid ${({ theme }) => theme.color.surface.darken(20).toString()};
+  border-bottom: ${BORDER_WIDTH} solid ${({ theme }) => theme.color.surface.darken(20).toString()};
 `;
 const TableHeaderCell = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/esm/Tabs/Tab.js

@@ -13,7 +13,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useTabsContext } from './context';
-import { themeFocusRing } from '../ThemeProvider/tokens';
+import { themeFocusRing, themePadding } from '../ThemeProvider/tokens';
 const StyledTab = styled.button `
   position: relative;
   display: inline-flex;
@@ -23,7 +23,10 @@ const StyledTab = styled.button `
   flex-shrink: 0;
   box-sizing: border-box;
   margin: 0;
-  padding: 0.75em 1.1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'item');
+    return `${y} ${x}`;
+}};
   border: 0;
   background: none;
   font: inherit;

package/esm/Tabs/Tabs.js

@@ -13,7 +13,6 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { TabsContext } from './context';
 import useTabsColor from './useTabsColor';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const StyledTabs = styled.div `
   display: ${({ $orientation }) => ($orientation === 'vertical' ? 'flex' : 'block')};
   align-items: flex-start;
@@ -23,7 +22,7 @@ const StyledTabs = styled.div `
  */
 const escapeId = (value) => value.replace(/[^\w-]/g, char => `_${char.charCodeAt(0).toString(16)}`);
 const Tabs = (props, ref) => {
-    const _a = useThemeProps('Tabs', props), { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = _a, nativeProps = __rest(_a, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
+    const { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
     const isControlled = typeof value !== 'undefined';
     const [internalValue, setInternalValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const currentValue = isControlled ? value : internalValue;

package/esm/TextArea/TextAreaInput.js

@@ -12,10 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { fieldPadding, FIELD_TEXT_SCALE } from '../ThemeProvider/tokens';
 const TextareaNative = styled.textarea `
   resize: none;
-  padding: 1em 1.2em;
+  padding: ${({ theme }) => {
+    const { y, x } = fieldPadding(theme, FIELD_TEXT_SCALE);
+    return `${y} ${x}`;
+}};
   font-size: 1em;
+  line-height: inherit;
   /* Form controls do not inherit the font by default (textarea is monospace) */
   font-family: inherit;
   background: none;

package/esm/TextArea/index.js

@@ -17,9 +17,8 @@ import InputWrapper from '../TextField/TextFieldInputWrapper';
 import Input from '../TextArea/TextAreaInput';
 import ErrorText from '../TextField/TextFieldErrorText';
 import IconWrapper from './TextAreaIconWrapper';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const TextArea = (props, ref) => {
-    const _a = useThemeProps('TextArea', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     // useId is stable between server and client renders
     const generatedID = React.useId();

package/esm/TextField/TextFieldInput.js

@@ -12,9 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { fieldPadding, FIELD_TEXT_SCALE } from '../ThemeProvider/tokens';
 const Input = styled.input `
-  padding: 1em 1.2em;
+  padding: ${({ theme }) => {
+    const { y, x } = fieldPadding(theme, FIELD_TEXT_SCALE);
+    return `${y} ${x}`;
+}};
   font-size: 1em;
+  line-height: inherit;
   /* Form controls do not inherit the font by default (textarea is monospace) */
   font-family: inherit;
   background: none;

package/esm/TextField/TextFieldInputWrapper.js

@@ -12,17 +12,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { CONTROL_LINE_HEIGHT, FIELD_TEXT_SCALE, fieldBorder } from '../ThemeProvider/tokens';
 const Wrapper = styled.div `
   display: flex;
   align-items: stretch;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  border: 1px solid;
+  border: ${fieldBorder(FIELD_TEXT_SCALE)} solid;
   outline: 1px solid transparent;
   border-color: ${({ theme }) => theme.isDark
     ? theme.color.textPrimary.darken(100).toString()
     : theme.color.textPrimary.lighten(150).toString()};
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-  font-size: 0.9em;
+  font-size: ${FIELD_TEXT_SCALE}em;
+  /* The line of the control: the field has the height of the button */
+  line-height: calc(${CONTROL_LINE_HEIGHT} / ${FIELD_TEXT_SCALE});
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
   transition: all 180ms ease-out 0s;

package/esm/TextField/index.js

@@ -17,7 +17,6 @@ import InputWrapper from './TextFieldInputWrapper';
 import Input from './TextFieldInput';
 import ErrorText from './TextFieldErrorText';
 import IconWrapper from './TextFieldIconWrapper';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 export * from './TextFieldContainer';
 export * from './TextFieldLabel';
 export * from './TextFieldLabelAsterisk';
@@ -35,7 +34,7 @@ const defailtOverrides = {
     InputWrapper,
 };
 const TextField = React.forwardRef((props, ref) => {
-    const _a = useThemeProps('TextField', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     // useId is stable between server and client renders
     const generatedID = React.useId();

package/esm/ThemeProvider/createTheme.js

@@ -11,10 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import Color from '../Color';
 export const createTheme = overrides => {
-    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing, components, typography, focusRing, elevation } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing", "components", "typography", "focusRing", "elevation"]);
-    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, components: components || {}, 
+    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing, padding, typography, focusRing, elevation } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing", "padding", "typography", "focusRing", "elevation"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, 
         // Empty by default: the components keep their own fonts, focus and shadows
-        typography: Object.assign({}, typography), focusRing: Object.assign({}, focusRing), elevation: Object.assign({}, elevation), fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing) });
+        typography: Object.assign({}, typography), focusRing: Object.assign({}, focusRing), elevation: Object.assign({}, elevation), fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing), padding: {
+            control: Object.assign({ y: '0.75em', x: '1em' }, padding === null || padding === void 0 ? void 0 : padding.control),
+            item: Object.assign({ y: '0.6em', x: '0.8em' }, padding === null || padding === void 0 ? void 0 : padding.item),
+            container: Object.assign({ y: '1em', x: '1em' }, padding === null || padding === void 0 ? void 0 : padding.container),
+        } });
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     /* @ts-ignore */
     const defaultColors = {

package/esm/ThemeProvider/index.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { ThemeProvider as EmotionProvider, useTheme } from '@emotion/react';
 export { useTheme };
 export * from './createTheme';
-export * from './components';
-export { default as useThemeProps } from './useThemeProps';
 export * from './tokens';
 const ThemeProvider = props => {
     const { children, theme } = props;

package/esm/ThemeProvider/tokens.js

@@ -21,6 +21,59 @@ export const themeFocusRing = (theme, selector = '&:focus-visible') => {
   `;
 };
 /**
- * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ * The default shadows of the levels: the components of one level have the same shadow.
+ * In `px`, not in `em`: the tooltip and the toast have a smaller font, but the same shadow as the menu
  */
-export const elevation = (theme, level, own) => { var _a; return (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own; };
+export const defaultElevation = (theme) => ({
+    popup: `0 8px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`,
+    surface: `0 8px 32px -13px ${theme.color.surface.darken(100).alpha(0.4).toString()}`,
+    control: `0 1px 3px ${theme.color.surface.darken(100).alpha(0.35).toString()}`,
+});
+/**
+ * The shadow of the level: the `elevation` of the theme or the default shadow of the level.
+ * `own` replaces the default shadow, the shadow of the theme wins over both
+ */
+export const elevation = (theme, level, own) => { var _a, _b; return (_b = (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own) !== null && _b !== void 0 ? _b : defaultElevation(theme)[level]; };
+/**
+ * The height of the text line in the controls, in the `em` of the control. Set as a length,
+ * the line height is inherited as is by the text of any size: the label of the button and the value of the field
+ */
+export const CONTROL_LINE_HEIGHT = '1.2em';
+/**
+ * The width of the borders of the components: `1px` at the font size of `16px`.
+ * In `em`: the border grows together with the font, and at the usual sizes the browser draws `1px`
+ */
+export const BORDER_WIDTH = '0.0625em';
+/**
+ * The border of the buttons. The standard and the plain buttons have no border:
+ * their padding is larger by this width, so all the variants have the same size
+ */
+export const CONTROL_BORDER = BORDER_WIDTH;
+/**
+ * The size of the text in the fields (TextField, TextArea, Selectbox) relative to the control
+ */
+export const FIELD_TEXT_SCALE = 0.9;
+/**
+ * The height of the one-line control: the icon buttons are squares of this size
+ */
+export const controlHeight = (theme) => `calc(${CONTROL_LINE_HEIGHT} + 2 * ${theme.padding.control.y} + 2 * ${CONTROL_BORDER})`;
+/**
+ * The border of the field: the border of the buttons in the `em` of the field with the font size `fontScale`
+ */
+export const fieldBorder = (fontScale = 1) => `calc(${CONTROL_BORDER} / ${fontScale})`;
+/**
+ * The padding of the field with the `fieldBorder`, so the field has the height of the button.
+ * `fontScale` is the font size of the element relative to the control: the `em` of the padding are its own
+ */
+export const fieldPadding = (theme, fontScale = 1) => themePadding(theme, 'control', fontScale);
+/**
+ * The padding of the class for the element with its own font size.
+ * `fontScale` is the font size of the element relative to the parent: the padding is in the `em` of the parent,
+ * so the header with a larger font has the same padding as the content under it
+ */
+export const themePadding = (theme, kind, fontScale = 1) => {
+    const { y, x } = theme.padding[kind];
+    return fontScale === 1
+        ? { y, x }
+        : { y: `calc(${y} / ${fontScale})`, x: `calc(${x} / ${fontScale})` };
+};

package/esm/Toast/ToastCard.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
-import { themeFocusRing, elevation } from '../ThemeProvider/tokens';
+import { themeFocusRing, elevation, themePadding } from '../ThemeProvider/tokens';
 export const TOAST_ANIMATION_MS = 200;
 /**
  * The toasts slide from the edge of the screen they are attached to
@@ -35,12 +35,15 @@ const StyledCard = styled.div `
   width: max-content;
   max-width: 100%;
   min-width: 14em;
-  padding: 0.75em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `calc(${y} * 0.75) ${x}`;
+}};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.5}em;
   border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => elevation(theme, 'popup', `0 0.5em 1.5em rgba(0, 0, 0, ${theme.isDark ? 0.5 : 0.14})`)};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
   font-size: 0.875em;
   line-height: 1.4;
   pointer-events: auto;

package/esm/Toast/ToastContainer.js

@@ -8,7 +8,6 @@ import CloseButton from './ToastCloseButton';
 import Action from './ToastAction';
 import ToastItem from './ToastItem';
 import { toastStore } from './store';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const POSITIONS = [
     'top-left',
     'top-center',
@@ -85,7 +84,7 @@ const useWindowFocused = () => {
     return isFocused;
 };
 const ToastContainer = props => {
-    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = useThemeProps('Toast', props);
+    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
     const theme = useTheme();
     const allToasts = React.useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getServerSnapshot);
     const toasts = React.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);

package/esm/Tooltip/TooltipContainer.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
+import { elevation } from '../ThemeProvider/tokens';
 const appear = keyframes `
   from {
     opacity: 0;
@@ -33,6 +34,7 @@ const StyledContainer = styled.div `
   overflow-wrap: break-word;
   /* Inverted colors: dark on the light theme, light on the dark one */
   background-color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
   color: ${({ theme }) => theme.color.surface.toString()};
   animation: ${appear} 120ms ease-out;
 

package/esm/Tooltip/index.js

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import Popper from '../Popper';
 import Container from './TooltipContainer';
 import Arrow from './TooltipArrow';
-import useThemeProps from '../ThemeProvider/useThemeProps';
+import getElementRef from '../utils/getElementRef';
 /**
  * Pointer types that have the hover. A tap on the touch screen fires `pointerenter` too,
  * the tooltip would flash on every tap
@@ -40,7 +40,7 @@ const setRef = (ref, value) => {
 const isEmptyTitle = (title) => title === null || typeof title === 'undefined' || title === false || title === '';
 const Tooltip = props => {
     var _a;
-    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = useThemeProps('Tooltip', props);
+    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = props;
     const theme = useTheme();
     const generatedId = `tooltip-${React.useId().replace(/:/g, '')}`;
     const tooltipId = id || generatedId;
@@ -132,8 +132,7 @@ const Tooltip = props => {
     }
     const child = children;
     const childProps = child.props;
-    // React 18 keeps the ref of the element outside of props
-    childRefRef.current = child.ref;
+    childRefRef.current = getElementRef(child);
     if (isEmpty) {
         return child;
     }

package/esm/utils/getElementRef.js

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Returns the ref of the element.
+ * React 19 keeps the ref in props and warns when `element.ref` is read,
+ * React 18 keeps it outside of props
+ */
+const getElementRef = (element) => {
+    if (parseInt(React.version, 10) >= 19) {
+        return element.props.ref;
+    }
+    return element.ref;
+};
+export default getElementRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -820,6 +820,46 @@
       "import": "./esm/NoSSR/index.js",
       "require": "./NoSSR/index.js"
     },
+    "./Pagination/PaginationContainer": {
+      "types": "./Pagination/PaginationContainer.d.ts",
+      "import": "./esm/Pagination/PaginationContainer.js",
+      "require": "./Pagination/PaginationContainer.js"
+    },
+    "./Pagination/PaginationGap": {
+      "types": "./Pagination/PaginationGap.d.ts",
+      "import": "./esm/Pagination/PaginationGap.js",
+      "require": "./Pagination/PaginationGap.js"
+    },
+    "./Pagination/PaginationIcons": {
+      "types": "./Pagination/PaginationIcons.d.ts",
+      "import": "./esm/Pagination/PaginationIcons.js",
+      "require": "./Pagination/PaginationIcons.js"
+    },
+    "./Pagination/PaginationItem": {
+      "types": "./Pagination/PaginationItem.d.ts",
+      "import": "./esm/Pagination/PaginationItem.js",
+      "require": "./Pagination/PaginationItem.js"
+    },
+    "./Pagination/getPaginationItems": {
+      "types": "./Pagination/getPaginationItems.d.ts",
+      "import": "./esm/Pagination/getPaginationItems.js",
+      "require": "./Pagination/getPaginationItems.js"
+    },
+    "./Pagination/index": {
+      "types": "./Pagination/index.d.ts",
+      "import": "./esm/Pagination/index.js",
+      "require": "./Pagination/index.js"
+    },
+    "./Pagination": {
+      "types": "./Pagination/index.d.ts",
+      "import": "./esm/Pagination/index.js",
+      "require": "./Pagination/index.js"
+    },
+    "./Pagination/usePagination": {
+      "types": "./Pagination/usePagination.d.ts",
+      "import": "./esm/Pagination/usePagination.js",
+      "require": "./Pagination/usePagination.js"
+    },
     "./PhoneField/CountryFlagComponent": {
       "types": "./PhoneField/CountryFlagComponent.d.ts",
       "import": "./esm/PhoneField/CountryFlagComponent.js",
@@ -1375,11 +1415,6 @@
       "import": "./esm/TextField/index.js",
       "require": "./TextField/index.js"
     },
-    "./ThemeProvider/components": {
-      "types": "./ThemeProvider/components.d.ts",
-      "import": "./esm/ThemeProvider/components.js",
-      "require": "./ThemeProvider/components.js"
-    },
     "./ThemeProvider/createTheme": {
       "types": "./ThemeProvider/createTheme.d.ts",
       "import": "./esm/ThemeProvider/createTheme.js",
@@ -1400,11 +1435,6 @@
       "import": "./esm/ThemeProvider/tokens.js",
       "require": "./ThemeProvider/tokens.js"
     },
-    "./ThemeProvider/useThemeProps": {
-      "types": "./ThemeProvider/useThemeProps.d.ts",
-      "import": "./esm/ThemeProvider/useThemeProps.js",
-      "require": "./ThemeProvider/useThemeProps.js"
-    },
     "./Toast/ToastAction": {
       "types": "./Toast/ToastAction.d.ts",
       "import": "./esm/Toast/ToastAction.js",
@@ -1575,6 +1605,11 @@
       "import": "./esm/utils/TabManager.js",
       "require": "./utils/TabManager.js"
     },
+    "./utils/getElementRef": {
+      "types": "./utils/getElementRef.d.ts",
+      "import": "./esm/utils/getElementRef.js",
+      "require": "./utils/getElementRef.js"
+    },
     "./utils/spacing": {
       "types": "./utils/spacing.d.ts",
       "import": "./esm/utils/spacing.js",

package/utils/getElementRef.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Returns the ref of the element.
+ * React 19 keeps the ref in props and warns when `element.ref` is read,
+ * React 18 keeps it outside of props
+ */
+declare const getElementRef: <T>(element: React.ReactElement) => React.Ref<T> | undefined;
+export default getElementRef;

package/utils/getElementRef.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Returns the ref of the element.
+ * React 19 keeps the ref in props and warns when `element.ref` is read,
+ * React 18 keeps it outside of props
+ */
+const getElementRef = (element) => {
+    if (parseInt(react_1.default.version, 10) >= 19) {
+        return element.props.ref;
+    }
+    return element.ref;
+};
+exports.default = getElementRef;