@pingux/astro 2.150.0 → 2.151.0-alpha.4

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -38,7 +38,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -87,14 +87,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = useState([]),
+  var _useState7 = useState(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    initialItems = _useState8[0],
-    setInitialItems = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    activeDescendant = _useState10[0],
-    setActiveDescendant = _useState10[1];
+    activeDescendant = _useState8[0],
+    setActiveDescendant = _useState8[1];
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
@@ -111,9 +107,6 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputValue: filterString
     }),
     isLoading = _useInputLoader.isLoading;
-  useEffect(function () {
-    setInitialItems(_Array$from(items));
-  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -192,10 +185,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    menuWidth = _useState12[0],
-    setMenuWidth = _useState12[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    menuWidth = _useState10[0],
+    setMenuWidth = _useState10[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -260,20 +253,20 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
   var handleBlur = function handleBlur(e) {
-    var _inputWrapperRef$curr, _listBoxRef$current;
+    var _inputWrapperRef$curr, _popoverRef$current;
     var relatedTarget = e.relatedTarget || document.activeElement;
-    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_popoverRef$current = popoverRef.current) !== null && _popoverRef$current !== void 0 && _popoverRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
       return;
     }
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState13 = useState('Select All'),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectionState = _useState14[0],
-    setSelectionState = _useState14[1];
+  var _useState11 = useState('Select All'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectionState = _useState12[0],
+    setSelectionState = _useState12[1];
   var arrayItems = _Array$from(items);
-  var itemCount = _reduceInstanceProperty(initialItems).call(initialItems, function (count, obj) {
+  var itemCount = _reduceInstanceProperty(arrayItems).call(arrayItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;
@@ -341,7 +334,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
+      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,
@@ -399,8 +392,8 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, mergeProps(containerProps, focusWithinProps), ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
-      var _popoverRef$current;
-      var blurIntoPopover = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.contains(e.relatedTarget);
+      var _popoverRef$current2;
+      var blurIntoPopover = (_popoverRef$current2 = popoverRef.current) === null || _popoverRef$current2 === void 0 ? void 0 : _popoverRef$current2.contains(e.relatedTarget);
       if (blurIntoPopover) {
         return;
       }

package/lib/components/PanelHeader/PanelHeader.js

@@ -35,7 +35,7 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     image = data.image,
     subtext = data.subtext,
     text = data.text,
-    avatarDefualtText = data.avatarDefualtText;
+    avatarDefaultText = data.avatarDefaultText;
   var _useGetTheme = useGetTheme(),
     themeState = _useGetTheme.themeState;
   var isOnyx = themeState.isOnyx;
@@ -51,10 +51,12 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }));
   var renderAvatar = ___EmotionJSX(Avatar, _extends({
+    color: "green",
     src: image === null || image === void 0 ? void 0 : image.src,
+    isSquare: !!(image !== null && image !== void 0 && image.src),
     size: "avatar.lg",
-    defaultText: avatarDefualtText,
-    mr: "md"
+    defaultText: avatarDefaultText,
+    mr: "lg"
   }, avatarProps));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
     variant: "panelHeader.iconWrapper"
@@ -88,7 +90,7 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     variant: text || subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, renderLeftContent(), ___EmotionJSX(Box, headerWrapperPropsSpread, text && ___EmotionJSX(Text, _extends({}, headerPropsSpread, {
+  }, renderLeftContent(), (text || subtext) && ___EmotionJSX(Box, headerWrapperPropsSpread, text && ___EmotionJSX(Text, _extends({}, headerPropsSpread, {
     variant: "panelHeaderText"
   }), text), subtext && ___EmotionJSX(Text, {
     variant: "panelHeaderSubtext"

package/lib/components/PanelHeader/PanelHeader.stories.js

@@ -28,7 +28,7 @@ export var Default = function Default(_ref) {
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }));
 };
@@ -45,7 +45,7 @@ export var WithSubtext = function WithSubtext(_ref2) {
       icon: AccountIcon,
       subtext: 'rad_developer@pingidentity.com',
       text: 'Fons Vernall',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }));
 };
@@ -62,7 +62,7 @@ export var WithControls = function WithControls(_ref3) {
       icon: AccountIcon,
       text: 'Fons Vernall',
       subtext: 'rad_developer@pingidentity.com',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }), ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
     key: "enable"
@@ -85,7 +85,7 @@ export var WithImage = function WithImage(args) {
         src: pingImg,
         alt: 'Ping Identity Logo',
         'aria-label': 'Ping Identity Logo',
-        avatarDefualtText: 'FV'
+        avatarDefaultText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -143,7 +143,7 @@ export var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
-      avatarDefualtText: 'FV',
+      avatarDefaultText: 'FV',
       icon: AccountIcon,
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
       subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'

package/lib/components/PanelHeader/PanelHeader.styles.js

@@ -38,7 +38,8 @@ var wrapper = {
   flex: '1 1 0px'
 };
 var rightOfData = {
-  alignSelf: 'center'
+  alignSelf: 'center',
+  mr: 'md'
 };
 var iconWrapper = {
   width: '25px',

package/lib/components/PanelHeader/stories/OnyxDarkPanelHeader.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxDarkTheme } from '../../..';
+import PanelHeaderComponent from './OnyxPanelHeaderComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Panel Header'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxDarkTheme
+  }, ___EmotionJSX(PanelHeaderComponent, null));
+};

package/lib/components/PanelHeader/stories/OnyxPanelHeader.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxTheme } from '../../..';
+import PanelHeaderComponent from './OnyxPanelHeaderComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Panel Header'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxTheme
+  }, ___EmotionJSX(PanelHeaderComponent, null));
+};

