Bring dev-patch up to latest

.changeset/chartColors.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+Adding in chartColors to theme.

.changeset/feat-paragraphMargins.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+feat(Paragraph): New `noTopMargin` and `noBottomMargin` props that allow customization of which margin to remove.

.changeset/feat-selectChildren.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+feat(Select/NativeSelect): New `additionalContent` prop to provide the ability to add extra content inline with the label similar to the Input component.

.changeset/fix-additionalContent.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+fix(Select/NativeSelect): Fixed alignment issues in Select regarding additional content icon. Fixed duplicate additional content in Native Select.

.changeset/fix-additionalContentDocs.md

@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix(Select/NativeSelect): Update AdditionalContent CodeSandbox examples

.changeset/fix-expressiveText.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix: Updates to the expressive font styles for both desktop and mobile.

.changeset/fix-modalPadding.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Modal): Fixed bottom padding on the Modal header.

.changeset/fix-modalStorybook.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Modal): Fixed Storybook Inverse example.

.changeset/strong-fans-itch.md

@@ -0,0 +1,5 @@
+---
+"react-magma-landing": patch
+---
+
+build(deps-dev): bump axios from 0.21.1 to 1.6.0

packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js

@@ -450,12 +450,14 @@ describe('Date Picker', () => {
       key: 'Escape',
       code: 27,
     });
+
     setTimeout(() => {
       expect(getByTestId('calendarContainer')).toHaveStyleRule(
         'display',
         'none'
       );
     }, 500);
+
     expect(getByTestId('modal')).toBeInTheDocument();
   });
 

packages/react-magma-dom/src/components/FormFieldContainer/FormFieldContainer.tsx

@@ -30,7 +30,7 @@ export interface FormFieldContainerBaseProps {
    */
   errorMessage?: React.ReactNode;
   /**
-   * ID of the form field.  Also used in the descrption ID.
+   * ID of the form field.  Also used in the description ID.
    */
   fieldId: string;
   /** 

packages/react-magma-dom/src/components/Heading/Heading.stories.tsx

@@ -11,67 +11,136 @@ import { Meta } from '@storybook/react/types-6-0';
 export default {
   component: Heading,
   title: 'Heading',
+  argTypes: {
+    isInverse: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+  },
 } as Meta;
 
-export const Default = () => {
+export const Default = args => {
   return (
-    <>
-      <Heading level={1}>Heading 1 (X-Large) - Productive</Heading>
-      <Heading level={2}>Heading 2 (Large) - Productive</Heading>
-      <Heading level={3}>Heading 3 (Medium) - Productive</Heading>
-      <Heading level={4}>Heading 4 (Small) - Productive</Heading>
-      <Heading level={5}>Heading 5 (X-Small) - Productive</Heading>
-      <Heading level={6}>Heading 6 (2X-Small) - Productive</Heading>
+    <Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
+      <Heading level={1} {...args}>
+        Heading 1 (X-Large) - Productive
+      </Heading>
+      <Heading level={2} {...args}>
+        Heading 2 (Large) - Productive
+      </Heading>
+      <Heading level={3} {...args}>
+        Heading 3 (Medium) - Productive
+      </Heading>
+      <Heading level={4} {...args}>
+        Heading 4 (Small) - Productive
+      </Heading>
+      <Heading level={5} {...args}>
+        Heading 5 (X-Small) - Productive
+      </Heading>
+      <Heading level={6} {...args}>
+        Heading 6 (2X-Small) - Productive
+      </Heading>
       <br />
       <Heading
         level={1}
         contextVariant={TypographyContextVariant.expressive}
         visualStyle={TypographyVisualStyle.heading2XLarge}
+        {...args}
       >
         Heading 1 (2X-Large) - Expressive
       </Heading>
-      <Heading level={1} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={1}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 1 (X-Large) - Expressive
       </Heading>
-      <Heading level={2} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={2}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 2 (Large) - Expressive
       </Heading>
-      <Heading level={3} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={3}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 3 (Medium) - Expressive
       </Heading>
-      <Heading level={4} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={4}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 4 (Small) - Expressive
       </Heading>
-      <Heading level={5} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={5}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 5 (X-Small) - Expressive
       </Heading>
-      <Heading level={6} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={6}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 6 (2X-Small) - Expressive
       </Heading>
       <br />
-      <Heading level={1} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={1}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 1 (X-Large) - Narrative
       </Heading>
-      <Heading level={2} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={2}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 2 (Large) - Narrative
       </Heading>
-      <Heading level={3} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={3}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 3 (Medium) - Narrative
       </Heading>
-      <Heading level={4} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={4}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 4 (Small) - Narrative
       </Heading>
-      <Heading level={5} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={5}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 5 (X-Small) - Narrative
       </Heading>
-      <Heading level={6} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={6}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 6 (2X-Small) - Narrative
       </Heading>
-    </>
+    </Card>
   );
 };
 
-export const Colors = () => {
+export const Colors = args => {
   return (
     <>
       <Card style={{ padding: '0 24px' }}>
@@ -104,78 +173,4 @@ export const Colors = () => {
   );
 };
 
-export const Inverse = () => {
-  return (
-    <Card isInverse style={{ padding: '0 24px' }}>
-      <Heading level={1} isInverse>
-        Heading 1 (X-Large) - Productive
-      </Heading>
-      <Heading level={2} isInverse>
-        Heading 2 (Large) - Productive
-      </Heading>
-      <Heading level={3} isInverse>
-        Heading 3 (Medium) - Productive
-      </Heading>
-      <Heading level={4} isInverse>
-        Heading 4 (Small) - Productive
-      </Heading>
-      <Heading level={5} isInverse>
-        Heading 5 (X-Small) - Productive
-      </Heading>
-      <Heading level={6} isInverse>
-        Heading 6 (2X-Small) - Productive
-      </Heading>
-      <br />
-      <Heading
-        level={1}
-        contextVariant={TypographyContextVariant.expressive}
-        visualStyle={TypographyVisualStyle.heading2XLarge}
-        isInverse
-      >
-        Heading 1 (2X-Large) - Expressive
-      </Heading>
-      <Heading
-        level={1}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 1 (X-Large) - Expressive
-      </Heading>
-      <Heading
-        level={2}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 2 (Large) - Expressive
-      </Heading>
-      <Heading
-        level={3}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 3 (Medium) - Expressive
-      </Heading>
-      <Heading
-        level={4}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 4 (Small) - Expressive
-      </Heading>
-      <Heading
-        level={5}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 5 (X-Small) - Expressive
-      </Heading>
-      <Heading
-        level={6}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 6 (2X-Small) - Expressive
-      </Heading>
-    </Card>
-  );
-};
+Colors.parameters = { controls: { exclude: ['isInverse'] } };

packages/react-magma-dom/src/components/InputBase/index.tsx

@@ -433,7 +433,7 @@ function getIconButtonTransform(props) {
   return position;
 }
 
-const IconButtonContainer = styled.span<{
+export const IconButtonContainer = styled.span<{
   iconPosition?: InputIconPosition;
   inputSize?: InputSize;
   theme: ThemeInterface;