@ssa-ui-kit/core 2.9.0 → 2.10.0

package/dist/index.js

@@ -70,7 +70,11 @@ __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),
+  BigNumberChart: () => (/* reexport */ BigNumberChart),
+  BigNumberChartComponent: () => (/* reexport */ BigNumberChartComponent),
   Button: () => (/* reexport */ Button_Button),
   ButtonGroup: () => (/* reexport */ ButtonGroup),
   Card: () => (/* reexport */ Card_Card),
@@ -137,6 +141,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 +259,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 +942,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 +7654,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 +7740,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 +7826,8 @@ const AccordionTitle = ({
   isOpened,
   ariaControls,
   className,
-  onClick
+  onClick,
+  ...props
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const styles = createTitleStyles(theme, isOpened);
@@ -7840,6 +7844,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 +16210,437 @@ 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/BigNumberChart/components/BigNumberChartHeader.tsx
+
+function BigNumberChartHeader_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 BigNumberChartHeader_FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "elke6i10"
+} : 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 BigNumberChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var BigNumberChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const BigNumberChartHeader = ({
+  features = []
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: BigNumberChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(BigNumberChartHeader_FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: BigNumberChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// external "@nivo/core"
+const core_namespaceObject = require("@nivo/core");
+;// external "@nivo/line"
+const line_namespaceObject = require("@nivo/line");
+;// ./src/components/Charts/BigNumberChart/components/TrendLineTooltip.tsx
+
+
+const TrendLineTooltipStyled = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19yhkwp0"
+} : 0)("background:", ({
+  theme
+}) => theme.colors.white, ";border:1px solid ", ({
+  theme
+}) => theme.colors.grey20, ";border-radius:8px;color:", ({
+  theme
+}) => theme.colors.greyDarker, ";font-weight:600;line-height:12px;font-size:10px;padding:0.5rem;" + ( true ? "" : 0));
+const TrendLineTooltip = ({
+  point,
+  valueFormat
+}) => {
+  const {
+    data
+  } = point;
+  const {
+    xFormatted,
+    yFormatted
+  } = point.data;
+  return (0,jsx_runtime_namespaceObject.jsx)(TrendLineTooltipStyled, {
+    children: valueFormat?.(data) ?? `${xFormatted} - ${yFormatted}`
+  });
+};
+;// ./src/components/Charts/BigNumberChart/components/TrendLine.tsx
+
+
+
+
+
+const ActivePoint = ({
+  currentPoint,
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsx)("g", {
+  children: currentPoint && (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DotsItem, {
+    size: props.pointSize || 10,
+    borderWidth: props.pointBorderWidth || 10,
+    x: currentPoint.x,
+    y: currentPoint.y,
+    datum: currentPoint.data,
+    color: currentPoint.color,
+    borderColor: currentPoint.borderColor,
+    labelYOffset: props.pointLabelYOffset
+  }, currentPoint.id)
+});
+const TrendLine = ({
+  color,
+  tooltipValueFormat,
+  ...props
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const _color = color ?? theme.colors.purpleDark;
+  return (0,jsx_runtime_namespaceObject.jsx)(line_namespaceObject.ResponsiveLine, {
+    axisBottom: null,
+    axisLeft: null,
+    axisRight: null,
+    axisTop: null,
+    colors: _color,
+    curve: "linear",
+    enableArea: true,
+    enableGridX: false,
+    enableGridY: false,
+    enablePoints: false,
+    lineWidth: 2,
+    pointBorderWidth: 2,
+    pointColor: "black",
+    pointLabelYOffset: -12,
+    pointSize: 5,
+    useMesh: true,
+    enableTouchCrosshair: true,
+    defs: [{
+      colors: [{
+        color: _color,
+        offset: 0
+      }, {
+        color: theme.colors.white,
+        offset: 100
+      }],
+      id: 'gradientA',
+      type: 'linearGradient'
+    }],
+    fill: [{
+      id: 'gradientA',
+      match: '*'
+    }],
+    enableCrosshair: false,
+    animate: false,
+    yScale: {
+      type: 'linear',
+      stacked: true,
+      reverse: false
+    },
+    pointBorderColor: {
+      from: 'serieColor'
+    },
+    margin: {
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    },
+    legends: [],
+    tooltip: args => (0,jsx_runtime_namespaceObject.jsx)(TrendLineTooltip, {
+      ...args,
+      valueFormat: tooltipValueFormat
+    }),
+    layers: ['grid', 'markers', 'axes', 'areas', 'crosshair', 'lines', 'points', 'slices', 'mesh', 'legends', ActivePoint],
+    ...props
+  });
+};
+;// ./src/components/Charts/BigNumberChart/BigNumberChart.tsx
+function BigNumberChart_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 BigNumberChart_ref =  true ? {
+  name: "qdcqne",
+  styles: "height:100%;justify-content:space-between"
+} : 0;
+var BigNumberChart_ref2 =  true ? {
+  name: "gfqabp",
+  styles: "font-size:32px;font-weight:700"
+} : 0;
+var BigNumberChart_ref3 =  true ? {
+  name: "26qidl",
+  styles: "position:relative;width:100%;height:50%"
+} : 0;
+var BigNumberChart_ref4 =  true ? {
+  name: "19s8nj4",
+  styles: "position:absolute;width:100%;height:100%"
+} : 0;
+const BigNumberChartComponent = ({
+  data,
+  title,
+  widgetCardProps,
+  trendLineProps,
+  interactive = true,
+  features = [],
+  valueFormat
+}) => {
+  const [hoveredValue, setHoveredValue] = (0,external_react_namespaceObject.useState)(null);
+  const lastValue = data.sort((a, b) => {
+    const ax = a.x ?? 0;
+    const bx = b.x ?? 0;
+    return Number(ax) - Number(bx);
+  }).at(-1);
+  const setHoveredValueThrottled = (0,hooks_namespaceObject.useThrottledCallback)(value => {
+    setHoveredValue(value);
+  }, 100);
+  const handleMouseMove = data => {
+    if (!interactive) return;
+    setHoveredValueThrottled(data.data);
+  };
+  const handleMouseLeave = () => {
+    setHoveredValueThrottled(null);
+  };
+  const value = hoveredValue ?? lastValue;
+  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+    features: features,
+    cardProps: {
+      title,
+      headerContent: (0,jsx_runtime_namespaceObject.jsx)(BigNumberChartHeader, {
+        features: features
+      }),
+      ...widgetCardProps
+    },
+    children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      direction: "column",
+      alignItems: "start",
+      css: BigNumberChart_ref,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: BigNumberChart_ref2,
+        children: (0,jsx_runtime_namespaceObject.jsx)("span", {
+          children: value && (valueFormat?.(value) ?? value?.y?.toString())
+        })
+      }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: BigNumberChart_ref3,
+        children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+          css: BigNumberChart_ref4,
+          children: (0,jsx_runtime_namespaceObject.jsx)(TrendLine, {
+            ...trendLineProps,
+            data: [{
+              id: 'trend-line',
+              data
+            }],
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave
+          })
+        })
+      })]
+    })
+  });
+};
+const BigNumberChart = WithFullscreenMode(BigNumberChartComponent);
+;// ./src/components/Charts/BigNumberChart/index.ts
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -16213,6 +16649,8 @@ const GaugeChart = WithFullscreenMode(GaugeChartComponent);
 
 
 
