@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.1

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -20,8 +20,6 @@ import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { DismissButton, FocusScope, mergeProps, useOverlayPosition } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useFilter } from '@react-aria/i18n';
 import { useFocusWithin } from '@react-aria/interactions';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
@@ -30,7 +28,7 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { Box, Button, Icon, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { useInputLoader, usePropWarning } from '../../hooks';
+import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -100,6 +98,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var _useFocusWithin = useFocusWithin({
       onFocusWithinChange: setFocusWithin
     }),
@@ -302,7 +304,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var listbox = ___EmotionJSX(FocusScope, null, filterString === '' && !hasNoSelectAll && ___EmotionJSX(Button, {
     onPress: handleSelection,
     ref: buttonRef,
-    variant: "link",
+    variant: "listBoxLink",
     mt: "sm",
     ml: "14px",
     sx: {

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -32,7 +32,7 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { useInputLoader, usePropWarning } from '../../hooks';
+import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -100,6 +100,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     activeDescendant = _useState10[0],
     setActiveDescendant = _useState10[1];
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   useEffect(function () {
     if (mode !== 'non-restrictive') {
       setItems(initialItems);
@@ -334,6 +337,15 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputRef.current.focus();
     }
   };
+  var readOnlyFieldBadge = function readOnlyFieldBadge(key, name) {
+    return ___EmotionJSX(Badge, {
+      key: key,
+      label: name,
+      variant: "readOnlyFieldBadge",
+      bg: "gray-700",
+      tabIndex: 0
+    });
+  };
   var readOnlyTextItem = function readOnlyTextItem(key, name) {
     return ___EmotionJSX(Text, {
       key: key,
@@ -362,6 +374,12 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }) : _mapInstanceProperty(initialItems).call(initialItems, function (item) {
     return readOnlyTextItem(item.key, item.name);
   }));
+  var onyxReadOnlyInputEntry = isReadOnly && ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "xs"
+  }, _mapInstanceProperty(initialItems).call(initialItems, function (item) {
+    return readOnlyFieldBadge(item.key, item.name);
+  }));
   var readOnlyItems = !isReadOnly && _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
     var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
       return el.key === key;
@@ -371,13 +389,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         key: item.key,
         label: item.name,
         variant: "readOnlyBadge",
-        bg: "white",
-        textProps: {
-          sx: {
-            color: 'text.primary',
-            tabIndex: '-1'
-          }
-        },
         as: "li",
         tabIndex: 0
       });
@@ -409,7 +420,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       "aria-describedby": "selectedKeysState"
     }, item.buttonProps), ___EmotionJSX(Icon, {
       icon: Clear,
-      color: "white",
       size: 14,
       title: {
         name: 'Clear Icon'
@@ -468,6 +478,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!hasCustomValue) setFilterString('');
   };
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
+    containerProps: _objectSpread(_objectSpread({}, containerProps), {}, {
+      variant: 'forms.input.multivaluesFieldContainer'
+    }),
     controlProps: {
       'aria-activedescendant': activeDescendant,
       'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
@@ -484,11 +497,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     placeholder: placeholder,
     wrapperProps: {
       ref: inputWrapperRef,
-      variant: 'forms.input.multivaluesWrapper',
-      sx: isReadOnly && {
-        boxShadow: 'inset 0 0 0 100px #e5e9f8',
-        border: 'none'
-      }
+      variant: 'forms.input.multivaluesWrapper'
     },
     status: status
   });
@@ -502,7 +511,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
-  }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
+  }, ___EmotionJSX(Box, _extends({}, containerProps, {
+    id: "cont"
+  }), ___EmotionJSX(TextField, _extends({
     onBlur: handleBlur,
     onChange: function onChange(e) {
       if (!isOpen) setIsOpen(true);
@@ -536,7 +547,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           p: 0,
           flexWrap: 'wrap'
         }
-      }, selectedItems), readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
+      }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     } // eslint-disable-line
     ,
     value: filterString,

package/lib/components/PageHeader/PageHeader.js

@@ -4,6 +4,7 @@ var _excluded = ["buttonProps", "children", "title"];
 import React, { forwardRef } from 'react';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import PropTypes from 'prop-types';
+import { useGetTheme } from '../../hooks';
 import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -16,6 +17,8 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       fontSize: 'sm'
     }
   };
+  var _useGetTheme = useGetTheme(),
+    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin;
   var renderButton = buttonProps && ___EmotionJSX(IconButton, _extends({
     "aria-label": "icon button",
     ml: "sm",
@@ -28,12 +31,12 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, other), ___EmotionJSX(Box, {
     isRow: true,
-    mb: "xs"
+    mb: pageHeaderTitleMargin
   }, ___EmotionJSX(Text, {
     as: "h1",
     variant: "H1"
   }, title), renderButton), ___EmotionJSX(Text, {
-    variant: "bodyWeak",
+    variant: "pageHeaderBody",
     sx: linkStyles
   }, children));
 });