package/lib/components/PanelHeader/stories/OnyxPanelHeaderComponent.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
+import { Box, Breadcrumbs, Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../..';
+import { pingImg } from '../../../utils/devUtils/constants/images';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var PanelHeaderComponent = function PanelHeaderComponent() {
+  var breadcrumbs = ___EmotionJSX(Box, {
+    width: "100%"
+  }, ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    "aria-label": "Lorem Text",
+    href: "https://www.pingidentity.com",
+    key: "Item1Key"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Item, {
+    "aria-label": "Lorem Ut",
+    key: "Item2Key"
+  }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco, laboris nisi ut aliquip ex ea commodo consequat incididunt et dolore.")));
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      avatarDefaultText: 'FV'
+    }
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      subtext: 'rad_developer@pingidentity.com',
+      text: 'Fons Vernall',
+      avatarDefaultText: 'FV'
+    }
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefaultText: 'FV'
+    }
+  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null)), ___EmotionJSX(PanelHeader, {
+    data: {
+      image: {
+        src: pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo',
+        avatarDefaultText: 'FV'
+      },
+      text: 'Fons Vernall'
+    }
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon
+    },
+    slots: {
+      rightOfData: breadcrumbs
+    }
+  }, ___EmotionJSX(PanelHeaderCloseButton, null)), ___EmotionJSX(PanelHeader, {
+    data: {
+      avatarDefaultText: 'FV',
+      icon: AccountIcon,
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+      subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
+    }
+  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null)));
+};
+export default PanelHeaderComponent;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -251,5 +251,13 @@ export default {
       border: '1px solid border.separator',
       boxShadow: 'none'
     }
+  },
+  breadcrumb: {
+    link: {
+      color: 'blue-400',
+      '&.is-current': {
+        color: 'text.secondary'
+      }
+    }
   }
 };

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -19,5 +19,5 @@ export var astroBlacklistStory = {
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular']
 };
-export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
+export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/customProperties/customSizes.js

@@ -1,6 +1,6 @@
 var copyButtonSize = 'sm';
 var breadcrumbIconSize = 'sm';
-var breadcrumbIconMargin = 'sm';
+var breadcrumbIconMargin = 'md';
 var accordionItemMarginLeft = 'md';
 var pageHeaderTitleMargin = 'md';
 var defaultLoaderSize = 32;

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

