@pingux/astro 2.103.0 → 2.104.0-alpha.0

package/lib/cjs/components/Calendar/Calendar.js

@@ -112,7 +112,8 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "itemTitle",
     role: "heading",
     "aria-level": 3,
-    fontWeight: 3
+    fontWeight: 3,
+    flex: 1
   }, title);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
     ref: calenderRef,
@@ -131,27 +132,30 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return handleYearSelection(nav.PREVIOUS);
     },
     mx: "sm",
+    p: 0,
     isDisabled: prevButtonProps.isDisabled,
     "aria-label": "Previous year navigation"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronDoubleLeftIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Double Left Icon'
     }
   })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, prevButtonProps, {
-    "aria-label": "Previous month navigation"
+    "aria-label": "Previous month navigation",
+    p: 0
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronLeftIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Left Icon'
     }
   })), renderTitle, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+    p: 0,
     "aria-label": "Next month navigation"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Right Icon'
     }
@@ -161,11 +165,12 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return handleYearSelection(nav.NEXT);
     },
     mx: "sm",
+    p: 0,
     isDisabled: nextButtonProps.isDisabled,
     "aria-label": "Next year navigation"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronDoubleRightIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Double Right Icon'
     }

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

@@ -1,6 +1,7 @@
 declare const _default: {
     calendarBody: {
         pb: string;
+        px: string;
         borderTop: string;
         borderTopColor: string;
         '& > tr:nth-of-type(odd) ': {
@@ -26,9 +27,10 @@ declare const _default: {
             boxShadow: string;
         };
         '&.is-focused': {
+            outlineOffset: string;
+            zIndex: number;
             outline: string;
             outlineColor: string;
-            outlineOffset: string;
         };
         '&.is-unavailable': {
             backgroundColor: string;

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

@@ -19,6 +19,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 calendarBody = {
   pb: '10px',
+  px: '1px',
   borderTop: '1px solid',
   borderTopColor: 'neutral.80',
   '& > tr:nth-of-type(odd) ': {
@@ -43,7 +44,10 @@ var calendarButton = {
     outline: 'none',
     boxShadow: 'none'
   },
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    outlineOffset: '0px',
+    zIndex: 1
+  }),
   '&.is-unavailable': {
     backgroundColor: 'neutral.80'
   },

package/lib/cjs/components/DatePicker/DatePicker.stories.js

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UnavailableDates = exports.Success = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.UnavailableDates = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -24,6 +24,7 @@ var _utils = require("@react-aria/utils");
 var _addonActions = require("@storybook/addon-actions");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 var _DatePicker2 = _interopRequireDefault(require("./DatePicker.mdx"));
@@ -43,6 +44,14 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DatePicker2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
     }
   },
   argTypes: _objectSpread({
@@ -106,7 +115,7 @@ var _default = {
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,
-    label: 'Example label',
+    label: 'Example Label',
     onChange: null
   }
 };
@@ -115,12 +124,24 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_DatePicker["default"], args);
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker["default"]
+  }
+};
 var DefaultValue = function DefaultValue(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     defaultValue: "2030-01-15"
   }));
 };
 exports.DefaultValue = DefaultValue;
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.defaultValue
+  }
+};
 var Controlled = function Controlled(args) {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -150,12 +171,24 @@ var Disabled = function Disabled(args) {
   }));
 };
 exports.Disabled = Disabled;
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.disabled
+  }
+};
 var ReadOnly = function ReadOnly(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     isReadOnly: true
   }));
 };
 exports.ReadOnly = ReadOnly;
+ReadOnly.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.readOnly
+  }
+};
 var UnavailableDates = function UnavailableDates(args) {
   var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
@@ -164,6 +197,12 @@ var UnavailableDates = function UnavailableDates(args) {
   }));
 };
 exports.UnavailableDates = UnavailableDates;
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.unavailableDates
+  }
+};
 var MinimumDate = function MinimumDate(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     defaultValue: "2030-01-15",
@@ -171,6 +210,12 @@ var MinimumDate = function MinimumDate(args) {
   }));
 };
 exports.MinimumDate = MinimumDate;
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.minimumDate
+  }
+};
 var MaximumDate = function MaximumDate(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     defaultValue: "2030-01-15",
@@ -178,18 +223,36 @@ var MaximumDate = function MaximumDate(args) {
   }));
 };
 exports.MaximumDate = MaximumDate;
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.maximumDate
+  }
+};
 var Required = function Required(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     isRequired: true
   }));
 };
 exports.Required = Required;
+Required.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.required
+  }
+};
 var FormatHelperText = function FormatHelperText(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     hasFormatHelpText: true
   }));
 };
 exports.FormatHelperText = FormatHelperText;
