@moda/om 20.4.0 → 21.0.0

package/src/components/Clickable/Clickable.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
 import { BrowserRouter } from 'react-router-dom';
+import { States } from '../../utilities';
 import { Clickable, ClickableProps } from './Clickable';
 
 export default { title: 'Components/Clickable' };

package/src/components/ColorSwatch/ColorSwatch.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { ColorSwatch, ColorSwatchProps, SKU_COLORS } from '.';
 

package/src/components/ControlLink/ControlLink.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
 import { BrowserRouter } from 'react-router-dom';
+import { States } from '../../utilities';
 import { ControlLink, ControlLinkProps } from './ControlLink';
 
 export default { title: 'Components/ControlLink' };

package/src/components/CreditCardNumberInput/CreditCardNumberInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { CreditCardNumberInput, CreditCardNumberInputProps } from './CreditCardNumberInput';
 
 export default { title: 'Components/CreditCardNumberInput' };

package/src/components/CreditCardNumberInput/CreditCardNumberInput.test.tsx

@@ -10,8 +10,7 @@ describe('credit card number input', () => {
     expect(input).toBeInTheDocument();
   });
 
-  // TODO: userEvent.type does not work here for some reason
-  xit('does not allow non-numeric characters', async () => {
+  it('does not allow non-numeric characters', async () => {
     render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
@@ -20,8 +19,7 @@ describe('credit card number input', () => {
     expect(input.value).toBe('1234 ____ ____ ____');
   });
 
-  // TODO: userEvent.type does not work here for some reason
-  xit('puts spaces between the numbers', async () => {
+  it('puts spaces between the numbers', async () => {
     render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
@@ -30,8 +28,7 @@ describe('credit card number input', () => {
     expect(input.value).toBe('5510 0000 0000 0000');
   });
 
-  // TODO: userEvent.type does not work here for some reason
-  xit('does not allow more characters than required', async () => {
+  it('does not allow more characters than required', async () => {
     render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 

package/src/components/CreditCardNumberInput/CreditCardNumberInput.tsx

@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import InputMask, { Props as InputMaskProps } from 'react-input-mask';
+import InputMask from '@mona-health/react-input-mask';
+import { Props as InputMaskProps } from 'react-input-mask';
 import creditCardType from 'credit-card-type';
 import { FieldProps } from '../Field';
-import {
-  CreditCardNumberInputField,
-  CreditCardNumberInputFieldProps
-} from './CreditCardNumberInputField';
+import { CreditCardNumberInputField } from './CreditCardNumberInputField';
 
 export type CreditCardNumberInputProps = Omit<
   InputMaskProps & FieldProps,
@@ -61,16 +59,10 @@ export const CreditCardNumberInput: React.FC<CreditCardNumberInputProps> = ({
     [setValue, onChange]
   );
 
-  // TODO: get rid of the any, the types of react-input-mask are incorrect here, it should expect a function as a child, but it expects a ReactNode
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const renderInputField: any = (inputProps: CreditCardNumberInputFieldProps) => (
-    <CreditCardNumberInputField {...rest} {...inputProps} />
-  );
-
   return (
     <InputMask
       mask={mask}
-      maskChar={maskChar}
+      maskPlaceholder={maskChar}
       alwaysShowMask={alwaysShowMask}
       disabled={disabled}
       readOnly={readOnly}
@@ -80,7 +72,7 @@ export const CreditCardNumberInput: React.FC<CreditCardNumberInputProps> = ({
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      {renderInputField}
+      <CreditCardNumberInputField {...rest} />
     </InputMask>
   );
 };

package/src/components/DefinitionList/DefinitionList.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Text } from '../Text';
 import { DefinitionList, DefinitionListProps } from './DefinitionList';
 

package/src/components/Divider/Divider.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { DividerProps } from './Divider';
 import { Divider, NoLineDivider, TwoLineDivider } from './';
 

package/src/components/Expandable/Expandable.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { Expandable, ExpandableProps } from './Expandable';
 

package/src/components/Field/Field.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { States } from 'storybook-states';
 import { action } from '@storybook/addon-actions';
+import { States } from '../../utilities';
 import { Textarea } from '../Textarea';
 import { Select } from '../Select';
 import { Field, FieldProps } from './Field';

package/src/components/Field/Field.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import classNames from 'classnames';
 import WarningIcon from '@moda/icons/warning-16';
 import { TextInput, TextInputProps } from '../TextInput';

package/src/components/Label/Label.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Label, LabelProps } from './Label';
 
 export default { title: 'Components/Label' };

package/src/components/LoadingItemsLavenderBlue/LoadingItems.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import * as LOADINGITEMS from '.';
 
 export default { title: 'Components/Shape' };

package/src/components/LoadingItemsPinkGreen/LoadingItems.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import * as LOADINGITEMS from '.';
 
 export default { title: 'Components/Shape' };

package/src/components/LoadingShapes/LoadingShapes.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { LoadingShapes } from './LoadingShapes';
 
 export default { title: 'Components/LoadingShapes' };

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { LoadingShapesLavenderBlue } from './LoadingShapesLavenderBlue';
 
 export default { title: 'Components/LoadingShapesLavenderBlue' };

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { LoadingShapesPinkGreen } from './LoadingShapesPinkGreen';
 
 export default { title: 'Components/LoadingShapesPinkGreen' };

package/src/components/Overlay/Overlay.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Button } from '../Button';
 import { Overlay } from './Overlay';
 

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { PasswordInput, PasswordInputProps } from './PasswordInput';
 
 export default { title: 'Components/PasswordInput' };

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { ControlLink } from '..';
 import { Text } from '../Text';
 import { Popover, PopoverProps } from './Popover';

package/src/components/Popover/Popover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef, ReactNode } from 'react';
+import React, { useState, useCallback, useEffect, useRef, ReactNode, JSX } from 'react';
 import classNames from 'classnames';
 import './Popover.scss';
 

package/src/components/PromoBanner/PromoBanner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { PromoBanner, PromoBannerProps } from './PromoBanner';
 
 export default { title: 'Components/PromoBanner' };

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement } from 'react';
+import React, { Children, cloneElement, JSX } from 'react';
 import classNames from 'classnames';
 import { Constrain } from '../Constrain';
 import './PromoBanner.scss';

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Text } from '../Text';
 import { Stack } from '../Stack';
 import { RadioButton, RadioButtonProps } from './RadioButton';

package/src/components/RadioButton/RadioButton.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { JSX, useRef } from 'react';
 import classNames from 'classnames';
 import './RadioButton.scss';
 

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Text } from '../Text';
 import { SearchInput, SearchInputProps } from './SearchInput';
 

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
-import { useCallback } from 'react';
+import { States } from '../../utilities';
 import { Input } from '../Field';
 import { Select, SelectProps } from './Select';
 import { MultiSelect } from './MultiSelect';

package/src/components/Select/Select.test.tsx

@@ -16,7 +16,7 @@ describe('Select', () => {
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
     );
   });
 
@@ -27,7 +27,7 @@ describe('Select', () => {
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul class="SelectOptions__list" tabindex="-1" role="listbox" aria-labelledby="Select__label--1" aria-activedescendant="SelectOption--foo-1"><li class="SelectOption SelectOption--active" aria-label="Foo" aria-selected="false" role="option">Foo</li><li class="SelectOption" aria-label="Bar" aria-selected="false" role="option">Bar</li><li class="SelectOption SelectOption--disabled" aria-label="Baz" aria-selected="false" role="option">Baz</li></ul></div></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul class="SelectOptions__list" tabindex="-1" role="listbox" aria-labelledby="Select__label--1" aria-activedescendant="SelectOption--foo-1"><li class="SelectOption SelectOption--active" aria-label="Foo" aria-selected="false" role="option">Foo</li><li class="SelectOption" aria-label="Bar" aria-selected="false" role="option">Bar</li><li class="SelectOption SelectOption--disabled" aria-label="Baz" aria-selected="false" role="option">Baz</li></ul></div></div>'
     );
   });
 
@@ -45,7 +45,7 @@ describe('Select', () => {
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select Select--disabled"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Clickable--disabled Select__value" disabled=""><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select Select--disabled"><input id="1" type="hidden" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Clickable--disabled Select__value" disabled=""><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
     );
   });
 
@@ -96,7 +96,7 @@ describe('Select', () => {
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by: </label>Bar<span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by: </label>Bar<span class="Select__icon"></span></button></div>'
     );
   });
 
@@ -107,7 +107,7 @@ describe('Select', () => {
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value">Bar<span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value">Bar<span class="Select__icon"></span></button></div>'
     );
   });
 });

