@pingux/astro 2.150.0 → 2.151.0-alpha.4

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -139,8 +139,20 @@ declare const buttons: {
         backgroundColor: string;
         borderColor: string;
         color: string;
+        '&.is-focused': {
+            outlineColor: string;
+            backgroundColor: string;
+            outline: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            color: string;
+        };
         '&.is-hovered': {
             boxShadow: string;
+            backgroundColor: string;
+            color: string;
         };
         alignItems: string;
         justifyContent: string;
@@ -164,11 +176,6 @@ declare const buttons: {
         '&.is-disabled': {
             opacity: number;
         };
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
         transition: string;
     };
     inverse: {
@@ -1184,6 +1191,47 @@ declare const buttons: {
                 outlineOffset: string;
             };
         };
+        passwordVisibilityIcon: {
+            right: number;
+            padding: string;
+            border: string;
+            '&:hover, &.is-pressed': {
+                background: string;
+                boxShadow: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+            };
+            position: string;
+            top: string;
+            transform: string;
+            height: string;
+            width: string;
+            justifyContent: string;
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            p: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            cursor: string;
+            boxShadow: string;
+        };
     };
     modalCloseButton: {
         position: string;
@@ -1283,5 +1331,58 @@ declare const buttons: {
             outline: string;
         };
     };
+    ButtonInputGroupContentRight: {
+        right: number;
+        padding: string;
+        borderRadius: string;
+        borderWidth: string;
+        borderLeftWidth: string;
+        borderRightWidth: string;
+        borderLeftColor: string;
+        position: string;
+        top: string;
+        transform: string;
+        height: string;
+        width: string;
+        justifyContent: string;
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+        '&.is-focused': {
+            outlineColor: string;
+            backgroundColor: string;
+            outline: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            color: string;
+        };
+        alignItems: string;
+        flexShrink: number;
+        minWidth: string;
+        cursor: string;
+        display: string;
+        maxWidth: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        lineHeight: number;
+        border: string;
+        px: string;
+        py: string;
+        maxHeight: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        transition: string;
+    };
 };
 export default buttons;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -18,6 +18,7 @@ var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _codeView = require("../codeView/codeView");
 var _colors = _interopRequireDefault(require("../colors/colors"));
 var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
+var _box = require("./box");
 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) { (0, _defineProperty2["default"])(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; }
 var primaryBlue = _colors["default"].primary,
@@ -117,8 +118,19 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
   borderColor: 'border.base',
-  color: 'text.secondary',
-  '&.is-hovered': _objectSpread({}, boxShadowNone)
+  color: 'font.base',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineColor: 'gray-700',
+    backgroundColor: 'background.secondary'
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'background.secondary',
+    color: 'font.base'
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: 'background.secondary',
+    color: 'font.base'
+  }, boxShadowNone)
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
@@ -508,7 +520,21 @@ var iconButtons = {
       }
     }
   }),
-  hintButton: _objectSpread({}, hintButton)
+  hintButton: _objectSpread({}, hintButton),
+  passwordVisibilityIcon: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), _box.commonContentProps), {}, {
+    right: 0,
+    padding: '12px 20px',
+    border: '0px solid !important',
+    '&:hover, &.is-pressed': {
+      background: 'transparent',
+      boxShadow: 'none'
+    },
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineOffset: '2px',
+      outlineColor: 'gray-700'
+    }
+  })
 };
 var listBoxLink = {
   color: 'active',
@@ -537,6 +563,15 @@ var listBoxLink = {
     }
   })
 };
+var ButtonInputGroupContentRight = _objectSpread(_objectSpread(_objectSpread({}, tertiary), _box.commonContentProps), {}, {
+  right: 0,
+  padding: '12px 20px',
+  borderRadius: '0px 4px 4px 0px !important',
+  borderWidth: '0px !important',
+  borderLeftWidth: '1px !important',
+  borderRightWidth: '1px !important',
+  borderLeftColor: 'gray-500'
+});
 var buttons = {
   neutral: neutral,
   primary: primary,
@@ -560,7 +595,8 @@ var buttons = {
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
-  paginationMenu: paginationMenu
+  paginationMenu: paginationMenu,
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight
 };
 var _default = buttons;
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -201,4 +201,25 @@ input.promptInputAttachmentWrapper = {
   overflowY: 'hidden',
   whiteSpace: 'nowrap',
   px: '.75rem'
+};
+input.dropDownContentRight = {
+  background: 'inherit',
+  '& button': {
+    borderRadius: '0px 4px 4px 0px !important',
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineOffset: '2px',
+      outlineColor: 'gray-700'
+    }
+  }
+};
+input.dropDownContentLeft = {
+  '& button': {
+    borderRadius: '4px 0px 0px 4px !important',
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineOffset: '2px',
+      outlineColor: 'gray-700'
+    }
+  }
 };