+FormatHelperText.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.formatHelperText
+  }
+};
 var DefaultOpen = function DefaultOpen(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     isDefaultOpen: true,
@@ -197,6 +260,12 @@ var DefaultOpen = function DefaultOpen(args) {
   }));
 };
 exports.DefaultOpen = DefaultOpen;
+DefaultOpen.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.defaultOpen
+  }
+};
 var Error = function Error(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     status: "error",
@@ -204,10 +273,9 @@ var Error = function Error(args) {
   }));
 };
 exports.Error = Error;
-var Success = function Success(args) {
-  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
-    status: "success",
-    helperText: "Here is some helpful text..."
-  }));
-};
-exports.Success = Success;
+Error.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.error
+  }
+};

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -79,6 +79,19 @@ export declare const FIGMA_LINKS: {
     countryPicker: {
         default: string;
     };
+    datePicker: {
+        default: string;
+        defaultValue: string;
+        disabled: string;
+        readOnly: string;
+        required: string;
+        formatHelperText: string;
+        error: string;
+        defaultOpen: string;
+        unavailableDates: string;
+        minimumDate: string;
+        maximumDate: string;
+    };
     dateTimeRangePicker: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -86,6 +86,19 @@ var FIGMA_LINKS = {
   countryPicker: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
   },
+  datePicker: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=54750-58556&mode=design&t=xKC70FhpRo7cbuqQ-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=53997-4894&t=xKC70FhpRo7cbuqQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58557&t=xKC70FhpRo7cbuqQ-4',
+    readOnly: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58568&t=xKC70FhpRo7cbuqQ-4',
+    required: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58706&t=xKC70FhpRo7cbuqQ-4',
+    formatHelperText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58722&t=xKC70FhpRo7cbuqQ-4',
+    error: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54752-58829&t=xKC70FhpRo7cbuqQ-4',
+    defaultOpen: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54752-58855&t=xKC70FhpRo7cbuqQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7296&t=xKC70FhpRo7cbuqQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7812&t=xKC70FhpRo7cbuqQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7297&t=xKC70FhpRo7cbuqQ-4'
+  },
   dateTimeRangePicker: {
     "default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
   },

package/lib/components/Calendar/Calendar.js

@@ -101,7 +101,8 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "itemTitle",
     role: "heading",
     "aria-level": 3,
-    fontWeight: 3
+    fontWeight: 3,
+    flex: 1
   }, title);
   return ___EmotionJSX(Box, _extends({}, calendarProps, {
     ref: calenderRef,
@@ -120,27 +121,30 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
       return handleYearSelection(nav.PREVIOUS);
     },
     mx: "sm",
+    p: 0,
     isDisabled: prevButtonProps.isDisabled,
     "aria-label": "Previous year navigation"
   }, ___EmotionJSX(Icon, {
     icon: ChevronDoubleLeftIcon,
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Double Left Icon'
     }
   })), ___EmotionJSX(IconButton, _extends({}, prevButtonProps, {
-    "aria-label": "Previous month navigation"
+    "aria-label": "Previous month navigation",
+    p: 0
   }), ___EmotionJSX(Icon, {
     icon: ChevronLeftIcon,
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Left Icon'
     }
   })), renderTitle, ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
+    p: 0,
     "aria-label": "Next month navigation"
   }), ___EmotionJSX(Icon, {
     icon: ChevronRightIcon,
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Right Icon'
     }
@@ -150,11 +154,12 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
       return handleYearSelection(nav.NEXT);
     },
     mx: "sm",
+    p: 0,
     isDisabled: nextButtonProps.isDisabled,
     "aria-label": "Next year navigation"
   }, ___EmotionJSX(Icon, {
     icon: ChevronDoubleRightIcon,
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Double Right Icon'
     }

package/lib/components/Calendar/Calendar.styles.js

@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { defaultFocus } from '../Button/Buttons.styles';
 var calendarBody = {
   pb: '10px',
+  px: '1px',
   borderTop: '1px solid',
   borderTopColor: 'neutral.80',
   '& > tr:nth-of-type(odd) ': {
@@ -36,7 +37,10 @@ var calendarButton = {
     outline: 'none',
     boxShadow: 'none'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineOffset: '0px',
+    zIndex: 1
+  }),
   '&.is-unavailable': {
     backgroundColor: 'neutral.80'
   },

package/lib/components/DatePicker/DatePicker.stories.js

@@ -17,6 +17,7 @@ import { chain } from '@react-aria/utils';
 import { actions } from '@storybook/addon-actions';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import DatePicker from './DatePicker';
 import DatePickerReadme from './DatePicker.mdx';
@@ -32,6 +33,14 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DatePickerReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
     }
   },
   argTypes: _objectSpread({
@@ -95,18 +104,30 @@ export default {
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,
-    label: 'Example label',
+    label: 'Example Label',
     onChange: null
   }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(DatePicker, args);
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker["default"]
+  }
+};
 export var DefaultValue = function DefaultValue(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     defaultValue: "2030-01-15"
   }));
 };
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.defaultValue
+  }
+};
 export var Controlled = function Controlled(args) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -134,11 +155,23 @@ export var Disabled = function Disabled(args) {
     isDisabled: true
   }));
 };
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.disabled
+  }
+};
 export var ReadOnly = function ReadOnly(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     isReadOnly: true
   }));
 };