package/lib/components/PanelHeader/PanelHeader.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "data", "slots"];
+var _excluded = ["avatarProps", "children", "className", "data", "headerProps", "headerWrapperProps", "slots", "subtextProps"];
 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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -15,21 +15,30 @@ 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 React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Icon, Image, Text } from '../../index';
+import { useGetTheme } from '../../hooks';
+import { Avatar, Box, Icon, Image, Text } from '../../index';
 import { SharedItemPropTypes } from '../ListViewItem/listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var PANEL_HEADER_ICON = '-panel-header-icon';
 var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _context;
-  var children = _ref.children,
+  var avatarProps = _ref.avatarProps,
+    children = _ref.children,
     className = _ref.className,
     data = _ref.data,
+    headerProps = _ref.headerProps,
+    headerWrapperProps = _ref.headerWrapperProps,
     slots = _ref.slots,
+    subtextProps = _ref.subtextProps,
     others = _objectWithoutProperties(_ref, _excluded);
   var icon = data.icon,
     image = data.image,
     subtext = data.subtext,
-    text = data.text;
+    text = data.text,
+    avatarDefualtText = data.avatarDefualtText;
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var renderIcon = ___EmotionJSX(Box, {
     width: "25px",
     mx: "md"
@@ -41,23 +50,47 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderAvatar = ___EmotionJSX(Avatar, _extends({
+    src: image === null || image === void 0 ? void 0 : image.src,
+    size: "avatar.lg",
+    defaultText: avatarDefualtText,
+    mr: "md"
+  }, avatarProps));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
-    width: "35px",
-    mx: "sm"
+    variant: "panelHeader.iconWrapper"
   }, ___EmotionJSX(Image, {
     src: image.src,
     alt: image.alt,
     "aria-label": image['aria-label']
   }));
