@pushwoosh/dumb-components 1.1.135 → 1.1.136

package/Calendar/CalendarSuperForm/components/CalendarTimeAndTimezoneSection/CalendarTimeAndTimezoneSection.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { TimeIcon } from '@pushwoosh/kit-icons';
@@ -53,93 +54,110 @@ export const CalendarTimeAndTimezoneSection = ({
     backgroundColor = Color.SOFT_LIGHT;
     borderRadius = ShapeRadius.SECTION;
   }
-  return React.createElement(Vertical, {
+  return _jsx(Vertical, {
     "$padding": padding,
     "$borderRadius": borderRadius,
-    "$bgColor": backgroundColor
-  }, showCollapsed ? React.createElement(Columns, {
-    "$sizes": "max-content 1fr max-content",
-    "$gap": 6,
-    "$alignItems": "center"
-  }, React.createElement(TimeIcon, {
-    size: "small",
-    view: "lined"
-  }), React.createElement(Text, {
-    "$variant": "footnote"
-  }, getSelectedTimeText(), ' ', timezoneShort), React.createElement(Button, {
-    color: "secondary",
-    size: "compact",
-    view: "ghost",
-    onClick: () => setExpanded(true)
-  }, React.createElement(Lang, {
-    message: "DUMB.CALENDAR.EXPAND_TIME"
-  }))) : React.createElement(React.Fragment, null, isRangePicker && React.createElement(Columns, {
-    "$sizes": "1fr max-content",
-    "$gap": 8,
-    "$alignItems": "center"
-  }, React.createElement(H5, null, React.createElement(Lang, {
-    message: "DUMB.CALENDAR.TIME_RANGE"
-  })), React.createElement(Button, {
-    color: "secondary",
-    size: "compact",
-    view: "ghost",
-    onClick: () => setExpanded(false)
-  }, React.createElement(Lang, {
-    message: "DUMB.CALENDAR.COLLAPSE_TIME"
-  }))), !isRangePicker ? React.createElement(Horizontal, {
-    "$alignItems": "center",
-    "$gap": 8,
-    "$justifyContent": "start"
-  }, React.createElement(CalendarTimeInput, {
-    value: value,
-    onChange: time => {
-      const newStruct = extendPeriodStruct(value, time);
-      onChange(newStruct);
-    },
-    disabled: isDisabled
-  }), React.createElement(CalendarTimezoneSelect, {
-    timezone: timezone,
-    onChange: onChangeTimezone,
-    isDisabled: isDisabled
-  })) : React.createElement(Columns, {
-    "$sizes": visibleCount === 1 ? '1fr' : 'auto 1fr',
-    "$gap": 8
-  }, React.createElement(Horizontal, {
-    "$alignItems": "center",
-    "$gap": 8,
-    "$justifyContent": "start"
-  }, React.createElement(CalendarTimeInput, {
-    value: value[0],
-    onChange: time => {
-      const oldStruct = value[0];
-      const newStruct = extendPeriodStruct(oldStruct, time);
-      const newValue = value.length === 2 ? [newStruct, value[1]] : [newStruct];
-      onChange(newValue);
-    },
-    disabled: isDisabled
-  }), React.createElement("span", null, "\u2013"), React.createElement(CalendarTimeInput, {
-    value: value[1],
-    onChange: time => {
-      const oldStruct = value[1];
-      const newStruct = extendPeriodStruct(oldStruct, time);
-      const newValue = value.length === 2 ? [value[0], newStruct] : [newStruct];
-      onChange(newValue);
-    },
-    endPeriod: true,
-    disabled: isDisabled
-  })), React.createElement(CalendarTimezoneSelect, {
-    timezone: timezone,
-    onChange: onChangeTimezone,
-    isDisabled: isDisabled
-  })), isDisabled && React.createElement(Horizontal, {
-    "$margin": {
-      top: 4
-    }
-  }, React.createElement(Text, {
-    "$variant": "footnote",
-    "$color": Color.LOCKED
-  }, React.createElement(Lang, {
-    message: "DUMB.CALENDAR.SELECT_FIRST_HINT",
-    isRange: Boolean(isRangePicker)
-  })))));
+    "$bgColor": backgroundColor,
+    children: showCollapsed ? _jsxs(Columns, {
+      "$sizes": "max-content 1fr max-content",
+      "$gap": 6,
+      "$alignItems": "center",
+      children: [_jsx(TimeIcon, {
+        size: "small",
+        view: "lined"
+      }), _jsxs(Text, {
+        "$variant": "footnote",
+        children: [getSelectedTimeText(), ' ', timezoneShort]
+      }), _jsx(Button, {
+        color: "secondary",
+        size: "compact",
+        view: "ghost",
+        onClick: () => setExpanded(true),
+        children: _jsx(Lang, {
+          message: "DUMB.CALENDAR.EXPAND_TIME"
+        })
+      })]
+    }) : _jsxs(_Fragment, {
+      children: [isRangePicker && _jsxs(Columns, {
+        "$sizes": "1fr max-content",
+        "$gap": 8,
+        "$alignItems": "center",
+        children: [_jsx(H5, {
+          children: _jsx(Lang, {
+            message: "DUMB.CALENDAR.TIME_RANGE"
+          })
+        }), _jsx(Button, {
+          color: "secondary",
+          size: "compact",
+          view: "ghost",
+          onClick: () => setExpanded(false),
+          children: _jsx(Lang, {
+            message: "DUMB.CALENDAR.COLLAPSE_TIME"
+          })
+        })]
+      }), !isRangePicker ? _jsxs(Horizontal, {
+        "$alignItems": "center",
+        "$gap": 8,
+        "$justifyContent": "start",
+        children: [_jsx(CalendarTimeInput, {
+          value: value,
+          onChange: time => {
+            const newStruct = extendPeriodStruct(value, time);
+            onChange(newStruct);
+          },
+          disabled: isDisabled
+        }), _jsx(CalendarTimezoneSelect, {
+          timezone: timezone,
+          onChange: onChangeTimezone,
+          isDisabled: isDisabled
+        })]
+      }) : _jsxs(Columns, {
+        "$sizes": visibleCount === 1 ? '1fr' : 'auto 1fr',
+        "$gap": 8,
+        children: [_jsxs(Horizontal, {
+          "$alignItems": "center",
+          "$gap": 8,
+          "$justifyContent": "start",
+          children: [_jsx(CalendarTimeInput, {
+            value: value[0],
+            onChange: time => {
+              const oldStruct = value[0];
+              const newStruct = extendPeriodStruct(oldStruct, time);
+              const newValue = value.length === 2 ? [newStruct, value[1]] : [newStruct];
+              onChange(newValue);
+            },
+            disabled: isDisabled
+          }), _jsx("span", {
+            children: "\u2013"
+          }), _jsx(CalendarTimeInput, {
+            value: value[1],
+            onChange: time => {
+              const oldStruct = value[1];
+              const newStruct = extendPeriodStruct(oldStruct, time);
+              const newValue = value.length === 2 ? [value[0], newStruct] : [newStruct];
+              onChange(newValue);
+            },
+            endPeriod: true,
+            disabled: isDisabled
+          })]
+        }), _jsx(CalendarTimezoneSelect, {
+          timezone: timezone,
+          onChange: onChangeTimezone,
+          isDisabled: isDisabled
+        })]
+      }), isDisabled && _jsx(Horizontal, {
+        "$margin": {
+          top: 4
+        },
+        children: _jsx(Text, {
+          "$variant": "footnote",
+          "$color": Color.LOCKED,
+          children: _jsx(Lang, {
+            message: "DUMB.CALENDAR.SELECT_FIRST_HINT",
+            isRange: Boolean(isRangePicker)
+          })
+        })
+      })]
+    })
+  });
 };