+ReadOnly.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.readOnly
+  }
+};
 export var UnavailableDates = function UnavailableDates(args) {
   var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
   return ___EmotionJSX(DatePicker, _extends({}, args, {
@@ -146,43 +179,79 @@ export var UnavailableDates = function UnavailableDates(args) {
     defaultValue: "2030-08-07"
   }));
 };
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.unavailableDates
+  }
+};
 export var MinimumDate = function MinimumDate(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     defaultValue: "2030-01-15",
     minValue: "2030-01-15"
   }));
 };
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.minimumDate
+  }
+};
 export var MaximumDate = function MaximumDate(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     defaultValue: "2030-01-15",
     maxValue: "2030-01-15"
   }));
 };
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.maximumDate
+  }
+};
 export var Required = function Required(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     isRequired: true
   }));
 };
+Required.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.required
+  }
+};
 export var FormatHelperText = function FormatHelperText(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     hasFormatHelpText: true
   }));
 };
+FormatHelperText.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.formatHelperText
+  }
+};
 export var DefaultOpen = function DefaultOpen(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     isDefaultOpen: true,
     defaultValue: "2030-01-15"
   }));
 };
+DefaultOpen.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.defaultOpen
+  }
+};
 export var Error = function Error(args) {
   return ___EmotionJSX(DatePicker, _extends({}, args, {
     status: "error",
     helperText: "Here is some helpful text..."
   }));
 };
-export var Success = function Success(args) {
-  return ___EmotionJSX(DatePicker, _extends({}, args, {
-    status: "success",
-    helperText: "Here is some helpful text..."
-  }));
+Error.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.datePicker.error
+  }
 };

package/lib/utils/designUtils/figmaLinks.js

@@ -79,6 +79,19 @@ export var FIGMA_LINKS = {
   countryPicker: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
   },
