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

package/lib/cjs/utils/docUtils/iconSizeProps.d.ts

@@ -1,10 +1,18 @@
 import PropTypes from 'prop-types';
 export declare const sizeArgTypes: {
     size: {
-        control: string;
+        control: {
+            type: string;
+        };
+        options: readonly ["xxs", "xs", "sm", "md"];
         description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
     };
 };
 export declare const sizePropTypes: {
-    size: PropTypes.Requireable<string>;
+    size: PropTypes.Requireable<"xxs" | "xs" | "sm" | "md">;
 };

package/lib/cjs/utils/docUtils/iconSizeProps.js

@@ -6,15 +6,27 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sizePropTypes = exports.sizeArgTypes = void 0;
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _tShirtSizes = require("../devUtils/constants/tShirtSizes");
+var _context;
+var iconSizes = ['xxs', 'xs', 'sm', 'md'];
 var sizeArgTypes = exports.sizeArgTypes = {
   size: {
-    control: 'select',
-    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n    rendering 9, 15, 20, and 25 pixel svg containers."
+    control: {
+      type: 'select'
+    },
+    options: iconSizes,
+    description: 'The size of the icon. Accepts a t-shirt size ("xxs", "xs", "sm", "md") or a number value in pixels. Rendered pixel size may vary by theme.',
+    table: {
+      type: {
+        summary: (0, _map["default"])(iconSizes).call(iconSizes, function (k) {
+          return "\"".concat(k, "\"");
+        }).join(' | ')
+      }
+    }
   }
 };
 var sizePropTypes = exports.sizePropTypes = {
-  size: _propTypes["default"].oneOf((0, _keys["default"])(_tShirtSizes.tShirtSizes))
+  size: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, iconSizes))
 };

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

@@ -174,6 +174,15 @@ export var link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+export var 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',
@@ -328,5 +337,6 @@ export default {
   success: success,
   withIcon: withIcon,
   filter: filter,
-  searchNavTabLabel: tabLabelButton
+  searchNavTabLabel: tabLabelButton,
+  selectLink: selectLink
 };

package/lib/components/Icon/IconSymbol.js

@@ -42,7 +42,7 @@ var IconSymbol = /*#__PURE__*/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/components/Icon/IconSymbol.test.js

