npm - @pingux/astro - Versions diffs - 2.36.0-alpha.1 → 2.36.0-alpha.2 - Mend

@pingux/astro 2.36.0-alpha.1 → 2.36.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/lib/cjs/components/Button/Button.stories.d.ts CHANGED Viewed

@@ -28,9 +28,51 @@ export declare const Default: {
         };
     };
 };
-export declare const Disabled: () => React.JSX.Element;
-export declare const TextIconButton: () => React.JSX.Element;
-export declare const InlineButton: () => React.JSX.Element;
+export declare const Primary: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Critical: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const InlineButton: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const TextIconButton: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Disabled: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
 export declare const ColorBlockButton: {
     (args: any): React.JSX.Element;
     argTypes: {
@@ -41,6 +83,10 @@ export declare const ColorBlockButton: {
             defaultValue: boolean;
         };
     };
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
 };
-export declare const Critical: () => React.JSX.Element;
-export declare const Primary: () => React.JSX.Element;

package/lib/cjs/components/Button/Button.stories.js CHANGED Viewed

@@ -60,71 +60,114 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button["default"]
   }
 };
-var Disabled = function Disabled() {
+var Primary = function Primary() {
   return (0, _react2.jsx)(_index.Button, {
-    isDisabled: true
+    variant: "primary"
   }, "Button Text");
 };
-exports.Disabled = Disabled;
-var TextIconButton = function TextIconButton() {
+exports.Primary = Primary;
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.primary
+  }
+};
+var Critical = function Critical() {
   return (0, _react2.jsx)(_index.Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+exports.Critical = Critical;
+Critical.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.critical
+  }
+};
+var InlineButton = function InlineButton() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Button Text"), (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Button Text"));
+};
+exports.InlineButton = InlineButton;
+InlineButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.inlineButton
+  }
+};
+var TextIconButton = function TextIconButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    width: 20
+  }, (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     variant: "withIcon"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 20,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Add a Form"));
-};
-exports.TextIconButton = TextIconButton;
-var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inline"
-  }, "Inline"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline with icon"), (0, _react2.jsx)(_index.Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inlinePrimary"
-  }, "Inline primary"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline primary with icon"));
+  }), "Button Text"));
+};
+exports.TextIconButton = TextIconButton;
+TextIconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.textIconButton
+  }
+};
+var Disabled = function Disabled() {
+  return (0, _react2.jsx)(_index.Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+exports.Disabled = Disabled;
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.disabled
+  }
 };
-exports.InlineButton = InlineButton;
 var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = (0, _objectWithoutProperties2["default"])(args, _excluded);
-  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    mb: "sm"
+  }, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
@@ -136,7 +179,19 @@ var ColorBlockButton = function ColorBlockButton(args) {
     title: {
       name: 'Create Icon'
     }
-  }));
+  })), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+    variant: "colorBlockPrimary",
+    className: isConfigured ? 'is-configured' : ''
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "buttonTitle"
+  }, "Title"), (0, _react2.jsx)(_index.Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  })));
 };
 exports.ColorBlockButton = ColorBlockButton;
 ColorBlockButton.argTypes = {
@@ -147,15 +202,9 @@ ColorBlockButton.argTypes = {
     defaultValue: false
   }
 };
-var Critical = function Critical() {
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "critical"
-  }, "Button Text");
-};
-exports.Critical = Critical;
-var Primary = function Primary() {
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "primary"
-  }, "Button Text");
-};
-exports.Primary = Primary;
+ColorBlockButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.colorBlockButton
+  }
+};

package/lib/cjs/components/Button/Buttons.styles.d.ts CHANGED Viewed

@@ -564,6 +564,77 @@ declare const _default: {
             borderColor: string;
         };
     };
