fix(docs) sync docs with main (#1609)

website/react-magma-docs/src/components/MainContainer/index.js

@@ -16,9 +16,6 @@ const StyledContainer = styled.div`
       'masthead masthead'
       'nav content';
   }
-  @media (max-width: 1024px) {
-    display: hidden;
-  }
 `;
 
 const StyledSkipLink = styled(SkipLink)`

website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx

@@ -613,7 +613,6 @@ import {
   Radio,
   RadioGroup,
   Spacer,
-  styled,
   Table,
   TableHead,
   TableRow,
@@ -628,9 +627,11 @@ import {
   Tag,
   Tooltip,
 } from 'react-magma-dom';
-import styled from '@emotion/styled';
+
 import { InfoIcon } from 'react-magma-icons';
 
+import styled from '../../theme/styled';
+
 const springfieldDonut = Object.assign({}, magma, {
   colors: Object.assign({}, magma.colors, {
     danger: '#f3772b',
@@ -933,7 +934,7 @@ const springfieldDonut = Object.assign({}, magma, {
   },
 });
 
-const StyledCardHeading = styled(Heading)`
+const StyledCardHeading = styled.h1`
   color: #f7db7f;
   font-size: 40px;
   position: relative;

website/react-magma-docs/src/pages/api/accordion.mdx

@@ -25,7 +25,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 An accordion is made up of four components: `Accordion`, `AccordionItem`, `AccordionButton` and `AccordionPanel`. The `Accordion` is the wrapper for all of the items. It can contain one or more `AccordionItems`, each of which should contain one `AccordionButton` and one `AccordionPanel`. An `AccordionButton` can be wrapped in an element with the role of heading (such as an h1-h6) to provide semantic structure to the document.
 
-By default, multiple items will can be expanded. The `defaultIndex` prop, which takes an array of zero-based indices, can be used to set panels open by default.
+By default, multiple items are expandable. The `defaultIndex` prop which takes a zero-based array can be used to set panels open by default.
 
 ```typescript
 import React from 'react';
@@ -38,7 +38,7 @@ import {
 
 export function Example() {
   return (
-    <Accordion defaultIndex={[0]}>
+    <Accordion isMulti defaultIndex={[1]}>
       <AccordionItem>
         <h3>
           <AccordionButton>Section 1</AccordionButton>

website/react-magma-docs/src/pages/api/checkboxes.mdx

@@ -26,7 +26,7 @@ If you do not want to have your checkbox be in a controlled state, but need the
 <Link to="/api/indeterminate">Indeterminate Checkboxes</Link> are similar to standard
 checkboxes but with three available statuses.
 
-See also: <Link to="/api/radio">Radio Buttons</Link>, <Link to="/api/toggle">Toggle Switches</Link>, and the <Link to="/design/selection-controls">Design Guidelines</Link> for selection controls in general.
+See also: <Link to="/api/radio">Radio Buttons</Link> and <Link to="/api/toggle">Toggle Switches</Link>.
 
 ```tsx
 import React from 'react';

website/react-magma-docs/src/pages/api/combobox.mdx

@@ -643,12 +643,12 @@ import { Combobox } from 'react-magma-dom';
 export function Example() {
   const [isLoading, updateIsLoading] = React.useState<boolean>(false);
 
-  function loadItems(inputValue) {
-    return new Promise(resolve =>
+  function loadItems() {
+    return new Promise((resolve) =>
       resolve([
-        { label: 'Yellow', value: 'yellow' },
-        { label: 'Pink', value: 'pink' },
-        { label: 'Periwinkle', value: 'periwinkle' },
+        { label: "Yellow", value: "yellow" },
+        { label: "Pink", value: "pink" },
+        { label: "Periwinkle", value: "periwinkle" },
       ])
     );
   }
@@ -662,9 +662,9 @@ export function Example() {
 
     setTimeout(() => {
       updateIsLoading(false);
-      loadItems(inputValue).then(items => {
+      loadItems().then((items: any) => {
         setInputItems(
-          items.filter(item =>
+          items.filter((item) =>
             item.label.toLowerCase().startsWith(inputValue.toLowerCase())
           )
         );
@@ -678,9 +678,9 @@ export function Example() {
       labelText="Async"
       isLoading={isLoading}
       defaultItems={[
-        { label: 'Red', value: 'red' },
-        { label: 'Blue', value: 'blue' },
-        { label: 'Green', value: 'green' },
+        { label: "Red", value: "red" },
+        { label: "Blue", value: "blue" },
+        { label: "Green", value: "green" },
       ]}
       onInputValueChange={handleInputValueChange}
     />
@@ -944,7 +944,7 @@ import { Combobox, LabelPosition } from 'react-magma-dom';
 export function Example() {
   return (
     <Combobox
-      labelPosition={LabelPosition.top}
+      labelPosition={LabelPosition.left}
       labelText="Left-aligned label"
       defaultItems={[
         { label: 'Red', value: 'red' },
@@ -1021,6 +1021,7 @@ custom `type`](/api/combobox#custom_items_typescript).
 ```tsx
 import React from 'react';
 import { Combobox } from 'react-magma-dom';
+import { v4 as uuidv4 } from 'uuid';
 
 export function Example() {
   const [controlledSelectedItem, updateControlledSelectedItem] =
@@ -1041,8 +1042,9 @@ export function Example() {
     const { value } = item;
 
     return {
-      id: uuid(),
+      id: uuidv4(),
       name: value,
+      hex: item.hex,
       representation: value.charAt(0).toUpperCase() + value.slice(1),
     };
   }
@@ -1100,6 +1102,7 @@ element with the shape of the `items` you are passing in.
 ```tsx
 import React from 'react';
 import { Combobox } from 'react-magma-dom';
+import { v4 as uuidv4 } from 'uuid';
 
 interface CustomComboboxItem {
   id: number;
@@ -1141,8 +1144,8 @@ export function Example() {
     const { value } = item;
 
     return {
-      id: uuid(),
-      name: value,
+      id: uuidv4(),
+      actual: value,
       representation: value.charAt(0).toUpperCase() + value.slice(1),
     };
   }
@@ -1181,24 +1184,23 @@ we use internally.
 ```tsx
 import React from 'react';
 import styled from '@emotion/styled';
-import { Combobox, styled } from 'react-magma-dom';
-
+import { Combobox } from 'react-magma-dom';
 
 export function Example() {
-  const CustomStyledItem = styled('li')(props => ({
+  const CustomStyledItem = styled.li(props => ({
     alignSelf: 'center',
     background: props.isFocused ? props.theme.colors.neutral200 : 'transparent',
     lineHeight: '24px',
     margin: '0',
     padding: '8px 16px',
   }));
 
-  const ContainerSpan = styled('span')(props => ({
+  const ContainerSpan = styled.span(props => ({
     display: 'flex',
     alignItems: 'center',
   }));
 
-  const Hex = styled('span')(props => ({
+  const Hex = styled.span(props => ({
     background: props.color,
     border: `2px solid ${props.theme.colors.neutral}`,
     borderRadius: props.theme.borderRadius,
@@ -1208,7 +1210,7 @@ export function Example() {
     width: '16px',
   }));
 
-  const Description = styled('div')(props => ({
+  const Description = styled.div(props => ({
     fontSize: '12px',
     color: props.theme.colors.neutral500,
   }));
@@ -1273,7 +1275,7 @@ import { Combobox } from 'react-magma-dom';
 export function Example() {
   const [isLoading, updateIsLoading] = React.useState<boolean>(false);
 
-  function loadItems(inputValue) {
+  function loadItems() {
     return new Promise(resolve =>
       resolve([
         { label: 'Yellow', value: 'yellow' },
@@ -1292,7 +1294,7 @@ export function Example() {
 
     setTimeout(() => {
       updateIsLoading(false);
-      loadItems(inputValue).then(items => {
+      loadItems().then((items: any) => {
         setInputItems(
           items.filter(item =>
             item.label.toLowerCase().startsWith(inputValue.toLowerCase())
@@ -1401,7 +1403,10 @@ corresponds to a `stateChangeTypes` property. The list of all the possible types
   </inlineCode>
   ). However, in the production environment the types equate to numbers
   <br />
-  (eg: <inlineCode class="inverse">ComboboxStateChangeTypes.InputKeyDownArrowDown = 0</inlineCode>).
+  (eg: <inlineCode class="inverse">
+    ComboboxStateChangeTypes.InputKeyDownArrowDown = 0
+  </inlineCode>
+  ).
 </Alert>
 
 ### Combobox

website/react-magma-docs/src/pages/api/container.mdx

@@ -23,7 +23,7 @@ import { Container, Heading, Hyperlink, Paragraph } from 'react-magma-dom';
 export function Example() {
   return (
     <Container>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>
@@ -43,7 +43,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom';
 export function Example() {
   return (
     <Container isInverse>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>
@@ -63,7 +63,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom';
 export function Example() {
   return (
     <Container isInverse maxWidth={600}>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>
@@ -83,7 +83,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom';
 export function Example() {
   return (
     <Container isInverse gutterWidth={80}>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>

website/react-magma-docs/src/pages/api/date-pickers.mdx

@@ -34,7 +34,7 @@ import React from 'react';
 import { DatePicker } from 'react-magma-dom';
 
 export function Example() {
-  return <DatePicker defaultDate="07/23/2024" labelText="Date" />;
+  return <DatePicker defaultDate={new Date(2025, 1, 0)} labelText="Date" />;
 }
 ```
 
@@ -48,7 +48,7 @@ import { DatePicker } from 'react-magma-dom';
 
 export function Example() {
   return (
-    <DatePicker defaultDate="07/23/2024" labelText="Date" value="03/12/2024" />
+    <DatePicker defaultDate={new Date(2025, 1, 0)} labelText="Date" value={new Date(2000, 1, 0)} />
   );
 }
 ```
@@ -65,8 +65,8 @@ export function Example() {
   const [chosenDate, setChosenDate] = React.useState<Date | undefined>(
     undefined
   );
-  const minDate = '01/09/2024';
-  const maxDate = '02/10/2024';
+  const minDate = new Date(2025, 1, 2);
+  const maxDate = new Date(2025, 1, 20);
 
   function handleDateChange(newChosenDate: Date) {
     setChosenDate(newChosenDate);
@@ -111,7 +111,7 @@ export function Example() {
     undefined
   );
 
-  function handleDateChange(newChosenDate: Date) {
+  function handleDateChange(newChosenDate: Date | null) {
     setChosenDate(newChosenDate);
   }
 
@@ -187,7 +187,7 @@ export function Example() {
 
 ```tsx
 import React from 'react';
-import { DatePicker, Card, CardBody, magma } from 'react-magma-dom';
+import { DatePicker, Card, CardBody } from 'react-magma-dom';
 
 export function Example() {
   return (
@@ -352,7 +352,7 @@ export function Example() {
 
 ## Keyboard Navigation
 
-The `DatePicker` is keyboard navigable for allowing the user to navigate between days, weeks, and months. If you would like to see all of the options for keyboard navigation click on the `?` button in the bottom right corner of the `DatePicker` or press the `?` key.
+The `DatePicker` is keyboard navigable for allowing the user to navigate between days, weeks, and months. 
 
 ```tsx
 import React from 'react';

website/react-magma-docs/src/pages/api/dropdown.mdx

@@ -77,7 +77,7 @@ export function Example() {
 
   return (
     <Dropdown>
-      <DropdownSplitButton onClick={handleSplitButtonClick}>
+      <DropdownSplitButton aria-label="Split Button" onClick={handleSplitButtonClick}>
         Split Button
       </DropdownSplitButton>
       <DropdownContent>
@@ -465,7 +465,7 @@ export function Example() {
     <Dropdown width={240}>
       <DropdownButton>Expandable Items Dropdown</DropdownButton>
       <DropdownContent>
-        <DropdownExpandableMenuGroup defaultIndex={[0]}>
+        <DropdownExpandableMenuGroup isMulti defaultIndex={[0]}>
           <DropdownExpandableMenuItem>
             <DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
               Pasta
@@ -575,7 +575,7 @@ import {
 } from 'react-magma-dom';
 
 export function Example() {
-  const OptionalDropdownMenuItem = ({ toggle, dropdownMenuItemProps }) => {
+  const OptionalDropdownMenuItem = ({ toggle, ...dropdownMenuItemProps }) => {
     return toggle ? (
       <DropdownMenuItem {...dropdownMenuItemProps}>
         Hello There
@@ -614,6 +614,8 @@ export function Example() {
     </Dropdown>
   );
 }
+
+
 ```
 
 ### Leading Icons
@@ -752,6 +754,7 @@ import {
   ButtonColor,
   ButtonSize,
   ButtonGroup,
+  ButtonVariant,
   Dropdown,
   DropdownButton,
   DropdownContent,

website/react-magma-docs/src/pages/api/form.mdx

@@ -103,7 +103,7 @@ export function Example() {
 }
 ```
 
-# Form Props
+## Form Props
 
 **Any other props supplied will be provided to the wrapping `form` element.**