@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

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

@@ -158,10 +158,14 @@ var text = exports.text = _objectSpread(_objectSpread({
   },
   tabLabel: {
     color: _onyxTokens.astroTokens.color.font.base,
-    wordBreak: 'normal',
-    lineHeight: 'body',
+    fontWeight: 0,
+    wordBreak: 'break-word',
+    lineHeight: 'sm',
     mb: 'sm',
     mt: 'sm',
+    '.is-disabled &': {
+      opacity: 0.65
+    },
     '.is-selected &': {
       color: _onyxTokens.astroTokens.color.font.link,
       mb: 'sm'

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

@@ -71,6 +71,13 @@ declare const _default: {
         };
         item: {};
     };
+    arrayField: {
+        listItem: import("theme-ui").ThemeUICSSObject;
+        helperTextContainer: import("theme-ui").ThemeUICSSObject;
+        bottomBar: import("theme-ui").ThemeUICSSObject;
+        addButton: import("theme-ui").ThemeUICSSObject;
+        addButtonText: import("theme-ui").ThemeUICSSObject;
+    };
     attachment: {
         container: {
             backgroundColor: string;
@@ -271,7 +278,9 @@ declare const _default: {
         indeterminateCheckboxIcon: {
             height: string;
             width: string;
+            color: string;
             '&.is-disabled': {
+                opacity: number;
                 '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
                     fill: string;
                     stroke: string;
@@ -363,6 +372,11 @@ declare const _default: {
             height: string;
         };
     };
+    checkboxFieldGroup: {
+        container: import("theme-ui").ThemeUICSSObject;
+        items: import("theme-ui").ThemeUICSSObject;
+        item: import("theme-ui").ThemeUICSSObject;
+    };
     codeView: {
         default: {
             theme: {
@@ -479,6 +493,9 @@ declare const _default: {
                 lineHeight: string;
             };
             copyButton: {
+                path: {
+                    fill: string;
+                };
                 default: {
                     mx: string;
                     path: {
@@ -610,6 +627,9 @@ declare const _default: {
                 backgroundColor: string;
             };
             copyButton: {
+                path: {
+                    fill: string;
+                };
                 default: {
                     mx: string;
                     path: {
@@ -700,6 +720,18 @@ declare const _default: {
             px: string;
         };
     };
+    emptyState: {
+        container: {
+            flexDirection: string;
+            alignItems: string;
+            justifyContent: string;
+            height: string;
+            width: string;
+            gap: string;
+            py: string;
+            textAlign: string;
+        };
+    };
     environmentBreadcrumb: {
         button: {
             current: {
@@ -763,6 +795,19 @@ declare const _default: {
             fontWeight: number;
         };
     };
+    iconBadge: {
+        container: {
+            alignItems: string;
+            justifyContent: string;
+            borderRadius: string;
+        };
+        badgeCircle: {
+            bottom: string;
+            height: string;
+            width: string;
+            borderRadius: string;
+        };
+    };
     iconWrapper: {
         xs: {
             justifyContent: string;
@@ -836,16 +881,16 @@ declare const _default: {
         };
     };
     labelValuePairs: {
+        value: {
+            color: string;
+            fontWeight: number;
+        };
         container: {
             gap: string;
         };
         fieldItem: {
             gap: string;
         };
-        value: {
-            fontWeight: number;
-            color: string;
-        };
         subLabel: {
             fontSize: string;
             fontWeight: number;
@@ -857,8 +902,8 @@ declare const _default: {
             p: number;
         };
         option: {
-            py: any;
-            pl: any;
+            py: string;
+            pl: string;
             pr: number;
             justifyContent: string;
             borderRadius: number;
@@ -936,6 +981,9 @@ declare const _default: {
         iconWrapper: {
             ml: string;
         };
+        imageContainer: {
+            width: string;
+        };
         imageWrapper: {
             ml: string;
         };
@@ -968,6 +1016,36 @@ declare const _default: {
                 };
             };
         };
+        container: {
+            p: number;
+            bg: string;
+            '&.is-selected': {
+                bg: string;
+            };
+            borderBottom: string;
+            '&.has-separator': {
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-focused': {
+                boxShadow: string;
+                bg: string;
+            };
+            '&.is-first-item': {
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+            };
+            '&.is-last-item': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '&.has-separator': {
+                    border: string;
+                };
+            };
+        };
         styledContainer: {
             bg: string;
             '&.is-hovered': {
@@ -1126,6 +1204,11 @@ declare const _default: {
     menuTab: {
         ml: string;
     };
+    tabPickerExpandIcon: {
+        ml: string;
+        width: string;
+        height: string;
+    };
     message: {
         wrapper: {
             gap: string;
@@ -1613,8 +1696,18 @@ declare const _default: {
             borderRadius: string;
             p: string;
         };
+        calendarHeaderContainer: {
+            mt: number;
+            height: string;
+            mb: string;
+            width: string;
+        };
         columnHeader: {
             color: string;
+            fontWeight: number;
+            '&.is-disabled': {
+                opacity: number;
+            };
         };
         calendarRow: {
             bg: string;
@@ -2063,6 +2156,9 @@ declare const _default: {
         '& > span': {
             px: string;
             fontSize: string;
+            mb: string;
+            mt: string;
+            minWidth: number;
         };
         '&.is-focused': {
             boxShadow: string;
@@ -2238,6 +2334,7 @@ declare const _default: {
         };
     };
     tabs: {
+        mb: string;
         '&.is-horizontal': {
             gap: string;
         };

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

@@ -18,12 +18,15 @@ exports["default"] = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _onyxTokens = require("@pingux/onyx-tokens");
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
+var _CheckboxFieldGroup = _interopRequireDefault(require("../../../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles"));
+var _EmptyState = _interopRequireDefault(require("../../../../components/EmptyState/EmptyState.styles"));
 var _LabelValuePairs = _interopRequireDefault(require("../../../../components/LabelValuePairs/LabelValuePairs.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _sizes = _interopRequireDefault(require("../sizes"));
 var _accordion = _interopRequireDefault(require("./accordion"));
 var _accordionGrid = _interopRequireDefault(require("./accordionGrid"));
+var _arrayField = _interopRequireDefault(require("./arrayField"));
 var _avatar = require("./avatar");
 var _box = require("./box");
 var _button = _interopRequireWildcard(require("./button"));
@@ -52,9 +55,14 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var onyxLabelValuePairs = _objectSpread(_objectSpread({}, _LabelValuePairs["default"]), {}, {
+  value: _objectSpread(_objectSpread({}, _LabelValuePairs["default"].value), {}, {
+    color: 'text.primary'
+  })
+});
 var fieldHelperText = {
   title: {
-    fontSize: 'small',
+    fontSize: 'md',
     pt: '0px !important',
     mt: '.25rem',
     '&.is-default': {
@@ -71,6 +79,19 @@ var fieldHelperText = {
     }
   }
 };
+var iconBadge = {
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%'
+  },
+  badgeCircle: {
+    bottom: '-2px',
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%'
+  }
+};
 var badgeDeleteButton = exports.badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
   borderRadius: '50%',
   cursor: 'pointer',
@@ -164,8 +185,8 @@ var listBox = {
     p: _onyxTokens.astroTokens.spacing.sm
   },
   option: {
-    py: _onyxTokens.astroTokens.spacing['md-s'],
-    pl: _onyxTokens.astroTokens.spacing['md-s'],
+    py: 'md-s',
+    pl: 'md-s',
     pr: _onyxTokens.astroTokens.spacing.md,
     justifyContent: 'space-between',
     borderRadius: _onyxTokens.astroTokens.radius.md,
@@ -474,20 +495,24 @@ var helpHint = {
 var _default = exports["default"] = {
   accordion: _accordion["default"],
   accordionGrid: _accordionGrid["default"],
+  arrayField: _arrayField["default"],
   attachment: _Attachment["default"],
   avatar: _avatar.avatar,
   breadcrumb: breadcrumb,
   box: _box.box,
   buttonBar: buttonBar,
   callout: _callout["default"],
+  checkboxFieldGroup: _CheckboxFieldGroup["default"],
   codeView: _codeView["default"],
   dataTable: _dataTable.dataTable,
+  emptyState: _EmptyState["default"],
   environmentBreadcrumb: _environmentBreadcrumb["default"],
   fieldHelperText: fieldHelperText,
   footer: _footer.footer,
   helpHint: helpHint,
+  iconBadge: iconBadge,
   iconWrapper: _iconWrapper["default"],
-  labelValuePairs: _LabelValuePairs["default"],
+  labelValuePairs: onyxLabelValuePairs,
   listBox: listBox,
   listView: _listview.listView,
   listViewItem: _listview.listViewItem,
@@ -497,6 +522,7 @@ var _default = exports["default"] = {
   menuItem: _menu.menuItem,
   menuSection: _menu.menuSection,
   menuTab: _tabs.menuTab,
+  tabPickerExpandIcon: _tabs.tabPickerExpandIcon,
   message: _messages.message,
   modal: modal,
   navBar: _navbar.navBar,

package/lib/cjs/styles/variants/variants.js

@@ -18,23 +18,27 @@ exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _AccordionGrid = _interopRequireDefault(require("../../components/AccordionGridGroup/AccordionGrid.styles"));
 var _Accordion = _interopRequireDefault(require("../../components/AccordionGroup/Accordion.styles"));
+var _ArrayField = _interopRequireDefault(require("../../components/ArrayField/ArrayField.styles"));
 var _Box = _interopRequireDefault(require("../../components/Box/Box.styles"));
 var _Bracket = _interopRequireDefault(require("../../components/Bracket/Bracket.styles"));
 var _Breadcrumb = _interopRequireDefault(require("../../components/Breadcrumbs/Breadcrumb.styles"));
 var _ButtonBar = _interopRequireDefault(require("../../components/ButtonBar/ButtonBar.styles"));
 var _Calendar = _interopRequireDefault(require("../../components/Calendar/Calendar.styles"));
 var _Callout = _interopRequireDefault(require("../../components/Callout/Callout.styles"));
+var _CheckboxFieldGroup = _interopRequireDefault(require("../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles"));
 var _CodeEditor = _interopRequireDefault(require("../../components/CodeEditor/CodeEditor.styles"));
 var _CodeView = _interopRequireDefault(require("../../components/CodeView/CodeView.styles"));
 var _CollapsiblePanel = _interopRequireDefault(require("../../components/CollapsiblePanel/CollapsiblePanel.styles"));
 var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyText.styles"));
 var _DataTable = _interopRequireDefault(require("../../components/DataTable/DataTable.styles"));
+var _EmptyState = _interopRequireDefault(require("../../components/EmptyState/EmptyState.styles"));
 var _EnvironmentalBreadcrumb = _interopRequireDefault(require("../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles"));
 var _ExpandableText = _interopRequireDefault(require("../../components/ExpandableText/ExpandableText.styles"));
 var _FieldHelperText = _interopRequireDefault(require("../../components/FieldHelperText/FieldHelperText.styles"));
 var _Footer = _interopRequireDefault(require("../../components/Footer/Footer.styles"));
 var _GridList = _interopRequireDefault(require("../../components/GridList/GridList.styles"));
 var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHint.styles"));
+var _IconBadge = _interopRequireDefault(require("../../components/IconBadge/IconBadge.styles"));
 var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
 var _LabelValuePairs = _interopRequireDefault(require("../../components/LabelValuePairs/LabelValuePairs.styles"));
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
@@ -77,6 +81,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 var _default = exports["default"] = _objectSpread(_objectSpread({
   accordion: _Accordion["default"],
   accordionGrid: _AccordionGrid["default"],
+  arrayField: _ArrayField["default"],
   box: _Box["default"],
   bracket: _Bracket["default"],
   breadcrumb: _Breadcrumb["default"],
@@ -84,17 +89,20 @@ var _default = exports["default"] = _objectSpread(_objectSpread({
   calendar: _Calendar["default"],
   rangeCalendar: _RangeCalendar["default"],
   callout: _Callout["default"],
+  checkboxFieldGroup: _CheckboxFieldGroup["default"],
   codeEditor: _CodeEditor["default"],
   codeView: _CodeView["default"],
   collapsiblePanel: _CollapsiblePanel["default"],
   copyText: _CopyText["default"],
   dataTable: _DataTable["default"],
+  emptyState: _EmptyState["default"],
   environmentBreadcrumb: _EnvironmentalBreadcrumb["default"],
   expandableText: _ExpandableText["default"],
   fieldHelperText: _FieldHelperText["default"],
   footer: _Footer["default"],
   gridList: _GridList["default"],
   helpHint: _HelpHint["default"],
+  iconBadge: _IconBadge["default"],
   imageUpload: _imageUpload["default"],
   labelValuePairs: _LabelValuePairs["default"],
   listBox: _ListBox["default"],

package/lib/cjs/types/AccordionGridGroup.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { MultipleSelectionStateProps } from '@react-stately/selection';
+import { TestingAttributes } from './shared/test';
+import { AccordionGridItemHeaderProps } from './AccordionGridItem';
+import { BoxProps } from './box';
+export interface AccordionGridGroupProps<T extends object = object> extends Omit<BoxProps, 'children'>, MultipleSelectionStateProps {
+    /** The list of ListView items (controlled). */
+    items?: Iterable<T>;
+    children?: ReactNode | ((item: T) => ReactNode);
+    /**
+     * Defines a type of navigation mode.
+     * "native" - navigation via "tab" key.
+     *  "arrows" - navigation via arrow keys.
+     */
+    navigationMode?: 'native' | 'arrows';
+    /** Props object that is spread directly into the root (top-level) element. */
+    containerProps?: BoxProps & TestingAttributes;
+    /**
+     * The props object is directly spread into the accordion header element.
+     * Utilize the `customUpArrow` & `customDownArrow` keys to incorporate custom Up and Down arrows.
+     * */
+    headerProps?: AccordionGridItemHeaderProps;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended description for
+     * the object.
+     */
+    'aria-details'?: string;
+}

package/lib/cjs/types/AccordionGridGroup.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/AccordionGridItem.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import type { MdiReactIconComponentType } from '@pingux/mdi-react';
+import type { Node } from '@react-types/shared';
+import type { MaterialSymbol } from 'material-symbols';
+import { BoxProps } from './box';
+import { IconTypeExtended } from './icon';
+export interface AccordionGridItemProps extends BoxProps {
+    /** The grid node for this accordion item, provided by AccordionGridGroup. */
+    item?: Node<object>;
+    /** Props object that is spread into the accordion item header element. */
+    headerProps?: AccordionGridItemHeaderProps;
+    /** Props object that is spread into the accordion item body element. */
+    bodyProps?: AccordionGridItemBodyProps;
+    /**
+     * Defines a type of navigation mode.
+     * "native" - navigation via "tab" key.
+     *  "arrows" - navigation via arrow keys.
+     */
+    navigationMode?: 'native' | 'arrows';
+    className?: string;
+    children?: ReactNode;
+}
+export interface AccordionGridItemBodyProps extends BoxProps {
+    /** The grid cell node for this accordion item body, provided by AccordionGridGroup. */
+    item?: Node<object>;
+    /**
+     * Defines a type of navigation mode.
+     * "native" - navigation via "tab" key.
+     *  "arrows" - navigation via arrow keys.
+     */
+    navigationMode?: 'native' | 'arrows';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+}
+export interface AccordionGridItemHeaderProps extends BoxProps {
+    /** The grid cell node for this accordion item header, provided by AccordionGridGroup. */
+    item?: Node<object>;
+    /** Whether to render the expand/collapse caret in the header. */
+    hasCaret?: boolean;
+    /** Custom icon to render as the down (collapsed) arrow. */
+    customDownArrow?: IconTypeExtended | MaterialSymbol | string | MdiReactIconComponentType;
+    /** Custom icon to render as the up (expanded) arrow. */
+    customUpArrow?: IconTypeExtended | MaterialSymbol | string | MdiReactIconComponentType;
+    /**
+     * Defines a type of navigation mode.
+     * "native" - navigation via "tab" key.
+     *  "arrows" - navigation via arrow keys.
+     */
+    navigationMode?: 'native' | 'arrows';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+}

package/lib/cjs/types/AccordionGridItem.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/AstroProvider.d.ts

@@ -0,0 +1,32 @@
+import { Theme } from 'theme-ui';
+import { BoxProps } from './box';
+export interface AstroTheme extends Theme {
+    /** Theme identifier used by theme-conditional logic; e.g. 'ASTRO', 'NEXT_GEN', 'End User'. */
+    name?: string;
+}
+export interface GlobalStylesProps {
+    /** Whether the End User (pingito) font should be preferred for the global font stack. */
+    isEndUserTheme?: boolean;
+}
+export interface AstroProviderProps extends BoxProps {
+    /** Array of theme objects which will be merged with the default theme.
+     * In the case of clashes, these will take priority.
+     * Useful for customizing the default variants, adding new ones,
+     * or overriding other theme values. */
+    themeOverrides?: AstroTheme[];
+    /** The default theme applied to the Astro components.
+     * Overriding this is an advanced use case so
+     * please understand potential reprecussions before editing */
+    defaultTheme?: AstroTheme;
+}
+export interface PageWrapperProps extends BoxProps {
+    /** Array of theme objects which will be merged with the default theme.
+     * In the case of clashes, these will take priority.
+     * Useful for customizing the default variants, adding new ones,
+     * or overriding other theme values. */
+    themeOverrides?: AstroTheme[];
+    /** The default theme applied to the Astro components.
+     * Overriding this is an advanced use case so
+     * please understand potential reprecussions before editing */
+    defaultTheme?: AstroTheme;
+}

package/lib/cjs/types/AstroProvider.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/Checkbox.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { BoxProps } from './box';
+import { ValidPositiveInteger } from './shared';
+export interface CheckboxBaseProps extends Omit<BoxProps, 'title'> {
+    /** Whether the checkbox is displayed in the indeterminate (mixed) state. */
+    isIndeterminate?: boolean;
+    /** Whether the checkbox is checked (controlled). */
+    checked?: boolean;
+    /** Whether the checkbox is checked by default (uncontrolled). */
+    defaultChecked?: boolean;
+    /** Whether the checkbox is selected by default (uncontrolled). */
+    defaultSelected?: boolean;
+    /** Whether the element should receive focus on render. */
+    hasAutoFocus?: boolean;
+    /** Provides a hint for autocompletion of the input value. */
+    autoComplete?: string;
+    /** Provides a hint for autocorrection of the input value. */
+    autoCorrect?: string;
+    /** The default value of the input (uncontrolled). */
+    defaultValue?: string | number;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /** The maximum number of characters allowed in the input. */
+    maxLength?: ValidPositiveInteger;
+    /** The name of the input, used when submitting form data. */
+    name?: string;
+    /** The placeholder text displayed when the input is empty. */
+    placeholder?: string;
+    /** Whether the input is read-only. */
+    readOnly?: boolean;
+    /** Whether the input is required. */
+    required?: boolean;
+    /** Whether the input can be spell-checked. */
+    spellCheck?: boolean;
+    /** Native input title (tooltip text). */
+    title?: string;
+    /** The value of the input (controlled). */
+    value?: string | number;
+    /** The content rendered inside the checkbox container. */
+    children?: ReactNode;
+}
+export type CheckboxProps = CheckboxBaseProps;

package/lib/cjs/types/Checkbox.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/badge.d.ts

@@ -1,6 +1,8 @@
 import { StylePropertyValue, ThemeUICSSObject } from 'theme-ui';
+import { HelpHintProps } from './helpHint';
 import { DOMAttributes } from './shared';
 import { TextProps } from './text';
+export type BadgeHelpHintProps = Pick<HelpHintProps, 'align' | 'arrowCrossOffset' | 'closeDelay' | 'crossOffset' | 'direction' | 'hasNoArrow' | 'isDarkMode' | 'isNotFlippable' | 'offset' | 'popoverProps' | 'width'>;
 export interface BadgeProps extends DOMAttributes {
     /** The text color of the badge. */
     textColor?: string | object;
@@ -13,6 +15,10 @@ export interface BadgeProps extends DOMAttributes {
     };
     /** The label of the badge. */
     label?: React.ReactNode;
+    /** Hint text shown in a tooltip. When provided, the badge itself is the tooltip trigger. */
+    helpHint?: string;
+    /** Props object used to customize the help hint tooltip. */
+    helpHintProps?: BadgeHelpHintProps;
     /** Props object that is spread directly into the text. */
     textProps?: TextProps;
     /** When true, display badge label as uppercase. */

package/lib/cjs/types/checkboxFieldGroup.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { AriaCheckboxGroupItemProps, AriaCheckboxGroupProps } from 'react-aria';
+import { SharedFieldProps } from './shared/fieldProps';
+import { HelpHintProps } from './helpHint';
+import { Status } from './item';
+type CheckboxFieldGroupValidation = {
+    isInvalid: boolean;
+    validationErrors: string[];
+    validationDetails: ValidityState;
+};
+export type CheckboxFieldGroupOrientation = 'vertical' | 'horizontal';
+export interface CheckboxFieldGroupProps extends Omit<AriaCheckboxGroupProps, 'label' | 'description' | 'errorMessage'>, Omit<SharedFieldProps, 'label' | 'helperText'> {
+    /** The visible label for the group. */
+    label?: ReactNode;
+    /** Text rendered below the group. */
+    helperText?: ReactNode;
+    /** Error text rendered below the group when the group is invalid. */
+    errorMessage?: ReactNode | ((validation: CheckboxFieldGroupValidation) => ReactNode);
+    /** The direction in which group items are laid out. */
+    orientation?: CheckboxFieldGroupOrientation;
+    /** The children that consume this group's selection context. */
+    children?: ReactNode;
+    /** Props object that is spread directly into the help hint element. */
+    helpHintProps?: HelpHintProps;
+    className?: string;
+}
+export interface CheckboxFieldGroupItemProps extends Omit<AriaCheckboxGroupItemProps, 'children' | 'onChange'> {
+    /** The visible label for the item. */
+    label?: ReactNode;
+    /** Text rendered below the item. */
+    helperText?: ReactNode;
+    /** The visual status applied to the item helper text and field. */
+    status?: Status;
+    /** Props object that is spread directly into the checkbox input. */
+    controlProps?: object;
+    /** Props object that is spread directly into the checkbox visual primitive. */
+    checkBoxProps?: object;
+    /** Whether the item should receive focus on render. */
+    hasAutoFocus?: boolean;
+    /** If present, renders a help hint next to the item label. */
+    hintText?: string;
+    /** Props object that is spread directly into the help hint element. */
+    helpHintProps?: HelpHintProps;
+    /** Handler called when this item's selection state changes. */
+    onChange?: (isSelected: boolean) => void;
+    className?: string;
+}
+export {};

package/lib/cjs/types/checkboxFieldGroup.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});