@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -0,0 +1,234 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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 { text as textVariants } from '../Text/Text.styles';
+export var base = _objectSpread({
+  cursor: 'pointer',
+  height: 36,
+  lineHeight: '30px',
+  minWidth: 'min-content',
+  px: 'md',
+  outline: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '2px',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap'
+}, textVariants.buttonLabel);
+var defaultActive = {
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  'path': {
+    fill: 'white'
+  }
+};
+var defaultHover = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.40',
+  color: 'accent.40',
+  boxShadow: 'standard'
+};
+export var defaultFocus = {
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '2px'
+};
+export var focusWithCroppedOutline = {
+  boxShadow: 'none',
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '1px'
+};
+var primary = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  '&.is-hovered': {
+    bg: 'accent.40',
+    border: '1px solid',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var success = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'success.bright',
+  border: '1px solid',
+  borderColor: 'success.bright',
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var critical = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'critical.bright',
+  border: '1px solid',
+  borderColor: 'critical.bright',
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var inline = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'white',
+  height: '22px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  borderColor: 'active',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+export var text = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  border: '1px solid',
+  borderColor: 'transparent',
+  color: 'active',
+  height: 'auto',
+  padding: '0',
+  lineHeight: 'unset',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+});
+export var quiet = {
+  all: 'unset',
+  display: 'flex'
+};
+export var link = _objectSpread(_objectSpread({}, text), {}, {
+  lineHeight: 'unset',
+  textDecoration: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: 'max-content',
+  '&.is-current': {
+    cursor: 'default',
+    color: 'text.primary'
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+});
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
+export default {
+  critical: critical,
+  "default": _objectSpread(_objectSpread({}, base), {}, {
+    bg: 'white',
+    border: '1px solid',
+    borderColor: 'active',
+    '&.is-hovered': _objectSpread({}, defaultHover),
+    '&.is-pressed': _objectSpread({}, defaultActive),
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }),
+  filter: filter,
+  inline: inline,
+  inlinePrimary: inlinePrimary,
+  link: link,
+  primary: primary,
+  quiet: quiet,
+  success: success,
+  colorBlock: colorBlock
+};

package/lib/components/Callout/Callout.js

@@ -2,9 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "status"];
-
 var _calloutProps;
-
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -31,6 +29,7 @@ var defaultIconProps = {
   ml: 'md',
   size: 'md'
 };
+
 /**
  Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
  component is recommended if you need to interrupt and notify users of successful/failed actions
@@ -39,9 +38,8 @@ var defaultIconProps = {
 
 var Callout = function Callout(_ref) {
   var children = _ref.children,
-      status = _ref.status,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    status = _ref.status,
+    others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
@@ -53,7 +51,6 @@ var Callout = function Callout(_ref) {
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 };
-
 Callout.propTypes = {
   /** Determines the icon and color  */
   status: PropTypes.oneOf(_Object$values(statuses))

package/lib/components/Callout/Callout.stories.js

@@ -1,8 +1,8 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
-import { Link, Text, Callout } from '../..';
-import statuses from '../../utils/devUtils/constants/statuses';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Callout, Link, Text } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import CalloutReadme from './Callout.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -26,8 +26,9 @@ export default {
       }
     }
   }
-}; // main
+};
 
+// main
 export var Default = function Default(args) {
   return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
@@ -45,8 +46,9 @@ export var ErrorStatus = function ErrorStatus() {
     "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More")));
-}; // Avoiding using Error as the function name due to it being a JS built-in method
+};
 
+// Avoiding using Error as the function name due to it being a JS built-in method
 ErrorStatus.storyName = 'Error';
 export var Success = function Success() {
   return ___EmotionJSX(Callout, {

package/lib/components/Callout/Callout.test.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 var _testColors;
-
 import React from 'react';
 import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -11,12 +9,10 @@ import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Callout, props, TEST_TEXT));
 };
