@pingux/astro 2.128.0 → 2.129.0-alpha.0

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

@@ -6,10 +6,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = exports.CustomWidth = exports.CustomStyle = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
 var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _Text = _interopRequireDefault(require("./Text.mdx"));
@@ -17,36 +19,42 @@ var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Text',
   component: _index.Text,
+  decorators: [_storybookAddonDesigns.withDesign],
   parameters: {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Text', 'Separator']
+      }
     }
   },
   argTypes: {
+    as: {
+      control: false
+    },
+    role: {
+      control: false
+    },
     variant: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Text variant.'
     },
     children: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Text value.'
     },
     color: {
       control: {
-        type: 'none'
+        type: 'text'
       },
       description: 'Text color.'
     },
     bg: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Background color.'
     }
   }
@@ -426,15 +434,18 @@ var Default = function Default() {
   }))));
 };
 exports.Default = Default;
-var CustomWidth = function CustomWidth() {
+Default.parameters = {
+  codesandbox: false
+};
+var CustomWidth = function CustomWidth(args) {
   return (0, _react2.jsx)(_index.Box, {
     width: 200
-  }, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
     p: "xl"
-  }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
+  }, args), "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
 exports.CustomWidth = CustomWidth;
-var CustomStyle = function CustomStyle() {
+var CustomStyle = function CustomStyle(args) {
   var textProps = {
     fontFamily: 'times',
     fontSize: 'md',
@@ -448,11 +459,11 @@ var CustomStyle = function CustomStyle() {
   return (0, _react2.jsx)(_index.Box, {
     p: "xx",
     gap: "md"
-  }, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, args, {
     variant: "title"
-  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_index.Text, textProps, loremText), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.Text, {
+  }), "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_index.Text, textProps, loremText), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, args, {
     variant: "title"
-  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_index.Text, {
+  }), "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_index.Text, {
     sx: textProps
   }, loremText));
 };

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

@@ -1,39 +1,15 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../types/TextAreaField").TextAreaFieldProps & React.RefAttributes<HTMLInputElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-            source: {
-                type: string;
-            };
-        };
-        a11y: {
-            config: {
-                rules: {
-                    id: string;
-                    enabled: boolean;
-                }[];
-            };
-        };
-    };
-    argTypes: any;
-    args: {
-        label: string;
-        labelMode: string;
-    };
-};
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;
-export declare const WithSlots: (args: any) => React.JSX.Element;
-export declare const FloatLabel: () => React.JSX.Element;
+export declare const WithSlots: () => React.JSX.Element;
+export declare const FloatLabel: (args: any) => React.JSX.Element;
 export declare const Controlled: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const ReadOnly: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const Rows: () => React.JSX.Element;
-export declare const Unresizable: () => React.JSX.Element;
-export declare const Error: () => React.JSX.Element;
-export declare const WithoutStatusIndicator: () => React.JSX.Element;
-export declare const MaxLength: () => React.JSX.Element;
+export declare const Disabled: (args: any) => React.JSX.Element;
+export declare const ReadOnly: (args: any) => React.JSX.Element;
+export declare const Required: (args: any) => React.JSX.Element;
+export declare const Rows: (args: any) => React.JSX.Element;
+export declare const Unresizable: (args: any) => React.JSX.Element;
+export declare const Error: (args: any) => React.JSX.Element;
+export declare const WithoutStatusIndicator: (args: any) => React.JSX.Element;
+export declare const MaxLength: (args: any) => React.JSX.Element;

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

@@ -40,9 +40,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TextAreaField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -112,7 +109,7 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.TextAreaField, args);
 };
 exports.Default = Default;
-var WithSlots = function WithSlots(args) {
+var WithSlots = function WithSlots() {
   return (
     // This is an example of a slot that can be passed into the component
     // const IconSlot = (
@@ -122,19 +119,19 @@ var WithSlots = function WithSlots(args) {
     //     />
     //   </Box>
     // );
-    (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
+    (0, _react2.jsx)(_index.TextAreaField, {
       slots: {
         inContainer: IconSlot
       }
-    }))
+    })
   );
 };
 exports.WithSlots = WithSlots;
