@pingux/astro 2.208.3 → 2.209.0-alpha.0

package/lib/components/Text/textAttributes.js

@@ -0,0 +1,26 @@
+export var textArgTypes = {
+  as: {
+    control: false
+  },
+  role: {
+    control: false
+  },
+  variant: {
+    control: false,
+    description: 'Text variant.'
+  },
+  children: {
+    control: false,
+    description: 'Text value.'
+  },
+  color: {
+    control: {
+      type: 'text'
+    },
+    description: 'Text color.'
+  },
+  bg: {
+    control: false,
+    description: 'Background color.'
+  }
+};

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

@@ -17,10 +17,8 @@ import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, TextAreaField } from '../../index';
 import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import TextAreaFieldReadme from './TextAreaField.mdx';
+import { textAreaFieldArgTypes } from './textAreaFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',
@@ -40,44 +38,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
-    label: {
-      control: {
-        type: 'text'
-      }
-    },
-    labelMode: {
-      control: {
-        type: 'select',
-        options: _Object$values(labelModes)
-      }
-    },
-    defaultValue: {},
-    placeholder: {},
-    name: {},
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    },
-    hintText: {
-      control: {
-        type: 'text'
-      }
-    },
-    rows: {},
-    isDisabled: {},
-    isRequired: {},
-    isReadOnly: {},
-    hasAutoFocus: {},
-    isUnresizable: {},
-    id: {},
-    autocomplete: {},
-    className: {},
-    value: {
-      control: false
-    }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
+  argTypes: _objectSpread({}, textAreaFieldArgTypes),
   args: {
     label: 'Example Label',
     labelMode: _Object$values(labelModes)[0]

package/lib/components/TextAreaField/textAreaFieldAttributes.js

@@ -0,0 +1,54 @@
+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";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+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) { _defineProperty(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; }
+import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
+export var textAreaFieldArgTypes = _objectSpread(_objectSpread(_objectSpread({
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  labelMode: {
+    control: {
+      type: 'select',
+      options: _Object$values(labelModes)
+    }
+  },
+  defaultValue: {},
+  placeholder: {},
+  name: {},
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  hintText: {
+    control: {
+      type: 'text'
+    }
+  },
+  rows: {},
+  isDisabled: {},
+  isRequired: {},
+  isReadOnly: {},
+  hasAutoFocus: {},
+  isUnresizable: {},
+  id: {},
+  autocomplete: {},
+  className: {},
+  value: {
+    control: false
+  }
+}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes);

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

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { TimeField } from '../../index';
 import TimeFieldReadme from './TimeField.mdx';
+import { timeFieldArgTypes } from './timeFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Experimental/TimeField',
@@ -26,7 +27,7 @@ export default {
       }
     }
   },
-  argTypes: {}
+  argTypes: timeFieldArgTypes
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {

package/lib/components/TimeField/timeFieldAttributes.js

@@ -0,0 +1,125 @@
+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(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) { _defineProperty(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; }
+import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+export var timeFieldArgTypes = {
+  isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the input is disabled.'
+  }),
+  isReadOnly: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the input can be selected but not changed by the user.'
+  }),
+  isRequired: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether user input is required on the input before form submission.'
+  }),
+  isInvalid: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the input value is invalid.'
+  }),
+  autoFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the element should receive focus on render.'
+  }),
+  shouldForceLeadingZeros: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether to always show leading zeros in the hour field.'
+  }),
+  hourCycle: {
+    control: {
+      type: 'select'
+    },
+    options: [12, 24],
+    description: 'Whether to display the time in 12 or 24 hour format. Default is determined by the user\'s locale.'
+  },
+  granularity: {
+    control: {
+      type: 'select'
+    },
+    options: ['hour', 'minute', 'second'],
+    description: 'Determines the smallest unit that is displayed in the time picker.'
+  },
+  validationBehavior: {
+    control: {
+      type: 'select'
+    },
+    options: ['native', 'aria'],
+    description: 'Whether to use native HTML form validation or ARIA to mark the field as required or invalid.'
+  },
+  label: {
+    control: {
+      type: 'text'
+    },
+    description: 'The content to display as the label.'
+  },
+  name: {
+    control: {
+      type: 'text'
+    },
+    description: 'The name of the input element, used when submitting an HTML form.'
+  },
+  id: {
+    control: {
+      type: 'text'
+    },
+    description: 'The element\'s unique identifier.'
+  },
+  slot: {
+    control: {
+      type: 'text'
+    },
+    description: 'A slot name for the component, allowing it to receive props from a parent component.'
+  },
+  value: {
+    control: {
+      type: null
+    },
+    description: 'The current value (controlled). Accepts a TimeValue, string, or null.'
+  },
+  defaultValue: {
+    control: {
+      type: null
+    },
+    description: 'The default value (uncontrolled). Accepts a TimeValue, string, or null.'
+  },
+  placeholderValue: {
+    control: {
+      type: null
+    },
+    description: 'A placeholder time that influences the format of the placeholder shown when no value is selected.'
+  },
+  minValue: {
+    control: {
+      type: null
+    },
+    description: 'The minimum allowed time that a user may select.'
+  },
+  maxValue: {
+    control: {
+      type: null
+    },
+    description: 'The maximum allowed time that a user may select.'
+  },
+  onChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the value changes.'
+  }),
+  onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the element receives focus.'
+  }),
+  onBlur: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the element loses focus.'
+  }),
+  onFocusChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the element\'s focus status changes.'
+  }),
+  onKeyDown: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when a key is pressed.'
+  }),
+  onKeyUp: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when a key is released.'
+  })
+};

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

