@ultraviolet/plus 0.4.10 → 0.5.1

package/dist/src/components/EstimateCost/Components/Item.js

@@ -0,0 +1,327 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { Text, Tooltip, Stack, Icon, zoomIn, Badge } from '@ultraviolet/ui';
+import { useMemo, useState, useEffect, useCallback, useId, Children, isValidElement, cloneElement } from 'react';
+import flattenChildren from 'react-flatten-children';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { useOverlay } from '../OverlayContext.js';
+import { Cell, StyledDiv, PriceCell, OverlayRow, StyledLeftSide } from '../componentStyle.js';
+import { multiplier, maximumFractionDigitsLong, maximumFractionDigits, MAX_CELL_WIDTH } from '../constants.js';
+import { calculatePrice } from '../helper.js';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const TIME_RELATED_UNIT = ['seconds', 'minutes', 'hours', 'days', 'months'];
+const StyledResourceName = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['isOverlay', 'animated'].includes(prop),
+  target: "e1kzy2rr7"
+})("text-align:", _ref => {
+  let {
+    isOverlay
+  } = _ref;
+  return isOverlay ? 'initial' : 'right';
+}, ";", _ref2 => {
+  let {
+    isOverlay,
+    animated
+  } = _ref2;
+  return isOverlay ? /*#__PURE__*/css("height:48px;display:flex;flex-direction:column;-webkit-box-pack:center;justify-content:center;animation:", animated ? /*#__PURE__*/css("800ms ", zoomIn, ";") : '', ";") : null;
+}, ";");
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
+  target: "e1kzy2rr6"
+})("margin-left:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";align-self:center;");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr5"
+})("margin-left:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";");
+const MaxWidthText = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr4"
+})(process.env.NODE_ENV === "production" ? {
+  name: "88bww",
+  styles: "max-width:75%"
+} : {
+  name: "88bww",
+  styles: "max-width:75%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TextAlignRight = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "2qga7i",
+  styles: "text-align:right"
+} : {
+  name: "2qga7i",
+  styles: "text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
+  target: "e1kzy2rr2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "uaxjgr",
+  styles: "vertical-align:text-top"
+} : {
+  name: "uaxjgr",
+  styles: "vertical-align:text-top",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledPriceCell = /*#__PURE__*/_styled(Cell, {
+  target: "e1kzy2rr1"
+})(_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return PriceCell(theme);
+}, ";");
+const StyleNoPriceItem = /*#__PURE__*/_styled(Text, {
+  target: "e1kzy2rr0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "2qga7i",
+  styles: "text-align:right"
+} : {
+  name: "2qga7i",
+  styles: "text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Item = _ref6 => {
+  let {
+    discount = 0,
+    priceText,
+    discountText,
+    label,
+    tooltipInfo,
+    // Shows an icon with tooltip that contains this text
+    subLabel = '',
+    // Usually used for showing amount that is free
+    price: basePrice = 0,
+    // Hourly price for one unit
+    monthlyPrice = 0,
+    // Price per month
+    unit: baseUnit,
+    // Can be GB, MB, Node, Queries, etc.
+    amount: currentAmount = 1,
+    // Current number of items
+    onAmountChange,
+    amountFree = 0,
+    // Amount that is free - offered by company
+    maxAmount = 0,
+    // Max amount - used for kubernetes for example
+    longFractionDigits = false,
+    // In case price is really long 0.0000076 - up 7 fraction digits
+    noIteration = false,
+    // if item is not based on time (ex: download, upload, transfer)
+    noIterationText,
+    noBorder,
+    // remove the border bottom of the item
+    noPrice,
+    // remove the price on right side of the table
+    isDefined = true,
+    children = null,
+    isFirstElement = false,
+    isLastElement = false,
+    isPrimaryBackground = false,
+    productsCallback,
+    iteration: receivedIteration,
+    // Object from parent that contains time period (hours, days, months)
+    shouldBeHidden = false,
+    // Hide element from overlay if screen width is small
+    hideFromOverlay = false,
+    // Hide element from overlay in any case
+    textNotDefined,
+    // Text to display in case of not defined value
+    animated = false,
+    // if true, zoomIn animation is triggered
+    tabulation,
+    // Increase left padding of the item
+    labelTextVariant,
+    // To change left cell typography variant
+    labelTextProminence,
+    // To change left cell typography prominence
+    notice // To display a gray text below the label
+  } = _ref6;
+  const {
+    locales,
+    formatNumber
+  } = useEstimateCost();
+  let iteration;
+  if (noIteration) {
+    iteration = {
+      ...(receivedIteration ?? {
+        value: 0
+      }),
+      unit: 'hours'
+    };
+  } else {
+    iteration = receivedIteration;
+  }
+  const price = useMemo(() => {
+    if (monthlyPrice > 0 && basePrice === 0) {
+      return monthlyPrice / multiplier.months;
+    }
+    return basePrice;
+  }, [basePrice, monthlyPrice]);
+  const unit = useMemo(() => {
+    if (!baseUnit) {
+      return locales['estimate.cost.units.gb.label'];
+    }
+    return baseUnit;
+  }, [baseUnit, locales]);
+  const {
+    isOverlay
+  } = useOverlay();
+  const Row = isOverlay ? OverlayRow : 'tr';
+  const Cell$1 = isOverlay ? Cell.withComponent('div', {
+    target: "e1kzy2rr8"
+  }) : Cell;
+  const LeftSide = isOverlay ? 'div' : StyledLeftSide;
+  const [amount, setAmount] = useState(currentAmount);
+  const [isVariant, setIsVariant] = useState(false);
+  useEffect(() => setAmount(currentAmount), [setAmount, currentAmount]);
+  useEffect(() => onAmountChange?.(amount), [onAmountChange, amount]);
+  const itemCallback = useCallback((localAmount, localIsVariant) => {
+    setAmount(localAmount);
+    setIsVariant(localIsVariant);
+  }, [setAmount, setIsVariant]);
+  const id = useId();
+
+  // We remove Item from object list when Iem component unmount to avoid duplicates
+  useEffect(() => () => productsCallback?.remove({
+    id
+  }), [id, productsCallback]);
+  useEffect(() => {
+    if (!isOverlay) {
+      productsCallback?.add({
+        id,
+        amount,
+        price,
+        amountFree,
+        isVariant,
+        maxAmount,
+        noIteration,
+        longFractionDigits,
+        discount
+      });
+    }
+  }, [price, discount, amount, id, productsCallback, maxAmount, noIteration, isVariant, amountFree, isOverlay, longFractionDigits]);
+  const computedItemPrice = useMemo(() => calculatePrice({
+    price,
+    amount,
+    amountFree,
+    timeUnit: noIteration ? 'hours' : iteration?.unit ?? 'hours',
+    timeAmount: noIteration ? 1 : iteration?.value ?? 1,
+    discount
+  }), [price, amount, amountFree, iteration, noIteration, discount]);
+  const computedMaxItemPrice = useMemo(() => calculatePrice({
+    price,
+    amount: maxAmount,
+    amountFree,
+    timeUnit: noIteration ? 'hours' : iteration?.unit ?? 'hours',
+    timeAmount: noIteration ? 1 : iteration?.value ?? 1,
+    discount
+  }), [price, maxAmount, amountFree, iteration, noIteration, discount]);
+  const formatMaximumFractionDigits = useMemo(() => {
+    if (!iteration?.unit) {
+      return undefined;
+    }
+    return longFractionDigits ? maximumFractionDigitsLong[iteration?.unit] : maximumFractionDigits[iteration?.unit];
+  }, [iteration?.unit, longFractionDigits]);
+  return jsxs(Row, {
+    isFirstElement: isFirstElement,
+    shouldBeHidden: shouldBeHidden,
+    hideFromOverlay: hideFromOverlay,
+    children: [jsx(Cell$1, {
+      width: !isOverlay ? MAX_CELL_WIDTH : 'inherit',
+      hasBorder: !isLastElement && !noBorder,
+      tabulation: tabulation,
+      children: jsxs(LeftSide, {
+        children: [jsxs(Stack, {
+          children: [jsxs(Stack, {
+            direction: "row",
+            children: [jsx(Text, {
+              as: "p",
+              variant: labelTextVariant ?? 'body',
+              prominence: labelTextProminence ?? 'default',
+              children: label
+            }), tooltipInfo ? jsx(StyledDiv, {
+              children: jsx(StyledTooltip, {
+                text: tooltipInfo,
+                children: jsx(Icon, {
+                  name: "help-circle-outline",
+                  size: 20
+                })
+              })
+            }) : null, subLabel && !isOverlay ? jsx(StyledText, {
+              as: "p",
+              variant: "body",
+              color: "primary",
+              italic: true,
+              children: subLabel
+            }) : null, discount > 0 && discountText ? jsx(StyledBadge, {
+              prominence: "strong",
+              size: "small",
+              sentiment: "warning",
+              children: discountText
+            }) : null]
+          }), notice ? jsx(MaxWidthText, {
+            as: "p",
+            variant: "caption",
+            prominence: "weak",
+            children: notice
+          }) : null]
+        }), jsx(StyledResourceName, {
+          isOverlay: isOverlay,
+          animated: animated,
+          children: isDefined ? Children.map(flattenChildren(children), child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+            itemCallback,
+            amount,
+            maxAmount,
+            unit
+          }) : null) : textNotDefined || locales['estimate.cost.notDefined']
+        })]
+      })
+    }), !isOverlay ? jsx(StyledPriceCell, {
+      hasBorder: !isLastElement && !noBorder,
+      primary: isPrimaryBackground,
+      children: !noPrice ? jsxs(Fragment, {
+        children: [jsxs(StyleNoPriceItem, {
+          as: "p",
+          variant: noIterationText ? 'headingSmall' : 'bodyStrong',
+          prominence: computedItemPrice === 0 && computedMaxItemPrice === 0 ? 'weak' : 'default',
+          color: computedItemPrice === 0 && computedMaxItemPrice === 0 ? 'neutral' : 'primary',
+          children: [priceText, !priceText ? formatNumber(computedItemPrice, {
+            maximumFractionDigits: formatMaximumFractionDigits
+          }) : null, noIterationText ? jsxs(Text, {
+            sentiment: "primary",
+            as: "span",
+            variant: "bodySmall",
+            children: ["/", noIterationText]
+          }) : null, !priceText && computedMaxItemPrice > 0 ? ` - ${formatNumber(computedMaxItemPrice, {
+            maximumFractionDigits: formatMaximumFractionDigits
+          })}` : null]
+        }), amount - amountFree > 1 && computedItemPrice > 0 || maxAmount > 0 && computedMaxItemPrice > 0 ? jsxs(TextAlignRight, {
+          as: "p",
+          variant: "body",
+          children: [formatNumber(calculatePrice({
+            price,
+            amount: 1,
+            timeUnit: 'hours',
+            timeAmount: 1,
+            discount
+          }), {
+            maximumFractionDigits: longFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
+          }), TIME_RELATED_UNIT.includes(unit) ? locales[`estimate.cost.units.${unit}.label`].toLowerCase() : `/${unit}`, !noIteration ? `/${locales['estimate.cost.units.hours.label'].toLowerCase()}` : null]
+        }) : null]
+      }) : null
+    }) : null]
+  });
+};
+
+export { Item };

