@pingux/astro 2.199.0-alpha.0 → 2.200.0-alpha.0

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -126,6 +126,49 @@ export declare const link: {
     flexShrink: number;
     whiteSpace: string;
 };
+export declare const selectLink: {
+    textDecoration: string;
+    '&.is-hovered': {
+        textDecoration: string;
+    };
+    '&.is-pressed': {
+        textDecoration: string;
+    };
+    lineHeight: string;
+    display: string;
+    justifyContent: string;
+    width: string;
+    '&.is-current': {
+        cursor: string;
+        color: string;
+    };
+    '&.is-focused': {
+        boxShadow: string;
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    bg: string;
+    border: string;
+    borderColor: string;
+    color: string;
+    height: string;
+    padding: string;
+    fontSize: string;
+    fontWeight: number;
+    fontFamily: string;
+    overflowWrap: import("../..").overflowWrap;
+    maxWidth: string;
+    wordWrap: import("../..").wordWrap;
+    wordBreak: import("../..").wordBreak;
+    cursor: string;
+    minWidth: string;
+    outline: string;
+    alignItems: string;
+    borderRadius: string;
+    flexShrink: number;
+    whiteSpace: string;
+};
 declare const _default: {
     colorBlock: {
         bg: string;
@@ -1877,5 +1920,48 @@ declare const _default: {
         variant?: string;
         label?: string;
     };
+    selectLink: {
+        textDecoration: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        lineHeight: string;
+        display: string;
+        justifyContent: string;
+        width: string;
+        '&.is-current': {
+            cursor: string;
+            color: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        height: string;
+        padding: string;
+        fontSize: string;
+        fontWeight: number;
+        fontFamily: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+        cursor: string;
+        minWidth: string;
+        outline: string;
+        alignItems: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+    };
 };
 export default _default;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.text = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.base = void 0;
+exports.text = exports.selectLink = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.base = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Text = require("../Text/Text.styles");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -181,6 +181,15 @@ var link = exports.link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+var selectLink = exports.selectLink = _objectSpread(_objectSpread({}, link), {}, {
+  textDecoration: 'none',
+  '&.is-hovered': {
+    textDecoration: 'none'
+  },
+  '&.is-pressed': {
+    textDecoration: 'none'
+  }
+});
 var listBoxLink = _objectSpread({}, link);
 var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
@@ -335,5 +344,6 @@ var _default = exports["default"] = {
   success: success,
   withIcon: withIcon,
   filter: filter,
-  searchNavTabLabel: tabLabelButton
+  searchNavTabLabel: tabLabelButton,
+  selectLink: selectLink
 };

package/lib/cjs/components/Icon/IconSymbol.js

@@ -52,7 +52,7 @@ var IconSymbol = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: _objectSpread(_objectSpread({}, rest.sx), {}, {
       color: color,
       fontSize: sizeProps.size,
-      fontVariationSettings: hasFill ? "'FILL' 1" : "'FILL' 0"
+      fontVariationSettings: hasFill ? "'FILL' 1, 'opsz' 24" : "'FILL' 0, 'opsz' 24"
     })
   }), icon);
 });

package/lib/cjs/components/Icon/IconSymbol.test.js

@@ -63,7 +63,14 @@ test('hasFill prop', function () {
     hasFill: true
   });
   var icon = _react2.screen.getByTestId(testId);
-  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1,'opsz' 24");
+});
+test('no hasFill prop', function () {
+  getComponent({
+    hasFill: false
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 0,'opsz' 24");
 });
 test('title prop', function () {
   getComponent();

package/lib/cjs/components/Icon/MaterialSymbolIcon.stories.js

@@ -2,7 +2,7 @@
 
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
@@ -13,17 +13,23 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Sizes = exports.Default = exports.CommonlyUsed = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _iconSizeProps = require("../../utils/docUtils/iconSizeProps");
 var _react2 = require("@emotion/react");
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _context6;
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(t), !0)).call(_context8, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context9 = ownKeys(Object(t))).call(_context9, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports["default"] = {
   title: 'Components/MaterialSymbolIcon',
   component: _index.Icon,
@@ -39,22 +45,24 @@ var _default = exports["default"] = {
       control: {
         type: 'text'
       },
-      description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/'
+      description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
     }
   }, _iconSizeProps.sizeArgTypes),
   args: {
-    icon: 'disabled_by_default',
-    className: 'material-symbols-outlined',
-    size: 'md'
-  }
-};
-var Default = exports.Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
-    icon: "search",
+    icon: 'search',
+    size: 'md',
     title: {
       name: 'Search Icon'
     }
-  }));
+  }
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Icon, args);
 };
 Default.parameters = {
   design: {
@@ -62,141 +70,131 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.icon["default"]
   }
 };
+var iconSizes = ['xxs', 'xs', 'sm', 'md'];
+var iconNumericSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
 var rowHeadings = ['Size', 'Code Example', 'Icon Example'];
