@ssa-ui-kit/core 2.1.0-canary-afe713f-20250306 → 2.1.1-canary-2f77c98-20250310

package/dist/index.js

@@ -85,24 +85,18 @@ __webpack_require__.d(__webpack_exports__, {
   CollapsibleNavBarProvider: () => (/* reexport */ CollapsibleNavBarProvider),
   ColorPicker: () => (/* reexport */ ColorPicker_ColorPicker),
   DatePicker: () => (/* reexport */ DatePicker),
+  Drawer: () => (/* reexport */ index_parts_namespaceObject),
   Dropdown: () => (/* reexport */ Dropdown_Dropdown),
   DropdownArrow: () => (/* reexport */ DropdownArrow_DropdownArrow),
   DropdownBase: () => (/* reexport */ components_DropdownBase_DropdownBase),
   DropdownOption: () => (/* reexport */ DropdownOption_DropdownOption),
   DropdownOptions: () => (/* reexport */ DropdownOptions_DropdownOptions),
   DropdownToggle: () => (/* reexport */ DropdownToggle_DropdownToggle),
-  FieldControlProps: () => (/* reexport */ FieldControl_namespaceObject.FieldControlProps),
-  FieldLabelProps: () => (/* reexport */ FieldLabel_namespaceObject.FieldLabelProps),
-  FieldProps: () => (/* reexport */ FieldRoot_namespaceObject.FieldRootProps),
-  Filter: () => (/* reexport */ useFiltersMultiSelect_namespaceObject.Filter),
   Filters: () => (/* reexport */ Filters),
   FiltersMultiSelect: () => (/* reexport */ FiltersMultiSelect),
   FiltersMultiSelectEmpty: () => (/* reexport */ FiltersMultiSelectEmpty),
-  FiltersMultiSelectEmptyProps: () => (/* reexport */ FiltersMultiSelectEmpty_namespaceObject.FiltersMultiSelectEmptyProps),
   FiltersMultiSelectOption: () => (/* reexport */ FiltersMultiSelectOption),
-  FiltersMultiSelectOptionProps: () => (/* reexport */ FiltersMultiSelectOption_namespaceObject.FiltersMultiSelectOptionProps),
   FiltersMultiSelectOptions: () => (/* reexport */ FiltersMultiSelectOptions),
-  FiltersMultiSelectProps: () => (/* reexport */ FiltersMultiSelect_namespaceObject.FiltersMultiSelectProps),
   Form: () => (/* reexport */ Form_Form),
   FormAction: () => (/* reexport */ FormAction_FormAction),
   FormCheckbox: () => (/* reexport */ FormCheckbox_FormCheckbox),
@@ -167,7 +161,6 @@ __webpack_require__.d(__webpack_exports__, {
   SearchBoxWrapper: () => (/* reexport */ SearchBoxWrapper),
   SegmentedPieChart: () => (/* reexport */ SegmentedPieChart),
   SegmentedPieChartComponent: () => (/* reexport */ SegmentedPieChartComponent),
-  SelectedFilter: () => (/* reexport */ useFiltersMultiSelect_namespaceObject.SelectedFilter),
   SimpleChartTooltip: () => (/* reexport */ SimpleChartTooltip),
   Step: () => (/* reexport */ Step_Step),
   StepConnector: () => (/* reexport */ StepConnector_StepConnector),
@@ -210,6 +203,7 @@ __webpack_require__.d(__webpack_exports__, {
   TypeaheadOption: () => (/* reexport */ TypeaheadOption_TypeaheadOption),
   TypeaheadOptions: () => (/* reexport */ TypeaheadOptions),
   Typography: () => (/* reexport */ Typography_Typography),
+  UseDrawerOptions: () => (/* reexport */ useDrawer_namespaceObject.UseDrawerOptions),
   UserProfile: () => (/* reexport */ UserProfile),
   WidgetCard: () => (/* reexport */ WidgetCard),
   WidgetCardBase: () => (/* reexport */ WidgetCardBase),
@@ -237,6 +231,7 @@ __webpack_require__.d(__webpack_exports__, {
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
   useCollapsibleNavBarContext: () => (/* reexport */ useCollapsibleNavBarContext),
+  useDrawer: () => (/* reexport */ useDrawer),
   useFieldContext: () => (/* reexport */ useFieldContext),
   useFilterMultiSelect: () => (/* reexport */ useFilterMultiSelect),
   useFullscreenMode: () => (/* reexport */ useFullscreenMode),
@@ -888,53 +883,24 @@ __webpack_require__.d(Tooltip_styles_namespaceObject, {
   small: () => (Tooltip_styles_small)
 });
 
-// NAMESPACE OBJECT: ./src/components/Field/FieldRoot.tsx
-var FieldRoot_namespaceObject = {};
-__webpack_require__.r(FieldRoot_namespaceObject);
-__webpack_require__.d(FieldRoot_namespaceObject, {
-  X: () => (FieldRoot)
+// NAMESPACE OBJECT: ./src/components/Drawer/useDrawer.tsx
+var useDrawer_namespaceObject = {};
+__webpack_require__.r(useDrawer_namespaceObject);
+__webpack_require__.d(useDrawer_namespaceObject, {
+  b: () => (useDrawer)
 });
 
-// NAMESPACE OBJECT: ./src/components/Field/FieldLabel.tsx
-var FieldLabel_namespaceObject = {};
-__webpack_require__.r(FieldLabel_namespaceObject);
-__webpack_require__.d(FieldLabel_namespaceObject, {
-  d: () => (FieldLabel)
-});
-
-// NAMESPACE OBJECT: ./src/components/Field/FieldControl.tsx
-var FieldControl_namespaceObject = {};
-__webpack_require__.r(FieldControl_namespaceObject);
-__webpack_require__.d(FieldControl_namespaceObject, {
-  s: () => (FieldControl)
-});
-
-// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/useFiltersMultiSelect.tsx
-var useFiltersMultiSelect_namespaceObject = {};
-__webpack_require__.r(useFiltersMultiSelect_namespaceObject);
-__webpack_require__.d(useFiltersMultiSelect_namespaceObject, {
-  j: () => (useFilterMultiSelect)
-});
-
-// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/components/FiltersMultiSelectEmpty.tsx
-var FiltersMultiSelectEmpty_namespaceObject = {};
-__webpack_require__.r(FiltersMultiSelectEmpty_namespaceObject);
-__webpack_require__.d(FiltersMultiSelectEmpty_namespaceObject, {
-  S: () => (FiltersMultiSelectEmpty)
-});
-
-// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/FiltersMultiSelect.tsx
-var FiltersMultiSelect_namespaceObject = {};
-__webpack_require__.r(FiltersMultiSelect_namespaceObject);
-__webpack_require__.d(FiltersMultiSelect_namespaceObject, {
-  p: () => (FiltersMultiSelect)
-});
-
-// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/components/FiltersMultiSelectOption.tsx
-var FiltersMultiSelectOption_namespaceObject = {};
-__webpack_require__.r(FiltersMultiSelectOption_namespaceObject);
-__webpack_require__.d(FiltersMultiSelectOption_namespaceObject, {
-  u: () => (FiltersMultiSelectOption)
+// NAMESPACE OBJECT: ./src/components/Drawer/index.parts.ts
+var index_parts_namespaceObject = {};
+__webpack_require__.r(index_parts_namespaceObject);
+__webpack_require__.d(index_parts_namespaceObject, {
+  CloseButton: () => (DrawerCloseButton),
+  Content: () => (DrawerContent),
+  Header: () => (DrawerHeader),
+  Overlay: () => (DrawerOverlay),
+  Portal: () => (DrawerPortal),
+  Root: () => (Drawer),
+  Title: () => (DrawerTitle)
 });
 
 // NAMESPACE OBJECT: ./src/components/Charts/PieChart/colorPalettes.ts
@@ -9910,132 +9876,332 @@ const DatePickerInner = ({
 const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(DatePickerInner);
 ;// ./src/components/DatePicker/index.ts
 
-;// ./src/components/Field/FieldProvider.ts
+;// ./src/components/Drawer/DrawerProvider.tsx
 
-const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeContext)('useFieldContext must be used within a FieldProvider');
-;// ./src/components/Field/FieldRoot.tsx
+const [DrawerProvider, useDrawerContext] = (0,hooks_namespaceObject.createSafeContext)('useDrawer must be used within a DrawerProvider');
+;// ./src/components/Drawer/useDrawer.tsx
 
 
-const FieldRoot = ({
+
+const useDrawer = ({
+  opened,
+  duration = 200,
+  defaultOpened,
+  dismissable = false,
+  position = 'left',
+  title,
+  withCloseButton = false,
+  onOpenChange
+} = {}) => {
+  const [_opened, setOpened] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: opened,
+    defaultValue: defaultOpened,
+    finalValue: false,
+    onChange: onOpenChange
+  });
+  const [portalNode, setPortalNode] = (0,external_react_namespaceObject.useState)(null);
+  const toggle = open => {
+    const _open = open ?? !_opened;
+    setOpened(_open);
+  };
+  const {
+    context,
+    refs
+  } = (0,external_floating_ui_react_namespaceObject.useFloating)({
+    open: _opened,
+    onOpenChange: setOpened
+  });
+  const transition = (0,external_floating_ui_react_namespaceObject.useTransitionStatus)(context, {
+    duration
+  });
+  const dismiss = (0,external_floating_ui_react_namespaceObject.useDismiss)(context, {
+    enabled: dismissable
+  });
+  const click = (0,external_floating_ui_react_namespaceObject.useClick)(context);
+  const interactions = (0,external_floating_ui_react_namespaceObject.useInteractions)([dismiss, click]);
+  return {
+    opened: _opened,
+    dismissable,
+    position,
+    duration,
+    floatingContext: context,
+    interactions,
+    transition,
+    title,
+    withCloseButton,
+    portalNode,
+    setFloating: refs.setFloating,
+    setPortalNode,
+    toggle
+  };
+};
+;// ./src/components/Drawer/DrawerRoot.tsx
+
+
+
+const Drawer = ({
+  children,
+  store: controlledStore
+}) => {
+  const uncontrolledStore = useDrawer({});
+  const store = controlledStore || uncontrolledStore;
+  if (!store.transition.isMounted) {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(DrawerProvider, {
+    value: {
+      store
+    },
+    children: children
+  });
+};
+;// ./src/components/Drawer/DrawerOverlay.tsx
+
+
+
+
+const StyledFloatingOverlay = /*#__PURE__*/base_default()(external_floating_ui_react_namespaceObject.FloatingOverlay,  true ? {
+  shouldForwardProp: propName => !propName.startsWith('$'),
+  target: "ebw2uwr0"
+} : 0)("transition-property:opacity;transition-duration:", ({
+  $duration
+}) => $duration, "ms;transition-timing-function:ease;opacity:", ({
+  $transitionStatus
+}) => $transitionStatus === 'close' ? 0 : 1, ";", ({
+  $inPortal
+}) => !$inPortal && `
+    overflow: hidden !important;
+    position: absolute !important;
+  `, " pointer-events:", ({
+  $dismissable
+}) => $dismissable ? 'auto' : 'none', ";" + ( true ? "" : 0));
+const DrawerOverlay = ({
   children,
   ...props
 }) => {
+  const ctx = useDrawerContext();
   const {
-    disabled = false,
-    status = 'basic',
-    forwardFocus = true,
-    ...divProps
-  } = props;
-  return (0,jsx_runtime_namespaceObject.jsx)("div", {
-    ...divProps,
-    children: (0,jsx_runtime_namespaceObject.jsx)(FieldProvider, {
-      value: {
-        disabled,
-        status,
-        forwardFocus
-      },
-      children: children
-    })
+    duration,
+    dismissable,
+    transition,
+    portalNode
+  } = ctx.store;
+  const inPortal = portalNode !== null;
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledFloatingOverlay, {
+    $inPortal: inPortal,
+    $duration: duration,
+    $dismissable: dismissable,
+    $transitionStatus: transition.status,
+    ...props,
+    children: children
   });
 };
-;// ./src/components/Field/FieldLabel.tsx
+;// ./src/components/Drawer/DrawerPortal.tsx
 
 
 
-const FieldLabel = ({
+
+const DrawerPortal = ({
   children,
   ...props
 }) => {
-  const ctx = useFieldContext();
-  return (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
-    isDisabled: ctx.disabled,
+  const ctx = useDrawerContext();
+  const portalNode = (0,external_floating_ui_react_namespaceObject.useFloatingPortalNode)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    ctx.store.setPortalNode(portalNode);
+    return () => ctx.store.setPortalNode(null);
+  }, [portalNode]);
+  return (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingPortal, {
+    root: portalNode,
     ...props,
     children: children
   });
 };
-;// ./src/components/Field/FieldControl.tsx
+;// ./src/components/Drawer/DrawerHeader.tsx
+
+function DrawerHeader_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 StyledDrawerHeader = /*#__PURE__*/base_default()("header",  true ? {
+  target: "e1boxa1c0"
+} : 0)( true ? {
+  name: "loooz6",
+  styles: "position:sticky;top:0;display:flex;align-items:center;justify-content:space-between"
+} : 0);
+const DrawerHeader = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerHeader({
+  children,
+  ...props
+}, ref) {
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledDrawerHeader, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+;// ./src/components/Drawer/DrawerTitle.tsx
 
+function DrawerTitle_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 FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1lr2tz0"
-} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
-  status,
-  theme
-}) => {
-  if (status === 'error') return theme.colors.red;
-  if (status === 'success') return theme.colors.greenLighter;
-  return theme.colors.grey;
-}, ";background:", ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";&>*{background:transparent;}&:active,&:hover{background:", ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";box-shadow:none;}&:hover{cursor:", ({
-  disabled
-}) => disabled ? 'default' : 'pointer', ";}&:focus-within,&:active{border-color:", ({
-  status,
-  disabled,
+const StyledDrawerTitle = /*#__PURE__*/base_default()("h2",  true ? {
+  target: "e1cuo4pw0"
+} : 0)( true ? {
+  name: "10bzkug",
+  styles: "font-weight:600;font-size:20px;text-align:center"
+} : 0);
+const DrawerTitle = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerTitle({
+  children,
+  ...props
+}, ref) {
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledDrawerTitle, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+;// ./src/components/Drawer/DrawerCloseButton.tsx
+
+
+
+
+
+
+
+const StyledDrawerCloseButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "evbyx180"
+} : 0)("margin-inline-start:auto;padding:0;display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;background:", ({
   theme
-}) => {
-  if (disabled) return theme.colors.grey;
-  if (status === 'error') return theme.colors.red;
-  if (status === 'success') return theme.colors.greenLighter;
-  return theme.colors.blueRoyal;
-}, ";}" + ( true ? "" : 0));
-const isForwardRefComponent = component => {
-  if (typeof component.type === 'object' && component.type.$$typeof?.toString() === 'Symbol(react.forward_ref)') {
-    return true;
+}) => theme.colors.greyFocused, ";" + ( true ? "" : 0));
+const notReachable = _ => _;
+const getIconName = position => {
+  switch (position) {
+    case 'top':
+      return 'carrot-up';
+    case 'bottom':
+      return 'carrot-down';
+    case 'left':
+      return 'carrot-left';
+    case 'right':
+      return 'carrot-right';
+    default:
+      return notReachable(position);
   }
-  return false;
 };
-const FieldControl = /*#__PURE__*/external_react_default().forwardRef(function FieldControl({
+const DrawerCloseButton = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerCloseButton({
   children,
-  controlRef,
   ...props
 }, ref) {
-  const ctx = useFieldContext();
-  const baseProps = {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const ctx = useDrawerContext();
+  const iconName = getIconName(ctx.store.position);
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledDrawerCloseButton, {
+    "data-testid": "drawer-close-button",
+    startIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: iconName,
+      size: 18,
+      color: theme.colors.greyDarker
+    }),
+    ref: ref,
+    onClick: () => ctx.store.toggle(false),
     ...props,
-    ...ctx
+    children: children
+  });
+});
+;// ./src/components/Drawer/DrawerContent.tsx
+
+
+
+
+
+
+
+
+const ContentWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eoa7lk01"
+} : 0)("display:flex;justify-content:", ({
+  position
+}) => position === 'left' ? 'flex-start' : 'flex-end', ";align-items:", ({
+  position
+}) => position === 'top' ? 'flex-start' : 'flex-end', ";height:100%;" + ( true ? "" : 0));
+const getBorderStyle = (position, color) => {
+  const borders = {
+    left: `border-right: 1px solid ${color};`,
+    right: `border-left: 1px solid ${color};`,
+    top: `border-bottom: 1px solid ${color};`,
+    bottom: `border-top: 1px solid ${color};`
   };
-  const internalRef = (0,external_react_namespaceObject.useRef)(null);
-  let _children = typeof children === 'function' ? children(ctx) : children;
-  if (ctx.forwardFocus && /*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(_children) && isForwardRefComponent(_children)) {
-    const setRef = defaultRef => element => {
-      internalRef.current = element;
-      if (defaultRef) {
-        if (typeof defaultRef === 'function') {
-          defaultRef(element);
-        } else {
-          defaultRef.current = element;
-        }
-      }
-    };
-    _children = /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(_children, {
-      ref: setRef(children.ref)
-    });
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FieldControlBase, {
-    ...baseProps,
-    ref: ref,
-    onClick: event => {
-      baseProps.onClick?.(event);
-      if (controlRef) {
-        controlRef.current?.focus?.();
-      } else if (internalRef.current) {
-        internalRef.current?.focus?.();
-      }
-    },
-    children: _children
+  return borders[position];
+};
+const getTransform = (position, open) => {
+  const closedTransforms = {
+    left: 'translateX(-100%)',
+    right: 'translateX(100%)',
+    top: 'translateY(-100%)',
+    bottom: 'translateY(100%)'
+  };
+  return open ? 'translate(0)' : closedTransforms[position];
+};
+const StyledDrawerContent = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eoa7lk00"
+} : 0)("flex:1;background-color:#f4f5f9;height:100%;pointer-events:auto;transition:transform ", ({
+  duration
+}) => duration, "ms ease-in-out;", ({
+  position,
+  theme
+}) => getBorderStyle(position, theme.colors.greyFocused), " transform:", ({
+  position
+}) => getTransform(position, false), ";&[data-transition='open']{transform:", ({
+  position
+}) => getTransform(position, true), ";}" + ( true ? "" : 0));
+const DrawerContent = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerContent({
+  children,
+  ...props
+}, ref) {
+  const ctx = useDrawerContext();
+  const {
+    title,
+    withCloseButton,
+    position,
+    duration,
+    transition,
+    interactions,
+    setFloating
+  } = ctx.store;
+  const mergedRef = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([setFloating, ref]);
+  const hasHeader = !!title || withCloseButton;
+  return (0,jsx_runtime_namespaceObject.jsx)(ContentWrapper, {
+    position: position,
+    children: (0,jsx_runtime_namespaceObject.jsxs)(StyledDrawerContent, {
+      ref: mergedRef,
+      "data-transition": transition.status,
+      "data-position": position,
+      position: position,
+      duration: duration,
+      ...interactions.getFloatingProps(props),
+      children: [hasHeader && (0,jsx_runtime_namespaceObject.jsxs)(DrawerHeader, {
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)(DrawerTitle, {
+          children: title
+        }), withCloseButton && (0,jsx_runtime_namespaceObject.jsx)(DrawerCloseButton, {})]
+      }), children]
+    })
   });
 });
-;// ./src/components/Field/index.ts
+;// ./src/components/Drawer/index.parts.ts
+
+
+
+
 
 
 
+;// ./src/components/Drawer/index.ts
+
+
+
+;// ./src/components/Field/FieldProvider.ts
+
+const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeContext)('useFieldContext must be used within a FieldProvider');
+;// ./src/components/Field/index.ts
 
 
 
@@ -10941,6 +11107,125 @@ const Filters = ({
 };
 ;// ./src/components/Filters/index.ts
 
+;// ./src/components/Field/FieldRoot.tsx
+
+
+const FieldRoot = ({
+  children,
+  ...props
+}) => {
+  const {
+    disabled = false,
+    status = 'basic',
+    forwardFocus = true,
+    ...divProps
+  } = props;
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    ...divProps,
+    children: (0,jsx_runtime_namespaceObject.jsx)(FieldProvider, {
+      value: {
+        disabled,
+        status,
+        forwardFocus
+      },
+      children: children
+    })
+  });
+};
+;// ./src/components/Field/FieldLabel.tsx
+
+
+
+const FieldLabel = ({
+  children,
+  ...props
+}) => {
+  const ctx = useFieldContext();
+  return (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
+    isDisabled: ctx.disabled,
+    ...props,
+    children: children
+  });
+};
+;// ./src/components/Field/FieldControl.tsx
+
+
+
+
+const FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1lr2tz0"
+} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
+  status,
+  theme
+}) => {
+  if (status === 'error') return theme.colors.red;
+  if (status === 'success') return theme.colors.greenLighter;
+  return theme.colors.grey;
+}, ";background:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";&>*{background:transparent;}&:active,&:hover{background:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";box-shadow:none;}&:hover{cursor:", ({
+  disabled
+}) => disabled ? 'default' : 'pointer', ";}&:focus-within,&:active{border-color:", ({
+  status,
+  disabled,
+  theme
+}) => {
+  if (disabled) return theme.colors.grey;
+  if (status === 'error') return theme.colors.red;
+  if (status === 'success') return theme.colors.greenLighter;
+  return theme.colors.blueRoyal;
+}, ";}" + ( true ? "" : 0));
+const isForwardRefComponent = component => {
+  if (typeof component.type === 'object' && component.type.$$typeof?.toString() === 'Symbol(react.forward_ref)') {
+    return true;
+  }
+  return false;
+};
+const FieldControl = /*#__PURE__*/external_react_default().forwardRef(function FieldControl({
+  children,
+  controlRef,
+  ...props
+}, ref) {
+  const ctx = useFieldContext();
+  const baseProps = {
+    ...props,
+    ...ctx
+  };
+  const internalRef = (0,external_react_namespaceObject.useRef)(null);
+  let _children = typeof children === 'function' ? children(ctx) : children;
+  if (ctx.forwardFocus && /*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(_children) && isForwardRefComponent(_children)) {
+    const setRef = defaultRef => element => {
+      internalRef.current = element;
+      if (defaultRef) {
+        if (typeof defaultRef === 'function') {
+          defaultRef(element);
+        } else {
+          defaultRef.current = element;
+        }
+      }
+    };
+    _children = /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(_children, {
+      ref: setRef(children.ref)
+    });
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FieldControlBase, {
+    ...baseProps,
+    ref: ref,
+    onClick: event => {
+      baseProps.onClick?.(event);
+      if (controlRef) {
+        controlRef.current?.focus?.();
+      } else if (internalRef.current) {
+        internalRef.current?.focus?.();
+      }
+    },
+    children: _children
+  });
+});
 ;// ./src/components/Field/FieldDescription.tsx
 
 
@@ -11711,8 +11996,6 @@ const NestedTableRow = ({
 
 
 
-
-
 const WithNestedTableRow = ({
   children
 }) => {
@@ -11723,33 +12006,24 @@ const WithNestedTableRow = ({
   return external_react_namespaceObject.Children.map(children, (child, index) => {
     if (/*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(child)) {
       const isSubHeader = index === 0;
-      if (child.type === TableRow_TableRow || child.type === NestedTableRow) {
-        const classNames = [];
-        if (isSubHeader) {
-          classNames.push('first-row');
-        }
-        if (isCollapsed) {
-          classNames.push('collapsed');
-        }
-        return (0,jsx_runtime_namespaceObject.jsx)(NestedTableRowProvider, {
-          isCollapsed: isCollapsed,
-          isSubHeader: isSubHeader,
-          childRowsCount: childRowsCount,
-          children: /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, {
-            className: classNames.length > 0 ? classNames.join(' ') : undefined,
-            onClick: childRowsCount > 1 ? () => {
-              setIsCollapsed(currentState => !currentState);
-            } : undefined
-          })
-        });
+      const classNames = [];
+      if (isSubHeader) {
+        classNames.push('first-row');
+      }
+      if (isCollapsed) {
+        classNames.push('collapsed');
       }
       return (0,jsx_runtime_namespaceObject.jsx)(NestedTableRowProvider, {
         isCollapsed: isCollapsed,
         isSubHeader: isSubHeader,
         childRowsCount: childRowsCount,
         children: /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, {
+          className: classNames.length > 0 ? classNames.join(' ') : undefined,
           isCollapsed,
-          childRowsCount
+          childRowsCount,
+          onClick: childRowsCount > 1 ? () => {
+            setIsCollapsed(currentState => !currentState);
+          } : undefined
         })
       });
     }
@@ -14580,7 +14854,7 @@ const styles_ResetBtnStyles =  true ? {
   name: "2hrei",
   styles: "padding:0;height:auto;background:none;&:focus,&:hover{border:none;background:none;box-shadow:none;&::before{border:none;}}"
 } : 0;
-const ContentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:224px;background:", theme.colors.greyPopoverLight, ";border-radius:20px;box-shadow:0px 4px 15px 0px ", theme.colors.black25, ";" + ( true ? "" : 0),  true ? "" : 0);
+const styles_ContentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:224px;background:", theme.colors.greyPopoverLight, ";border-radius:20px;box-shadow:0px 4px 15px 0px ", theme.colors.black25, ";" + ( true ? "" : 0),  true ? "" : 0);
 const UserInfo =  true ? {
   name: "fwy071",
   styles: "gap:2px;width:100%;padding:10px"
@@ -14618,7 +14892,7 @@ const UserProfile = ({
       css: styles_ResetBtnStyles,
       children: trigger
     }), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-      css: ContentWrapper,
+      css: styles_ContentWrapper,
       className: className,
       children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
         css: UserInfo,
@@ -14852,6 +15126,7 @@ const WithVisibleUpToLG = (Component, styles) => {
 
 
 
+
 
 
 ;// ./src/contexts/Translation/config.ts