@pingux/astro 2.129.0 → 2.130.0-alpha.1

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

@@ -6,10 +6,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.iconWrapperSizes = exports["default"] = void 0;
 var _default = {
-  xxs: 9,
-  xs: 15,
-  sm: 20,
-  md: 25
+  xxs: '9px',
+  xs: '15px',
+  sm: '20px',
+  md: '25px'
 };
 exports["default"] = _default;
 var iconWrapperSizes = {

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

@@ -55,6 +55,7 @@ declare const colors: {
         secondary: string;
         card: string;
         suggestion: string;
+        hover: string;
     };
     iconWrapper: {
         wrapper: {

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

@@ -109,7 +109,8 @@ var background = {
   base: 'white',
   secondary: _colorTokens.nextGenColors['gray-100'],
   card: _colorTokens.nextGenColors['blue-100'],
-  suggestion: '#ecf0f5'
+  suggestion: '#ecf0f5',
+  hover: _colorTokens.nextGenColors['gray-100']
 };
 var card = {
   blue: _colorTokens.nextGenColors['blue-100'],

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

@@ -13,6 +13,7 @@ export declare const astroBlacklistStory: {
     DataTable: string[];
     NavBar: string[];
     SearchField: string[];
+    Callout: string[];
 };
 export declare const nextGenOnlyComponents: string[];
 export default nextGenConvertedComponents;

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'Callout', 'Table', 'TableBase'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -20,7 +20,8 @@ exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;
 var astroBlacklistStory = {
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
-  SearchField: ['Onyx With Filter']
+  SearchField: ['Onyx With Filter'],
+  Callout: ['Customizations']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
 var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];

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

@@ -43,6 +43,7 @@ declare const _default: {
             secondary: string;
             card: string;
             suggestion: string;
+            hover: string;
         };
         iconWrapper: {
             wrapper: {
@@ -2543,9 +2544,9 @@ declare const _default: {
         };
         container: {
             p: string;
+            borderColor: string;
             boxShadow: string;
             border: string;
-            borderColor: string;
             borderRadius: string;
             display: string;
             color: string;
@@ -2591,6 +2592,19 @@ declare const _default: {
                 backgroundColor: string;
             };
         };
+        tableWrapper: {
+            overflowY: string;
+            p: string;
+            borderColor: string;
+            boxShadow: string;
+            border: string;
+            borderRadius: string;
+            display: string;
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            flex: string;
+        };
     };
     variants: {
         attachment: {
@@ -3714,6 +3728,170 @@ declare const _default: {
                 color: string;
             };
         };
+        callout: {
+            base: {
+                width: string;
+                backgroundColor: string;
+                lineHeight: string;
+                p: string;
+                border: string;
+                borderLeft: string;
+                borderLeftColor: string;
+                borderRadius: string;
+                alignItems: string;
+                color: string;
+                '&.is-success, > .is-success': {
+                    borderColor: string;
+                    borderLeftColor: string;
+                };
+                '&.is-warning, > .is-warning': {
+                    borderColor: string;
+                    borderLeftColor: string;
+                };
+                '&.is-error, > .is-error': {
+                    borderColor: string;
+                    borderLeftColor: string;
+                };
+            };
+            icon: {
+                ml: string;
+                mr: string;
+                minWidth: string;
+                width: string;
+                height: string;
+            };
+        };
+        table: {
+            container: {
+                overflow: string;
+            };
+            caption: {
+                px: string;
+                color: string;
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            head: {
+                px: string;
+                py: string;
+                fontSize: string;
+                fontWeight: string;
+                color: string;
+                lineHeight: string;
+            };
+            body: {
+                borderTopColor: string;
+                borderBottom: string;
+                backgroundColor: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '&& > tr:not(:last-child)': {
+                    borderBottom: string;
+                    borderBottomColor: string;
+                };
+                '&& > tr:nth-of-type(odd) ': {
+                    backgroundColor: string;
+                };
+                '&& > tr:last-child': {
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                };
+            };
+            data: {
+                py: string;
+                fontWeight: string;
+                px: string;
+                fontSize: string;
+                color: string;
+                lineHeight: string;
+            };
+        };
+        tableBase: {
+            caption: {
+                backgroundColor: string;
+                px: string;
+                color: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+            };
+            row: {
+                borderBottom: string;
+                borderBottomColor: string;
+                '&.is-focused': {
+                    outlineOffset: string;
+                    outline: string;
+                    outlineColor: string;
+                };
+                '&.is-hovered': {
+                    bg: string;
+                };
+                '&:nth-of-type(odd)': {
+                    bg: string;
+                    '&.is-hovered': {
+                        bg: string;
+                    };
+                };
+            };
+            thead: {
+                backgroundColor: string;
+                '&:not(.has-caption)': {
+                    '& > tr:first-child': {
+                        borderTopLeftRadius: string;
+                        borderTopRightRadius: string;
+                        '& > th:first-of-type': {
+                            borderTopLeftRadius: string;
+                        };
+                        '& > th:last-of-type': {
+                            borderTopRightRadius: string;
+                        };
+                    };
+                };
+            };
+            head: {
+                px: string;
+                py: string;
+                fontSize: string;
+                fontWeight: string;
+                color: string;
+                lineHeight: string;
+                '&.is-focused': {
+                    outlineOffset: string;
+                    outline: string;
+                    outlineColor: string;
+                };
+            };
+            tbody: {
+                borderTopColor: string;
+                borderBottom: string;
+                backgroundColor: string;
+                '& > tr:last-child': {
+                    borderBottom: string;
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                    '& > td:first-of-type': {
+                        borderBottomLeftRadius: string;
+                    };
+                    '& > td:last-of-type': {
+                        borderBottomRightRadius: string;
+                    };
+                };
+            };
+            data: {
+                py: string;
+                fontWeight: string;
+                px: string;
+                fontSize: string;
+                color: string;
+                lineHeight: string;
+                '&.is-focused': {
+                    outlineOffset: string;
+                    outline: string;
+                    outlineColor: string;
+                };
+            };
+        };
     };
     images: {
         avatar: {};

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    base: {
+        width: string;
+        backgroundColor: string;
+        lineHeight: string;
+        p: string;
+        border: string;
+        borderLeft: string;
+        borderLeftColor: string;
+        borderRadius: string;
+        alignItems: string;
+        color: string;
+        '&.is-success, > .is-success': {
+            borderColor: string;
+            borderLeftColor: string;
+        };
+        '&.is-warning, > .is-warning': {
+            borderColor: string;
+            borderLeftColor: string;
+        };
+        '&.is-error, > .is-error': {
+            borderColor: string;
+            borderLeftColor: string;
+        };
+    };
+    icon: {
+        ml: string;
+        mr: string;
+        minWidth: string;
+        width: string;
+        height: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
+var base = {
+  width: '100%',
+  backgroundColor: 'background.secondary',
+  lineHeight: 'md',
+  p: 'md',
+  border: 'none',
+  borderLeft: '5px solid',
+  borderLeftColor: 'active',
+  borderRadius: '.25rem',
+  alignItems: 'flex-start',
+  color: 'text.primary',
+  '&.is-success, > .is-success': {
+    borderColor: 'unset',
+    borderLeftColor: 'success.bright'
+  },
+  '&.is-warning, > .is-warning': {
+    borderColor: 'unset',
+    borderLeftColor: 'warning.bright'
+  },
+  '&.is-error, > .is-error': {
+    borderColor: 'unset',
+    borderLeftColor: 'critical.bright'
+  }
+};
+var icon = {
+  ml: '0',
+  mr: 'md',
+  minWidth: "".concat(_tShirtSizes["default"].sm, " !important"),
+  width: "".concat(_tShirtSizes["default"].sm, " !important"),
+  height: "".concat(_tShirtSizes["default"].sm, " !important")
+};
+var _default = {
+  base: base,
+  icon: icon
+};
+exports["default"] = _default;

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

@@ -62,9 +62,9 @@ declare const _default: {
     };
     container: {
         p: string;
+        borderColor: string;
         boxShadow: string;
         border: string;
-        borderColor: string;
         borderRadius: string;
         display: string;
         color: string;
@@ -110,5 +110,18 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    tableWrapper: {
+        overflowY: string;
+        p: string;
+        borderColor: string;
+        boxShadow: string;
+        border: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
 };
 export default _default;

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

@@ -36,7 +36,8 @@ var interactive = {
   }
 };
 var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
-  p: 'lg'
+  p: 'lg',
+  borderColor: 'border.base'
 });
 var dark = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   border: 'none',
@@ -81,6 +82,9 @@ var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
 var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
   display: 'flex'
 });
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  overflowY: 'hidden'
+});
 var _default = {
   interactive: interactive,
   dark: dark,
@@ -88,6 +92,7 @@ var _default = {
   activeCard: activeCard,
   container: container,
   suggestionColumn: suggestionColumn,
-  suggestionRow: suggestionRow
+  suggestionRow: suggestionRow,
+  tableWrapper: tableWrapper
 };
 exports["default"] = _default;

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

@@ -0,0 +1,45 @@
+export declare const table: {
+    container: {
+        overflow: string;
+    };
+    caption: {
+        px: string;
+        color: string;
+        borderBottom: string;
+        borderBottomColor: string;
+    };
+    head: {
+        px: string;
+        py: string;
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        lineHeight: string;
+    };
+    body: {
+        borderTopColor: string;
+        borderBottom: string;
+        backgroundColor: string;
+        borderBottomLeftRadius: string;
+        borderBottomRightRadius: string;
+        '&& > tr:not(:last-child)': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        '&& > tr:nth-of-type(odd) ': {
+            backgroundColor: string;
+        };
+        '&& > tr:last-child': {
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+        };
+    };
+    data: {
+        py: string;
+        fontWeight: string;
+        px: string;
+        fontSize: string;
+        color: string;
+        lineHeight: string;
+    };
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+
+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 _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");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.table = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var container = {
+  overflow: 'hidden'
+};
+var caption = {
+  px: 'lg',
+  color: 'text.primary',
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base'
+};
+var head = {
+  px: 'lg',
+  py: 'sm',
+  fontSize: 'md',
+  fontWeight: '2',
+  color: 'text.primary',
+  lineHeight: 'body'
+};
+var body = {
+  borderTopColor: 'border.base',
+  borderBottom: 'unset',
+  backgroundColor: 'background.base',
+  borderBottomLeftRadius: '16px',
+  borderBottomRightRadius: '16px',
+  '&& > tr:not(:last-child)': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base'
+  },
+  '&& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'background.base'
+  },
+  '&& > tr:last-child': {
+    borderBottomLeftRadius: '16px',
+    borderBottomRightRadius: '16px'
+  }
+};
+var data = _objectSpread(_objectSpread({}, head), {}, {
+  py: 'md',
+  fontWeight: '1'
+});
+var table = {
+  container: container,
+  caption: caption,
+  head: head,
+  body: body,
+  data: data
+};
+exports.table = table;

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

@@ -0,0 +1,86 @@
+export declare const tableBase: {
+    caption: {
+        backgroundColor: string;
+        px: string;
+        color: string;
+        borderBottom: string;
+        borderBottomColor: string;
+        borderTopLeftRadius: string;
+        borderTopRightRadius: string;
+    };
+    row: {
+        borderBottom: string;
+        borderBottomColor: string;
+        '&.is-focused': {
+            outlineOffset: string;
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&:nth-of-type(odd)': {
+            bg: string;
+            '&.is-hovered': {
+                bg: string;
+            };
+        };
+    };
+    thead: {
+        backgroundColor: string;
+        '&:not(.has-caption)': {
+            '& > tr:first-child': {
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+                '& > th:first-of-type': {
+                    borderTopLeftRadius: string;
+                };
+                '& > th:last-of-type': {
+                    borderTopRightRadius: string;
+                };
+            };
+        };
+    };
+    head: {
+        px: string;
+        py: string;
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        lineHeight: string;
+        '&.is-focused': {
+            outlineOffset: string;
+            outline: string;
+            outlineColor: string;
+        };
+    };
+    tbody: {
+        borderTopColor: string;
+        borderBottom: string;
+        backgroundColor: string;
+        '& > tr:last-child': {
+            borderBottom: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '& > td:first-of-type': {
+                borderBottomLeftRadius: string;
+            };
+            '& > td:last-of-type': {
+                borderBottomRightRadius: string;
+            };
+        };
+    };
+    data: {
+        py: string;
+        fontWeight: string;
+        px: string;
+        fontSize: string;
+        color: string;
+        lineHeight: string;
+        '&.is-focused': {
+            outlineOffset: string;
+            outline: string;
+            outlineColor: string;
+        };
+    };
+};