@@ -1,8 +1,20 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { TimeZonePicker } from '../../index';
+import { funcArg } from '../../utils/docUtils/docArgTypes';
 import TimeZonePickerReadme from './TimeZonePicker.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -14,6 +26,50 @@ export default {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TimeZonePickerReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
+  },
+  argTypes: {
+    selectedKey: {
+      description: 'The key of the currently selected time zone item (controlled).',
+      control: {
+        type: 'text'
+      }
+    },
+    inputValue: {
+      description: 'The current value of the search input field (controlled).',
+      control: {
+        type: 'text'
+      }
+    },
+    emptySearchText: {
+      description: 'Text displayed when the search query returns no results.',
+      control: {
+        type: 'text'
+      }
+    },
+    locales: {
+      description: 'Locale string or array of locale strings used to format time zone display names.',
+      control: {
+        type: 'text'
+      }
+    },
+    onSelectionChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Callback invoked when the selected time zone changes.'
+    }),
+    onInputChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Callback invoked when the search input value changes.'
+    }),
+    additionalTimeZones: {
+      description: 'An object mapping custom display labels to IANA time zone identifiers to include alongside the default list.',
+      control: {
+        type: null
+      }
+    },
+    localeOptions: {
+      description: 'Options object passed to Intl.DateTimeFormat for locale-sensitive time zone name formatting.',
+      control: {
+        type: null
+      }
+    }
   }
 };
 export var Default = function Default(args) {

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -9,6 +9,7 @@ import { useGetTheme } from '../../hooks';
 import { Box, Button, Icon, IconButton, Text, Tooltip, TooltipTrigger } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import TooltipTriggerReadme from './TooltipTrigger.mdx';
+import { tooltipTriggerArgTypes } from './tooltipTriggerAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/TooltipTrigger',
@@ -19,7 +20,8 @@ export default {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TooltipTriggerReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
-  }
+  },
+  argTypes: tooltipTriggerArgTypes
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Tooltip Content"));

package/lib/components/TooltipTrigger/tooltipTriggerAttributes.js