-var Sizes = exports.Sizes = function Sizes() {
-  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
-    key: "head"
-  }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
-    return (0, _react2.jsx)(_index.TableCell, {
-      isHeading: true,
-      key: head
-    }, head);
-  }))), (0, _react2.jsx)(_index.TableBody, {
-    sx: {
-      borderBottom: 'unset'
-    }
-  }, (0, _react2.jsx)(_index.TableRow, {
+var SizeRow = function SizeRow(_ref) {
+  var _context;
+  var size = _ref.size,
+    px = _ref.px;
+  return (0, _react2.jsx)(_index.TableRow, {
+    key: size,
     height: "80px",
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, {
     justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, null, (0, _concat["default"])(_context = "".concat(size.toUpperCase(), " | ")).call(_context, px))), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '<Icon  icon="search" size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, {
+  }, "<Icon icon=\"search\" size=\"".concat(size, "\" />"))), (0, _react2.jsx)(_index.TableCell, {
     justifyContent: "center"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: "search",
-    title: {
-      name: 'Search Icon'
-    },
-    size: "xxs"
-  }))), (0, _react2.jsx)(_index.TableRow, {
-    height: "80px",
-    bg: "transparent !important"
-  }, (0, _react2.jsx)(_index.TableCell, {
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
-    fontFamily: "monospace"
-  }, '<Icon  icon="search" size="xs"/>')), (0, _react2.jsx)(_index.TableCell, {
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "search",
-    size: "xs",
+    size: size,
     title: {
       name: 'Search Icon'
     }
-  }))), (0, _react2.jsx)(_index.TableRow, {
-    height: "80px",
-    bg: "transparent !important"
-  }, (0, _react2.jsx)(_index.TableCell, {
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
-    fontFamily: "monospace"
-  }, '<Icon  icon="search" size="sm"/>')), (0, _react2.jsx)(_index.TableCell, {
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "search",
-    size: "sm",
-    title: {
-      name: 'Search Icon'
+  })));
+};
+var Sizes = exports.Sizes = function Sizes() {
+  var _context2, _context4;
+  var theme = (0, _hooks.useGetTheme)();
+  var tShirtRows = (0, _filter["default"])(_context2 = (0, _entries["default"])(theme.tShirtSizes)).call(_context2, function (_ref2) {
+    var _context3;
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1),
+      size = _ref3[0];
+    return (0, _includes["default"])(_context3 = iconSizes).call(_context3, size);
+  });
+  var numericRows = (0, _filter["default"])(_context4 = (0, _entries["default"])(theme.tShirtSizes)).call(_context4, function (_ref4) {
+    var _context5;
+    var _ref5 = (0, _slicedToArray2["default"])(_ref4, 1),
+      size = _ref5[0];
+    return (0, _includes["default"])(_context5 = iconNumericSizes).call(_context5, size);
+  });
+  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
+    return (0, _react2.jsx)(_index.TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), (0, _react2.jsx)(_index.TableBody, {
+    sx: {
+      borderBottom: 'unset'
     }
-  }))), (0, _react2.jsx)(_index.TableRow, {
-    height: "80px",
-    bg: "transparent !important"
-  }, (0, _react2.jsx)(_index.TableCell, {
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
-    fontFamily: "monospace"
-  }, '<Icon  icon="search" size="md"/>')), (0, _react2.jsx)(_index.TableCell, {
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "search",
-    size: "md",
-    title: {
-      name: 'Search Icon'
+  }, (0, _map["default"])(tShirtRows).call(tShirtRows, function (_ref6) {
+    var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
+      size = _ref7[0],
+      px = _ref7[1];
+    return (0, _react2.jsx)(SizeRow, {
+      key: size,
+      size: size,
+      px: px
+    });
+  }), (0, _map["default"])(numericRows).call(numericRows, function (_ref8) {
+    var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
+      size = _ref9[0],
+      px = _ref9[1];
+    return (0, _react2.jsx)(SizeRow, {
+      key: size,
+      size: size,
+      px: px
+    });
+  })));
+};
+var allSizes = (0, _concat["default"])(_context6 = []).call(_context6, iconSizes, iconNumericSizes);
+Sizes.parameters = {
+  docs: {
+    source: {
+      code: (0, _map["default"])(allSizes).call(allSizes, function (size) {
+        return "<Icon icon=\"search\" size=\"".concat(size, "\" title={{ name: 'Search Icon' }} />");
+      }).join('\n')
     }
-  })))));
+  }
 };
+var commonIcons = [{
+  icon: 'account_circle',
+  title: 'Account Icon'
+}, {
+  icon: 'groups',
+  title: 'Account Group Icon'
+}, {
+  icon: 'lock',
+  title: 'Lock Icon'
+}, {
+  icon: 'search',
+  title: 'Search Icon'
+}, {
+  icon: 'notifications',
+  title: 'Notification Icon'
+}];
 var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "account_circle",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Account Icon'