package/lib/cjs/styles/themes/next-gen/variants/listview.d.ts

@@ -92,14 +92,6 @@ export declare const listViewItem: {
             border: string;
         };
     };
-    editIcon: {
-        width: string;
-        height: string;
-    };
-    menuIcon: {
-        width: string;
-        height: string;
-    };
 };
 export declare const listView: {
     container: {

package/lib/cjs/styles/themes/next-gen/variants/listview.js

@@ -100,14 +100,6 @@ var listViewItem = {
     '&.has-separator.is-last-row': {
       border: 'none'
     }
-  },
-  editIcon: {
-    width: '1.5rem !important',
-    height: '1.5rem !important'
-  },
-  menuIcon: {
-    width: '1.5rem !important',
-    height: '1.5rem !important'
   }
 };
 exports.listViewItem = listViewItem;

package/lib/cjs/styles/themes/next-gen/variants/panelHeader.d.ts

@@ -2,12 +2,14 @@ declare const _default: {
     container: {
         bg: string;
         border: string;
-        minHeight: number;
-        maxHeight: number;
+        pt: string;
+        px: string;
+        pb: string;
     };
     controls: {
+        gap: string;
         alignSelf: string;
-        pt: string;
+        mr: string;
     };
     wrapper: {
         mr: string;

package/lib/cjs/styles/themes/next-gen/variants/panelHeader.js

@@ -8,12 +8,14 @@ exports["default"] = void 0;
 var container = {
   bg: 'backgroundBase',
   border: 'none',
-  minHeight: 72,
-  maxHeight: 72
+  pt: 'lg',
+  px: 'lg',
+  pb: 'md'
 };
 var controls = {
+  gap: '12px',
   alignSelf: 'start',
-  pt: 'xs'
+  mr: '0'
 };
 var wrapper = {
   mr: 'md'

package/lib/cjs/styles/themes/next-gen/variants/switch.d.ts

@@ -14,7 +14,7 @@ export declare const switchable: {
     thumbContainer: {
         bg: string;
         border: string;
-        maxWidth: number;
+        width: string;
         height: number;
         py: string;
         px: string;

package/lib/cjs/styles/themes/next-gen/variants/switch.js

@@ -9,7 +9,7 @@ var switchable = {
   container: {
     minWidth: '32px',
     color: 'neutral.80',
-    bg: 'backgorund.base',
+    bg: 'background.base',
     border: '1px solid',
     borderColor: 'neutral.80',
     borderRadius: 9999,
@@ -21,7 +21,7 @@ var switchable = {
   thumbContainer: {
     bg: 'transparent',
     border: 'none',
-    maxWidth: 24,
+    width: '32px',
     height: 16,
     py: '3px',
     px: '3px',

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -9,9 +9,10 @@ export declare const text: {
         textOverflow: string;
         overflow: string;
         whiteSpace: string;
+        color: string;
+        lineHeight: string;
         fontSize: string;
         fontWeight: number;
-        color: string;
         fontFamily: string;
     };
     messagesText: {
@@ -24,6 +25,11 @@ export declare const text: {
             };
         };
     };
+    panelHeaderSubtext: {
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+    };
     H1: {
         fontSize: string;
         fontWeight: number;

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -183,7 +183,9 @@ var text = _objectSpread(_objectSpread({
   panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    color: 'font.base',
+    lineHeight: 'xs'
   }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
@@ -194,6 +196,11 @@ var text = _objectSpread(_objectSpread({
         color: 'gray-700'
       }
     }
+  },
+  panelHeaderSubtext: {
+    fontSize: 'md',
+    lineHeight: 'body',
+    color: 'font.light'
   }
 });
 exports.text = text;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -168,6 +168,44 @@ declare const _default: {
                 boxShadow: string;
             };
         };
+        inputDropDownContentLeft: {
+            left: number;
+            position: string;
+            top: string;
+            transform: string;
+            height: string;
+            width: string;
+            justifyContent: string;
+        };
+        inputGroupContentLeft: {
+            left: number;
+            borderRight: string;
+            position: string;
+            top: string;
+            transform: string;
+            height: string;
+            width: string;
+            justifyContent: string;
+        };
+        inputDropDownContentRight: {
+            right: number;
+            position: string;
+            top: string;
+            transform: string;
+            height: string;
+            width: string;
+            justifyContent: string;
+        };
+        inputGroupContentRight: {
+            right: number;
+            borderLeft: string;
+            position: string;
+            top: string;
+            transform: string;
+            height: string;
+            width: string;
+            justifyContent: string;
+        };
     };
     buttonBar: {
         container: {
@@ -620,14 +658,6 @@ declare const _default: {
                 border: string;
             };
         };
-        editIcon: {
-            width: string;
-            height: string;
-        };
-        menuIcon: {
-            width: string;
-            height: string;
-        };
     };
     lisViewItemChart: {
         title: {
@@ -971,12 +1001,14 @@ declare const _default: {
         container: {
             bg: string;
             border: string;
-            minHeight: number;
-            maxHeight: number;
+            pt: string;
+            px: string;
+            pb: string;
         };
         controls: {
+            gap: string;
             alignSelf: string;
-            pt: string;
+            mr: string;
         };
         wrapper: {
             mr: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -19,9 +19,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
-var _colors = _interopRequireDefault(require("../colors/colors"));
 var _accordion = _interopRequireDefault(require("./accordion"));
 var _avatar = require("./avatar");
+var _box = require("./box");
 var _button = _interopRequireWildcard(require("./button"));
 var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
@@ -394,21 +394,7 @@ var _default = {
   attachment: _Attachment["default"],
   avatar: _avatar.avatar,
   breadcrumb: breadcrumb,
-  box: {
-    indeterminateCheckboxIcon: {
-      height: '19.25px',
-      width: '19.25px',
-      '&.is-disabled': {
-        '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
-          fill: 'gray-500',
-          stroke: 'gray-500'
-        }
-      },
-      '&.is-focused': {
-        boxShadow: "inset 0px 0px 0px 1px ".concat(_colors["default"].focus)
-      }
-    }
-  },
+  box: _box.box,
   buttonBar: buttonBar,
   callout: _callout["default"],
   codeView: _codeView["default"],

package/lib/cjs/types/iconButtonToggle.d.ts

@@ -17,4 +17,6 @@ export interface IconButtonToggleProps extends TestingAttributes {
     onToggle?: () => void;
     /** Content will be displayed in a tooltip on hover or focus. */
     title?: string;
+    /** The styling variation of the element. */
+    variant?: string;
 }

package/lib/components/Avatar/Avatar.js

@@ -42,7 +42,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
       sx: _objectSpread({
         size: size,
         width: sizes.avatar[size],
-        height: sizes.avatar[size]
+        height: sizes.avatar[size],
+        borderRadius: isSquare ? '0px' : '100%'
       }, sx)
     }, others));
   }

package/lib/components/Box/Box.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _styled from "@emotion/styled/base";
-var _excluded = ["as", "flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx"];
+var _excluded = ["as", "flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx", "variant"];
 import _Number$isNaN from "@babel/runtime-corejs3/core-js-stable/number/is-nan";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -25,7 +25,7 @@ var ExtendedBox = /*#__PURE__*/_styled(ThemeUIBox, process.env.NODE_ENV === "pro
 } : {
   target: "ejf9h0h0",
   label: "ExtendedBox"
-})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNvQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBCb3ggYXMgVGhlbWVVSUJveCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBCb3hQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkoXG4gIGxheW91dCxcbiAgZmxleGJveCxcbiAgdHlwb2dyYXBoeSxcbik7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEJveFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgYXMgPSAnZGl2JyxcbiAgICBmbGV4RGlyZWN0aW9uLFxuICAgIGdhcCxcbiAgICBpc1JvdyA9IGZhbHNlLFxuICAgIGlzRGlzYWJsZWQgPSBmYWxzZSxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgZmQgPSBmbGV4RGlyZWN0aW9uIHx8IGlzUm93ID8gJ3JvdycgOiAnY29sdW1uJztcbiAgY29uc3QgY3VzdG9tID0geyAuLi5zeCB9O1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHsgaXNEaXNhYmxlZCB9KTtcbiAgdXNlUHJvcFdhcm5pbmcocHJvcHMsICdkaXNhYmxlZCcsICdpc0Rpc2FibGVkJyk7XG5cbiAgaWYgKGdhcCkge1xuICAgIGN1c3RvbVsnJiA+ICogKyAqOm5vdCg6Zmlyc3Qtb2YtdHlwZTpub3Qoc3R5bGUpOm5vdCg6Zmlyc3Qtb2YtdHlwZSB+ICopKSddID0ge1xuICAgICAgW2ZkID09PSAncm93JyA/ICdtYXJnaW5MZWZ0JyA6ICdtYXJnaW5Ub3AnXTogZ2FwLFxuICAgIH07XG4gIH1cblxuICBjb25zdCBjdXN0b21Gb250U2l6ZSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGNvbnN0IG51bWVyaWNhbEZvbnRTaXplID0gdG9OdW1iZXIoZm9udFNpemUpO1xuICAgIGlmIChOdW1iZXIuaXNOYU4obnVtZXJpY2FsRm9udFNpemUpKSB7XG4gICAgICByZXR1cm4gZm9udFNpemU7XG4gICAgfVxuICAgIHJldHVybiBudW1lcmljYWxGb250U2l6ZTtcbiAgfSwgW2ZvbnRTaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRCb3hcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17ZmR9XG4gICAgICB2YXJpYW50PVwiYm94LmJhc2VcIlxuICAgICAgZm9udFNpemU9e2N1c3RvbUZvbnRTaXplfVxuICAgICAgYXM9e2FzfVxuICAgICAgey4uLm90aGVyc31cbiAgICAgIHN4PXtjdXN0b219XG4gICAgLz5cbiAgKTtcbn0pO1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNvQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBCb3ggYXMgVGhlbWVVSUJveCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBCb3hQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkoXG4gIGxheW91dCxcbiAgZmxleGJveCxcbiAgdHlwb2dyYXBoeSxcbik7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEJveFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgYXMgPSAnZGl2JyxcbiAgICBmbGV4RGlyZWN0aW9uLFxuICAgIGdhcCxcbiAgICBpc1JvdyA9IGZhbHNlLFxuICAgIGlzRGlzYWJsZWQgPSBmYWxzZSxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsXG4gICAgdmFyaWFudCA9ICdib3guYmFzZScsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgZmQgPSBmbGV4RGlyZWN0aW9uIHx8IGlzUm93ID8gJ3JvdycgOiAnY29sdW1uJztcbiAgY29uc3QgY3VzdG9tID0geyAuLi5zeCB9O1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHsgaXNEaXNhYmxlZCB9KTtcbiAgdXNlUHJvcFdhcm5pbmcocHJvcHMsICdkaXNhYmxlZCcsICdpc0Rpc2FibGVkJyk7XG5cbiAgaWYgKGdhcCkge1xuICAgIGN1c3RvbVsnJiA+ICogKyAqOm5vdCg6Zmlyc3Qtb2YtdHlwZTpub3Qoc3R5bGUpOm5vdCg6Zmlyc3Qtb2YtdHlwZSB+ICopKSddID0ge1xuICAgICAgW2ZkID09PSAncm93JyA/ICdtYXJnaW5MZWZ0JyA6ICdtYXJnaW5Ub3AnXTogZ2FwLFxuICAgIH07XG4gIH1cblxuICBjb25zdCBjdXN0b21Gb250U2l6ZSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGNvbnN0IG51bWVyaWNhbEZvbnRTaXplID0gdG9OdW1iZXIoZm9udFNpemUpO1xuICAgIGlmIChOdW1iZXIuaXNOYU4obnVtZXJpY2FsRm9udFNpemUpKSB7XG4gICAgICByZXR1cm4gZm9udFNpemU7XG4gICAgfVxuICAgIHJldHVybiBudW1lcmljYWxGb250U2l6ZTtcbiAgfSwgW2ZvbnRTaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRCb3hcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17ZmR9XG4gICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgZm9udFNpemU9e2N1c3RvbUZvbnRTaXplfVxuICAgICAgYXM9e2FzfVxuICAgICAgey4uLm90aGVyc31cbiAgICAgIHN4PXtjdXN0b219XG4gICAgLz5cbiAgKTtcbn0pO1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
 var Box = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$as = props.as,
     as = _props$as === void 0 ? 'div' : _props$as,
@@ -38,6 +38,8 @@ var Box = /*#__PURE__*/forwardRef(function (props, ref) {
     className = props.className,
     fontSize = props.fontSize,
     sx = props.sx,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'box.base' : _props$variant,
     others = _objectWithoutProperties(props, _excluded);
   var fd = flexDirection || isRow ? 'row' : 'column';
   var custom = _objectSpread({}, sx);
@@ -61,7 +63,7 @@ var Box = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "box.base",
+    variant: variant,
     fontSize: customFontSize,
     as: as
   }, others, {

package/lib/components/IconButtonToggle/IconButtonToggle.js

@@ -11,7 +11,8 @@ var IconButtonToggle = /*#__PURE__*/forwardRef(function (props, ref) {
     iconProps = props.iconProps,
     isToggled = props.isToggled,
     onToggle = props.onToggle,
-    title = props.title;
+    title = props.title,
+    variant = props.variant;
   var conditionalRenderProps = {
     ComponentToRenderIfTrue: toggledIcon,
     ComponentToRenderIfFalse: defaultIcon,
@@ -24,7 +25,8 @@ var IconButtonToggle = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(IconButton, _extends({
     onPress: handleConditionChange,
     ref: ref,
-    title: title
+    title: title,
+    variant: variant
   }, buttonProps), ___EmotionJSX(Icon, _extends({
     icon: RenderedComponent
   }, iconProps)));

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -148,14 +148,6 @@ var expandableRow = {
 var expandIcon = {
   color: 'gray-900'
 };
-var editIcon = {
-  width: '25px !important',
-  height: '25px !important'
-};
-var menuIcon = {
-  width: '25px !important',
-  height: '25px !important'
-};
 export default {
   container: container,
   controls: controls,
@@ -171,7 +163,5 @@ export default {
   expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
   expandableRow: expandableRow,
-  expandIcon: expandIcon,
-  editIcon: editIcon,
-  menuIcon: menuIcon
+  expandIcon: expandIcon
 };

package/lib/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -17,7 +17,7 @@ var ListViewItemEditButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "sm"
   }, ___EmotionJSX(IconButton, props, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    variant: "listViewItem.editIcon"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = iconButtonPropTypes;

package/lib/components/ListViewItem/controls/ListViewItemMenu.js

@@ -26,7 +26,7 @@ var ListViewItemMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, iconButtonProps), ___EmotionJSX(Icon, {
     icon: listViewMenu,
-    variant: "listViewItem.menuIcon",
+    size: "md",
     title: {
       name: 'Menu Icon'
     }

package/lib/components/Modal/Modal.mdx

@@ -55,4 +55,8 @@ These keys provide additional functionality to the component.
 This component uses the following attributes to assist screen readers:
 - The button uses the **`aria-label`** attribute to provide an accessible name.
 - The **`aria-labelledby`** attribute is supplied with label ID.
-- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.
+- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.
+
+#### Note
+
+AutoFocus is not enabled by default. To ensure accessibility and expected keyboard navigation support set the `hasAutoFocus` prop to true.

package/lib/components/Modal/Modal.stories.js

@@ -84,7 +84,8 @@ export default {
     }
   },
   args: {
-    hasCloseButton: true
+    hasCloseButton: true,
+    hasAutoFocus: true
   }
 };
 export var Default = function Default(args) {
@@ -176,7 +177,8 @@ export var WithInputField = function WithInputField() {
     "aria-label": "Open modal"
   }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
     isOpen: state.isOpen,
-    onClose: state.close
+    onClose: state.close,
+    hasAutoFocus: true
   }, ___EmotionJSX(Box, {
     gap: "lg"
   }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur"), ___EmotionJSX(SelectField, {