@dnb/eufemia 10.2.0 → 10.3.0

package/components/slider/SliderProvider.js

@@ -24,47 +24,44 @@ export function SliderProvider(localProps) {
     vertical: null
   }), context === null || context === void 0 ? void 0 : context.Slider));
   const [_id] = React.useState(makeUniqueId);
-
   if (!allProps.id) {
     allProps.id = _id;
   }
-
   const {
-    step,
-    label,
-    labelDirection,
-    labelSrOnly,
-    status,
-    statusState,
-    statusProps,
-    statusNoAnimation,
-    globalStatus,
-    stretch,
-    suffix,
-    thumbTitle: title,
-    subtractTitle,
-    addTitle,
-    hideButtons,
-    multiThumbBehavior,
-    numberFormat,
-    tooltip,
-    alwaysShowTooltip,
-    skeleton,
-    max,
-    min,
-    disabled,
-    className,
-    id,
-    onChange,
-    onDragStart,
-    onDragEnd,
-    vertical: _vertical,
-    reverse: _reverse,
-    value: _value,
-    children: _children
-  } = allProps,
-        attributes = _objectWithoutProperties(allProps, _excluded);
-
+      step,
+      label,
+      labelDirection,
+      labelSrOnly,
+      status,
+      statusState,
+      statusProps,
+      statusNoAnimation,
+      globalStatus,
+      stretch,
+      suffix,
+      thumbTitle: title,
+      subtractTitle,
+      addTitle,
+      hideButtons,
+      multiThumbBehavior,
+      numberFormat,
+      tooltip,
+      alwaysShowTooltip,
+      skeleton,
+      max,
+      min,
+      disabled,
+      className,
+      id,
+      onChange,
+      onDragStart,
+      onDragEnd,
+      vertical: _vertical,
+      reverse: _reverse,
+      value: _value,
+      children: _children
+    } = allProps,
+    attributes = _objectWithoutProperties(allProps, _excluded);
   const [value, setValue] = React.useState(_value);
   const [externValue, updateExternValue] = React.useState(_value);
   const realtimeValue = React.useRef(_value);
