@pingux/astro 2.160.1-alpha.3 → 2.161.0

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

@@ -62,13 +62,13 @@ var content = {
 };
 var headingContainer = {
   position: 'relative',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   px: 'lg',
   py: 'md'
 };
 var header = {
   position: 'relative',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   pb: 'md'
 };
 var body = {};

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

@@ -64,6 +64,8 @@ declare const _default: {
         };
     };
     calendarCell: {
+        alignItems: string;
+        justifyContent: string;
         cursor: string;
         textAlign: string;
         position: string;
@@ -100,5 +102,9 @@ declare const _default: {
         width: string;
         height: string;
     };
+    calendarRow: {
+        width: string;
+        flexDirection: string;
+    };
 };
 export default _default;

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

@@ -70,6 +70,8 @@ var calendarButton = {
   }
 };
 var calendarCell = {
+  alignItems: 'center',
+  justifyContent: 'center',
   cursor: 'default',
   textAlign: 'center',
   position: 'relative',
@@ -88,6 +90,10 @@ var columnHeader = {
   width: '40px',
   height: '40px'
 };
+var calendarRow = {
+  width: '100%',
+  flexDirection: 'row !important'
+};
 var calendarHeaderContainer = {
   justifyContent: 'space-between',
   mt: 'sm',
@@ -113,5 +119,6 @@ var _default = exports["default"] = {
   calendarContainer: calendarContainer,
   calendarHeader: calendarHeader,
   calendarHeaderContainer: calendarHeaderContainer,
-  columnHeader: columnHeader
+  columnHeader: columnHeader,
+  calendarRow: calendarRow
 };

package/lib/cjs/components/RangeCalendar/RangeCalendarGrid.js

@@ -52,7 +52,8 @@ var RangeCalendarGrid = function RangeCalendarGrid(props) {
   }, (0, _map["default"])(_context2 = (0, _from["default"])((0, _keys["default"])(_context3 = Array(weeksInMonth)).call(_context3))).call(_context2, function (weekIndex) {
     var _context4;
     return (0, _react2.jsx)(_index.TableRow, {
-      key: weekIndex
+      key: weekIndex,
+      variant: "rangeCalendar.calendarRow"
     }, (0, _map["default"])(_context4 = getDatesInWeek(weekIndex, startDate)).call(_context4, function (date) {
       return (date === null || date === void 0 ? void 0 : date.day) && (0, _react2.jsx)(_RangeCalendarCell["default"], {
         key: date.toString(),

package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.js

@@ -13,6 +13,7 @@ var _ChevronLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/Chevron
 var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
 var _i18n = require("@react-aria/i18n");
 var _visuallyHidden = require("@react-aria/visually-hidden");
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["onFocusChange"];
@@ -42,6 +43,8 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
       return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
     }
   };
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    calendarIconSize = _useGetTheme.calendarIconSize;
   return (0, _react2.jsx)(_index.Box, {
     variant: "rangeCalendar.calendarHeaderContainer",
     isRow: true
@@ -49,17 +52,19 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
     "aria-live": "assertive"
   }, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    variant: "rangeCalendar.calendarHeader"
+    variant: "rangeCalendar.calendarHeader",
+    color: "magenta"
   }, (0, _react2.jsx)(_index.Box, {
     style: {
       position: 'absolute',
       left: '10px'
     }
   }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, prevButtonProps, {
-    "aria-label": "Previous month navigation"
+    "aria-label": "Previous month navigation",
+    color: "pink"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronLeftIcon["default"],
-    size: 25,
+    size: calendarIconSize,
     title: {
       name: 'Chevron Left Icon'
     }
@@ -89,7 +94,7 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
     "aria-label": "Next month navigation"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],
-    size: 25,
+    size: calendarIconSize,
     title: {
       name: 'Chevron Right Icon'
     }

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

@@ -47,6 +47,7 @@ declare const useGetTheme: () => {
     defaultLoaderSize: number;
     defaultIconColor: string;
     defaultIconSize: import("../..").IconSize;
+    calendarIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
     name: string;
     themeState: {
@@ -106,6 +107,7 @@ declare const useGetTheme: () => {
     accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;
     defaultIconSize: import("../..").IconSize;
+    calendarIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
     name: string;
     themeState: {

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

@@ -33,7 +33,7 @@ var font = {
 var hoverDark = _chromaJs["default"].mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {
   base: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
-  dark: _chromaJs["default"].mix('#23282e', 'white', 0.25, 'rgb').hex(),
+  dark: '#46505C',
   input: _colorTokens.nextGenColors['gray-500'],
   separator: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
   attachment: '#39414b',
@@ -49,10 +49,6 @@ var background = {
   card: '#1a1e22',
   hover: hoverDark
 };
-var codeEditor = {
-  backgroundColor: background.secondary,
-  headerColor: _colorTokens.nextGenColors['gray-900']
-};
 var twoTone = {
   bg: {
     orange: _colorTokens.nextGenColors['orange-500'],
@@ -115,6 +111,10 @@ var backgroundSecondary = _colorTokens.nextGenColors['gray-900'];
 var backgroundCard = '#1a1e22';
 var backgroundSuggestion = '#ecf0f5';
 var backgroundHover = hoverDark;
+var codeEditor = {
+  backgroundColor: backgroundSecondary,
+  headerColor: _colorTokens.nextGenColors['gray-900']
+};
 var colors = exports.colors = _objectSpread(_objectSpread({
   border: border,
   iconWrapper: iconWrapper

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

@@ -49,5 +49,6 @@ export declare const nextGenDarkThemeValues: {
     accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;
     defaultIconSize: import("../../../..").IconSize;
+    calendarIconSize: import("../../../..").IconSize;
     buttonLoaderSize: import("../../../..").LoaderSize;
 };

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

@@ -26,7 +26,7 @@ var baseIconButton = {
     path: {
       fill: 'gray-400'
     },
-    backgroundColor: 'background.secondary'
+    backgroundColor: 'backgroundSecondary'
   },
   '&.is-pressed': {
     backgroundColor: 'gray-800',
@@ -53,10 +53,10 @@ var iconButtons = {
   },
   searchClearButton: {
     '&.is-hovered': {
-      backgroundColor: 'background.secondary'
+      backgroundColor: 'backgroundSecondary'
     },
     '&.is-pressed': {
-      backgroundColor: 'background.secondary'
+      backgroundColor: 'backgroundSecondary'
     }
   },
   hintButton: hintButton,

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

@@ -0,0 +1,42 @@
+declare const _default: {
+    calendarButton: {
+        color: string;
+        '&.is-hovered': {
+            bg: string;
+            color: string;
+            cursor: string;
+        };
+        '&.is-selected': {
+            color: string;
+            '&.is-hovered': {
+                bg: string;
+                color: string;
+            };
+        };
+        '&.is-range-ends': {
+            bg: string;
+            color: string;
+            outline: string;
+            boxShadow: string;
+        };
+        '&.is-unavailable': {
+            color: string;
+            bg: string;
+        };
+        '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+            color: string;
+            bg: string;
+            opacity: number;
+        };
+        '&.is-disabled': {
+            '&.is-hovered': {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+    };
+    columnHeader: {
+        color: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var calendarButton = {
+  color: 'text.secondary',
+  '&.is-hovered': {
+    bg: 'active',
+    color: 'black',
+    cursor: 'pointer'
+  },
+  '&.is-selected': {
+    color: 'text.secondary',
+    '&.is-hovered': {
+      bg: 'active',
+      color: 'black'
+    }
+  },
+  '&.is-range-ends': {
+    bg: 'active',
+    color: 'black',
+    outline: 'none',
+    boxShadow: 'none'
+  },
+  '&.is-unavailable': {
+    color: 'text.secondary',
+    bg: 'border.dark'
+  },
+  '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+    color: 'text.secondary',
+    bg: 'border.dark',
+    opacity: 1
+  },
+  '&.is-disabled': {
+    '&.is-hovered': {
+      backgroundColor: 'unset',
+      color: 'gray-100'
+    }
+  }
+};
+var columnHeader = {
+  color: 'text.secondary'
+};
+var _default = exports["default"] = {
+  calendarButton: calendarButton,
+  columnHeader: columnHeader
+};

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

@@ -20,6 +20,47 @@ declare const _default: {
             };
         };
     };
+    rangeCalendar: {
+        calendarButton: {
+            color: string;
+            '&.is-hovered': {
+                bg: string;
+                color: string;
+                cursor: string;
+            };
+            '&.is-selected': {
+                color: string;
+                '&.is-hovered': {
+                    bg: string;
+                    color: string;
+                };
+            };
+            '&.is-range-ends': {
+                bg: string;
+                color: string;
+                outline: string;
+                boxShadow: string;
+            };
+            '&.is-unavailable': {
+                color: string;
+                bg: string;
+            };
+            '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+                color: string;
+                bg: string;
+                opacity: number;
+            };
+            '&.is-disabled': {
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    color: string;
+                };
+            };
+        };
+        columnHeader: {
+            color: string;
+        };
+    };
     attachment: {
         container: {
             backgroundColor: string;

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

@@ -15,6 +15,7 @@ var _listview = require("./listview");
 var _menu = require("./menu");
 var _message = require("./message");
 var _navbar = require("./navbar");
+var _rangeCalendar = _interopRequireDefault(require("./rangeCalendar"));
 var _skeleton = _interopRequireDefault(require("./skeleton"));
 var listBox = {
   container: {
@@ -174,6 +175,7 @@ var statusIcon = {
 };
 var _default = exports["default"] = {
   rockerButton: rockerButton,
+  rangeCalendar: _rangeCalendar["default"],
   attachment: attachment,
   avatar: _avatar.avatar,
   message: _message.message,

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

@@ -42,5 +42,6 @@ export declare const astroThemeValues: {
     defaultLoaderSize: number;
     defaultIconColor: string;
     defaultIconSize: IconSize;
+    calendarIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
 };

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

@@ -28,6 +28,7 @@ var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
+var calendarIconSize = 25;
 var astroThemeValues = exports.astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   activeColor: activeColor,
@@ -47,5 +48,6 @@ var astroThemeValues = exports.astroThemeValues = {
   defaultLoaderSize: defaultLoaderSize,
   defaultIconColor: defaultIconColor,
   defaultIconSize: defaultIconSize,
+  calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize
 };

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 = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
 var componentSpecificNextGenBlacklist = exports.componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -52,5 +52,6 @@ export declare const nextGenThemeValues: {
     iFrameContentDivBackgroundColor: string;
     rockerButtonGap: string;
     defaultIconSize: IconSize;
+    calendarIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
 };

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

@@ -31,6 +31,7 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
 var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
+var calendarIconSize = 'sm';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
@@ -44,5 +45,6 @@ var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
   defaultIconSize: defaultIconSize,
+  calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize
 }, _customSizes["default"]);

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

@@ -4934,6 +4934,91 @@ declare const _default: {
                 marginLeft: string;
             };
         };
+        rangeCalendar: {
+            calendarBody: {
+                py: string;
+                borderTop: string;
+                borderTopColor: string;
+                backgroundColor: string;
+                '& > tr:nth-of-type(odd) ': {
+                    backgroundColor: string;
+                };
+            };
+            calendarButton: {
+                height: string;
+                width: string;
+                fontWeight: string;
+                borderRadius: string;
+                color: string;
+                '&.is-hovered': {
+                    bg: string;
+                    color: string;
+                    cursor: string;
+                };
+                '&.is-selected': {
+                    bg: string;
+                    '&.is-hovered': {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                '&.is-range-ends': {
+                    bg: string;
+                    color: string;
+                    outline: string;
+                    boxShadow: string;
+                };
+                '&.is-selection-start': {
+                    borderRadius: string;
+                };
+                '&.is-selection-end': {
+                    borderRadius: string;
+                };
+                '&.is-start-and-end': {
+                    borderRadius: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineStyle: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                '&.is-unavailable': {
+                    backgroundColor: string;
+                    color: string;
+                };
+                '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+                    backgroundColor: string;
+                    color: string;
+                    opacity: number;
+                };
+                '&.is-disabled': {
+                    '&.is-hovered': {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
+            };
+            calendarCell: {
+                height: string;
+            };
+            calendarContainer: {
+                width: string;
+                textAlign: string;
+                color: string;
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+                borderRadius: string;
+                p: string;
+            };
+            columnHeader: {
+                color: string;
+            };
+            calendarRow: {
+                bg: string;
+            };
+        };
         response: {
             iconWrapper: {
                 border: string;

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

@@ -129,14 +129,14 @@ var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'font.base',
   '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     outlineColor: 'gray-700',
-    backgroundColor: 'background.secondary'
+    backgroundColor: 'backgroundSecondary'
   }),
   '&.is-pressed': {
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'backgroundSecondary',
     color: 'font.base'
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'backgroundSecondary',
     color: 'font.base'
   }, boxShadowNone)
 });

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

@@ -0,0 +1,86 @@
+declare const _default: {
+    calendarBody: {
+        py: string;
+        borderTop: string;
+        borderTopColor: string;
+        backgroundColor: string;
+        '& > tr:nth-of-type(odd) ': {
+            backgroundColor: string;
+        };
+    };
+    calendarButton: {
+        height: string;
+        width: string;
+        fontWeight: string;
+        borderRadius: string;
+        color: string;
+        '&.is-hovered': {
+            bg: string;
+            color: string;
+            cursor: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            '&.is-hovered': {
+                bg: string;
+                color: string;
+            };
+        };
+        '&.is-range-ends': {
+            bg: string;
+            color: string;
+            outline: string;
+            boxShadow: string;
+        };
+        '&.is-selection-start': {
+            borderRadius: string;
+        };
+        '&.is-selection-end': {
+            borderRadius: string;
+        };
+        '&.is-start-and-end': {
+            borderRadius: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-unavailable': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+            backgroundColor: string;
+            color: string;
+            opacity: number;
+        };
+        '&.is-disabled': {
+            '&.is-hovered': {
+                color: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    calendarCell: {
+        height: string;
+    };
+    calendarContainer: {
+        width: string;
+        textAlign: string;
+        color: string;
+        border: string;
+        borderColor: string;
+        boxShadow: string;
+        borderRadius: string;
+        p: string;
+    };
+    columnHeader: {
+        color: string;
+    };
+    calendarRow: {
+        bg: string;
+    };
+};
+export default _default;