-    },
-    hasFill: true
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "groups",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Account Group Icon'
-    },
-    hasFill: true
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "lock",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Lock Icon'
-    },
-    hasFill: true
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "search",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Search Icon'
-    },
-    hasFill: true
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: "notifications",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Notification Icon'
-    },
-    hasFill: true
-  })));
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(commonIcons).call(commonIcons, function (_ref0) {
+    var icon = _ref0.icon,
+      title = _ref0.title;
+    return (0, _react2.jsx)(_index.Box, {
+      key: icon,
+      isRow: true,
+      gap: "md",
+      mb: "xs"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: icon,
+      size: "md",
+      title: {
+        name: title
+      },
+      hasFill: true
+    }));
+  }));
+};
+CommonlyUsed.parameters = {
+  docs: {
+    source: {
+      code: (0, _map["default"])(commonIcons).call(commonIcons, function (_ref1) {
+        var _context7;
+        var icon = _ref1.icon,
+          title = _ref1.title;
+        return (0, _concat["default"])(_context7 = "<Icon icon=\"".concat(icon, "\" size=\"md\" title={{ name: '")).call(_context7, title, "' }} hasFill />");
+      }).join('\n')
+    }
+  }
 };

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -20,7 +20,6 @@ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
@@ -48,9 +47,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
     linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
+    linkSelectFieldIcon = _useGetTheme.linkSelectFieldIcon,
+    MenuDown = _useGetTheme.icons.MenuDown;
   var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
@@ -70,13 +70,13 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
-    variant: "link",
+    variant: "selectLink",
     tabIndex: isDisabled ? -1 : 0
   }, (0, _pendoID.getPendoID)(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), (0, _react2.jsx)(_.Text, {
-    variant: "label",
-    color: isOnyx ? 'font.link' : 'active'
+    variant: "linkSelectFieldLabel",
+    className: "link-select-field-placeholder"
   }, placeholder), (0, _react2.jsx)(_.Box, {
     isRow: true
   }, hasInlineLoader && isLoadingInitial && (0, _react2.jsx)(_.Loader, {
@@ -86,14 +86,17 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "aria-hidden": "true",
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
-    icon: _MenuDownIcon["default"],
+    icon: MenuDown,
     title: {
-      name: 'Menu Down Icon'
-    }
+      name: ''
+    },
+    color: isOnyx ? 'font.link' : 'active',
+    size: linkSelectFieldIcon
   }, iconProps, {
-    sx: state.isOpen ? {
-      transform: 'rotate(180deg)'
-    } : null
+    sx: _objectSpread({
+      transform: state.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+      transition: 'transform 150ms ease'
+    }, iconProps === null || iconProps === void 0 ? void 0 : iconProps.sx)
   })))), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId

package/lib/cjs/components/ListBox/ListBoxSection.js

@@ -42,9 +42,7 @@ var ListBoxSection = function ListBoxSection(props) {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
     ref: headerRef,
     style: (0, _virtualizer.layoutInfoToStyle)(header.layoutInfo, direction)
-  }, item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
-    mt: "0px"
-  }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
+  }, item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], null), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
     variant: "listBox.sectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, groupProps, {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)

package/lib/cjs/components/ListBox/Option.js

@@ -156,7 +156,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       name: 'Check Icon'
     },
     color: "green-500",
-    size: isOnyx ? 'xsm' : 'md'
+    size: "xsm"
   }));
 });
 Option.defaultProps = {

package/lib/cjs/components/Separator/Separator.styles.js

@@ -20,12 +20,12 @@ var base = {
   bg: 'neutral.80',
   width: '100%',
   height: '1px',
-  my: '5px',
+  my: 'xs',
   flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
-    mx: '5px'
+    mx: 'xs'
   }
 };
 var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -6460,6 +6460,17 @@ export declare const text: {
         fontSize: string;
         fontWeight: number;
     };
+    linkSelectFieldLabel: {
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     H1: {
         lineHeight: string;
         fontWeight: number;

package/lib/cjs/components/Text/Text.styles.js

@@ -177,6 +177,15 @@ var stepperTabContentHeader = {
   fontSize: 'lg',
   fontWeight: 3
 };
+var label = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'sm',
+  color: 'text.secondary',
+  fontFamily: 'standard',
+  fontWeight: 1
+});
+var linkSelectFieldLabel = _objectSpread(_objectSpread({}, label), {}, {
+  color: 'active'
+});
 var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -236,12 +245,7 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
-  label: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'sm',
-    color: 'text.secondary',
-    fontFamily: 'standard',
-    fontWeight: 1
-  }),
+  label: label,
   listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
@@ -303,5 +307,6 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   stepperLabel: stepperLabel,
   pageHeaderTitle: _objectSpread({}, HTags.H1),
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  linkSelectFieldLabel: linkSelectFieldLabel
 });

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -102,6 +102,7 @@ declare const useGetTheme: () => {
     linkSelectFieldWidth: string;
     badgeTextFontSize: string;
     modalCloseIconSize: import("../..").IconSize;
+    linkSelectFieldIcon: import("../..").IconSize;
     themeState: {
         isAstro: boolean;
         isOnyx: boolean;
@@ -173,6 +174,7 @@ declare const useGetTheme: () => {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: import("../..").IconSize;
+    linkSelectFieldIcon: import("../..").IconSize;
     accordionHoveredState: {
         '&.is-hovered': {
             color: string;