@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/recipes/ApplicationSearchDropdown.stories.js

@@ -9,20 +9,17 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 React, { useMemo, useRef, useState } from 'react';
+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 SearchIcon from 'mdi-react/SearchIcon';
 import Email from 'mdi-react/EmailIcon';
 import Pin from 'mdi-react/PinIcon';
-import { useFilter } from '@react-aria/i18n';
-import { FocusScope, createFocusManager } from '@react-aria/focus';
-import { ListView, Item, IconButton, Text, PopoverContainer, Box, Icon, SearchField } from '../index';
+import SearchIcon from 'mdi-react/SearchIcon';
+import { Box, Icon, IconButton, Item, ListView, PopoverContainer, SearchField, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Application Search Dropdown'
@@ -117,71 +114,58 @@ var sx = {
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var focusManager = createFocusManager(popoverRef);
-
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: 'bottom left',
-    isOpen: true
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+      targetRef: buttonRef,
+      overlayRef: popoverRef,
+      placement: 'bottom left',
+      isOpen: true
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   useLayoutEffect(function () {
     requestAnimationFrame(function () {
       updatePosition();
     });
   }, [updatePosition]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     minWidth: '380px',
     maxHeight: '320px',
     // shows 4 options
     '& > div': {}
   });
-
   var _useFilter = useFilter({
-    sensitivity: 'base'
-  }),
-      startsWith = _startsWithInstanceProperty(_useFilter);
-
+      sensitivity: 'base'
+    }),
+    startsWith = _startsWithInstanceProperty(_useFilter);
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      filterValue = _useState4[0],
-      setFilterValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    filterValue = _useState4[0],
+    setFilterValue = _useState4[1];
   var filteredItems = useMemo(function () {
     return _filterInstanceProperty(items).call(items, function (item) {
       return startsWith(item.application, filterValue);
     });
   }, [items, filterValue]);
-
   var onKeyDown = function onKeyDown(e) {
     if (e.key === 'ArrowDown') {
       focusManager.focusNext();
     }
   };
-
   var InnerHtml = function InnerHtml(props) {
     var _useState5 = useState(false),
-        _useState6 = _slicedToArray(_useState5, 2),
-        isPinned = _useState6[0],
-        setIsPinned = _useState6[1];
-
+      _useState6 = _slicedToArray(_useState5, 2),
+      isPinned = _useState6[0],
+      setIsPinned = _useState6[1];
     var item = props.item;
-
     var onPinPress = function onPinPress() {
       setIsPinned(!isPinned);
     };
-
     return ___EmotionJSX(Box, {
       isRow: true
     }, ___EmotionJSX(Icon, {
@@ -219,7 +203,6 @@ export var Default = function Default() {
       size: "sm"
     }))));
   };
-
   return ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(FocusScope, null, ___EmotionJSX(SearchField, {

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import CreateIcon from 'mdi-react/CreateIcon';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import CreateIcon from 'mdi-react/CreateIcon';
 import { v4 as uuid } from 'uuid';
-import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
+import { Badge, Box, HelpHint, Icon, IconButton, Separator, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Attribute Mapping Read Only Field'
@@ -71,13 +71,12 @@ var sx = {
   }
 };
 var helperTextId = uuid();
-
 var Row = function Row(props) {
-  var withChip = props.withChip,
-      withTooltip = props.withTooltip,
-      withError = props.withError,
-      leftValue = props.leftValue,
-      rightValue = props.rightValue;
+  var withBadge = props.withBadge,
+    withTooltip = props.withTooltip,
+    withError = props.withError,
+    leftValue = props.leftValue,
+    rightValue = props.rightValue;
   return ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.fieldRowWrapper
@@ -116,7 +115,7 @@ var Row = function Row(props) {
         width: '165px'
       }
     }
-  }), withChip && ___EmotionJSX(Chip, {
+  }), withBadge && ___EmotionJSX(Badge, {
     label: "Required",
     sx: sx.chip
   }), withTooltip && ___EmotionJSX(Box, {
@@ -127,7 +126,6 @@ var Row = function Row(props) {
     }
   }, "Population set to default")));
 };
-
 var Title = function Title() {
   return ___EmotionJSX(Box, {
     isRow: true,
@@ -143,7 +141,6 @@ var Title = function Title() {
     size: "sm"
   }))));
 };
