@primer/components 0.0.0-202192231947 → 0.0.0-2021923214017

package/lib/DatePicker/useDatePicker.js

@@ -25,35 +25,50 @@ const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
 
 const useDatePicker = date => {
   const value = (0, _react.useContext)(DatePickerContext);
+  const [selected, setSelected] = (0, _react.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 => (0, _dateFns.isEqual)(d, date));
-      } else if (isRangeSelection(value.selection)) {
-        if ((0, _dateFns.isEqual)(date, value.selection.from)) {
-          selected = 'start';
-        } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
-          selected = 'end';
-        } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
-          selected = 'middle';
+  (0, _react.useEffect)(() => {
+    if (date) {
+      if (value.hoverRange) {
+        if (isRangeSelection(value.hoverRange)) {
+          if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
+            setSelected('start');
+          } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
+            setSelected('end');
+          } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
+            setSelected('middle');
+          } else {
+            setSelected(false);
+          }
+        }
+      } else if (value.selection) {
+        if (isMultiSelection(value.selection)) {
+          setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
+        } else if (isRangeSelection(value.selection)) {
+          if ((0, _dateFns.isEqual)(date, value.selection.from)) {
+            setSelected('start');
+          } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
+            setSelected('end');
+          } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
+            setSelected('middle');
+          } else {
+            setSelected(false);
+          }
         } else {
-          selected = false;
+          setSelected((0, _dateFns.isEqual)(date, value.selection));
         }
-      } else {
-        selected = (0, _dateFns.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 => (0, _dateFns.isEqual)(d, date));
     } // Determine if date is disabled
@@ -79,7 +94,7 @@ function isSingleSelection(selection) {
 }
 
 function isMultiSelection(selection) {
-  return Array.isArray(selection) && selection.every(d => d instanceof Date);
+  return Array.isArray(selection);
 }
 
 function isRangeSelection(selection) {
@@ -90,24 +105,57 @@ 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;
+    }
   }
 }
 
