@pingux/astro 2.9.2 → 2.13.0-alpha.3

package/lib/cjs/components/Callout/Callout.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Callout/Callout" />
+
+# Callout
+
+Callouts are persistent box-like components that display brief status reports regarding continuing and developing conditions. 
+Callouts should contain only 1 or 2 pieces of information and display at the top of the panels or above the related content without blocking important information on the screen, and should not be stacked on top of each other.
+
+### Required components
+
+This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+The callout itself is not focusable but the components within it are. 
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the component within. |
+| Tab | Focuses the component within and follows the page tab sequence. |
+
+#### Screen readers
+
+This component uses the **`aria-label`** attribute to provide an accessible name.

package/lib/cjs/components/Card/Card.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Card/Card" />
+
+# Card
+
+Cards are usually placed in groups and used to display content related to a single subject. 
+The content can consist of multiple components of varying types and sizes.
+
+Card should:
+- Relay clear expectations for user interactions.
+- Be self-contained and freely placed based on function.
+- Be grouped in a uniform layout when the content length and sizes are similar.
+
+Cards shouldn’t contain too much information. Keep it simple and scannable.
+
+This component is built on [Box from Theme-UI](https://theme-ui.com/components/box) and accepts most [Styled System props](https://styled-system.com/table/).
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the Interactive Card components.
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the button. |
+| Tab | Focuses the button and follows the page tab sequence.|

package/lib/cjs/components/CheckboxField/CheckboxField.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CheckboxField/CheckboxField" />
+
+# CheckboxField
+
+This component combines Checkbox, Label, and HelperText for a complete, form-ready solution. 
+CheckboxFields are shown as square boxes that users can select or deselect to indicate true or false and should:
+- Have short, concise, clear labels.
+- Be used in multi-selection lists.
+- Be used for options that can be toggled on or off.
+
+These fields should not be used to select from mutually exclusive options. 
+Use the [RadioGroupField](./?path=/story/form-radiogroupfield--default) instead.
+
+The CheckboxField component uses [useCheckbox](https://react-spectrum.adobe.com/react-aria/useCheckbox.html) from React Aria and
+[useToggleState](https://react-spectrum.adobe.com/react-stately/useToggleState.html) from React Stately.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | ---- |
+| Space | When focused, toggles the check box on and off. |
+| Tab | Moves focus to the next focusable component and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-checked`** attribute is used to indicate the current checked status.
+- The **`aria-labelledby`** attribute is provided with the label ID to reference it.
+- The **`aria-hidden`** attribute is used to hide its content from assistive technology.

package/lib/cjs/components/CodeView/CodeView.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CodeView/CodeView" />
+
+# CodeView
+
+This component is used for code syntax highlighting and is built on [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
+It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets.
+
+### Required Components
+
+This component requires the [Text](./?path=/docs/components-text--default) component. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the CopyButton inside the CodeView component. |
+| Tab | Focuses the CopyButton inside the CodeView component. |

package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CollapsiblePanel/CollapsiblePanel" />
+
+# CollapsiblePanel
+
+CollapsiblePanel provides users with the ability to expand and collapse content as needed while saving horizontal space, and shouldn’t be used with invisible triggers.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Expands or collapses the content when the trigger is focused. |
+| Tab | Focuses the trigger button and the panel content. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Esc | Pressing the escape key closes the panel when it is expanded. |
+
+#### Screen Readers
+This component uses the **`aria-rowcount`** and **`aria-columncount`** attributes to indicate the total number of rows and columns in the grid structure.
+
+

package/lib/cjs/components/ColorField/ColorField.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ColorField/ColorField" />
+
+# ColorField
+
+The ColorField component allows users to pick a color from a color swatch and use that color. 
+The colors must use the same color naming conventions, such as HEX, RBBA, and HSLA. 
+Pick one convention and stick with it.
+
+This component uses [useColorField](https://react-spectrum.adobe.com/react-aria/useColorField.html) from React Aria, 
+[useColorFieldState](https://react-spectrum.adobe.com/react-stately/useColorFieldState.html) from React Stately 
+and [React Color](https://casesandberg.github.io/react-color/) as a color picker.
+
+### Required Components
+
+This component is built using [useOverLayTrigger](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html), and requires the 
+react-aria [OverlayProvider](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html#:~:text=contained%20in%20an-,OverlayProvider,-%2C%20which%20is%20used), which is exported from Astro.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | ---- |
+| Tab |Focuses the color swatch and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Opens the color swatch when it is focused. Once opened, the focus moves to the input field and is locked inside the ColorPicker Overlay. |
+| Esc | When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Chrome Picker.
+- When expanded, **`aria-controls`** is added to the button pointing to the Chrome Picker.
+- The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.

package/lib/cjs/components/ComboBoxField/ComboBoxField.mdx

@@ -0,0 +1,66 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ComboBoxField/ComboBoxField" />
+
+# ComboBoxField
+
+The ComboBoxField combines the features of a textbox and a listbox. 
+This component provides a more compact way to present a list of choices, as the list is hidden until you click the drop-down arrow.
+A combo box also gives you the ability to enter a value that is not in the list.
+
+Use this component for large complex lists, ideally sorted. Do not use this component:
+- If the list will never have more than 6 items.
+- With small lists where one option is pre-selected by default. Use the [RadioGroupField](./?path=/docs/form-radiogroupfield--default) instead.
+
+This component uses [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) from React
+Aria and [useComboBoxState](https://react-spectrum.adobe.com/react-stately/useComboBoxState.html)
+from React Stately.
+
+### Required Components
+
+This component is built using [useOverLayTrigger](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html), and requires the 
+react-aria [OverlayProvider](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html#:~:text=contained%20in%20an-,OverlayProvider,-%2C%20which%20is%20used), 
+exported from Astro and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA ComboBox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | ---- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Selects the component when it is focused. |
+| Down arrow | Opens the popover if it isn’t already open.  |
+| Up and down arrows | Can be used to move through the selection in the popover. |
+| Typing in input field | Adds focus to it and opens the popover. |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first item in the listbox. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last item in the listbox. |
+| Esc | Pressing the escape key closes the overlay and adds focus to the previously focused component. |
+
+#### Screen Readers
+This component uses the following attributes to assist screen readers:
+
+Input:
+- The input uses **`aria-expanded`** to indicate the expansion/collapse of the listbox. 
+- When expanded **`aria-controls`** is added to the input pointing to the ListBox.
+- The input has **`aria-labelledby`** supplied with label ID and **`aria-activedescendent`** identifies the currently focused option from the list. 
+- The label uses **`aria-hidden`** to hide its content from assistive technology.
+- The **`aria-autocomplete`** list model displays all the possible values in the pop-up list.
+- The Input has **`aria-invalid`** set to true when the entered value does not conform to the expected format.
+
+Button:
+- The trigger button uses **`aria-expanded`** to indicate the expansion/collapse of content.
+- The attribute **`aria-haspopup`** has “True” set as the value, which indicates that the type of popup content is a Listbox. 
+- The button and label ID are supplied to **`aria-labelledby`** to reference it.
+- When expanded **`aria-controls`** is added to the input pointing to the listbox.
+
+Option:
+- The ListBox has the label and its ID supplied to **`aria-labelledby`** and **`aria-label`** provides an accessible name to the component.
+- Each ListBox option has the default **`aria-disabled`** set as false and **`aria-selected`** to indicate the currently selected option.
+- The **`aria-posinset`** attribute defines an element's number or position in the current set of list items.
+- The **`aria-setsize`** attribute defines the number of items in the current set of list items.

package/lib/cjs/components/CopyText/CopyText.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CopyText/CopyText" />
+
+# CopyText
+
+CopyText allows users to copy information by clicking on the text or a nearby CopyButton. These components should have labels that match the action. 
+Do not override the colors used for this component for accessibility reasons, and ensure tooltip text is included.
+
+### Required Components
+
+This component requires the [Text](./?path=/docs/components-text--default) component. 
+
+### Accessibility
+
+#### Keyboard Navigation
+ 
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the button. |
+| Tab | Focuses the button and follows the page tab sequence.|

package/lib/cjs/components/DataTable/DataTable.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/DataTable/DataTable" />
+
+# DataTable
+
+DataTables are containers that display data in rows, columns, and cells, which allows users to quickly scan, sort, and compare information. This component was inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+from React Spectrum and build using [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+from React Stately.
+
+Columns are defined within the DataTableHeader component with the DataTableColumn component, and rows are defined within the DataTableBody component with the DataTableRow component. 
+Rows contain DataTableCell components that correspond to each column.
+
+DataTables should:
+- Contain vertically aligned content.
+- Use multiple heading rows for higher-level column groupings.
+- Use column dividers sparingly.
+
+They should not use different indicators to represent empty fields.
+
+### Required Components
+
+This component requires these additional React Spectrum components:
+- [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C) aliased DataTableHeader
+- [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C) aliased DataTableColumn
+- [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support) aliased DataTableCell
+- [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components) aliased DataTableRow
+- [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and) aliased DataTableBody
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. | 
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter  | Focuses the component and triggers an action if one is associated with it. |
+| Arrow keys | Can be used to navigate between the components in the table. |
+| Focus on a row and scroll down | Shifts the focus to the entire table, not the previously focused row. |
+| Home or page up | Shifts the focus to the first row. |
+| End or page down | Shifts the focus to the last visible row. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute is used to provide an accessible name.
+- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure. 
+- The DataTableHeader uses the **`aria-rowindex`** attribute and DataTableColumn uses the **`aria-colindex`** attribute to enumerate the header row and columns. 
+- In the body component, the DataTableRow uses the **`aria-labelledby`** attribute and the grid ID to identify the component and the **`aria-rowindex`** attribute is passed to each row.
+- Each DataTableCell uses the **`aria-colindex`** attribute to enumerate the columns within each row.
+

package/lib/cjs/components/DatePicker/DatePicker.mdx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/DatePicker/DatePicker" />
+
+# DatePicker
+
+Date pickers allow users to select specific past, present, or future dates. 
+This component combines the [Calendar](./?path=/docs/components-calendar--default) component with the DateField component and can be localized to meet your needs. 
+
+This component is built on [useDatePicker](https://react-spectrum.adobe.com/react-aria/useDatePicker.html) from React Aria 
+and [useDatePickerState](https://react-spectrum.adobe.com/react-stately/useDatePickerState.html) from React Stately. 
+
+Properties not specified are passed to the underlying DateField component.
+
+### Required components 
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA DatePicker](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Opens the popover when the trigger is focused, selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date. |
+| Pressing Home:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
+| Up and down Arrow keys | When segments are focused, it increments and decrements dates starting from the present day. |
+| Left and right arrows | Moves focus between segments. |
+| Page up | Changes the grid of dates to the previous month. |
+| Page down | Changes the grid of dates to the next month. |
+| Shift + page up | Changes the grid of dates to the same month in the previous year. |
+| Shift+ page down | Changes the grid of dates to the same month in the next year. |
+| Esc | Closes the overlay and shifts focus to the trigger. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+
+- The hidden input, DateField, and all three spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.
+- Each spin button has the **`aria-valuenow`** attribute that defines the current value and it is always used with its text alternative, **`aria-valuetext`**. 
+The spin buttons also have the **`aria-valuemin`** and **`aria-valuemax`** attributes to specify the minimum and maximum values allowed for a range widget.
+- The **`aria-selected`** attribute is added to the grid cell when a date is selected, and **`aria-disabled`** is set to “false” by default.

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -152,7 +152,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     onSelectionChange: handleSelectionChange,
     selectedKeys: selectedKeys,
     selectionMode: 'single',
-    disallowEmptySelection: false
+    disallowEmptySelection: true,
+    allowDuplicateSelectionEvents: true
   };
   var listBoxState = (0, _list.useListState)(listBoxProps);
 

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/EnvironmentBreadcrumb/EnvironmentBreadcrumb" />
+
+# EnvironmentBreadcrumb
+
+EnvironmentBreadcrumb shows users where they are within the environment hierarchy. 
+They take up little space but still provide context for the user’s place in the hierarchy, but should be treated as secondary navigation and never entirely replace the primary navigation.
+
+### Required components
+
+This component requires the [Badge](./?path=/docs/components-badge--default),
+[Box](./?path=/story/components-box--default), [Text](./?path=/docs/components-text--default) components and  
+Item from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter  | Selects the breadcrumb item. |
+| Tab | Focuses the breadcrumb item and follows the page tab sequence. | 
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Arrow keys | Can be used to navigate between the items in the dropdown list. |
+| Esc | Closes the popover when it is expanded. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- Each breadcrumb item uses an **`aria-label`** attribute to provide an accessible name.
+- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- When expanded, **`aria-controls`** is added to the button pointing to the pop-up content.
+- The **`aria-haspopup`** attribute describes the type of content presented.

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

@@ -123,10 +123,7 @@ var environmentsWithSections = [{
   }]
 }];
 var Default = function Default(args) {
-  var _useState = (0, _react.useState)({
-      name: 'Snail',
-      isSandbox: true
-    }),
+  var _useState = (0, _react.useState)(defaultEnvironments[0]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedEnvironment = _useState2[0],
     setSelectedEnvironment = _useState2[1];
@@ -170,10 +167,7 @@ var Default = function Default(args) {
 };
 exports.Default = Default;
 var DefaultClosed = function DefaultClosed(args) {
-  var _useState3 = (0, _react.useState)({
-      name: 'Snail',
-      isSandbox: true
-    }),
+  var _useState3 = (0, _react.useState)(defaultEnvironments[0]),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     selectedEnvironment = _useState4[0],
     setSelectedEnvironment = _useState4[1];
@@ -226,9 +220,7 @@ var WithSections = function WithSections() {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     filteredOptionsNumber = _useState8[0],
     setFilteredOptionsNumber = _useState8[1];
-  var _useState9 = (0, _react.useState)({
-      name: 'Consumer Banking Prod'
-    }),
+  var _useState9 = (0, _react.useState)(environmentsWithSections[0].options[0]),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
     selectedEnvironment = _useState10[0],
     setSelectedEnvironment = _useState10[1];
@@ -334,10 +326,7 @@ var OrgLevel = function OrgLevel() {
 };
 exports.OrgLevel = OrgLevel;
 var DefaultOpen = function DefaultOpen() {
-  var _useState11 = (0, _react.useState)({
-      name: 'Dog',
-      isSandbox: true
-    }),
+  var _useState11 = (0, _react.useState)(defaultEnvironments[0]),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
     selectedEnvironment = _useState12[0],
     setSelectedEnvironment = _useState12[1];
@@ -386,10 +375,7 @@ var ControlledMenu = function ControlledMenu() {
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
     isOpen = _useState14[0],
     setIsOpen = _useState14[1];
-  var _useState15 = (0, _react.useState)({
-      name: 'Shark',
-      isSandbox: true
-    }),
+  var _useState15 = (0, _react.useState)(defaultEnvironments[0]),
     _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
     selectedEnvironment = _useState16[0],
     setSelectedEnvironment = _useState16[1];
@@ -435,32 +421,6 @@ var ControlledMenu = function ControlledMenu() {
 };
 exports.ControlledMenu = ControlledMenu;
 var RightAlignedBadges = function RightAlignedBadges(args) {
-  var _useState17 = (0, _react.useState)({
-      name: 'Snail',
-      isSandbox: true
-    }),
-    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-    selectedEnvironment = _useState18[0],
-    setSelectedEnvironment = _useState18[1];
-  var envNode = (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Text, {
-    color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
-    label: "SANDBOX",
-    variant: "environmentBadge",
-    bg: "neutral.40"
-  }) : null);
-  var findEnvObj = function findEnvObj(envName) {
-    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref11) {
-      var name = _ref11.name;
-      return name === envName;
-    });
-  };
-  var handleSelectionChange = function handleSelectionChange(newEnvName) {
-    var envObj = findEnvObj(newEnvName);
-    setSelectedEnvironment(_objectSpread({}, envObj));
-  };
   var items = [{
     name: 'Default'
   }, {
@@ -490,6 +450,30 @@ var RightAlignedBadges = function RightAlignedBadges(args) {
   }, {
     name: 'Mouse'
   }];
+  var _useState17 = (0, _react.useState)(items[0]),
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    selectedEnvironment = _useState18[0],
+    setSelectedEnvironment = _useState18[1];
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    key: selectedEnvironment.name
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+    label: "SANDBOX",
+    variant: "environmentBadge",
+    bg: "neutral.40"
+  }) : null);
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(items).call(items, function (_ref11) {
+      var name = _ref11.name;
+      return name === envName;
+    });
+  };
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
   return (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, args, {
     items: items,
     name: "Globochem",

package/lib/cjs/components/FileInputField/FileInputField.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/FileInputField/FileInputField" />
+
+# FileInputField
+
+The FileInputField component allows users to upload files by clicking the button or dragging and dropping the files to a specific location. 
+We use [react-dropzone](https://react-dropzone.js.org/) for the drag-and-drop functionality.
+
+This component should have clear, concise file names and labels that guide users through the upload process, and should not allow users to upload executable files, such as .exe, .bin, .app files.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | ---- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Selects the component when it is focused. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- This component uses the **`aria-label`** to provide an accessible name and has **`aria-labelledby`** attribute, supplied with the label ID.
+- Upon uploading the file, the Button component, with the name of the uploaded file, displays with **`aria-describedby`** attribute, which references the helpText if passed along. 
+- The delete button has an **`aria-label`** to provide an accessible name.

package/lib/cjs/components/HelpHint/HelpHint.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/HelpHint/HelpHint" />
+
+# HelpHint
+
+HelpHints display information intended to help users enter, select or provide the appropriate information in a field. This component can be customized, and consists of the [TooltipTrigger](./?path=/docs/components-tooltiptrigger--default) and [IconButton](./?path=/docs/components-iconbutton--default).
+
+When implementing this component, use short, clear language and a text size relative to the trigger button. They should not block important information when the tooltip displays, nor should it be used to communicate important information.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Aria Attribute | Role |
+| ---- | ---- |
+| Space or Enter | Selects the help hint. |
+| Tab | Focuses the help hint and follows the page tab sequence. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-desribedby`** attribute, which announces the tooltip text.
+- The **`aria-live`** attribute announces the dynamic changes in live region content.
+

package/lib/cjs/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../types';
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement>>;
+export default Icon;