package/Calendar/CalendarSuperForm/components/CalendarTimeInput.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export type CalendarTimeInputProps<T extends {
     hour: number;
     minute: number;
@@ -16,4 +15,4 @@ export type CalendarTimeInputProps<T extends {
 export declare const CalendarTimeInput: <T extends {
     hour: number;
     minute: number;
-}>({ value, onChange, disabled, endPeriod, }: CalendarTimeInputProps<T>) => React.JSX.Element;
+}>({ value, onChange, disabled, endPeriod, }: CalendarTimeInputProps<T>) => import("react/jsx-runtime").JSX.Element;

package/Calendar/CalendarSuperForm/components/CalendarTimeInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { NativeTimeInput } from '../../../native';
 import { formatTwoDigitNumber } from '../../helpers';
 export const CalendarTimeInput = ({
@@ -9,7 +9,7 @@ export const CalendarTimeInput = ({
 }) => {
   const defaultHour = endPeriod ? 23 : 0;
   const defaultMinute = endPeriod ? 59 : 0;
-  return React.createElement(NativeTimeInput, {
+  return _jsx(NativeTimeInput, {
     value: `${formatTwoDigitNumber((value === null || value === void 0 ? void 0 : value.hour) ?? defaultHour)}:${formatTwoDigitNumber((value === null || value === void 0 ? void 0 : value.minute) ?? defaultMinute)}`,
     onChange: e => {
       const [hour, minute] = e.target.value.split(':').map(Number);

package/Calendar/CalendarSuperForm/components/CalendarTimezoneSelect.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Select } from '../../../Select';
 import { getSortedTimezones } from '../../helpers-tz';
 export const CalendarTimezoneSelect = ({
@@ -9,7 +10,7 @@ export const CalendarTimezoneSelect = ({
   const timezonesOptions = useMemo(() => {
     return getSortedTimezones();
   }, []);
-  return React.createElement(Select, {
+  return _jsx(Select, {
     value: timezonesOptions.find(op => op.value === timezone),
     onChange: value => onChange(value.value),
     options: timezonesOptions,

package/CardMetric/CardChildren.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Spinner } from '../Spinner';
 import { CardCollapse } from './CardCollapse';
 export function CardChildren(props) {
@@ -12,14 +12,17 @@ export function CardChildren(props) {
     return null;
   }
   if (loading) {
-    return React.createElement(Spinner, {
+    return _jsx(Spinner, {
       size: "medium"
     });
   }
   if (collapse !== undefined) {
-    return React.createElement(CardCollapse, {
-      isCollapsed: isCollapsed
-    }, children);
+    return _jsx(CardCollapse, {
+      isCollapsed: isCollapsed,
+      children: children
+    });
   }
-  return React.createElement(React.Fragment, null, children);
+  return _jsx(_Fragment, {
+    children: children
+  });
 }

package/CardMetric/CardCollapse.js

@@ -1,13 +1,15 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CollapseContainer, CollapseInner } from './styles';
 export function CardCollapse(props) {
   const {
     children,
     isCollapsed
   } = props;
-  return React.createElement(CollapseContainer, {
-    isCollapsed: isCollapsed
-  }, React.createElement(CollapseInner, {
-    isCollapsed: isCollapsed
-  }, children));
+  return _jsx(CollapseContainer, {
+    isCollapsed: isCollapsed,
+    children: _jsx(CollapseInner, {
+      isCollapsed: isCollapsed,
+      children: children
+    })
+  });
 }

package/CardMetric/CardMetric.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { InfoRoundIcon, ChevronIcon } from '@pushwoosh/kit-icons';
 import { Spinner } from '../Spinner';
@@ -24,38 +25,56 @@ export function CardMetric({
   const [isCollapsed, setIsCollapsed] = useState(!!(collapse !== null && collapse !== void 0 && collapse.isCollapsed));
   const onMouseOver = () => setVisibleInfo(true);
   const onMouseOut = () => setVisibleInfo(false);
-  return React.createElement(CardContainer, {
+  return _jsxs(CardContainer, {
     view: view,
     focus: focus,
-    ...otherProps
-  }, (!!title || !!headerExtra) && React.createElement(CardHeader, null, React.createElement(CardHeaderLeft, null, React.createElement(CardTitle, {
-    onClick: () => {
-      if (collapse !== undefined) {
-        setIsCollapsed(prevState => !prevState);
-      }
-    },
-    collapsable: collapse !== undefined
-  }, title, collapse !== undefined && React.createElement(ChevronIcon, {
-    direction: isCollapsed ? 'down' : 'up',
-    size: "small"
-  }), React.createElement(CardInfo, {
-    hide: !tooltip,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut
-  }, React.createElement(Tooltip, {
-    isVisible: visibleInfo,
-    content: tooltip
-  }, React.createElement("div", null, React.createElement(InfoRoundIcon, {
-    size: "small",
-    view: "lined",
-    color: visibleInfo ? Color.PRIMARY_HOVER : Color.SOFT
-  }))))), metric !== undefined && (loading ? React.createElement(Spinner, {
-    size: "medium"
-  }) : React.createElement(CardMetricValue, null, metric, React.createElement(CardExtraMetric, {
-    color: extraMetricColor
-  }, extraMetric)))), React.createElement("div", null, headerExtra)), React.createElement(CardChildren, {
-    loading: loading,
-    collapse: collapse,
-    isCollapsed: isCollapsed
-  }, children), !!description && React.createElement(CardDescription, null, description));
+    ...otherProps,
+    children: [(!!title || !!headerExtra) && _jsxs(CardHeader, {
+      children: [_jsxs(CardHeaderLeft, {
+        children: [_jsxs(CardTitle, {
+          onClick: () => {
+            if (collapse !== undefined) {
+              setIsCollapsed(prevState => !prevState);
+            }
+          },
+          collapsable: collapse !== undefined,
+          children: [title, collapse !== undefined && _jsx(ChevronIcon, {
+            direction: isCollapsed ? 'down' : 'up',
+            size: "small"
+          }), _jsx(CardInfo, {
+            hide: !tooltip,
+            onMouseOver: onMouseOver,
+            onMouseOut: onMouseOut,
+            children: _jsx(Tooltip, {
+              isVisible: visibleInfo,
+              content: tooltip,
+              children: _jsx("div", {
+                children: _jsx(InfoRoundIcon, {
+                  size: "small",
+                  view: "lined",
+                  color: visibleInfo ? Color.PRIMARY_HOVER : Color.SOFT
+                })
+              })
+            })
+          })]
+        }), metric !== undefined && (loading ? _jsx(Spinner, {
+          size: "medium"
+        }) : _jsxs(CardMetricValue, {
+          children: [metric, _jsx(CardExtraMetric, {
+            color: extraMetricColor,
+            children: extraMetric
+          })]
+        }))]
+      }), _jsx("div", {
+        children: headerExtra
+      })]
+    }), _jsx(CardChildren, {
+      loading: loading,
+      collapse: collapse,
+      isCollapsed: isCollapsed,
+      children: children
+    }), !!description && _jsx(CardDescription, {
+      children: description
+    })]
+  });
 }

package/Checkbox/Checkbox.js

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { NativeLabel, NativeCheckbox } from './styles';
@@ -31,32 +32,37 @@ export function Checkbox(props) {
       checkboxRef.current.indeterminate = isIndeterminate ?? false;
     }
   }, [checkboxRef, isIndeterminate]);
-  const checkboxMarkup = React.createElement(NativeLabel, {
+  const checkboxMarkup = _jsxs(NativeLabel, {
     htmlFor: localId,
-    "$color": isDisabled ? Color.LOCKED : Color.MAIN
-  }, React.createElement(Horizontal, {
-    "$padding": 3
-  }, React.createElement(NativeCheckbox, {
-    type: "checkbox",
-    id: localId,
-    ref: checkboxRef,
-    value: value,
-    name: name,
-    "$color": activeCheckboxColor,
-    checked: isChecked,
-    disabled: isDisabled,
-    "$type": type,
-    onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.checked)
-  })), label && React.createElement("span", null, label));
+    "$color": isDisabled ? Color.LOCKED : Color.MAIN,
+    children: [_jsx(Horizontal, {
+      "$padding": 3,
+      children: _jsx(NativeCheckbox, {
+        type: "checkbox",
+        id: localId,
+        ref: checkboxRef,
+        value: value,
+        name: name,
+        "$color": activeCheckboxColor,
+        checked: isChecked,
+        disabled: isDisabled,
+        "$type": type,
+        onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.checked)
+      })
+    }), label && _jsx("span", {
+      children: label
+    })]
+  });
   if (tooltip) {
-    return React.createElement(Horizontal, {
+    return _jsxs(Horizontal, {
       "$gap": 4,
-      "$alignItems": "start"
-    }, checkboxMarkup, React.createElement(TooltipTrigger, {
-      content: tooltip,
-      padding: "4px 0",
-      view: "question"
-    }));
+      "$alignItems": "start",
+      children: [checkboxMarkup, _jsx(TooltipTrigger, {
+        content: tooltip,
+        padding: "4px 0",
+        view: "question"
+      })]
+    });
   }
   return checkboxMarkup;
 }

package/Chip/Chip.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
-export declare const Chip: React.ForwardRefExoticComponent<{
+export declare const Chip: import("react").ForwardRefExoticComponent<{
     $variant?: import("./Chip.types").ChipVariant;
     $selected?: boolean;
-    $onClose?: React.HTMLAttributes<HTMLDivElement>["onClick"];
+    $onClose?: import("react").HTMLAttributes<HTMLDivElement>["onClick"];
     $readOnly?: boolean;
     $maxWidth?: string;
-    $icon?: React.ReactNode;
-    $tooltip?: React.ReactNode;
+    $icon?: import("react").ReactNode;
+    $tooltip?: import("react").ReactNode;
     as?: string;
 } & {
-    children?: React.ReactNode | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    children?: import("react").ReactNode | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/Chip/Chip.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { TooltipTrigger } from '../Tooltip';
 import { ChipCloseIcon, ChipLabel, ChipSlotIcon, ChipStyled } from './styles';
 export const Chip = forwardRef(({
@@ -18,7 +19,7 @@ export const Chip = forwardRef(({
   if ($readOnly && $onClose) {
     console.error('[Chip]: $onClose is ignored when $readOnly is true — read-only chips have no close button.');
   }
-  return React.createElement(ChipStyled, {
+  return _jsxs(ChipStyled, {
     ref: ref,
     "$variant": $variant,
     "$selected": $selected,
@@ -27,17 +28,23 @@ export const Chip = forwardRef(({
     "$readOnly": $readOnly,
     "$maxWidth": $maxWidth,
     as: as,
-    ...rest
-  }, $icon && React.createElement(ChipSlotIcon, null, $icon), React.createElement(ChipLabel, {
-    "$truncated": $maxWidth !== undefined
-  }, children), isCloseable && React.createElement(ChipCloseIcon, {
-    size: "small",
-    onClick: $onClose,
-    forwardedAs: "span"
-  }), hasTooltip && React.createElement(ChipSlotIcon, null, React.createElement(TooltipTrigger, {
-    view: "question",
-    size: "small",
-    position: "top-middle",
-    content: $tooltip
-  })));
+    ...rest,
+    children: [$icon && _jsx(ChipSlotIcon, {
+      children: $icon
+    }), _jsx(ChipLabel, {
+      "$truncated": $maxWidth !== undefined,
+      children: children
+    }), isCloseable && _jsx(ChipCloseIcon, {
+      size: "small",
+      onClick: $onClose,
+      forwardedAs: "span"
+    }), hasTooltip && _jsx(ChipSlotIcon, {
+      children: _jsx(TooltipTrigger, {
+        view: "question",
+        size: "small",
+        position: "top-middle",
+        content: $tooltip
+      })
+    })]
+  });
 });

package/CodeEditor/CodeEditor.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { type CodeEditorProps } from './types';
-export declare const CodeEditor: ({ value, onChange, readOnly, width, height, onBlur, extensions, themeOptions, hasError, placeholder, }: CodeEditorProps) => React.JSX.Element;
+export declare const CodeEditor: ({ value, onChange, readOnly, width, height, onBlur, extensions, themeOptions, hasError, placeholder, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;

package/CodeEditor/CodeEditor.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import createTheme from '@uiw/codemirror-themes';
-import React from 'react';
 import { defaultTheme } from './constants';
 import { CodeMirrorStyled } from './styles';
 export const CodeEditor = ({
@@ -14,7 +14,7 @@ export const CodeEditor = ({
   hasError,
   placeholder
 }) => {
-  return React.createElement(CodeMirrorStyled, {
+  return _jsx(CodeMirrorStyled, {
     value: value,
     theme: themeOptions ? createTheme(themeOptions) : defaultTheme,
     readOnly: readOnly,

package/CrashScreen/CrashScreen.js

@@ -1,16 +1,24 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { Lang } from './polyglot';
 import { RootBox, IconBox, TitleBox, DescriptionBox } from './styles';
 export function CrashScreen() {
-  return React.createElement(RootBox, null, React.createElement(IconBox, null, React.createElement(WarningRoundIcon, {
-    size: "medium",
-    view: "filled",
-    color: Color.WARNING
-  })), React.createElement(TitleBox, null, React.createElement(Lang, {
-    message: "DUMB.CRASH_SCREEN.TITLE"
-  })), React.createElement(DescriptionBox, null, React.createElement(Lang, {
-    message: "DUMB.CRASH_SCREEN.DESCRIPTION"
-  })));
+  return _jsxs(RootBox, {
+    children: [_jsx(IconBox, {
+      children: _jsx(WarningRoundIcon, {
+        size: "medium",
+        view: "filled",
+        color: Color.WARNING
+      })
+    }), _jsx(TitleBox, {
+      children: _jsx(Lang, {
+        message: "DUMB.CRASH_SCREEN.TITLE"
+      })
+    }), _jsx(DescriptionBox, {
+      children: _jsx(Lang, {
+        message: "DUMB.CRASH_SCREEN.DESCRIPTION"
+      })
+    })]
+  });
 }

package/DateTimePicker/components/AutosizeInput/AutosizeInput.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { Input } from '../Input';
 import { Hidden } from './styles';
 export function AutosizeInput(props) {
@@ -20,16 +21,19 @@ export function AutosizeInput(props) {
     const addWidth = offsetWidth ? 12 : 16;
     setWidth(offsetWidth + addWidth);
   }, [value]);
-  return React.createElement(React.Fragment, null, React.createElement(Input, {
-    value: value,
-    placeholder: placeholder,
-    width: width,
-    isDisabled: isDisabled,
-    onChange: onChange,
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur
-  }), React.createElement(Hidden, {
-    ref: ref
-  }, value || placeholder));
+  return _jsxs(_Fragment, {
+    children: [_jsx(Input, {
+      value: value,
+      placeholder: placeholder,
+      width: width,
+      isDisabled: isDisabled,
+      onChange: onChange,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onBlur: onBlur
+    }), _jsx(Hidden, {
+      ref: ref,
+      children: value || placeholder
+    })]
+  });
 }