@primer/components 0.0.0-2021927202224 → 0.0.0-2021927203020

package/lib/TextInputWithTokens.js

@@ -25,10 +25,6 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _Text = _interopRequireDefault(require("./Text"));
-
-var _iterateFocusableElements = require("./utils/iterateFocusableElements");
-
 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); }
@@ -37,13 +33,7 @@ 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); }
 
-const overflowCountFontSizeMap = {
-  small: 0,
-  medium: 1,
-  large: 1,
-  extralarge: 2
-}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
-
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -63,11 +53,9 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
-  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
-    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -76,7 +64,6 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = (0, _react.useRef)(null);
   const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = (0, _react.useState)();
-  const [tokensAreTruncated, setTokensAreTruncated] = (0, _react.useState)(Boolean(visibleTokenCount));
   const {
     containerRef
   } = (0, _useFocusZone.useFocusZone)({
@@ -111,25 +98,14 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
-
-    setTimeout(() => {
-      var _containerRef$current2, _containerRef$current3;
-
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
-      // `nextFocusableElement` is the div that wraps the input
+    onTokenRemove(tokenId);
 
-      const firstFocusable = nextElementToFocus && (0, _iterateFocusableElements.isFocusable)(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => (0, _iterateFocusableElements.isFocusable)(el));
+    if (selectedTokenIndex) {
+      var _containerRef$current2;
 
-      if (firstFocusable) {
-        firstFocusable.focus();
-      } else {
-        var _ref$current;
-
-        // if there are no tokens left, focus the input
-        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-      }
-    }, 0);
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
+      nextElementToFocus.focus();
+    }
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -137,55 +113,30 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined); // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus between tokens,
-    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
-
-    setTimeout(() => {
-      var _containerRef$current4;
-
-      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
-        setTokensAreTruncated(true);
-      }
-    }, 0);
+    setSelectedTokenIndex(undefined);
   };
 
-  const handleTokenKeyUp = event => {
-    if (event.key === 'Escape') {
-      var _ref$current2;
+  const handleTokenKeyUp = e => {
+    if (e.key === 'Escape') {
+      var _ref$current;
 
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
-  const handleInputFocus = event => {
-    onFocus && onFocus(event);
+  const handleInputFocus = e => {
+    onFocus && onFocus(e);
     setSelectedTokenIndex(undefined);
-    visibleTokenCount && setTokensAreTruncated(false);
-  };
-
-  const handleInputBlur = event => {
-    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
-    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
-
-    setTimeout(() => {
-      var _containerRef$current5;
-
-      if (!((_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.contains(document.activeElement)) && visibleTokenCount) {
-        setTokensAreTruncated(true);
-      }
-    }, 0);
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current3;
+    var _ref$current2;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
+    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
       return;
     }
 
@@ -206,24 +157,13 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current4;
+        var _ref$current3;
 
-        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
+        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
       }, 0);
     }
   };
 
-  const focusInput = () => {
-    var _combinedInputRef$cur;
-
-    (_combinedInputRef$cur = combinedInputRef.current) === null || _combinedInputRef$cur === void 0 ? void 0 : _combinedInputRef$cur.focus();
-  };
-
-  const preventTokenClickPropagation = event => {
-    event.stopPropagation();
-  };
-
-  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
   return /*#__PURE__*/_react.default.createElement(_TextInputWrapper.default, {
     block: block,
     className: className,
@@ -235,8 +175,15 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    onClick: focusInput,
-    sx: { ...(block ? {
+    ref: containerRef,
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      gap: '0.25rem',
+      '> *': {
+        flexShrink: 0
+      },
+      ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -249,21 +196,6 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    ref: containerRef,
-    display: "flex",
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      marginLeft: '-0.25rem',
-      marginBottom: '-0.25rem',
-      flexGrow: 1,
-      '> *': {
-        flexShrink: 0,
-        marginLeft: '0.25rem',
-        marginBottom: '0.25rem'
-      }
-    }
   }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     sx: {
       order: 1,
@@ -275,13 +207,12 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
-    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
+  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
@@ -289,7 +220,6 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
-    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -297,10 +227,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: "fg.muted",
-    fontSize: size && overflowCountFontSizeMap[size]
-  }, "+", tokens.length - visibleTokens.length) : null));
+  }, tokenRest))) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib/Token/Token.js

@@ -39,16 +39,7 @@ const DefaultTokenStyled = (0, _styledComponents.default)(_TokenBase.default).wi
 const LeadingVisualContainer = (0, _styledComponents.default)('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;", ""], props => {
-  switch (props.size) {
-    case 'large':
-    case 'extralarge':
-      return (0, _styledComponents.css)(["margin-right:", ";"], (0, _constants.get)('space.2'));
-
-    default:
-      return (0, _styledComponents.css)(["margin-right:", ";"], (0, _constants.get)('space.1'));
-  }
-});
+})(["flex-shrink:0;line-height:0;"]);
 const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
   const {
     as,
@@ -83,9 +74,7 @@ const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
     isTokenInteractive: (0, _TokenBase.isTokenInteractive)(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
-    size: size
-  }, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+  }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib/Token/TokenBase.js