-
 describe('Callout', function () {
   test('renders', function () {
     getComponent();

package/lib/components/Card/Card.js

@@ -2,57 +2,51 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
-import { useHover, usePress } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
-import Box from '../Box';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
+import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Card = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      onHoverStart = props.onHoverStart,
-      onHoverChange = props.onHoverChange,
-      onHoverEnd = props.onHoverEnd,
-      onPress = props.onPress,
-      onPressStart = props.onPressStart,
-      onPressEnd = props.onPressEnd,
-      onPressChange = props.onPressChange,
-      onPressUp = props.onPressUp,
-      others = _objectWithoutProperties(props, _excluded);
-
+    onHoverStart = props.onHoverStart,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onPress = props.onPress,
+    onPressStart = props.onPressStart,
+    onPressEnd = props.onPressEnd,
+    onPressChange = props.onPressChange,
+    onPressUp = props.onPressUp,
+    others = _objectWithoutProperties(props, _excluded);
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   var _usePress = usePress({
-    ref: ref,
-    onPress: onPress,
-    onPressStart: onPressStart,
-    onPressEnd: onPressEnd,
-    onPressChange: onPressChange,
-    onPressUp: onPressUp
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
+      ref: ref,
+      onPress: onPress,
+      onPressStart: onPressStart,
+      onPressEnd: onPressEnd,
+      onPressChange: onPressChange,
+      onPressUp: onPressUp
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useFocusRing2 = useFocusRing({
-    within: true
-  }),
-      focusWithinProps = _useFocusRing2.focusProps,
-      isFocusedWithin = _useFocusRing2.isFocusVisible;
-
+      within: true
+    }),
+    focusWithinProps = _useFocusRing2.focusProps,
+    isFocusedWithin = _useFocusRing2.isFocusVisible;
   var _useStatusClasses = useStatusClasses(className, {
-    isHovered: isHovered,
-    isPressed: isPressed,
-    isFocused: isFocusVisible || isFocusedWithin
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible || isFocusedWithin
+    }),
+    classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
     "aria-label": ariaLabel,
@@ -65,50 +59,42 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
 Card.propTypes = {
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
-
   /**
    * Handler that is called when a hover interaction starts.
    * (e: HoverEvent) => void
    */
   onHoverStart: PropTypes.func,
-
   /**
   * Handler that is called when a hover interaction ends.
   * (e: HoverEvent) => void
   */
   onHoverEnd: PropTypes.func,
-
   /**
   * Handler that is called when the hover state changes.
   * (isHovering: boolean) => void
   */
   onHoverChange: PropTypes.func,
-
   /**
   * Handler that is called when the press is released over the target.
   * (e: PressEvent) => void
   */
   onPress: PropTypes.func,
-
   /**
   * Handler that is called when a press interaction starts.
   * (e: PressEvent) => void
   */
   onPressStart: PropTypes.func,
-
   /**
   * Handler that is called when a press interaction ends, either over the target or when the
   * pointer leaves the target.
   * (e: PressEvent) => void
   */
   onPressEnd: PropTypes.func,
-
   /**
   * Handler that is called when the press state changes.
   * (isPressed: boolean) => void
   */
   onPressChange: PropTypes.func,
-
   /**
   * Handler that is called when a press is released over the target, regardless of whether it
   * started on the target or not.

package/lib/components/Card/Card.stories.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Box, Button, Card } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Button, Card } from '../../index';
 import CardReadme from './Card.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/Card/Card.styles.js

@@ -0,0 +1,13 @@
+var container = {
+  display: 'flex',
+  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
+  borderRadius: '3px',
+  color: 'text.primary',
+  fontSize: 'md',
+  fontWeight: 0,
+  flex: '1 1 0',
+  p: 'lg'
+};
+export default {
+  container: container
+};

package/lib/components/Card/Card.test.js

@@ -2,22 +2,21 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Card from './Card';
-import Button from '../Button';
 import axeTest from '../../utils/testUtils/testAxe';
+import Button from '../Button';
+import Card from './Card';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
   'data-testid': testId,
   label: 'Test Label'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Card, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders Card component', function () {
   getComponent();
@@ -26,7 +25,6 @@ test('renders Card component', function () {
 });
 test('renders children within Card component', function () {
   var children = ___EmotionJSX(Button, null);
-
   getComponent({
     children: children
   });
@@ -35,7 +33,6 @@ test('renders children within Card component', function () {
 });
 test('card allows hover, focus, and press events', function () {
   var children = ___EmotionJSX(Button, null);
-
   var onPress = jest.fn();
   getComponent({
     children: children,
@@ -54,7 +51,6 @@ test('card allows hover, focus, and press events', function () {
 });
 test('allows focus within card', function () {
   var children = ___EmotionJSX(Button, null);
-
   getComponent({
     children: children,
     tabIndex: 0

package/lib/components/Checkbox/Checkbox.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import CheckboxBase from './CheckboxBase';
+
 /**
  * Basic checkbox input.
  * Built on top of the [Checkbox from Theme-UI](https://theme-ui.com/components/checkbox/).
  *
  * **Note: Requires a label. It's recommended to use `CheckboxField` for a complete solution.**
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(CheckboxBase, _extends({

package/lib/{styles/forms/checkbox.js → components/Checkbox/Checkbox.styles.js}

@@ -1,4 +1,5 @@
 // Styles for default checkbox and variants go here.
+
 // Default checkbox
 export var checkbox = {
   color: 'active',

package/lib/components/Checkbox/Checkbox.test.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import Checkbox from './Checkbox';
 import axeTest from '../../utils/testUtils/testAxe';
+import Checkbox from './Checkbox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Checkbox, props));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent, {
   // Checkbox with label provided by CheckboxField
   rules: {
@@ -22,7 +21,7 @@ test('default checkbox', function () {
   getComponent();
   var input = screen.getByRole('checkbox');
   expect(input).toBeInstanceOf(HTMLInputElement);
-  expect(input).toBeInTheDocument(); // Should be visually hidden
-
+  expect(input).toBeInTheDocument();
+  // Should be visually hidden
   expect(input).not.toBeVisible();
 });

package/lib/components/Checkbox/CheckboxBase.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
-import { Checkbox as ThemeUICheckbox } from 'theme-ui';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { Checkbox as ThemeUICheckbox } from 'theme-ui';
 import Box from '../Box';
+
 /**
  * Checkbox component from Theme UI, renders a visually hidden input + svg icons for the
  * checked and unchecked states.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUICheckbox, _extends({
@@ -18,7 +18,6 @@ var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, props));
 });
-
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
   return ___EmotionJSX("svg", _extends({
     width: "24",
@@ -42,12 +41,11 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     fill: "white"
   }));
 };
+
 /**
  * Renders a visually hidden default checkbox since the Theme UI checkbox does not support
  * indeterminism. This allows us to have the necessary ARIA attributes and visual presentation.
  */
-
-
 var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   /* eslint-disable no-param-reassign */
   if (ref !== null && ref !== void 0 && ref.current) ref.current.indeterminate = true;