@uniformdev/design-system 19.115.1-alpha.5 → 19.115.1-alpha.7

package/dist/esm/index.js

@@ -20301,6 +20301,12 @@ var SearchAndFilterControlsWrapper = css92`
   grid-template-columns: auto 1fr 1fr;
   gap: var(--spacing-base);
 `;
+var SearchAndFilterOutterControlWrapper = css92`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-sm);
+`;
 var ConditionalFilterRow = css92`
   display: grid;
   grid-template-columns: 35px 1fr;
@@ -20520,13 +20526,20 @@ var SearchAndFilterContext = createContext6({
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
+  onSearchChange,
   onChange,
   children
 }) => {
   const [searchTerm, setSearchTerm] = useState16("");
   const deferredSearchTerm = useDeferredValue2(searchTerm);
   const [filterVisibility, setFilterVisibility] = useState16(false);
-  const handleSearchTerm = useCallback10((term) => setSearchTerm(term), [setSearchTerm]);
+  const handleSearchTerm = useCallback10(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
   const handleToggleFilterVisibilty = useCallback10(
     (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
@@ -20591,7 +20604,7 @@ var useSearchAndFilter = () => {
 // src/components/SearchAndFilter/FilterControls.tsx
 import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var FilterControls = ({ children }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery } = useSearchAndFilter();
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
   return /* @__PURE__ */ jsxs80(Fragment19, { children: [
     /* @__PURE__ */ jsx119(
       FilterButton2,
@@ -20605,11 +20618,11 @@ var FilterControls = ({ children }) => {
       }
     ),
     /* @__PURE__ */ jsx119(
-      InputKeywordSearch,
+      DebouncedInputKeywordSearch,
       {
-        type: "search",
         placeholder: "Search...",
         onSearchTextChanged: (e) => setSearchTerm(e),
+        defaultValue: searchTerm,
         compact: true,
         rounded: true
       }
@@ -20618,9 +20631,12 @@ var FilterControls = ({ children }) => {
   ] });
 };
 
+// src/components/SearchAndFilter/FilterItem.tsx
+import { useMemo as useMemo7 } from "react";
+
 // src/components/SearchAndFilter/FilterEditor.tsx
-import { css as css94 } from "@emotion/react";
 import { useEffect as useEffect18, useState as useState17 } from "react";
+import { useDebounce as useDebounce2 } from "react-use";
 
 // src/components/Validation/StatusBullet.styles.ts
 import { css as css93 } from "@emotion/react";
@@ -20733,6 +20749,7 @@ import { Fragment as Fragment20, jsx as jsx121, jsxs as jsxs81 } from "@emotion/
 var FilterMultiChoiceEditor = ({
   value,
   options,
+  isDisabled,
   ...props
 }) => {
   return /* @__PURE__ */ jsx121(
@@ -20742,28 +20759,32 @@ var FilterMultiChoiceEditor = ({
       options,
       isMulti: true,
       isClearable: true,
+      isDisabled,
       onChange: (e) => {
         var _a;
         return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
-      }
+      },
+      value
     }
   );
 };
 var FilterSingleChoiceEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
       isClearable: true,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
-      }
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      isDisabled,
+      value
     }
   );
 };
@@ -20773,52 +20794,58 @@ var CustomOptions = ({ label, value }) => {
 var StatusMultiEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
       isMulti: true,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+        return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
-      formatOptionLabel: CustomOptions
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled
     }
   );
 };
 var StatusSingleEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
-      formatOptionLabel: CustomOptions
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled
     }
   );
 };
-var TextEditor = ({ onChange, ariaLabel }) => {
+var TextEditor = ({ onChange, ariaLabel, value }) => {
+  useDebounce2(() => onChange, 500, [value]);
   return /* @__PURE__ */ jsx121(
     Input,
     {
       showLabel: false,
-      "aria-label": ariaLabel,
+      label: ariaLabel,
       onChange: (e) => onChange(e.currentTarget.value),
-      placeholder: "Enter phrase to search\u2026"
+      placeholder: "Enter phrase to search\u2026",
+      value
     }
   );
 };
-var NumberRangeEditor = ({ onChange, ...props }) => {
+var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value }) => {
   const [minValue, setMinValue] = useState17("");
   const [maxValue, setMaxValue] = useState17("");
   const [error, setError] = useState17("");
@@ -20845,48 +20872,64 @@ var NumberRangeEditor = ({ onChange, ...props }) => {
     /* @__PURE__ */ jsx121(
       Input,
       {
-        ...props,
+        label: `${ariaLabel}-min`,
         type: "number",
         showLabel: false,
         min: 0,
         placeholder: "Low",
         onChange: (e) => setMinValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2,
+        value: value ? value[0] : ""
       }
     ),
     /* @__PURE__ */ jsx121(
       Input,
       {
-        ...props,
         type: "number",
+        label: `${ariaLabel}-max`,
         showLabel: false,
         min: 0,
         placeholder: "High",
         onChange: (e) => setMaxValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2,
+        value: value ? value[1] : ""
       }
     ),
     /* @__PURE__ */ jsx121(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange }) => {
+var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
   return /* @__PURE__ */ jsx121(
     Input,
     {
-      "aria-label": ariaLabel,
+      label: ariaLabel,
       type: "number",
       showLabel: false,
       min: 0,
-      onChange: (e) => onChange(e.currentTarget.value)
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
     }
   );
 };
-var DateEditor = ({ onChange, ...props }) => {
-  return /* @__PURE__ */ jsx121(Input, { type: "date", ...props, showLabel: false, onChange: (e) => onChange(e.currentTarget.value) });
+var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value }) => {
+  return /* @__PURE__ */ jsx121(
+    Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
+    }
+  );
 };
-var DateRangeEditor = ({ ariaLabel, onChange }) => {
-  const [minDateValue, setMinDateValue] = useState17("");
-  const [maxDateValue, setMaxDateValue] = useState17("");
+var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
+  const [minDateValue, setMinDateValue] = useState17(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState17(value ? value[1] : "");
   const [error, setError] = useState17("");
   useEffect18(() => {
     if (!minDateValue || !maxDateValue) {
@@ -20923,23 +20966,25 @@ var DateRangeEditor = ({ ariaLabel, onChange }) => {
     /* @__PURE__ */ jsx121(
       Input,
       {
-        "aria-label": `${ariaLabel}-min-date`,
+        label: `${ariaLabel}-min-date`,
         type: "date",
         showLabel: false,
         value: minDateValue,
         onChange: (e) => setMinDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2
       }
     ),
     /* @__PURE__ */ jsx121(
       Input,
       {
-        "aria-label": `${ariaLabel}-max-date`,
+        label: `${ariaLabel}-max-date`,
         type: "date",
         showLabel: false,
         value: maxDateValue,
         onChange: (e) => setMaxDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2
       }
     ),
     /* @__PURE__ */ jsx121(ErrorContainer, { errorMessage: error })
@@ -20953,7 +20998,7 @@ var FilterEditorRenderer = ({ editorType, ...props }) => {
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ jsx121(Editor, { ...props });
+  return /* @__PURE__ */ jsx121(Editor, { ...props, disabled: props.isDisabled });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -20971,10 +21016,10 @@ var ErrorContainer = ({ errorMessage }) => {
   return /* @__PURE__ */ jsx121(
     "div",
     {
-      css: css94`
-        grid-column: span 6;
-        order: 6;
-      `,
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
       children: /* @__PURE__ */ jsx121(FieldMessage, { errorMessage })
     }
   );
@@ -21069,11 +21114,35 @@ var FilterItem = ({
   onValueChange
 }) => {
   var _a, _b;
-  const { filters, handleDeleteFilter } = useSearchAndFilter();
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
   const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
   const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
   const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
   const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue } = useMemo7(() => {
+    var _a2, _b2;
+    const currentSelectedFilter = filterOptions.find((item) => {
+      var _a3;
+      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
+    });
+    const selectedFieldValue2 = (_b2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+      return filters[index].field === item.value;
+    })) != null ? _b2 : [];
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    const selectedMetaValue2 = valueOptions.filter((item) => {
+      if (Array.isArray(filters[index].value) && item.value) {
+        return filters[index].value.includes(item.value);
+      }
+      return filters[index].value === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value
+    };
+  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
   return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, children: [
     /* @__PURE__ */ jsx123("span", { children: index === 0 ? "where" : "and" }),
     /* @__PURE__ */ jsxs83("div", { css: ConditionalInputRow, children: [
@@ -21085,7 +21154,8 @@ var FilterItem = ({
           onChange: (e) => {
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
-          }
+          },
+          value: selectedFieldValue
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21097,7 +21167,8 @@ var FilterItem = ({
             var _a2;
             return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
-          isDisabled: !filters[index].field
+          isDisabled: !filters[index].field,
+          value: selectedOperatorValue
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21106,7 +21177,9 @@ var FilterItem = ({
           "aria-label": metaDataLabel,
           editorType: metaDataPossibleOptions,
           options: valueOptions,
-          onChange: (e) => onValueChange(e != null ? e : "")
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          isDisabled: !filters[index].operator,
+          value: selectedMetaValue
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21172,23 +21245,37 @@ var SearchAndFilter = ({
   filters,
   filterOptions,
   filterControls = /* @__PURE__ */ jsx124(FilterControls, {}),
+  viewSwitchControls,
   children = /* @__PURE__ */ jsx124(FilterItems, {}),
-  onChange
+  onChange,
+  onSearchChange
 }) => {
-  return /* @__PURE__ */ jsx124(SearchAndFilterProvider, { filters, filterOptions, onChange, children: /* @__PURE__ */ jsxs84(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-    /* @__PURE__ */ jsx124("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
-    children
-  ] }) });
+  return /* @__PURE__ */ jsx124(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      onChange,
+      onSearchChange,
+      children: /* @__PURE__ */ jsxs84(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs84("div", { css: SearchAndFilterOutterControlWrapper, children: [
+          /* @__PURE__ */ jsx124("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+          viewSwitchControls
+        ] }),
+        children
+      ] })
+    }
+  );
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css96 } from "@emotion/react";
+import { css as css95 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback11, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo8 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css95 } from "@emotion/react";
-var segmentedControlStyles = css95`
+import { css as css94 } from "@emotion/react";
+var segmentedControlStyles = css94`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -21207,14 +21294,14 @@ var segmentedControlStyles = css95`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css95`
+var segmentedControlVerticalStyles = css94`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css95`
+var segmentedControlItemStyles = css94`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -21222,10 +21309,10 @@ var segmentedControlItemStyles = css95`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css95`
+var segmentedControlInputStyles = css94`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => css95`
+var segmentedControlLabelStyles = (checked, disabled2) => css94`
   position: relative;
   display: flex;
   align-items: center;
@@ -21292,20 +21379,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => css95`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css95`
+var segmentedControlLabelIconOnlyStyles = css94`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css95`
+var segmentedControlLabelCheckStyles = css94`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css95`
+var segmentedControlLabelContentStyles = css94`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css95``;
+var segmentedControlLabelTextStyles = css94``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
@@ -21328,15 +21415,15 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo7(() => {
+  const sizeStyles = useMemo8(() => {
     const map = {
-      sm: css96({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css96({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css96({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css95({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css95({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css95({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo7(() => {
+  const isIconOnly = useMemo8(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ jsx125(
@@ -21386,12 +21473,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css97, keyframes as keyframes5 } from "@emotion/react";
+import { css as css96, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css97`
+var skeletonStyles = css96`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -21428,8 +21515,8 @@ var Skeleton = ({
 import * as React25 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css98 } from "@emotion/react";
-var SwitchInputContainer = css98`
+import { css as css97 } from "@emotion/react";
+var SwitchInputContainer = css97`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -21438,7 +21525,7 @@ var SwitchInputContainer = css98`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css98`
+var SwitchInput = css97`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -21476,7 +21563,7 @@ var SwitchInput = css98`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css98`
+var SwitchInputDisabled = css97`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -21484,7 +21571,7 @@ var SwitchInputDisabled = css98`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css98`
+var SwitchInputLabel = css97`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -21505,7 +21592,7 @@ var SwitchInputLabel = css98`
     top: 0;
   }
 `;
-var SwitchText = css98`
+var SwitchText = css97`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -21534,8 +21621,8 @@ var Switch = React25.forwardRef(
 import * as React26 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css99 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css99`
+import { css as css98 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css98`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -21546,15 +21633,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css99
     padding: ${cellPadding};
   }
 `;
-var tableHead = css99`
+var tableHead = css98`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css99`
+var tableRow = css98`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css99`
+var tableCellHead = css98`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -21606,11 +21693,11 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo9 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css100 } from "@emotion/react";
-var tabButtonStyles = css100`
+import { css as css99 } from "@emotion/react";
+var tabButtonStyles = css99`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -21627,7 +21714,7 @@ var tabButtonStyles = css100`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css100`
+var tabButtonGroupStyles = css99`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -21650,7 +21737,7 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = useMemo8(() => {
+  const selected = useMemo9(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
@@ -21695,8 +21782,8 @@ var TabContent = ({
 import { toast, ToastContainer as ToastifyContainer } from "react-toastify";
 
 // src/components/Toast/Toast.styles.ts
-import { css as css101 } from "@emotion/react";
-var toastContainerStyles = css101`
+import { css as css100 } from "@emotion/react";
+var toastContainerStyles = css100`
   ${functionalColors}
 
   --toastify-color-light: white;