+  var renderLeftContent = function renderLeftContent() {
+    if (slots !== null && slots !== void 0 && slots.leftOfData) {
+      return slots.leftOfData;
+    }
+    if (isOnyx) {
+      return renderAvatar;
+    }
+    if (icon) {
+      return renderIcon;
+    }
+    return renderImage;
+  };
+  var headerPropsSpread = _objectSpread(_objectSpread({}, headerProps), isOnyx && {
+    variant: 'H4',
+    as: 'h4'
+  });
+  var headerWrapperPropsSpread = _objectSpread(_objectSpread({}, headerWrapperProps), {}, {
+    variant: 'panelHeader.wrapper',
+    py: 'sm'
+  }, isOnyx && {
+    gap: 'xs'
+  });
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     variant: text || subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, slots !== null && slots !== void 0 && slots.leftOfData || icon ? renderIcon : renderImage, ___EmotionJSX(Box, {
-    variant: "panelHeader.wrapper",
-    py: "sm"
-  }, text && ___EmotionJSX(Text, {
+  }, renderLeftContent(), ___EmotionJSX(Box, headerWrapperPropsSpread, text && ___EmotionJSX(Text, _extends({}, headerPropsSpread, {
     variant: "panelHeaderText"
-  }, text), subtext && ___EmotionJSX(Text, {
+  }), text), subtext && ___EmotionJSX(Text, {
     variant: "panelHeaderSubtext"
   }, subtext)));
   return ___EmotionJSX(Box, _extends({

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

@@ -27,7 +27,8 @@ export var Default = function Default(_ref) {
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
       icon: AccountIcon,
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -43,7 +44,8 @@ export var WithSubtext = function WithSubtext(_ref2) {
     data: {
       icon: AccountIcon,
       subtext: 'rad_developer@pingidentity.com',
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -59,7 +61,8 @@ export var WithControls = function WithControls(_ref3) {
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall',
-      subtext: 'rad_developer@pingidentity.com'
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefualtText: 'FV'
     }
   }), ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
     key: "enable"
@@ -81,7 +84,8 @@ export var WithImage = function WithImage(args) {
       image: {
         src: pingImg,
         alt: 'Ping Identity Logo',
-        'aria-label': 'Ping Identity Logo'
+        'aria-label': 'Ping Identity Logo',
+        avatarDefualtText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -139,6 +143,7 @@ export var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
+      avatarDefualtText: '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

@@ -40,11 +40,16 @@ var wrapper = {
 var rightOfData = {
   alignSelf: 'center'
 };
+var iconWrapper = {
+  width: '25px',
+  mx: 'md'
+};
 export default {
   container: container,
   controls: controls,
   data: data,
   emptyData: emptyData,
+  iconWrapper: iconWrapper,
   rightOfData: rightOfData,
   wrapper: wrapper
 };

package/lib/components/PanelHeader/PanelHeader.test.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { act } from '@testing-library/react';
-import { PanelHeader, PanelHeaderSwitchField } from '../../index';
+import { AstroProvider, OnyxTheme, PanelHeader, PanelHeaderSwitchField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -36,6 +36,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(PanelHeader, _extends({}, defaultProps, props)));
 };
+var getComponentOnyx = function getComponentOnyx() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(AstroProvider, {
+    themeOverrides: [OnyxTheme]
+  }, ___EmotionJSX(PanelHeader, _extends({}, defaultProps, props))));
+};
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {
@@ -97,4 +103,20 @@ test('renders rightOfData slot', function () {
     }
   });
   screen.getByText(TEST_TEXT);
+});
+test('renders leftOfData slot', function () {
+  var TEST_TEXT = 'test text';
+  getComponent({
+    slots: {
+      leftOfData: ___EmotionJSX("div", null, TEST_TEXT)
+    }
+  });
+  screen.getByText(TEST_TEXT);
+});
+test('renders onyx components', function () {
+  getComponentOnyx();
+  var image = screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', pingImg);
+  expect(image).toHaveAttribute('alt', 'Avatar');
 });

package/lib/components/RequirementsList/RequirementsList.js

@@ -3,11 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["requirements"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef } from 'react';
-import ErrorCircle from '@pingux/mdi-react/AlertCircleIcon';
-import WarningIcon from '@pingux/mdi-react/AlertOutlineIcon';
-import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
-import SuccessCircle from '@pingux/mdi-react/CheckCircleIcon';
 import kebabCase from 'lodash/kebabCase';
+import { useGetTheme } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import Text from '../Text';
@@ -15,6 +12,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var SuccessCircle = icons.SuccessCircle,
+    ErrorCircle = icons.ErrorCircle,
+    WarningIcon = icons.WarningIcon,
+    DefaultCircle = icons.DefaultCircle;
   var statusIconRender = function statusIconRender(status, key) {
     switch (status) {
       case 'success':

package/lib/components/Stepper/Step.js

@@ -26,7 +26,7 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className
   }), status === COMPLETED && !isHovered ? ___EmotionJSX(Icon, {
     icon: CheckBoldIcon,
-    size: 23,
+    size: "sm",
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'

package/lib/components/Stepper/Stepper.styles.js

@@ -84,6 +84,7 @@ var stepBase = {
   fontSize: '17px',
   fontWeight: 3,
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&[aria-expanded="true"]': {
     backgroundColor: 'active',
     borderColor: 'active',

package/lib/components/Switch/Switch.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from 'react-aria';
 import PropTypes from 'prop-types';
+import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 
 /**
@@ -13,21 +14,30 @@ import Box from '../Box';
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
-  var inputProps = props.inputProps;
+  var inputProps = props.inputProps,
+    isSelected = props.isSelected;
+  var _useStatusClasses = useStatusClasses('', {
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
+    className: classNames,
     variant: "forms.switch.container"
   }, props), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Box, _extends({
     as: "input"
   }, inputProps, {
     ref: ref
   }))), ___EmotionJSX(Box, {
+    className: classNames,
     variant: "forms.switch.thumbContainer"
   }, ___EmotionJSX(Box, {
+    className: classNames,
     variant: "forms.switch.thumb"
   })));
 });
 Switch.propTypes = {
-  inputProps: PropTypes.shape({})
+  inputProps: PropTypes.shape({}),
+  isSelected: PropTypes.bool
 };
 Switch.displayName = 'Switch';
 export default Switch;

package/lib/components/Switch/Switch.styles.js

@@ -48,7 +48,7 @@ export var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  'label.is-selected &': {
+  '&.is-selected': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/components/SwitchField/SwitchField.js

@@ -49,8 +49,9 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
       'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
+  var isSelected = (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false;
   var statusClasses = {
-    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
+    isSelected: isSelected
   };
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -65,7 +66,10 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps, {
+    alignSelf: "top",
+    alignItems: "start"
+  }), ___EmotionJSX(Label, _extends({
     variant: "forms.switch.label"
   }, fieldLabelProps), ___EmotionJSX(Box, _extends({}, fieldControlWrapperProps, {
     sx: _objectSpread(_objectSpread({}, fieldControlWrapperProps.sx), {}, {
@@ -73,6 +77,7 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     })
   }), ___EmotionJSX(Switch, _extends({
     ref: switchRef,
+    isSelected: isSelected,
     inputProps: fieldControlInputProps,
     name: name
   }, unhandledAriaProps, omit(others, 'data-pendo-id', 'aria-label')))), label), helperText && ___EmotionJSX(FieldHelperText, {