+
+
 ;// ./src/components/Popover/hooks/index.ts
 
 
@@ -16367,6 +16805,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 +17080,7 @@ const useTypeahead = ({
       setInputValue('');
       setFirstSuggestion('');
     } else {
-      setValue?.(name, selected.length ? selected[0] : undefined, {
+      setValue?.(name, selected.length ? selected[0] : [], {
         shouldDirty: !isFirstRender
       });
     }
@@ -16589,22 +17104,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 +17166,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 +17192,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 +17490,7 @@ const MultipleTrigger = () => {
         name: context.inputName,
         status: 'custom',
         disabled: context.isDisabled,
+        validationSchema: context.validationSchema,
         inputProps: {
           onClick: context.handleInputClick,
           onKeyDown: context.handleInputKeyDown,
@@ -17004,6 +17551,7 @@ const SingleTrigger = () => {
       name: context.inputName,
       status: 'custom',
       disabled: context.isDisabled,
+      validationSchema: context.validationSchema,
       inputProps: {
         onClick: context.handleInputClick,
         onKeyDown: context.handleInputKeyDown,
@@ -17288,6 +17836,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)."; }
 
@@ -17459,18 +18009,13 @@ const WithVisibleUpToLG = (Component, styles) => {
 ;// ./src/components/WithVisibleUpToLG/index.ts
 
 ;// external "@rjsf/core"
-const core_namespaceObject = require("@rjsf/core");
+const external_rjsf_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 +18029,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 +18644,13 @@ const RadioWidget = props => {
 
 const SelectWidget = props => {
   const {
+    id,
+    name,
     disabled,
     options,
     placeholder,
     onChange,
+    onBlur,
     onChangeOverride,
     value
   } = props;
@@ -18112,24 +18659,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 +18813,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 +18849,7 @@ const RangeWidget = props => {
 
 
 
+
 function generateWidgets() {
   return {
     CheckboxWidget: CheckboxWidget,
@@ -18255,25 +18857,178 @@ 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();
 function generateForm() {
-  return (0,core_namespaceObject.withTheme)(generateTheme());
+  return (0,external_rjsf_core_namespaceObject.withTheme)(generateTheme());
 }
 const UnstyledForm = generateForm();
 const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
@@ -18396,6 +19151,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
 
 
 ;// ./src/contexts/Translation/config.ts