+    colorBlockPrimary: {
+        '& span': {
+            color: string;
+            textAlign: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        path: {
+            fill: string;
+        };
+        borderRadius: number;
+        outline: string;
+        cursor: string;
+        width: number;
+        height: string;
+        p: string;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&>div': {
+            alignItems: string;
+        };
+        '&>svg': {
+            color: string;
+            fill: string;
+        };
+        '&.is-configured': {
+            bg: string;
+            borderColor: string;
+            '& span': {
+                color: string;
+            };
+            '&>svg': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&.is-configured.is-hovered': {
+            bg: string;
+            borderColor: string;
+        };
+        '&.is-configured.is-pressed': {
+            bg: string;
+            borderColor: string;
+        };
+    };
     exampleText: {
         '&.is-hovered': {
             textDecoration: string;
@@ -600,6 +671,7 @@ declare const _default: {
         bg: string;
         border: string;
         borderColor: string;
+        display: string;
         '&.is-hovered': {
             bg: string;
             border: string;
@@ -625,7 +697,6 @@ declare const _default: {
         fontWeight: number;
         color: string;
         fontFamily: string;
-        display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;

package/lib/cjs/components/Button/Buttons.styles.js CHANGED Viewed

@@ -82,10 +82,11 @@ var primary = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var withIcon = _objectSpread(_objectSpread({}, base), {}, {
-  padding: '8.5px 15px 8.5px 10px',
+  padding: '10px 15px 10px 10px',
   bg: 'white',
   border: '1px solid',
   borderColor: 'active',
+  display: 'inline-flex',
   '&.is-hovered': _objectSpread({}, defaultHover),
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -247,6 +248,21 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+var colorBlockPrimary = _objectSpread(_objectSpread(_objectSpread({}, colorBlock), defaultActive), {}, {
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
 var headerBar = _objectSpread(_objectSpread({}, base), {}, {
   backgroundColor: 'white',
   '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
@@ -286,6 +302,7 @@ var _default = {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UnavailableDates = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = exports.Autofocus = void 0;
+exports["default"] = exports.UnavailableDates = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = exports.Autofocus = 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"));
@@ -142,18 +142,12 @@ var DefaultValue = function DefaultValue(args) {
   }));
 };
 exports.DefaultValue = DefaultValue;
-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)(_Calendar["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-component-controlled",
-    value: date,
-    onChange: setDate
-  }));
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.defaultValue
+  }
 };
-exports.Controlled = Controlled;
 var Disabled = function Disabled(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-disabled",
@@ -161,13 +155,12 @@ var Disabled = function Disabled(args) {
   }));
 };
 exports.Disabled = Disabled;
-var ReadOnly = function ReadOnly(args) {
-  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-component-readonly",
-    isReadOnly: true
-  }));
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.disabled
+  }
 };
-exports.ReadOnly = ReadOnly;
 var UnavailableDates = function UnavailableDates(args) {
   var unavailableRanges = [['2022-07-29', '2022-08-05'], ['2022-08-15', '2022-08-20'], ['2022-08-25', '2022-08-26']];
   // This function is run against each date in the calendar
@@ -183,6 +176,12 @@ var UnavailableDates = function UnavailableDates(args) {
   }));
 };
 exports.UnavailableDates = UnavailableDates;
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.unavailableDates
+  }
+};
 var MinimumDate = function MinimumDate(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-min-date",
@@ -191,6 +190,12 @@ var MinimumDate = function MinimumDate(args) {
   }));
 };
 exports.MinimumDate = MinimumDate;
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.minimumDate
+  }
+};
 var MaximumDate = function MaximumDate(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-max-date",
@@ -199,10 +204,34 @@ var MaximumDate = function MaximumDate(args) {
   }));
 };
 exports.MaximumDate = MaximumDate;
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.maximumDate
+  }
+};
 var Autofocus = function Autofocus(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component",
     hasAutoFocus: true
   }));
 };
-exports.Autofocus = Autofocus;
+exports.Autofocus = Autofocus;
+Autofocus.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.autofocus
+  }
+};
+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)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: date,
+    onChange: setDate
+  }));
+};
+exports.Controlled = Controlled;

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js CHANGED Viewed

