@m4l/components 1.0.7 → 1.0.9

package/components/AccountPopover/{index.97e53037.js → index.85964263.js}

@@ -3,11 +3,11 @@ import { useEnvironment, useModuleDictionary, useNetwork } from "@m4l/core";
 import { useState, useEffect } from "react";
 import { generateUtilityClasses, generateUtilityClass, styled, useTheme, ButtonBase } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../areas/constants.630a4f42.js";
-import { A as Avatar } from "../mui_extended/Avatar/index.3ba36655.js";
+import { T as TEST_PROP_ID } from "../areas/constants.0d3ba950.js";
+import { A as Avatar } from "../mui_extended/Avatar/index.12b96914.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.967e70b7.js";
-import { P as Popover } from "../mui_extended/Popover/index.99fe777c.js";
-import { I as Icon } from "../Icon/index.0e4bc1c2.js";
+import { P as Popover } from "../mui_extended/Popover/index.fda32ba1.js";
+import { I as Icon } from "../Icon/index.0d591435.js";
 import clsx from "clsx";
 const componentName = "M4LAccountPopover";
 generateUtilityClasses(

package/components/AppBar/{index.1cd669e2.js → index.233917e6.js}

@@ -2,12 +2,12 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../areas/constants.630a4f42.js";
+import { T as TEST_PROP_ID } from "../areas/constants.0d3ba950.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as Image } from "../Image/index.a3e64dcd.js";
-import { T as Typography } from "../mui_extended/Typography/index.2a1c68f8.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.d6e94af1.js";
+import { I as Image } from "../Image/index.7b1ce7d6.js";
+import { T as Typography } from "../mui_extended/Typography/index.463f613f.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.20a5a0be.js";
 const AppBarRoot = styled("header")(({ theme }) => ({
   ...theme.components?.M4LAppBar?.styleOverrides
 }));

package/components/CommonActions/index.5f5362d4.js

@@ -0,0 +1,170 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import { T as TEST_PROP_ID } from "../areas/constants.0d3ba950.js";
+import { styled } from "@mui/material/styles";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { B as Button, L as LoadingButton } from "../mui_extended/Button/index.6276c580.js";
+import { useFormContext, useFormState } from "react-hook-form";
+import { u as useModal } from "../../hooks/useModal/index.20c3f2be.js";
+import { u as useWindowToolsMF } from "../areas/hooks/useWindowToolsMF/index.09801b66.js";
+import { W as WindowConfirm } from "../modal/WindowConfirm.21342f0a.js";
+import { generateUtilityClasses, Skeleton } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../utils/index.c64c2dd1.js";
+function getCommonActionsDictionary() {
+  return ["common_actions"];
+}
+const defaultCommonActionsDictionary = {
+  common_actions: {
+    cancel: "Cancel",
+    intro: "Intro",
+    confirm_quit_title: "Confirm",
+    confirm_quit_msg: "Are your sure exit?"
+  }
+};
+const componentName = "M4LCommonActions";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "skeleton",
+    "actionCancel",
+    "actionFormCancel",
+    "actionFormIntro",
+    "actionIntro",
+    "wrapperActions"
+  ]
+);
+const useCommonActionsUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    skeleton: ["skeleton"],
+    actionCancel: ["actionCancel"],
+    actionFormCancel: ["actionFormCancel"],
+    actionFormIntro: ["actionFormIntro"],
+    actionIntro: ["actionIntro"],
+    wrapperActions: ["wrapperActions"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+};
+const WrapperStandarActions = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LCommonActions?.styleOverrides
+}));
+const COMMONACTIONS_PREFIX = "M4LCommonActions";
+const getNameCommonActionsDataTestId = (KEY) => {
+  return `${COMMONACTIONS_PREFIX}-${KEY}`;
+};
+const Actions = forwardRef(function ActionsForwarded(props, ref) {
+  const { children, ...restProps } = props;
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    WrapperStandarActions,
+    {
+      ...restProps,
+      ref,
+      className: clsx(classes.root, restProps?.className),
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameCommonActionsDataTestId("root") } : {},
+      children
+    }
+  );
+});
+const ActionCancel = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "inherit", ...props, className: classes.actionCancel, children: getLabel("common_actions.cancel") });
+};
+const ACTIONINTRO_TEST_ID = "m4lactions";
+const ActionIntro = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: ACTIONINTRO_TEST_ID } : {},
+      variant: "contained",
+      type: "submit",
+      color: "primary",
+      className: classes.actionIntro,
+      ...props,
+      children: getLabel("common_actions.intro")
+    }
+  );
+};
+function ActionFormCancel() {
+  const { getLabel } = useModuleDictionary();
+  const { openModal } = useModal();
+  const { close: closeWindow, setFnQueryClose: setQueryClose } = useWindowToolsMF();
+  const { control } = useFormContext();
+  const { isDirty } = useFormState({
+    control
+  });
+  const onConfirmQuit = useCallback(() => {
+    closeWindow();
+  }, []);
+  const onClickCancel = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(
+          WindowConfirm,
+          {
+            variant: "warning",
+            title: getLabel("common_actions.confirm_quit_title"),
+            msg: getLabel("common_actions.confirm_quit_msg"),
+            onClickIntro: onConfirmQuit
+          }
+        ),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
+    }
+  }, [getLabel, isDirty, openModal]);
+  useEffect(() => {
+    setQueryClose(onClickCancel);
+  }, [onClickCancel]);
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      color: "inherit",
+      onClick: onClickCancel,
+      className: classes.actionFormCancel,
+      children: getLabel("common_actions.cancel")
+    }
+  );
+}
+function ActionFormIntro(props) {
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const { control } = useFormContext();
+  const { isSubmitting } = useFormState({
+    control
+  });
+  const classes = useCommonActionsUtilityClasses();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
+  }
+  return /* @__PURE__ */ jsx(
+    LoadingButton,
+    {
+      variant: "contained",
+      type: "submit",
+      color: "primary",
+      loading: isSubmitting,
+      className: classes.actionFormIntro,
+      ...props,
+      children: getLabel("common_actions.intro")
+    }
+  );
+}
+export {
+  Actions as A,
+  ActionCancel as a,
+  ActionIntro as b,
+  ActionFormIntro as c,
+  ActionFormCancel as d,
+  defaultCommonActionsDictionary as e,
+  getCommonActionsDictionary as g
+};

