@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/hooks/useField/useField.test.js

@@ -21,16 +21,10 @@ var defaultProps = {
   autoComplete: 'off',
   className: 'test',
   containerProps: {
-    id: 'test',
-    statusClasses: {
-      isContainer: true
-    }
+    id: 'test'
   },
   controlProps: {
-    id: 'test',
-    statusClasses: {
-      isControlInput: true
-    }
+    id: 'test'
   },
   defaultValue: 'test',
   hasAutoFocus: true,
@@ -41,11 +35,6 @@ var defaultProps = {
   isRequired: true,
   isSelected: true,
   label: 'test',
-  labelProps: {
-    statusClasses: {
-      isFieldLabel: true
-    }
-  },
   name: 'test',
   placeholder: 'test',
   role: 'test',
@@ -53,13 +42,7 @@ var defaultProps = {
     isTested: true
   },
   type: 'test',
-  value: 'test',
-  wrapperProps: {
-    id: 'test',
-    statusClasses: {
-      isControlWrapper: true
-    }
-  }
+  value: 'test'
 };
 test('default useField', function () {
   renderHook(function () {
@@ -76,32 +59,26 @@ test('should return props objects for field components', function () {
 
   var _result$current = result.current,
       fieldContainerProps = _result$current.fieldContainerProps,
-      fieldControlInputProps = _result$current.fieldControlInputProps,
-      fieldControlWrapperProps = _result$current.fieldControlWrapperProps,
+      fieldControlProps = _result$current.fieldControlProps,
       fieldLabelProps = _result$current.fieldLabelProps;
   expect(fieldContainerProps).toEqual({
-    className: 'field-container has-value is-tested is-container',
+    className: 'field-container has-value',
     id: defaultProps.containerProps.id,
     onBlur: expect.any(Function),
     onFocus: expect.any(Function),
     sx: expect.objectContaining({
       position: 'relative'
-    }),
-    statusClasses: {
-      isContainer: true
-    }
+    })
   });
-  expect(fieldControlInputProps).toEqual({
+  expect(fieldControlProps).toEqual({
     autoComplete: defaultProps.autoComplete,
-    autoCorrect: undefined,
     autoFocus: defaultProps.hasAutoFocus,
-    className: _concatInstanceProperty(_context = "".concat(defaultProps.className, " field-control-input is-disabled is-read-only is-")).call(_context, statuses.DEFAULT, " is-tested is-control-input"),
+    className: _concatInstanceProperty(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, statuses.DEFAULT, " is-tested"),
     defaultSelected: true,
     defaultValue: defaultProps.defaultValue,
     disabled: true,
     id: defaultProps.id,
     isFocused: false,
-    maxLength: undefined,
     readOnly: true,
     required: true,
     onBlur: expect.any(Function),
@@ -110,10 +87,6 @@ test('should return props objects for field components', function () {
     name: defaultProps.name,
     placeholder: defaultProps.placeholder,
     role: defaultProps.role,
-    spellCheck: undefined,
-    statusClasses: {
-      isControlInput: true
-    },
     type: defaultProps.type,
     value: defaultProps.value,
     'aria-label': undefined,
@@ -121,22 +94,10 @@ test('should return props objects for field components', function () {
   });
   expect(fieldLabelProps).toEqual({
     children: defaultProps.label,
-    className: _concatInstanceProperty(_context2 = "".concat(defaultProps.className, " field-label is-disabled is-read-only is-")).call(_context2, statuses.DEFAULT, " is-tested is-field-label"),
-    hintText: undefined,
+    className: _concatInstanceProperty(_context2 = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context2, statuses.DEFAULT, " is-tested"),
     id: expect.any(String),
     htmlFor: expect.any(String),
-    isRequired: true,
-    mode: undefined,
-    statusClasses: {
-      isFieldLabel: true
-    }
-  });
-  expect(fieldControlWrapperProps).toEqual({
-    className: "".concat(defaultProps.className, " field-control-wrapper is-disabled is-read-only is-default is-tested is-control-wrapper"),
-    id: expect.any(String),
-    statusClasses: {
-      isControlWrapper: true
-    }
+    isRequired: true
   });
 });
 test('should support autocomplete additionally', function () {
@@ -151,8 +112,8 @@ test('should support autocomplete additionally', function () {
   }),
       result = _renderHook2.result;
 
-  var fieldControlInputProps = result.current.fieldControlInputProps;
-  expect(fieldControlInputProps).toMatchObject({
+  var fieldControlProps = result.current.fieldControlProps;
+  expect(fieldControlProps).toMatchObject({
     autoComplete: 'new-password'
   });
 });
@@ -176,7 +137,7 @@ test('should return isFloatLabelActive class for container', function () {
   expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the value is invalid
 
   act(function () {
-    return result.current.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: undefined
       }
@@ -241,7 +202,7 @@ test('should return hasValue class for container when onChange updates internal
   expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value
 
   act(function () {
-    return result.current.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: 0
       }
@@ -251,7 +212,7 @@ test('should return hasValue class for container when onChange updates internal
   numCalls += 1; // undefined is not a valid value
 
   act(function () {
-    return result.current.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: undefined
       }
@@ -261,7 +222,7 @@ test('should return hasValue class for container when onChange updates internal
   numCalls += 1; // a non-empty string is a valid value
 
   act(function () {
-    return result.current.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: 'a'
       }

package/lib/hooks/useModalState/useModalState.js

@@ -1,4 +1,4 @@
-import { useOverlayTriggerState } from 'react-stately';
+import { useOverlayTriggerState } from '@react-stately/overlays';
 /**
  * Returns state-related data and functions for use with a Modal component.
  * @param {Object} [props] Properties provided to the state

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -1,4 +1,4 @@
-import { useOverlayTriggerState } from 'react-stately';
+import { useOverlayTriggerState } from '@react-stately/overlays';
 /**
  * Returns state-related data and functions for use with a Modal component.
  * @param {Object} [props] Properties provided to the state

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -11,8 +11,7 @@ test('default useOverlayPanelState', function () {
       open: expect.any(Function),
       close: expect.any(Function),
       toggle: expect.any(Function),
-      isOpen: expect.any(Boolean),
-      setOpen: expect.any(Function)
+      isOpen: expect.any(Boolean)
     },
     onClose: expect.any(Function)
   };

package/lib/hooks/useSelectField/useSelectField.js

@@ -16,9 +16,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import { FocusScope, DismissButton, useOverlayPosition, useSelect } from 'react-aria';
-import { useSelectState } from 'react-stately';
+import { FocusScope } from '@react-aria/focus';
+import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
+import { useSelect } from '@react-aria/select';
 import { useResizeObserver } from '@react-aria/utils';
+import { useSelectState } from '@react-stately/select';
 import { useColumnStyles, useDeprecationWarning, useField } from '..';
 import ListBox from '../../components/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
@@ -119,8 +121,7 @@ var useSelectField = function useSelectField(props, ref) {
     }, props.containerProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var _useOverlayPosition = useOverlayPosition({
@@ -213,8 +214,7 @@ var useSelectField = function useSelectField(props, ref) {
   return {
     columnStyleProps: columnStyleProps,
     fieldContainerProps: fieldContainerProps,
-    fieldControlInputProps: fieldControlInputProps,
-    fieldControlWrapperProps: fieldControlWrapperProps,
+    fieldControlProps: fieldControlProps,
     fieldLabelProps: fieldLabelProps,
     isLoadingInitial: isLoadingInitial,
     listBoxRef: listBoxRef,

package/lib/index.js

@@ -15,8 +15,7 @@ export { default as ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
-export { default as Badge } from './components/Badge';
-export * from './components/Badge';
+export { default as Badge } from './components/Chip/Badge';
 export { default as Box } from './components/Box';
 export * from './components/Box';
 export { default as Bracket } from './components/Bracket';
@@ -34,6 +33,8 @@ export { default as Checkbox } from './components/Checkbox';
 export * from './components/Checkbox';
 export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
+export { default as Chip } from './components/Chip';
+export * from './components/Chip';
 export { default as CodeView } from './components/CodeView';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
@@ -66,6 +67,8 @@ export { default as Link } from './components/Link';
 export * from './components/Link';
 export { default as LinkSelectField } from './components/LinkSelectField';
 export * from './components/LinkSelectField';
+export { default as List } from './components/List';
+export * from './components/List';
 export { default as ListItem } from './components/ListItem';
 export * from './components/ListItem';
 export { default as ListView } from './components/ListView';
@@ -154,8 +157,9 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 /* eslint-enable import/export */
 
-export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Item, Section, useOverlayTriggerState } from 'react-stately';
+export { Item, Section } from '@react-stately/collections';
+export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+export { useOverlayTriggerState } from '@react-stately/overlays';
 export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
-export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from 'react-stately';
+export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-stately/table';

package/lib/recipes/ApplicationSearchDropdown.stories.js

@@ -15,13 +15,13 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useRef, useMemo } from 'react';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { useLayoutEffect } from '@react-aria/utils';
+import SearchIcon from 'mdi-react/SearchIcon';
 import Email from 'mdi-react/EmailIcon';
 import Pin from 'mdi-react/PinIcon';
-import SearchIcon from 'mdi-react/SearchIcon';
-import { FocusScope, useOverlayPosition } from 'react-aria';
-import { createFocusManager } from '@react-aria/focus';
 import { useFilter } from '@react-aria/i18n';
-import { useLayoutEffect } from '@react-aria/utils';
+import { FocusScope, createFocusManager } from '@react-aria/focus';
 import { ListView, Item, IconButton, Text, PopoverContainer, Box, Icon, SearchField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import { v4 as uuid } from 'uuid';
-import { Box, Badge, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
+import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Attribute Mapping Read Only Field'
@@ -73,7 +73,7 @@ var sx = {
 var helperTextId = uuid();
 
 var Row = function Row(props) {
-  var withBadge = props.withBadge,
+  var withChip = props.withChip,
       withTooltip = props.withTooltip,
       withError = props.withError,
       leftValue = props.leftValue,
@@ -116,7 +116,7 @@ var Row = function Row(props) {
         width: '165px'
       }
     }
-  }), withBadge && ___EmotionJSX(Badge, {
+  }), withChip && ___EmotionJSX(Chip, {
     label: "Required",
     sx: sx.chip
   }), withTooltip && ___EmotionJSX(Box, {
@@ -161,7 +161,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
-    withBadge: true,
+    withChip: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), ___EmotionJSX(Row, {
@@ -222,7 +222,7 @@ export var WithError = function WithError() {
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
-    withBadge: true,
+    withChip: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), ___EmotionJSX(Row, {

package/lib/recipes/CollapsiblePanel.stories.js

@@ -24,10 +24,10 @@ import CheckIcon from 'mdi-react/CheckIcon';
 import Clear from 'mdi-react/CloseIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Breadcrumbs, Box, CheckboxField, Badge, Icon, IconButton, Item, ListView, CollapsiblePanel, CollapsiblePanelItem, SearchField, Text } from '..';
+import { Breadcrumbs, Box, CheckboxField, Chip, Icon, IconButton, Item, ListView, CollapsiblePanel, CollapsiblePanelItem, SearchField, Text } from '..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/CollapsiblePanel with List'
+  title: 'Recipes/Collapsible Panel with List'
 };
 var data = [{
   id: '1',
@@ -202,7 +202,7 @@ export var Default = function Default() {
     "data-id": "home"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
     key: "editGroups",
-    variant: "link",
+    variant: "neutralText",
     "data-id": "editGroups"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
@@ -257,7 +257,7 @@ export var Default = function Default() {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), ___EmotionJSX(Badge, {
+    }, item.name), ___EmotionJSX(Chip, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",

package/lib/recipes/ConditionalFilter.stories.js

@@ -3,13 +3,13 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import TrashIcon from 'mdi-react/TrashIcon';
-import { Box, Bracket, Button, Badge, IconButton, Icon, Item, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
+import { Box, Bracket, Button, Chip, IconButton, Icon, Item, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Conditional Filter'
 };
 var sx = {
-  customBadgeStyles: {
+  customChipStyles: {
     marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
@@ -72,7 +72,7 @@ export var Default = function Default() {
   }];
 
   var trashButton = ___EmotionJSX(IconButton, {
-    "aria-label": "badge.deleteButton",
+    "aria-label": "deleteButton",
     sx: {
       alignSelf: 'center'
     }
@@ -112,10 +112,10 @@ export var Default = function Default() {
     size: "xs"
   }))), ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Badge, {
+  }, ___EmotionJSX(Chip, {
     label: "ALL",
     bg: "decorative.7",
-    sx: sx.customBadgeStyles
+    sx: sx.customChipStyles
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
@@ -123,32 +123,32 @@ export var Default = function Default() {
     }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
       width: "100%"
     }, ___EmotionJSX(Box, {
-      variant: "forms.input.fieldControlWrapper",
+      variant: "forms.input.container",
       bg: "white",
       isRow: true,
       sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Badge, {
+    }, item.field1), ___EmotionJSX(Chip, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
-    variant: "forms.input.fieldControlWrapper",
+    variant: "forms.input.container",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Badge, {
+  }, ___EmotionJSX(Chip, {
     label: "ANY",
     bg: "decorative.4",
-    sx: sx.customBadgeStyles,
+    sx: sx.customChipStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -160,7 +160,7 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.fieldControlWrapper",
+      variant: "forms.input.container",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -168,11 +168,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Badge, {
+    }, item.field1), ___EmotionJSX(Chip, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   })))), ___EmotionJSX(Box, {
@@ -180,15 +180,15 @@ export var Default = function Default() {
   }, ___EmotionJSX(Bracket, {
     isLast: true
   }), ___EmotionJSX(Box, {
-    variant: "forms.input.fieldControlWrapper",
+    variant: "forms.input.container",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Badge, {
+  }, ___EmotionJSX(Chip, {
     label: "NONE",
     bg: "accent.20",
-    sx: sx.customBadgeStyles,
+    sx: sx.customChipStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -200,7 +200,7 @@ export var Default = function Default() {
       isLast: index === noneConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.fieldControlWrapper",
+      variant: "forms.input.container",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -208,11 +208,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Badge, {
+    }, item.field1), ___EmotionJSX(Chip, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   }))))) : ___EmotionJSX(Box, {
@@ -304,7 +304,7 @@ export var Default = function Default() {
   }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Box, {
-    variant: "forms.input.fieldControlWrapper",
+    variant: "forms.input.container",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -394,7 +394,7 @@ export var Default = function Default() {
     isRow: true,
     mt: "md"
   }, ___EmotionJSX(Box, {
-    variant: "forms.input.fieldControlWrapper",
+    variant: "forms.input.container",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,

package/lib/recipes/CountryPicker.stories.js

@@ -31,11 +31,11 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    maxWidth: '110px'
+    width: '110px'
   },
   inputWrapper: {
     width: '100%',
-    ml: '110px'
+    marginLeft: '110px'
   }
 };
 export var Default = function Default() {
@@ -111,7 +111,7 @@ export var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    containerProps: {
+    wrapperProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {

package/lib/recipes/DatePicker.stories.js

@@ -8,7 +8,6 @@ import moment from 'moment';
 import { Box, Icon, IconButton, TextField, useOverlayPosition, useOverlayTrigger, useOverlayTriggerState } from '../index';
 import statuses from '../utils/devUtils/constants/statuses';
 import PopoverContainer from '../components/PopoverContainer';
-import { text } from '../components/Text/Text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Date Picker',
@@ -27,50 +26,6 @@ var sx = {
     top: 8,
     width: 28,
     height: 28
-  },
-  container: {
-    maxWidth: 300,
-    '.react-calendar': {
-      width: 280,
-      '& .react-calendar__month-view__days__day': {
-        width: 40,
-        height: 40,
-        color: 'neutral.10',
-        fontSize: 'sm',
-        fontWeight: 1
-      },
-      '& .react-calendar__navigation__label__labelText': text.itemTitle,
-      '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
-        color: 'neutral.40'
-      },
-      '& .react-calendar__month-view__weekdays': {
-        borderBottom: '1px solid',
-        borderColor: 'neutral.80'
-      },
-      '& .react-calendar__month-view__weekdays__weekday abbr': {
-        textDecoration: 'none',
-        textTransform: 'capitalize'
-      },
-      '& .react-calendar__month-view__days__day--weekend': {
-        color: 'decorative.4'
-      },
-      '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
-        backgroundColor: 'active',
-        color: 'white'
-      },
-      '& .react-calendar__year-view__months__month': {
-        padding: '19px 0'
-      },
-      '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
-        '&:hover': {
-          backgroundColor: 'rgba(70, 96, 162, .1);',
-          color: 'neutral.10'
-        }
-      },
-      '& .react-calendar__navigation': {
-        marginBottom: 0
-      }
-    }
   }
 };
 export var Default = function Default() {
@@ -136,7 +91,10 @@ export var Default = function Default() {
     setError(false);
   }, []);
   return ___EmotionJSX(Box, {
-    sx: sx.container
+    sx: {
+      maxWidth: 300
+    },
+    variant: "boxes.dataPicker"
   }, ___EmotionJSX(TextField, {
     slots: {
       inContainer: ___EmotionJSX(IconButton, _extends({
@@ -162,7 +120,7 @@ export var Default = function Default() {
     hasNoArrow: true,
     isDismissable: true
   }), ___EmotionJSX(Box, {
-    sx: sx.container
+    variant: "boxes.datePicker"
   }, ___EmotionJSX(Calendar, {
     onChange: handleCalendarChange,
     value: date.toDate()

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -22,7 +22,7 @@ import React, { useState, useRef } from 'react';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { useOverlayPosition } from 'react-aria';
+import { useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect } from '@react-aria/utils';
 import { Button, Box, Icon, IconButton } from '../index';
 import PopoverContainer from '../components/PopoverContainer';