@primer/components 0.0.0-2021919202426 → 0.0.0-2021920152952

package/lib/DatePicker/Month.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Month = void 0;
+
+var _dateFns = require("date-fns");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _constants = require("../constants");
+
+var _Day = require("./Day");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const MonthComponent = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Month__MonthComponent",
+  componentId: "l6j7o0-0"
+})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
+const MonthTitle = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Month__MonthTitle",
+  componentId: "l6j7o0-1"
+})(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
+const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Month__WeekdayHeader",
+  componentId: "l6j7o0-2"
+})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], (0, _constants.get)('colors.fg.subtle'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+
+const Month = ({
+  month,
+  year
+}) => {
+  const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
+  const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
+  const weekdayHeaders = (0, _react.useMemo)(() => {
+    const now = new Date(year, month);
+    return (0, _dateFns.eachDayOfInterval)({
+      start: (0, _dateFns.startOfWeek)(now),
+      end: (0, _dateFns.endOfWeek)(now)
+    }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, (0, _dateFns.format)(d, 'EEEEEE')));
+  }, [month, year]);
+
+  const dayAction = date => {
+    setSelectedDay(date);
+  };
+
+  const dayComponents = (0, _react.useMemo)(() => {
+    const components = [];
+    const firstDay = new Date(year, month, 1);
+
+    for (let i = 0; i < firstDay.getDay(); i++) {
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
+      const date = new Date(year, month, i);
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
+        key: `day-component-${date.toString()}`,
+        date: date,
+        selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
+        onAction: dayAction
+      }));
+    }
+
+    const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
+
+    for (let i = 6; i > lastDay.getDay(); i--) {
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
+        key: `month-post-blank-${i}`
+      }));
+    }
+
+    return components;
+  }, [month, selectedDay, year]);
+  return /*#__PURE__*/_react.default.createElement(MonthComponent, {
+    role: "grid"
+  }, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
+};
+
+exports.Month = Month;
+Month.displayName = "Month";

package/lib/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/lib/DatePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+
+var _DatePicker = require("./DatePicker");

package/lib/DatePicker/useDatePicker.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+export interface DatePickerConfiguration {
+    anchorStyle?: 'input' | 'full-date' | 'icon-only';
+    blockedDates?: Array<Date>;
+    confirmation?: boolean;
+    contiguousSelection?: boolean;
+    dimWeekends?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    rangeIncrement?: number;
+    selection?: 'single' | 'multi' | 'range';
+    view?: '1-month' | '2-month';
+}
+declare type SingleSelection = {
+    date: Date;
+};
+declare type BaseRangeSelection = {
+    from: Date;
+};
+declare type RangeSelection = {
+    to: Date;
+} & BaseRangeSelection;
+declare type SoftRangeSelection = {
+    to?: Date;
+} & BaseRangeSelection;
+export interface DatePickerContext {
+    configuration: DatePickerConfiguration;
+    selection?: SingleSelection | Array<SingleSelection> | RangeSelection | null;
+    softSelection?: SingleSelection | SoftRangeSelection | null;
+    selectionActive?: boolean;
+    onSelection: (date: Date) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: () => void;
+}
+export declare const useDatePicker: (date?: Date | undefined) => {
+    blocked: boolean | undefined;
+    disabled: boolean;
+    selected: boolean | undefined;
+    configuration: DatePickerConfiguration;
+    selection?: SingleSelection | RangeSelection | SingleSelection[] | null | undefined;
+    softSelection?: SingleSelection | SoftRangeSelection | null | undefined;
+    selectionActive?: boolean | undefined;
+    onSelection: (date: Date) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: () => void;
+};
+export interface DatePickerProviderProps {
+    configuration?: DatePickerConfiguration;
+}
+export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;
+export {};