@@ -20,7 +20,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSectionsComponent = exports.getComponent = void 0;
+exports.renderSectionsComponent = exports.renderComponent = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
@@ -91,18 +91,17 @@ var defaultWithSectionsProps = {
   items: itemsWithSections
 };
 var onSelectionChange = jest.fn();
-var getComponent = function getComponent(props) {
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+var renderComponent = function renderComponent(props) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultProps, props), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.name,
       "data-testid": item.name
     }, item.name);
-  })));
+  }));
 };
-exports.getComponent = getComponent;
-var getSectionsComponent = function getSectionsComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
+exports.renderComponent = renderComponent;
+var renderSectionsComponent = function renderSectionsComponent(props) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (
       // eslint-disable-next-line testing-library/no-node-access
       (0, _react2.jsx)(_reactStately.Section, {
@@ -118,9 +117,16 @@ var getSectionsComponent = function getSectionsComponent() {
         }, item.name);
       })
     );
-  })));
+  }));
+};
+exports.renderSectionsComponent = renderSectionsComponent;
+var getComponent = function getComponent(props) {
+  return (0, _testWrapper.render)(renderComponent(props));
+};
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)(renderSectionsComponent(props));
 };
-exports.getSectionsComponent = getSectionsComponent;
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumbUniversal.test.js ADDED Viewed

@@ -0,0 +1,10 @@
+"use strict";
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _EnvironmentBreadcrumb = require("./EnvironmentBreadcrumb.test");
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: _EnvironmentBreadcrumb.renderComponent
+});
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: _EnvironmentBreadcrumb.renderSectionsComponent
+});

package/lib/cjs/hooks/useColumnStyles/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './useColumnStyles';

package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export type LabelMode = 'default' | 'float' | 'left';
+interface UseColumnStylesProps {
+    labelMode: LabelMode;
+}
+interface LabelStyleProps {
+    sx: {
+        gridTemplateColumns: string;
+    };
+}
+declare const useColumnStyles: ({ labelMode }: UseColumnStylesProps) => LabelStyleProps;
+export default useColumnStyles;

package/lib/cjs/hooks/useColumnStyles/useColumnStyles.js CHANGED Viewed

