@chayns-components/core 5.0.0-beta.998 → 5.0.0

package/lib/esm/components/multi-action-button/action-button/ActionButton.js

@@ -0,0 +1,86 @@
+import { AnimatePresence } from 'motion/react';
+import React from 'react';
+import Icon from '../../icon/Icon';
+import { StyledActionButton, StyledActionContent, StyledIconSlot, StyledLabelWrapper, StyledSecondaryLabel } from './ActionButton.styles';
+import { useTheme } from 'styled-components';
+const LABEL_GAP = 6;
+const LABEL_TRANSITION = {
+  duration: 0.3
+};
+/**
+ * Shared action button UI used by both primary and secondary actions.
+ * Keeps layout and animations consistent while isolating styling details.
+ */
+const ActionButton = ({
+  action,
+  actionType,
+  backgroundColor,
+  isCollapsed,
+  isDisabled,
+  isExpanded,
+  isHidden,
+  isShrunk,
+  isSolo,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  showLabel,
+  shouldUseContentWidth,
+  height
+}) => {
+  const theme = useTheme();
+  const isPrimary = actionType === 'primary';
+  const isSecondary = actionType === 'secondary';
+  const actionColor = action.color ?? theme.text;
+  return /*#__PURE__*/React.createElement(StyledActionButton, {
+    disabled: isDisabled || action.isDisabled,
+    $backgroundColor: backgroundColor,
+    $isCollapsed: isCollapsed,
+    $isExpanded: isSecondary ? isExpanded : undefined,
+    $isHidden: isSecondary ? isHidden : undefined,
+    $isPrimary: isPrimary,
+    $isSecondary: isSecondary,
+    $isShrunk: isPrimary ? isShrunk : undefined,
+    $isSolo: isPrimary ? isSolo : undefined,
+    $pulseColors: action.status?.pulseColors,
+    $height: height,
+    $statusType: action.status?.type,
+    $shouldUseContentWidth: shouldUseContentWidth,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(StyledActionContent, null, /*#__PURE__*/React.createElement(StyledIconSlot, {
+    $height: height
+  }, typeof action.icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    icons: [action.icon],
+    color: actionColor,
+    size: 18
+  }) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, showLabel && /*#__PURE__*/React.createElement(StyledLabelWrapper, {
+    animate: {
+      opacity: 1,
+      width: 'auto',
+      marginLeft: LABEL_GAP
+    },
+    exit: {
+      opacity: 0,
+      width: 0,
+      marginLeft: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0,
+      marginLeft: 0
+    },
+    transition: LABEL_TRANSITION
+  }, /*#__PURE__*/React.createElement(StyledSecondaryLabel, {
+    style: {
+      color: actionColor
+    }
+  }, action.label)))));
+};
+ActionButton.displayName = 'ActionButton';
+export default ActionButton;
+//# sourceMappingURL=ActionButton.js.map

package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","useTheme","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","theme","isPrimary","isSecondary","actionColor","color","text","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? theme.text;\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={18} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js

