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

package/dist/esm/index.js

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