@@ -0,0 +1,83 @@
+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(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) { _defineProperty(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; }
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { booleanArg } from '../../utils/docUtils/docArgTypes';
+export var tooltipTriggerArgTypes = _objectSpread({
+  align: {
+    description: 'Alignment of the tooltip relative to the trigger element.',
+    control: {
+      type: 'select'
+    },
+    options: ['start', 'end', 'middle']
+  },
+  direction: {
+    description: 'Where the tooltip opens relative to its trigger.',
+    control: {
+      type: 'select'
+    },
+    options: ['top', 'right', 'bottom', 'left']
+  },
+  offset: {
+    description: 'Offset of the tooltip relative to its trigger along the primary axis.',
+    control: {
+      type: 'number'
+    }
+  },
+  crossOffset: {
+    description: 'Additional offset applied along the cross axis between the tooltip and its anchor.',
+    control: {
+      type: 'number'
+    }
+  },
+  delay: {
+    description: 'Delay in milliseconds before the tooltip is shown after hovering.',
+    control: {
+      type: 'number'
+    }
+  },
+  arrowCrossOffset: {
+    description: 'Arrow offset relative to the left of the tooltip. Must be a px or percentage value.',
+    control: {
+      type: 'text'
+    }
+  },
+  width: {
+    description: 'Width applied to the wrapper of the tooltip component.',
+    control: {
+      type: 'text'
+    }
+  },
+  placement: {
+    description: 'The placement of the tooltip with respect to its anchor element.',
+    control: {
+      type: 'text'
+    }
+  },
+  isDarkMode: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the tooltip uses dark styling with white text (defaults to true).'
+  }),
+  isDefaultOpen: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the tooltip is open by default (uncontrolled).'
+  }),
+  isNotFlippable: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the tooltip is prevented from flipping when there is insufficient space for the given direction.'
+  }),
+  hasNoArrow: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the tooltip arrow indicator is hidden.'
+  }),
+  isOpen: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the tooltip is currently open (controlled).'
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the tooltip trigger is disabled, preventing the tooltip from appearing.'
+  })
+}, ariaAttributeBaseArgTypes);

package/lib/components/TreeView/TreeView.stories.js

@@ -1,3 +1,9 @@
+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 _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 _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
@@ -11,6 +17,7 @@ import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -27,9 +34,12 @@ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+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 _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect, useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Item, TreeView, useTreeData } from '../../index';
+import { funcArg } from '../../utils/docUtils/docArgTypes';
 import TreeViewReadMe from './TreeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -55,6 +65,56 @@ export default {
         }]
       }
     }
+  },
+  argTypes: {
+    onExpandedChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Callback invoked when the set of expanded tree nodes changes.'
+    }),
+    onKeyDown: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Callback invoked when a key is pressed while the tree has focus.'
+    }),
+    onDragStart: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Callback invoked when a drag operation on a tree item starts.'
+    }),
+    onDrop: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Callback invoked when an item is dropped onto the tree.'
+    }),
+    pageLength: {
+      description: 'Number of items to move focus by when Page Up or Page Down is pressed.',
+      control: {
+        type: 'number'
+      }
+    },
+    'aria-label': {
+      description: 'Defines an accessible label for the tree.',
+      control: {
+        type: 'text'
+      }
+    },
+    tree: {
+      description: 'The tree data object returned by useTreeData, used to manage tree state.',
+      control: {
+        type: null
+      }
+    },
+    items: {
+      description: 'The iterable list of top-level tree items to render.',
+      control: {
+        type: null
+      }
+    },
+    disabledKeys: {
+      description: 'Keys of items that are disabled and cannot be interacted with.',
+      control: {
+        type: null
+      }
+    },
+    loadingNodes: {
+      description: 'Array of node loading state objects indicating which nodes are currently loading children.',
+      control: {
+        type: null
+      }
+    }
   }
 };
 var data = [{

package/lib/index.js

@@ -151,6 +151,8 @@ export { default as PanelHeaderMenu } from './components/PanelHeader/controls/Pa
 export { default as PanelHeaderSwitchField } from './components/PanelHeader/controls/PanelHeaderSwitchField';
 export { default as PasswordField } from './components/PasswordField';
 export * from './components/PasswordField';
+export { default as PhoneNumberField } from './components/PhoneNumberField';
+export * from './components/PhoneNumberField';
 export { default as PopoverContainer } from './components/PopoverContainer';
 export * from './components/PopoverContainer';
 export { default as PopoverMenu } from './components/PopoverMenu';

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/types/index.js

@@ -42,6 +42,7 @@ export * from './navBar';
 export * from './navSideBar';
 export * from './overlayPanel';
 export * from './passwordField';
+export * from './phoneNumberField';
 export * from './popoverContainer';
 export * from './popoverMenu';
 export * from './progressBar';

package/lib/types/phoneNumberField.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -163,6 +163,9 @@ export var FIGMA_LINKS = {
     withAvatar: 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=4470-24174&m=dev',
     withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39713&mode=dev'
   },
+  phoneNumberField: {
+    "default": 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=8496-31873'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },