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

package/src/lib/components/FileInputField/FileInputField.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
 import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './FileInputField.scss';
@@ -26,25 +27,25 @@ export const FileInputField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        context ? styles.isRootInFormLayout : '',
+        fullWidth && styles.isRootFullWidth,
+        context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
       <div
-        className={[
+        className={classNames(
           styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
+          !isLabelVisible && styles.isLabelHidden,
+        )}
         id={id && `${id}__labelText`}
       >
         {label}

package/src/lib/components/FileInputField/FileInputField.scss

@@ -1,67 +1,67 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include accessibility.focus-ring();
+    @include accessibility.focus-ring();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }

package/src/lib/components/FormLayout/FormLayout.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.scss';
 
@@ -48,12 +49,12 @@ export const FormLayout = (props) => {
   return (
     <div
       id={id}
-      className={[
+      className={classNames(
         styles.root,
         fieldLayoutClass(fieldLayout),
-        autoWidth ? styles.isRootAutoWidth : '',
-        fieldLayout === 'horizontal' ? labelWidthClass(labelWidth) : '',
-      ].join(' ')}
+        autoWidth && styles.isRootAutoWidth,
+        fieldLayout === 'horizontal' && labelWidthClass(labelWidth),
+      )}
       {...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}
     >
       <FormLayoutContext.Provider

package/src/lib/components/FormLayout/FormLayout.scss

@@ -13,46 +13,46 @@
 //    (a global default which can be customised per use).
 //    https://github.com/react-ui-org/react-ui/issues/232
 
-@use '../../styles/settings/forms';
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/settings/forms";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .root {
-  --rui-local-field-width: 1fr;
+    --rui-local-field-width: 1fr;
 
-  @include spacing.bottom(layouts);
+    @include spacing.bottom(layouts);
 }
 
 .rootFieldLayoutVertical,
 .rootFieldLayoutHorizontal {
-  display: grid;
-  grid-template-columns: var(--rui-local-field-width);
-  grid-row-gap: theme.$row-gap;
+    display: grid;
+    grid-template-columns: var(--rui-local-field-width);
+    grid-row-gap: theme.$row-gap;
 }
 
 .rootFieldLayoutHorizontal {
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
-  }
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
+    }
 }
 
 .hasRootLabelWidthDefault {
-  --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
+    --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
 }
 
 .hasRootLabelWidthAuto {
-  --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
+    --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
 }
 
 .hasRootLabelWidthLimited {
-  --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
+    --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
 }
 
 .hasRootLabelWidthCustom {
-  --rui-local-label-width: var(--rui-custom-label-width); // 3.
+    --rui-local-label-width: var(--rui-custom-label-width); // 3.
 }
 
 .isRootAutoWidth {
-  --rui-local-field-width: min-content;
+    --rui-local-field-width: min-content;
 }

package/src/lib/components/FormLayout/FormLayoutCustomField.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
 import { withProviderContext } from '../../provider';