package/dist/src/components/EstimateCost/Components/LineThrough.js

@@ -0,0 +1,15 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+
+const LineThrough = /*#__PURE__*/_styled('span', {
+  shouldForwardProp: prop => !['isActive'].includes(prop),
+  target: "e1d1k6i0"
+})(_ref => {
+  let {
+    isActive,
+    theme
+  } = _ref;
+  return isActive ? /*#__PURE__*/css("text-decoration-line:line-through;text-decoration-color:", theme.colors.warning.border, ";") : null;
+}, ";");
+
+export { LineThrough };

package/dist/src/components/EstimateCost/Components/NumberInput.js

@@ -0,0 +1,41 @@
+import { NumberInput as NumberInput$1 } from '@ultraviolet/ui';
+import { useEffect } from 'react';
+import { useOverlay } from '../OverlayContext.js';
+import { ItemResourceName } from '../componentStyle.js';
+import { Regular } from './Regular.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const NumberInput = _ref => {
+  let {
+    amount,
+    minValue = 0,
+    maxValue = 100,
+    getAmountValue,
+    itemCallback
+  } = _ref;
+  const {
+    isOverlay
+  } = useOverlay();
+  useEffect(() => {
+    getAmountValue?.(amount);
+  }, [getAmountValue, amount]);
+  return isOverlay ? jsx(ItemResourceName, {
+    animated: false,
+    children: jsx(Regular, {
+      children: amount
+    })
+  }) : jsx(NumberInput$1, {
+    minValue: minValue,
+    maxValue: maxValue,
+    size: "small",
+    onChange: value => {
+      if (typeof value === 'number' && itemCallback) {
+        itemCallback(value, true);
+        getAmountValue?.(value);
+      }
+    },
+    value: amount
+  });
+};
+
+export { NumberInput };