@@ -38,6 +38,7 @@ const variants = (0, _styledSystem.variant)({
   variants: {
     small: {
       fontSize: 0,
+      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -50,6 +51,7 @@ const variants = (0, _styledSystem.variant)({
     },
     medium: {
       fontSize: 0,
+      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -59,6 +61,7 @@ const variants = (0, _styledSystem.variant)({
     },
     large: {
       fontSize: 0,
+      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -68,6 +71,7 @@ const variants = (0, _styledSystem.variant)({
     },
     extralarge: {
       fontSize: 1,
+      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib/Token/_RemoveTokenButton.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _octiconsReact = require("@primer/octicons-react");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -19,10 +19,6 @@ var _sx = _interopRequireDefault(require("../sx"));
 
 var _TokenBase = require("./TokenBase");
 
-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; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
@@ -54,16 +50,7 @@ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _T
 const StyledTokenButton = _styledComponents.default.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
-  switch (props.size) {
-    case 'large':
-    case 'extralarge':
-      return (0, _styledComponents.css)(["margin-left:", ";"], (0, _constants.get)('space.2'));
-
-    default:
-      return (0, _styledComponents.css)(["margin-left:", ";"], (0, _constants.get)('space.1'));
-  }
-}, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib/_TextInputWrapper.js

@@ -39,7 +39,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {

package/lib/hooks/useDebounce.d.ts

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

package/lib/hooks/useDebounce.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+var _default = useDebounce;
+exports.default = _default;

package/lib/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/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/lib-esm/ActionList/Item.d.ts

@@ -28,19 +28,13 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
-     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
-     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
-    /**
-     * Icon or text positioned after `Item` text.
-     */
-    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib-esm/ActionList/Item.js

@@ -154,7 +154,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
-    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -246,10 +245,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
-    variant: variant,
-    disabled: disabled
-  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));

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

@@ -26,6 +26,8 @@ interface AnchoredOverlayPropsWithoutAnchor {
      */
     anchorRef: React.RefObject<HTMLElement>;
 }
+export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
+export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
 export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
 interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
     /**
@@ -35,11 +37,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
     /**
      * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
      */
-    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
+    onOpen?: (gesture: OverlayOpenGesture) => unknown;
     /**
      * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
      */
-    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
+    onClose?: (gesture: OverlayCloseGesture) => unknown;
     /**
      * Props to be spread on the internal `Overlay` component.
      */

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

@@ -12,12 +12,14 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
 declare const _default: React.FC<{
     id?: string | undefined;
 }> & {
-    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<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"> & {

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -4,12 +4,14 @@ import { ComponentProps } from '../utils/types';
 declare type InternalAutocompleteInputProps = {
     as?: React.ComponentType<any>;
 };
-declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<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"> & {

package/lib-esm/Breadcrumbs.d.ts

@@ -1,25 +1,24 @@
 import * as History from 'history';
 import React from 'react';
+import { SystemCommonProps, SystemFlexProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
-export declare type BreadcrumbsProps = React.PropsWithChildren<{
-    className?: string;
-} & SxProp>;
-declare function Breadcrumbs({ className, children, sx: sxProp }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
+declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
 declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
 declare const _default: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 export default _default;
 /**
@@ -29,7 +28,7 @@ export declare const Breadcrumb: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/lib-esm/Breadcrumbs.js

@@ -1,9 +1,11 @@
+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 classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
 
 import React from 'react';
 import styled from 'styled-components';
 import Box from './Box';
-import { get } from './constants';
+import { COMMON, FLEX, get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
@@ -13,19 +15,22 @@ const Wrapper = styled.li.withConfig({
 const BreadcrumbsBase = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";"], sx);
+})(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
 
 function Breadcrumbs({
   className,
   children,
-  sx: sxProp
+  theme,
+  ...rest
 }) {
-  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, null, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbsBase, {
+  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
+    theme: theme
+  }, child));
+  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
     className: className,
     "aria-label": "Breadcrumbs",
-    sx: sxProp
-  }, /*#__PURE__*/React.createElement(Box, {
+    theme: theme
+  }, rest), /*#__PURE__*/React.createElement(Box, {
     as: "ol",
     my: 0,
     pl: 0
@@ -40,7 +45,7 @@ const BreadcrumbsItem = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
   componentId: "hwwoo0-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), sx);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export default Object.assign(Breadcrumbs, {

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { DatePickerConfiguration, Selection } from './useDatePicker';
+declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
+declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
+export interface DatePickerProps extends DatePickerConfiguration {
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+    initialValue?: 'today' | Date | string | null;
+    iconOnly?: boolean;
+    placeholder?: string;
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open?: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: OpenGesture) => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: CloseGesture) => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
+    value?: Selection;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export {};