+  datePicker: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=54750-58556&mode=design&t=xKC70FhpRo7cbuqQ-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=53997-4894&t=xKC70FhpRo7cbuqQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58557&t=xKC70FhpRo7cbuqQ-4',
+    readOnly: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58568&t=xKC70FhpRo7cbuqQ-4',
+    required: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58706&t=xKC70FhpRo7cbuqQ-4',
+    formatHelperText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58722&t=xKC70FhpRo7cbuqQ-4',
+    error: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54752-58829&t=xKC70FhpRo7cbuqQ-4',
+    defaultOpen: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54752-58855&t=xKC70FhpRo7cbuqQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7296&t=xKC70FhpRo7cbuqQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7812&t=xKC70FhpRo7cbuqQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7297&t=xKC70FhpRo7cbuqQ-4'
+  },
   dateTimeRangePicker: {
     "default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.103.0",
+  "version": "2.104.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",

package/lib/cjs/components/Calendar/Calendar.stories.d.ts

@@ -1,212 +0,0 @@
-import React from 'react';
-import { StoryFn } from '@storybook/react';
-import { CalendarProps } from '../../types';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
-    decorators: ((...args: any) => any)[];
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-        docs: {
-            source: {
-                type: string;
-            };
-            page: () => React.JSX.Element;
-        };
-    };
-    argTypes: {
-        'aria-controls': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-describedby': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-details': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-errormessage': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-label': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-labelledby': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        customWeekDays: {
-            control: {
-                type: string;
-            };
-        };
-        value: {
-            control: {
-                type: string;
-            };
-        };
-        defaultValue: {
-            control: {
-                type: string;
-            };
-        };
-        hasAutoFocus: {
-            control: {
-                type: string;
-            };
-        };
-        id: {
-            control: {
-                type: string;
-            };
-        };
-        isDisabled: {
-            control: {
-                type: string;
-            };
-        };
-        isReadOnly: {
-            control: {
-                type: string;
-            };
-        };
-        isRequired: {
-            control: {
-                type: string;
-            };
-        };
-        maxValue: {
-            control: {
-                type: string;
-            };
-        };
-        minValue: {
-            control: {
-                type: string;
-            };
-        };
-        onChange: {
-            control: {
-                type: string;
-            };
-            action: string;
-        };
-        onFocusChange: {
-            control: {
-                type: string;
-            };
-            action: string;
-        };
-    };
-    args: {
-        hasAutoFocus: boolean;
-        isDisabled: boolean;
-        isReadOnly: boolean;
-        isRequired: boolean;
-        onChange: null;
-        onFocusChange: null;
-        defaultFocusedValue: string;
-    };
-};
-export default _default;
-export declare const Default: StoryFn<CalendarProps>;
-export declare const DefaultValue: {
-    (): React.JSX.Element;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const Disabled: {
-    (args: any): React.JSX.Element;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const UnavailableDates: {
-    (): React.JSX.Element;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const MinimumDate: {
-    (): React.JSX.Element;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const MaximumDate: {
-    (): React.JSX.Element;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const Controlled: (args: any) => React.JSX.Element;

package/lib/cjs/components/Calendar/Calendar.stories.js

@@ -1,225 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.UnavailableDates = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = void 0;
-var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _date = require("@internationalized/date");
-var _storybookAddonDesigns = require("storybook-addon-designs");
-var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _figmaLinks = require("../../utils/designUtils/figmaLinks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _Calendar = _interopRequireDefault(require("./Calendar.mdx"));
-var _ = _interopRequireDefault(require("."));
-var _react2 = require("@emotion/react");
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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 _default = {
-  title: 'Components/Calendar',
-  component: _["default"],
-  decorators: [_storybookAddonDesigns.withDesign],
-  parameters: {
-    actions: {
-      argTypesRegex: '^on.*'
-    },
-    docs: {
-      source: {
-        type: 'code'
-      },
-      page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Calendar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      }
-    }
-  },
-  argTypes: _objectSpread({
-    customWeekDays: {
-      control: {
-        type: 'array'
-      }
-    },
-    value: {
-      control: {
-        type: 'text'
-      }
-    },
-    defaultValue: {
-      control: {
-        type: 'text'
-      }
-    },
-    hasAutoFocus: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    id: {
-      control: {
-        type: 'text'
-      }
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    isReadOnly: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    isRequired: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    maxValue: {
-      control: {
-        type: 'text'
-      }
-    },
-    minValue: {
-      control: {
-        type: 'text'
-      }
-    },
-    onChange: {
-      control: {
-        type: 'func'
-      },
-      action: 'change'
-    },
-    onFocusChange: {
-      control: {
-        type: 'func'
-      },
-      action: 'focus change'
-    }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes),
-  args: {
-    hasAutoFocus: false,
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    onChange: null,
-    onFocusChange: null,
-    defaultFocusedValue: '2030-01-15'
-  }
-};
-exports["default"] = _default;
-var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-default"
-  }));
-};
-exports.Default = Default;
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.calendar["default"]
-  }
-};
-var DefaultValue = function DefaultValue() {
-  return (0, _react2.jsx)(_["default"], {
-    "aria-label": "calendar-with-default-value",
-    defaultValue: "2030-01-15"
-  });
-};
-exports.DefaultValue = DefaultValue;
-DefaultValue.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.calendar.defaultValue
-  }
-};
-var Disabled = function Disabled(args) {
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-component-disabled",
-    isDisabled: true
-  }));
-};
-exports.Disabled = Disabled;
-Disabled.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.calendar.disabled
-  }
-};
-var UnavailableDates = function UnavailableDates() {
-  var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
-  // This function is run against each date in the calendar
-  var isDateUnavailable = function isDateUnavailable(date) {
-    return (0, _some["default"])(unavailableRanges).call(unavailableRanges, function (interval) {
-      return date.compare((0, _date.parseDate)(interval[0])) >= 0 && date.compare((0, _date.parseDate)(interval[1])) <= 0;
-    });
-  };
-  return (0, _react2.jsx)(_["default"], {
-    "aria-label": "calendar-component-unavailable-dates",
-    defaultValue: "2030-08-07",
-    isDateUnavailable: isDateUnavailable
-  });
-};
-exports.UnavailableDates = UnavailableDates;
-UnavailableDates.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.calendar.unavailableDates
-  }
-};
-var MinimumDate = function MinimumDate() {
-  return (0, _react2.jsx)(_["default"], {
-    "aria-label": "calendar-component-min-date",
-    minValue: "2030-01-15",
-    defaultValue: "2030-01-15"
-  });
-};
-exports.MinimumDate = MinimumDate;
-MinimumDate.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.calendar.minimumDate
-  }
-};
-var MaximumDate = function MaximumDate() {
-  return (0, _react2.jsx)(_["default"], {
-    "aria-label": "calendar-component-max-date",
-    maxValue: "2030-01-15",
-    defaultValue: "2030-01-15"
-  });
-};
-exports.MaximumDate = MaximumDate;
-MaximumDate.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.calendar.maximumDate
-  }
-};
-var Controlled = function Controlled(args) {
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-component-controlled",
-    value: date,
-    onChange: setDate
-  }));
-};
-exports.Controlled = Controlled;