package/dist/src/components/EstimateCost/Components/Region.js

@@ -0,0 +1,50 @@
+import _styled from '@emotion/styled/base';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { Item } from './Item.js';
+import { Strong } from './Strong.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledImage = /*#__PURE__*/_styled("img", {
+  target: "exu7lwu0"
+})("width:15px;margin-right:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+const Region = _ref2 => {
+  let {
+    label,
+    image,
+    shouldBeHidden = false,
+    priceText,
+    animated = false,
+    isFirstElement,
+    isLastElement,
+    productsCallback,
+    iteration,
+    discount
+  } = _ref2;
+  const {
+    locales
+  } = useEstimateCost();
+  return jsx(Item, {
+    label: locales['estimate.cost.region.label'],
+    shouldBeHidden: shouldBeHidden,
+    priceText: priceText,
+    animated: animated,
+    isFirstElement: isFirstElement,
+    isLastElement: isLastElement,
+    productsCallback: productsCallback,
+    iteration: iteration,
+    discount: discount,
+    children: jsxs(Strong, {
+      children: [jsx(StyledImage, {
+        alt: label,
+        src: image
+      }), label]
+    })
+  });
+};
+
+export { Region };

package/dist/src/components/EstimateCost/Components/Regular.js

@@ -0,0 +1,44 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { useOverlay } from '../OverlayContext.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledRegular = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['variant', 'isOverlay'].includes(prop),
+  target: "e1l9k4qo0"
+})("display:", _ref => {
+  let {
+    isOverlay
+  } = _ref;
+  return isOverlay ? 'flex' : 'inline-flex';
+}, ";max-width:500px;align-items:center;font-size:16px;color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.textStrong;
+}, ";margin-right:4px;", _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  return variant === 'small' && /*#__PURE__*/css("display:block;font-size:14px;line-height:8px;color:", theme.colors.neutral.text, ";");
+}, ";");
+const Regular = _ref4 => {
+  let {
+    variant = 'normal',
+    isDisabledOnOverlay = false,
+    children = null,
+    className
+  } = _ref4;
+  const {
+    isOverlay
+  } = useOverlay();
+  return !isDisabledOnOverlay || !isOverlay ? jsx(StyledRegular, {
+    className: className,
+    variant: variant,
+    isOverlay: isOverlay,
+    children: children
+  }) : null;
+};
+
+export { Regular };