-import styles from './FormLayoutCustomField.scss';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { FormLayoutContext } from './FormLayoutContext';
+import styles from './FormLayoutCustomField.scss';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {
@@ -49,15 +50,15 @@ export const FormLayoutCustomField = ({
   return (
     <div
       id={id}
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
+        fullWidth && styles.isRootFullWidth,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootSizeClassName(innerFieldSize, styles),
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
     >
       {renderLabel(id, label, labelForId)}
       <div

package/src/lib/components/FormLayout/FormLayoutCustomField.scss

@@ -1,63 +1,63 @@
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/box-field-sizes';
-@use '../../styles/tools/form-fields/variants';
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/variants";
 
 // Foundation
 .root {
-  @include box-field-layout.in-form-layout();
-  @include variants.visual(custom);
+    @include box-field-layout.in-form-layout();
+    @include variants.visual(custom);
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .rootLayoutVertical .field,
 .rootLayoutHorizontal .field {
-  width: auto;
+    width: auto;
 }
 
 .isRootFullWidth .field {
-  justify-self: stretch;
+    justify-self: stretch;
 }
 
 // Sizes
 .rootSizeSmall {
-  @include box-field-sizes.size(small);
+    @include box-field-sizes.size(small);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium);
+    @include box-field-sizes.size(medium);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large);
+    @include box-field-sizes.size(large);
 }

package/src/lib/components/FormLayout/README.mdx

@@ -22,7 +22,6 @@ 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'
 import { FormLayout } from './FormLayout'
@@ -51,13 +50,11 @@ See [API](#api) for all available options.
 Since all form fields in React UI are styled as inline blocks, they **queue up
 one after another in a row by default.** The FormLayout component is there to
 make building **vertical and horizontal forms** easy. It uses the right tool for
-the job: the
-[CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).
+the job: the [CSS grid layout][grid].
 
 - Put **only form field components** from React UI inside the FormLayout and
-  make sure they are **direct descendants** of it (React
-  [fragments](https://reactjs.org/docs/fragments.html)
-  are supported!). All React UI form components are ready for this use case and
+  make sure they are **direct descendants** of it (React [fragments] 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/checkbox-field),
@@ -73,10 +70,8 @@ the job: the
 
 👉 For usage in auto-width Modal, you may need to turn on the `autoWidth` option
 for your FormLayout. This prevents FormLayout from unexpectedly growing in
-browsers that
-[don't support](https://github.com/react-ui-org/react-ui/issues/232)
-[CSS subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
-in cases when there are longer validation messages or help texts.
+browsers that [don't support][rui-232] [CSS subgrid][subgrid] in cases when
+there are longer validation messages or help texts.
 
 ## Vertical Layout
 
@@ -217,29 +212,9 @@ work together yet 🎩.
 CheckboxField and Toggle always display their labels after inputs inside
 FormLayout. In other words, their labels never appear in a column with other
 fields' labels even when they have `labelPosition` set to `before`. This feature
-[will be implemented](https://github.com/react-ui-org/react-ui/issues/232)
-once
-[CSS subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
-is fully supported in
+[will be implemented][rui-232] once [CSS subgrid][subgrid] is fully supported in
 [browsers that we support](/getting-started/browsers-and-devices).
 
-## Alignment
-
-To align whole FormLayout to center of a container, simply wrap it with the
-[Center](/components/center) layout.
-
-<Playground>
-  <Placeholder bordered height="24rem">
-    <Center>
-      <FormLayout autoWidth>
-        <TextField label="A form element" />
-        <TextField label="Another form element" />
-        <TextField label="Yet another one" />
-      </FormLayout>
-    </Center>
-  </Placeholder>
-</Playground>
-
 ## Custom Fields
 
 You can even place any content you need into the FormLayout — just wrap it with
@@ -267,11 +242,10 @@ as API options as such are **not** inherited.
 
 If you are in a situation with one or more box form fields inside your
 FormLayoutCustomField, you may want to have its label aligned with the fields
-inside. Since it's
-[not quite possible to do this automatically](https://github.com/react-ui-org/react-ui/issues/265)
-due to limited browser support, there is `innerFieldSize` option which accepts
-any of existing box field sizes (small, medium, or large) and is intended right
-for this task.
+inside. Since it's [not quite possible to do this automatically][rui-265] due to
+limited browser support, there is `innerFieldSize` option which accepts any of
+existing box field sizes (small, medium, or large) and is intended right for
+this task.
 
 <Playground>
   <FormLayout fieldLayout="horizontal" labelWidth="auto">
@@ -493,3 +467,9 @@ FormLayoutCustomField can be styled using a small subset of
 |------------------------------------------------------|--------------------------------------------------------------|
 | `--rui-FormField--custom--default__surrounding-text-color` | Custom field label color in default state              |
 | `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state       |
+
+[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
+[fragments]: https://reactjs.org/docs/fragments.html
+[rui-232]: https://github.com/react-ui-org/react-ui/issues/232
+[rui-265]: https://github.com/react-ui-org/react-ui/issues/265

package/src/lib/components/Grid/Grid.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
-import { generateResponsiveCustomProperties } from './helpers/generateResponsiveCustomProperties';
+import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
 export const Grid = ({

package/src/lib/components/Grid/Grid.scss

@@ -6,7 +6,7 @@
 //
 //    Fallback for `xs` breakpoint: `<INITIAL FALLBACK>`
 //    Fallback for `sm` breakpoint: `var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>)`
-//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
+//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INIT. FALLBACK>))`
 //
 //    … etc, up to the largest breakpoint.
 //
@@ -20,45 +20,43 @@
 //
 // 2. Apply custom property value that is defined within current breakpoint, see 1.
 
-@use 'sass:map';
-@use '../../styles/tools/spacing';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "../../styles/tools/spacing";
+@use "theme";
+@use "tools";
 
 .root {
-  @include tools.assign-responsive-custom-properties(theme.$responsive-properties); // 1.
-  @include spacing.bottom(layouts);
-
-  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, #{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.
-  justify-content: var(--rui-local-justify-content, #{map.get(theme.$responsive-properties, justify-content)}); // 2.
-  justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2.
+    @include tools.assign-responsive-custom-properties(theme.$responsive-properties); // 1.
+    @include spacing.bottom(layouts);
+
+    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, #{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.
+    justify-content: var(--rui-local-justify-content, #{map.get(theme.$responsive-properties, justify-content)}); // 2.
+    justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2.
 }
 
 .span {
-  $responsive-properties: (
-    column-span: 1,
-    row-span: 1,
-  );
+    $responsive-properties: (
+        column-span: 1,
+        row-span: 1,
+    );
 
-  @include tools.assign-responsive-custom-properties($responsive-properties); // 1.
+    @include tools.assign-responsive-custom-properties($responsive-properties); // 1.
 
-  grid-column: span var(--rui-local-column-span, 1); // 2.
-  grid-row: span var(--rui-local-row-span, 1); // 2.
+    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 */
-
+// stylelint-disable selector-no-qualifying-type
 dl.root,
 ol.root,
 ul.root {
-  padding-left: 0;
-  margin-left: 0;
+    padding-left: 0;
+    margin-left: 0;
 }
-
-/* stylelint-enable selector-no-qualifying-type */
+// stylelint-enable selector-no-qualifying-type

package/src/lib/components/Grid/GridSpan.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
-import { generateResponsiveCustomProperties } from './helpers/generateResponsiveCustomProperties';
+import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
 export const GridSpan = ({

package/src/lib/components/Grid/{helpers → _helpers}/generateResponsiveCustomProperties.js

@@ -12,5 +12,3 @@ export const generateResponsiveCustomProperties = (prop, infix) => {
     [`--rui-local-${infix}-${breakpoint}`]: prop[breakpoint],
   }), {});
 };
-
-export default generateResponsiveCustomProperties;

package/src/lib/components/Grid/_theme.scss

@@ -1,11 +1,11 @@
 $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),
-  justify-items: var(--rui-Grid__justify-items),
+    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),
+    justify-items: var(--rui-Grid__justify-items),
 );

package/src/lib/components/Grid/_tools.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
-@use '../../styles/settings/breakpoints';
-@use '../../styles/tools/breakpoint';
+@use "sass:map";
+@use "../../styles/settings/breakpoints";
+@use "../../styles/tools/breakpoint";
 
 // Generate fallback cascade using `var()` function fallbacks.
 //
@@ -8,15 +8,15 @@
 // $initial-fallback: <string> Initial fallback value
 // $current-breakpoint: <one of $breakpoint-values> Generate cascade for breakpoints smaller than this one
 @function _generate-custom-property-fallback-cascade($property-name, $initial-fallback, $current-breakpoint) {
-  $fallback-cascade: $initial-fallback;
+    $fallback-cascade: $initial-fallback;
 
-  @each $breakpoint in map.keys(breakpoints.$values) {
-    @if $breakpoint == $current-breakpoint {
-      @return $fallback-cascade;
-    }
+    @each $breakpoint in map.keys(breakpoints.$values) {
+        @if $breakpoint == $current-breakpoint {
+            @return $fallback-cascade;
+        }
 
-    $fallback-cascade: var(--rui-local-#{$property-name}-#{$breakpoint}, $fallback-cascade);
-  }
+        $fallback-cascade: var(--rui-local-#{$property-name}-#{$breakpoint}, $fallback-cascade);
+    }
 }
 
 // Read custom properties within a given breakpoint and assign them to expected output custom
@@ -24,15 +24,15 @@
 //
 // $properties: <map of <<property name>: <initial fallback value>> pairs>
 @mixin assign-responsive-custom-properties($properties) {
-  @each $breakpoint in map.keys(breakpoints.$values) {
-    @include breakpoint.up($breakpoint) {
-      @each $property-name, $initial-fallback in $properties {
-        --rui-local-#{$property-name}:
-          var(
-            --rui-local-#{$property-name}-#{$breakpoint},
-            #{_generate-custom-property-fallback-cascade($property-name, $initial-fallback, $breakpoint)}
-          );
-      }
+    @each $breakpoint in map.keys(breakpoints.$values) {
+        @include breakpoint.up($breakpoint) {
+            @each $property-name, $initial-fallback in $properties {
+                --rui-local-#{$property-name}:
+                    var(
+                        --rui-local-#{$property-name}-#{$breakpoint},
+                        #{_generate-custom-property-fallback-cascade($property-name, $initial-fallback, $breakpoint)}
+                    );
+            }
+        }
     }
-  }
 }

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import transferProps from '../../utils/transferProps';
 import { withProviderContext } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './Link.scss';
 
 export const Link = ({