@@ -60,7 +60,14 @@ test('hasFill prop', function () {
     hasFill: true
   });
   var icon = 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 = screen.getByTestId(testId);
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 0,'opsz' 24");
 });
 test('title prop', function () {
   getComponent();

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

@@ -1,18 +1,23 @@
 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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _context6;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 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) { _defineProperty(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; }
+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) { _defineProperty(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; }
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
@@ -32,22 +37,24 @@ export 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'
+        }
+      }
     }
   }, sizeArgTypes),
   args: {
-    icon: 'disabled_by_default',
-    className: 'material-symbols-outlined',
-    size: 'md'
-  }
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(Icon, _extends({}, args, {
-    icon: "search",
+    icon: 'search',
+    size: 'md',
     title: {
       name: 'Search Icon'
     }
-  }));
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Icon, args);
 };
 Default.parameters = {
   design: {
@@ -55,141 +62,131 @@ Default.parameters = {
     url: 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'];
-export var Sizes = function Sizes() {
-  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
-    key: "head"
-  }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
-    return ___EmotionJSX(TableCell, {
-      isHeading: true,
-      key: head
-    }, head);
-  }))), ___EmotionJSX(TableBody, {
-    sx: {
-      borderBottom: 'unset'
-    }
-  }, ___EmotionJSX(TableRow, {
-    height: "80px",
-    bg: "transparent !important"
-  }, ___EmotionJSX(TableCell, {
-    justifyContent: "center"
-  }, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-    fontFamily: "monospace"
-  }, '<Icon  icon="search" size="xxs"/>')), ___EmotionJSX(TableCell, {
-    justifyContent: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: "search",
-    title: {
-      name: 'Search Icon'
-    },
-    size: "xxs"
-  }))), ___EmotionJSX(TableRow, {
+var SizeRow = function SizeRow(_ref) {
+  var _context;
+  var size = _ref.size,
+    px = _ref.px;
+  return ___EmotionJSX(TableRow, {
+    key: size,
     height: "80px",
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, {
     justifyContent: "center"
-  }, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(Text, null, _concatInstanceProperty(_context = "".concat(size.toUpperCase(), " | ")).call(_context, px))), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '<Icon  icon="search" size="xs"/>')), ___EmotionJSX(TableCell, {
+  }, "<Icon icon=\"search\" size=\"".concat(size, "\" />"))), ___EmotionJSX(TableCell, {
     justifyContent: "center"
   }, ___EmotionJSX(Icon, {
     icon: "search",
-    size: "xs",
+    size: size,
     title: {
       name: 'Search Icon'
     }
-  }))), ___EmotionJSX(TableRow, {
-    height: "80px",
-    bg: "transparent !important"
-  }, ___EmotionJSX(TableCell, {
-    justifyContent: "center"
-  }, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-    fontFamily: "monospace"
-  }, '<Icon  icon="search" size="sm"/>')), ___EmotionJSX(TableCell, {
-    justifyContent: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: "search",
-    size: "sm",
-    title: {
-      name: 'Search Icon'
+  })));
+};
+export var Sizes = function Sizes() {
+  var _context2, _context4;
+  var theme = useGetTheme();
+  var tShirtRows = _filterInstanceProperty(_context2 = _Object$entries(theme.tShirtSizes)).call(_context2, function (_ref2) {
+    var _context3;
+    var _ref3 = _slicedToArray(_ref2, 1),
+      size = _ref3[0];
+    return _includesInstanceProperty(_context3 = iconSizes).call(_context3, size);
+  });
+  var numericRows = _filterInstanceProperty(_context4 = _Object$entries(theme.tShirtSizes)).call(_context4, function (_ref4) {
+    var _context5;
+    var _ref5 = _slicedToArray(_ref4, 1),
+      size = _ref5[0];
+    return _includesInstanceProperty(_context5 = iconNumericSizes).call(_context5, size);
+  });
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), ___EmotionJSX(TableBody, {
+    sx: {
+      borderBottom: 'unset'
     }
-  }))), ___EmotionJSX(TableRow, {
-    height: "80px",
-    bg: "transparent !important"
-  }, ___EmotionJSX(TableCell, {
-    justifyContent: "center"
-  }, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-    fontFamily: "monospace"
-  }, '<Icon  icon="search" size="md"/>')), ___EmotionJSX(TableCell, {
-    justifyContent: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: "search",
-    size: "md",
-    title: {
-      name: 'Search Icon'
+  }, _mapInstanceProperty(tShirtRows).call(tShirtRows, function (_ref6) {
+    var _ref7 = _slicedToArray(_ref6, 2),
+      size = _ref7[0],
+      px = _ref7[1];
+    return ___EmotionJSX(SizeRow, {
+      key: size,
+      size: size,
+      px: px
+    });
+  }), _mapInstanceProperty(numericRows).call(numericRows, function (_ref8) {
+    var _ref9 = _slicedToArray(_ref8, 2),
+      size = _ref9[0],
+      px = _ref9[1];
+    return ___EmotionJSX(SizeRow, {
+      key: size,
+      size: size,
+      px: px
+    });
+  })));
+};
+var allSizes = _concatInstanceProperty(_context6 = []).call(_context6, iconSizes, iconNumericSizes);
+Sizes.parameters = {
+  docs: {
+    source: {
+      code: _mapInstanceProperty(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'
+}];
 export var CommonlyUsed = function CommonlyUsed() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: "account_circle",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Account Icon'
-    },
-    hasFill: true
-  })), ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: "groups",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Account Group Icon'
-    },
-    hasFill: true
-  })), ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: "lock",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Lock Icon'
-    },
-    hasFill: true
-  })), ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: "search",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Search Icon'
-    },
-    hasFill: true
-  })), ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    mb: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: "notifications",
-    color: "accent.40",
-    size: "sm",
-    title: {
-      name: 'Notification Icon'
-    },
-    hasFill: true
-  })));
+  return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(commonIcons).call(commonIcons, function (_ref0) {
+    var icon = _ref0.icon,
+      title = _ref0.title;
+    return ___EmotionJSX(Box, {
+      key: icon,
+      isRow: true,
+      gap: "md",
+      mb: "xs"
+    }, ___EmotionJSX(Icon, {
+      icon: icon,
+      size: "md",
+      title: {
+        name: title
+      },
+      hasFill: true
+    }));
+  }));
+};
+CommonlyUsed.parameters = {
+  docs: {
+    source: {
+      code: _mapInstanceProperty(commonIcons).call(commonIcons, function (_ref1) {
+        var _context7;
+        var icon = _ref1.icon,
+          title = _ref1.title;
+        return _concatInstanceProperty(_context7 = "<Icon icon=\"".concat(icon, "\" size=\"md\" title={{ name: '")).call(_context7, title, "' }} hasFill />");
+      }).join('\n')
+    }
+  }
 };

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -13,7 +13,6 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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) { _defineProperty(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; }
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
@@ -38,9 +37,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
     linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
+    linkSelectFieldIcon = _useGetTheme.linkSelectFieldIcon,
+    MenuDown = _useGetTheme.icons.MenuDown;
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -60,13 +60,13 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var trigger = ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
     ref: triggerRef,
-    variant: "link",
+    variant: "selectLink",
     tabIndex: isDisabled ? -1 : 0
   }, getPendoID(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
-    variant: "label",
-    color: isOnyx ? 'font.link' : 'active'
+    variant: "linkSelectFieldLabel",
+    className: "link-select-field-placeholder"
   }, placeholder), ___EmotionJSX(Box, {
     isRow: true
   }, hasInlineLoader && isLoadingInitial && ___EmotionJSX(Loader, {
@@ -78,12 +78,15 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Icon, _extends({
     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)
   })))), ___EmotionJSX(VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId

package/lib/components/ListBox/ListBoxSection.js

@@ -30,9 +30,7 @@ var ListBoxSection = function ListBoxSection(props) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     ref: headerRef,
     style: layoutInfoToStyle(header.layoutInfo, direction)
-  }, item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, {
-    mt: "0px"
-  }), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
+  }, item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, null), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
     variant: "listBox.sectionTitle"
   }), item.rendered)), ___EmotionJSX(Box, _extends({}, groupProps, {
     style: layoutInfoToStyle(reusableView.layoutInfo, direction)

package/lib/components/ListBox/Option.js

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

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

@@ -13,12 +13,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/components/Text/Text.styles.js

@@ -170,6 +170,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'
+});
 export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -229,12 +238,7 @@ export var 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,
@@ -296,5 +300,6 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   stepperLabel: stepperLabel,
   pageHeaderTitle: _objectSpread({}, HTags.H1),
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  linkSelectFieldLabel: linkSelectFieldLabel
 });

