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

package/lib/cjs/index.d.ts

@@ -1,4 +1,4 @@
-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/cjs/index.js

@@ -1189,7 +1189,7 @@ _Object$defineProperty(exports, "useTreeData", {
     return _reactStately.useTreeData;
   }
 });
-require("@material-symbols/font-400");
+require("material-symbols/outlined.css");
 var _AccordionGridGroup = _interopRequireWildcard(require("./components/AccordionGridGroup"));
 _forEachInstanceProperty(_context = _Object$keys(_AccordionGridGroup)).call(_context, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -62,6 +62,7 @@ export declare const nextGenDarkThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: import("../../../..").IconSize;
+    linkSelectFieldIcon: import("../../../..").IconSize;
     accordionHoveredState: {
         '&.is-hovered': {
             color: string;

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

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

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/menu.d.ts

@@ -35,6 +35,5 @@ export declare const menuItem: {
     };
 };
 export declare const menu: {
-    backgroundColor: string;
-    borderColor: string;
+    backgroundColor: any;
 };

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

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

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts

@@ -48,4 +48,7 @@ export declare const text: {
     pageHeaderTitle: {
         color: any;
     };
+    linkSelectFieldLabel: {
+        color: any;
+    };
 };

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

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

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -180,8 +180,7 @@ declare const _default: {
         };
     };
     menu: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: any;
     };
     menuItem: {
         item: {
@@ -418,9 +417,7 @@ declare const _default: {
     listBox: {
         container: {
             backgroundColor: string;
-            border: string;
-            borderColor: string;
-            borderRadius: string;
+            borderRadius: any;
         };
         option: {
             color: any;

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

@@ -22,9 +22,7 @@ var _stepper = _interopRequireDefault(require("./stepper"));
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
-    border: '1px solid',
-    borderColor: 'border.attachment',
-    borderRadius: '4px'
+    borderRadius: _onyxTokens.astroTokensDark.radius.md
   },
   option: {
     color: _onyxTokens.astroTokensDark.color.gray[400],

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -96,4 +96,5 @@ export declare const astroThemeValues: {
     linkSelectFieldWidth: string;
     badgeTextFontSize: string;
     modalCloseIconSize: IconSize;
+    linkSelectFieldIcon: IconSize;
 };

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

@@ -36,6 +36,7 @@ var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
 var modalCloseIconSize = 'sm';
+var linkSelectFieldIcon = 'sm';
 var astroThemeValues = exports.astroThemeValues = {
   accordionHoveredState: _Accordion.hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -69,5 +70,6 @@ var astroThemeValues = exports.astroThemeValues = {
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
   badgeTextFontSize: badgeTextFontSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

@@ -9,5 +9,6 @@ declare const _default: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: IconSize;
+    linkSelectFieldIcon: IconSize;
 };
 export default _default;

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

@@ -14,6 +14,7 @@ var pageHeaderAddIconMargin = 'md';
 var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
 var modalCloseIconSize = 'md';
+var linkSelectFieldIcon = 'sm';
 var _default = exports["default"] = {
   copyButtonSize: copyButtonSize,
   breadcrumbIconSize: breadcrumbIconSize,
@@ -23,5 +24,6 @@ var _default = exports["default"] = {
   pageHeaderAddIconMargin: pageHeaderAddIconMargin,
   pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

@@ -10,6 +10,7 @@ export declare const nextGenThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: IconSize;
+    linkSelectFieldIcon: IconSize;
     accordionHoveredState: {
         '&.is-hovered': {
             color: string;

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

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

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

@@ -21,10 +21,9 @@ export declare const select: {
         color: string;
     };
     arrow: {
-        width: string;
-        height: string;
         alignItems: string;
         justifyContent: string;
+        ml: string;
         '& > svg': {
             minWidth: string;
             width: string;
@@ -1087,10 +1086,9 @@ declare const _default: {
             color: string;
         };
         arrow: {
-            width: string;
-            height: string;
             alignItems: string;
             justifyContent: string;
+            ml: string;
             '& > svg': {
                 minWidth: string;
                 width: string;

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

@@ -46,10 +46,9 @@ var select = exports.select = {
     color: 'text.primary'
   },
   arrow: {
-    width: '20px',
-    height: '20px',
     alignItems: 'center',
     justifyContent: 'center',
+    ml: 'xs',
     '& > svg': {
       minWidth: _tShirtSizes["default"].xs,
       width: _tShirtSizes["default"].xs,

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

@@ -777,7 +777,7 @@ declare const _default: {
             transition: string;
         };
         link: {
-            color: string;
+            color: any;
             transition: string;
             fontSize: string;
             textDecoration: string;
@@ -1785,6 +1785,30 @@ declare const _default: {
             };
             transition: string;
         };
+        selectLink: {
+            textDecoration: string;
+            px: string;
+            '&.is-hovered': {
+                textDecoration: string;
+            };
+            '&.is-pressed': {
+                textDecoration: string;
+            };
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+                'span.link-select-field-placeholder': {
+                    textDecoration: string;
+                };
+                'span.material-symbols-outlined': {
+                    textDecoration: string;
+                };
+            };
+            color: any;
+            transition: string;
+            fontSize: string;
+            py: any;
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;
@@ -1823,10 +1847,9 @@ declare const _default: {
                 color: string;
             };
             arrow: {
-                width: string;
-                height: string;
                 alignItems: string;
                 justifyContent: string;
+                ml: string;
                 '& > svg': {
                     minWidth: string;
                     width: string;
@@ -2964,6 +2987,13 @@ declare const _default: {
             fontWeight: number;
             fontFamily: string;
         };
+        label: {
+            fontSize: any;
+        };
+        linkSelectFieldLabel: {
+            color: any;
+            fontSize: any;
+        };
         H1: {
             lineHeight: string;
             fontSize: any;
@@ -5479,34 +5509,32 @@ declare const _default: {
         };
         listBox: {
             container: {
-                pl: string;
-                pr: number;
-                py: string;
+                p: any;
             };
             option: {
-                py: string;
-                pl: string;
-                pr: string;
-                mr: string;
+                py: any;
+                pl: any;
+                pr: any;
                 justifyContent: string;
-                borderRadius: string;
+                borderRadius: any;
                 lineHeight: string;
                 color: string;
                 '&.is-focused': {
                     color: string;
                     bg: string;
-                    borderRadius: string;
+                    borderRadius: any;
                 };
                 '&.is-focus-visible': {
                     boxShadow: string;
-                    borderRadius: string;
+                    borderRadius: any;
                     zIndex: number;
                 };
                 '&.is-selected': {
+                    fontWeight: string;
                     color: string;
                     bg: string;
                     pl: string;
-                    borderRadius: string;
+                    borderRadius: any;
                     '&.is-focused': {
                         color: string;
                     };
@@ -5519,7 +5547,7 @@ declare const _default: {
                     bg: string;
                 };
                 '&.is-condensed': {
-                    pl: string;
+                    pl: any;
                     bg: string;
                     color: string;
                     '&.is-selected': {
@@ -5693,8 +5721,6 @@ declare const _default: {
         };
         menu: {
             p: string;
-            border: string;
-            borderColor: string;
         };
         menuItem: {
             item: {
@@ -6100,6 +6126,9 @@ declare const _default: {
                 maxWidth: string;
                 boxShadow: string;
                 transition: string;
+                border: string;
+                borderColor: any;
+                borderRadius: any;
                 '&.animate': {
                     opacity: number;
                 };

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

@@ -474,7 +474,7 @@ declare const buttons: {
         transition: string;
     };
     link: {
-        color: string;
+        color: any;
         transition: string;
         fontSize: string;
         textDecoration: string;
@@ -1482,5 +1482,29 @@ declare const buttons: {
         };
         transition: string;
     };
+    selectLink: {
+        textDecoration: string;
+        px: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+            'span.link-select-field-placeholder': {
+                textDecoration: string;
+            };
+            'span.material-symbols-outlined': {
+                textDecoration: string;
+            };
+        };
+        color: any;
+        transition: string;
+        fontSize: string;
+        py: any;
+    };
 };
 export default buttons;

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

@@ -233,7 +233,7 @@ var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'white'
 });
 var link = {
-  color: 'active',
+  color: _onyxTokens.astroTokens.color.font.link,
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',
@@ -249,6 +249,26 @@ var link = {
     outline: 'none'
   }
 };
+var selectLink = _objectSpread(_objectSpread({}, link), {}, {
+  textDecoration: 'none',
+  px: '0',
+  '&.is-hovered': {
+    textDecoration: 'none'
+  },
+  '&.is-pressed': {
+    textDecoration: 'none'
+  },
+  '&.is-focused': {
+    textDecoration: 'none',
+    outline: 'none',
+    'span.link-select-field-placeholder': {
+      textDecoration: 'underline'
+    },
+    'span.material-symbols-outlined': {
+      textDecoration: 'none'
+    }
+  }
+});
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   px: '0px',
   py: '0px',
@@ -619,6 +639,7 @@ var buttons = {
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
   paginationMenu: paginationMenu,
-  ButtonInputGroupContentRight: ButtonInputGroupContentRight
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight,
+  selectLink: selectLink
 };
 var _default = exports["default"] = buttons;

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

@@ -1,7 +1,5 @@
 export declare const menu: {
     p: string;
-    border: string;
-    borderColor: string;
 };
 export declare const menuSection: {
     sectionTitle: {

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

@@ -7,9 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.menuSection = exports.menuItem = exports.menu = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var menu = exports.menu = {
-  p: 'sm',
-  border: '1px solid',
-  borderColor: 'border.base'
+  p: 'sm'
 };
 var menuSection = exports.menuSection = {
   sectionTitle: {

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

@@ -4,6 +4,9 @@ declare const _default: {
         maxWidth: string;
         boxShadow: string;
         transition: string;
+        border: string;
+        borderColor: any;
+        borderRadius: any;
         '&.animate': {
             opacity: number;
         };

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

@@ -9,8 +9,11 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
   minWidth: '150px',
   maxWidth: '260px',
-  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.18)',
   transition: 'opacity 200ms ease',
+  border: '1px solid',
+  borderColor: _onyxTokens.astroTokens.color.common.border,
+  borderRadius: _onyxTokens.astroTokens.radius.md,
   '&.animate': {
     opacity: 0
   },

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

@@ -54,6 +54,13 @@ export declare const text: {
         fontWeight: number;
         fontFamily: string;
     };
+    label: {
+        fontSize: any;
+    };
+    linkSelectFieldLabel: {
+        color: any;
+        fontSize: any;
+    };
     H1: {
         lineHeight: string;
         fontSize: any;

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

@@ -126,6 +126,9 @@ var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
 var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
   lineHeight: '2rem'
 });
+var label = {
+  fontSize: fontSizes.label
+};
 var text = exports.text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -248,5 +251,9 @@ var text = exports.text = _objectSpread(_objectSpread({
     lineHeight: 'body'
   },
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  label: label,
+  linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
+    color: _onyxTokens.astroTokens.color.font.link
+  })
 });

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

@@ -824,34 +824,32 @@ declare const _default: {
     };
     listBox: {
         container: {
-            pl: string;
-            pr: number;
-            py: string;
+            p: any;
         };
         option: {
-            py: string;
-            pl: string;
-            pr: string;
-            mr: string;
+            py: any;
+            pl: any;
+            pr: any;
             justifyContent: string;
-            borderRadius: string;
+            borderRadius: any;
             lineHeight: string;
             color: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
-                borderRadius: string;
+                borderRadius: any;
             };
             '&.is-focus-visible': {
                 boxShadow: string;
-                borderRadius: string;
+                borderRadius: any;
                 zIndex: number;
             };
             '&.is-selected': {
+                fontWeight: string;
                 color: string;
                 bg: string;
                 pl: string;
-                borderRadius: string;
+                borderRadius: any;
                 '&.is-focused': {
                     color: string;
                 };
@@ -864,7 +862,7 @@ declare const _default: {
                 bg: string;
             };
             '&.is-condensed': {
-                pl: string;
+                pl: any;
                 bg: string;
                 color: string;
                 '&.is-selected': {
@@ -1038,8 +1036,6 @@ declare const _default: {
     };
     menu: {
         p: string;
-        border: string;
-        borderColor: string;
     };
     menuItem: {
         item: {
@@ -1445,6 +1441,9 @@ declare const _default: {
             maxWidth: string;
             boxShadow: string;
             transition: string;
+            border: string;
+            borderColor: any;
+            borderRadius: any;
             '&.animate': {
                 opacity: number;
             };

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

@@ -160,34 +160,32 @@ var modal = {
 };
 var listBox = {
   container: {
-    pl: 'sm',
-    pr: 0,
-    py: 'xs'
+    p: _onyxTokens.astroTokens.spacing.sm
   },
   option: {
-    py: '.75rem',
-    pl: '.75rem',
-    pr: 'md',
-    mr: 'sm',
+    py: _onyxTokens.astroTokens.spacing['md-s'],
+    pl: _onyxTokens.astroTokens.spacing['md-s'],
+    pr: _onyxTokens.astroTokens.spacing.md,
     justifyContent: 'space-between',
-    borderRadius: '4px',
+    borderRadius: _onyxTokens.astroTokens.radius.md,
     lineHeight: 'body',
     color: 'gray-700',
     '&.is-focused': {
       color: 'font.hover',
       bg: 'gray-100',
-      borderRadius: '4px'
+      borderRadius: _onyxTokens.astroTokens.radius.md
     },
     '&.is-focus-visible': {
       boxShadow: 'inset 0 0 0 1px #1a73e8',
-      borderRadius: '4px',
+      borderRadius: _onyxTokens.astroTokens.radius.md,
       zIndex: 1
     },
     '&.is-selected': {
+      fontWeight: '0',
       color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
-      borderRadius: '4px',
+      borderRadius: _onyxTokens.astroTokens.radius.md,
       '&.is-focused': {
         color: 'text.primary'
       },
@@ -200,7 +198,7 @@ var listBox = {
       bg: 'lightblue'
     },
     '&.is-condensed': {
-      pl: 'md',
+      pl: _onyxTokens.astroTokens.spacing.md,
       bg: 'backgroundBase',
       color: 'gray-700',
       '&.is-selected': {

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import type { MaterialSymbol } from '@material-symbols/font-400';
 import type { MdiReactIconComponentType } from '@pingux/mdi-react';
+import type { MaterialSymbol } from 'material-symbols';
 import { TestingAttributes } from './shared/test';
 import { DOMAttributes, IconSize, StyleProps } from './shared';
 export type SVGComponentProps = {

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

@@ -1,5 +1,5 @@
 import React, { Key } from 'react';
-import type { MaterialSymbol } from '@material-symbols/font-400';
+import type { MaterialSymbol } from 'material-symbols';
 import { ThemeUICSSObject } from 'theme-ui';
 import { IconProps, IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';