@pingux/astro 2.160.1-alpha.3 → 2.161.0

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

@@ -0,0 +1,98 @@
+"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 calendarBody = {
+  py: 'sm',
+  borderTop: '1px solid',
+  borderTopColor: 'border.base',
+  backgroundColor: 'backgroundBase',
+  '& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'backgroundBase'
+  }
+};
+var calendarButton = {
+  height: '31px',
+  width: '31px',
+  fontWeight: '2',
+  borderRadius: '50%',
+  color: 'text.primary',
+  '&.is-hovered': {
+    bg: 'active',
+    color: 'white',
+    cursor: 'pointer'
+  },
+  '&.is-selected': {
+    bg: 'lightteal',
+    '&.is-hovered': {
+      bg: 'active',
+      color: 'white'
+    }
+  },
+  '&.is-range-ends': {
+    bg: 'active',
+    color: 'white',
+    outline: 'none',
+    boxShadow: 'none'
+  },
+  '&.is-selection-start': {
+    borderRadius: '50%'
+  },
+  '&.is-selection-end': {
+    borderRadius: '50%'
+  },
+  '&.is-start-and-end': {
+    borderRadius: '50%'
+  },
+  '&.is-focused': {
+    outline: '2px',
+    outlineStyle: 'solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  },
+  '&.is-unavailable': {
+    backgroundColor: 'gray-300',
+    color: 'text.primary'
+  },
+  '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+    backgroundColor: 'gray-300',
+    color: 'text.primary',
+    opacity: 1
+  },
+  '&.is-disabled': {
+    '&.is-hovered': {
+      color: 'gray-900',
+      backgroundColor: 'unset'
+    }
+  }
+};
+var calendarCell = {
+  height: '36px'
+};
+var columnHeader = {
+  color: 'text.primary'
+};
+var calendarContainer = {
+  width: '611px',
+  textAlign: 'center',
+  color: 'backgroundBase',
+  border: '1px solid',
+  borderColor: 'border.base',
+  boxShadow: 'standard',
+  borderRadius: '16px',
+  p: 'sm'
+};
+var calendarRow = {
+  bg: 'backgroundBase'
+};
+var _default = exports["default"] = {
+  calendarBody: calendarBody,
+  calendarButton: calendarButton,
+  calendarCell: calendarCell,
+  calendarContainer: calendarContainer,
+  columnHeader: columnHeader,
+  calendarRow: calendarRow
+};

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

