@primer/components 0.0.0-202192231947 → 0.0.0-20219254849

package/lib-esm/DatePicker/useDatePicker.js

@@ -1,39 +1,54 @@
-import { format, isEqual, isAfter, isBefore } from 'date-fns';
+import { format, isEqual, isAfter, isBefore, addMonths, subMonths } 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);
 
   if (!value) {
     throw new Error('useDatePicker must be used inside a DatePickerProvider');
   }
 
-  let selected = false;
-  let blocked,
-      disabled = false;
-
-  if (date) {
-    if (value.selection) {
-      if (isMultiSelection(value.selection)) {
-        selected = !!value.selection.find(d => isEqual(d, date));
-      } else if (isRangeSelection(value.selection)) {
-        if (isEqual(date, value.selection.from)) {
-          selected = 'start';
-        } else if (value.selection.to && isEqual(date, value.selection.to)) {
-          selected = 'end';
-        } else if (isAfter(date, value.selection.from) && value.selection.to && isBefore(date, value.selection.to)) {
-          selected = 'middle';
+  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 {
-          selected = false;
+          setSelected(isEqual(date, value.selection));
         }
-      } else {
-        selected = isEqual(date, value.selection);
       }
-    } // Determine if date is blocked out
-
+    }
+  }, [date, value.hoverRange, value.selection]);
+  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
@@ -56,7 +71,7 @@ export function isSingleSelection(selection) {
   return selection instanceof Date;
 }
 export function isMultiSelection(selection) {
-  return Array.isArray(selection) && selection.every(d => d instanceof Date);
+  return Array.isArray(selection);
 }
 export function isRangeSelection(selection) {
   return !!selection.from;
@@ -65,24 +80,57 @@ export function isStringRangeSelection(selection) {
   return !!selection.from;
 }
 
-function parseSelection(selection) {
+function parseSelection(selection, variant) {
   if (!selection) return;
 
-  if (Array.isArray(selection)) {
-    const parsedSelection = [];
+  if (variant === 'multi') {
+    if (isMultiSelection(selection)) {
+      const parsedSelection = [];
 
-    for (const d of selection) {
-      parsedSelection.push(new Date(new Date(d).toDateString()));
-    }
+      for (const d of selection) {
+        parsedSelection.push(new Date(new Date(d).toDateString()));
+      }
 
-    return parsedSelection.sort((a, b) => b.getMilliseconds() - a.getMilliseconds());
-  } else if (isRangeSelection(selection)) {
-    return {
-      from: new Date(new Date(selection.from).toDateString()),
-      to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
-    };
+      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 {
-    return new Date(new Date(selection).toDateString());
+    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;
+    }
   }
 }
 
@@ -102,11 +150,24 @@ export const DatePickerProvider = ({
   value
 }) => {
   const [configuration, setConfiguration] = useState(deepmerge(defaultConfiguration, externalConfig));
-  const [selection, setSelection] = useState(parseSelection(value));
+  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));
-  }, [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;
@@ -135,6 +196,10 @@ export const DatePickerProvider = ({
         {
           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';
           }
@@ -143,7 +208,13 @@ export const DatePickerProvider = ({
       case 'multi':
         {
           if (Array.isArray(selection)) {
-            return selection.map(d => format(d, template)).join(', ');
+            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';
           }
@@ -153,6 +224,18 @@ export const DatePickerProvider = ({
         {
           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';
           }
@@ -164,30 +247,41 @@ export const DatePickerProvider = ({
         }
     }
   }, [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 selectionHandler = useCallback(date => {
     if (configuration.selection === 'multi') {
-      const selections = selection;
+      const selections = [...selection];
       const existingIndex = selections.findIndex(s => isEqual(s, date));
 
       if (existingIndex > -1) {
-        setSelection(selections.splice(existingIndex, 1));
+        selections.splice(existingIndex, 1);
+        setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
       } else {
-        setSelection([...selections, date]);
+        setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
       }
     } else if (configuration.selection === 'range') {
       if (selection && isRangeSelection(selection) && !selection.to) {
-        setSelection(isBefore(date, selection.from) ? {
+        const updatedSelection = isBefore(date, selection.from) ? {
           from: date,
           to: selection.from
         } : {
           from: selection.from,
           to: date
-        });
+        };
+        setSelection(updatedSelection);
+        setHoverRange(null);
 
         if (!configuration.confirmation) {
-          closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+          saveValue(updatedSelection);
         }
       } else {
+        setHoverRange({
+          from: date,
+          to: date
+        });
         setSelection({
           from: date,
           to: null
@@ -197,14 +291,14 @@ export const DatePickerProvider = ({
       setSelection(date);
 
       if (!configuration.confirmation) {
-        closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+        saveValue(date);
       }
     }
-  }, [closePicker, configuration.confirmation, configuration.selection, selection]);
+  }, [configuration.confirmation, configuration.selection, saveValue, selection]);
   const focusHnadler = useCallback(date => {
     if (!selection) return;
 
-    if (configuration.selection === 'range' && isRangeSelection(selection)) {
+    if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
       setHoverRange(isBefore(date, selection.from) ? {
         from: date,
         to: selection.from
@@ -213,26 +307,35 @@ export const DatePickerProvider = ({
         to: date
       });
     }
-  }, [configuration.selection, selection]);
+  }, [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(null);
+    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,
       onDayBlur: blurHnadler,
       onDayFocus: focusHnadler,
       onSelection: selectionHandler,
+      previousMonth,
+      revertValue,
+      saveValue,
       selectionActive: false,
       selection
     };
-  }, [blurHnadler, configuration, focusHnadler, getFormattedDate, selection, selectionHandler]);
+  }, [blurHnadler, configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, hoverRange, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
   return /*#__PURE__*/React.createElement(DatePickerContext.Provider, {
     value: datePickerCtx
   }, children);

package/lib-esm/Dialog.js

@@ -98,7 +98,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
   }), children)) : null;
 });
 DialogHeader.defaultProps = {
-  backgroundColor: 'bg.tertiary'
+  backgroundColor: 'canvas.subtle'
 };
 DialogHeader.propTypes = { ...Box.propTypes
 };

package/lib-esm/FilteredActionList/FilteredActionList.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useCallback, useEffect, useRef } from 'react';
+import { useSSRSafeId } from '@react-aria/ssr';
 import TextInput from '../TextInput';
 import Box from '../Box';
 import { ActionList } from '../ActionList';
@@ -11,36 +12,7 @@ import styled from 'styled-components';
 import { get } from '../constants';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
 import useScrollFlash from '../hooks/useScrollFlash';
-import { useSSRSafeId } from '@react-aria/ssr';
-
-function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
-  const {
-    top: childTop,
-    bottom: childBottom
-  } = child.getBoundingClientRect();
-  const {
-    top: containerTop,
-    bottom: containerBottom
-  } = container.getBoundingClientRect();
-  const isChildTopAboveViewingArea = childTop < containerTop + margin;
-  const isChildBottomBelowViewingArea = childBottom > containerBottom - margin;
-
-  if (isChildTopAboveViewingArea) {
-    const scrollHeightToChildTop = childTop - containerTop + container.scrollTop;
-    container.scrollTo({
-      behavior,
-      top: scrollHeightToChildTop - margin
-    });
-  } else if (isChildBottomBelowViewingArea) {
-    const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop;
-    container.scrollTo({
-      behavior,
-      top: scrollHeightToChildBottom + margin
-    });
-  } // either completely in view or outside viewing area on both ends, don't scroll
-
-}
-
+import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
 const StyledHeader = styled.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "yg3jkv-0"
@@ -95,7 +67,7 @@ export function FilteredActionList({
   useEffect(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto');
+      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
     }
   }, [items]);
   useScrollFlash(scrollContainerRef);

package/lib-esm/Flash.js

@@ -5,35 +5,35 @@ import sx from './sx';
 const variants = variant({
   variants: {
     default: {
-      color: 'alert.info.text',
-      backgroundColor: 'alert.info.bg',
-      borderColor: 'alert.info.border',
+      color: 'fg.default',
+      backgroundColor: 'accent.subtle',
+      borderColor: 'accent.muted',
       svg: {
-        color: 'alert.info.icon'
+        color: 'accent.fg'
       }
     },
     success: {
-      color: 'alert.success.text',
-      backgroundColor: 'alert.success.bg',
-      borderColor: 'alert.success.border',
+      color: 'fg.default',
+      backgroundColor: 'success.subtle',
+      borderColor: 'success.muted',
       svg: {
-        color: 'alert.success.icon'
+        color: 'success.fg'
       }
     },
     danger: {
-      color: 'alert.error.text',
-      backgroundColor: 'alert.error.bg',
-      borderColor: 'alert.error.border',
+      color: 'fg.default',
+      backgroundColor: 'danger.subtle',
+      borderColor: 'danger.muted',
       svg: {
-        color: 'alert.error.icon'
+        color: 'danger.fg'
       }
     },
     warning: {
-      color: 'alert.warn.text',
-      backgroundColor: 'alert.warn.bg',
-      borderColor: 'alert.warn.border',
+      color: 'fg.default',
+      backgroundColor: 'attention.subtle',
+      borderColor: 'attention.muted',
       svg: {
-        color: 'alert.warn.icon'
+        color: 'attention.fg'
       }
     }
   }

package/lib-esm/Label.js

@@ -33,7 +33,7 @@ const Label = styled.span.withConfig({
   componentId: "sc-1t3ykp0-0"
 })(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.fg.onEmphasis'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
 Label.defaultProps = {
-  bg: 'label.primary.border',
+  bg: 'neutral.emphasis',
   variant: 'medium'
 };
 export default Label;

package/lib-esm/Overlay.d.ts

@@ -40,6 +40,7 @@ export declare type OverlayProps = {
     top: number;
     left: number;
     portalContainerName?: string;
+    preventFocusOnOpen?: boolean;
 } & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>;
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,

package/lib-esm/Overlay.js

@@ -92,6 +92,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
   left,
   anchorSide,
   portalContainerName,
+  preventFocusOnOpen,
   ...rest
 }, forwardedRef) => {
   const overlayRef = useRef(null);
@@ -107,7 +108,8 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
     onEscape,
     ignoreClickRefs,
     onClickOutside,
-    initialFocusRef
+    initialFocusRef,
+    preventFocusOnOpen
   });
   useEffect(() => {
     var _combinedRef$current;

package/lib-esm/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
 const Page = styled.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.primer.fg.disabled'), get('space.1'), get('space.1'), COMMON);
 
 function usePaginationPages({
   theme,

package/lib-esm/ProgressBar.js

@@ -36,7 +36,7 @@ function ProgressBar({
 
 ProgressBar.displayName = "ProgressBar";
 ProgressBar.defaultProps = {
-  bg: 'bg.successInverse',
+  bg: 'success.emphasis',
   barSize: 'default'
 };
 export default ProgressBar;

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

@@ -32,7 +32,17 @@ 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<{
+    } & 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"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
@@ -307,15 +317,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast"> & Omit<Pick<{
-        [x: string]: any;
-        [x: number]: any;
-    } & {
-        theme?: any;
-    } & {
-        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">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
     Footer: import("styled-components").StyledComponent<"footer", any, SystemCommonProps & SxProp, never>;
     Item: React.ForwardRefExoticComponent<Pick<{
         as?: React.ElementType<any> | undefined;

package/lib-esm/StateLabel.js

@@ -19,34 +19,28 @@ const colorVariants = variant({
   prop: 'status',
   variants: {
     issueClosed: {
-      backgroundColor: 'prState.closed.bg',
-      color: 'prState.closed.text',
-      borderColor: 'prState.closed.border'
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullClosed: {
-      backgroundColor: 'prState.closed.bg',
-      color: 'prState.closed.text',
-      borderColor: 'prState.closed.border'
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullMerged: {
-      backgroundColor: 'prState.merged.bg',
-      color: 'prState.merged.text',
-      borderColor: 'prState.merged.border'
+      backgroundColor: 'done.emphasis',
+      color: 'fg.onEmphasis'
     },
     issueOpened: {
-      backgroundColor: 'prState.open.bg',
-      color: 'prState.open.text',
-      borderColor: 'prState.open.border'
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullOpened: {
-      backgroundColor: 'prState.open.bg',
-      color: 'prState.open.text',
-      borderColor: 'prState.open.border'
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
     },
     draft: {
-      backgroundColor: 'prState.draft.bg',
-      color: 'prState.draft.text',
-      borderColor: 'prState.draft.border'
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 });
@@ -68,7 +62,7 @@ const sizeVariants = variant({
 const StateLabelBase = styled.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";border-width:1px;border-style:solid;", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, COMMON, sx);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, COMMON, sx);
 
 function StateLabel({
   children,

package/lib-esm/TextInput.d.ts

@@ -1,22 +1,14 @@
 import React from 'react';
-import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
-import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
-    disabled?: boolean | undefined;
-    hasIcon?: boolean | undefined;
-    block?: boolean | undefined;
-    contrast?: boolean | undefined;
-    variant?: "large" | "small" | undefined;
-} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
+import { ComponentProps, Merge } from './utils/types';
+import UnstyledTextInput from './_UnstyledTextInput';
+import TextInputWrapper from './_TextInputWrapper';
 declare type NonPassthroughProps = {
     className?: string;
     icon?: React.ComponentType<{
         className?: string;
     }>;
-} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
-declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>;
+} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
+declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;
 export default TextInput;