-var FloatLabel = function FloatLabel() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var FloatLabel = function FloatLabel(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     labelMode: "float"
-  });
+  }));
 };
 exports.FloatLabel = FloatLabel;
 var Controlled = function Controlled() {
@@ -151,62 +148,62 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     label: "Example Label",
     value: "This is disabled"
-  });
+  }));
 };
 exports.Disabled = Disabled;
-var ReadOnly = function ReadOnly() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
 exports.ReadOnly = ReadOnly;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
 exports.Required = Required;
-var Rows = function Rows() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Rows = function Rows(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     rows: 5
-  });
+  }));
 };
 exports.Rows = Rows;
-var Unresizable = function Unresizable() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Unresizable = function Unresizable(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     isUnresizable: true,
     label: "Example label"
-  });
+  }));
 };
 exports.Unresizable = Unresizable;
-var Error = function Error() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var Error = function Error(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
 exports.Error = Error;
-var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
 exports.WithoutStatusIndicator = WithoutStatusIndicator;
-var MaxLength = function MaxLength() {
-  return (0, _react2.jsx)(_index.TextAreaField, {
+var MaxLength = function MaxLength(args) {
+  return (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };
 exports.MaxLength = MaxLength;

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

@@ -44,9 +44,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TextField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -87,22 +84,22 @@ var Default = function Default(_ref) {
   }, args));
 };
 exports.Default = Default;
-var SmallVariant = function SmallVariant() {
-  return (0, _react2.jsx)(_index.TextField, {
+var SmallVariant = function SmallVariant(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
       variant: 'input.small'
     }
-  });
+  }));
 };
 exports.SmallVariant = SmallVariant;
-var FloatLabel = function FloatLabel() {
-  return (0, _react2.jsx)(_index.TextField, {
+var FloatLabel = function FloatLabel(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     labelMode: "float"
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -117,18 +114,18 @@ FloatLabel.parameters = {
     }
   }
 };
-var LeftLabel = function LeftLabel() {
+var LeftLabel = function LeftLabel(args) {
   return (0, _react2.jsx)(_index.Box, {
     gap: "xl",
     width: "100%"
-  }, (0, _react2.jsx)(_index.TextField, {
+  }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     labelMode: "left"
-  }), (0, _react2.jsx)(_index.TextField, {
+  })), (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label that is much longer than the previous one",
     labelMode: "left"
-  }), (0, _react2.jsx)(_index.TextField, {
+  })), (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example label with set width",
     labelMode: "left",
     containerProps: {
@@ -136,7 +133,7 @@ var LeftLabel = function LeftLabel() {
         gridTemplateColumns: '120px auto'
       }
     }
-  }));
+  })));
 };
 exports.LeftLabel = LeftLabel;
 LeftLabel.parameters = {
@@ -160,33 +157,33 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var Password = function Password() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Password = function Password(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     type: "password"
-  });
+  }));
 };
 exports.Password = Password;
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     label: "Example Label"
-  });
+  }));
 };
 exports.Disabled = Disabled;
-var ReadOnly = function ReadOnly() {
-  return (0, _react2.jsx)(_index.TextField, {
+var ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
 exports.ReadOnly = ReadOnly;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
 exports.Required = Required;
 var DynamicRequired = function DynamicRequired() {
@@ -204,41 +201,41 @@ var DynamicRequired = function DynamicRequired() {
   });
 };
 exports.DynamicRequired = DynamicRequired;
-var Error = function Error() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Error = function Error(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
 exports.Error = Error;
-var Success = function Success() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Success = function Success(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "success"
-  });
+  }));
 };
 exports.Success = Success;
-var Warning = function Warning() {
-  return (0, _react2.jsx)(_index.TextField, {
+var Warning = function Warning(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "warning"
-  });
+  }));
 };
 exports.Warning = Warning;
-var WithHelpHint = function WithHelpHint() {
-  return (0, _react2.jsx)(_index.TextField, {
+var WithHelpHint = function WithHelpHint(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"
-  });
+  }));
 };
 exports.WithHelpHint = WithHelpHint;