@@ -0,0 +1,212 @@
+import { motion } from 'motion/react';
+import styled, { css, keyframes } from 'styled-components';
+import { MultiActionButtonStatusType } from '../MultiActionButton.types';
+const pulse = (color1, color2) => keyframes`
+    0% {
+        background: ${color1};
+    }
+    50% {
+        background: ${color2};
+    }
+    100% {
+        background: ${color1};
+    }
+`;
+export const StyledActionButton = styled.button`
+    align-items: center;
+    border: none;
+    border-radius: ${({
+  $height
+}) => $height / 2}px;
+    cursor: pointer;
+    display: inline-flex;
+    flex: 1 1 auto;
+    height: ${({
+  $height
+}) => $height}px;
+    line-height: 22px;
+    min-height: ${({
+  $height
+}) => $height}px;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    transition:
+        background-color 0.2s ease,
+        border-radius 0.2s ease,
+        color 0.2s ease,
+        flex-grow 0.2s ease,
+        margin-left 0.2s ease,
+        opacity 0.2s ease,
+        padding 0.2s ease,
+        width 0.2s ease;
+    user-select: none;
+    white-space: nowrap;
+
+    background-color: ${({
+  $backgroundColor,
+  theme
+}) => $backgroundColor || theme?.primary || '#000'};
+    color: #fff;
+
+    /* When width is content-driven, avoid flex stretching. */
+    ${({
+  $shouldUseContentWidth
+}) => $shouldUseContentWidth && css`
+            flex: 0 1 auto;
+        `}
+
+    /* Expanded secondary button when width is not content-driven. */
+    ${({
+  $isExpanded,
+  $shouldUseContentWidth
+}) => $isExpanded && !$shouldUseContentWidth && css`
+            flex: 1 1 auto;
+            min-width: 0;
+        `}
+
+    /* Collapsed state clamps to a fixed icon size. */
+    ${props => props.$isCollapsed && css`
+            flex: 0 0 auto;
+            padding: 0;
+            width: ${props.$height}px;
+        `}
+
+    /* Primary action stretches unless content-driven. */
+    ${({
+  $isPrimary,
+  $isCollapsed,
+  $shouldUseContentWidth
+}) => $isPrimary && !$isCollapsed && !$shouldUseContentWidth && css`
+            flex: 1 1 auto;
+            min-width: 0;
+        `}
+
+    /* Shrink the primary action to icon size when secondary is expanded. */
+    ${props => props.$isShrunk && !props.$shouldUseContentWidth && css`
+            flex: 0 0 auto;
+            padding: 0;
+            width: ${props.$height}px;
+        `}
+
+    /* Keep secondary icon-only when collapsed and not expanded. */
+    ${props => props.$isSecondary && !props.$isExpanded && !props.$shouldUseContentWidth && css`
+            flex: 0 0 auto;
+            padding: 0;
+            width: ${props.$height}px;
+        `}
+
+    ${({
+  $isSecondary
+}) => $isSecondary && css`
+            margin-left: 2px;
+        `}
+
+    /* Fully hide the secondary action when the whole control is collapsed. */
+    ${({
+  $isHidden
+}) => $isHidden && css`
+            margin-left: 0;
+            opacity: 0;
+            pointer-events: none;
+            width: 0;
+        `}
+
+    /* Joining both buttons into a pill shape. */
+    ${({
+  $isPrimary
+}) => $isPrimary && css`
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        `}
+
+    ${props => props.$isPrimary && props.$isCollapsed && css`
+            border-bottom-right-radius: ${props.$height / 2}px;
+            border-top-right-radius: ${props.$height / 2}px;
+        `}
+
+    ${({
+  $isSecondary
+}) => $isSecondary && css`
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        `}
+
+    ${props => props.$isSolo && css`
+            border-radius: ${props.$height / 2}px;
+        `}
+
+    ${props => props.$isCollapsed && css`
+            border-radius: ${props.$height / 2}px;
+        `}
+
+    /* Optional pulse overlay used by status. */
+    ${({
+  $statusType,
+  $pulseColors
+}) => $statusType === MultiActionButtonStatusType.Pulse && css`
+            overflow: hidden;
+
+            &::before {
+                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}
+                    1.6s ease-in-out infinite;
+                border-radius: 3px;
+                content: '';
+                inset: 0;
+                pointer-events: none;
+                position: absolute;
+            }
+        `}
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.5;
+    }
+
+    &:hover:not(:disabled) {
+        background-color: ${({
+  $backgroundColor,
+  theme
+}) => `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};
+    }
+`;
+export const StyledActionContent = styled.span`
+    align-items: center;
+    display: inline-flex;
+    flex: 1 1 auto;
+    gap: 0;
+    min-width: 0;
+    position: relative;
+    z-index: 1;
+`;
+export const StyledIconSlot = styled.span`
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: ${({
+  $height
+}) => $height}px;
+    justify-content: center;
+    width: ${({
+  $height
+}) => $height}px;
+`;
+export const StyledLabelWrapper = styled(motion.span)`
+    /* The wrapper animates width/margin to avoid layout jumps. */
+    display: inline-flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-align: left;
+`;
+export const StyledSecondaryLabel = styled.span`
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    padding-right: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+//# sourceMappingURL=ActionButton.styles.js.map

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 2px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/number-input/NumberInput.js