package/components/DragResizeWindow/{index.5e316291.js → index.8b3e79f7.js}

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect, useMemo } from "react";
-import { D as DraggableCore_1 } from "../../react-draggable.2df3b71a.js";
+import { D as DraggableCore_1 } from "../../react-draggable.0cc9b257.js";
 import clsx from "clsx";
 import { styled, generateUtilityClasses } from "@mui/material";
-import { M as MAP_ZINDEX_OVER_MAP, C as COMPONENT_CLASS_NAME, D as DEFAULT_TRANSFORM_SCALE, a as MAP_ZINDEX_OVER_MAP$1 } from "../areas/constants.630a4f42.js";
+import { M as MAP_ZINDEX_OVER_MAP, C as COMPONENT_CLASS_NAME, D as DEFAULT_TRANSFORM_SCALE, a as MAP_ZINDEX_OVER_MAP$1 } from "../areas/constants.0d3ba950.js";
 import "@mui/base";
-import { R as Resizable } from "../../react-resizable.c60f3843.js";
+import { R as Resizable } from "../../react-resizable.837c446d.js";
 const WrapperWindowRoot = styled("div")`
   position: absolute;
   left: 0px;

package/components/DynamicFilter/{index.b56ee9d3.js → index.d698a952.js}

@@ -1,3 +1,5 @@
+import { Skeleton, alpha } from "@mui/material";
+import { i as isValidDate, c as containerQuery } from "../../utils/index.c64c2dd1.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useMemo, useContext, createContext, useRef, useEffect, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -8,19 +10,16 @@ import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphic
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import * as Yup from "yup";
-import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../areas/dictionary.f7ba553d.js";
-import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, b as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, c as SELECT_OPERATORS, A as ALL_FIELD, d as DYNAMIC_FILTER_KEY_COMPONENT } from "../areas/constants.630a4f42.js";
-import { R as RHFAutocomplete } from "../../vendor.fc11ba1a.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.51fca2b2.js";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.fc07eaa6.js";
-import { i as isValidDate, c as containerQuery } from "../../utils/index.0660ee9c.js";
-import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.0aa27d6f.js";
-import { styled } from "@mui/material/styles";
-import { Skeleton, alpha, MenuItem } from "@mui/material";
-import { I as Icon } from "../Icon/index.0e4bc1c2.js";
+import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../areas/dictionary.ffe082b0.js";
+import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, b as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, c as SELECT_OPERATORS, A as ALL_FIELD } from "../areas/constants.0d3ba950.js";
+import { R as RHFAutocomplete } from "../../vendor.e16cc0cc.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.8d9e389c.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.0bb4279e.js";
+import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.58439d31.js";
+import { I as InputFilterStyled, a as InputFilterIconStyled, b as InputFilterInputStyled, A as AppliedFilterChipStyled, c as AppliedFilterChipIconStyled, d as AppliedFilterChipInfoStyled, e as AppliedFilterChipInfoFieldNameStyled, f as AppliedFilterChipInfoOperatorStyled, g as AppliedFilterChipInfoOperandsStyled, h as AppliedFilterChipRemoveButtonStyled, i as AppliedFiltersStyled, j as AppliedFilterInnerContainerStyled, k as ActionsSkeletonButtonStyled, l as ActionsStyled, m as ActionsClearButtonStyled, n as ActionsSubmitButtonStyled, R as RootStyled, o as InnerContainerStyled } from "./slots/index.79811999.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.aee44365.js";
-import { a as PopoverMenuFields, b as PopoverFilter } from "../mui_extended/Popover/index.99fe777c.js";
-import { S as ScrollBar } from "../ScrollBar/index.9bfcc74f.js";
+import { a as PopoverMenuFields, b as PopoverFilter } from "../mui_extended/Popover/index.fda32ba1.js";
+import { S as ScrollBar } from "../ScrollBar/index.1e89bb44.js";
 function BooleanFilter() {
   const { getLabel } = useModuleDictionary();
   const operators = useMemo(
@@ -1494,117 +1493,6 @@ const dynamicFilterStyles = {
     }
   })
 };
-const RootStyled = styled("div", { name: DYNAMIC_FILTER_KEY_COMPONENT, slot: DynamicFilterSlots.root })(
-  dynamicFilterStyles?.root
-);
-const InnerContainerStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.innerContainer
-})(dynamicFilterStyles?.innerContainer);
-const InputFilterStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.inputFilter
-})(dynamicFilterStyles?.inputFilter);
-const InputFilterInputStyled = styled("input", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.inputFilterInput
-})(dynamicFilterStyles?.inputFilterInput);
-const InputFilterIconStyled = styled(Icon, {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.inputFilterIcon
-})(dynamicFilterStyles?.inputFilterIcon);
-const AppliedFiltersStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilters
-})(dynamicFilterStyles?.appliedFilters);
-const AppliedFilterInnerContainerStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterInnerContainer
-})(dynamicFilterStyles?.appliedFilterInnerContainer);
-const AppliedFilterChipStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChip
-})(dynamicFilterStyles?.appliedFilterChip);
-const AppliedFilterChipIconStyled = styled("button", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChipIcon
-})(dynamicFilterStyles?.appliedFilterChipIcon);
-const AppliedFilterChipInfoStyled = styled("button", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChipInfo
-})(dynamicFilterStyles?.appliedFilterChipInfo);
-const AppliedFilterChipInfoFieldNameStyled = styled("span", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChipInfoFieldName
-})(dynamicFilterStyles?.appliedFilterChipInfoFieldName);
-const AppliedFilterChipInfoOperatorStyled = styled("span", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChipInfoOperator
-})(dynamicFilterStyles?.appliedFilterChipInfoOperator);
-const AppliedFilterChipInfoOperandsStyled = styled("span", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChipInfoOperands
-})(dynamicFilterStyles?.appliedFilterChipInfoOperands);
-const AppliedFilterChipRemoveButtonStyled = styled("button", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.appliedFilterChipRemoveButton
-})(dynamicFilterStyles?.appliedFilterChipRemoveButton);
-const ActionsStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.actions
-})(dynamicFilterStyles?.actions);
-const ActionsSkeletonButtonStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.actionsSkeletonButton
-})(dynamicFilterStyles?.actionsSkeletonButton);
-const ActionsClearButtonStyled = styled("button", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.actionsClearButton
-})(dynamicFilterStyles?.actionsClearButton);
-const ActionsSubmitButtonStyled = styled("button", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.actionsSubmitButton
-})(dynamicFilterStyles?.actionsSubmitButton);
-const PopoverMenuStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverMenu
-})(dynamicFilterStyles?.popoverMenu);
-const PopoverMenuItemStyled = styled(MenuItem, {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverMenuItem
-})(dynamicFilterStyles?.popoverMenuItem);
-const PopoverMenuItemIconStyled = styled(Icon, {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverMenuItemIcon
-})(dynamicFilterStyles?.popoverMenuItemIcon);
-const PopoverMenuItemLabelStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverMenuItemLabel
-})(dynamicFilterStyles?.popoverMenuItemLabel);
-const PopoverStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverFilter
-})(dynamicFilterStyles?.popoverFilter);
-const PopoverContainerFieldsStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverFilterContainerFields
-})(dynamicFilterStyles?.popoverFilterContainerFields);
-const PopoverHeaderStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverFilterHeader
-})(dynamicFilterStyles?.popoverFilterHeader);
-const PopoverHeaderIconStyled = styled(Icon, {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverFilterHeaderIcon
-})(dynamicFilterStyles?.popoverFilterHeaderIcon);
-const PopoverHeaderTitleStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverFilterHeaderTitle
-})(dynamicFilterStyles?.popoverFilterHeaderTitle);
-const PopoverHeaderActionsStyled = styled("div", {
-  name: DYNAMIC_FILTER_KEY_COMPONENT,
-  slot: DynamicFilterSlots.popoverFilterActions
-})(dynamicFilterStyles?.popoverFilterActions);
 const InputFilter = () => {
   const {
     iconUrl,
@@ -1824,18 +1712,10 @@ function DynamicFilter(props) {
   return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
 }
 export {
-  DynamicFilter as D,
-  PopoverMenuStyled as P,
-  PopoverMenuItemStyled as a,
-  PopoverMenuItemIconStyled as b,
-  PopoverMenuItemLabelStyled as c,
-  PopoverStyled as d,
-  PopoverHeaderStyled as e,
+  DynamicFilterSlots as D,
+  DynamicFilter as a,
+  DataTypeComponent as b,
+  dynamicFilterStyles as d,
   fieldFactory as f,
-  PopoverHeaderIconStyled as g,
-  PopoverHeaderTitleStyled as h,
-  PopoverContainerFieldsStyled as i,
-  DataTypeComponent as j,
-  PopoverHeaderActionsStyled as k,
   useDynamicFilterStore as u
 };

package/components/DynamicFilter/slots/index.79811999.js

@@ -0,0 +1,150 @@
+import { styled } from "@mui/material/styles";
+import { d as DYNAMIC_FILTER_KEY_COMPONENT } from "../../areas/constants.0d3ba950.js";
+import { D as DynamicFilterSlots, d as dynamicFilterStyles } from "../index.d698a952.js";
+import { MenuItem } from "@mui/material";
+import { A as Actions } from "../../CommonActions/index.5f5362d4.js";
+import { I as Icon } from "../../Icon/index.0d591435.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.20a5a0be.js";
+import { P as Popover } from "../../mui_extended/Popover/index.fda32ba1.js";
+import { T as Typography } from "../../mui_extended/Typography/index.463f613f.js";
+const RootStyled = styled("div", { name: DYNAMIC_FILTER_KEY_COMPONENT, slot: DynamicFilterSlots.root })(
+  dynamicFilterStyles?.root
+);
+const InnerContainerStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.innerContainer
+})(dynamicFilterStyles?.innerContainer);
+const InputFilterStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.inputFilter
+})(dynamicFilterStyles?.inputFilter);
+const InputFilterInputStyled = styled("input", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.inputFilterInput
+})(dynamicFilterStyles?.inputFilterInput);
+const InputFilterIconStyled = styled(Icon, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.inputFilterIcon
+})(dynamicFilterStyles?.inputFilterIcon);
+const AppliedFiltersStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilters
+})(dynamicFilterStyles?.appliedFilters);
+const AppliedFilterInnerContainerStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterInnerContainer
+})(dynamicFilterStyles?.appliedFilterInnerContainer);
+const AppliedFilterChipStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChip
+})(dynamicFilterStyles?.appliedFilterChip);
+const AppliedFilterChipIconStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipIcon
+})(dynamicFilterStyles?.appliedFilterChipIcon);
+const AppliedFilterChipInfoStyled = styled("button", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfo
+})(dynamicFilterStyles?.appliedFilterChipInfo);
+const AppliedFilterChipInfoFieldNameStyled = styled("span", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfoFieldName
+})(dynamicFilterStyles?.appliedFilterChipInfoFieldName);
+const AppliedFilterChipInfoOperatorStyled = styled("span", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfoOperator
+})(dynamicFilterStyles?.appliedFilterChipInfoOperator);
+const AppliedFilterChipInfoOperandsStyled = styled("span", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfoOperands
+})(dynamicFilterStyles?.appliedFilterChipInfoOperands);
+const AppliedFilterChipRemoveButtonStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipRemoveButton
+})(dynamicFilterStyles?.appliedFilterChipRemoveButton);
+const ActionsStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actions
+})(dynamicFilterStyles?.actions);
+const ActionsSkeletonButtonStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actionsSkeletonButton
+})(dynamicFilterStyles?.actionsSkeletonButton);
+const ActionsClearButtonStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actionsClearButton
+})(dynamicFilterStyles?.actionsClearButton);
+const ActionsSubmitButtonStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actionsSubmitButton
+})(dynamicFilterStyles?.actionsSubmitButton);
+const PopoverMenuStyled = styled(Popover, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenu
+})(dynamicFilterStyles?.popoverMenu);
+const PopoverMenuItemStyled = styled(MenuItem, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenuItem
+})(dynamicFilterStyles?.popoverMenuItem);
+const PopoverMenuItemIconStyled = styled(Icon, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenuItemIcon
+})(dynamicFilterStyles?.popoverMenuItemIcon);
+const PopoverMenuItemLabelStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenuItemLabel
+})(dynamicFilterStyles?.popoverMenuItemLabel);
+const PopoverStyled = styled(Popover, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilter
+})(dynamicFilterStyles?.popoverFilter);
+const PopoverContainerFieldsStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterContainerFields
+})(dynamicFilterStyles?.popoverFilterContainerFields);
+const PopoverHeaderStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeader
+})(dynamicFilterStyles?.popoverFilterHeader);
+const PopoverHeaderIconStyled = styled(Icon, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeaderIcon
+})(dynamicFilterStyles?.popoverFilterHeaderIcon);
+const PopoverHeaderTitleStyled = styled(Typography, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeaderTitle
+})(dynamicFilterStyles?.popoverFilterHeaderTitle);
+const PopoverHeaderActionsStyled = styled(Actions, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterActions
+})(dynamicFilterStyles?.popoverFilterActions);
+export {
+  AppliedFilterChipStyled as A,
+  InputFilterStyled as I,
+  PopoverMenuStyled as P,
+  RootStyled as R,
+  InputFilterIconStyled as a,
+  InputFilterInputStyled as b,
+  AppliedFilterChipIconStyled as c,
+  AppliedFilterChipInfoStyled as d,
+  AppliedFilterChipInfoFieldNameStyled as e,
+  AppliedFilterChipInfoOperatorStyled as f,
+  AppliedFilterChipInfoOperandsStyled as g,
+  AppliedFilterChipRemoveButtonStyled as h,
+  AppliedFiltersStyled as i,
+  AppliedFilterInnerContainerStyled as j,
+  ActionsSkeletonButtonStyled as k,
+  ActionsStyled as l,
+  ActionsClearButtonStyled as m,
+  ActionsSubmitButtonStyled as n,
+  InnerContainerStyled as o,
+  PopoverMenuItemStyled as p,
+  PopoverMenuItemIconStyled as q,
+  PopoverMenuItemLabelStyled as r,
+  PopoverStyled as s,
+  PopoverHeaderStyled as t,
+  PopoverHeaderIconStyled as u,
+  PopoverHeaderTitleStyled as v,
+  PopoverContainerFieldsStyled as w,
+  PopoverHeaderActionsStyled as x
+};