package/dist/src/components/EstimateCost/Components/Strong.js

@@ -0,0 +1,37 @@
+import _styled from '@emotion/styled/base';
+import { Regular } from './Regular.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledStrong = /*#__PURE__*/_styled(Regular, {
+  shouldForwardProp: prop => !['variant'].includes(prop),
+  target: "e1bhvxf60"
+})("display:inline-flex;align-items:center;font-size:", _ref => {
+  let {
+    variant
+  } = _ref;
+  return variant === 'big' ? 24 : 16;
+}, "px;", _ref2 => {
+  let {
+    variant
+  } = _ref2;
+  return variant === 'capitalized' ? `text-transform: capitalize;` : '';
+}, " color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.textStrong;
+}, ";font-weight:500;margin-right:4px;");
+const Strong = _ref4 => {
+  let {
+    variant = 'normal',
+    children = null,
+    isDisabledOnOverlay = false
+  } = _ref4;
+  return jsx(StyledStrong, {
+    variant: variant,
+    isDisabledOnOverlay: isDisabledOnOverlay,
+    children: children
+  });
+};
+
+export { Strong, StyledStrong };

package/dist/src/components/EstimateCost/Components/Unit.js

@@ -0,0 +1,61 @@
+import _styled from '@emotion/styled/base';
+import { TextInput } from '@ultraviolet/ui';
+import { useState, useEffect } from 'react';
+import { useOverlay } from '../OverlayContext.js';
+import { ItemResourceName } from '../componentStyle.js';
+import { Regular } from './Regular.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledTextInput = /*#__PURE__*/_styled(TextInput, {
+  target: "e1pr25uw0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "l1y63n",
+  styles: "input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type='number']{-moz-appearance:textfield;}"
+} : {
+  name: "l1y63n",
+  styles: "input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type='number']{-moz-appearance:textfield;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Unit = _ref => {
+  let {
+    amount,
+    itemCallback,
+    getAmountValue,
+    unit
+  } = _ref;
+  const {
+    isOverlay
+  } = useOverlay();
+  const [capacity, setCapacity] = useState(amount === 0 ? undefined : amount);
+  useEffect(() => {
+    itemCallback?.(capacity, true);
+    getAmountValue?.(capacity);
+  }, [getAmountValue, itemCallback, capacity]);
+  return isOverlay ? jsx(ItemResourceName, {
+    animated: false,
+    children: jsx(Regular, {
+      children: capacity
+    })
+  }) :
+  // 120px is arbitrary, just to avoid full width input (ugly) nor too small input.
+  jsx("div", {
+    style: {
+      width: '120px'
+    },
+    children: jsx(StyledTextInput, {
+      type: "number",
+      size: "small",
+      unit: unit,
+      placeholder: "00",
+      name: "capacity",
+      value: capacity?.toString(),
+      onChange: capacityText => {
+        setCapacity(Number(capacityText) < 0 ? 0 : Number(capacityText));
+        getAmountValue?.(capacity);
+      }
+    })
+  });
+};
+
+export { Unit };