@@ -37,6 +37,8 @@ var nextGenTheme = {
   fontWeights: fontWeights,
   lineHeights: {
     body: '1.6',
+    xs: '1.2',
+    sm: '1.4',
     md: '1.75'
   },
   text: newText,

package/lib/styles/themes/next-gen/stories/OnyxInputPatterns.chromatic.stories.js

@@ -0,0 +1,178 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import EyeOffOutlineIcon from '@pingux/mdi-react/EyeOffOutlineIcon';
+import EyeOutlineIcon from '@pingux/mdi-react/EyeOutlineIcon';
+import { Box, Button, IconButtonToggle, Item, SelectField, Text } from '../../../..';
+import TextField from '../../../../components/TextField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/Onyx Input Patterns',
+  component: TextField
+};
+var items = [{
+  name: 'Aardvark',
+  id: '1'
+}, {
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  name: 'Snake',
+  id: '3'
+}];
+export var Default = function Default() {
+  return ___EmotionJSX(TextField, {
+    label: "Label",
+    helperText: "Help text for this field."
+  });
+};
+export var PasswordInput = function PasswordInput() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var handleVisible = function handleVisible() {
+    setIsVisible(!isVisible);
+  };
+  return ___EmotionJSX(TextField, {
+    label: "Password",
+    type: "password",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '60px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(IconButtonToggle, {
+        toggledIcon: EyeOutlineIcon,
+        defaultIcon: EyeOffOutlineIcon,
+        onToggle: handleVisible,
+        isToggled: isVisible,
+        variant: "passwordVisibilityIcon",
+        buttonProps: {
+          'aria-label': 'eye icon'
+        },
+        iconProps: {
+          size: 'xs'
+        }
+      })
+    }
+  });
+};
+export var InputGroup = function InputGroup() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Label",
+    helperText: "Help text for this field.",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingLeft: '70px'
+        }
+      }
+    },
+    slots: {
+      beforeInput: ___EmotionJSX(Box, {
+        variant: "box.inputGroupContentLeft",
+        p: "12px 20px"
+      }, ___EmotionJSX(Text, null, "@"))
+    }
+  }), ___EmotionJSX(TextField, {
+    label: "Label",
+    mt: "xl",
+    helperText: "Help text for this field.",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '160px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(Box, {
+        variant: "box.inputGroupContentRight",
+        p: "12px 20px"
+      }, ___EmotionJSX(Text, null, "@example.com"))
+    }
+  }));
+};
+export var ButtonInputGroup = function ButtonInputGroup() {
+  return ___EmotionJSX(TextField, {
+    label: "Label",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '100px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(Button, {
+        variant: "ButtonInputGroupContentRight"
+      }, "Button")
+    }
+  });
+};
+export var DropdownInputGroup = function DropdownInputGroup() {
+  var _useState3 = useState(items[0].name),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var handleSelectionChange = function handleSelectionChange(key) {
+    return setSelectedKey(key);
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Label",
+    containerProps: {
+      sx: {
+        '& > .field-control-wrapper > input': {
+          paddingRight: '160px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(Box, {
+        variant: "box.inputDropDownContentRight",
+        width: "150px",
+        mt: "-2px"
+      }, ___EmotionJSX(SelectField, {
+        items: items,
+        selectedKey: selectedKey,
+        onSelectionChange: handleSelectionChange,
+        variant: "forms.input.dropDownContentRight"
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          "data-id": item.name
+        }, item.name);
+      }))
+    }
+  }), ___EmotionJSX(TextField, {
+    label: "Label",
+    mt: "xl",
+    containerProps: {
+      sx: {
+        '& > .field-control-wrapper > input': {
+          paddingLeft: '160px'
+        }
+      }
+    },
+    slots: {
+      beforeInput: ___EmotionJSX(Box, {
+        variant: "box.inputDropDownContentLeft",
+        width: "150px",
+        mt: "-2px"
+      }, ___EmotionJSX(SelectField, {
+        items: items,
+        selectedKey: selectedKey,
+        onSelectionChange: handleSelectionChange,
+        variant: "forms.input.dropDownContentLeft"
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          "data-id": item.name
+        }, item.name);
+      }))
+    }
+  }));
+};

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

@@ -0,0 +1,49 @@
+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";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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 colors from '../colors/colors';
+export var commonContentProps = {
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  height: '100%',
+  width: 'max-content',
+  justifyContent: 'center'
+};
+export var 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.focus)
+    }
+  },
+  inputDropDownContentLeft: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    left: 0
+  }),
+  inputGroupContentLeft: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    left: 0,
+    borderRight: "1px solid ".concat(colors['gray-500'])
+  }),
+  inputDropDownContentRight: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    right: 0
+  }),
+  inputGroupContentRight: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    right: 0,
+    borderLeft: "1px solid ".concat(colors['gray-500'])
+  })
+};

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

@@ -13,6 +13,7 @@ import chroma from 'chroma-js';
 import { copyButton } from '../codeView/codeView';
 import colors from '../colors/colors';
 import tShirtSizes from '../customProperties/tShirtSizes';
+import { commonContentProps } from './box';
 var primaryBlue = colors.primary,
   primaryBlueHover = colors.active_hover,
   primaryBluePress = colors.active_pressed,
@@ -109,8 +110,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',
@@ -500,7 +512,21 @@ var iconButtons = {
       }
     }
   }),
-  hintButton: _objectSpread({}, hintButton)
+  hintButton: _objectSpread({}, hintButton),
+  passwordVisibilityIcon: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), 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',
@@ -529,6 +555,15 @@ var listBoxLink = {
     }
   })
 };
+var ButtonInputGroupContentRight = _objectSpread(_objectSpread(_objectSpread({}, tertiary), 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,
@@ -552,6 +587,7 @@ var buttons = {
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
-  paginationMenu: paginationMenu
+  paginationMenu: paginationMenu,
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight
 };
 export default buttons;

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

@@ -192,4 +192,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'
+    }
+  }
 };