@@ -10,13 +10,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = require("react");
 var useColumnStyles = function useColumnStyles(_ref) {
   var labelMode = _ref.labelMode;
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)({
+      sx: {
+        gridTemplateColumns: ''
+      }
+    }),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     labelStyleProps = _useState2[0],
-    setlabelStyleProps = _useState2[1];
+    setLabelStyleProps = _useState2[1];
   (0, _react.useEffect)(function () {
     if (labelMode === 'left') {
-      setlabelStyleProps({
+      setLabelStyleProps({
         sx: {
           gridTemplateColumns: '40% auto'
         }

package/lib/cjs/hooks/useField/useField.d.ts CHANGED Viewed

@@ -118,6 +118,8 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         variant?: string | undefined;
         as?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
         style?: string | import("react").CSSProperties | undefined;
+        float?: import("theme-ui").StylePropertyValue<import("csstype").Property.Float | undefined>;
+        left?: import("theme-ui").StylePropertyValue<import("csstype").Property.Left<string | number> | undefined>;
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
         accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
         alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
@@ -228,7 +230,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         flexGrow?: import("theme-ui").StylePropertyValue<import("csstype").Property.FlexGrow | undefined>;
         flexShrink?: import("theme-ui").StylePropertyValue<import("csstype").Property.FlexShrink | undefined>;
         flexWrap?: import("theme-ui").StylePropertyValue<import("csstype").Property.FlexWrap | undefined>;
-        float?: import("theme-ui").StylePropertyValue<import("csstype").Property.Float | undefined>;
         fontFamily?: import("theme-ui").StylePropertyValue<import("csstype").Property.FontFamily | undefined>;
         fontFeatureSettings?: import("theme-ui").StylePropertyValue<import("csstype").Property.FontFeatureSettings | undefined>;
         fontKerning?: import("theme-ui").StylePropertyValue<import("csstype").Property.FontKerning | undefined>;
@@ -281,7 +282,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         justifyItems?: import("theme-ui").StylePropertyValue<import("csstype").Property.JustifyItems | undefined>;
         justifySelf?: import("theme-ui").StylePropertyValue<import("csstype").Property.JustifySelf | undefined>;
         justifyTracks?: import("theme-ui").StylePropertyValue<import("csstype").Property.JustifyTracks | undefined>;
-        left?: import("theme-ui").StylePropertyValue<import("csstype").Property.Left<string | number> | undefined>;
         letterSpacing?: import("theme-ui").StylePropertyValue<import("csstype").Property.LetterSpacing<string | number> | undefined>;
         lineBreak?: import("theme-ui").StylePropertyValue<import("csstype").Property.LineBreak | undefined>;
         lineHeight?: import("theme-ui").StylePropertyValue<import("csstype").Property.LineHeight<string | number> | undefined>;
@@ -1050,7 +1050,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         onTransitionEndCapture?: import("react").TransitionEventHandler<import("../../types").FocusableElement> | undefined;
     };
     fieldLabelProps: {
-        labelMode?: "float" | "left" | "default" | undefined;
+        labelMode?: "default" | "float" | "left" | undefined;
         statusClasses?: {
             [className: string]: boolean;
         } | undefined;
@@ -1365,7 +1365,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         isRequired: boolean | undefined;
         mode: string | undefined;
     } | {
-        labelMode?: "float" | "left" | "default" | undefined;
+        labelMode?: "default" | "float" | "left" | undefined;
         statusClasses?: {
             [className: string]: boolean;
         } | undefined;

package/lib/cjs/hooks/useSelectField/useSelectField.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { SelectState } from 'react-stately';
 import { CollectionChildren } from '@react-types/shared';
 import { LabelProps as ThemeUILabelProps } from 'theme-ui';
 import { Axis, BoxProps, FocusableElement, PlacementAxis, ReactRef, StyleProps } from '../../types';
+import { LabelMode } from '../useColumnStyles/useColumnStyles';
 import { FieldControlInputProps } from '../useField/useField';
 interface UseSelectFieldProps<T> {
     children: CollectionChildren<T>;
@@ -34,7 +35,7 @@ interface UseSelectFieldProps<T> {
     listBoxProps?: BoxProps;
     labelProps?: ThemeUILabelProps;
     containerProps?: BoxProps;
-    labelMode: 'default' | 'float' | 'left';
+    labelMode: LabelMode;
 }
 interface UseSelectFieldReturnProps {
     columnStyleProps: StyleProps;

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

@@ -34,7 +34,13 @@ var FIGMA_LINKS = {
     overflowing: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45064-7148&mode=design&t=0RGDgLyKBzT6bOXO-0'
   },
   button: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47047&mode=dev',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54887&mode=dev',
+    textIconButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54941&mode=dev',
+    inlineButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47247&mode=dev',
+    colorBlockButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47405&mode=dev',
+    critical: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47237&mode=dev',
+    primary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47151&mode=dev'
   },
   buttonBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',
@@ -43,7 +49,13 @@ var FIGMA_LINKS = {
     secondaryRightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A788&mode=dev'
   },
   calendar: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=47640-5789&mode=design&t=SZGzEV7PufQjYBN5-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-14593&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15106&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15681&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16197&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16454&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'

package/lib/components/Button/Button.stories.js CHANGED Viewed

@@ -51,68 +51,109 @@ Default.parameters = {
     url: FIGMA_LINKS.button["default"]
   }
 };
-export var Disabled = function Disabled() {
+export var Primary = function Primary() {
   return ___EmotionJSX(Button, {
-    isDisabled: true
+    variant: "primary"
   }, "Button Text");
 };
-export var TextIconButton = function TextIconButton() {
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.primary
+  }
+};
+export var Critical = function Critical() {
   return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+Critical.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.critical
+  }
+};
+export var InlineButton = function InlineButton() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Button Text"), ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Button Text"));
+};
+InlineButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.inlineButton
+  }
+};
+export var TextIconButton = function TextIconButton() {
+  return ___EmotionJSX(Box, {
+    width: 20
+  }, ___EmotionJSX(Button, {
     mb: "sm",
     variant: "withIcon"
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 20,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Add a Form"));
-};
-export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inline"
-  }, "Inline"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline with icon"), ___EmotionJSX(Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inlinePrimary"
-  }, "Inline primary"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline primary with icon"));
+  }), "Button Text"));
+};
+TextIconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.textIconButton
+  }
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.disabled
+  }
 };
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = _objectWithoutProperties(args, _excluded);
-  return ___EmotionJSX(Button, _extends({}, props, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({
+    mb: "sm"
+  }, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
@@ -124,7 +165,19 @@ export var ColorBlockButton = function ColorBlockButton(args) {
     title: {
       name: 'Create Icon'
     }
-  }));
+  })), ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlockPrimary",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  })));
 };
 ColorBlockButton.argTypes = {
   isConfigured: {
@@ -134,13 +187,9 @@ ColorBlockButton.argTypes = {
     defaultValue: false
   }
 };
-export var Critical = function Critical() {
-  return ___EmotionJSX(Button, {
-    variant: "critical"
-  }, "Button Text");
-};
-export var Primary = function Primary() {
-  return ___EmotionJSX(Button, {
-    variant: "primary"
-  }, "Button Text");
+ColorBlockButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.colorBlockButton
+  }
 };