package/dist/src/components/EstimateCost/Components/UnitInput.js

@@ -0,0 +1,122 @@
+import _styled from '@emotion/styled/base';
+import { Stack, TextInput, SelectInput } from '@ultraviolet/ui';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const sizesHeight = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const CustomTextInput = /*#__PURE__*/_styled(TextInput, {
+  target: "epio27v1"
+})("input{border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.default;
+}, " 0 0 ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.default;
+}, ";min-width:60px;border-right:0;&:hover,&:focus{text-decoration:none;border-right-width:1px;border-right-style:solid;border-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.primary.borderWeak;
+}, ";}}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type='number']{-moz-appearance:textfield;}");
+const CustomSelectInput = /*#__PURE__*/_styled(SelectInput, {
+  target: "epio27v0"
+})(_ref4 => {
+  let {
+    width
+  } = _ref4;
+  return width && `width: ${width}px;`;
+}, " ", _ref5 => {
+  let {
+    height
+  } = _ref5;
+  return height && `height: ${height}px;`;
+}, " &:hover,&:focus{text-decoration:none;border-color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.primary.borderWeak;
+}, ";box-shadow:none;}");
+const customSelectStyle = height => () => ({
+  control: {
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: 'none',
+    height,
+    minHeight: height
+  },
+  singleValue: {
+    marginTop: 0
+  }
+});
+const UnitInput = _ref7 => {
+  let {
+    name = '',
+    maxValue = 99999,
+    minValue = 1,
+    size = 'medium',
+    placeholder = '0',
+    onChange,
+    onChangeUnitValue,
+    value,
+    unitValue,
+    textBoxWidth = 100,
+    selectInputWidth = 200,
+    disabled = false,
+    options,
+    className,
+    notice,
+    label,
+    required,
+    valueError,
+    unitError,
+    type = 'number',
+    'data-testid': dataTestId
+  } = _ref7;
+  return jsxs(Stack, {
+    direction: "row",
+    "data-testid": dataTestId,
+    children: [jsx(CustomTextInput, {
+      height: sizesHeight[size],
+      width: textBoxWidth,
+      type: type,
+      name: `${name}-value`,
+      max: maxValue,
+      min: minValue,
+      required: required,
+      value: value,
+      placeholder: placeholder,
+      onChange: input => {
+        const numericValue = input ? parseInt(input, 10) : minValue;
+        onChange(numericValue);
+      },
+      className: className,
+      disabled: disabled,
+      notice: notice,
+      label: label,
+      error: valueError
+    }), jsx(CustomSelectInput, {
+      width: selectInputWidth,
+      noTopLabel: true,
+      height: sizesHeight[size],
+      id: `${name}-unit`,
+      name: `${name}-unit`,
+      onChange: newValue => {
+        onChangeUnitValue(newValue.value);
+      },
+      error: unitError,
+      value: options.find(option => option.value === unitValue) || options[0],
+      options: options,
+      customStyle: customSelectStyle(sizesHeight[size]),
+      disabled: disabled || options.length === 1
+    })]
+  });
+};
+
+export { UnitInput, sizesHeight };