@@ -1,22 +1,22 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';
 import { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';
 import Input from '../input/Input';
-const NumberInput = _ref => {
-  let {
-    isDecimalInput,
-    isMoneyInput,
-    isTimeInput,
-    isInvalid,
-    maxNumber = Infinity,
-    value,
-    placeholder,
-    onBlur,
-    isDisabled,
-    onChange,
-    shouldShowOnlyBottomBorder,
-    minNumber = -Infinity
-  } = _ref;
+const NumberInput = ({
+  isDecimalInput,
+  isMoneyInput,
+  isTimeInput,
+  isInvalid,
+  maxNumber = Infinity,
+  value,
+  shouldTriggerChangeOnFormat = true,
+  placeholder,
+  onBlur,
+  isDisabled,
+  onChange,
+  shouldShowOnlyBottomBorder,
+  minNumber = -Infinity
+}) => {
   // the plainText will be shown in the input, when it is in focus
   const [plainText, setPlainText] = useState('');
   // the formattedValue will be shown in the input, when it is not in focus
@@ -25,8 +25,10 @@ const NumberInput = _ref => {
   const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState(false);
   const [isValueInvalid, setIsValueInvalid] = useState(false);
   const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
+  const initialInputRef = useRef(true);
   const onLocalChange = event => {
     const newValue = event.target.value;
+    initialInputRef.current = false;
     const sanitizedValueString = newValue
     // Removes everything except numbers, commas and points
     .replace(NUMBER_CLEAR_REGEX, '');
@@ -56,7 +58,7 @@ const NumberInput = _ref => {
     }
   };
   const onLocalBlur = () => {
-    const sanitizedValue = plainText.length === 0 ? '0' : plainText;
+    const sanitizedValue = plainText;
     let newIsInvalid = false;
     let parsedNumber = null;
     if (!isTimeInput) {
@@ -64,7 +66,7 @@ const NumberInput = _ref => {
         stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
         decimals: isMoneyInput ? 2 : undefined
       });
-      if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+      if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
         newIsInvalid = true;
       }
       setIsValueInvalid(newIsInvalid);
@@ -77,14 +79,14 @@ const NumberInput = _ref => {
     setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);
     setPlainText(newStringValue.replaceAll('.', ''));
     setHasFocus(false);
-    if (typeof onChange === 'function') {
+    if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {
       onChange(newStringValue.replaceAll('.', ''));
     }
     if (typeof onBlur === 'function') {
       if (isTimeInput) {
         onBlur(newStringValue, newIsInvalid);
       } else {
-        onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);
+        onBlur(parsedNumber, newIsInvalid);
       }
     }
   };
@@ -94,7 +96,7 @@ const NumberInput = _ref => {
     setPlainText(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));
 
     // This will update the external state
-    if (typeof onChange === 'function') {
+    if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {
       onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));
     }
     setIsValueInvalid(false);
@@ -112,7 +114,11 @@ const NumberInput = _ref => {
 
       // checks, if a given number is invalid, if the input is not in focus
       if (!hasFocus) {
-        setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
+        if (parsedNumber === null && initialInputRef.current) {
+          setIsValueInvalid(false);
+        } else {
+          setIsValueInvalid(parsedNumber === null || parsedNumber > maxNumber || parsedNumber < minNumber);
+        }
       }
     }
     setFormattedValue(plainText.length === 0 ? '' : `${formateNumber({

package/lib/esm/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the value is invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    isInvalid,\n    maxNumber = Infinity,\n    value,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n    const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        if (\n            isTimeInput &&\n            ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n                (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n        ) {\n            return;\n        }\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        if (\n            (maxNumber && Number(valueToCheck) > maxNumber) ||\n            (minNumber && Number(valueToCheck) < minNumber)\n        ) {\n            return;\n        }\n\n        if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n            setShouldRemainPlaceholder(true);\n        } else {\n            setShouldRemainPlaceholder(false);\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let newIsInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n                newIsInvalid = true;\n            }\n\n            setIsValueInvalid(newIsInvalid);\n        }\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? sanitizedValue : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n            }\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText\n                    .replace(',', '.')\n                    .replaceAll(':', '')\n                    .replace('€', '')\n                    .replaceAll(' ', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : `${formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  })}${isMoneyInput ? ' €' : ''}`,\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value.replace('€', '').replaceAll(' ', ''));\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldRemainPlaceholder={shouldRemainPlaceholder}\n            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n            shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"NumberInput.js","names":["React","useEffect","useRef","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","shouldTriggerChangeOnFormat","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","initialInputRef","onLocalChange","event","newValue","target","current","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the value is invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the onChange function should be triggert when the value is formatted on the focus or blur\n     */\n    shouldTriggerChangeOnFormat?: boolean;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    isInvalid,\n    maxNumber = Infinity,\n    value,\n    shouldTriggerChangeOnFormat = true,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n    const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const initialInputRef = useRef(true);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        initialInputRef.current = false;\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        if (\n            isTimeInput &&\n            ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n                (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n        ) {\n            return;\n        }\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        if (\n            (maxNumber && Number(valueToCheck) > maxNumber) ||\n            (minNumber && Number(valueToCheck) < minNumber)\n        ) {\n            return;\n        }\n\n        if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n            setShouldRemainPlaceholder(true);\n        } else {\n            setShouldRemainPlaceholder(false);\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText;\n        let newIsInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (\n                parsedNumber &&\n                parsedNumber !== 0 &&\n                (parsedNumber > maxNumber || parsedNumber < minNumber)\n            ) {\n                newIsInvalid = true;\n            }\n\n            setIsValueInvalid(newIsInvalid);\n        }\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? sanitizedValue : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber, newIsInvalid);\n            }\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n            onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText\n                    .replace(',', '.')\n                    .replaceAll(':', '')\n                    .replace('€', '')\n                    .replaceAll(' ', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                if (parsedNumber === null && initialInputRef.current) {\n                    setIsValueInvalid(false);\n                } else {\n                    setIsValueInvalid(\n                        parsedNumber === null ||\n                            parsedNumber > maxNumber ||\n                            parsedNumber < minNumber,\n                    );\n                }\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : `${formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  })}${isMoneyInput ? ' €' : ''}`,\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value.replace('€', '').replaceAll(' ', ''));\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldRemainPlaceholder={shouldRemainPlaceholder}\n            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n            shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/page-provider/PageProvider.js

@@ -1,32 +1,46 @@
-import { getEnvironment, RuntimeEnviroment } from 'chayns-api';
+import { RuntimeEnviroment, useEnvironment } from 'chayns-api';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { useUsableHeight } from '../../utils/pageProvider';
 import ColorSchemeProvider from '../color-scheme-provider/ColorSchemeProvider';
 import { StyledPageProvider } from './PageProvider.styles';
+
+/**
+ * Props for the PageProvider component.
+ * @description
+ * This interface defines the props that can be passed to the PageProvider component
+ * for controlling the layout and styling behavior.
+ * @example
+ * <PageProvider shouldRemovePadding={true}>
+ *   {children}
+ * </PageProvider>
+ */
+
 const GlobalStyle = createGlobalStyle`
   *, *::before, *::after {
     box-sizing: border-box;
   }
 `;
-const PageProvider = _ref => {
-  let {
-    children,
-    color,
-    colorMode,
-    cssVariables = {},
-    secondaryColor,
-    siteId,
-    style = {},
-    designSettings,
-    shouldRemovePadding,
-    shouldUseUsableHeight
-  } = _ref;
+const PageProvider = ({
+  children,
+  color,
+  colorMode,
+  secondaryColor,
+  siteId,
+  style = {},
+  shouldReduceUsableHeightByCoverHeight = false,
+  shouldRemovePadding = false,
+  shouldUseUsableHeight = false,
+  iconColor,
+  customVariables
+}) => {
   const {
     runtimeEnvironment
-  } = getEnvironment();
+  } = useEnvironment();
+  const usableHeight = useUsableHeight({
+    shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
+  });
   const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
-  const usableHeight = useUsableHeight();
   return /*#__PURE__*/React.createElement(StyledPageProvider, {
     className: "page-provider",
     $shouldUsePadding: shouldUsePadding,
@@ -40,8 +54,8 @@ const PageProvider = _ref => {
       ...style,
       height: '100%'
     } : style,
-    designSettings: designSettings,
-    cssVariables: cssVariables
+    customVariables: customVariables,
+    iconColor: iconColor
   }, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
 };
 PageProvider.displayName = 'PageProvider';

package/lib/esm/components/page-provider/PageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProvider.js","names":["getEnvironment","RuntimeEnviroment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","usableHeight","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment, RuntimeEnviroment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Whether the padding should be removed.\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Whether the usable height should be used.\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    designSettings,\n    shouldRemovePadding,\n    shouldUseUsableHeight,\n}) => {\n    const { runtimeEnvironment } = getEnvironment();\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\n\n    const usableHeight = useUsableHeight();\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                designSettings={designSettings}\n                cssVariables={cssVariables}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,iBAAiB,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM;IAAEW;EAAmB,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAC/C,MAAMqB,gBAAgB,GAClB,CAACH,mBAAmB,IACpB,CAAC,CAACjB,iBAAiB,CAACqB,cAAc,EAAErB,iBAAiB,CAACsB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EJ,kBACJ,CAAC;EAEL,MAAMK,YAAY,GAAGrB,eAAe,CAAC,CAAC;EAEtC,oBACIF,KAAA,CAAAwB,aAAA,CAACpB,kBAAkB;IACfqB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEP,gBAAiB;IACpCQ,aAAa,EAAEV,qBAAqB,GAAGM,YAAY,GAAGK;EAAU,gBAEhE5B,KAAA,CAAAwB,aAAA,CAACrB,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBG,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEe,MAAM,EAAE;IAAO,CAAC,GAAGf,KAAM;IACpEC,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBR,KAAA,CAAAwB,aAAA,CAACnB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}
+{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","usableHeight","shouldReduceByCoverHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGnB,cAAc,CAAC,CAAC;EAE/C,MAAMoB,YAAY,GAAGjB,eAAe,CAAC;IACjCkB,yBAAyB,EAAEP;EAC/B,CAAC,CAAC;EAEF,MAAMQ,gBAAgB,GAClB,CAACP,mBAAmB,IACpB,CAAC,CAAChB,iBAAiB,CAACwB,cAAc,EAAExB,iBAAiB,CAACyB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EN,kBACJ,CAAC;EAEL,oBACIlB,KAAA,CAAAyB,aAAA,CAACrB,kBAAkB;IACfsB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEb,qBAAqB,GAAGI,YAAY,GAAGU;EAAU,gBAEhE7B,KAAA,CAAAyB,aAAA,CAACtB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEkB,MAAM,EAAE;IAAO,CAAC,GAAGlB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBT,QACgB,CAAC,eACtBP,KAAA,CAAAyB,aAAA,CAACpB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACyB,WAAW,GAAG,cAAc;AAEzC,eAAezB,YAAY","ignoreList":[]}