@@ -9,7 +9,7 @@ var switchable = exports.switchable = {
   container: {
     minWidth: '32px',
     color: 'neutral.80',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     border: '1px solid',
     borderColor: 'neutral.80',
     borderRadius: 9999,

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

@@ -1327,6 +1327,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/variants.js

@@ -34,6 +34,7 @@ var _navbar = require("./navbar");
 var _panelHeader = _interopRequireDefault(require("./panelHeader"));
 var _popoverMenu = _interopRequireDefault(require("./popoverMenu"));
 var _prompt = _interopRequireDefault(require("./prompt"));
+var _rangeCalendar = _interopRequireDefault(require("./rangeCalendar"));
 var _response = _interopRequireDefault(require("./response"));
 var _searchNav = _interopRequireDefault(require("./searchNav"));
 var _stepper = _interopRequireDefault(require("./stepper"));
@@ -427,6 +428,7 @@ var _default = exports["default"] = {
   popoverMenu: _popoverMenu["default"],
   progressBar: progressBar,
   prompt: _prompt["default"],
+  rangeCalendar: _rangeCalendar["default"],
   response: _response["default"],
   rockerButton: rockerButton,
   searchNav: _searchNav["default"],

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

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

@@ -63,6 +63,8 @@ var calendarButton = {
   }
 };
 var calendarCell = {
+  alignItems: 'center',
+  justifyContent: 'center',
   cursor: 'default',
   textAlign: 'center',
   position: 'relative',
@@ -81,6 +83,10 @@ var columnHeader = {
   width: '40px',
   height: '40px'
 };
+var calendarRow = {
+  width: '100%',
+  flexDirection: 'row !important'
+};
 var calendarHeaderContainer = {
   justifyContent: 'space-between',
   mt: 'sm',
@@ -106,5 +112,6 @@ export default {
   calendarContainer: calendarContainer,
   calendarHeader: calendarHeader,
   calendarHeaderContainer: calendarHeaderContainer,
-  columnHeader: columnHeader
+  columnHeader: columnHeader,
+  calendarRow: calendarRow
 };

package/lib/components/RangeCalendar/RangeCalendarGrid.js

@@ -44,7 +44,8 @@ var RangeCalendarGrid = function RangeCalendarGrid(props) {
   }, _mapInstanceProperty(_context2 = _Array$from(_keysInstanceProperty(_context3 = Array(weeksInMonth)).call(_context3))).call(_context2, function (weekIndex) {
     var _context4;
     return ___EmotionJSX(TableRow, {
-      key: weekIndex
+      key: weekIndex,
+      variant: "rangeCalendar.calendarRow"
     }, _mapInstanceProperty(_context4 = getDatesInWeek(weekIndex, startDate)).call(_context4, function (date) {
       return (date === null || date === void 0 ? void 0 : date.day) && ___EmotionJSX(RangeCalendarCell, {
         key: date.toString(),

package/lib/components/RangeCalendar/RangeCalendarHeader.js

@@ -6,6 +6,7 @@ import ChevronLeftIcon from '@pingux/mdi-react/ChevronLeftIcon';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import { useDateFormatter } from '@react-aria/i18n';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useGetTheme } from '../../hooks';
 import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var RangeCalendarHeader = function RangeCalendarHeader(props) {
@@ -34,6 +35,8 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
       return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
     }
   };
+  var _useGetTheme = useGetTheme(),
+    calendarIconSize = _useGetTheme.calendarIconSize;
   return ___EmotionJSX(Box, {
     variant: "rangeCalendar.calendarHeaderContainer",
     isRow: true
@@ -41,17 +44,19 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
     "aria-live": "assertive"
   }, ___EmotionJSX(Text, null, calendarProps['aria-label'])), ___EmotionJSX(Box, {
     isRow: true,
-    variant: "rangeCalendar.calendarHeader"
+    variant: "rangeCalendar.calendarHeader",
+    color: "magenta"
   }, ___EmotionJSX(Box, {
     style: {
       position: 'absolute',
       left: '10px'
     }
   }, ___EmotionJSX(IconButton, _extends({}, prevButtonProps, {
-    "aria-label": "Previous month navigation"
+    "aria-label": "Previous month navigation",
+    color: "pink"
   }), ___EmotionJSX(Icon, {
     icon: ChevronLeftIcon,
-    size: 25,
+    size: calendarIconSize,
     title: {
       name: 'Chevron Left Icon'
     }
@@ -81,7 +86,7 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
     "aria-label": "Next month navigation"
   }), ___EmotionJSX(Icon, {
     icon: ChevronRightIcon,
-    size: 25,
+    size: calendarIconSize,
     title: {
       name: 'Chevron Right Icon'
     }

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

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

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

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

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

@@ -0,0 +1,43 @@
+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'
+};
+export default {
+  calendarButton: calendarButton,
+  columnHeader: columnHeader
+};

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

@@ -7,6 +7,7 @@ import { listView, listViewItem, lisViewItemChart } from './listview';
 import { menu, menuItem } from './menu';
 import { message } from './message';
 import { navBar } from './navbar';
+import rangeCalendar from './rangeCalendar';
 import skeleton from './skeleton';
 var listBox = {
   container: {
@@ -166,6 +167,7 @@ var statusIcon = {
 };
 export default {
   rockerButton: rockerButton,
+  rangeCalendar: rangeCalendar,
   attachment: attachment,
   avatar: avatar,
   message: message,

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

@@ -16,6 +16,7 @@ var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
+var calendarIconSize = 25;
 export var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   activeColor: activeColor,
@@ -35,5 +36,6 @@ export var astroThemeValues = {
   defaultLoaderSize: defaultLoaderSize,
   defaultIconColor: defaultIconColor,
   defaultIconSize: defaultIconSize,
+  calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize
 };

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

@@ -1,4 +1,4 @@
-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'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -21,6 +21,7 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
 var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
+var calendarIconSize = 'sm';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
@@ -34,5 +35,6 @@ export var nextGenThemeValues = _objectSpread({
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
   defaultIconSize: defaultIconSize,
+  calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize
 }, customSizes);

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

@@ -122,14 +122,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/styles/themes/next-gen/variants/rangeCalendar.js

@@ -0,0 +1,91 @@
+var calendarBody = {
+  py: 'sm',
+  borderTop: '1px solid',
+  borderTopColor: 'border.base',
+  backgroundColor: 'backgroundBase',
+  '& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'backgroundBase'
+  }
+};
+var calendarButton = {
+  height: '31px',
+  width: '31px',
+  fontWeight: '2',
+  borderRadius: '50%',
+  color: 'text.primary',
+  '&.is-hovered': {
+    bg: 'active',
+    color: 'white',
+    cursor: 'pointer'
+  },
+  '&.is-selected': {
+    bg: 'lightteal',
+    '&.is-hovered': {
+      bg: 'active',
+      color: 'white'
+    }
+  },
+  '&.is-range-ends': {
+    bg: 'active',
+    color: 'white',
+    outline: 'none',
+    boxShadow: 'none'
+  },
+  '&.is-selection-start': {
+    borderRadius: '50%'
+  },
+  '&.is-selection-end': {
+    borderRadius: '50%'
+  },
+  '&.is-start-and-end': {
+    borderRadius: '50%'
+  },
+  '&.is-focused': {
+    outline: '2px',
+    outlineStyle: 'solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  },
+  '&.is-unavailable': {
+    backgroundColor: 'gray-300',
+    color: 'text.primary'
+  },
+  '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+    backgroundColor: 'gray-300',
+    color: 'text.primary',
+    opacity: 1
+  },
+  '&.is-disabled': {
+    '&.is-hovered': {
+      color: 'gray-900',
+      backgroundColor: 'unset'
+    }
+  }
+};
+var calendarCell = {
+  height: '36px'
+};
+var columnHeader = {
+  color: 'text.primary'
+};
+var calendarContainer = {
+  width: '611px',
+  textAlign: 'center',
+  color: 'backgroundBase',
+  border: '1px solid',
+  borderColor: 'border.base',
+  boxShadow: 'standard',
+  borderRadius: '16px',
+  p: 'sm'
+};
+var calendarRow = {
+  bg: 'backgroundBase'
+};
+export default {
+  calendarBody: calendarBody,
+  calendarButton: calendarButton,
+  calendarCell: calendarCell,
+  calendarContainer: calendarContainer,
+  columnHeader: columnHeader,
+  calendarRow: calendarRow
+};

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

@@ -2,7 +2,7 @@ export var switchable = {
   container: {
     minWidth: '32px',
     color: 'neutral.80',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     border: '1px solid',
     borderColor: 'neutral.80',
     borderRadius: 9999,

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

@@ -27,6 +27,7 @@ import { navBar } from './navbar';
 import panelHeader from './panelHeader';
 import popoverMenu from './popoverMenu';
 import prompt from './prompt';
+import rangeCalendar from './rangeCalendar';
 import response from './response';
 import searchNav from './searchNav';
 import stepper from './stepper';
@@ -417,6 +418,7 @@ export default {
   popoverMenu: popoverMenu,
   progressBar: progressBar,
   prompt: prompt,
+  rangeCalendar: rangeCalendar,
   response: response,
   rockerButton: rockerButton,
   searchNav: searchNav,