package/lib/DatePicker/useDatePicker.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePickerProvider = exports.useDatePicker = void 0;
+
+var _dateFns = require("date-fns");
+
+var _esm = require("date-fns/esm");
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+const useDatePicker = date => {
+  const value = (0, _react.useContext)(DatePickerContext);
+
+  if (!value) {
+    throw new Error('useDatePicker must be used inside a DatePickerProvider');
+  }
+
+  let selected,
+      blocked,
+      disabled = false;
+
+  if (date) {
+    if (Array.isArray(value.selection)) {
+      selected = !!value.selection.find(d => (0, _dateFns.isEqual)(d.date, 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
+
+
+    if (value.configuration.minDate || value.configuration.maxDate) {
+      disabled = (value.configuration.minDate ? (0, _esm.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _esm.isAfter)(date, value.configuration.maxDate) : false);
+    }
+  }
+
+  return { ...value,
+    blocked,
+    disabled,
+    selected
+  };
+};
+
+exports.useDatePicker = useDatePicker;
+
+function isRangeSelection(selection) {
+  return !!selection.from;
+}
+
+const DatePickerProvider = ({
+  configuration,
+  children
+}) => {
+  const [selection, setSelection] = (0, _react.useState)(null);
+  const [softSelection, setSoftSelection] = (0, _react.useState)(null);
+  const selectionHandler = (0, _react.useCallback)(date => {
+    if ((configuration === null || configuration === void 0 ? void 0 : configuration.selection) === 'single') {
+      setSelection({
+        date
+      });
+    } else if ((configuration === null || configuration === void 0 ? void 0 : configuration.selection) === 'range') {
+      if (softSelection && isRangeSelection(softSelection)) {
+        setSelection({
+          from: softSelection.from,
+          to: date
+        });
+      } else {
+        setSoftSelection({
+          from: date,
+          to: date
+        });
+      }
+    }
+  }, [configuration === null || configuration === void 0 ? void 0 : configuration.selection, softSelection]);
+  const focusHnadler = (0, _react.useCallback)(date => {
+    if ((configuration === null || configuration === void 0 ? void 0 : configuration.selection) === 'single' || !softSelection) {
+      setSoftSelection({
+        date
+      });
+    }
+
+    if ((configuration === null || configuration === void 0 ? void 0 : configuration.selection) === 'range' && softSelection && isRangeSelection(softSelection)) {
+      setSoftSelection({ ...softSelection,
+        to: date
+      });
+    }
+  }, [configuration === null || configuration === void 0 ? void 0 : configuration.selection, softSelection]);
+  const blurHnadler = (0, _react.useCallback)(() => {
+    if ((configuration === null || configuration === void 0 ? void 0 : configuration.selection) === 'single' || !softSelection) {
+      setSoftSelection(null);
+    }
+
+    if ((configuration === null || configuration === void 0 ? void 0 : configuration.selection) === 'range' && softSelection && isRangeSelection(softSelection)) {
+      setSoftSelection({
+        from: softSelection.from
+      });
+    }
+  }, [configuration === null || configuration === void 0 ? void 0 : configuration.selection, softSelection]);
+  const datePickerCtx = (0, _react.useMemo)(() => {
+    return {
+      configuration: {
+        anchorStyle: 'full-date',
+        confirmation: false,
+        contiguousSelection: false,
+        dimWeekends: false,
+        selection: 'single',
+        view: '2-month',
+        ...configuration
+      },
+      selectionActive: false,
+      selection,
+      onSelection: selectionHandler,
+      onDayFocus: focusHnadler,
+      onDayBlur: blurHnadler
+    };
+  }, [blurHnadler, configuration, focusHnadler, selection, selectionHandler]);
+  return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
+    value: datePickerCtx
+  }, children);
+};
+
+exports.DatePickerProvider = DatePickerProvider;
+DatePickerProvider.displayName = "DatePickerProvider";

package/lib/Dialog.js

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

package/lib/FilteredActionList/FilteredActionList.js

@@ -7,8 +7,6 @@ exports.FilteredActionList = FilteredActionList;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ssr = require("@react-aria/ssr");
-
 var _TextInput = _interopRequireDefault(require("../TextInput"));
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -29,7 +27,7 @@ var _useProvidedRefOrCreate = require("../hooks/useProvidedRefOrCreate");
 
 var _useScrollFlash = _interopRequireDefault(require("../hooks/useScrollFlash"));
 
-var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
+var _ssr = require("@react-aria/ssr");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +37,34 @@ 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"
@@ -86,7 +112,7 @@ function FilteredActionList({
       activeDescendantRef.current = current;
 
       if (current && scrollContainerRef.current && directlyActivated) {
-        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
+        scrollIntoViewingArea(current, scrollContainerRef.current);
       }
     }
   }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
@@ -94,7 +120,7 @@ function FilteredActionList({
   (0, _react.useEffect)(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 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: 'fg.default',
-      backgroundColor: 'accent.subtle',
-      borderColor: 'accent.muted',
+      color: 'alert.info.text',
+      backgroundColor: 'alert.info.bg',
+      borderColor: 'alert.info.border',
       svg: {
-        color: 'accent.fg'
+        color: 'alert.info.icon'
       }
     },
     success: {
-      color: 'fg.default',
-      backgroundColor: 'success.subtle',
-      borderColor: 'success.muted',
+      color: 'alert.success.text',
+      backgroundColor: 'alert.success.bg',
+      borderColor: 'alert.success.border',
       svg: {
-        color: 'success.fg'
+        color: 'alert.success.icon'
       }
     },
     danger: {
-      color: 'fg.default',
-      backgroundColor: 'danger.subtle',
-      borderColor: 'danger.muted',
+      color: 'alert.error.text',
+      backgroundColor: 'alert.error.bg',
+      borderColor: 'alert.error.border',
       svg: {
-        color: 'danger.fg'
+        color: 'alert.error.icon'
       }
     },
     warning: {
-      color: 'fg.default',
-      backgroundColor: 'attention.subtle',
-      borderColor: 'attention.muted',
+      color: 'alert.warn.text',
+      backgroundColor: 'alert.warn.bg',
+      borderColor: 'alert.warn.border',
       svg: {
-        color: 'attention.fg'
+        color: 'alert.warn.icon'
       }
     }
   }

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: 'neutral.emphasis',
+  bg: 'label.primary.border',
   variant: 'medium'
 };
 var _default = Label;

package/lib/Overlay.d.ts

@@ -40,7 +40,6 @@ 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,7 +113,6 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
   left,
   anchorSide,
   portalContainerName,
-  preventFocusOnOpen,
   ...rest
 }, forwardedRef) => {
   const overlayRef = (0, _react.useRef)(null);
@@ -129,8 +128,7 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
     onEscape,
     ignoreClickRefs,
     onClickOutside,
-    initialFocusRef,
-    preventFocusOnOpen
+    initialFocusRef
   });
   (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.primer.fg.disabled'), (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.fg.muted'), (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: 'success.emphasis',
+  bg: 'bg.successInverse',
   barSize: 'default'
 };
 var _default = ProgressBar;