-
 export var Default = function Default() {
   return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Box, {
     sx: sx.defaultFieldsWrapperBox
@@ -161,7 +158,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
-    withChip: true,
+    withBadge: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), ___EmotionJSX(Row, {
@@ -222,7 +219,7 @@ export var WithError = function WithError() {
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
-    withChip: true,
+    withBadge: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), ___EmotionJSX(Row, {

package/lib/recipes/AttributesAndPingOneMapping.stories.js

@@ -3,11 +3,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState, useRef, useEffect, memo } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import AddIcon from 'mdi-react/AddIcon';
 import CogsIcon from 'mdi-react/CogsIcon';
 import DeleteIcon from 'mdi-react/DeleteIcon';
-import AddIcon from 'mdi-react/AddIcon';
-import { ScrollBox, ComboBoxField, IconButton, Text, Box, Item, Icon, TextField, Separator, Button } from '../index';
+import { Box, Button, ComboBoxField, Icon, IconButton, Item, ScrollBox, Separator, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'Aardvark',
@@ -54,28 +54,25 @@ var sx = {
 };
 var Row = /*#__PURE__*/memo(function (props) {
   var isDisabled = props.isDisabled,
-      isNewRow = props.isNewRow,
-      index = props.index,
-      textValue = props.textValue,
-      inputValue = props.inputValue,
-      updateRow = props.updateRow,
-      removeRow = props.removeRow,
-      areRowsValid = props.areRowsValid,
-      isSubmitted = props.isSubmitted,
-      submitFields = props.submitFields;
+    isNewRow = props.isNewRow,
+    index = props.index,
+    textValue = props.textValue,
+    inputValue = props.inputValue,
+    updateRow = props.updateRow,
+    removeRow = props.removeRow,
+    areRowsValid = props.areRowsValid,
+    isSubmitted = props.isSubmitted,
+    submitFields = props.submitFields;
   var rowRef = useRef();
   var textFieldRef = useRef();
-
   var setTextValue = function setTextValue(value) {
     updateRow(index, value, 'textValue');
     submitFields(false);
   };
-
   var setInputValue = function setInputValue(value) {
     updateRow(index, value, 'inputValue');
     submitFields(false);
   };
-
   useEffect(function () {
     if (isNewRow) {
       textFieldRef.current.focus();
@@ -187,20 +184,16 @@ export var Default = function Default() {
     inputValue: '',
     name: 'second default'
   }];
-
   var _useState = useState(defaultRows),
-      _useState2 = _slicedToArray(_useState, 2),
-      rows = _useState2[0],
-      setRows = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isSubmitted = _useState4[0],
-      submitFields = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSubmitted = _useState4[0],
+    submitFields = _useState4[1];
   var addRow = function addRow() {
     var _context;
-
     var newRow = {
       isDisabled: false,
       isNewRow: true,
@@ -210,33 +203,25 @@ export var Default = function Default() {
     };
     setRows(_concatInstanceProperty(_context = []).call(_context, rows, [newRow]));
   };
-
   var removeRow = function removeRow(rowIndex) {
     var _context2;
-
     var newArray = _filterInstanceProperty(rows).call(rows, function (row, index) {
       return rowIndex !== index;
     });
-
     setRows(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
   };
-
   var updateRow = function updateRow(rowIndex, value, attribute) {
     var _context3;
-
     var newArray = _mapInstanceProperty(rows).call(rows, function (row, index) {
       if (rowIndex === index) {
         var thisRow = rows[index];
         thisRow[attribute] = value;
         return thisRow;
       }
-
       return row;
     });
-
     setRows(_concatInstanceProperty(_context3 = []).call(_context3, newArray));
   };
-
   return ___EmotionJSX(Box, {
     maxWidth: "740px"
   }, ___EmotionJSX(Box, {

package/lib/recipes/CollapsiblePanel.stories.js

@@ -7,27 +7,24 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
-import React, { useMemo, useState, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useFilter } from '@react-aria/i18n';
-import AccountIcon from 'mdi-react/AccountIcon';
 import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
+import AccountIcon from 'mdi-react/AccountIcon';
 import CheckIcon from 'mdi-react/CheckIcon';
-import Clear from 'mdi-react/CloseIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import Clear from 'mdi-react/CloseIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Breadcrumbs, Box, CheckboxField, Chip, Icon, IconButton, Item, ListView, CollapsiblePanel, CollapsiblePanelItem, SearchField, Text } from '..';
+import { Badge, Box, Breadcrumbs, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, SearchField, Text } from '..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Collapsible Panel with List'
+  title: 'Recipes/CollapsiblePanel with List'
 };
 var data = [{
   id: '1',
@@ -124,22 +121,18 @@ var sx = {
 };
 export var Default = function Default() {
   var _useState = useState(data),
-      _useState2 = _slicedToArray(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      searchValue = _useState4[0],
-      setSearchValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var checkBoxRef = useRef(null);
-
   var _useFilter = useFilter({
-    sensitivity: 'base'
-  }),
-      contains = _useFilter.contains;
-
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
   var filteredItems = useMemo(function () {
     return _filterInstanceProperty(items).call(items, function (item) {
       return contains(item.name, searchValue);
@@ -147,15 +140,14 @@ export var Default = function Default() {
   }, [items, searchValue]);
   var selectedItems = useMemo(function () {
     var _context;
-
     return _sortInstanceProperty(_context = _filterInstanceProperty(items).call(items, function (item) {
       return item.isDefaultSelected || item.isSelected;
-    }) // sort elements to display "default selected" at first place
+    })
+    // sort elements to display "default selected" at first place
     ).call(_context, function (a, b) {
       return Number(!!b.isDefaultSelected) - Number(!!a.isDefaultSelected);
     });
   }, [items]);
-
   var changeSelection = function changeSelection(key) {
     setItems(function (prevItems) {
       return _mapInstanceProperty(prevItems).call(prevItems, function (el) {
@@ -164,12 +156,10 @@ export var Default = function Default() {
             isSelected: !el.isSelected
           });
         }
-
         return el;
       });
     });
   };
-
   return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     sx: {
       minHeight: '60px'
@@ -202,7 +192,7 @@ export var Default = function Default() {
     "data-id": "home"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
     key: "editGroups",
-    variant: "neutralText",
+    variant: "link",
     "data-id": "editGroups"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
@@ -257,7 +247,7 @@ export var Default = function Default() {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), ___EmotionJSX(Chip, {
+    }, item.name), ___EmotionJSX(Badge, {
       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, Chip, IconButton, Icon, Item, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
+import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Conditional Filter'
 };
 var sx = {
-  customChipStyles: {
+  customBadgeStyles: {
     marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
@@ -70,9 +70,8 @@ export var Default = function Default() {
     field3: 'Banana',
     key: 'Miscellaneous2Field'
   }];
-
   var trashButton = ___EmotionJSX(IconButton, {
-    "aria-label": "deleteButton",
+    "aria-label": "badge.deleteButton",
     sx: {
       alignSelf: 'center'
     }
@@ -84,12 +83,10 @@ export var Default = function Default() {
       }
     }
   }));
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      editOverviewVisible = _React$useState2[0],
-      setEditOverviewVisible = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    editOverviewVisible = _React$useState2[0],
+    setEditOverviewVisible = _React$useState2[1];
   return ___EmotionJSX(Box, {
     maxWidth: "800px"
   }, !editOverviewVisible ? ___EmotionJSX(Box, {
@@ -112,10 +109,10 @@ export var Default = function Default() {
     size: "xs"
   }))), ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "ALL",
     bg: "decorative.7",
-    sx: sx.customChipStyles
+    sx: sx.customBadgeStyles
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
@@ -123,32 +120,32 @@ export var Default = function Default() {
     }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
       width: "100%"
     }, ___EmotionJSX(Box, {
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "ANY",
     bg: "decorative.4",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -160,7 +157,7 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -168,11 +165,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   })))), ___EmotionJSX(Box, {
@@ -180,15 +177,15 @@ export var Default = function Default() {
   }, ___EmotionJSX(Bracket, {
     isLast: true
   }), ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "NONE",
     bg: "accent.20",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -200,7 +197,7 @@ export var Default = function Default() {
       isLast: index === noneConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -208,11 +205,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   }))))) : ___EmotionJSX(Box, {
@@ -304,7 +301,7 @@ export var Default = function Default() {
   }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -394,7 +391,7 @@ export var Default = function Default() {
     isRow: true,
     mt: "md"
   }, ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,

package/lib/recipes/CopyToClipboard.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Box, Button, Text } from '../index';
 import useCopyToClipboard from '../hooks/useCopyToClipboard';
+import { Box, Button, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Copy to Clipboard'