@react-ui-org/react-ui 0.42.1 → 0.44.1

package/src/lib/components/{layout/FormLayout → FormLayout}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: FormLayout
 menu: 'Layouts'
-route: /components/layout/form-layout
+route: /components/form-layout
 ---
 
 # FormLayout
@@ -12,16 +12,16 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
-import { Button } from '../../ui/Button/Button'
-import { ButtonGroup } from '../../ui/ButtonGroup/ButtonGroup'
-import { CheckboxField } from '../../ui/CheckboxField/CheckboxField'
-import { FileInputField } from '../../ui/FileInputField/FileInputField'
-import { Radio } from '../../ui/Radio/Radio'
-import { SelectField } from '../../ui/SelectField/SelectField'
-import { TextArea } from '../../ui/TextArea/TextArea'
-import { TextField } from '../../ui/TextField/TextField'
-import { Toggle } from '../../ui/Toggle/Toggle'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
+import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
+import { CheckboxField } from '../CheckboxField/CheckboxField'
+import { FileInputField } from '../FileInputField/FileInputField'
+import { Radio } from '../Radio/Radio'
+import { SelectField } from '../SelectField/SelectField'
+import { TextArea } from '../TextArea/TextArea'
+import { TextField } from '../TextField/TextField'
+import { Toggle } from '../Toggle/Toggle'
 import { Center } from '../Center/Center'
 import { Toolbar } from '../Toolbar/Toolbar'
 import { ToolbarItem } from '../Toolbar/ToolbarItem'
@@ -60,10 +60,10 @@ the job: the
   are supported!). All React UI form components are ready for this use case and
   don't need to be wrapped in any `div`s. Namely, the FormLayout supports the
   following React UI components:
-  [CheckboxField](/components/ui/checkbox-field),
-  [Radio](/components/ui/radio), [SelectField](/components/ui/select-field),
-  [TextArea](/components/ui/text-area), [TextField](/components/ui/text-field),
-  and [Toggle](/components/ui/toggle).
+  [CheckboxField](/components/checkbox-field),
+  [Radio](/components/radio), [SelectField](/components/select-field),
+  [TextArea](/components/text-area), [TextField](/components/text-field),
+  and [Toggle](/components/toggle).
 
 - Use the [FormLayoutCustomField](#custom-fields) component when you need to
   place any **custom content** inside the FormLayout. This layout helper ensures
@@ -80,7 +80,7 @@ in cases when there are longer validation messages or help texts.
 
 ## Vertical Layout
 
-Vertical FormLayout works similar to the [List](/components/layout/list) layout
+Vertical FormLayout works similar to the [List](/components/list) layout
 except that no equivalent of ListItems is needed. It stacks the form fields
 vertically while it forces the vertical layout mode on them. To use this layout,
 simply wrap your form fields with the FormLayout component:
@@ -135,7 +135,7 @@ with CSS custom properties.
 - The `custom` mode (local) allows you to enter any **custom label width for
   individual FormLayouts.**
 
-Try to resize the playground to see how individual options work.
+📐 Try resizing the playground to see how individual options work.
 
 <Playground>
   {() => {
@@ -150,37 +150,35 @@ Try to resize the playground to see how individual options work.
           <ToolbarItem>
             <ButtonGroup aria-labelledby="#label-width-options-label">
               <Button
-                label="default"
-                clickHandler={() => setLabelWidth('default')}
                 color={labelWidth === 'default' ? 'dark' : 'primary'}
+                label="default"
+                onClick={() => setLabelWidth('default')}
               />
               <Button
-                label="auto"
-                clickHandler={() => setLabelWidth('auto')}
                 color={labelWidth === 'auto' ? 'dark' : 'primary'}
+                label="auto"
+                onClick={() => setLabelWidth('auto')}
               />
               <Button
-                label="limited"
-                clickHandler={() => setLabelWidth('limited')}
                 color={labelWidth === 'limited' ? 'dark' : 'primary'}
+                label="limited"
+                onClick={() => setLabelWidth('limited')}
               />
               <Button
-                label="custom"
-                clickHandler={() => setLabelWidth('custom')}
                 color={labelWidth === 'custom' ? 'dark' : 'primary'}
+                label="custom"
+                onClick={() => setLabelWidth('custom')}
               />
             </ButtonGroup>
           </ToolbarItem>
           {labelWidth === 'custom' && (
             <ToolbarItem>
               <TextField
-                changeHandler={(e) => (
-                  setCustomLabelWidth(e.target.value)
-                )}
                 inputSize={5}
                 isLabelVisible={false}
                 label="Custom label width"
                 layout="horizontal"
+                onChange={(e) => setCustomLabelWidth(e.target.value)}
                 value={customLabelWidth}
               />
             </ToolbarItem>
@@ -211,7 +209,7 @@ Try to resize the playground to see how individual options work.
 
 Please note the `auto` and `limited` label width options may not function
 correctly in combination with other auto layout mechanisms, e.g. the auto-width
-[Modal](/components/ui/modal). It's just too much of magic that doesn't quite
+[Modal](/components/modal). It's just too much of magic that doesn't quite
 work together yet 🎩.
 
 #### Inline Form Fields
@@ -228,7 +226,7 @@ is fully supported in
 ## Alignment
 
 To align whole FormLayout to center of a container, simply wrap it with the
-[Center](/components/layout/center) layout.
+[Center](/components/center) layout.
 
 <Playground>
   <Placeholder bordered height="24rem">
@@ -340,9 +338,9 @@ properly vertically aligned.
             </ToolbarItem>
             <ToolbarItem>
               <CheckboxField
-                changeHandler={() => setIsChecked(!isChecked)}
                 checked={isChecked}
                 label="Another form field"
+                onChange={() => setIsChecked(!isChecked)}
               />
             </ToolbarItem>
           </Toolbar>
@@ -383,14 +381,14 @@ This is a demo of all components supported by FormLayout.
           <ToolbarItem>
             <ButtonGroup>
               <Button
-                label="Vertical layout"
-                clickHandler={() => setFieldLayout('vertical')}
                 color={fieldLayout === 'vertical' ? 'dark' : 'primary'}
+                label="Vertical layout"
+                onClick={() => setFieldLayout('vertical')}
               />
               <Button
-                label="Horizontal layout"
-                clickHandler={() => setFieldLayout('horizontal')}
                 color={fieldLayout === 'horizontal' ? 'dark' : 'primary'}
+                label="Horizontal layout"
+                onClick={() => setFieldLayout('horizontal')}
               />
             </ButtonGroup>
           </ToolbarItem>
@@ -398,34 +396,28 @@ This is a demo of all components supported by FormLayout.
         <FormLayout fieldLayout={fieldLayout} labelWidth="auto">
           <>
             <TextField
-              changeHandler={() => {}}
               label="First Name"
             />
             <TextField
-              changeHandler={() => {}}
               label="Last Name"
             />
           </>
           <TextField
-            changeHandler={() => {}}
             helpText="Optional"
             label="Email address"
             type="email"
           />
           <>
             <TextField
-              changeHandler={() => {}}
               label="Address"
               placeholder="Address line 1"
             />
             <TextField
-              changeHandler={() => {}}
               isLabelVisible={false}
               label="Address 2"
               placeholder="Address line 2"
             />
             <TextField
-              changeHandler={() => {}}
               inputSize={6}
               label="ZIP"
               validationState="invalid"
@@ -435,37 +427,35 @@ This is a demo of all components supported by FormLayout.
               <span>Czech Republic</span>
             </FormLayoutCustomField>
             <CheckboxField
-              changeHandler={() => setIsDeliveryAddress(!isDeliveryAddress)}
               checked={isDeliveryAddress}
               label="This is my delivery address"
+              onChange={() => setIsDeliveryAddress(!isDeliveryAddress)}
             />
           </>
           <SelectField
-            changeHandler={(e) => setFruit(e.target.value)}
             label="Your favourite fruit"
+            onChange={(e) => setFruit(e.target.value)}
             options={options}
             value={fruit}
           />
           <TextArea
-            changeHandler={() => {}}
             fullWidth
             label="Message"
             rows={3}
           />
           <FileInputField
-            changeHandler={() => {}}
             label="Attachment"
           />
           <Toggle
-            changeHandler={() => setReceiveNewsletter(!receiveNewsletter)}
             checked={receiveNewsletter}
             helpText="Only once per week!"
             label="Receive weekly newsletter"
+            onChange={() => setReceiveNewsletter(!receiveNewsletter)}
             required
           />
           <Radio
-            changeHandler={(e) => setFruit(e.target.value)}
             label="And fruit again!"
+            onChange={(e) => setFruit(e.target.value)}
             options={options}
             value={fruit}
           />

package/src/lib/components/{layout/FormLayout → FormLayout}/index.js

@@ -1,2 +1,3 @@
 export { default as FormLayout } from './FormLayout';
+export { FormLayoutContext } from './FormLayoutContext';
 export { default as FormLayoutCustomField } from './FormLayoutCustomField';

package/src/lib/components/{layout/Grid → Grid}/Grid.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import { generateResponsiveCustomProperties } from './helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
@@ -16,6 +16,7 @@ export const Grid = ({
   justifyItems,
   rowGap,
   rows,
+  tag: Tag,
   ...other
 }) => {
   if (!children) {
@@ -23,15 +24,15 @@ export const Grid = ({
   }
 
   return (
-    <div
+    <Tag
       id={id}
       className={styles.root}
       style={{
-        ...(typeof autoFlow !== 'undefined' ? { '--rui-local-auto-flow': autoFlow } : {}),
         ...generateResponsiveCustomProperties(columns, 'columns'),
         ...generateResponsiveCustomProperties(columnGap, 'column-gap'),
         ...generateResponsiveCustomProperties(rows, 'rows'),
         ...generateResponsiveCustomProperties(rowGap, 'row-gap'),
+        ...generateResponsiveCustomProperties(autoFlow, 'auto-flow'),
         ...generateResponsiveCustomProperties(alignContent, 'align-content'),
         ...generateResponsiveCustomProperties(alignItems, 'align-items'),
         ...generateResponsiveCustomProperties(justifyContent, 'justify-content'),
@@ -40,7 +41,7 @@ export const Grid = ({
       {...other}
     >
       {children}
-    </div>
+    </Tag>
   );
 };
 
@@ -59,6 +60,7 @@ Grid.defaultProps = {
   justifyItems: undefined,
   rowGap: undefined,
   rows: undefined,
+  tag: 'div',
 };
 
 Grid.propTypes = {
@@ -98,7 +100,18 @@ Grid.propTypes = {
    * Grid auto-flow algorithm to be used. Accepts any valid value of `grid-auto-flow` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) for more.
    */
-  autoFlow: PropTypes.oneOf(['row', 'column', 'dense', 'row dense', 'column dense']),
+  autoFlow: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      xs: PropTypes.string,
+      sm: PropTypes.string,
+      md: PropTypes.string,
+      lg: PropTypes.string,
+      xl: PropTypes.string,
+      xxl: PropTypes.string,
+      xxxl: PropTypes.string,
+    }),
+  ]),
   /**
    * Items to be aligned in the grid.
    */
@@ -203,6 +216,11 @@ Grid.propTypes = {
       xxxl: PropTypes.string,
     }),
   ]),
+  /**
+   * HTML tag to render. Can be any valid HTML tag of your choice, usually a
+   * [block-level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements).
+   */
+  tag: PropTypes.string,
 };
 
 export const GridWithContext = withProviderContext(Grid, 'Grid');

package/src/lib/components/{layout/Grid → Grid}/Grid.scss

@@ -19,11 +19,9 @@
 //    `--rui-local-<PROPERTY>: var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
 //
 // 2. Apply custom property value that is defined within current breakpoint, see 1.
-//
-// 3. Any valid auto-flow algorithm can be used. It's applied globally for all breakpoints.
 
 @use 'sass:map';
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/spacing';
 @use 'theme';
 @use 'tools';
 
@@ -34,7 +32,7 @@
   display: grid;
   grid-template-columns: var(--rui-local-columns); // 2.
   grid-template-rows: var(--rui-local-rows); // 2.
-  grid-auto-flow: var(--rui-local-auto-flow, theme.$auto-flow); // 3.
+  grid-auto-flow: var(--rui-local-auto-flow, #{map.get(theme.$responsive-properties, auto-flow)}); // 2.
   grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
   align-content: var(--rui-local-align-content, #{map.get(theme.$responsive-properties, align-content)}); // 2.
   align-items: var(--rui-local-align-items, #{map.get(theme.$responsive-properties, align-items)}); // 2.
@@ -53,3 +51,14 @@
   grid-column: span var(--rui-local-column-span, 1); // 2.
   grid-row: span var(--rui-local-row-span, 1); // 2.
 }
+
+/* stylelint-disable selector-no-qualifying-type */
+
+dl.root,
+ol.root,
+ul.root {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+/* stylelint-enable selector-no-qualifying-type */

package/src/lib/components/{layout/Grid → Grid}/GridSpan.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import { generateResponsiveCustomProperties } from './helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
@@ -9,6 +9,7 @@ export const GridSpan = ({
   columns,
   id,
   rows,
+  tag: Tag,
   ...other
 }) => {
   if (!children) {
@@ -16,7 +17,7 @@ export const GridSpan = ({
   }
 
   return (
-    <div
+    <Tag
       id={id}
       className={styles.span}
       style={{
@@ -26,7 +27,7 @@ export const GridSpan = ({
       {...other}
     >
       {children}
-    </div>
+    </Tag>
   );
 };
 
@@ -38,6 +39,7 @@ GridSpan.defaultProps = {
   columns: undefined,
   id: undefined,
   rows: undefined,
+  tag: 'div',
 };
 
 GridSpan.propTypes = {
@@ -79,6 +81,11 @@ GridSpan.propTypes = {
       xxxl: PropTypes.number,
     }),
   ]),
+  /**
+   * HTML tag to render. Can be any valid HTML tag of your choice, usually a
+   * [block-level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements).
+   */
+  tag: PropTypes.string,
 };
 
 export const GridSpanWithContext = withProviderContext(GridSpan, 'GridSpan');

package/src/lib/components/{layout/Grid → Grid}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Grid
 menu: 'Layouts'
-route: /components/layout/grid
+route: /components/grid
 ---
 
 # Grid
@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import { Grid } from './Grid'
 import { GridSpan } from './GridSpan'
 
@@ -41,20 +41,12 @@ See [API](#api) for all available options.
 
 ## General Guidelines
 
-- This component implements native
-  [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout),
-  the right CSS tool for two-dimensional layouts. You may use any value accepted
-  by
-  [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns),
-  [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows),
-  [grid-column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap),
-  [grid-row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap),
-  [grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow),
-  [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content),
-  [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items),
-  [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content),
-  [justify-items](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
-  and CSS properties in corresponding API options of the component.
+- This component implements native [CSS grid layout][grid-layout], the right CSS
+  tool for two-dimensional layouts. You may use any value accepted by
+  [grid-template-columns], [grid-template-rows], [grid-column-gap],
+  [grid-row-gap], [grid-auto-flow], [align-content], [align-items],
+  [justify-content], [justify-items], and CSS properties in corresponding API
+  options of the component.
 
 - To align your items in the grid, **simply wrap** them with the Grid
   component. Unlike other grid frameworks and UI libraries, **no additional
@@ -84,9 +76,7 @@ Use `columns` and `rows` to specify your grid layout.
   </Grid>
 </Playground>
 
-You can use the
-[`repeat()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat) function
-to specify a recurring pattern.
+You can use the [`repeat()`][repeat] function to specify a recurring pattern.
 
 <Playground>
   <Grid columns="repeat(3, 1fr)">
@@ -99,9 +89,8 @@ to specify a recurring pattern.
   </Grid>
 </Playground>
 
-Combine `repeat()` with `auto-fit` and
-[`minmax()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) to build
-automatic responsive layouts. Resize the playground to see it in action.
+Combine `repeat()` with `auto-fit` and [`minmax()`][minmax] to build automatic
+responsive layouts. Resize the playground to see it in action.
 
 <Playground>
   <Grid columns="repeat(auto-fit, minmax(200px, auto))">
@@ -198,7 +187,10 @@ responsive columns and rows.
 
 <Playground>
   <Grid
-    autoFlow="row dense"
+    autoFlow={{
+      xs: 'row dense',
+      sm: 'column',
+    }}
     columns={{
       xs: 'repeat(2, 1fr)',
       sm: 'repeat(4, 1fr)',
@@ -208,29 +200,28 @@ responsive columns and rows.
       sm: 'auto 100px auto auto',
     }}
   >
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item 1</Placeholder>
+    <Placeholder bordered>Grid item 2</Placeholder>
+    <Placeholder bordered>Grid item 3</Placeholder>
+    <Placeholder bordered>Grid item 4</Placeholder>
+    <Placeholder bordered>Grid item 5</Placeholder>
     <GridSpan columns={2} rows={2}>
       <Placeholder bordered height="100%">
         Grid item spanning over two lines and two rows
       </Placeholder>
     </GridSpan>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item 6</Placeholder>
+    <Placeholder bordered>Grid item 7</Placeholder>
+    <Placeholder bordered>Grid item 8</Placeholder>
+    <Placeholder bordered>Grid item 9</Placeholder>
+    <Placeholder bordered>Grid item 10</Placeholder>
+    <Placeholder bordered>Grid item 11</Placeholder>
+    <Placeholder bordered>Grid item 12</Placeholder>
   </Grid>
 </Playground>
 
-👉 `autoFlow` implements the `grid-auto-flow` CSS property. See
-[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) to fully
-understand available options.
+👉 `autoFlow` (used in the example above) implements the `grid-auto-flow` CSS
+property. Check [MDN][grid-auto-flow] to fully understand available options.
 
 ## API
 
@@ -255,3 +246,16 @@ Wrapper for content that should span multiple rows or columns.
 | `--rui-Grid__justify-content`                        | Default horizontal alignment of the layout                   |
 | `--rui-Grid__justify-items`                          | Default horizontal alignment of grid items                   |
 | `--rui-Grid__auto-flow`                              | Default auto-flow algorithm                                  |
+
+[grid-layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+[grid-template-rows]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+[grid-column-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+[grid-row-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+[grid-auto-flow]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+[aling-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+[align-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+[justify-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+[justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
+[repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
+[minmax]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

package/src/lib/components/{layout/Grid → Grid}/_theme.scss

@@ -1,10 +1,9 @@
-$auto-flow: var(--rui-Grid__auto-flow);
-
 $responsive-properties: (
   columns: var(--rui-Grid__columns),
   column-gap: var(--rui-Grid__column-gap),
   rows: var(--rui-Grid__rows),
   row-gap: var(--rui-Grid__row-gap),
+  auto-flow: var(--rui-Grid__auto-flow),
   align-content: var(--rui-Grid__align-content),
   align-items: var(--rui-Grid__align-items),
   justify-content: var(--rui-Grid__justify-content),

package/src/lib/components/{layout/Grid → Grid}/_tools.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../styles/settings/breakpoints';
-@use '../../../styles/tools/breakpoint';
+@use '../../styles/settings/breakpoints';
+@use '../../styles/tools/breakpoint';
 
 // Generate fallback cascade using `var()` function fallbacks.
 //

package/src/lib/components/Link/Link.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import transferProps from '../../utils/transferProps';
+import { withProviderContext } from '../../provider';
+import styles from './Link.scss';
+
+export const Link = ({
+  children,
+  href,
+  id,
+  ...restProps
+}) => (
+  <a
+    {...transferProps(restProps)}
+    href={href}
+    className={styles.root}
+    id={id}
+  >
+    {children}
+  </a>
+);
+
+Link.defaultProps = {
+  children: null,
+  id: undefined,
+};
+
+Link.propTypes = {
+  /**
+   * Content of the link.
+   */
+  children: PropTypes.node,
+  /**
+   * Link's `href` attribute.
+   */
+  href: PropTypes.string.isRequired,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
+};
+
+export const LinkWithContext = withProviderContext(Link, 'Link');
+
+export default LinkWithContext;

package/src/lib/components/Link/Link.scss

@@ -0,0 +1,11 @@
+@use 'theme';
+
+.root {
+  text-decoration: theme.$link-text-decoration;
+  color: theme.$link-color;
+
+  &:hover {
+    text-decoration: theme.$link-hover-text-decoration;
+    color: theme.$link-hover-color;
+  }
+}