package/lib/SelectMenu/SelectMenu.d.ts

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

package/lib/StateLabel.js

@@ -35,28 +35,34 @@ const colorVariants = (0, _styledSystem.variant)({
   prop: 'status',
   variants: {
     issueClosed: {
-      backgroundColor: 'danger.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.closed.bg',
+      color: 'prState.closed.text',
+      borderColor: 'prState.closed.border'
     },
     pullClosed: {
-      backgroundColor: 'danger.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.closed.bg',
+      color: 'prState.closed.text',
+      borderColor: 'prState.closed.border'
     },
     pullMerged: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.merged.bg',
+      color: 'prState.merged.text',
+      borderColor: 'prState.merged.border'
     },
     issueOpened: {
-      backgroundColor: 'success.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.open.bg',
+      color: 'prState.open.text',
+      borderColor: 'prState.open.border'
     },
     pullOpened: {
-      backgroundColor: 'success.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.open.bg',
+      color: 'prState.open.text',
+      borderColor: 'prState.open.border'
     },
     draft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.draft.bg',
+      color: 'prState.draft.text',
+      borderColor: 'prState.draft.border'
     }
   }
 });
@@ -79,7 +85,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:", ";", ";", ";", ";", ";"], (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:", ";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);
 
 function StateLabel({
   children,

package/lib/TextInput.d.ts

@@ -1,14 +1,22 @@
 import React from 'react';
-import { ComponentProps, Merge } from './utils/types';
-import UnstyledTextInput from './_UnstyledTextInput';
-import TextInputWrapper from './_TextInputWrapper';
+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>;
 declare type NonPassthroughProps = {
     className?: string;
     icon?: React.ComponentType<{
         className?: string;
     }>;
-} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
-declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
+} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
+declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>;
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;
 export default TextInput;