@pingux/astro 2.208.3 → 2.209.0-alpha.0

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -163,6 +163,9 @@ export declare const FIGMA_LINKS: {
         withAvatar: string;
         withExtraLongText: string;
     };
+    phoneNumberField: {
+        default: string;
+    };
     popoverMenu: {
         default: string;
     };

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

@@ -170,6 +170,9 @@ var FIGMA_LINKS = exports.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'
   },

package/lib/cjs/utils/testUtils/universalFormSubmitTest.js

@@ -139,6 +139,7 @@ var useDefaultProps = function useDefaultProps(componentType) {
           name: name
         };
       case 'PasswordField':
+      case 'PhoneNumberField':
         return {
           value: value,
           onChange: function onChange(e) {
@@ -215,6 +216,7 @@ var getDefaultProps = function getDefaultProps(componentType, testValue) {
         name: name
       };
     case 'PasswordField':
+    case 'PhoneNumberField':
     case 'ComboBoxField':
     case 'NumberField':
     case 'MultivaluesField':
@@ -409,7 +411,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
             _react2.fireEvent.click(_react2.screen.getAllByRole('option', {
               name: testValue
             })[0]);
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 19:
             if (!(componentType === 'NumberField')) {
@@ -421,7 +423,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
                 value: testValue
               }
             });
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 23:
             if (!(componentType === 'RadioGroupField')) {
@@ -429,7 +431,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
               break;
             }
             _react2.fireEvent.click(_react2.screen.getByLabelText(testValue));
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 27:
             if (!(componentType === 'PasswordField')) {
@@ -441,25 +443,37 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
                 value: testValue
               }
             });
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 31:
+            if (!(componentType === 'PhoneNumberField')) {
+              _context2.next = 35;
+              break;
+            }
+            _react2.fireEvent.change(_react2.screen.getByRole('textbox'), {
+              target: {
+                value: testValue
+              }
+            });
+            _context2.next = 45;
+            break;
+          case 35:
             if (!(componentType === 'DatePicker')) {
-              _context2.next = 40;
+              _context2.next = 44;
               break;
             }
             iconButton = _react2.screen.queryAllByRole('button');
-            _context2.next = 35;
+            _context2.next = 39;
             return _userEvent["default"].click(iconButton[0]);
-          case 35:
+          case 39:
             cells = _react2.screen.getAllByRole('gridcell');
             selected = (0, _find["default"])(cells).call(cells, function (cell) {
               return cell.getAttribute('aria-selected') === 'true';
             });
             expect(selected === null || selected === void 0 ? void 0 : selected.children[0]).toHaveAttribute('aria-label', 'Wednesday, August 10, 2022 selected');
-            _context2.next = 41;
+            _context2.next = 45;
             break;
-          case 40:
+          case 44:
             if (componentType === 'SliderField') {
               _react2.fireEvent.change(_react2.screen.getByRole('slider'), {
                 target: {
@@ -473,7 +487,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
                 }
               });
             }
-          case 41:
+          case 45:
             _react2.fireEvent.submit(_react2.screen.getByRole('form', {
               hidden: true,
               name: /test form 2/i
@@ -481,7 +495,7 @@ var universalFieldComponentTests = exports.universalFieldComponentTests = functi
             expect(handleFormSubmit).toHaveBeenCalledWith({
               testName: String(testValue)
             });
-          case 43:
+          case 47:
           case "end":
             return _context2.stop();
         }

package/lib/components/AIComponents/AIPanel/AIPanel.stories.js

@@ -5,11 +5,13 @@ import DotsIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import { useOverlayPanelState } from '../../../hooks';
 import { Box, Button, Icon, IconButton, Item, Menu, PopoverMenu, Text } from '../../../index';
 import AIPanel from './AIPanel';
+import { aiPanelArgTypes } from './aiPanelAttributes';
 import AIPanelHeader from './AIPanelHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   component: AIPanel,
-  title: 'AI Components/AI Panel'
+  title: 'AI Components/AI Panel',
+  argTypes: aiPanelArgTypes
 };
 var AIMenuPopover = function AIMenuPopover() {
   var _useState = useState(false),

package/lib/components/AIComponents/AIPanel/aiPanelAttributes.js

@@ -0,0 +1,35 @@
+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 aiPanelArgTypes = {
+  state: {
+    description: 'The overlay panel state object controlling open/close behavior (required).',
+    control: {
+      type: null
+    }
+  },
+  isExpanded: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the AI panel is in expanded (full-width) mode.'
+  }),
+  setIsExpanded: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback invoked to toggle the expanded state of the panel.'
+  }),
+  onPanelClose: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback invoked when the panel close action is triggered.'
+  }),
+  headerProps: {
+    description: 'Props passed to the panel header element.',
+    control: {
+      type: null
+    }
+  }
+};

package/lib/components/AIComponents/Prompt/Prompt.stories.js