package/lib/components/Button/Buttons.styles.js CHANGED Viewed

@@ -72,10 +72,11 @@ var primary = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var withIcon = _objectSpread(_objectSpread({}, base), {}, {
-  padding: '8.5px 15px 8.5px 10px',
+  padding: '10px 15px 10px 10px',
   bg: 'white',
   border: '1px solid',
   borderColor: 'active',
+  display: 'inline-flex',
   '&.is-hovered': _objectSpread({}, defaultHover),
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -234,6 +235,21 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+var colorBlockPrimary = _objectSpread(_objectSpread(_objectSpread({}, colorBlock), defaultActive), {}, {
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
 var headerBar = _objectSpread(_objectSpread({}, base), {}, {
   backgroundColor: 'white',
   '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
@@ -273,6 +289,7 @@ export default {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,

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

@@ -128,16 +128,11 @@ export var DefaultValue = function DefaultValue(args) {
     defaultValue: "2022-08-10"
   }));
 };
-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
-  }));
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.defaultValue
+  }
 };
 export var Disabled = function Disabled(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
@@ -145,11 +140,11 @@ export var Disabled = function Disabled(args) {
     isDisabled: true
   }));
 };
-export var ReadOnly = function ReadOnly(args) {
-  return ___EmotionJSX(Calendar, _extends({}, args, {
-    "aria-label": "calendar-component-readonly",
-    isReadOnly: true
-  }));
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.disabled
+  }
 };
 export var UnavailableDates = function UnavailableDates(args) {
   var unavailableRanges = [['2022-07-29', '2022-08-05'], ['2022-08-15', '2022-08-20'], ['2022-08-25', '2022-08-26']];
@@ -165,6 +160,12 @@ export var UnavailableDates = function UnavailableDates(args) {
     isDateUnavailable: isDateUnavailable
   }));
 };
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.unavailableDates
+  }
+};
 export var MinimumDate = function MinimumDate(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
     "aria-label": "calendar-component-min-date",
@@ -172,6 +173,12 @@ export var MinimumDate = function MinimumDate(args) {
     defaultDate: "2022-09-14"
   }));
 };
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.minimumDate
+  }
+};
 export var MaximumDate = function MaximumDate(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
     "aria-label": "calendar-component-max-date",
@@ -179,9 +186,32 @@ export var MaximumDate = function MaximumDate(args) {
     defaultValue: "2022-10-05"
   }));
 };
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.maximumDate
+  }
+};
 export var Autofocus = function Autofocus(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
     "aria-label": "calendar-component",
     hasAutoFocus: true
   }));