@@ -128,11 +176,14 @@ const DatePickerProvider = ({
   value
 }) => {
   const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
-  const [selection, setSelection] = (0, _react.useState)(parseSelection(value));
+  const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
+  const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
   const [hoverRange, setHoverRange] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
     setConfiguration((0, _deepmerge.default)(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 getFormattedDate = (0, _react.useMemo)(() => {
     if (!selection) {
       return configuration.placeholder;
@@ -161,6 +212,10 @@ const DatePickerProvider = ({
         {
           if (selection instanceof Date) {
             return (0, _dateFns.format)(selection, template);
+          } else if (Array.isArray(selection)) {
+            return (0, _dateFns.format)(selection[0], template);
+          } else if (isRangeSelection(selection)) {
+            return (0, _dateFns.format)(selection.from, template);
           } else {
             return 'Invalid Selection';
           }
@@ -169,7 +224,13 @@ const DatePickerProvider = ({
       case 'multi':
         {
           if (Array.isArray(selection)) {
-            return selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
+            if (selection.length > 3) return `${selection.length} Selected`;
+            const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
+            return formatted;
+          } else if (selection instanceof Date) {
+            return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
+          } else if (isRangeSelection(selection)) {
+            return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
           } else {
             return 'Invalid Selection';
           }
@@ -179,6 +240,18 @@ const DatePickerProvider = ({
         {
           if (isRangeSelection(selection)) {
             return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+          } else if (selection instanceof Date) {
+            return Object.entries({
+              from: selection,
+              to: null
+            }).map(([_, date]) => date ? (0, _dateFns.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 ? (0, _dateFns.format)(date, template) : '').join(' - ');
           } else {
             return 'Invalid Selection';
           }
@@ -190,30 +263,41 @@ const DatePickerProvider = ({
         }
     }
   }, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
+  const handleSave = (0, _react.useCallback)(updatedSelection => {
+    setPreviousSelection(updatedSelection);
+    closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+  }, [closePicker]);
   const selectionHandler = (0, _react.useCallback)(date => {
     if (configuration.selection === 'multi') {
-      const selections = selection;
+      const selections = [...selection];
       const existingIndex = selections.findIndex(s => (0, _dateFns.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((0, _dateFns.isBefore)(date, selection.from) ? {
+        const updatedSelection = (0, _dateFns.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();
+          handleSave(updatedSelection);
         }
       } else {
+        setHoverRange({
+          from: date,
+          to: date
+        });
         setSelection({
           from: date,
           to: null
@@ -223,14 +307,14 @@ const DatePickerProvider = ({
       setSelection(date);
 
       if (!configuration.confirmation) {
-        closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+        handleSave(date);
       }
     }
-  }, [closePicker, configuration.confirmation, configuration.selection, selection]);
+  }, [configuration.confirmation, configuration.selection, handleSave, selection]);
   const focusHnadler = (0, _react.useCallback)(date => {
     if (!selection) return;
 
-    if (configuration.selection === 'range' && isRangeSelection(selection)) {
+    if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
       setHoverRange((0, _dateFns.isBefore)(date, selection.from) ? {
         from: date,
         to: selection.from
@@ -239,26 +323,30 @@ const DatePickerProvider = ({
         to: date
       });
     }
-  }, [configuration.selection, selection]);
+  }, [configuration.selection, hoverRange, selection]);
   const blurHnadler = (0, _react.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 = (0, _react.useCallback)(() => {
+    setSelection(previousSelection);
+  }, [previousSelection]);
   const datePickerCtx = (0, _react.useMemo)(() => {
     return {
       configuration,
       disabled: false,
       formattedDate: getFormattedDate,
+      hoverRange,
       onDayBlur: blurHnadler,
       onDayFocus: focusHnadler,
       onSelection: selectionHandler,
+      revertValue,
       selectionActive: false,
       selection
     };
-  }, [blurHnadler, configuration, focusHnadler, getFormattedDate, selection, selectionHandler]);
+  }, [blurHnadler, configuration, focusHnadler, getFormattedDate, hoverRange, revertValue, selection, selectionHandler]);
   return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
     value: datePickerCtx
   }, children);

package/lib/Dialog.js

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

package/lib/FilteredActionList/FilteredActionList.js

@@ -7,6 +7,8 @@ exports.FilteredActionList = FilteredActionList;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _ssr = require("@react-aria/ssr");
+
 var _TextInput = _interopRequireDefault(require("../TextInput"));
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -27,7 +29,7 @@ var _useProvidedRefOrCreate = require("../hooks/useProvidedRefOrCreate");
 
 var _useScrollFlash = _interopRequireDefault(require("../hooks/useScrollFlash"));
 
-var _ssr = require("@react-aria/ssr");
+var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,34 +39,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
 
-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
-
-}
-
 const StyledHeader = _styledComponents.default.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "yg3jkv-0"
@@ -112,7 +86,7 @@ function FilteredActionList({
       activeDescendantRef.current = current;
 
       if (current && scrollContainerRef.current && directlyActivated) {
-        scrollIntoViewingArea(current, scrollContainerRef.current);
+        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
       }
     }
   }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
@@ -120,7 +94,7 @@ function FilteredActionList({
   (0, _react.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');
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
     }
   }, [items]);
   (0, _useScrollFlash.default)(scrollContainerRef);

package/lib/Flash.js

@@ -18,35 +18,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const variants = (0, _styledSystem.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/Label.js

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

package/lib/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/Overlay.js

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

package/lib/Pagination/Pagination.js

@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Page = _styledComponents.default.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 );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.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 );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
 
 function usePaginationPages({
   theme,

package/lib/ProgressBar.js

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

package/lib/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/StateLabel.js

@@ -35,34 +35,28 @@ const colorVariants = (0, _styledSystem.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'
     }
   }
 });
@@ -85,7 +79,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const StateLabelBase = _styledComponents.default.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;", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
 
 function StateLabel({
   children,

package/lib/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;