@@ -4,7 +4,13 @@ import Prompt from './Prompt';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'AI Components/Prompt',
-  component: Prompt
+  component: Prompt,
+  argTypes: {
+    children: {
+      description: 'Content rendered inside the prompt container.',
+      control: false
+    }
+  }
 };
 export var Default = function Default() {
   return ___EmotionJSX(Prompt, null, ___EmotionJSX(Text, null, "Did my number of registrations go up or down in the last month?"));

package/lib/components/AIComponents/Response/Response.stories.js

@@ -10,6 +10,7 @@ import { Response } from '../../../index';
 import Markdown from './ResponseMarkdown/ResponseMarkdown';
 import ResponseReadme from './Response.mdx';
 import ResponseAttachment from './ResponseAttachment';
+import { responseArgTypes } from './responseAttributes';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
@@ -24,7 +25,8 @@ export default {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ResponseReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
-  }
+  },
+  argTypes: responseArgTypes
 };
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
 export var Default = function Default() {

package/lib/components/AIComponents/Response/responseAttributes.js

@@ -0,0 +1,20 @@
+export var responseArgTypes = {
+  delay: {
+    description: 'Delay in milliseconds before the animation starts.',
+    control: {
+      type: 'number'
+    }
+  },
+  children: {
+    description: 'Content rendered inside the response container (required).',
+    control: false
+  },
+  containerProps: {
+    description: 'Props passed to the outer container element.',
+    control: false
+  },
+  iconProps: {
+    description: 'Props passed to the AI icon element.',
+    control: false
+  }
+};

package/lib/components/AIComponents/Suggestions/Suggestions.stories.js

@@ -1,9 +1,26 @@
+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 React from 'react';
 import { AstroWrapper, NextGenTheme, Suggestion, Suggestions } from '../../../index';
+import { booleanArg } from '../../../utils/docUtils/docArgTypes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Ai Components/Suggestions',
-  component: Suggestions
+  component: Suggestions,
+  argTypes: {
+    isFullScreen: _objectSpread(_objectSpread({}, booleanArg), {}, {
+      description: 'Whether the suggestions panel is displayed in full-screen mode.'
+    })
+  }
 };
 var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 export var Default = function Default() {

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { AccordionGroup, Badge, Box, Button, HelpHint, Item, Text, TextField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import AccordionReadme from './AccordionGroup.mdx';
+import { accordionGroupArgTypes } from './accordionGroupAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
   key: 't1',
@@ -42,7 +42,7 @@ var itemArrayDisabled = [{
   label: 'Accordion Disabled',
   children: ___EmotionJSX(Text, null, "Hi")
 }];
-export default {
+var meta = {
   title: 'Components/AccordionGroup',
   component: AccordionGroup,
   parameters: {
@@ -55,28 +55,9 @@ export default {
       }
     }
   },
-  argTypes: {
-    id: {
-      control: {
-        type: 'text'
-      }
-    },
-    disabledKeys: {
-      description: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. Array of keys.'
-    },
-    defaultExpandedKeys: {},
-    expandedKeys: {
-      control: false
-    },
-    items: {
-      control: false
-    },
-    labelHeadingTag: {
-      control: 'radio',
-      options: validHeadingTags
-    }
-  }
+  argTypes: accordionGroupArgTypes
 };
+export default meta;
 export var Default = function Default(args) {
   return ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
     key: "accordionKey",

package/lib/components/AccordionGroup/accordionGroupAttributes.js

@@ -0,0 +1,22 @@
+import { validHeadingTags } from '../AccordionItem/AccordionItem';
+export var accordionGroupArgTypes = {
+  id: {
+    control: {
+      type: 'text'
+    }
+  },
+  disabledKeys: {
+    description: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. Array of keys.'
+  },
+  defaultExpandedKeys: {},
+  expandedKeys: {
+    control: false
+  },
+  items: {
+    control: false
+  },
+  labelHeadingTag: {
+    control: 'radio',
+    options: validHeadingTags
+  }
+};

package/lib/components/ArrayField/ArrayField.stories.js

@@ -18,8 +18,8 @@ import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { ArrayField, ArrayFieldDeleteButton, Box, Button, Item, SelectField, Text, TextField } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import ArrayFieldReadme from './ArrayField.mdx';
+import { arrayFieldArgTypes } from './arrayFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ArrayField',
@@ -34,33 +34,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
-    label: {
-      control: {
-        type: 'text'
-      }
-    },
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    },
-    addButtonLabel: {
-      control: {
-        type: 'text'
-      }
-    },
-    maxSize: {
-      control: {
-        type: 'text'
-      }
-    },
-    maxSizeText: {
-      control: {
-        type: 'text'
-      }
-    }
-  }, ariaAttributeBaseArgTypes),
+  argTypes: _objectSpread({}, arrayFieldArgTypes),
   args: {
     label: 'Array field label',
     helperText: 'Helper text info...',

package/lib/components/ArrayField/arrayFieldAttributes.js

@@ -0,0 +1,39 @@
+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';
+export var arrayFieldArgTypes = _objectSpread({
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  addButtonLabel: {
+    control: {
+      type: 'text'
+    }
+  },
+  maxSize: {
+    control: {
+      type: 'text'
+    }
+  },
+  maxSizeText: {
+    control: {
+      type: 'text'
+    }
+  }
+}, ariaAttributeBaseArgTypes);

package/lib/components/AstroProvider/AstroProvider.stories.js

@@ -15,7 +15,27 @@ export default {
   },
   decorators: [function (Story) {
     return ___EmotionJSX("div", null, ___EmotionJSX(Story, null));
-  }]
+  }],
+  argTypes: {
+    themeOverrides: {
+      description: 'Array of theme override objects merged on top of the default Astro theme.',
+      control: {
+        type: null
+      }
+    },
+    defaultTheme: {
+      description: 'The base theme object to use as the default instead of the built-in Astro theme.',
+      control: {
+        type: null
+      }
+    },
+    children: {
+      description: 'Content rendered inside the theme provider context.',
+      control: {
+        type: null
+      }
+    }
+  }
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/components/Avatar/Avatar.stories.js