+};
+Autofocus.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.autofocus
+  }
+};
+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
+  }));
 };

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js CHANGED Viewed

@@ -83,17 +83,16 @@ var defaultWithSectionsProps = {
   items: itemsWithSections
 };
 var onSelectionChange = jest.fn();
-export var getComponent = function getComponent(props) {
-  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
+export var renderComponent = function renderComponent(props) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name,
       "data-testid": item.name
     }, item.name);
-  })));
+  }));
 };
-export var getSectionsComponent = function getSectionsComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
+export var renderSectionsComponent = function renderSectionsComponent(props) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
     return (
       // eslint-disable-next-line testing-library/no-node-access
       ___EmotionJSX(Section, {
@@ -109,7 +108,14 @@ export var getSectionsComponent = function getSectionsComponent() {
         }, item.name);
       })
     );
-  })));
+  }));
+};
+var getComponent = function getComponent(props) {
+  return render(renderComponent(props));
+};
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(renderSectionsComponent(props));
 };
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {

package/lib/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumbUniversal.test.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { renderComponent, renderSectionsComponent } from './EnvironmentBreadcrumb.test';
+universalComponentTests({
+  renderComponent: renderComponent
+});
+universalComponentTests({
+  renderComponent: renderSectionsComponent
+});

package/lib/hooks/useColumnStyles/useColumnStyles.js CHANGED Viewed

@@ -2,13 +2,17 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useEffect, useState } from 'react';
 var useColumnStyles = function useColumnStyles(_ref) {
   var labelMode = _ref.labelMode;
-  var _useState = useState(false),
+  var _useState = useState({
+      sx: {
+        gridTemplateColumns: ''
+      }
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     labelStyleProps = _useState2[0],
-    setlabelStyleProps = _useState2[1];
+    setLabelStyleProps = _useState2[1];
   useEffect(function () {
     if (labelMode === 'left') {
-      setlabelStyleProps({
+      setLabelStyleProps({
         sx: {
           gridTemplateColumns: '40% auto'
         }

package/lib/utils/designUtils/figmaLinks.js CHANGED Viewed

@@ -27,7 +27,13 @@ export var FIGMA_LINKS = {
     overflowing: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45064-7148&mode=design&t=0RGDgLyKBzT6bOXO-0'
   },
   button: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47047&mode=dev',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54887&mode=dev',
+    textIconButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54941&mode=dev',
+    inlineButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47247&mode=dev',
+    colorBlockButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47405&mode=dev',
+    critical: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47237&mode=dev',
+    primary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47151&mode=dev'
   },
   buttonBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',
@@ -36,7 +42,13 @@ export var FIGMA_LINKS = {
     secondaryRightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A788&mode=dev'
   },
   calendar: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=47640-5789&mode=design&t=SZGzEV7PufQjYBN5-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-14593&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15106&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15681&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16197&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16454&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'

package/package.json CHANGED Viewed

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

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js DELETED Viewed

@@ -1,7 +0,0 @@
-"use strict";
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-var _EnvironmentBreadcrumb = require("./EnvironmentBreadcrumb.test");
-(0, _testAxe["default"])(_EnvironmentBreadcrumb.getComponent);
-(0, _testAxe["default"])(_EnvironmentBreadcrumb.getSectionsComponent);

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js DELETED Viewed

@@ -1,4 +0,0 @@
-import axeTest from '../../utils/testUtils/testAxe';
-import { getComponent, getSectionsComponent } from './EnvironmentBreadcrumb.test';
-axeTest(getComponent);
-axeTest(getSectionsComponent);