@moda/om 17.7.0 → 17.9.0

package/dist/src/components/Breakpoint/Breakpoint.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import './Breakpoint.scss';
 declare type At = {
     at: string;
@@ -9,8 +9,6 @@ declare type GreaterThan = {
 declare type LessThan = {
     lt: string;
 };
-export declare type BreakpointProps = (At | GreaterThan | LessThan) & {
-    children?: React.ReactNode;
-};
+export declare type BreakpointProps = (At | GreaterThan | LessThan) & HTMLAttributes<HTMLDivElement>;
 export declare const Breakpoint: React.FC<BreakpointProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "17.7.0",
+  "version": "17.9.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/AspectRatioBox/AspectRatioBox.tsx

@@ -50,8 +50,8 @@ export const AspectRatioBox = React.forwardRef(
         style={{ maxWidth: `${width}px` }}
         {...rest}
       >
-        <div className="AspectRatioBox__wrapper" style={{ paddingBottom }} />
-        <div className="AspectRatioBox__content">{children}</div>
+        <div className='AspectRatioBox__wrapper' style={{ paddingBottom }} />
+        <div className='AspectRatioBox__content'>{children}</div>
       </div>
     );
   }

package/src/components/Badge/Badge.stories.tsx

@@ -8,27 +8,27 @@ export default { title: 'Components/Badge' };
 export const Themes = () => (
   <>
     <States>
-      <Badge theme="forest-green">BESTSELLER</Badge>
+      <Badge theme='forest-green'>BESTSELLER</Badge>
     </States>
 
     <States>
-      <Badge theme="klein-blue">TRENDING</Badge>
+      <Badge theme='klein-blue'>TRENDING</Badge>
     </States>
 
     <States>
-      <Badge theme="brick">Fall Essential</Badge>
+      <Badge theme='brick'>Fall Essential</Badge>
     </States>
 
     <States>
-      <Badge theme="noise">Runs small we recommend sizing up one size.</Badge>
+      <Badge theme='noise'>Runs small we recommend sizing up one size.</Badge>
     </States>
 
     <States>
-      <Badge theme="dark-fuchsia">25% off with Code FALL-25</Badge>
+      <Badge theme='dark-fuchsia'>25% off with Code FALL-25</Badge>
     </States>
 
     <States>
-      <Badge theme="dark-fuchsia">30% off with Code TREAT30</Badge>
+      <Badge theme='dark-fuchsia'>30% off with Code TREAT30</Badge>
     </States>
   </>
 );

package/src/components/Badge/Badge.test.tsx

@@ -10,7 +10,7 @@ describe('Badge', () => {
   });
 
   it('supports custom themes and children', () => {
-    render(<Badge theme="klein-blue">Custom Text - 2</Badge>);
+    render(<Badge theme='klein-blue'>Custom Text - 2</Badge>);
     expect(screen.getByText('Custom Text - 2')).toHaveClass('Badge--klein-blue');
   });
 });

package/src/components/Breadcrumbs/Breadcrumb/Breadcrumb.tsx