@@ -6,6 +6,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Avatar, Box, IconWrapper } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import AvatarReadme from './Avatar.mdx';
+import { avatarArgTypes } from './avatarAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Avatar',
@@ -17,29 +18,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    src: {
-      control: false
-    },
-    size: {
-      control: {
-        type: 'text'
-      },
-      description: 'Size of the avatar. Can be a string. like 50px'
-    },
-    alt: {
-      control: {
-        type: 'text'
-      },
-      description: 'Alternative text for the image.'
-    },
-    defaultText: {
-      control: {
-        type: 'text'
-      },
-      description: 'Default text to be displayed when src is not available.'
-    }
-  },
+  argTypes: avatarArgTypes,
   args: {
     src: pingImg
   }

package/lib/components/Avatar/avatarAttributes.js

@@ -0,0 +1,23 @@
+export var avatarArgTypes = {
+  src: {
+    control: false
+  },
+  size: {
+    control: {
+      type: 'text'
+    },
+    description: 'Size of the avatar. Can be a string. like 50px'
+  },
+  alt: {
+    control: {
+      type: 'text'
+    },
+    description: 'Alternative text for the image.'
+  },
+  defaultText: {
+    control: {
+      type: 'text'
+    },
+    description: 'Default text to be displayed when src is not available.'
+  }
+};

package/lib/components/Bracket/Bracket.stories.js

@@ -3,6 +3,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Bracket } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import BracketReadme from './Bracket.mdx';
+import { bracketArgTypes } from './bracketAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Bracket',
@@ -14,31 +15,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    isLast: {
-      control: {
-        type: 'boolean'
-      },
-      description: 'If true, the bracket will be displayed as the last one.'
-    },
-    color: {
-      control: {
-        type: 'text'
-      }
-    },
-    variant: {
-      control: false
-    },
-    as: {
-      control: false
-    },
-    role: {
-      control: false
-    },
-    'data-testid': {
-      control: false
-    }
-  }
+  argTypes: bracketArgTypes
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(Box, {

package/lib/components/Bracket/bracketAttributes.js

@@ -0,0 +1,25 @@
+export var bracketArgTypes = {
+  isLast: {
+    control: {
+      type: 'boolean'
+    },
+    description: 'If true, the bracket will be displayed as the last one.'
+  },
+  color: {
+    control: {
+      type: 'text'
+    }
+  },
+  variant: {
+    control: false
+  },
+  as: {
+    control: false
+  },
+  role: {
+    control: false
+  },
+  'data-testid': {
+    control: false
+  }
+};

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -19,10 +19,8 @@ import MenuRight from '@pingux/mdi-react/MenuRightIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, CheckboxField, IconButtonToggle, Link, SwitchField, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import CheckboxFieldReadme from './CheckboxField.mdx';
+import { checkboxFieldArgTypes } from './checkboxFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/CheckboxField',
@@ -34,37 +32,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
-    label: {
-      control: {
-        type: 'text'
-      }
-    },
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    },
-    hintText: {
-      control: {
-        type: 'text'
-      }
-    },
-    name: {},
-    id: {
-      control: {
-        type: 'text'
-      }
-    },
-    value: {},
-    isRequired: {},
-    isDisabled: {},
-    isReadOnly: {},
-    hasAutoFocus: {},
-    isIndeterminate: {},
-    isDefaultSelected: {},
-    isSelected: {}
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
+  argTypes: _objectSpread({}, checkboxFieldArgTypes),
   args: {
     label: 'Click me!'
   }