package/src/components/SelectableButton/SelectableButton.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { SelectableButton, SelectableButtonProps } from './SelectableButton';
 

package/src/components/Shape/Shape.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import * as SHAPES from '.';
 
 export default { title: 'Components/Shape' };

package/src/components/Stack/Stack.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { States } from 'storybook-states';
 import { space } from '@moda/tokens';
+import { States } from '../../utilities';
 import { Stack, StackProps } from './Stack';
 
 export default { title: 'Components/Stack' };

package/src/components/Tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { JSX, useCallback } from 'react';
 import { Clickable } from '../Clickable';
 import './Tab.scss';
 

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Text } from '../Text';
 import { Tabs, TabsProps } from './Tabs';
 

package/src/components/Tag/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Tag, TagProps } from './Tag';
 
 export default { title: 'Components/Tag' };

package/src/components/Text/Text.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { typography, colors } from '@moda/tokens';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Text, TextProps, TextTreatment, TextColor, TextFontFamily } from './Text';
 
 export default { title: 'Components/Text' };

package/src/components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import React, { ReactHTML } from 'react';
+import React, { HTMLElementType } from 'react';
 import classNames from 'classnames';
 import { typography, colors } from '@moda/tokens';
 import './Text.scss';
@@ -8,7 +8,7 @@ export type TextColor = keyof typeof colors.all;
 export type TextFontFamily = keyof typeof typography.fonts;
 
 export type TextProps = React.HTMLAttributes<HTMLSpanElement> & {
-  as?: keyof ReactHTML;
+  as?: HTMLElementType;
   treatment?: TextTreatment;
   color?: TextColor;
   family?: TextFontFamily;

package/src/components/TextInput/TextInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { TextInput, TextInputProps } from './TextInput';
 
 export default { title: 'Components/TextInput' };

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Textarea, TextareaProps } from './Textarea';
 
 export default { title: 'Components/Textarea' };