package/lib/components/Calendar/Calendar.stories.js

@@ -1,206 +0,0 @@
-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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
-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) { _defineProperty(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; }
-import React, { useState } from 'react';
-import { parseDate } from '@internationalized/date';
-import { withDesign } from 'storybook-addon-designs';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import CalendarReadme from './Calendar.mdx';
-import Calendar from '.';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/Calendar',
-  component: Calendar,
-  decorators: [withDesign],
-  parameters: {
-    actions: {
-      argTypesRegex: '^on.*'
-    },
-    docs: {
-      source: {
-        type: 'code'
-      },
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CalendarReadme, null), ___EmotionJSX(DocsLayout, null));
-      }
-    }
-  },
-  argTypes: _objectSpread({
-    customWeekDays: {
-      control: {
-        type: 'array'
-      }
-    },
-    value: {
-      control: {
-        type: 'text'
-      }
-    },
-    defaultValue: {
-      control: {
-        type: 'text'
-      }
-    },
-    hasAutoFocus: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    id: {
-      control: {
-        type: 'text'
-      }
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    isReadOnly: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    isRequired: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    maxValue: {
-      control: {
-        type: 'text'
-      }
-    },
-    minValue: {
-      control: {
-        type: 'text'
-      }
-    },
-    onChange: {
-      control: {
-        type: 'func'
-      },
-      action: 'change'
-    },
-    onFocusChange: {
-      control: {
-        type: 'func'
-      },
-      action: 'focus change'
-    }
-  }, ariaAttributeBaseArgTypes),
-  args: {
-    hasAutoFocus: false,
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    onChange: null,
-    onFocusChange: null,
-    defaultFocusedValue: '2030-01-15'
-  }
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(Calendar, _extends({}, args, {
-    "aria-label": "calendar-default"
-  }));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.calendar["default"]
-  }
-};
-export var DefaultValue = function DefaultValue() {
-  return ___EmotionJSX(Calendar, {
-    "aria-label": "calendar-with-default-value",
-    defaultValue: "2030-01-15"
-  });
-};
-DefaultValue.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.calendar.defaultValue
-  }
-};
-export var Disabled = function Disabled(args) {
-  return ___EmotionJSX(Calendar, _extends({}, args, {
-    "aria-label": "calendar-component-disabled",
-    isDisabled: true
-  }));
-};
-Disabled.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.calendar.disabled
-  }
-};
-export var UnavailableDates = function UnavailableDates() {
-  var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
-  // This function is run against each date in the calendar
-  var isDateUnavailable = function isDateUnavailable(date) {
-    return _someInstanceProperty(unavailableRanges).call(unavailableRanges, function (interval) {
-      return date.compare(parseDate(interval[0])) >= 0 && date.compare(parseDate(interval[1])) <= 0;
-    });
-  };
-  return ___EmotionJSX(Calendar, {
-    "aria-label": "calendar-component-unavailable-dates",
-    defaultValue: "2030-08-07",
-    isDateUnavailable: isDateUnavailable
-  });
-};
-UnavailableDates.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.calendar.unavailableDates
-  }
-};
-export var MinimumDate = function MinimumDate() {
-  return ___EmotionJSX(Calendar, {
-    "aria-label": "calendar-component-min-date",
-    minValue: "2030-01-15",
-    defaultValue: "2030-01-15"
-  });
-};
-MinimumDate.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.calendar.minimumDate
-  }
-};
-export var MaximumDate = function MaximumDate() {
-  return ___EmotionJSX(Calendar, {
-    "aria-label": "calendar-component-max-date",
-    maxValue: "2030-01-15",
-    defaultValue: "2030-01-15"
-  });
-};
-MaximumDate.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.calendar.maximumDate
-  }
-};
-export var Controlled = function Controlled(args) {
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  return ___EmotionJSX(Calendar, _extends({}, args, {
-    "aria-label": "calendar-component-controlled",
-    value: date,
-    onChange: setDate
-  }));
-};