@@ -74,74 +71,59 @@ export function SliderProvider(localProps) {
   const [isVertical] = React.useState(isTrue(_vertical));
   const [isReverse] = React.useState(isVertical ? !isTrue(_reverse) : isTrue(_reverse));
   const isMulti = Array.isArray(value);
-
   const setThumbIndex = index => {
     if (!isNaN(index)) {
       thumbIndex.current = index;
     }
   };
-
   const getAndUpdateCurrentIndex = currentValue => {
     let currentIndex = null;
-
     if (thumbIndex.current > -1) {
       currentIndex = thumbIndex.current;
     } else {
       currentIndex = closestIndex(currentValue, value);
       setThumbIndex(currentIndex);
     }
-
     return currentIndex;
   };
-
   const updateValue = value => {
     setValue(value);
     realtimeValue.current = value;
   };
-
   const emitChange = (event, rawValue) => {
     if (disabled || isTrue(skeleton)) {
       return;
     }
-
     let numberValue = roundValue(rawValue, step);
     let multiValues = numberValue;
-
     if (numberValue > -1) {
       if (isMulti) {
         const currentIndex = getAndUpdateCurrentIndex(numberValue);
         const lower = realtimeValue.current[currentIndex - 1];
         const upper = realtimeValue.current[currentIndex + 1];
-
         if (multiThumbBehavior === 'omit') {
           if (numberValue < lower) {
             numberValue = lower;
           }
-
           if (numberValue > upper) {
             numberValue = upper;
           }
         }
-
         multiValues = getUpdatedValues(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
-
         if (multiThumbBehavior === 'push') {
           if (typeof lower !== 'undefined' && numberValue < lower) {
             multiValues[currentIndex - 1] = numberValue;
           }
-
           if (typeof upper !== 'undefined' && numberValue >= upper) {
             multiValues[currentIndex + 1] = numberValue;
           }
         }
-
         if (numberValue === realtimeValue.current[currentIndex]) {
           return;
         }
       } else if (numberValue === realtimeValue.current) {
         return;
       }
-
       if (typeof onChange === 'function') {
         const obj = {
           value: multiValues,
@@ -149,24 +131,19 @@ export function SliderProvider(localProps) {
           event,
           number: null
         };
-
         if (numberFormat) {
           obj.number = getFormattedNumber(numberValue, numberFormat).number;
         }
-
         dispatchCustomElementEvent(allProps, 'onChange', obj);
       }
-
       updateValue(multiValues);
     }
   };
-
   React.useEffect(() => {
     if (isMulti) {
       const hasChanged = _value.some((val, i) => {
         return val !== externValue[i];
       });
-
       if (hasChanged) {
         updateValue(_value);
         updateExternValue(_value);
@@ -178,16 +155,13 @@ export function SliderProvider(localProps) {
   }, [_value, isMulti]);
   const trackRef = React.useRef();
   const animationTimeout = React.useRef();
-
   const setShouldAnimate = state => {
     updateAnimateState(state);
     clearTimeout(animationTimeout.current);
-
     if (state) {
       animationTimeout.current = setTimeout(() => updateAnimateState(false), 250);
     }
   };
-
   const showStatus = getStatusState(status);
   const showButtons = !isMulti && !isTrue(hideButtons);
   const values = isMulti ? value : [value];
@@ -214,4 +188,5 @@ export function SliderProvider(localProps) {
       animationTimeout
     }
   }, localProps.children);
-}
+}
+//# sourceMappingURL=SliderProvider.js.map

package/components/slider/SliderProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderProvider.js","names":["React","includeValidProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","hideButtons","numberFormat","tooltip","alwaysShowTooltip","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { includeValidProps } from '../../components/form-row/FormRowHelpers'\nimport {\n  isTrue,\n  makeUniqueId,\n  dispatchCustomElementEvent,\n  getStatusState,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n  closestIndex,\n  getFormattedNumber,\n  getUpdatedValues,\n  roundValue,\n} from './SliderHelpers'\n\nimport type {\n  ValueTypes,\n  onChangeEventProps,\n  SliderAllProps,\n  SliderContextTypes,\n  ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n  statusState: 'error',\n  addTitle: '+',\n  subtractTitle: '−',\n  min: 0,\n  max: 100,\n  value: -1,\n  multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n  const context = React.useContext(Context)\n  const allProps = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      { skeleton: context?.skeleton },\n      context?.getTranslation(localProps).Slider,\n      includeValidProps(\n        context?.FormRow,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      context?.Slider\n    )\n  )\n\n  const [_id] = React.useState(makeUniqueId)\n  if (!allProps.id) {\n    allProps.id = _id\n  }\n\n  const {\n    step,\n    label, // eslint-disable-line\n    labelDirection, // eslint-disable-line\n    labelSrOnly, // eslint-disable-line\n    status, // eslint-disable-line\n    statusState, // eslint-disable-line\n    statusProps, // eslint-disable-line\n    statusNoAnimation, // eslint-disable-line\n    globalStatus, // eslint-disable-line\n    stretch, // eslint-disable-line\n    suffix, // eslint-disable-line\n    thumbTitle: title, // eslint-disable-line\n    subtractTitle, // eslint-disable-line\n    addTitle, // eslint-disable-line\n    hideButtons, // eslint-disable-line\n    multiThumbBehavior,\n    numberFormat,\n    tooltip, // eslint-disable-line\n    alwaysShowTooltip, // eslint-disable-line\n    skeleton,\n    max, // eslint-disable-line\n    min, // eslint-disable-line\n    disabled,\n    className, // eslint-disable-line\n    id, // eslint-disable-line\n    onChange,\n    onDragStart, // eslint-disable-line\n    onDragEnd, // eslint-disable-line\n    vertical: _vertical,\n    reverse: _reverse,\n    value: _value,\n    children: _children, // eslint-disable-line\n\n    ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n  } = allProps\n\n  const [value, setValue] = React.useState<ValueTypes>(_value)\n  const [externValue, updateExternValue] =\n    React.useState<ValueTypes>(_value)\n  const realtimeValue = React.useRef<ValueTypes>(_value)\n  const [thumbState, setThumbState] =\n    React.useState<ThumbStateEnums>('initial')\n  const thumbIndex = React.useRef<number>(-1)\n  const [shouldAnimate, updateAnimateState] =\n    React.useState<boolean>(false)\n  const [isVertical] = React.useState(isTrue(_vertical))\n  const [isReverse] = React.useState(\n    isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n  )\n  const isMulti = Array.isArray(value)\n  const setThumbIndex = (index: number) => {\n    if (!isNaN(index)) {\n      thumbIndex.current = index\n    }\n  }\n\n  const getAndUpdateCurrentIndex = (currentValue: number) => {\n    let currentIndex = null\n\n    if (thumbIndex.current > -1) {\n      currentIndex = thumbIndex.current\n    } else {\n      currentIndex = closestIndex(currentValue, value as Array<number>)\n      setThumbIndex(currentIndex)\n    }\n\n    return currentIndex\n  }\n\n  const updateValue = (value: ValueTypes) => {\n    setValue(value)\n    realtimeValue.current = value\n  }\n\n  const emitChange = (\n    event: MouseEvent | TouchEvent,\n    rawValue: number\n  ) => {\n    if (disabled || isTrue(skeleton)) {\n      return\n    }\n\n    let numberValue = roundValue(rawValue, step)\n    let multiValues: ValueTypes = numberValue\n\n    if (numberValue > -1) {\n      if (isMulti) {\n        const currentIndex = getAndUpdateCurrentIndex(numberValue)\n        const lower = realtimeValue.current[currentIndex - 1]\n        const upper = realtimeValue.current[currentIndex + 1]\n\n        if (multiThumbBehavior === 'omit') {\n          if (numberValue < lower) {\n            numberValue = lower\n          }\n          if (numberValue > upper) {\n            numberValue = upper\n          }\n        }\n\n        multiValues = getUpdatedValues(\n          multiThumbBehavior === 'push'\n            ? (realtimeValue.current as Array<number>)\n            : value,\n          currentIndex,\n          numberValue\n        )\n\n        if (multiThumbBehavior === 'push') {\n          if (typeof lower !== 'undefined' && numberValue < lower) {\n            multiValues[currentIndex - 1] = numberValue\n          }\n          if (typeof upper !== 'undefined' && numberValue >= upper) {\n            multiValues[currentIndex + 1] = numberValue\n          }\n        }\n\n        if (numberValue === realtimeValue.current[currentIndex]) {\n          return // stop here\n        }\n      } else if (numberValue === realtimeValue.current) {\n        return // stop here\n      }\n\n      if (typeof onChange === 'function') {\n        const obj: onChangeEventProps = {\n          value: multiValues,\n          rawValue,\n          event,\n          number: null,\n        }\n\n        if (numberFormat) {\n          obj.number = getFormattedNumber(numberValue, numberFormat).number\n        }\n\n        dispatchCustomElementEvent(allProps, 'onChange', obj)\n      }\n\n      updateValue(multiValues)\n    }\n  }\n\n  React.useEffect(() => {\n    if (isMulti) {\n      const hasChanged = (_value as Array<number>).some((val, i) => {\n        return val !== externValue[i]\n      })\n\n      if (hasChanged) {\n        updateValue(_value)\n        updateExternValue(_value)\n      }\n    } else if (_value !== externValue) {\n      updateValue(_value)\n      updateExternValue(_value)\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_value, isMulti])\n\n  const trackRef = React.useRef<HTMLElement>()\n\n  const animationTimeout = React.useRef<NodeJS.Timeout>()\n  const setShouldAnimate = (state: boolean) => {\n    updateAnimateState(state)\n    clearTimeout(animationTimeout.current)\n    if (state) {\n      animationTimeout.current = setTimeout(\n        () => updateAnimateState(false),\n        250\n      )\n    }\n  }\n\n  const showStatus = getStatusState(status)\n  const showButtons = !isMulti && !isTrue(hideButtons)\n  const values = (isMulti ? value : [value]) as Array<number>\n\n  return (\n    <SliderContext.Provider\n      value={{\n        isMulti,\n        isReverse,\n        isVertical,\n        shouldAnimate,\n        value,\n        values,\n        setValue,\n        attributes,\n        showStatus,\n        showButtons,\n        thumbState,\n        setThumbState,\n        thumbIndex,\n        setThumbIndex,\n        emitChange,\n        allProps,\n        trackRef,\n        setShouldAnimate,\n        animationTimeout,\n      }}\n    >\n      {localProps.children}\n    </SliderContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/components/slider/SliderThumb.js

@@ -18,7 +18,6 @@ export function SliderThumb() {
     });
   }));
 }