package/src/components/Toast/Toast.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Toast, ToastProps } from './Toast';
 
 export default { title: 'Components/Toast' };

package/src/components/VerticalDivider/VerticalDivider.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { VerticalDivider } from './VerticalDivider';
 

package/src/hooks/useClickOutside.ts

@@ -1,6 +1,9 @@
 import React, { useEffect, useCallback } from 'react';
 
-export const useClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: () => void) => {
+export const useClickOutside = (
+  ref: React.RefObject<HTMLElement | null>,
+  onClickOutside: () => void
+) => {
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
       if (ref.current && !ref.current.contains(event.target as Node)) onClickOutside();

package/src/utilities/States/State.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import { isRenderProps, RenderProps } from './isRenderProps';
-import { StatesProps } from './StatesProps';
-import './State.scss';
+import React, { JSX } from 'react';
+import { isRenderProps, RenderProps } from '../isRenderProps';
+import { StateProps } from './StateProps';
+import { useStyles } from './Styles';
 
-interface Props {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: any;
-  children: JSX.Element | RenderProps;
+interface Props<T> {
+  props: T;
+  children: JSX.Element | RenderProps<T>;
 }
 
-export const State: React.FC<Props> = ({ props, children, ...rest }) => {
+export const State = <T extends object>({ props, children, ...rest }: Props<T>) => {
+  const styles = useStyles();
+
   const Specimen = isRenderProps(children) ? children(props) : React.cloneElement(children, props);
+
   const innerChildren = isRenderProps(children) ? children(props) : children;
 
   return (
-    <div className='State' {...rest}>
+    <div style={styles.state} {...rest}>
       {Specimen}
 
-      <code className='State__props'>
-        <StatesProps props={props}>{innerChildren}</StatesProps>
-      </code>
+      <StateProps props={props}>{innerChildren}</StateProps>
     </div>
   );
 };

package/src/utilities/States/StateProps.tsx

@@ -0,0 +1,28 @@
+import React, { JSX } from 'react';
+import { isRenderProps } from '../isRenderProps';
+import { stringifyProps } from '../stringifyProps';
+import { omit } from '../omit';
+import { isEmpty } from '../isEmpty';
+import { useStyles } from './Styles';
+
+interface Props {
+  children: JSX.Element;
+  props: object;
+}
+
+export const StateProps: React.FC<Props> = ({ props, children }) => {
+  const styles = useStyles();
+  const childrenProps = omit(children.props, ...Object.keys(props || {}));
+
+  return (
+    <div style={styles.stateProps}>
+      {'<'}
+      <span>{children.type.displayName || children.type.name}</span>{' '}
+      {!isEmpty(props) && <strong style={styles.statePropsActive}>{stringifyProps(props)}</strong>}{' '}
+      {!isRenderProps(children) && !isEmpty(childrenProps) && (
+        <span>{stringifyProps(childrenProps)}</span>
+      )}
+      <span>{' />'}</span>
+    </div>
+  );
+};

package/src/utilities/States/States.tsx

@@ -1,22 +1,20 @@
-import React from 'react';
-import { RenderProps } from './isRenderProps';
+import React, { JSX } from 'react';
+import { RenderProps } from '../isRenderProps';
 import { State } from './State';
-import './States.scss';
 
-export interface Props {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  states?: any[];
-  children: JSX.Element | RenderProps;
+export interface Props<T> {
+  states?: T[];
+  children: JSX.Element | RenderProps<T>;
 }
 
-export const States: React.FC<Props> = ({ states = [{}], children, ...rest }) => {
+export const States = <T extends object>({ states = [{} as T], children, ...rest }: Props<T>) => {
   return (
-    <div className='States'>
+    <>
       {states.map((props, index) => (
-        <State key={index} props={props} {...rest}>
+        <State<T> key={index} props={props} {...rest}>
           {children}
         </State>
       ))}
-    </div>
+    </>
   );
 };

package/src/utilities/States/Styles.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode, useContext } from 'react';
+
+export type StateStyles = {
+  state: React.CSSProperties;
+  stateProps: React.CSSProperties;
+  statePropsActive: React.CSSProperties;
+};
+
+export const DEFAULT_STYLES: StateStyles = {
+  state: {
+    border: '1px dotted #ddd',
+    padding: '0.5rem',
+    marginBottom: '1rem'
+  },
+  stateProps: {
+    display: 'block',
+    marginTop: '0.5rem',
+    paddingTop: '0.5rem',
+    fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+    fontSize: '0.8125rem',
+    color: '#999',
+    borderTop: '1px dotted #ddd'
+  },
+  statePropsActive: {
+    color: '#111',
+    textDecoration: 'underline'
+  }
+};
+
+export const Styles = React.createContext<StateStyles>(DEFAULT_STYLES);
+
+export type StylesProvider = {
+  styles: Partial<StateStyles>;
+  children?: ReactNode;
+};
+
+export const StylesProvider: React.FC<StylesProvider> = ({ styles, children }) => {
+  return <Styles.Provider value={{ ...DEFAULT_STYLES, ...styles }}>{children}</Styles.Provider>;
+};
+
+export const useStyles = () => {
+  return useContext(Styles);
+};

package/src/utilities/States/index.ts

@@ -1 +1,2 @@
 export * from './States';
+export * from './Styles';

package/src/utilities/index.ts

@@ -1 +1,8 @@
 export * from './States';
+export * from './isEmpty';
+export * from './isRenderProps';
+export * from './omit';
+export * from './preventNavigation';
+export * from './sample';
+export * from './stringifyProps';
+export * from './truncate';

package/src/utilities/isEmpty.ts

@@ -0,0 +1 @@
+export const isEmpty = (obj?: unknown) => Object.entries(obj || {}).length === 0;