@ssa-ui-kit/core 2.9.0 → 2.9.1

package/dist/index.js

@@ -70,6 +70,8 @@ __webpack_require__.d(__webpack_exports__, {
   AddNewAccountCard: () => (/* reexport */ AddNewAccountCard),
   Avatar: () => (/* reexport */ Avatar_Avatar),
   Badge: () => (/* reexport */ Badge_Badge),
+  BarGaugeChart: () => (/* reexport */ BarGaugeChart),
+  BarGaugeChartComponent: () => (/* reexport */ BarGaugeChartComponent),
   BarLineComplexChart: () => (/* reexport */ BarLineComplexChart),
   Button: () => (/* reexport */ Button_Button),
   ButtonGroup: () => (/* reexport */ ButtonGroup),
@@ -137,6 +139,7 @@ __webpack_require__.d(__webpack_exports__, {
   NestedTableRowProvider: () => (/* reexport */ NestedTableRowProvider),
   NotificationCard: () => (/* reexport */ NotificationCard),
   NotificationMenu: () => (/* reexport */ NotificationMenu),
+  NumberField: () => (/* reexport */ NumberField),
   Pagination: () => (/* reexport */ Pagination_Pagination),
   PaginationContext: () => (/* reexport */ PaginationContext),
   PaginationContextProvider: () => (/* reexport */ PaginationContextProvider),
@@ -254,7 +257,8 @@ __webpack_require__.d(__webpack_exports__, {
   useTabBarContext: () => (/* reexport */ useTabBarContext),
   useTooltip: () => (/* reexport */ useTooltip),
   useTooltipContext: () => (/* reexport */ useTooltipContext),
-  useTranslation: () => (/* reexport */ useTranslation)
+  useTranslation: () => (/* reexport */ useTranslation),
+  useTypeaheadContext: () => (/* reexport */ useTypeaheadContext)
 });
 
 // NAMESPACE OBJECT: ./src/styles/global.ts
@@ -936,10 +940,12 @@ __webpack_require__.d(colorPalettes_namespaceObject, {
 var JsonSchemaForm_namespaceObject = {};
 __webpack_require__.r(JsonSchemaForm_namespaceObject);
 __webpack_require__.d(JsonSchemaForm_namespaceObject, {
+  Fields: () => (fields),
   Form: () => (JsonSchemaForm_Form),
   Templates: () => (templates),
   Theme: () => (Theme),
   Widgets: () => (widgets),
+  generateFields: () => (generateFields),
   generateForm: () => (generateForm),
   generateTemplates: () => (generateTemplates),
   generateTheme: () => (generateTheme),
@@ -7646,8 +7652,8 @@ const useAccordionGroupContext = () => (0,external_react_namespaceObject.useCont
 const useAccordionGroup = () => {
   const [openedAccordions, setOpenedAccordions] = (0,external_react_namespaceObject.useState)([]);
   const [stayOpen, setStayOpen] = (0,external_react_namespaceObject.useState)(false);
-  const toggleOpenedAccordion = accordion => {
-    const isOpened = !!openedAccordions.find(activeAccordion => activeAccordion.id === accordion.id);
+  const toggleOpenedAccordion = (accordion, opened) => {
+    const isOpened = opened ?? !!openedAccordions.find(activeAccordion => activeAccordion.id === accordion.id);
     if (stayOpen) {
       const newOpenedAccordions = isOpened ? openedAccordions.filter(activeAccordion => activeAccordion.id !== accordion.id) : openedAccordions.concat([accordion]);
       setOpenedAccordions(newOpenedAccordions);
@@ -7732,20 +7738,15 @@ const AccordionGroup = ({
     children: external_react_namespaceObject.Children.map(children, child => {
       if (/*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(child)) {
         const {
-          renderContent,
-          renderTitle,
-          ...rest
+          id
         } = child.props;
-        const id = rest.id;
         const isOpened = !!openedAccordions?.find(activeAccordion => activeAccordion.id === id);
         return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, {
           key: id,
           isOpened,
           size,
           onClick: () => toggleOpenedAccordion({
-            id,
-            renderContent: renderContent.bind(null, rest),
-            renderTitle: renderTitle.bind(null, rest)
+            id
           })
         });
       }
@@ -7823,7 +7824,8 @@ const AccordionTitle = ({
   isOpened,
   ariaControls,
   className,
-  onClick
+  onClick,
+  ...props
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const styles = createTitleStyles(theme, isOpened);
@@ -7840,6 +7842,7 @@ const AccordionTitle = ({
         onClick();
       }
     },
+    ...props,
     children: (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
       children: [title, isOpened ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-down"
@@ -16205,6 +16208,188 @@ const GaugeChartComponent = ({
 const GaugeChart = WithFullscreenMode(GaugeChartComponent);
 ;// ./src/components/Charts/GaugeChart/index.ts
 
+;// ./src/components/Charts/BarGaugeChart/components/BarGaugeChartHeader.tsx
+
+function BarGaugeChartHeader_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 BarGaugeChartHeader_FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1kdngqn0"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var BarGaugeChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var BarGaugeChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const BarGaugeChartHeader = ({
+  features = []
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: BarGaugeChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(BarGaugeChartHeader_FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: BarGaugeChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// ./src/components/Charts/BarGaugeChart/components/Brick.tsx
+
+const Brick = /*#__PURE__*/base_default()('div',  true ? {
+  shouldForwardProp: propName => !propName.startsWith('$'),
+  target: "e1v2was00"
+} : 0)("position:relative;height:100%;width:", ({
+  $width
+}) => `${$width}px`, ";background:", ({
+  $color
+}) => $color, ";border-radius:12px;overflow:hidden;opacity:", ({
+  $inactive
+}) => $inactive ? 0.4 : 1, ";&::after{content:'';position:absolute;inset:0;background:rgba(85, 87, 90, 0.1);opacity:", ({
+  $inactive
+}) => $inactive ? 1 : 0, ";transition:opacity 0.2s;}" + ( true ? "" : 0));
+;// ./src/components/Charts/BarGaugeChart/components/GaugeBar.tsx
+function GaugeBar_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)."; }
+
+
+
+
+
+var GaugeBar_ref =  true ? {
+  name: "11upmbz",
+  styles: "flex:1;width:100%;display:flex;flex-direction:column"
+} : 0;
+var GaugeBar_ref2 =  true ? {
+  name: "1iczwj8",
+  styles: "font-weight:500;font-size:12px"
+} : 0;
+var GaugeBar_ref3 =  true ? {
+  name: "1r965ij",
+  styles: "flex:1;gap:10px"
+} : 0;
+var GaugeBar_ref4 =  true ? {
+  name: "xvarew",
+  styles: "font-weight:700;font-size:18px"
+} : 0;
+const GaugeBar = ({
+  title,
+  value,
+  min = 0,
+  max = 100,
+  gap = 2,
+  brickWidth = 6,
+  thresholds = [],
+  valueFormatter
+}) => {
+  const {
+    ref,
+    width
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const {
+    ref: valueRef,
+    width: valueWidth
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const theme = (0,react_namespaceObject.useTheme)();
+  const baseThreshold = {
+    value: 0,
+    color: theme.colors.green
+  };
+  const _thresholds = thresholds.slice().sort((a, b) => b.value - a.value);
+  const activeThreshold = _thresholds.find(threshold => value >= threshold.value) || baseThreshold;
+  const totalBricks = Math.max(0, Math.floor((width - valueWidth) / (brickWidth + gap)) - 1);
+  const percentagePerBrick = (max - min) / totalBricks;
+  const bricks = new Array(totalBricks).fill(0).map((_, index) => {
+    const brickValue = min + index * percentagePerBrick;
+    const threshold = _thresholds.find(threshold => brickValue >= threshold.value) || baseThreshold;
+    const inactive = value < brickValue;
+    return (0,jsx_runtime_namespaceObject.jsx)(Brick, {
+      $width: brickWidth,
+      $color: threshold.color,
+      $inactive: inactive
+    }, index);
+  });
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: GaugeBar_ref,
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: GaugeBar_ref2,
+      children: title
+    }), (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      ref: ref,
+      css: GaugeBar_ref3,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          flex: 1,
+          height: '100%',
+          padding: '10px 0',
+          display: 'flex',
+          gap: `${gap}px`
+        },  true ? "" : 0,  true ? "" : 0),
+        children: bricks
+      }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+        ref: valueRef,
+        style: {
+          color: activeThreshold.color
+        },
+        css: GaugeBar_ref4,
+        children: valueFormatter?.(value, activeThreshold.color) || value
+      })]
+    })]
+  });
+};
+;// ./src/components/Charts/BarGaugeChart/BarGaugeChart.tsx
+function BarGaugeChart_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)."; }
+
+
+
+
+var BarGaugeChart_ref =  true ? {
+  name: "s3tb3c",
+  styles: "height:100%;gap:12px"
+} : 0;
+const BarGaugeChartComponent = ({
+  title,
+  widgetCardProps,
+  bars = [],
+  features = []
+}) => (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+  features: features,
+  cardProps: {
+    title,
+    headerContent: (0,jsx_runtime_namespaceObject.jsx)(BarGaugeChartHeader, {
+      features: features
+    }),
+    ...widgetCardProps
+  },
+  children: (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    direction: "column",
+    alignItems: "start",
+    css: BarGaugeChart_ref,
+    children: bars.map((barProps, index) => (0,jsx_runtime_namespaceObject.jsx)(GaugeBar, {
+      ...barProps
+    }, index))
+  })
+});
+const BarGaugeChart = WithFullscreenMode(BarGaugeChartComponent);
+;// ./src/components/Charts/BarGaugeChart/index.ts
+
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -16213,6 +16398,7 @@ const GaugeChart = WithFullscreenMode(GaugeChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts
 
 
@@ -16367,6 +16553,83 @@ const SearchBox = ({
 
 
 
+;// external "@react-input/number-format"
+const number_format_namespaceObject = require("@react-input/number-format");
+;// ./src/components/NumberField/NumberField.tsx
+function NumberField_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)."; }
+
+
+
+
+var NumberField_ref =  true ? {
+  name: "t1bvca",
+  styles: "padding:0 14px"
+} : 0;
+var NumberField_ref2 =  true ? {
+  name: "chpy5q",
+  styles: "with:auto;border:0 !important;padding:2px 0;height:32px;border-radius:0"
+} : 0;
+const NumberField = ({
+  id,
+  value,
+  defaultValue,
+  description,
+  label,
+  success,
+  error,
+  status,
+  numberFormat,
+  onChange,
+  ...inputProps
+}) => {
+  const {
+    disabled
+  } = inputProps;
+  const formattedValue = value == null ? value : (0,number_format_namespaceObject.format)(value, numberFormat);
+  const formattedDefaultValue = defaultValue == null ? defaultValue : (0,number_format_namespaceObject.format)(defaultValue, numberFormat);
+  const [_value, setValue] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: formattedValue,
+    defaultValue: formattedDefaultValue,
+    finalValue: undefined,
+    onChange: value => {
+      const number = Number((0,number_format_namespaceObject.unformat)(value, numberFormat?.locales));
+      onChange?.(number);
+    }
+  });
+  const inputRef = (0,number_format_namespaceObject.useNumberFormat)(numberFormat);
+  const handleChange = event => {
+    setValue(event.target.value);
+  };
+  return (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
+    disabled: disabled,
+    status: status,
+    children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+      htmlFor: id,
+      children: label
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
+      css: NumberField_ref,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+        ref: inputRef,
+        css: NumberField_ref2,
+        inputProps: {
+          autoComplete: 'off',
+          value: _value,
+          onChange: handleChange
+        },
+        status: "custom",
+        ...inputProps
+      })
+    }), description && (0,jsx_runtime_namespaceObject.jsx)(FieldDescription, {
+      children: description
+    }), success && (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
+      children: success
+    }), error && (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
+      children: error
+    })]
+  });
+};
+;// ./src/components/NumberField/index.ts
+
 ;// ./src/components/Tooltip/SimpleChartTooltip.tsx
 
 