-var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
-  return (0, _react2.jsx)(_index.TextField, {
+var WithHelpHintCustomWidth = function WithHelpHintCustomWidth(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
@@ -246,7 +243,7 @@ var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
     helpHintProps: {
       width: '300px'
     }
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -261,18 +258,18 @@ WithHelpHintCustomWidth.parameters = {
     }
   }
 };
-var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.TextField, {
+var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
 exports.WithoutStatusIndicator = WithoutStatusIndicator;
-var MaxLength = function MaxLength() {
-  return (0, _react2.jsx)(_index.TextField, {
+var MaxLength = function MaxLength(args) {
+  return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };
 exports.MaxLength = MaxLength;
 var WithSlots = function WithSlots() {

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

@@ -1,30 +1,6 @@
-import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { TimeFieldProps } from '../../types';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<TimeFieldProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-        docs: {
-            source: {
-                type: string;
-            };
-            page: () => React.JSX.Element;
-        };
-        a11y: {
-            config: {
-                rules: {
-                    id: string;
-                    enabled: boolean;
-                }[];
-            };
-        };
-    };
-    argTypes: {};
-};
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<TimeFieldProps>;
 export declare const DefaultValue: StoryFn<TimeFieldProps>;

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

@@ -26,9 +26,6 @@ var _default = {
       argTypesRegex: '^on.*'
     },
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TimeField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
@@ -58,7 +55,7 @@ var DefaultValue = function DefaultValue(args) {
   }));
 };
 exports.DefaultValue = DefaultValue;
-var Controlled = function Controlled(args) {
+var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('12:30'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     time = _useState2[0],
@@ -66,11 +63,11 @@ var Controlled = function Controlled(args) {
   var onChangeHandler = function onChangeHandler(value) {
     return setTime(value.toString());
   };
-  return (0, _react2.jsx)(_index.TimeField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.TimeField, {
     "aria-label": "timefield-default",
     value: time,
     onChange: onChangeHandler
-  }));
+  });
 };
 exports.Controlled = Controlled;
 var Disabled = function Disabled(args) {

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

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WithCustomTimeZone = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -23,19 +24,19 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_index.TimeZonePicker, {
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, args, {
     label: "Default Example"
-  });
+  }));
 };
 exports.Default = Default;
-var WithCustomTimeZone = function WithCustomTimeZone() {
+var WithCustomTimeZone = function WithCustomTimeZone(args) {
   var customTimeZone = {
     '(GMT+02:00) Africa/Juba': 'Africa/Juba'
   };
-  return (0, _react2.jsx)(_index.TimeZonePicker, {
+  return (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, args, {
     additionalTimeZones: customTimeZone,
     label: "With Custom Time Zone (Africa/Juba)"
-  });
+  }));
 };
 exports.WithCustomTimeZone = WithCustomTimeZone;

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -38,7 +38,9 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isDarkMode = props.isDarkMode,
     hasNoArrow = props.hasNoArrow,
     targetRef = props.targetRef,
-    width = props.width;
+    width = props.width,
+    _props$shouldAnimate = props.shouldAnimate,
+    shouldAnimate = _props$shouldAnimate === void 0 ? true : _props$shouldAnimate;
   var _React$Children$toArr = _react["default"].Children.toArray(children),
     _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
     trigger = _React$Children$toArr2[0],
@@ -61,7 +63,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     themeState = _useGetTheme.themeState;
   var isTransitioning = (0, _hooks.useMountTransition)(state.isOpen, 200);
-  var isOpen = state.isOpen || themeState.isOnyx && isTransitioning;
+  var isOpen = state.isOpen || themeState.isOnyx && shouldAnimate && isTransitioning;
   var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
       placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
       targetRef: tooltipRef,
@@ -75,7 +77,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     positionProps = _useOverlayPosition.overlayProps,
     arrowProps = _useOverlayPosition.arrowProps,
     placement = _useOverlayPosition.placement;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {}, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(direction), direction), (0, _defineProperty2["default"])(_useStatusClasses2, "isDarkMode", isDarkMode), (0, _defineProperty2["default"])(_useStatusClasses2, "isTransitioning", isTransitioning), (0, _defineProperty2["default"])(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {}, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(direction), direction), (0, _defineProperty2["default"])(_useStatusClasses2, "isDarkMode", isDarkMode), (0, _defineProperty2["default"])(_useStatusClasses2, "animate", shouldAnimate), (0, _defineProperty2["default"])(_useStatusClasses2, "isTransitioning", isTransitioning), (0, _defineProperty2["default"])(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   var overlay = (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({
     isOpen: isOpen,