package/lib/index.js

@@ -1,7 +1,7 @@
 // NOTE: Named exports must be unique across files, otherwise collisions will occur.
 
 /* eslint-disable import/export */
-import '@material-symbols/font-400';
+import 'material-symbols/outlined.css';
 export { default as AccordionGridGroup } from './components/AccordionGridGroup';
 export * from './components/AccordionGridGroup';
 export { default as AccordionGridItem } from './components/AccordionGridItem';

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

@@ -271,7 +271,7 @@ var buttons = {
     }
   },
   link: {
-    color: astroTokensDark.color.blue[400],
+    color: astroTokensDark.color.font.link,
     '&.is-pressed': {
       textDecoration: 'underline',
       outline: 'none',

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

@@ -36,6 +36,5 @@ export var menuItem = {
   }
 };
 export var menu = {
-  backgroundColor: '#23282e',
-  borderColor: 'border.attachment'
+  backgroundColor: astroTokensDark.color.common.bg.base
 };

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

@@ -48,5 +48,8 @@ export var text = {
   },
   pageHeaderTitle: {
     color: astroTokensDark.color.gray[100]
+  },
+  linkSelectFieldLabel: {
+    color: astroTokensDark.color.font.link
   }
 };

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

@@ -14,9 +14,7 @@ import stepper from './stepper';
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
-    border: '1px solid',
-    borderColor: 'border.attachment',
-    borderRadius: '4px'
+    borderRadius: astroTokensDark.radius.md
   },
   option: {
     color: astroTokensDark.color.gray[400],

package/lib/styles/themes/astro/customProperties/index.js

@@ -24,6 +24,7 @@ var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
 var modalCloseIconSize = 'sm';
+var linkSelectFieldIcon = 'sm';
 export var astroThemeValues = {
   accordionHoveredState: hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -57,5 +58,6 @@ export var astroThemeValues = {
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
   badgeTextFontSize: badgeTextFontSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

@@ -7,6 +7,7 @@ var pageHeaderAddIconMargin = 'md';
 var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
 var modalCloseIconSize = 'md';
+var linkSelectFieldIcon = 'sm';
 export default {
   copyButtonSize: copyButtonSize,
   breadcrumbIconSize: breadcrumbIconSize,
@@ -16,5 +17,6 @@ export default {
   pageHeaderAddIconMargin: pageHeaderAddIconMargin,
   pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

@@ -33,7 +33,7 @@ var badgeStyles = {
   blueText: '#155CBA',
   greyText: '#FFFFFF'
 };
-var linkSelectFieldWidth = '12em';
+var linkSelectFieldWidth = '200px';
 var calendarIconSize = 'sm';
 var badgeTextFontSize = '75%';
 var navBarIconSize = '20px';