@@ -16565,7 +16828,7 @@ const useTypeahead = ({
       setInputValue('');
       setFirstSuggestion('');
     } else {
-      setValue?.(name, selected.length ? selected[0] : undefined, {
+      setValue?.(name, selected.length ? selected[0] : [], {
         shouldDirty: !isFirstRender
       });
     }
@@ -16589,22 +16852,25 @@ const useTypeahead = ({
     }
   }, [error]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    const keyedOptions = {};
-    const childItems = external_react_default().Children.toArray(children).filter(Boolean).map((child, index) => {
-      keyedOptions[child.props.value] = {
-        ...child.props
-      };
-      return /*#__PURE__*/external_react_default().cloneElement(child, {
-        index,
-        ...child.props
-      });
+    processChildren({
+      selectedLocal: selected
     });
-    setOptionsWithKey(keyedOptions);
-    setItems(childItems);
-    setFirstRender(false);
-  }, [selectedItems, children]);
+  }, [children]);
   (0,external_react_namespaceObject.useEffect)(() => {
     setSelected(selectedItems || []);
+    if (selectedItems?.length) {
+      if (!isMultiple) {
+        const currentOption = optionsWithKey[selectedItems[0]];
+        const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
+        setInputValue(`${optionText}`);
+      }
+    } else {
+      setInputValue('');
+      setFirstSuggestion('');
+    }
+    processChildren({
+      selectedLocal: selectedItems || []
+    });
   }, [selectedItems]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
@@ -16648,17 +16914,16 @@ const useTypeahead = ({
         setSelected([]);
       }
       if (foundItem && !selected.includes(foundItem?.value)) {
-        setSelected([foundItem?.value]);
+        setSelected([foundItem.value]);
       }
     }
   }, [optionsWithKey, inputValue]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (!isMultiple && selected.length && Object.keys(optionsWithKey).length) {
-      const currentOption = optionsWithKey[selected[0]];
-      const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
-      setInputValue(`${optionText}`);
-    }
-  }, [selected, optionsWithKey]);
+    processSingleSelected({
+      optionsWithKeyLocal: optionsWithKey,
+      selectedLocal: selected
+    });
+  }, [selected]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (inputValue) {
       const newFirstSuggestion = Object.values(optionsWithKey)?.find(item => {
@@ -16675,12 +16940,41 @@ const useTypeahead = ({
       }
     }
   }, [inputValue, items, selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    onEmptyChange?.(isEmpty);
-  }, [isEmpty]);
+  const processSingleSelected = ({
+    optionsWithKeyLocal = {},
+    selectedLocal = []
+  }) => {
+    if (!isMultiple && selectedLocal.length && Object.keys(optionsWithKeyLocal).length) {
+      const currentOption = optionsWithKeyLocal[selectedLocal[0]];
+      const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
+      setInputValue(`${optionText}`);
+    }
+  };
+  const processChildren = ({
+    selectedLocal
+  }) => {
+    const keyedOptions = {};
+    const childItems = external_react_default().Children.toArray(children).filter(Boolean).map((child, index) => {
+      keyedOptions[child.props.value] = {
+        ...child.props
+      };
+      return /*#__PURE__*/external_react_default().cloneElement(child, {
+        index,
+        ...child.props
+      });
+    });
+    setOptionsWithKey(keyedOptions);
+    setItems(childItems);
+    processSingleSelected({
+      optionsWithKeyLocal: keyedOptions,
+      selectedLocal
+    });
+    setFirstRender(false);
+  };
   const handleOnEmptyChange = newIsEmptyValue => {
     if (newIsEmptyValue !== isEmpty) {
       setIsEmpty(newIsEmptyValue);
+      onEmptyChange?.(newIsEmptyValue);
     }
   };
   const handleOpenChange = open => {
@@ -16944,6 +17238,7 @@ const MultipleTrigger = () => {
         name: context.inputName,
         status: 'custom',
         disabled: context.isDisabled,
+        validationSchema: context.validationSchema,
         inputProps: {
           onClick: context.handleInputClick,
           onKeyDown: context.handleInputKeyDown,
@@ -17004,6 +17299,7 @@ const SingleTrigger = () => {
       name: context.inputName,
       status: 'custom',
       disabled: context.isDisabled,
+      validationSchema: context.validationSchema,
       inputProps: {
         onClick: context.handleInputClick,
         onKeyDown: context.handleInputKeyDown,
@@ -17288,6 +17584,8 @@ const highlightInputMatch = (item, keyword) => {
 
 
 
+
+
 ;// ./src/components/UserProfile/styles.ts
 function UserProfile_styles_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)."; }
 
@@ -17463,14 +17761,9 @@ const core_namespaceObject = require("@rjsf/core");
 ;// external "@rjsf/utils"
 const external_rjsf_utils_namespaceObject = require("@rjsf/utils");
 ;// ./src/components/JsonSchemaForm/templates/SubmitButton.tsx
-function SubmitButton_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)."; }
 
 
 
-var SubmitButton_ref =  true ? {
-  name: "xda5ep",
-  styles: "margin-top:12px"
-} : 0;
 const SubmitButton = ({
   uiSchema
 }) => {
@@ -17484,7 +17777,6 @@ const SubmitButton = ({
   }
   return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
     type: "submit",
-    css: SubmitButton_ref,
     ...submitButtonProps,
     "data-testid": "rjsf-submit-button",
     children: submitText
@@ -18100,10 +18392,13 @@ const RadioWidget = props => {
 
 const SelectWidget = props => {
   const {
+    id,
+    name,
     disabled,
     options,
     placeholder,
     onChange,
+    onBlur,
     onChangeOverride,
     value
   } = props;
@@ -18112,24 +18407,49 @@ const SelectWidget = props => {
     enumDisabled = []
   } = options;
   const selectedIndex = (0,external_rjsf_utils_namespaceObject.enumOptionsIndexForValue)(value, enumOptions);
-  const handleChange = onChangeOverride ? onChangeOverride : ({
-    value
-  }) => onChange((0,external_rjsf_utils_namespaceObject.enumOptionsValueForIndex)(value, enumOptions));
-  return (0,jsx_runtime_namespaceObject.jsx)("div", {
-    children: (0,jsx_runtime_namespaceObject.jsx)(Dropdown_Dropdown, {
-      isDisabled: disabled,
-      onChange: handleChange,
-      placeholder: placeholder,
-      selectedItem: selectedIndex ? {
-        value: selectedIndex,
-        label: enumOptions[Number(selectedIndex)].label
-      } : undefined,
-      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => (0,jsx_runtime_namespaceObject.jsx)(DropdownOption_DropdownOption, {
-        value: String(i),
-        label: option.label,
-        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1
-      }, i))
-    })
+  const handleChange = onChangeOverride ? onChangeOverride : value => {
+    onChange(value);
+  };
+  const handleBlur = ({
+    target
+  }) => onBlur(id, target && target.value);
+  const onEmptyChange = isEmpty => {
+    if (isEmpty) {
+      handleChange();
+    }
+  };
+  const register = fieldName => ({
+    onBlur: handleBlur,
+    onChange: handleChange,
+    name: fieldName,
+    ref: () => {}
+  });
+  const items = Array.isArray(enumOptions) ? enumOptions : [];
+  const selectedItems = selectedIndex ? [items[Number(selectedIndex)].value] : [];
+  return (0,jsx_runtime_namespaceObject.jsx)(Typeahead, {
+    width: "100%",
+    selectedItems: selectedItems,
+    isDisabled: disabled,
+    name: name
+    // RJSF provides placeholder as empty string
+    ,
+    placeholder: placeholder || undefined,
+    onChange: handleChange,
+    register: register,
+    onEmptyChange: onEmptyChange,
+    renderOption: ({
+      label,
+      input
+    }) => highlightInputMatch(label, input),
+    children: items.map(({
+      label,
+      value
+    }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+      value: value,
+      label: label || value,
+      isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
+      children: label || value
+    }, value))
   });
 };
 ;// ./src/components/JsonSchemaForm/widgets/PasswordWidget.tsx
@@ -18241,6 +18561,35 @@ const RangeWidget = props => {
     })
   });
 };
+;// ./src/components/JsonSchemaForm/widgets/DateWidget.tsx
+
+
+
+
+const DateWidget = props => {
+  const {
+    value,
+    name,
+    uiSchema,
+    onChange
+  } = props;
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  const {
+    outputFormat = 'yyyy-MM-dd'
+  } = uiSchema?.['ui:options'] || {};
+  const onDateChange = date => {
+    const formattedDate = date && external_luxon_namespaceObject.DateTime.fromJSDate(date).toFormat(outputFormat);
+    onChange(formattedDate);
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
+    ...useFormResult,
+    children: (0,jsx_runtime_namespaceObject.jsx)(DatePicker, {
+      name: name,
+      defaultValue: value,
+      onChange: onDateChange
+    })
+  });
+};
 ;// ./src/components/JsonSchemaForm/widgets/index.ts
 
 
@@ -18248,6 +18597,7 @@ const RangeWidget = props => {
 
 
 
+
 function generateWidgets() {
   return {
     CheckboxWidget: CheckboxWidget,
@@ -18255,20 +18605,173 @@ function generateWidgets() {
     RadioWidget: RadioWidget,
     PasswordWidget: PasswordWidget,
     SelectWidget: SelectWidget,
-    RangeWidget: RangeWidget
+    RangeWidget: RangeWidget,
+    DateWidget: DateWidget
   };
 }
 /* harmony default export */ const widgets = (generateWidgets());
+;// ./src/components/JsonSchemaForm/fields/AccordionField.tsx
+
+function AccordionField_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 StyledAccordionTitle = /*#__PURE__*/base_default()(AccordionTitle,  true ? {
+  target: "eilkhls0"
+} : 0)("color:", ({
+  theme
+}) => theme.colors.greyDarker, ";font-weight:700;padding:0;", ({
+  collapsed
+}) => !collapsed && `margin-bottom: 20px;`, " & svg{& path{stroke:", ({
+  theme
+}) => theme.colors.greyDarker80, ";}}" + ( true ? "" : 0));
+var AccordionField_ref =  true ? {
+  name: "1pc4ge5",
+  styles: "padding:0;border:none"
+} : 0;
+var AccordionField_ref2 =  true ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : 0;
+const AccordionField = props => {
+  const {
+    uiSchema,
+    idSchema,
+    name,
+    schema,
+    registry
+  } = props;
+  const accordionOptions = uiSchema?.['ui:options'] || {};
+  if (!accordionOptions.targetField) {
+    throw new Error('AccordionField: options.targetField is required to render AccordionField');
+  }
+  const title = uiSchema?.['ui:title'] ? uiSchema['ui:title'] : schema?.title ? schema.title : name;
+
+  // if `ui:widget` is set to 'hide', this field won't be mounted
+  // useAccordionGroupContext manages the open/close state of accordions across mounts
+  const {
+    openedAccordions,
+    toggleOpenedAccordion,
+    setStayOpen
+  } = useAccordionGroupContext();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    // prevent this accordion from being auto-collapsed when another one is opened
+    setStayOpen(true);
+  }, []);
+  const openedAccordion = openedAccordions.find(({
+    id
+  }) => id === idSchema.$id);
+  const collapsed = openedAccordion !== undefined ? false : !!accordionOptions.collapsed;
+  const onAccordionClick = () => {
+    toggleOpenedAccordion({
+      id: idSchema.$id
+    }, !collapsed);
+  };
+  const TargetField = registry.fields[accordionOptions.targetField];
+  const accordionId = `${idSchema.$id}.accordion`;
+  return (0,jsx_runtime_namespaceObject.jsx)(Accordion, {
+    id: accordionId,
+    size: "small",
+    ariaControls: `${accordionId}-content`,
+    title: title,
+    isOpened: !collapsed,
+    onClick: () => onAccordionClick(),
+    css: AccordionField_ref,
+    renderContent: contentProps => (0,jsx_runtime_namespaceObject.jsx)(AccordionContent, {
+      ...contentProps,
+      css: AccordionField_ref2,
+      children: (0,jsx_runtime_namespaceObject.jsx)(TargetField, {
+        ...props,
+        schema: {
+          ...schema,
+          title: ''
+        }
+      })
+    }),
+    renderTitle: titleProps => (0,jsx_runtime_namespaceObject.jsx)(StyledAccordionTitle, {
+      ...titleProps,
+      collapsed: collapsed
+    })
+  });
+};
+;// ./src/components/JsonSchemaForm/fields/DateRangeField.tsx
+
+
+
+
+const DateRangeField = props => {
+  const {
+    idSchema,
+    uiSchema,
+    schema,
+    name,
+    formData,
+    disabled,
+    onChange
+  } = props;
+  if (schema.type !== 'object') {
+    throw new Error('DateRangeField: schema.type must be "object" to render DateRangeField');
+  }
+  if (!schema.properties?.start || !schema.properties?.end) {
+    throw new Error('DateRangeField: schema.properties.start and schema.properties.end are required to render DateRangeField');
+  }
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  const {
+    outputFormat = 'yyyy-MM-dd'
+  } = uiSchema?.['ui:options'] || {};
+  const title = uiSchema?.['ui:title'] ? uiSchema['ui:title'] : schema?.title ? schema.title : name;
+  const id = idSchema.$id;
+  const {
+    start,
+    end
+  } = formData || {};
+  const onDateRangeChange = date => {
+    const [startDate, endDate] = date || [null, null];
+    const start = startDate && external_luxon_namespaceObject.DateTime.fromJSDate(startDate).toFormat(outputFormat);
+    const end = endDate && external_luxon_namespaceObject.DateTime.fromJSDate(endDate).toFormat(outputFormat);
+    const dateRangeChange = {
+      ...(start && {
+        start
+      }),
+      ...(end && {
+        end
+      })
+    };
+    onChange(dateRangeChange);
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
+    ...useFormResult,
+    children: (0,jsx_runtime_namespaceObject.jsx)(DateRangePicker, {
+      name: id,
+      label: title,
+      disabled: disabled,
+      defaultValue: [start, end],
+      onChange: onDateRangeChange
+    })
+  });
+};
+;// ./src/components/JsonSchemaForm/fields/index.ts
+
+
+const generateFields = () => {
+  return {
+    accordion: AccordionField,
+    daterange: DateRangeField
+  };
+};
+/* harmony default export */ const fields = (generateFields());
 ;// ./src/components/JsonSchemaForm/index.ts
 
 function JsonSchemaForm_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)."; }
 
 
 
+
 function generateTheme() {
   return {
     templates: generateTemplates(),
-    widgets: generateWidgets()
+    widgets: generateWidgets(),
+    fields: generateFields()
   };
 }
 const Theme = generateTheme();
@@ -18396,6 +18899,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
 
 
 ;// ./src/contexts/Translation/config.ts