@papillonarts/components 0.38.0 → 0.40.0

package/build/Legacy/Select/Select.scss

@@ -1,5 +1,5 @@
-@import '@papillonarts/css/build/primer/support/variables/misc.scss';
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/misc.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
 
 // stylelint-disable declaration-property-value-no-unknown
 

package/build/Legacy/Select/__tests__/Select.doc.md

@@ -0,0 +1,54 @@
+# Features
+
+> Selects are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
+
+```
+Select all props and variants
+```
+
+## Props
+
+```typescript
+export interface ISelect {
+  id?: string
+  className?: string
+  selectedText: string
+  items: IItem[]
+  onChange: (value) => void
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+Active
+
+Inactive
+```
+
+### Default
+
+> Select default variant
+
+```tsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} />
+```
+
+### Active
+
+> Select active variant
+
+```tsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} state={SelectState.Active} />
+```
+
+### Inactive
+
+> Select inactive variant
+
+```tsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} state={SelectState.Inactive} />
+```

package/build/Legacy/SelectMenu/SelectMenu.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectMenu = SelectMenu;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _details = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/details.scss"));
-var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _details = _interopRequireDefault(require("@papillonarts/css/utilities/details.scss"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/utilities/margin.scss"));
 var _array = require("@papillonarts/library/array");
-var _hooks = require("@papillonarts/library/hooks");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _uuid = require("uuid");
 var _Button = _interopRequireDefault(require("../Button/Button.scss"));
 var _Icon = require("../Icon");
@@ -27,12 +27,12 @@ function SelectMenu(_ref) {
     ariaAttr = _ref.ariaAttr,
     items = _ref.items,
     _onClick = _ref.onClick;
-  var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
+  var _useState = (0, _react.useState)((0, _array.getIndexItems)(items)),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     indexItems = _useState2[0],
     setIndexItems = _useState2[1];
   var haspopup = ariaAttr.haspopup;
-  var details = (0, _hooks.useRef)(null);
+  var details = (0, _react.useRef)(null);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
     ref: details,
     className: (0, _classnames["default"])(className, _details["default"]['details-reset'], _details["default"]['details-overlay']),

package/build/Legacy/SelectMenu/SelectMenu.scss

@@ -1,7 +1,7 @@
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
-@import '@papillonarts/css/build/primer/support/variables/misc.scss';
-@import '@papillonarts/css/build/primer/support/variables/typography.scss';
-@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/misc.scss';
+@import '@papillonarts/css/support/variables/typography.scss';
+@import '@papillonarts/css/support/mixins/layout.scss';
 
 // stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity

package/build/Legacy/SelectMenu/__tests__/SelectMenu.doc.md

@@ -0,0 +1,35 @@
+# Features
+
+> The SelectMenu component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
+
+```
+SelectMenu all props and variants
+```
+
+## Props
+
+```typescript
+export interface ISelectMenu {
+  className?: string
+  summary: string
+  icon: string
+  title?: string
+  ariaAttr: IAriaAttr
+  items: IItem[]
+  onClick: (value) => void
+}
+```
+
+## Variants
+
+```
+Default
+```
+
+### Default
+
+> SelectMenu default variant
+
+```tsx
+<SelectMenu summary={summary} icon={IconName.ChevronDown16} title={title} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
+```

package/build/Legacy/Subhead/Subhead.scss

@@ -1,7 +1,7 @@
 // @import '@primer/view-components/app/components/primer/beta/subhead';
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
-@import '@papillonarts/css/build/primer/support/variables/misc.scss';
-@import '@papillonarts/css/build/primer/support/variables/typography.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/misc.scss';
+@import '@papillonarts/css/support/variables/typography.scss';
 
 // Subhead styles
 .Subhead {

package/build/Legacy/Subhead/__tests__/Subhead.doc.md

@@ -0,0 +1,43 @@
+# Features
+
+> The basic Subhead consists of a .Subhead container, which has a light gray bottom border. Use .Subhead-heading for the heading itself. It's an <h2> sized heading with normal font-weight.
+
+> Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
+
+```
+Subhead all props and variants
+```
+
+## Props
+
+```typescript
+export interface ISubhead {
+  className?: string
+  heading: string
+  isSpacious?: boolean
+}
+```
+
+## Variants
+
+```
+Plain
+
+Spacious
+```
+
+### Plain
+
+> Subhead plain variant
+
+```tsx
+<Subhead heading="Plain subhead" />
+```
+
+### Spacious
+
+> Subhead spacious variant
+
+```tsx
+<Subhead heading="Spacious subhead" isSpacious={true} />
+```

package/build/Legacy/SyntaxHighlighter/__tests__/SyntaxHighlighter.doc.md

@@ -1,26 +1,50 @@
-# SyntaxHighlighter
+# Features
+
+```
+SyntaxHighlighter all props and variants
+```
+
+## Props
 
-> SyntaxHighlighter component all features
+```typescript
+export interface ISyntaxHighlighter extends ISyntaxHighlighterBase {
+  highlighter?: string
+}
 
+export interface ISyntaxHighlighterBase {
+  language?: string
+  style?: string
+  children?: string
+}
 ```
-# Features
 
-> Default
+## Variants
+
+```
+Default
+
+HLJSTypeScript
+
+HLJSMarkdown
+
+PrismTypeScript
+
+PrismMarkdown
 ```
 
-## Default
+### Default
 
-> Markdown component default feature
+> SyntaxHighlighter default variant
 
-```jsx
+```tsx
 <SyntaxHighlighter>{TypeScriptCode}</SyntaxHighlighter>
 ```
 
-## HLJS TypeScript
+### HLJS TypeScript
 
-> Markdown component hljs typescript feature
+> SyntaxHighlighter hljs typeScript variant
 
-```jsx
+```tsx
 <SyntaxHighlighter
   highlighter={SyntaxHighlighterHighlighter.HLJS}
   language={SyntaxHighlighterLanguage.TypeScript}
@@ -30,19 +54,19 @@
 </SyntaxHighlighter>
 ```
 
-## HLJS Markdown
+### HLJS Markdown
 
-> Markdown component hljs markdown feature
+> SyntaxHighlighter hljs markdown variant
 
-```jsx
-<Markdown highlighter={MarkdownHighlighter.HLJS}>{SyntaxHighlighterMarkdown}</Markdown>
+```tsx
+<Markdown highlighter={MarkdownHighlighter.HLJS}>{SyntaxHighlighterDoc}</Markdown>
 ```
 
-## Prism TypeScript
+### Prism TypeScript
 
-> Markdown component prism typescript feature
+> SyntaxHighlighter prism typeScript variant
 
-```jsx
+```tsx
 <SyntaxHighlighter
   highlighter={SyntaxHighlighterHighlighter.PRISM}
   language={SyntaxHighlighterLanguage.TypeScript}
@@ -52,10 +76,10 @@
 </SyntaxHighlighter>
 ```
 
-## Prism Markdown
+### Prism Markdown
 
-> Markdown component prism markdown feature
+> SyntaxHighlighter prism markdown variant
 
-```jsx
-<Markdown highlighter={MarkdownHighlighter.PRISM}>{SyntaxHighlighterMarkdown}</Markdown>
+```tsx
+<Markdown highlighter={MarkdownHighlighter.PRISM}>{SyntaxHighlighterDoc}</Markdown>
 ```

package/build/Legacy/Toast/Toast.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Toast = Toast;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/utilities/padding.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Icon = require("../Icon");
 var _Toast = _interopRequireDefault(require("./Toast.scss"));

package/build/Legacy/Toast/Toast.scss

@@ -1,6 +1,6 @@
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
-@import '@papillonarts/css/build/primer/support/variables/misc.scss';
-@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/misc.scss';
+@import '@papillonarts/css/support/mixins/layout.scss';
 
 // stylelint-disable custom-property-pattern
 

package/build/Legacy/Toast/__tests__/Toast.doc.md

@@ -0,0 +1,73 @@
+# Features
+
+> Toasts are used to show live, time-sensitive feedback to users.
+
+```
+Toast all props and variants
+```
+
+## Props
+
+```typescript
+export interface IToast {
+  className?: string
+  variant?: string
+  text: string
+  isDismissable?: boolean
+  onClick?: (value) => void
+}
+```
+
+## Variants
+
+```
+Info
+
+Success
+
+Warning
+
+Error
+
+Dismissible
+```
+
+### Info
+
+> Toast info variant
+
+```tsx
+<Toast variant={ToastVariant.Info} text={text.info} />
+```
+
+### Success
+
+> Toast success variant
+
+```tsx
+<Toast variant={ToastVariant.Success} text={text.success} />
+```
+
+### Warning
+
+> Toast warning variant
+
+```tsx
+<Toast variant={ToastVariant.Warning} text={text.warning} />
+```
+
+### Error
+
+> Toast error variant
+
+```tsx
+<Toast variant={ToastVariant.Error} text={text.error} />
+```
+
+### Dismissible
+
+> Toast dismissible variant
+
+```tsx
+<Toast variant={ToastVariant.Info} text={text.dismissible} isdismissible={true} onClick={action('onClick')} />
+```

package/build/Legacy/index.d.ts

@@ -1,4 +1,4 @@
-import '@papillonarts/css/build/primer/index.scss';
+import '@papillonarts/css/index.scss';
 import { Alert } from './Alert';
 import { Blankslate } from './Blankslate';
 import { Breadcrumb } from './Breadcrumb';

package/build/Legacy/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Legacy/index.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAA;AAClD,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAqB,MAAM,cAAc,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAyF,MAAM,UAAU,CAAA;AACxH,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,EAAE,IAAI,EAAsB,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAiB,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,OAAO,EAAE,OAAO,EAA+B,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAmB,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAA;AAE7C,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAE3C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Legacy/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAqB,MAAM,cAAc,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAyF,MAAM,UAAU,CAAA;AACxH,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,EAAE,IAAI,EAAsB,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAiB,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,OAAO,EAAE,OAAO,EAA+B,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAmB,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAA;AAE7C,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAE3C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DlB,CAAA"}

package/build/Legacy/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Legacy = void 0;
-require("@papillonarts/css/build/primer/index.scss");
+require("@papillonarts/css/index.scss");
 var _Alert = require("./Alert");
 var _Blankslate = require("./Blankslate");
 var _Breadcrumb = require("./Breadcrumb");

package/build/Modern/Flash/__tests__/Flash.doc.md

@@ -1,11 +1,156 @@
-# Flash
+# Features
 
-> Flash component all features
+```
+Flash all props and variants
+```
+
+## Props
+
+```typescript
+export type FlashProps = ComponentPropsWithoutRef<'div'> & {
+  className?: string
+  variant?: 'default' | 'warning' | 'success' | 'danger'
+  full?: boolean
+}
+```
+
+## Variants
+
+```
+Default
+
+Success
+
+Danger
 
+Warning
+
+Full
+
+WithIconAndAction
+
+WithIconActionDismiss
+```
+
+### Default
+
+> Flash default variant
+
+```tsx
+<Flash>Default</Flash>
 ```
-# Featues
 
-> Default
-> Success, Danger, Warning, Full
-> WithIconAndAction, WithIconActionDismiss
+### Success
+
+> Flash success variant
+
+```tsx
+<Flash
+  variant="success"
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
+    gridTemplateAreas: `'visual message actions'`,
+  }}
+>
+  <div className={classes.Visual}>
+    <CheckCircleIcon aria-label="Success" />
+  </div>
+  <div className={classes.Message}>Success</div>
+</Flash>
+```
+
+### Danger
+
+> Flash danger variant
+
+```tsx
+<Flash
+  variant="danger"
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
+    gridTemplateAreas: `'visual message actions'`,
+  }}
+>
+  <div className={classes.Visual}>
+    <InfoIcon aria-label="Danger" />
+  </div>
+  <div className={classes.Message}>Danger</div>
+</Flash>
+```
+
+### Warning
+
+> Flash warning variant
+
+```tsx
+<Flash
+  variant="warning"
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
+    gridTemplateAreas: `'visual message actions'`,
+  }}
+>
+  <div className={classes.Visual}>
+    <AlertIcon aria-label="Warning" />
+  </div>
+  <div className={classes.Message}>Warning</div>
+</Flash>
+```
+
+### Full
+
+> Flash full variant
+
+```tsx
+<Flash
+  full
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
+    gridTemplateAreas: `'visual message actions'`,
+  }}
+>
+  <div className={classes.Visual}>
+    <InfoIcon aria-label="Info" />
+  </div>
+  <div className={classes.Message}>Full</div>
+</Flash>
+```
+
+### With Icon And Action
+
+> Flash with icon and action variant
+
+```tsx
+<Flash className={classes.WithIconAndAction}>
+  <div className={classes.Visual}>
+    <InfoIcon aria-label="Info" />
+  </div>
+  <div className={classes.Message}>
+    This is a flash message with an icon and an action.
+    <Link href="/"> Learn more.</Link>
+  </div>
+  <div className={classes.ActionsResponsive}>{/*<Button>Join waitlist</Button>*/}</div>
+</Flash>
+```
+
+### With Icon Action Dismiss
+
+> Flash with icon action dismiss variant
+
+```tsx
+<Flash className={classes.WithIconActionDismiss}>
+  <div className={classes.Visual}>
+    <InfoIcon aria-label="Info" />
+  </div>
+  <div className={classes.Message}>
+    This is a flash message with an icon and an action.
+    <Link href="/"> Learn more.</Link>
+  </div>
+  <div className={classes.ActionsResponsive}>{/*<Button>Join waitlist</Button>*/}</div>
+  <div className={classes.Close}>{/*<IconButton variant="invisible" icon={XIcon} aria-label="Dismiss" />*/}</div>
+</Flash>
 ```

package/build/Modern/Link/__tests__/Link.doc.md

@@ -1,10 +1,96 @@
-# Link
+# Features
 
-> Link component all features
+```
+Link all props and variants
+```
+
+## Props
+
+```typescript
+type StyledLinkProps<As extends ElementType = 'a'> = {
+  as?: As
+  /** @deprecated use CSS modules to style hover color */
+  hoverColor?: string
+  muted?: boolean
+  // Link inside a text block
+  inline?: boolean
+}
+```
+
+## Variants
+
+```
+Default
+
+Muted
+
+Inline1
+
+Inline2
+```
 
+### Default
+
+> Link default variant
+
+```tsx
+<Link href="#">Links are great</Link>
+```
+
+### Muted
+
+> Link muted variant
+
+```tsx
+<Link href="#" muted>
+  Link
+</Link>
 ```
-# Featues
 
-> Default
-> Muted, Inline1, Inline2
+### Inline1
+
+> Link inline 1 variant
+
+```tsx
+<Link inline={true} href="#">
+  Link
+</Link>
+```
+
+### Inline2
+
+> Link inline 2 variant
+
+```tsx
+<div>
+  <div style={{ display: 'flex', flexDirection: 'column' }} data-a11y-link-underlines="true">
+    [data-a11y-link-underlines=true] (inline links have underline)
+    <Link href="#">inline: undefined</Link>
+    <Link inline={true} href="#">
+      inline: true
+    </Link>
+    <Link inline={false} href="#">
+      inline: false
+    </Link>
+    <br />
+    <Link muted={true} inline={true} href="#">
+      inline: true, muted: true
+    </Link>
+  </div>
+  <br />
+  <div style={{ display: 'flex', flexDirection: 'column' }} data-a11y-link-underlines="false">
+    [data-a11y-link-underlines=false] (inline has no effect)
+    <Link href="#">inline: undefined</Link>
+    <Link inline={true} href="#">
+      inline: true
+    </Link>
+    <Link inline={false} href="#">
+      inline: false
+    </Link>
+    <br />
+    <Link muted={true} inline={true} href="#">
+      inline: true, muted: true
+    </Link>
+  </div>
+</div>
 ```