-
 function Thumb(_ref) {
   let {
     value,
@@ -48,11 +47,9 @@ function Thumb(_ref) {
   } = allProps;
   const index = thumbIndex.current;
   let percent = clamp((value - min) * 100 / (max - min));
-
   if (isReverse) {
     percent = 100 - percent;
   }
-
   const style = {
     zIndex: index === currentIndex ? 4 : 3,
     [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
@@ -62,21 +59,17 @@ function Thumb(_ref) {
     aria
   } = getFormattedNumber(value, numberFormat);
   const [showTooltip, setShowTooltip] = React.useState(false);
-
   const onMouseEnterHandler = () => {
     setShowTooltip(true);
   };
-
   const onMouseLeaveHandler = () => {
     setShowTooltip(false);
-
     try {
       elemRef.current.dispatchEvent(new Event('mouseleave'));
     } catch (e) {
       warn(e);
     }
   };
-
   const {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
@@ -84,28 +77,22 @@ function Thumb(_ref) {
     onHelperFocusHandler
   } = useSliderEvents();
   const helperParams = {};
-
   if (label) {
     helperParams['aria-labelledby'] = combineLabelledBy(helperParams, label ? id + '-label' : null);
   }
-
   if (showStatus || suffix) {
     helperParams['aria-describedby'] = combineDescribedBy(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
   }
-
   const thumbParams = attributes;
-
   if (tooltip) {
     thumbParams.onMouseEnter = onMouseEnterHandler;
     thumbParams.onMouseLeave = onMouseLeaveHandler;
     thumbParams.onTouchStart = onMouseEnterHandler;
     thumbParams.onTouchEnd = onMouseLeaveHandler;
     helperParams.onBlur = onMouseLeaveHandler;
-
     helperParams.onFocus = event => {
       onHelperFocusHandler(event);
       onMouseEnterHandler();
-
       try {
         elemRef.current.dispatchEvent(new Event('mouseenter'));
       } catch (e) {
@@ -113,7 +100,6 @@ function Thumb(_ref) {
       }
     };
   }
-
   validateDOMAttributes(allProps, thumbParams);
   const elemRef = React.useRef();
   return React.createElement(React.Fragment, null, React.createElement("span", {
@@ -152,4 +138,5 @@ function Thumb(_ref) {
     showDelay: 1,
     hideDelay: 300
   }, number || value, shouldAnimate)));
-}
+}
+//# sourceMappingURL=SliderThumb.js.map

package/components/slider/SliderThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.js","names":["React","combineDescribedBy","combineLabelledBy","validateDOMAttributes","warn","Button","Tooltip","useSliderEvents","useSliderProps","clamp","getFormattedNumber","SliderThumb","values","createElement","Fragment","map","value","i","Thumb","key","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","style","zIndex","number","aria","showTooltip","setShowTooltip","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","helperParams","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","useRef","className","_extends","type","onChange","onMouseDown","onMouseUp","undefined","element","variant","innerRef","targetElement","animatePosition","active","Boolean","showDelay","hideDelay"],"sources":["../../../../src/components/slider/SliderThumb.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  combineDescribedBy,\n  combineLabelledBy,\n  validateDOMAttributes,\n  warn,\n} from '../../shared/component-helper'\nimport Button from '../button/Button'\nimport Tooltip from '../tooltip/Tooltip'\nimport { useSliderEvents } from './hooks/useSliderEvents'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderThumb() {\n  const { values } = useSliderProps()\n\n  return (\n    <>\n      {values.map((value, i) => {\n        return <Thumb key={i} value={value} currentIndex={i} />\n      })}\n    </>\n  )\n}\n\ntype ThumbProps = {\n  value: number\n  currentIndex: number\n}\n\nfunction Thumb({ value, currentIndex }: ThumbProps) {\n  const {\n    thumbIndex,\n    isVertical,\n    isReverse,\n    showStatus,\n    attributes,\n    allProps,\n    shouldAnimate,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    min,\n    max,\n    step,\n    skeleton,\n    disabled,\n    suffix,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n  } = allProps\n\n  const index = thumbIndex.current\n  let percent = clamp(((value - min) * 100) / (max - min))\n\n  if (isReverse) {\n    percent = 100 - percent\n  }\n\n  const style = {\n    zIndex: index === currentIndex ? 4 : 3,\n    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n  } as React.CSSProperties\n\n  const { number, aria } = getFormattedNumber(value, numberFormat)\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const onMouseEnterHandler = () => {\n    setShowTooltip(true)\n  }\n  const onMouseLeaveHandler = () => {\n    setShowTooltip(false)\n    try {\n      elemRef.current.dispatchEvent(new Event('mouseleave'))\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const {\n    onThumbMouseDownHandler,\n    onThumbMouseUpHandler,\n    onHelperChangeHandler,\n    onHelperFocusHandler,\n  } = useSliderEvents()\n\n  const helperParams: Record<string, unknown> = {}\n\n  if (label) {\n    helperParams['aria-labelledby'] = combineLabelledBy(\n      helperParams,\n      label ? id + '-label' : null\n    )\n  }\n\n  if (showStatus || suffix) {\n    helperParams['aria-describedby'] = combineDescribedBy(\n      helperParams,\n      showStatus ? id + '-status' : null,\n      suffix ? id + '-suffix' : null\n    )\n  }\n\n  const thumbParams = attributes as Record<string, unknown>\n\n  if (tooltip) {\n    thumbParams.onMouseEnter = onMouseEnterHandler\n    thumbParams.onMouseLeave = onMouseLeaveHandler\n    thumbParams.onTouchStart = onMouseEnterHandler\n    thumbParams.onTouchEnd = onMouseLeaveHandler\n    helperParams.onBlur = onMouseLeaveHandler\n    helperParams.onFocus = (event) => {\n      onHelperFocusHandler(event)\n      onMouseEnterHandler()\n      try {\n        elemRef.current.dispatchEvent(new Event('mouseenter'))\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n  validateDOMAttributes(allProps, thumbParams) // because we send along rest attributes\n\n  const elemRef = React.useRef<HTMLElement>()\n\n  return (\n    <>\n      <span className=\"dnb-slider__thumb\" style={style}>\n        <input\n          type=\"range\"\n          className=\"dnb-slider__button-helper\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={onHelperChangeHandler}\n          onFocus={onHelperFocusHandler}\n          onMouseDown={onThumbMouseDownHandler}\n          onMouseUp={onThumbMouseUpHandler}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-valuetext={aria ? aria : undefined}\n          aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n          data-index={currentIndex}\n          {...helperParams}\n        />\n\n        <Button\n          element=\"span\"\n          type=\"\" // avoid getting type=\"button\"\n          variant=\"secondary\"\n          disabled={disabled}\n          skeleton={skeleton}\n          innerRef={elemRef}\n          {...thumbParams}\n        />\n\n        {tooltip && (\n          <Tooltip\n            key={`group-${currentIndex}`}\n            targetElement={elemRef}\n            animatePosition={shouldAnimate}\n            active={Boolean(showTooltip || alwaysShowTooltip)}\n            showDelay={1}\n            hideDelay={300}\n          >\n            {number || value}\n            {\n              shouldAnimate /* Use \"shouldAnimate\" only in order to update the position after the thumb animation */\n            }\n          </Tooltip>\n        )}\n      </span>\n    </>\n  )\n}\n"],"mappings":"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"}

package/components/slider/SliderTrack.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
 var _span;
-
 import React from 'react';
 import { useSliderEvents } from './hooks/useSliderEvents';
 import { useSliderProps } from './hooks/useSliderProps';
@@ -52,11 +50,9 @@ export function SliderTrackBefore() {
   } = useSliderProps();
   const values = origValues.sort((a, b) => a - b);
   const isBetween = values.length >= 2;
-
   if (isBetween && values[0] > values[values.length - 1]) {
     values.reverse();
   }
-
   const index = thumbIndex.current;
   const upperValue = values[isBetween ? 0 : index > -1 ? index : 0];
   const upperPercent = isBetween ? clamp((upperValue - min) * 100 / (max - min)) : 0;
@@ -75,4 +71,5 @@ export function SliderTrackAfter() {
   return _span || (_span = React.createElement("span", {
     className: "dnb-slider__line dnb-slider__line__after"
   }));
-}
+}
+//# sourceMappingURL=SliderTrack.js.map

package/components/slider/SliderTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.js","names":["React","useSliderEvents","useSliderProps","clamp","SliderMainTrack","_ref","children","allProps","trackRef","animationTimeout","id","onTrackMouseDownHandler","removeEvents","useEffect","clearTimeout","current","trackParams","onTouchStart","onMouseDown","createElement","_extends","ref","className","trackObj","SliderTrackBefore","values","origValues","isVertical","isReverse","thumbIndex","min","max","sort","a","b","isBetween","length","reverse","index","upperValue","upperPercent","lowerValue","lowerPercent","units","style","SliderTrackAfter","_span"],"sources":["../../../../src/components/slider/SliderTrack.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React from 'react'\nimport { useSliderEvents } from './hooks/useSliderEvents'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp } from './SliderHelpers'\n\nexport function SliderMainTrack({\n  children,\n}: {\n  children: React.ReactNode | React.ReactNode[]\n}) {\n  const { allProps, trackRef, animationTimeout } = useSliderProps()\n  const { id } = allProps\n  const { onTrackMouseDownHandler, removeEvents } = useSliderEvents()\n\n  React.useEffect(() => {\n    return () => {\n      removeEvents()\n      clearTimeout(animationTimeout.current)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const trackParams = {\n    onTouchStart: onTrackMouseDownHandler,\n    onMouseDown: onTrackMouseDownHandler,\n  }\n\n  return (\n    // @ts-ignore\n    <span\n      id={id}\n      ref={trackRef}\n      className=\"dnb-slider__track\"\n      {...trackParams}\n    >\n      {children}\n    </span>\n  )\n}\n\nconst trackObj = [\n  ['right', 'left'],\n  ['bottom', 'top'],\n]\n\nexport function SliderTrackBefore() {\n  const {\n    values: origValues,\n    isVertical,\n    isReverse,\n    thumbIndex,\n    allProps: { min, max },\n  } = useSliderProps()\n\n  const values = origValues.sort((a, b) => a - b)\n  const isBetween = values.length >= 2\n\n  if (isBetween && values[0] > values[values.length - 1]) {\n    values.reverse()\n  }\n\n  const index = thumbIndex.current\n  const upperValue = values[isBetween ? 0 : index > -1 ? index : 0]\n  const upperPercent = isBetween\n    ? clamp(((upperValue - min) * 100) / (max - min))\n    : 0\n\n  const lowerValue =\n    values[isBetween ? values.length - 1 : index > -1 ? index : 0]\n  const lowerPercent =\n    100 - clamp(((lowerValue - min) * 100) / (max - min))\n\n  const units = [\n    trackObj[isVertical ? 1 : 0][0],\n    trackObj[isVertical ? 1 : 0][1],\n  ]\n\n  const style: React.CSSProperties = {}\n  style[units[isReverse ? 1 : 0]] = `${lowerPercent}%`\n  style[units[isReverse ? 0 : 1]] = `${upperPercent}%`\n\n  return (\n    <span\n      className=\"dnb-slider__line dnb-slider__line__before\"\n      style={style}\n    />\n  )\n}\n\nexport function SliderTrackAfter() {\n  return <span className=\"dnb-slider__line dnb-slider__line__after\" />\n}\n"],"mappings":"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"}

package/components/slider/hooks/useSliderEvents.js

@@ -19,25 +19,21 @@ export function useSliderEvents() {
     onDragStart,
     onDragEnd
   } = allProps;
-
   const onTrackMouseDownHandler = event => {
     onThumbMouseDownHandler(event);
     const percent = calculatePercent(trackRef.current, event, isVertical);
     emitChange(event, percentToValue(percent, min, max, isReverse));
     setShouldAnimate(true);
   };
-
   const onThumbMouseDownHandler = event => {
     const target = event.target;
     setThumbIndex(parseFloat(target.dataset.index));
     setThumbState('activated');
-
     if (typeof onDragStart === 'function') {
       dispatchCustomElementEvent(allProps, 'onDragStart', {
         event
       });
     }
-
     if (typeof document !== 'undefined') {
       try {
         document.body.addEventListener('touchmove', onBodyMouseMoveHandler);
@@ -49,11 +45,9 @@ export function useSliderEvents() {
       }
     }
   };
-
   const onThumbMouseUpHandler = () => {
     setThumbState('released');
   };
-
   const removeEvents = () => {
     if (typeof document !== 'undefined') {
       try {
@@ -66,46 +60,37 @@ export function useSliderEvents() {
       }
     }
   };
-
   const onBodyMouseUpHandler = event => {
     removeEvents();
     setThumbIndex(-1);
     setThumbState('normal');
-
     if (typeof onDragEnd === 'function') {
       dispatchCustomElementEvent(allProps, 'onDragEnd', {
         event
       });
     }
   };
-
   const onBodyMouseMoveHandler = event => {
     event.preventDefault();
     let elem = trackRef.current;
-
     if (process.env.NODE_ENV === 'test') {
       elem = createMockDiv(event.detail);
       event = event.detail;
     }
-
     if (elem) {
       const percent = calculatePercent(elem, event, isVertical);
       emitChange(event, percentToValue(percent, min, max, isReverse));
     }
-
     setShouldAnimate(false);
   };
-
   const onHelperChangeHandler = event => {
     const emitEvent = event;
     emitChange(emitEvent, parseFloat(event.currentTarget.value));
   };
-
   const onHelperFocusHandler = event => {
     const target = event.target;
     setThumbIndex(parseFloat(target.dataset.index));
   };
-
   return {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
@@ -114,4 +99,5 @@ export function useSliderEvents() {
     onHelperFocusHandler,
     removeEvents
   };
-}
+}
+//# sourceMappingURL=useSliderEvents.js.map

package/components/slider/hooks/useSliderEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderEvents.js","names":["React","dispatchCustomElementEvent","warn","calculatePercent","createMockDiv","percentToValue","SliderContext","useSliderEvents","isReverse","emitChange","trackRef","isVertical","setShouldAnimate","setThumbState","setThumbIndex","allProps","useContext","min","max","onDragStart","onDragEnd","onTrackMouseDownHandler","event","onThumbMouseDownHandler","percent","current","target","parseFloat","dataset","index","document","body","addEventListener","onBodyMouseMoveHandler","onBodyMouseUpHandler","e","onThumbMouseUpHandler","removeEvents","removeEventListener","preventDefault","elem","process","env","NODE_ENV","detail","onHelperChangeHandler","emitEvent","currentTarget","value","onHelperFocusHandler"],"sources":["../../../../../src/components/slider/hooks/useSliderEvents.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport React from 'react'\nimport {\n  dispatchCustomElementEvent,\n  warn,\n} from '../../../shared/component-helper'\nimport {\n  calculatePercent,\n  createMockDiv,\n  percentToValue,\n} from '../SliderHelpers'\nimport { SliderContext } from '../SliderProvider'\n\nexport function useSliderEvents() {\n  const {\n    isReverse,\n    emitChange,\n    trackRef,\n    isVertical,\n    setShouldAnimate,\n    setThumbState,\n    setThumbIndex,\n    allProps,\n  } = React.useContext(SliderContext)\n  const { min, max, onDragStart, onDragEnd } = allProps\n\n  const onTrackMouseDownHandler = (event: MouseEvent | TouchEvent) => {\n    onThumbMouseDownHandler(event)\n\n    const percent = calculatePercent(trackRef.current, event, isVertical)\n\n    emitChange(event, percentToValue(percent, min, max, isReverse))\n    setShouldAnimate(true)\n  }\n\n  const onThumbMouseDownHandler = (\n    event: MouseEvent | TouchEvent | React.SyntheticEvent\n  ) => {\n    const target = event.target as HTMLButtonElement\n\n    setThumbIndex(parseFloat(target.dataset.index))\n    setThumbState('activated')\n\n    if (typeof onDragStart === 'function') {\n      dispatchCustomElementEvent(allProps, 'onDragStart', {\n        event,\n      })\n    }\n\n    if (typeof document !== 'undefined') {\n      try {\n        document.body.addEventListener('touchmove', onBodyMouseMoveHandler)\n        document.body.addEventListener('touchend', onBodyMouseUpHandler)\n        document.body.addEventListener('mousemove', onBodyMouseMoveHandler)\n        document.body.addEventListener('mouseup', onBodyMouseUpHandler)\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n\n  const onThumbMouseUpHandler = () => {\n    setThumbState('released')\n  }\n\n  const removeEvents = () => {\n    if (typeof document !== 'undefined') {\n      try {\n        document.body.removeEventListener(\n          'touchmove',\n          onBodyMouseMoveHandler\n        )\n        document.body.removeEventListener('touchend', onBodyMouseUpHandler)\n        document.body.removeEventListener(\n          'mousemove',\n          onBodyMouseMoveHandler\n        )\n        document.body.removeEventListener('mouseup', onBodyMouseUpHandler)\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n\n  const onBodyMouseUpHandler = (event: MouseEvent | TouchEvent) => {\n    removeEvents()\n\n    setThumbIndex(-1)\n    setThumbState('normal')\n\n    if (typeof onDragEnd === 'function') {\n      dispatchCustomElementEvent(allProps, 'onDragEnd', {\n        event,\n      })\n    }\n  }\n\n  const onBodyMouseMoveHandler = (event: MouseEvent) => {\n    event.preventDefault() // ensures correct cursor in Safari (dekstop)\n\n    let elem = trackRef.current\n\n    // we have to mock this for jsdom.\n    if (process.env.NODE_ENV === 'test') {\n      // @ts-ignore\n      elem = createMockDiv(event.detail)\n      // @ts-ignore\n      event = event.detail\n    }\n\n    if (elem) {\n      const percent = calculatePercent(elem, event, isVertical)\n      emitChange(event, percentToValue(percent, min, max, isReverse))\n    }\n\n    setShouldAnimate(false)\n  }\n\n  const onHelperChangeHandler = (\n    event: React.FormEvent<HTMLInputElement>\n  ) => {\n    const emitEvent = event as unknown\n    emitChange(\n      emitEvent as MouseEvent,\n      parseFloat(event.currentTarget.value)\n    )\n  }\n\n  const onHelperFocusHandler = (\n    event: React.FormEvent<HTMLInputElement>\n  ) => {\n    const target = event.target as HTMLInputElement\n    setThumbIndex(parseFloat(target.dataset.index))\n  }\n\n  return {\n    onThumbMouseDownHandler,\n    onThumbMouseUpHandler,\n    onTrackMouseDownHandler,\n    onHelperChangeHandler,\n    onHelperFocusHandler,\n    removeEvents,\n  }\n}\n"],"mappings":"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"}

package/components/slider/hooks/useSliderProps.js

@@ -2,4 +2,5 @@ import React from 'react';
 import { SliderContext } from '../SliderProvider';
 export function useSliderProps() {
   return React.useContext(SliderContext);
-}
+}
+//# sourceMappingURL=useSliderProps.js.map

package/components/slider/hooks/useSliderProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderProps.js","names":["React","SliderContext","useSliderProps","useContext"],"sources":["../../../../../src/components/slider/hooks/useSliderProps.tsx"],"sourcesContent":["import React from 'react'\nimport { SliderContext } from '../SliderProvider'\n\nexport function useSliderProps() {\n  return React.useContext(SliderContext)\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,mBAAmB;AAEjD,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,OAAOF,KAAK,CAACG,UAAU,CAACF,aAAa,CAAC;AACxC"}

package/components/slider/index.js

@@ -1,3 +1,4 @@
 import Slider from './Slider';
 export default Slider;
-export * from './Slider';
+export * from './Slider';
+//# sourceMappingURL=index.js.map

package/components/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Slider"],"sources":["../../../../src/components/slider/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport Slider from './Slider'\nexport default Slider\nexport * from './Slider'\n"],"mappings":"AAKA,OAAOA,MAAM,MAAM,UAAU;AAC7B,eAAeA,MAAM;AACrB,cAAc,UAAU"}

package/components/slider/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/slider/style/index.js"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-slider.scss'\n"],"mappings":"AAKA,OAAO,sBAAmB"}

package/components/slider/style/themes/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","names":[],"sources":["../../../../../../src/components/slider/style/themes/ui.js"],"sourcesContent":["/**\n * Imports the default theme\n *\n */\n\nimport './dnb-slider-theme-ui.scss'\n"],"mappings":"AAKA,OAAO,+BAA4B"}

package/components/slider/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../../src/components/slider/style.ts"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './style/dnb-slider.scss'\n"],"mappings":"AAKA,OAAO,4BAAyB"}

package/components/slider/types.d.ts

@@ -6,15 +6,15 @@ import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
 import type { SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
 import type { GlobalStatusConfigObject } from '../GlobalStatus';
-export declare type ValueTypes = number | Array<number>;
-export declare type NumberFormatTypes = formatOptionParams | ((value: number) => unknown);
-export declare type onChangeEventProps = {
+export type ValueTypes = number | Array<number>;
+export type NumberFormatTypes = formatOptionParams | ((value: number) => unknown);
+export type onChangeEventProps = {
     value: ValueTypes;
     rawValue: number;
     number?: formatReturnType | null;
     event?: Event;
 };
-export declare type SliderProps = IncludeSnakeCase<{
+export type SliderProps = IncludeSnakeCase<{
     /** prepends the Form Label component. If no ID is provided, a random ID is created. */
     label?: React.ReactNode;
     /** use `labelDirection="vertical"` to change the label layout direction. Defaults to `horizontal`. */
@@ -79,9 +79,9 @@ export declare type SliderProps = IncludeSnakeCase<{
     }) => void;
     children?: React.ReactChild;
 }>;
-export declare type SliderAllProps = SliderProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>;
-export declare type ThumbStateEnums = 'initial' | 'normal' | 'activated' | 'released';
-export declare type SliderContextTypes = {
+export type SliderAllProps = SliderProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>;
+export type ThumbStateEnums = 'initial' | 'normal' | 'activated' | 'released';
+export type SliderContextTypes = {
     isMulti: boolean;
     isReverse: boolean;
     isVertical: boolean;

package/components/slider/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\n\n  /** text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */\n  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `+`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `−`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multible thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}

package/components/space/Space.d.ts

@@ -8,7 +8,7 @@ import { spacingPropTypes } from './SpacingHelper';
 import type { DynamicElement, SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
 export { spacingPropTypes };
-export declare type SpaceProps = {
+export type SpaceProps = {
     /**
      * Defines the HTML element used.
      * Default: div
@@ -40,28 +40,28 @@ export declare type SpaceProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
 } & SpacingProps;
-export declare type SpaceAllProps = SpaceProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
+export type SpaceAllProps = SpaceProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default class Space extends React.PureComponent<SpaceAllProps | React.HTMLProps<HTMLElement>> {
     static contextType: React.Context<import("../../shared/Context").ContextProps>;
     static propTypes: {
-        stretch: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
+        stretch: PropTypes.Requireable<NonNullable<string | boolean>>;
+        skeleton: PropTypes.Requireable<NonNullable<string | boolean>>;
         innerRef: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        space: PropTypes.Requireable<string | number | boolean | PropTypes.InferProps<{
-            top: PropTypes.Requireable<string | number | boolean>;
-            right: PropTypes.Requireable<string | number | boolean>;
-            bottom: PropTypes.Requireable<string | number | boolean>;
-            left: PropTypes.Requireable<string | number | boolean>;
-        }>>;
-        top: PropTypes.Requireable<string | number | boolean>;
-        right: PropTypes.Requireable<string | number | boolean>;
-        bottom: PropTypes.Requireable<string | number | boolean>;
-        left: PropTypes.Requireable<string | number | boolean>;
-        element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        inline: PropTypes.Requireable<string | boolean>;
-        no_collapse: PropTypes.Requireable<string | boolean>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        space: PropTypes.Requireable<NonNullable<string | number | boolean | PropTypes.InferProps<{
+            top: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+            right: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+            bottom: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+            left: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+        }>>>;
+        top: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+        right: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+        bottom: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+        left: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+        element: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        inline: PropTypes.Requireable<NonNullable<string | boolean>>;
+        no_collapse: PropTypes.Requireable<NonNullable<string | boolean>>;
     };
     static defaultProps: {
         stretch: any;