@react-ui-org/react-ui 0.54.0 → 0.55.0

package/src/components/FileInputField/README.md

@@ -156,10 +156,10 @@ It's possible to disable the whole input.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>`. This enables making the component interactive and
-helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
 ```docoff-react-preview
 <FileInputField
@@ -173,8 +173,10 @@ helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[file] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="file" />` HTML element attributes][file-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -189,6 +191,6 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[file]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[file-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/components/FormLayout/FormLayout.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
-import styles from './FormLayout.scss';
+import styles from './FormLayout.module.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
 

package/src/components/FormLayout/{FormLayout.scss → FormLayout.module.scss}

@@ -18,41 +18,43 @@
 @use "../../styles/tools/spacing";
 @use "theme";
 
-.root {
-    --rui-local-field-width: 1fr;
+@layer components.form-layout {
+    .root {
+        --rui-local-field-width: 1fr;
 
-    @include spacing.bottom(layouts);
-}
+        @include spacing.bottom(layouts);
+    }
 
-.isRootFieldLayoutVertical,
-.isRootFieldLayoutHorizontal {
-    display: grid;
-    grid-template-columns: var(--rui-local-field-width);
-    grid-row-gap: theme.$row-gap;
-}
+    .isRootFieldLayoutVertical,
+    .isRootFieldLayoutHorizontal {
+        display: grid;
+        grid-template-columns: var(--rui-local-field-width);
+        grid-row-gap: theme.$row-gap;
+    }
 
-.isRootFieldLayoutHorizontal {
-    @include breakpoint.up(forms.$horizontal-breakpoint) {
-        grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
+    .isRootFieldLayoutHorizontal {
+        @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.
-}
+    .hasRootLabelWidthDefault {
+        --rui-local-label-width: #{theme.$horizontal-label-width}; // 1., 2.
+    }
 
-.hasRootLabelWidthAuto {
-    --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
-}
+    .hasRootLabelWidthAuto {
+        --rui-local-label-width: #{theme.$horizontal-label-width-auto}; // 4.
+    }
 
-.hasRootLabelWidthLimited {
-    --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
-}
+    .hasRootLabelWidthLimited {
+        --rui-local-label-width: #{theme.$horizontal-label-width-limited}; // 4.
+    }
 
-.hasRootLabelWidthCustom {
-    --rui-local-label-width: var(--rui-custom-label-width); // 3.
-}
+    .hasRootLabelWidthCustom {
+        --rui-local-label-width: var(--rui-custom-label-width); // 3.
+    }
 
-.isRootAutoWidth {
-    --rui-local-field-width: min-content;
+    .isRootAutoWidth {
+        --rui-local-field-width: min-content;
+    }
 }

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -7,7 +7,7 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
-import styles from './FormLayoutCustomField.scss';
+import styles from './FormLayoutCustomField.module.scss';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {

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

@@ -0,0 +1,65 @@
+@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";
+
+@layer components.form-layout {
+    // Foundation
+    .root {
+        @include box-field-layout.in-form-layout();
+        @include variants.visual(custom);
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical();
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootLayoutVertical .field,
+    .isRootLayoutHorizontal .field {
+        width: auto;
+    }
+
+    .isRootFullWidth .field {
+        justify-self: stretch;
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+}

package/src/components/FormLayout/README.md

@@ -416,13 +416,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -453,10 +455,10 @@ 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
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [fragments]: https://reactjs.org/docs/fragments.html
+[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [rui-232]: https://github.com/react-ui-org/react-ui/issues/232
 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid

package/src/components/Grid/Grid.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
-import styles from './Grid.scss';
+import styles from './Grid.module.scss';
 
 const SPACING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7];
 

package/src/components/Grid/Grid.module.scss

@@ -0,0 +1,66 @@
+// 1. Read value of `--rui-local-<PROPERTY>-<BREAKPOINT>` that might have been defined by
+//    JavaScript and assign it to `--rui-local-<PROPERTY>` used in 2.
+//
+//    Fallback cascade containing fallbacks for all previous breakpoints recursively is included
+//    using CSS custom property fallback mechanism like this:
+//
+//    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, <INIT. FALLBACK>))`
+//
+//    … etc, up to the largest breakpoint.
+//
+//    A media query is then created for each breakpoint (with exception of `xs` which doesn't need a
+//    media query) and a corresponding responsive custom property variant is assigned to
+//    `--rui-local-<PROPERTY>` that is used later in CSS, see 2.
+//
+//    Example for `sm` breakpoint:
+//
+//    `--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.
+
+@use "sass:map";
+@use "../../styles/tools/spacing";
+@use "settings";
+@use "tools";
+
+@layer components.grid {
+    .root {
+        @include tools.assign-responsive-custom-properties(settings.$grid-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); // 2.
+        grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
+        align-content: var(--rui-local-align-content); // 2.
+        align-items: var(--rui-local-align-items); // 2.
+        justify-content: var(--rui-local-justify-content); // 2.
+        justify-items: var(--rui-local-justify-items); // 2.
+    }
+
+    // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
+    .root > * {
+        margin-block: 0;
+    }
+
+    .span {
+        @include tools.assign-responsive-custom-properties(settings.$grid-span-responsive-properties); // 1.
+
+        grid-column: span var(--rui-local-column-span); // 2.
+        grid-row: span var(--rui-local-row-span); // 2.
+    }
+
+    // stylelint-disable selector-no-qualifying-type
+    dl.root,
+    ol.root,
+    ul.root {
+        padding-left: 0;
+        margin-left: 0;
+        list-style: none;
+    }
+
+    // stylelint-enable selector-no-qualifying-type
+}

package/src/components/Grid/GridSpan.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
-import styles from './Grid.scss';
+import styles from './Grid.module.scss';
 
 export const GridSpan = ({
   children,

package/src/components/Grid/README.md

@@ -248,13 +248,16 @@ property. Check [MDN][grid-auto-flow] to fully understand available options.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the HTML element
-of your choice provided by `tag`, which is `<div>` by default. It enables making
-the component interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root HTML element
+of your choice provided by `tag`, which is `<div>` by default. This enables
+making the component interactive and helps to improve its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element or [any other][all-html-elements] element of your choice.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [any other HTML element][all-html-elements]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -276,6 +279,6 @@ Wrapper for content that should span multiple rows or columns.
 [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
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [all-html-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

package/src/components/InputGroup/InputGroup.jsx

@@ -13,7 +13,7 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from './InputGroupContext';
-import styles from './InputGroup.scss';
+import styles from './InputGroup.module.scss';
 
 export const InputGroup = ({
   children,

package/src/components/InputGroup/InputGroup.module.scss

@@ -0,0 +1,93 @@
+// 1. The class name is intentionally singular because it's targeted by other mixins too.
+// 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
+// 3. Prevent individual inputs from overlapping inside narrow containers.
+// 4. Legends are tricky to style, let's use a `div` instead.
+//    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
+
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "theme";
+
+@layer components.input-group {
+    .root {
+        @include foundation.root();
+        @include foundation.fieldset();
+    }
+
+    // 4.
+    .legend {
+        @include accessibility.hide-text();
+    }
+
+    // 4.
+    .label {
+        @include foundation.label();
+    }
+
+    .inputGroup {
+        --rui-local-inner-border-radius: #{theme.$inner-border-radius};
+
+        display: flex; // 2.
+        gap: theme.$gap;
+    }
+
+    // 1.
+    .validationText {
+        @include reset.list();
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical();
+    }
+
+    .isRootLayoutVertical .field,
+    .isRootLayoutHorizontal .field {
+        max-width: none; // 3.
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout($is-fieldset: true);
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small, $has-input: false);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium, $has-input: false);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large, $has-input: false);
+    }
+}

package/src/components/InputGroup/README.md

@@ -250,13 +250,15 @@ for the underlying `<fieldset>` element.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<div>` HTML
-element which wraps elements to be grouped. This enables making the component
-interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<fieldset>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[fieldset][fieldset-attributes] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<fieldset>` HTML element attributes][fieldset-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -269,7 +271,7 @@ interactive and helps to improve its accessibility.
 | `--rui-InputGroup__gap`                                            | Gap between elements                           |
 | `--rui-InputGroup__inner-border-radius`                            | Inner border radius of elements                |
 
-[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
-[React synthetic events]: https://reactjs.org/docs/events.html
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Modal/Modal.jsx

@@ -8,7 +8,7 @@ import { getPositionClassName } from './_helpers/getPositionClassName';
 import { getSizeClassName } from './_helpers/getSizeClassName';
 import { useModalFocus } from './_hooks/useModalFocus';
 import { useModalScrollPrevention } from './_hooks/useModalScrollPrevention';
-import styles from './Modal.scss';
+import styles from './Modal.module.scss';
 
 const preRender = (
   children,

package/src/components/Modal/Modal.module.scss

@@ -0,0 +1,80 @@
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+@use "settings";
+@use "theme";
+
+@layer components.modal {
+    .root {
+        --rui-local-outer-spacing: #{theme.$outer-spacing-xs};
+        --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
+        --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
+
+        position: fixed;
+        left: 50%;
+        z-index: settings.$z-index;
+        display: flex;
+        flex-direction: column;
+        max-width: var(--rui-local-max-width);
+        max-height: var(--rui-local-max-height);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        border-radius: settings.$border-radius;
+        background: theme.$background;
+        box-shadow: theme.$box-shadow;
+        transform: translateX(-50%);
+
+        @include breakpoint.up(sm) {
+            --rui-local-outer-spacing: #{theme.$outer-spacing-sm};
+        }
+    }
+
+    .backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: settings.$backdrop-z-index;
+        width: 100vw;
+        height: 100vh;
+        background: theme.$backdrop-background;
+    }
+
+    .isRootSizeSmall {
+        width: map.get(theme.$sizes, small, width);
+    }
+
+    .isRootSizeMedium {
+        width: map.get(theme.$sizes, medium, width);
+    }
+
+    .isRootSizeLarge {
+        width: map.get(theme.$sizes, large, width);
+    }
+
+    .isRootSizeFullscreen {
+        width: map.get(theme.$sizes, fullscreen, width);
+        height: map.get(theme.$sizes, fullscreen, height);
+    }
+
+    .isRootSizeFullscreen .content {
+        height: 100%;
+    }
+
+    .isRootSizeAuto {
+        width: auto;
+        min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)});
+        max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)});
+    }
+
+    .isRootPositionCenter {
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .isRootPositionTop {
+        top: var(--rui-local-outer-spacing);
+    }
+}

package/src/components/Modal/ModalBody.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
-import styles from './ModalBody.scss';
+import styles from './ModalBody.module.scss';
 
 export const ModalBody = ({
   children,

package/src/components/Modal/ModalBody.module.scss

@@ -0,0 +1,20 @@
+@layer components.modal {
+    .root {
+        flex: 1 1 auto;
+    }
+
+    .isRootScrollingAuto,
+    .isRootScrollingCustom {
+        min-height: 0;
+    }
+
+    .isRootScrollingAuto {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    .isRootScrollingCustom {
+        display: flex;
+        flex-direction: column;
+    }
+}

package/src/components/Modal/ModalCloseButton.jsx

@@ -5,7 +5,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalCloseButton.scss';
+import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {
   const {

package/src/components/Modal/ModalCloseButton.module.scss

@@ -0,0 +1,20 @@
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+
+@layer components.modal {
+    .root {
+        @include reset.button();
+        @include accessibility.min-tap-target();
+
+        font-size: map.get(typography.$font-size-values, 4);
+        line-height: 1;
+        color: inherit;
+
+        &:disabled {
+            cursor: var(--rui-cursor-not-allowed);
+        }
+    }
+}

package/src/components/Modal/ModalContent.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalContent.scss';
+import styles from './ModalContent.module.scss';
 
 export const ModalContent = ({
   children,

package/src/components/Modal/ModalContent.module.scss

@@ -0,0 +1,7 @@
+@use "theme";
+
+@layer components.modal {
+    .root {
+        padding: theme.$padding-y theme.$padding-x;
+    }
+}