@ballistix.digital/react-components 0.5.5 → 0.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -540,7 +540,9 @@ var ButtonElement = function (props) {
540
540
  return result;
541
541
  };
542
542
  var styles = handleGenerateStyle();
543
- return (jsxRuntime.jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
543
+ return (jsxRuntime.jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: function (e) {
544
+ onClick && onClick(e);
545
+ }, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
544
546
  };
545
547
 
546
548
  var base$n = {
@@ -717,8 +719,9 @@ var InputGroupForm = function (props) {
717
719
  };
718
720
  var styles = handleGenerateStyle();
719
721
  var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
722
+ var isClearable = !trailing && isValid && onClear && value !== '' && value;
720
723
  return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.body, children: [leading && jsxRuntime.jsx("div", { className: styles.leading, children: leading }), !htmlType ||
721
- (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && !trailing && isValid && onClear && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && !trailing && isValid && onClear && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && jsxRuntime.jsx("p", { className: styles.error, children: error })] })] }));
724
+ (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && jsxRuntime.jsx("p", { className: styles.error, children: error })] })] }));
722
725
  };
723
726
 
724
727
  var base$k = {
@@ -1207,13 +1210,13 @@ var PanelPaginationNavigation = function (props) {
1207
1210
  }, [onChange]);
1208
1211
  var pageType = React.useMemo(function () {
1209
1212
  var result = 'center';
1210
- if (current < min + 3) {
1213
+ if (current < min + 2) {
1211
1214
  result = 'first';
1212
1215
  }
1213
- if (current > max - 3) {
1216
+ if (current > max - 2) {
1214
1217
  result = 'last';
1215
1218
  }
1216
- if (max <= 3) {
1219
+ if (max <= 4) {
1217
1220
  result = 'simple';
1218
1221
  }
1219
1222
  return result;
@@ -1224,13 +1227,13 @@ var PanelPaginationNavigation = function (props) {
1224
1227
  component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
1225
1228
  break;
1226
1229
  case 'center':
1227
- component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current - 1); }, children: current - 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return handleChangeCurrent(current); }, children: current }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current + 1); }, children: current + 1 }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
1230
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), current - 2 !== min && jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current - 1); }, children: current - 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return handleChangeCurrent(current); }, children: current }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
1228
1231
  break;
1229
1232
  case 'last':
1230
1233
  component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 2); }, children: max - 2 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 1); }, children: max - 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
1231
1234
  break;
1232
1235
  case 'simple':
1233
- component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 }))] }));
1236
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 3); }, children: min + 3 }))] }));
1234
1237
  break;
1235
1238
  }
1236
1239
  return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxRuntime.jsxs("div", { className: styles.desktop.container, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Previous" }), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Next" }), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
@@ -1883,12 +1886,15 @@ var PagePaginationNavigation = function (props) {
1883
1886
  var styles = handleGenerateStyle();
1884
1887
  var pageType = React.useMemo(function () {
1885
1888
  var result = 'center';
1886
- if (current < min + 3) {
1889
+ if (current < min + 2) {
1887
1890
  result = 'first';
1888
1891
  }
1889
- if (current > max - 3) {
1892
+ if (current > max - 2) {
1890
1893
  result = 'last';
1891
1894
  }
1895
+ if (max <= 4) {
1896
+ result = 'simple';
1897
+ }
1892
1898
  return result;
1893
1899
  }, [current, min, max]);
1894
1900
  var component;
@@ -1897,11 +1903,14 @@ var PagePaginationNavigation = function (props) {
1897
1903
  component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
1898
1904
  break;
1899
1905
  case 'center':
1900
- component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current - 1); }, children: current - 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); }, children: current }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current + 1); }, children: current + 1 }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
1906
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), current - 2 !== min && jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current - 1); }, children: current - 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); }, children: current }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
1901
1907
  break;
1902
1908
  case 'last':
1903
1909
  component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), jsxRuntime.jsx("span", { className: styles.divider, children: "..." }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return setCurrent(max - 2); }, children: max - 2 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return setCurrent(max - 1); }, children: max - 1 }), jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return setCurrent(max); }, children: max })] }));
1904
1910
  break;
1911
+ case 'simple':
1912
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), max >= min + 1 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return setCurrent(min + 3); }, children: min + 3 }))] }));
1913
+ break;
1905
1914
  }
