@primer/components 0.0.0-202192701132 → 0.0.0-2021927175656

package/lib-esm/DatePicker/useDatePicker.js

@@ -0,0 +1,355 @@
+import { format, isEqual, isAfter, isBefore, addMonths, subMonths, isToday } from 'date-fns';
+import deepmerge from 'deepmerge';
+import React, { createContext, useCallback, useContext, useMemo, useEffect, useState } from 'react';
+const DatePickerContext = /*#__PURE__*/createContext(null);
+
+const useDatePicker = date => {
+  const value = useContext(DatePickerContext);
+  const [selected, setSelected] = useState(false);
+  const today = date ? isToday(date) : false;
+
+  if (!value) {
+    throw new Error('useDatePicker must be used inside a DatePickerProvider');
+  }
+
+  useEffect(() => {
+    if (date) {
+      if (value.hoverRange) {
+        if (isRangeSelection(value.hoverRange)) {
+          if (isEqual(date, value.hoverRange.from)) {
+            setSelected('start');
+          } else if (value.hoverRange.to && isEqual(date, value.hoverRange.to)) {
+            setSelected('end');
+          } else if (isAfter(date, value.hoverRange.from) && value.hoverRange.to && isBefore(date, value.hoverRange.to)) {
+            setSelected('middle');
+          } else {
+            setSelected(false);
+          }
+        }
+      } else if (value.selection) {
+        if (isMultiSelection(value.selection)) {
+          setSelected(!!value.selection.find(d => isEqual(d, date)));
+        } else if (isRangeSelection(value.selection)) {
+          if (isEqual(date, value.selection.from)) {
+            setSelected('start');
+          } else if (value.selection.to && isEqual(date, value.selection.to)) {
+            setSelected('end');
+          } else if (isAfter(date, value.selection.from) && value.selection.to && isBefore(date, value.selection.to)) {
+            setSelected('middle');
+          } else {
+            setSelected(false);
+          }
+        } else {
+          setSelected(isEqual(date, value.selection));
+        }
+      }
+    }
+  }, [date, value.hoverRange, value.selection, today]);
+  let blocked,
+      disabled = false;
+
+  if (date) {
+    // Determine if date is blocked out
+    if (value.configuration.blockedDates) {
+      blocked = !!value.configuration.blockedDates.find(d => isEqual(d, date));
+    } // Determine if date is disabled
+
+
+    if (value.configuration.minDate || value.configuration.maxDate) {
+      disabled = (value.configuration.minDate ? isBefore(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? isAfter(date, value.configuration.maxDate) : false);
+    }
+  }
+
+  return { ...value,
+    blocked,
+    disabled,
+    selected,
+    today
+  };
+};
+
+export default useDatePicker;
+export function isSingleSelection(selection) {
+  return selection instanceof Date;
+}
+export function isMultiSelection(selection) {
+  return Array.isArray(selection);
+}
+export function isRangeSelection(selection) {
+  return !!selection.from;
+}
+export function isStringRangeSelection(selection) {
+  return !!selection.from;
+}
+
+function parseSelection(selection, variant) {
+  if (!selection) return;
+
+  if (variant === 'multi') {
+    if (isMultiSelection(selection)) {
+      const parsedSelection = [];
+
+      for (const d of selection) {
+        parsedSelection.push(new Date(new Date(d).toDateString()));
+      }
+
+      return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
+    } else if (selection instanceof Date) {
+      return [new Date(new Date(selection).toDateString())];
+    } else if (isRangeSelection(selection)) {
+      const parsedSelection = [];
+      parsedSelection.push(new Date(new Date(selection.from).toDateString()));
+
+      if (selection.to) {
+        parsedSelection.push(new Date(new Date(selection.to).toDateString()));
+      }
+
+      return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
+    }
+  } else if (variant === 'range') {
+    if (isRangeSelection(selection)) {
+      return {
+        from: new Date(new Date(selection.from).toDateString()),
+        to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
+      };
+    } else if (isMultiSelection(selection)) {
+      return {
+        from: new Date(new Date(selection[0]).toDateString()),
+        to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
+      };
+    } else if (selection instanceof Date) {
+      return {
+        from: new Date(new Date(selection).toDateString()),
+        to: null
+      };
+    }
+  } else {
+    if (selection instanceof Date) {
+      return new Date(new Date(selection).toDateString());
+    } else if (isMultiSelection(selection)) {
+      return new Date(new Date(selection[0]).toDateString());
+    } else if (isRangeSelection(selection)) {
+      return new Date(new Date(selection.from).toDateString());
+    } else {
+      return;
+    }
+  }
+}
+
+const defaultConfiguration = {
+  anchorVariant: 'button',
+  confirmation: false,
+  contiguousSelection: false,
+  dimWeekends: false,
+  iconPlacement: 'start',
+  placeholder: 'Select a Date...',
+  selection: 'single',
+  view: '2-month',
+  weekStartsOn: 'Sunday'
+};
+export const DatePickerProvider = ({
+  configuration: externalConfig = {},
+  children,
+  closePicker,
+  value
+}) => {
+  const [configuration, setConfiguration] = useState(deepmerge(defaultConfiguration, externalConfig));
+  const [previousSelection, setPreviousSelection] = useState(parseSelection(value, configuration.selection));
+  const [selection, setSelection] = useState(parseSelection(value, configuration.selection));
+  const [hoverRange, setHoverRange] = useState(null);
+  const [currentViewingDate, setCurrentViewingDate] = useState(new Date());
+  useEffect(() => {
+    setConfiguration(deepmerge(defaultConfiguration, externalConfig));
+    setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configuration.selection, externalConfig]);
+  const goToMonth = useCallback(date => {
+    setCurrentViewingDate(new Date(new Date(date).toDateString()));
+  }, []);
+  const nextMonth = useCallback(() => {
+    setCurrentViewingDate(addMonths(currentViewingDate, 1));
+  }, [currentViewingDate]);
+  const previousMonth = useCallback(() => {
+    setCurrentViewingDate(subMonths(currentViewingDate, 1));
+  }, [currentViewingDate]);
+  const getFormattedDate = useMemo(() => {
+    if (!selection) {
+      return configuration.placeholder;
+    }
+
+    let template = 'MMM d';
+
+    if (configuration.anchorVariant !== 'input' && configuration.dateFormat) {
+      switch (configuration.dateFormat) {
+        case 'short':
+          template = 'MMM d';
+          break;
+
+        case 'long':
+          template = 'MMM d, yyyy';
+          break;
+
+        default:
+          template = configuration.dateFormat;
+          break;
+      }
+    } else {
+      template = 'MM/dd/yyyy';
+    }
+
+    switch (configuration.selection) {
+      case 'single':
+        {
+          if (selection instanceof Date) {
+            return format(selection, template);
+          } else if (Array.isArray(selection)) {
+            return format(selection[0], template);
+          } else if (isRangeSelection(selection)) {
+            return format(selection.from, template);
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      case 'multi':
+        {
+          if (Array.isArray(selection)) {
+            if (selection.length > 3) return `${selection.length} Selected`;
+            const formatted = selection.map(d => format(d, template)).join(', ');
+            return formatted;
+          } else if (selection instanceof Date) {
+            return [selection].map(d => format(d, template)).join(', ');
+          } else if (isRangeSelection(selection)) {
+            return [selection.to, selection.from].map(d => d ? format(d, template) : '').join(', ');
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      case 'range':
+        {
+          if (isRangeSelection(selection)) {
+            return Object.entries(selection).map(([_, date]) => date ? format(date, template) : '').join(' - ');
+          } else if (selection instanceof Date) {
+            return Object.entries({
+              from: selection,
+              to: null
+            }).map(([_, date]) => date ? format(date, template) : '').join(' - ');
+          } else if (Array.isArray(selection)) {
+            return Object.entries({
+              from: selection[0],
+              to: selection[1]
+            }) // to date can still be null
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            .map(([_, date]) => date ? format(date, template) : '').join(' - ');
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      default:
+        {
+          return 'Invalid Configuration';
+        }
+    }
+  }, [configuration.anchorVariant, configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
+  const saveValue = useCallback(updatedSelection => {
+    setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
+    closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+  }, [closePicker, selection]);
+  const inputHandler = useCallback(updatedSelection => {
+    // validate date falls within range
+    setSelection(updatedSelection);
+  }, []);
+  const selectionHandler = useCallback(date => {
+    if (configuration.selection === 'multi') {
+      const selections = [...selection];
+      const existingIndex = selections.findIndex(s => isEqual(s, date));
+
+      if (existingIndex > -1) {
+        selections.splice(existingIndex, 1);
+        setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
+      } else {
+        if (configuration.maxSelections && selections.length + 1 > configuration.maxSelections) return;
+        setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
+      }
+    } else if (configuration.selection === 'range') {
+      if (selection && isRangeSelection(selection) && !selection.to) {
+        const updatedSelection = isBefore(date, selection.from) ? {
+          from: date,
+          to: selection.from
+        } : {
+          from: selection.from,
+          to: date
+        };
+        setSelection(updatedSelection);
+        setHoverRange(null);
+
+        if (!configuration.confirmation) {
+          saveValue(updatedSelection);
+        }
+      } else {
+        setHoverRange({
+          from: date,
+          to: date
+        });
+        setSelection({
+          from: date,
+          to: null
+        });
+      }
+    } else {
+      setSelection(date);
+
+      if (!configuration.confirmation) {
+        saveValue(date);
+      }
+    }
+  }, [configuration.confirmation, configuration.maxSelections, configuration.selection, saveValue, selection]);
+  const focusHnadler = useCallback(date => {
+    if (!selection) return;
+
+    if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
+      setHoverRange(isBefore(date, selection.from) ? {
+        from: date,
+        to: selection.from
+      } : {
+        from: selection.from,
+        to: date
+      });
+    }
+  }, [configuration.selection, hoverRange, selection]);
+  const blurHnadler = useCallback(date => {
+    if (!selection || !hoverRange) return;
+
+    if (configuration.selection === 'range' && isRangeSelection(selection) && (hoverRange.from === date || hoverRange.to === date)) {// setHoverRange({from: hoverRange.from, to: hoverRange.from})
+    }
+  }, [configuration.selection, hoverRange, selection]);
+  const revertValue = useCallback(() => {
+    setSelection(previousSelection);
+  }, [previousSelection]);
+  const datePickerCtx = useMemo(() => {
+    return {
+      configuration,
+      currentViewingDate,
+      disabled: false,
+      formattedDate: getFormattedDate,
+      goToMonth,
+      hoverRange,
+      nextMonth,
+      onDateInput: inputHandler,
+      onDayBlur: blurHnadler,
+      onDayFocus: focusHnadler,
+      onSelection: selectionHandler,
+      previousMonth,
+      revertValue,
+      saveValue,
+      selectionActive: false,
+      selection
+    };
+  }, [blurHnadler, configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
+  return /*#__PURE__*/React.createElement(DatePickerContext.Provider, {
+    value: datePickerCtx
+  }, children);
+};
+DatePickerProvider.displayName = "DatePickerProvider";

package/lib-esm/Dialog.d.ts

@@ -387,7 +387,7 @@ declare namespace DialogHeader {
         size?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderX?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderY?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
-        sx?: React.Validator<import("./sx").BetterSystemStyleObject | undefined> | undefined;
+        sx?: React.Validator<import("@styled-system/css").SystemStyleObject | undefined> | undefined;
         theme?: React.Validator<any> | undefined;
     };
     var displayName: string;

package/lib-esm/Dropdown.d.ts

@@ -307,7 +307,7 @@ declare const _default: {
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         open?: boolean | undefined;
-        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
     } & {
         theme?: any;
@@ -604,7 +604,7 @@ declare const _default: {
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         open?: boolean | undefined;
-        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
     } & {
         theme?: any;
@@ -923,7 +923,7 @@ declare const _default: {
             py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            sx?: import("@styled-system/css").SystemStyleObject | undefined;
             autoFocus?: boolean | undefined;
             disabled?: boolean | undefined;
             formAction?: string | undefined;
@@ -1243,7 +1243,7 @@ declare const _default: {
             py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            sx?: import("@styled-system/css").SystemStyleObject | undefined;
             autoFocus?: boolean | undefined;
             disabled?: boolean | undefined;
             formAction?: string | undefined;

package/lib-esm/DropdownMenu/DropdownButton.d.ts

@@ -308,7 +308,7 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<Pick<React.
     py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/lib-esm/FilterList.d.ts

@@ -307,7 +307,7 @@ declare const _default: {
         paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
     } & {
         theme?: any;
     }>): JSX.Element;

package/lib-esm/SelectMenu/SelectMenu.d.ts

@@ -32,12 +32,14 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
     Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
     Filter: React.ForwardRefExoticComponent<Pick<{
         value?: string | undefined;
-    } & Pick<Omit<Pick<{
+    } & Pick<Omit<Pick<({
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & {
+    } & ({} | {
+        children?: React.ReactNode;
+    })) & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -308,7 +310,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         block?: boolean | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         disabled?: boolean | undefined;
         variant?: "large" | "small" | undefined;
         hasIcon?: boolean | undefined;
@@ -612,7 +614,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         media?: string | undefined;
         target?: string | undefined;
         href?: string | undefined;
@@ -917,7 +919,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         align?: "left" | "right" | undefined;
     } & {
         theme?: any;
@@ -1214,7 +1216,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
             paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("../sx").BetterSystemStyleObject | undefined;
+            sx?: import("@styled-system/css").SystemStyleObject | undefined;
         } & {
             theme?: any;
         }): JSX.Element;
@@ -1528,7 +1530,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
             paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("../sx").BetterSystemStyleObject | undefined;
+            sx?: import("@styled-system/css").SystemStyleObject | undefined;
         } & {
             theme?: any;
         }): JSX.Element;

package/lib-esm/TextInputWithTokens.d.ts

@@ -32,12 +32,14 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
-} & Pick<Omit<Pick<{
+} & Pick<Omit<Pick<({
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & {
+} & ({} | {
+    children?: React.ReactNode;
+})) & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -308,7 +310,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     block?: boolean | undefined;
-    sx?: import("./sx").BetterSystemStyleObject | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
     disabled?: boolean | undefined;
     variant?: "large" | "small" | undefined;
     hasIcon?: boolean | undefined;

package/lib-esm/Timeline.d.ts

@@ -395,7 +395,7 @@ declare const _default: string & import("styled-components").StyledComponentBase
             size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            sx?: import("@styled-system/css").SystemStyleObject | undefined;
         } & {
             theme?: any;
         }): JSX.Element;

package/lib-esm/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare function useDebounce<T>(value: T, delay: number): T;
+export default useDebounce;

package/lib-esm/hooks/useDebounce.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export default useDebounce;

package/lib-esm/sx.d.ts

@@ -1,12 +1,6 @@
-import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
-import { ThemeColorPaths, ThemeShadowPaths } from './theme';
-import { ColorProps, ShadowProps } from 'styled-system';
-export declare type BetterCssProperties = {
-    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
-};
-export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
+import { SystemStyleObject } from '@styled-system/css';
 export interface SxProp {
-    sx?: BetterSystemStyleObject;
+    sx?: SystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;

package/lib-esm/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_protanopia": {
+      "light_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_protanopia": {
+      "dark_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib-esm/theme.d.ts

@@ -1,6 +1,2 @@
 import { theme } from './theme-preval';
 export default theme;
-export interface Theme {
-}
-export declare type ThemeColorPaths = 'fg.default' | 'fg.muted' | 'fg.subtle' | 'fg.onEmphasis' | 'canvas.default' | 'canvas.overlay' | 'canvas.inset' | 'canvas.subtle' | 'border.default' | 'border.muted' | 'border.subtle' | 'neutral.emphasisPlus' | 'neutral.emphasis' | 'neutral.muted' | 'neutral.subtle' | 'accent.fg' | 'accent.emphasis' | 'accent.muted' | 'accent.subtle' | 'success.fg' | 'success.emphasis' | 'success.muted' | 'success.subtle' | 'attention.fg' | 'attention.emphasis' | 'attention.muted' | 'attention.subtle' | 'severe.fg' | 'severe.emphasis' | 'severe.muted' | 'severe.subtle' | 'danger.fg' | 'danger.emphasis' | 'danger.muted' | 'danger.subtle' | 'done.fg' | 'done.emphasis' | 'done.muted' | 'done.subtle' | 'sponsors.fg' | 'sponsors.emphasis' | 'sponsors.muted' | 'sponsors.subtle' | 'primer.fg.disabled' | 'primer.canvas.backdrop' | 'primer.canvas.sticky' | 'primer.border.active' | 'primer.border.contrast';
-export declare type ThemeShadowPaths = 'shadow.small' | 'shadow.medium' | 'shadow.large' | 'shadow.extraLarge' | 'primer.shadow.highlight' | 'primer.shadow.inset' | 'primer.shadow.focus';