baseui 11.0.0 → 11.0.3

package/esm/select/utils/default-filter-options.js

@@ -43,7 +43,7 @@ var filterOptions = function filterOptions(options, filterValue, excludeOptions,
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  var re = new RegExp("".concat(props.matchPos === 'start' ? '$' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  var re = new RegExp("".concat(props.matchPos === 'start' ? '^' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(function (option) {
     if (excludeValues.has(option[props.valueKey])) return false;

package/esm/snackbar/snackbar-context.js

@@ -136,7 +136,7 @@ export default function SnackbarProvider(_ref) {
     setTimeout(function () {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/form-control/index.d.ts

@@ -32,3 +32,12 @@ export class FormControl extends React.Component<
   FormControlProps,
   FormControlState
 > {}
+
+export interface FormControlChildProps {
+  'aria-describedby': string | null,
+  'aria-errormessage': string | null,
+  key: React.Key,
+  disabled: boolean,
+  error: boolean,
+  positive: boolean
+}

package/form-control/styled-components.js

@@ -19,7 +19,6 @@ var Label = (0, _index.styled)('label', function (props) {
       colors = _props$$theme.colors,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

package/form-control/styled-components.js.flow

@@ -16,7 +16,6 @@ export const Label = styled<StylePropsT>('label', (props) => {
   } = props;
   return {
     ...typography.font250,
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

package/index.d.ts

@@ -5,53 +5,47 @@ import {
   WithStyleFn as StyletronWithStyleFn,
   StyledFn as StyletronStyledFn,
 } from 'styletron-react';
-import {Override, Overrides} from './overrides';
-import {Locale} from './locale';
-import {Theme, ThemePrimitives} from './theme';
+import { Override, Overrides } from './overrides';
+import { Locale } from './locale';
+import { Theme, ThemePrimitives } from './theme';
 
 type UseStyletronFn<Theme> = () => [(arg: StyleObject) => string, Theme];
 export function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme>;
 export const useStyletron: UseStyletronFn<Theme>;
-export function withWrapper<
-  C extends StyletronComponent<any>,
-  P extends object
->(
+export function withWrapper<C extends StyletronComponent<any>, P extends object>(
   component: C,
-  wrapper: (component: C) => React.ComponentType<P>,
+  wrapper: (component: C) => React.ComponentType<P>
 ): StyletronComponent<React.ComponentProps<C> & P>;
 
 export function createTheme<P extends object>(
   primitives: Partial<ThemePrimitives>,
-  overrides?: P,
+  overrides?: P
 ): Theme & P;
 export function createLightTheme<P extends object>(
   primitives: Partial<ThemePrimitives>,
-  overrides?: P,
+  overrides?: P
 ): Theme & P;
 export function createDarkTheme<P extends object>(
   primitives: Partial<ThemePrimitives>,
-  overrides?: P,
+  overrides?: P
 ): Theme & P;
-export function mergeOverrides<T>(
-  target?: Overrides<T>,
-  source?: Overrides<T>,
-): Overrides<T>;
+export function mergeOverrides<T>(target?: Overrides<T>, source?: Overrides<T>): Overrides<T>;
 export function styled<
   P extends object,
   C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
   T = Theme
 >(
   component: C,
-  styledFn: StyleObject | ((props: {$theme: T} & P) => StyleObject),
+  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
 ): StyletronComponent<
-  Pick<
-    React.ComponentProps<C>,
-    Exclude<keyof React.ComponentProps<C>, {className: string}>
-  > &
-    P
+  Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
 >;
+export function withStyle<C extends StyletronComponent<any>, P extends object, T = Theme>(
+  component: C,
+  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
+): StyletronComponent<React.ComponentProps<C> & P>;
 
-export {Theme} from 'baseui/theme';
+export { Theme } from 'baseui/theme';
 export const LightTheme: Theme;
 export const LightThemeMove: Theme;
 export const lightThemePrimitives: ThemePrimitives;
@@ -85,18 +79,11 @@ export interface ThemeProviderProps {
 export const ThemeProvider: React.FC<ThemeProviderProps>;
 
 export interface StyledFn<T> extends StyletronStyledFn {
-  <
-    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-    P extends object
-  >(
+  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, P extends object>(
     component: C,
-    style: (props: {$theme: T} & P) => StyleObject,
+    style: (props: { $theme: T } & P) => StyleObject
   ): StyletronComponent<
-    Pick<
-      React.ComponentProps<C>,
-      Exclude<keyof React.ComponentProps<C>, {className: string}>
-    > &
-      P
+    Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
   >;
 }
 
@@ -105,10 +92,8 @@ export function createThemedStyled<Theme>(): StyledFn<Theme>;
 export interface WithStyleFn<T = Theme> extends StyletronWithStyleFn {
   <C extends StyletronComponent<any>, P extends object, T1 = T>(
     component: C,
-    style: (props: P & {$theme: T1}) => StyleObject,
+    style: (props: P & { $theme: T1 }) => StyleObject
   ): StyletronComponent<React.ComponentProps<C> & P>;
 }
 
-export const withStyle: WithStyleFn;
-
 export function createThemedWithStyle<Theme>(): WithStyleFn<Theme>;

package/list/list-item.js

@@ -78,7 +78,11 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
-    $shape: props.shape || _constants.SHAPE.DEFAULT
+    $shape: props.shape || _constants.SHAPE.DEFAULT,
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
+    id: props.id,
+    role: props.role
   }, rootProps), Artwork && /*#__PURE__*/_react.default.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/list/list-item.js.flow

@@ -58,6 +58,10 @@ const ListItem = React.forwardRef<PropsT, HTMLLIElement>((props: PropsT, ref) =>
       // flowlint-next-line unclear-type:off
       ref={(ref: any)}
       $shape={props.shape || SHAPE.DEFAULT}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
+      id={props.id}
+      role={props.role}
       {...rootProps}
     >
       {Artwork && (

package/list/menu-adapter.js

@@ -29,9 +29,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(_listItem.default, {
     ref: ref,
     sublist: props.sublist || props.$size === 'compact',
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
+    id: props.id,
+    role: props.role,
     overrides: (0, _overrides.mergeOverrides)({
       Root: {
         props: {

package/list/menu-adapter.js.flow

@@ -17,9 +17,13 @@ const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>((props, r
     <ListItem
       ref={ref}
       sublist={props.sublist || props.$size === 'compact'}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
       artwork={props.artwork}
       artworkSize={props.artworkSize}
       endEnhancer={props.endEnhancer}
+      id={props.id}
+      role={props.role}
       overrides={mergeOverrides(
         {
           Root: {

package/list/types.js.flow

@@ -44,7 +44,11 @@ export type PropsT = {|
   shape?: ShapeT,
   children: React.Node,
   endEnhancer?: React.AbstractComponent<{}>,
+  'aria-label'?: string,
+  'aria-selected'?: boolean,
+  id?: String,
   overrides?: OverridesT,
+  role?: string,
   sublist?: boolean,
 |};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "11.0.0",
+  "version": "11.0.3",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -29,6 +29,7 @@
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files && yarn build:copy-flow-files && yarn build:copy-ts-files && yarn build:package-json",
+    "build:docs-and-ladle": "yarn documentation:build && yarn ladle build --base-url /ladle/ && mv build public/ladle",
     "build:documentation-site-files": "node ./scripts/build-documentation-site-files.js",
     "unit-test": "yarn jest --coverage",
     "e2e:build": "yarn ladle build --out build-ladle",

package/select/index.d.ts

@@ -111,6 +111,7 @@ export interface SelectProps {
   }) => React.ReactNode;
   getValueLabel?: (args: { option: Option }) => React.ReactNode;
   id?: string;
+  inputRef?: React.Ref<any>;
   controlRef?: React.Ref<ImperativeMethods>;
   isLoading?: boolean;
   labelKey?: string;

package/select/select-component.js

@@ -22,8 +22,6 @@ var _index = require("../locale/index.js");
 
 var _index2 = require("../popover/index.js");
 
-var _index3 = require("../spinner/index.js");
-
 var _reactUid = require("react-uid");
 
 var _autosizeInput = _interopRequireDefault(require("./autosize-input.js"));
@@ -36,7 +34,7 @@ var _dropdown = _interopRequireDefault(require("./dropdown.js"));
 
 var _styledComponents = require("./styled-components.js");
 
-var _index4 = require("./utils/index.js");
+var _index3 = require("./utils/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -532,6 +530,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
+      if (typeof _this.props.inputRef === 'function') {
+        _this.props.inputRef(input);
+      } else if (_this.props.inputRef) {
+        _this.props.inputRef.current = input;
+      }
+
       if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
         _this.props.controlRef(input);
       }
@@ -660,7 +664,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       return !_this.state.inputValue;
     });
 
-    _this.options = (0, _index4.normalizeOptions)(props.options);
+    _this.options = (0, _index3.normalizeOptions)(props.options);
     return _this;
   }
 
@@ -778,7 +782,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       return value.map(function (value) {
-        return (0, _index4.expandValue)(value, _this2.props);
+        return (0, _index3.expandValue)(value, _this2.props);
       });
     }
   }, {
@@ -796,24 +800,29 @@ var Select = /*#__PURE__*/function (_React$Component) {
     key: "renderLoading",
     value: function renderLoading() {
       if (!this.props.isLoading) return;
-      var sharedProps = this.getSharedProps();
       var _this$props$overrides = this.props.overrides,
           overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
 
-      var _getOverrides = (0, _overrides.getOverrides)(overrides.LoadingIndicator, _index3.Spinner),
+      var _getOverrides = (0, _overrides.getOverrides)(overrides.LoadingIndicator, _styledComponents.StyledLoadingIndicator),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           LoadingIndicator = _getOverrides2[0],
           loadingIndicatorProps = _getOverrides2[1];
 
       return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
-        size: 16,
-        overrides: {
-          Svg: {
-            style: _styledComponents.getLoadingIconStyles
-          }
-        },
-        $silenceV11DeprecationWarning: true
-      }, sharedProps, loadingIndicatorProps));
+        role: "status"
+      }, loadingIndicatorProps), /*#__PURE__*/React.createElement("span", {
+        style: {
+          position: 'absolute',
+          width: '1px',
+          height: '1px',
+          padding: 0,
+          margin: '-1px',
+          overflow: 'hidden',
+          clip: 'rect(0,0,0,0)',
+          whiteSpace: 'nowrap',
+          border: 0
+        }
+      }, "Loading"));
     }
   }, {
     key: "renderValue",
@@ -1102,7 +1111,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this6 = this;
 
-      this.options = (0, _index4.normalizeOptions)(this.props.options);
+      this.options = (0, _index3.normalizeOptions)(this.props.options);
       var _this$props2 = this.props,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,

package/select/select-component.js.flow

@@ -15,7 +15,6 @@ import SearchIconComponent from '../icon/search.js';
 import { LocaleContext } from '../locale/index.js';
 import type { LocaleT } from '../locale/types.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
-import { Spinner } from '../spinner/index.js';
 import { UIDConsumer } from 'react-uid';
 
 import AutosizeInput from './autosize-input.js';
@@ -31,8 +30,8 @@ import {
   StyledIconsContainer,
   StyledSelectArrow,
   StyledClearIcon,
-  getLoadingIconStyles,
   StyledSearchIconContainer,
+  StyledLoadingIndicator,
 } from './styled-components.js';
 import type { PropsT, SelectStateT, ValueT, OptionT, ChangeActionT, ReactRefT } from './types.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
@@ -498,11 +497,16 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
   };
 
-  // This method is to preserve backwards compatibility for users using controlRef to directly
-  // access the input element. This capability is not documented, and may be removed in the future.
   //flowlint-next-line unclear-type:off
   handleInputRef = (input: React.ElementRef<any>) => {
     this.input = input;
+
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(input);
+    } else if (this.props.inputRef) {
+      this.props.inputRef.current = input;
+    }
+
     if (this.props.controlRef && typeof this.props.controlRef === 'function') {
       this.props.controlRef(input);
     }
@@ -616,20 +620,33 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
   renderLoading() {
     if (!this.props.isLoading) return;
-    const sharedProps = this.getSharedProps();
     const { overrides = {} } = this.props;
     const [LoadingIndicator, loadingIndicatorProps] = getOverrides(
       overrides.LoadingIndicator,
-      Spinner
+      StyledLoadingIndicator
     );
+
     return (
-      <LoadingIndicator
-        size={16}
-        overrides={{ Svg: { style: getLoadingIconStyles } }}
-        $silenceV11DeprecationWarning
-        {...sharedProps}
-        {...loadingIndicatorProps}
-      />
+      <LoadingIndicator role="status" {...loadingIndicatorProps}>
+        {/* Offscreen content could be defined as styled-component and
+          overridable, but I can't think of a good reason for doing so.
+          LoadingIndicator children can be overriden if required. */}
+        <span
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: 0,
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0,0,0,0)',
+            whiteSpace: 'nowrap',
+            border: 0,
+          }}
+        >
+          Loading
+        </span>
+      </LoadingIndicator>
     );
   }
 

package/select/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchIconContainer = exports.getLoadingIconStyles = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = void 0;
+exports.StyledSearchIconContainer = exports.StyledLoadingIndicator = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -11,6 +11,8 @@ var _constants = require("./constants.js");
 
 var _index2 = require("../menu/index.js");
 
+var _index3 = require("../spinner/index.js");
+
 var _util = require("../styles/util.js");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -390,18 +392,22 @@ var StyledClearIcon = (0, _index.styled)('svg', function (props) {
 });
 exports.StyledClearIcon = StyledClearIcon;
 StyledClearIcon.displayName = "StyledClearIcon";
-
-var getLoadingIconStyles = function getLoadingIconStyles(props) {
-  var $theme = props.$theme;
-  var colors = $theme.colors;
-  return _objectSpread(_objectSpread({}, getSvgStyles({
-    $theme: $theme
-  })), {}, {
-    color: colors.contentPrimary
-  });
-};
-
-exports.getLoadingIconStyles = getLoadingIconStyles;
+var StyledLoadingIndicator = (0, _index.withStyle)(_index3.Spinner, function (_ref5) {
+  var $theme = _ref5.$theme;
+  return {
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px'
+  };
+});
+exports.StyledLoadingIndicator = StyledLoadingIndicator;
+StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
 var StyledSearchIconContainer = (0, _index.styled)('div', function (props) {
   var _objectSpread4;
 

package/select/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import { styled } from '../styles/index.js';
+import { styled, withStyle } from '../styles/index.js';
 import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
+import { Spinner } from '../spinner/index.js';
 
 import type { SharedStylePropsArgT } from './types.js';
 import { ellipsisText } from '../styles/util.js';
-import type { ThemeT } from '../styles/types.js';
 
 function getFont(size = SIZE.default, typography) {
   return {
@@ -424,14 +424,19 @@ export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', (props) => {
   };
 });
 
-export const getLoadingIconStyles = (props: { $theme: ThemeT }) => {
-  const { $theme } = props;
-  const { colors } = $theme;
+export const StyledLoadingIndicator = withStyle<typeof Spinner, {}>(Spinner, ({ $theme }) => {
   return {
-    ...getSvgStyles({ $theme }),
-    color: colors.contentPrimary,
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px',
   };
-};
+});
 
 export const StyledSearchIconContainer = styled<SharedStylePropsArgT>('div', (props) => {
   const { $disabled, $theme } = props;

package/select/types.js.flow

@@ -138,6 +138,7 @@ export type PropsT = {
   id?: string,
   /** Defines if the comparison for a new creatable value should be case-insensitive. */
   ignoreCase?: boolean,
+  inputRef?: ReactRefT<HTMLInputElement>,
   /** An imperative handle exposing internal methods. */
   controlRef?: ControlRefT,
   /** Defines if the select is in a loading (async) state. */

package/select/utils/default-filter-options.js

@@ -50,7 +50,7 @@ var filterOptions = function filterOptions(options, filterValue, excludeOptions,
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  var re = new RegExp("".concat(props.matchPos === 'start' ? '$' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  var re = new RegExp("".concat(props.matchPos === 'start' ? '^' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(function (option) {
     if (excludeValues.has(option[props.valueKey])) return false;

package/select/utils/default-filter-options.js.flow

@@ -58,7 +58,7 @@ const filterOptions = (
   }, new Set());
 
   const re = new RegExp(
-    `${props.matchPos === 'start' ? '$' : ''}${escapeRegExp(filterValue)}`,
+    `${props.matchPos === 'start' ? '^' : ''}${escapeRegExp(filterValue)}`,
     props.ignoreCase ? 'i' : ''
   );
 

package/snackbar/snackbar-context.js

@@ -155,7 +155,7 @@ function SnackbarProvider(_ref) {
     setTimeout(function () {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/snackbar/snackbar-context.js.flow

@@ -93,7 +93,7 @@ export default function SnackbarProvider({
     setTimeout(() => {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/spinner/index.d.ts

@@ -1,5 +1,5 @@
-import {StyletronComponent} from 'styletron-react';
-import {Sizing} from '../theme.ts';
+import { StyletronComponent } from 'styletron-react';
+import { Sizing } from '../theme.ts';
 
 export enum SIZE {
   small = 'small',
@@ -8,6 +8,7 @@ export enum SIZE {
 }
 
 export interface SpinnerProps {
+  [key: string]: any;
   $color?: string;
   $borderWidth?: number | string | SIZE | Sizing;
   $size?: number | string | SIZE | Sizing;

package/tag/types.js.flow

@@ -70,7 +70,7 @@ export type SharedPropsArgT = {
   $isHovered?: boolean,
   $kind?: string,
   $variant?: string,
-  $isFocusVisible: boolean,
+  $isFocusVisible?: boolean,
   $size?: string,
 };