@@ -18,17 +18,17 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
 }) => (
   <li
     className={classNames('Breadcrumb', className)}
-    itemProp="itemListElement"
+    itemProp='itemListElement'
     itemScope
-    itemType="http://schema.org/ListItem"
+    itemType='http://schema.org/ListItem'
   >
     {rest.to || rest.href ? (
-      <ControlLink itemProp="item" {...rest}>
-        <span itemProp="name">{children}</span>
+      <ControlLink itemProp='item' {...rest}>
+        <span itemProp='name'>{children}</span>
       </ControlLink>
     ) : (
-      <span itemProp="name">{children}</span>
+      <span itemProp='name'>{children}</span>
     )}
-    {position != null && <meta itemProp="position" content={String(position)} />}
+    {position != null && <meta itemProp='position' content={String(position)} />}
   </li>
 );

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -8,9 +8,9 @@ export default { title: 'Components/Breadcrumbs' };
 export const Default = () => (
   <States<BreadcrumbsProps>>
     <Breadcrumbs>
-      <Breadcrumb href="#men">Men</Breadcrumb>
-      <Breadcrumb href="#clothing">Clothing</Breadcrumb>
-      <Breadcrumb href="#coats-jackets">Coats &amp; Jackets</Breadcrumb>
+      <Breadcrumb href='#men'>Men</Breadcrumb>
+      <Breadcrumb href='#clothing'>Clothing</Breadcrumb>
+      <Breadcrumb href='#coats-jackets'>Coats &amp; Jackets</Breadcrumb>
       <Breadcrumb>Zippy Safari Straight-Leg Wool Jumpsuit</Breadcrumb>
     </Breadcrumbs>
   </States>
@@ -19,9 +19,9 @@ export const Default = () => (
 export const Mobile = () => (
   <States<BreadcrumbsProps>>
     <Breadcrumbs>
-      <Breadcrumb href="#men">Men</Breadcrumb>
-      <Breadcrumb href="#clothing">Clothing</Breadcrumb>
-      <Breadcrumb href="#coats-jackets">Coats &amp; Jackets</Breadcrumb>
+      <Breadcrumb href='#men'>Men</Breadcrumb>
+      <Breadcrumb href='#clothing'>Clothing</Breadcrumb>
+      <Breadcrumb href='#coats-jackets'>Coats &amp; Jackets</Breadcrumb>
       <Breadcrumb>Zippy Safari Straight-Leg Wool Jumpsuit</Breadcrumb>
     </Breadcrumbs>
   </States>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -7,8 +7,8 @@ describe('Breadcrumbs', () => {
   it('wraps elements with microdata tags', () => {
     render(
       <Breadcrumbs>
-        <Breadcrumb href="/one">One</Breadcrumb>
-        <Breadcrumb href="/two">Two</Breadcrumb>
+        <Breadcrumb href='/one'>One</Breadcrumb>
+        <Breadcrumb href='/two'>Two</Breadcrumb>
         <Breadcrumb>Three</Breadcrumb>
       </Breadcrumbs>
     );

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -11,7 +11,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, className, .
   return (
     <ol
       itemScope
-      itemType="http://schema.org/BreadcrumbList"
+      itemType='http://schema.org/BreadcrumbList'
       className={classNames('Breadcrumbs', className)}
       {...rest}
     >

package/src/components/Breakpoint/Breakpoint.stories.tsx

@@ -67,15 +67,15 @@ export const Values = () => (
       return (
         <>
           <Breakpoint key={`at:${name}`} at={name}>
-            <Debug name={name} width={width} mode="at" />
+            <Debug name={name} width={width} mode='at' />
           </Breakpoint>
 
           <Breakpoint key={`gt:${name}`} gt={name}>
-            <Debug name={name} width={width} mode="gt" />
+            <Debug name={name} width={width} mode='gt' />
           </Breakpoint>
 
           <Breakpoint key={`lt:${name}`} lt={name}>
-            <Debug name={name} width={width} mode="lt" />
+            <Debug name={name} width={width} mode='lt' />
           </Breakpoint>
         </>
       );
@@ -89,21 +89,21 @@ export const Simple = () => (
       <Display key={width} width={width} />
     ))}
 
-    <Breakpoint lt="sm">Only displays on small screens</Breakpoint>
-    <Breakpoint gt="sm">Only displays on large screens</Breakpoint>
+    <Breakpoint lt='sm'>Only displays on small screens</Breakpoint>
+    <Breakpoint gt='sm'>Only displays on large screens</Breakpoint>
   </>
 );
 
 export const WithEvents = () => (
   <>
-    <Breakpoint lt="sm">
+    <Breakpoint lt='sm'>
       Only displays on smaller screens
-      <Watcher from="sm" />
+      <Watcher from='sm' />
     </Breakpoint>
 
-    <Breakpoint gt="sm">
+    <Breakpoint gt='sm'>
       Only displays on large screens
-      <Watcher from="lg" />
+      <Watcher from='lg' />
     </Breakpoint>
   </>
 );

package/src/components/Breakpoint/Breakpoint.test.tsx

@@ -7,8 +7,8 @@ describe('Breakpoint', () => {
   it('renders correctly', () => {
     render(
       <>
-        <Breakpoint gt="md">Visible on mobile</Breakpoint>
-        <Breakpoint lt="md">Visible on desktop</Breakpoint>
+        <Breakpoint gt='md'>Visible on mobile</Breakpoint>
+        <Breakpoint lt='md'>Visible on desktop</Breakpoint>
       </>
     );
     expect(screen.getByText('Visible on desktop')).toBeVisible();

package/src/components/Breakpoint/Breakpoint.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
+import { omit } from 'ramda';
+import classNames from 'classnames';
 import { useBreakpoint, discriminate } from '../../hooks/useBreakpoint';
 
 import './Breakpoint.scss';
@@ -7,13 +9,18 @@ type At = { at: string };
 type GreaterThan = { gt: string };
 type LessThan = { lt: string };
 
-export type BreakpointProps = (At | GreaterThan | LessThan) & { children?: React.ReactNode };
+export type BreakpointProps = (At | GreaterThan | LessThan) & HTMLAttributes<HTMLDivElement>;
 
-export const Breakpoint: React.FC<BreakpointProps> = ({ children, ...rest }) => {
+export const Breakpoint: React.FC<BreakpointProps> = ({ children, className, ...rest }) => {
   const { mode, breakpoint } = discriminate(rest);
   const { matches } = useBreakpoint(rest);
 
   return matches ? (
-    <div className={`Breakpoint Breakpoint--${mode}-${breakpoint}`}>{children}</div>
+    <div
+      className={classNames('Breakpoint', `Breakpoint--${mode}-${breakpoint}`, className)}
+      {...omit(['at', 'gt', 'lt'], rest)}
+    >
+      {children}
+    </div>
   ) : null;
 };

package/src/components/Button/Button.stories.tsx

@@ -41,7 +41,7 @@ export const SecondaryChip = () => (
 
 export const PrimaryWithHref = () => (
   <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
-    <Button href="#href" onClick={action('clicked')}>
+    <Button href='#href' onClick={action('clicked')}>
       Add to Cart
     </Button>
   </States>
@@ -50,7 +50,7 @@ export const PrimaryWithHref = () => (
 export const PrimaryAsReactRouterLink = () => (
   <BrowserRouter>
     <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
-      <Button to="#href" onClick={action('clicked')}>
+      <Button to='#href' onClick={action('clicked')}>
         Add to Cart
       </Button>
     </States>

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -20,7 +20,7 @@ export const Default = () => (
       { children: 'Disabled', checked: true, disabled: true },
       { children: 'Filtering/Circle', checkIcon: 'circle' },
       { children: 'Disabled', checkIcon: 'circle', checked: true, disabled: true },
-      { children: <Text color="code-red">Important!</Text> }
+      { children: <Text color='code-red'>Important!</Text> }
     ]}
   >
     <Checkbox />
@@ -33,11 +33,11 @@ export const Check = () => {
   return (
     <States>
       <Stack space={2}>
-        <Text color="burnt-orange">{checked ? 'Remembering' : 'Forgetting'}</Text>
+        <Text color='burnt-orange'>{checked ? 'Remembering' : 'Forgetting'}</Text>
 
         <Checkbox
-          id="rememberMe"
-          name="rememberMe"
+          id='rememberMe'
+          name='rememberMe'
           checked={checked}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             check(event.target.checked);

package/src/components/Checkbox/Checkbox.test.tsx

@@ -8,7 +8,7 @@ describe('Checkbox', () => {
   it('works correctly with checked attribute (controlled)', async () => {
     const handleChange = jest.fn();
     const { rerender } = render(
-      <Checkbox data-testid="checkbox" checked onChange={handleChange} />
+      <Checkbox data-testid='checkbox' checked onChange={handleChange} />
     );
 
     expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
@@ -18,14 +18,14 @@ describe('Checkbox', () => {
     expect(handleChange).toBeCalled();
     expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
 
-    rerender(<Checkbox data-testid="checkbox" checked={false} onChange={handleChange} />);
+    rerender(<Checkbox data-testid='checkbox' checked={false} onChange={handleChange} />);
 
     expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
   });
 
   it('works correctly with defaultChecked attribute (uncontrolled)', async () => {
     const handleChange = jest.fn();
-    render(<Checkbox data-testid="checkbox" defaultChecked={false} onChange={handleChange} />);
+    render(<Checkbox data-testid='checkbox' defaultChecked={false} onChange={handleChange} />);
 
     expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
 

package/src/components/Checkbox/Checkbox.tsx

@@ -47,7 +47,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
   return (
     <label
-      role="button"
+      role='button'
       tabIndex={0}
       className={classNames('Checkbox', className, {
         'Checkbox--disabled': disabled
@@ -71,8 +71,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
       <input
         tabIndex={-1}
-        className="Checkbox__input"
-        type="checkbox"
+        className='Checkbox__input'
+        type='checkbox'
         checked={isChecked}
         value={value}
         onChange={handleChange}
@@ -81,7 +81,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         {...rest}
       />
 
-      {children && <span className="Checkbox__label">{children}</span>}
+      {children && <span className='Checkbox__label'>{children}</span>}
     </label>
   );
 };

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

@@ -16,14 +16,14 @@ export const Button = () => (
 
 export const Anchor = () => (
   <States<ClickableProps>>
-    <Clickable href="#">Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
+    <Clickable href='#'>Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
   </States>
 );
 
 export const Link = () => (
   <BrowserRouter>
     <States<ClickableProps>>
-      <Clickable to="#href">Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
+      <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
     </States>
   </BrowserRouter>
 );

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

@@ -20,33 +20,33 @@ const STATES = [
 
 export const Default = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch color="yellow" onClick={action('onClick')} />
+    <ColorSwatch color='yellow' onClick={action('onClick')} />
   </States>
 );
 
 export const Small = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch size="small" color="yellow" onClick={action('onClick')} />
+    <ColorSwatch size='small' color='yellow' onClick={action('onClick')} />
   </States>
 );
 
 export const White = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch size="small" color="white" onClick={action('onClick')} />
+    <ColorSwatch size='small' color='white' onClick={action('onClick')} />
   </States>
 );
 
 export const Swatches = () => (
   <States<ColorSwatchProps>>
-    <Stack space={1} direction="horizontal">
-      <ColorSwatch onClick={action('onClick')} color="red" />
-      <ColorSwatch onClick={action('onClick')} color="white" />
-      <ColorSwatch onClick={action('onClick')} color="bronze" soldOut disabled />
-      <ColorSwatch onClick={action('onClick')} color="nude" onSale />
+    <Stack space={1} direction='horizontal'>
+      <ColorSwatch onClick={action('onClick')} color='red' />
+      <ColorSwatch onClick={action('onClick')} color='white' />
+      <ColorSwatch onClick={action('onClick')} color='bronze' soldOut disabled />
+      <ColorSwatch onClick={action('onClick')} color='nude' onSale />
       <ColorSwatch
         onClick={action('onClick')}
-        backgroundUrl="https://www.modaoperandi.com/assets/images/products/730581/340267/sw/prada-animal-leopard-print-shell-shoulder-bag.jpg?_v=1581323237"
-        color="nude"
+        backgroundUrl='https://www.modaoperandi.com/assets/images/products/730581/340267/sw/prada-animal-leopard-print-shell-shoulder-bag.jpg?_v=1581323237'
+        color='nude'
         onSale
         onMouseEnter={action('onMouseEnter')}
         onMouseLeave={action('onMouseLeave')}
@@ -56,7 +56,7 @@ export const Swatches = () => (
 );
 
 export const Constrained = () => (
-  <Stack direction="horizontal" space={3}>
+  <Stack direction='horizontal' space={3}>
     {Object.keys(SKU_COLORS).map(color => (
       <ColorSwatch key={color} onClick={action('onClick')} color={color} />
     ))}

package/src/components/ColorSwatch/ColorSwatch.test.tsx

@@ -5,7 +5,7 @@ import { ColorSwatch } from './ColorSwatch';
 
 describe('ColorSwatch', () => {
   it('renders correctly', () => {
-    render(<ColorSwatch color="nude" />);
+    render(<ColorSwatch color='nude' />);
     expect(screen.getByRole('button')).toBeVisible();
   });
 });

package/src/components/ColorSwatch/ColorSwatch.tsx

@@ -91,7 +91,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
       title={title}
       {...rest}
     >
-      <div className="ColorSwatch__chip" style={styles} />
+      <div className='ColorSwatch__chip' style={styles} />
     </Clickable>
   );
 };

package/src/components/Constrain/Constrain.stories.tsx

@@ -26,7 +26,7 @@ const Constrained = () => {
   return (
     <Constrain>
       <div ref={ref} style={{ backgroundColor: 'black', color: 'white', padding: '1rem' }}>
-        <Text color="snow">
+        <Text color='snow'>
           window: {windowWidth}px
           <br />
           constrained: {constrainWidth}px

package/src/components/Constrain/ExceedConstrain.stories.tsx

@@ -10,10 +10,10 @@ const Constrained = () => {
   return (
     <Constrain>
       <div style={{ backgroundColor: 'black', color: 'white', padding: '1rem' }}>
-        <Text color="snow">This div is constrained.</Text>
+        <Text color='snow'>This div is constrained.</Text>
       </div>
       <ExceedConstrain style={{ backgroundColor: 'gray', color: 'white', padding: '1rem' }}>
-        <Text color="snow">This exceeds the constrain.</Text>
+        <Text color='snow'>This exceeds the constrain.</Text>
       </ExceedConstrain>
     </Constrain>
   );

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

@@ -13,6 +13,6 @@ export const Default = () => (
       { maskChar: '' }
     ]}
   >
-    <CreditCardNumberInput label="Card Number" />
+    <CreditCardNumberInput label='Card Number' />
   </States>
 );

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

@@ -5,14 +5,14 @@ import { CreditCardNumberInput } from './CreditCardNumberInput';
 
 describe('credit card number input', () => {
   it('renders without errors', () => {
-    render(<CreditCardNumberInput label="Card Number" />);
+    render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number');
     expect(input).toBeInTheDocument();
   });
 
   // TODO: userEvent.type does not work here for some reason
   xit('does not allow non-numeric characters', async () => {
-    render(<CreditCardNumberInput label="Card Number" />);
+    render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
     await userEvent.type(input, 'foo1234');
@@ -22,7 +22,7 @@ describe('credit card number input', () => {
 
   // TODO: userEvent.type does not work here for some reason
   xit('puts spaces between the numbers', async () => {
-    render(<CreditCardNumberInput label="Card Number" />);
+    render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
     await userEvent.type(input, '5510000000000000');
@@ -32,7 +32,7 @@ describe('credit card number input', () => {
 
   // TODO: userEvent.type does not work here for some reason
   xit('does not allow more characters than required', async () => {
-    render(<CreditCardNumberInput label="Card Number" />);
+    render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
     await userEvent.type(input, '5510000000000000251');

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

@@ -14,13 +14,13 @@ export const Default = () => (
         term: 'Size',
         children: (
           <>
-            US 2 — <Text color="code-red">Only 2 Left</Text>
+            US 2 — <Text color='code-red'>Only 2 Left</Text>
           </>
         )
       },
       {
         term: 'Supports',
-        children: <a href="#link">Links</a>
+        children: <a href='#link'>Links</a>
       }
     ]}
   >

package/src/components/DefinitionList/DefinitionList.test.tsx

@@ -5,7 +5,7 @@ import { DefinitionList } from './DefinitionList';
 
 describe('DefinitionList', () => {
   it('renders correctly', () => {
-    render(<DefinitionList term="Foo">Bar</DefinitionList>);
+    render(<DefinitionList term='Foo'>Bar</DefinitionList>);
     expect(screen.getByText('Foo')).toBeVisible();
     expect(screen.getByText('Bar')).toBeVisible();
   });

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

@@ -7,19 +7,19 @@ export default { title: 'Components/Divider' };
 
 export const Default = () => (
   <States<Partial<DividerProps>> states={[{}, { type: 'no-line' }, { type: 'two-line' }]}>
-    <Divider text="Moda Operandi" />
+    <Divider text='Moda Operandi' />
   </States>
 );
 
 export const WithNoLine = () => (
   <States>
-    <NoLineDivider text="Divider with No Line" />
+    <NoLineDivider text='Divider with No Line' />
   </States>
 );
 
 export const WithDoubleLine = () => (
   <States>
-    <TwoLineDivider text="Divider with Double Line" />
+    <TwoLineDivider text='Divider with Double Line' />
   </States>
 );
 

package/src/components/Divider/Divider.test.tsx

@@ -5,7 +5,7 @@ import { Divider } from './Divider';
 
 describe('Divider', () => {
   it('renders correctly', () => {
-    render(<Divider style={{ padding: '30px 0' }} text="Hello" />);
+    render(<Divider style={{ padding: '30px 0' }} text='Hello' />);
     expect(screen.getByText('Hello')).toBeVisible();
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('Hello').parentNode).toHaveStyle('padding: 30px 0px;');

package/src/components/Divider/Divider.tsx

@@ -29,7 +29,7 @@ export const Divider: React.FC<DividerProps> = ({
     <div className={classNames('Divider', type ? `Divider--${type}` : '', className)} {...rest}>
       {text && (
         <Text
-          className="Divider__text"
+          className='Divider__text'
           treatment={treatment ?? defaultTreatment}
           color={color}
           family={family ?? defaultFamily}

package/src/components/Divider/NoLineDivider.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Divider, DividerProps } from './Divider';
 
 export const NoLineDivider: React.FC<DividerProps> = props => {
-  return <Divider {...props} type="no-line" />;
+  return <Divider {...props} type='no-line' />;
 };

package/src/components/Divider/TwoLineDivider.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Divider, DividerProps } from './Divider';
 
 export const TwoLineDivider: React.FC<DividerProps> = props => {
-  return <Divider {...props} type="two-line" />;
+  return <Divider {...props} type='two-line' />;
 };