1906
1915
  React.useEffect(function () {
1907
1916
  if (current) {
@@ -2488,6 +2497,10 @@ var SelectMenuForm = function (props) {
2488
2497
  }
2489
2498
  // eslint-disable-next-line react-hooks/exhaustive-deps
2490
2499
  }, [isFocus]);
2500
+ // listen to value changes.
2501
+ React.useEffect(function () {
2502
+ setState(value);
2503
+ }, [value]);
2491
2504
  return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx(Select, { primaryColor: "primary",
2492
2505
  //
2493
2506
  placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput,
@@ -2618,15 +2631,16 @@ var DateMenuForm = function (props) {
2618
2631
  return isEmpty ? (jsxRuntime.jsx(IconElement, { accessor: "calendar" })) : (jsxRuntime.jsx(IconElement, { accessor: "xmark", className: "text-black" }));
2619
2632
  } : _h, required = props.required, defaultValue = props.value, error = props.error, _j = props.type, type = _j === void 0 ? 'normal' : _j, _k = props.isRequired, isRequired = _k === void 0 ? false : _k, _l = props.isTouched, isTouched = _l === void 0 ? false : _l, isDisabled = props.isDisabled, _m = props.isSolo, isSolo = _m === void 0 ? false : _m, _o = props.isRanged, isRanged = _o === void 0 ? false : _o, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
2620
2633
  var isValid = error === undefined;
2621
- var _p = React.useState(true), isFocus = _p[0], setIsFocus = _p[1];
2622
- var _q = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
2634
+ var _p = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
2623
2635
  startDate: null,
2624
2636
  endDate: null,
2625
- }), state = _q[0], setState = _q[1];
2637
+ }), state = _p[0], setState = _p[1];
2626
2638
  var handleValueChange = function (newValue) {
2627
2639
  setState(newValue);
2628
2640
  onChange && onChange(newValue);
2629
- setIsFocus(false);
2641
+ setTimeout(function () {
2642
+ onBlur && onBlur();
2643
+ }, 50);
2630
2644
  };
2631
2645
  var handleGenerateStyle = function () {
2632
2646
  var result = deepCopyObject(styles$5.base);
@@ -2644,13 +2658,6 @@ var DateMenuForm = function (props) {
2644
2658
  }
2645
2659
  // eslint-disable-next-line react-hooks/exhaustive-deps
2646
2660
  }, [state]);
2647
- // Simulate onBlur event.
2648
- React.useEffect(function () {
2649
- if (!isFocus) {
2650
- onBlur && onBlur();
2651
- }
2652
- // eslint-disable-next-line react-hooks/exhaustive-deps
2653
- }, [isFocus]);
2654
2661
  return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon,
2655
2662
  //
2656
2663
  value: state,
@@ -9564,7 +9571,7 @@ var OpeningHourItem = function (props) {
9564
9571
  };
9565
9572
  onUpdate && onUpdate(params);
9566
9573
  }
9567
- }, className: toClassName(styles$2.control.action, form.values.closed ? 'bg-primary-500' : 'bg-gray-200'), children: [jsxRuntime.jsx("span", { className: styles$2.control.sr, children: "Toggle closed" }), jsxRuntime.jsx("span", { "aria-hidden": "true", className: toClassName(styles$2.control.span, form.values.closed ? 'translate-x-5' : 'translate-x-0') })] })] }), !isCreating ? (jsxRuntime.jsx(ButtonElement, { size: "sm", type: "outline", onClick: function () { return onDelete && onDelete(form.values.id); }, children: jsxRuntime.jsx(outline$2.XMarkIcon, { className: "w-4 h-4" }) })) : (jsxRuntime.jsx(ButtonElement, { size: "sm", type: "secondary", onClick: form.handleSubmit, children: jsxRuntime.jsx(outline$2.PlusIcon, { className: "w-4 h-4" }) }))] }));
9574
+ }, className: toClassName(styles$2.control.action, form.values.closed ? 'bg-primary-500' : 'bg-gray-200'), children: [jsxRuntime.jsx("span", { className: styles$2.control.sr, children: "Toggle closed" }), jsxRuntime.jsx("span", { "aria-hidden": "true", className: toClassName(styles$2.control.span, form.values.closed ? 'translate-x-5' : 'translate-x-0') })] })] }), !isCreating ? (jsxRuntime.jsx(ButtonElement, { size: "sm", type: "outline", onClick: function () { return onDelete && onDelete(form.values.id); }, children: jsxRuntime.jsx(outline$2.XMarkIcon, { className: "w-4 h-4" }) })) : (jsxRuntime.jsx(ButtonElement, { size: "sm", type: "secondary", onClick: function () { return form.handleSubmit(); }, children: jsxRuntime.jsx(outline$2.PlusIcon, { className: "w-4 h-4" }) }))] }));
9568
9575
  };
9569
9576
 
9570
9577
  var styles$2 = {