@openedx/paragon 22.12.0 → 22.14.0

package/scss/core/_variables.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -18,7 +21,7 @@ $gray-900: #212529 !default;
 $black:    #000000 !default;
 
 $grays: () !default;
-$grays: map-merge(
+$grays: map.merge(
   (
     "100": $gray-100,
     "200": $gray-200,
@@ -40,7 +43,7 @@ $green: #178253 !default;
 $teal: #006DAA !default;
 
 $colors: () !default;
-$colors: map-merge(
+$colors: map.merge(
   (
     "blue": $blue,
     "green": $green,
@@ -67,7 +70,7 @@ $accent-a: #00BBF9 !default;
 $accent-b: #FFEE88 !default;
 
 $theme-colors: () !default;
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   (
     "primary":    $primary,
     "secondary":  $secondary,
@@ -85,99 +88,99 @@ $theme-colors: map-merge(
   $theme-colors
 );
 
-$primary-100: mix(white, $primary, 94%) !default;
-$primary-200: mix(white, $primary, 75%) !default;
-$primary-300: mix(white, $primary, 50%) !default;
-$primary-400: mix(white, $primary, 25%) !default;
+$primary-100: color.mix(white, $primary, 94%) !default;
+$primary-200: color.mix(white, $primary, 75%) !default;
+$primary-300: color.mix(white, $primary, 50%) !default;
+$primary-400: color.mix(white, $primary, 25%) !default;
 $primary-500: $primary !default;
-$primary-600: mix(black, $primary, 10%) !default;
-$primary-700: mix(black, $primary, 20%) !default;
-$primary-800: mix(black, $primary, 25%) !default;
-$primary-900: mix(black, $primary, 30%) !default;
-
-$secondary-100: mix(white, $secondary, 94%) !default;
-$secondary-200: mix(white, $secondary, 75%) !default;
-$secondary-300: mix(white, $secondary, 50%) !default;
-$secondary-400: mix(white, $secondary, 25%) !default;
+$primary-600: color.mix(black, $primary, 10%) !default;
+$primary-700: color.mix(black, $primary, 20%) !default;
+$primary-800: color.mix(black, $primary, 25%) !default;
+$primary-900: color.mix(black, $primary, 30%) !default;
+
+$secondary-100: color.mix(white, $secondary, 94%) !default;
+$secondary-200: color.mix(white, $secondary, 75%) !default;
+$secondary-300: color.mix(white, $secondary, 50%) !default;
+$secondary-400: color.mix(white, $secondary, 25%) !default;
 $secondary-500: $secondary !default;
-$secondary-600: mix(black, $secondary, 10%) !default;
-$secondary-700: mix(black, $secondary, 20%) !default;
-$secondary-800: mix(black, $secondary, 25%) !default;
-$secondary-900: mix(black, $secondary, 30%) !default;
-
-$brand-100: mix(white, $brand, 94%) !default;
-$brand-200: mix(white, $brand, 75%) !default;
-$brand-300: mix(white, $brand, 50%) !default;
-$brand-400: mix(white, $brand, 25%) !default;
+$secondary-600: color.mix(black, $secondary, 10%) !default;
+$secondary-700: color.mix(black, $secondary, 20%) !default;
+$secondary-800: color.mix(black, $secondary, 25%) !default;
+$secondary-900: color.mix(black, $secondary, 30%) !default;
+
+$brand-100: color.mix(white, $brand, 94%) !default;
+$brand-200: color.mix(white, $brand, 75%) !default;
+$brand-300: color.mix(white, $brand, 50%) !default;
+$brand-400: color.mix(white, $brand, 25%) !default;
 $brand-500: $brand !default;
-$brand-600: mix(black, $brand, 10%) !default;
-$brand-700: mix(black, $brand, 20%) !default;
-$brand-800: mix(black, $brand, 25%) !default;
-$brand-900: mix(black, $brand, 30%) !default;
-
-$success-100: mix(white, $success, 94%) !default;
-$success-200: mix(white, $success, 75%) !default;
-$success-300: mix(white, $success, 50%) !default;
-$success-400: mix(white, $success, 25%) !default;
+$brand-600: color.mix(black, $brand, 10%) !default;
+$brand-700: color.mix(black, $brand, 20%) !default;
+$brand-800: color.mix(black, $brand, 25%) !default;
+$brand-900: color.mix(black, $brand, 30%) !default;
+
+$success-100: color.mix(white, $success, 94%) !default;
+$success-200: color.mix(white, $success, 75%) !default;
+$success-300: color.mix(white, $success, 50%) !default;
+$success-400: color.mix(white, $success, 25%) !default;
 $success-500: $success !default;
-$success-600: mix(black, $success, 10%) !default;
-$success-700: mix(black, $success, 20%) !default;
-$success-800: mix(black, $success, 25%) !default;
-$success-900: mix(black, $success, 30%) !default;
-
-$info-100: mix(white, $info, 94%) !default;
-$info-200: mix(white, $info, 75%) !default;
-$info-300: mix(white, $info, 50%) !default;
-$info-400: mix(white, $info, 25%) !default;
+$success-600: color.mix(black, $success, 10%) !default;
+$success-700: color.mix(black, $success, 20%) !default;
+$success-800: color.mix(black, $success, 25%) !default;
+$success-900: color.mix(black, $success, 30%) !default;
+
+$info-100: color.mix(white, $info, 94%) !default;
+$info-200: color.mix(white, $info, 75%) !default;
+$info-300: color.mix(white, $info, 50%) !default;
+$info-400: color.mix(white, $info, 25%) !default;
 $info-500: $info !default;
-$info-600: mix(black, $info, 10%) !default;
-$info-700: mix(black, $info, 20%) !default;
-$info-800: mix(black, $info, 25%) !default;
-$info-900: mix(black, $info, 30%) !default;
-
-$warning-100: mix(white, $warning, 94%) !default;
-$warning-200: mix(white, $warning, 75%) !default;
-$warning-300: mix(white, $warning, 50%) !default;
-$warning-400: mix(white, $warning, 25%) !default;
+$info-600: color.mix(black, $info, 10%) !default;
+$info-700: color.mix(black, $info, 20%) !default;
+$info-800: color.mix(black, $info, 25%) !default;
+$info-900: color.mix(black, $info, 30%) !default;
+
+$warning-100: color.mix(white, $warning, 94%) !default;
+$warning-200: color.mix(white, $warning, 75%) !default;
+$warning-300: color.mix(white, $warning, 50%) !default;
+$warning-400: color.mix(white, $warning, 25%) !default;
 $warning-500: $warning !default;
-$warning-600: mix(black, $warning, 10%) !default;
-$warning-700: mix(black, $warning, 20%) !default;
-$warning-800: mix(black, $warning, 25%) !default;
-$warning-900: mix(black, $warning, 30%) !default;
-
-$danger-100: mix(white, $danger, 94%) !default;
-$danger-200: mix(white, $danger, 75%) !default;
-$danger-300: mix(white, $danger, 50%) !default;
-$danger-400: mix(white, $danger, 25%) !default;
+$warning-600: color.mix(black, $warning, 10%) !default;
+$warning-700: color.mix(black, $warning, 20%) !default;
+$warning-800: color.mix(black, $warning, 25%) !default;
+$warning-900: color.mix(black, $warning, 30%) !default;
+
+$danger-100: color.mix(white, $danger, 94%) !default;
+$danger-200: color.mix(white, $danger, 75%) !default;
+$danger-300: color.mix(white, $danger, 50%) !default;
+$danger-400: color.mix(white, $danger, 25%) !default;
 $danger-500: $danger !default;
-$danger-600: mix(black, $danger, 10%) !default;
-$danger-700: mix(black, $danger, 20%) !default;
-$danger-800: mix(black, $danger, 25%) !default;
-$danger-900: mix(black, $danger, 30%) !default;
-
-$light-100: mix(white, $light, 94%) !default;
-$light-200: mix(white, $light, 75%) !default;
-$light-300: mix(white, $light, 50%) !default;
-$light-400: mix(white, $light, 25%) !default;
+$danger-600: color.mix(black, $danger, 10%) !default;
+$danger-700: color.mix(black, $danger, 20%) !default;
+$danger-800: color.mix(black, $danger, 25%) !default;
+$danger-900: color.mix(black, $danger, 30%) !default;
+
+$light-100: color.mix(white, $light, 94%) !default;
+$light-200: color.mix(white, $light, 75%) !default;
+$light-300: color.mix(white, $light, 50%) !default;
+$light-400: color.mix(white, $light, 25%) !default;
 $light-500: $light !default;
-$light-600: mix(black, $light, 10%) !default;
-$light-700: mix(black, $light, 20%) !default;
-$light-800: mix(black, $light, 25%) !default;
-$light-900: mix(black, $light, 30%) !default;
-
-$dark-100: mix(white, $dark, 94%) !default;
-$dark-200: mix(white, $dark, 75%) !default;
-$dark-300: mix(white, $dark, 50%) !default;
-$dark-400: mix(white, $dark, 25%) !default;
+$light-600: color.mix(black, $light, 10%) !default;
+$light-700: color.mix(black, $light, 20%) !default;
+$light-800: color.mix(black, $light, 25%) !default;
+$light-900: color.mix(black, $light, 30%) !default;
+
+$dark-100: color.mix(white, $dark, 94%) !default;
+$dark-200: color.mix(white, $dark, 75%) !default;
+$dark-300: color.mix(white, $dark, 50%) !default;
+$dark-400: color.mix(white, $dark, 25%) !default;
 $dark-500: $dark !default;
-$dark-600: mix(black, $dark, 10%) !default;
-$dark-700: mix(black, $dark, 20%) !default;
-$dark-800: mix(black, $dark, 25%) !default;
-$dark-900: mix(black, $dark, 30%) !default;
+$dark-600: color.mix(black, $dark, 10%) !default;
+$dark-700: color.mix(black, $dark, 20%) !default;
+$dark-800: color.mix(black, $dark, 25%) !default;
+$dark-900: color.mix(black, $dark, 30%) !default;
 
 $theme-color-levels: () !default;
 
-$theme-color-levels: map-merge(
+$theme-color-levels: map.merge(
   (
     "gray-100": $gray-100,
     "gray-200": $gray-200,
@@ -275,7 +278,7 @@ $theme-color-levels: map-merge(
 
 $element-color-levels: () !default;
 
-$element-color-levels: map-merge(
+$element-color-levels: map.merge(
   (
     "background": 100,
     "disabled-border": 100,
@@ -341,7 +344,7 @@ $enable-deprecation-messages:                 true !default;
 $spacer: 1rem !default;
 $spacers: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$spacers: map-merge(
+$spacers: map.merge(
   (
     0: 0,
     1: ($spacer * .25),
@@ -362,7 +365,7 @@ $spacers: map-merge(
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$sizes: map-merge(
+$sizes: map.merge(
   (
     25: 25%,
     50: 50%,
@@ -386,34 +389,34 @@ $body-color:                $gray-700 !default;
 
 $link-color:                              $info-500 !default;
 $link-decoration:                         none !default;
-$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-color:                        color.adjust($link-color, $lightness: -15%) !default;
 $link-hover-decoration:                   underline !default;
 $inline-link-color:                       $info-500 !default;
 $inline-link-decoration:                  underline !default;
 $inline-link-decoration-color:            rgba($inline-link-color, .3) !default;
-$inline-link-hover-color:                 darken($inline-link-color, 15%) !default;
+$inline-link-hover-color:                 color.adjust($inline-link-color, $lightness: -15%) !default;
 $inline-link-hover-decoration:            underline !default;
 $inline-link-hover-decoration-color:      rgba($inline-link-hover-color, 1) !default;
 
 $muted-link-color:                              $primary-500 !default;
 $muted-link-decoration:                         none !default;
-$muted-link-hover-color:                        darken($muted-link-color, 15%) !default;
+$muted-link-hover-color:                        color.adjust($muted-link-color, $lightness: -15%) !default;
 $muted-link-hover-decoration:                   underline !default;
 $muted-inline-link-color:                       $primary-500 !default;
 $muted-inline-link-decoration:                  underline !default;
 $muted-inline-link-decoration-color:            rgba($muted-inline-link-color, .3) !default;
-$muted-inline-link-hover-color:                 darken($muted-inline-link-color, 15%) !default;
+$muted-inline-link-hover-color:                 color.adjust($muted-inline-link-color, $lightness: -15%) !default;
 $muted-inline-link-hover-decoration:            underline !default;
 $muted-inline-link-hover-decoration-color:      rgba($muted-inline-link-hover-color, 1) !default;
 
 $brand-link-color:                              $brand-500 !default;
 $brand-link-decoration:                         none !default;
-$brand-link-hover-color:                        darken($brand-link-color, 15%) !default;
+$brand-link-hover-color:                        color.adjust($brand-link-color, $lightness: -15%) !default;
 $brand-link-hover-decoration:                   underline !default;
 $brand-inline-link-color:                       $brand-500 !default;
 $brand-inline-link-decoration:                  underline !default;
 $brand-inline-link-decoration-color:            rgba($brand-inline-link-color, .3) !default;
-$brand-inline-link-hover-color:                 darken($brand-inline-link-color, 15%) !default;
+$brand-inline-link-hover-color:                 color.adjust($brand-inline-link-color, $lightness: -15%) !default;
 $brand-inline-link-hover-decoration:            underline !default;
 $brand-inline-link-hover-decoration-color:      rgba($brand-inline-link-hover-color, 1) !default;
 
@@ -674,7 +677,7 @@ $transition-collapse-width:   width .35s ease !default;
 
 $embed-responsive-aspect-ratios: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$embed-responsive-aspect-ratios: join(
+$embed-responsive-aspect-ratios: list.join(
   (
     (21 9),
     (16 9),
@@ -847,7 +850,7 @@ $user-selects: all, auto, none !default;
 // Printing
 
 $print-page-size:                   a3 !default;
-$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
+$print-body-min-width:              map.get($grid-breakpoints, "lg") !default;
 
 // List group
 

package/src/Alert/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Alerts
 //
 // Define alert colors, border radius, and padding.
@@ -21,4 +22,4 @@ $alert-font-size:                   .875rem !default;
 $alert-line-height:                 1.5rem !default;
 $alert-content-color:               $gray-700 !default;
 
-$alert-actions-gap:                 map-get($spacers, 3);
+$alert-actions-gap:                 map.get($spacers, 3);

package/src/Annotation/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 @mixin triangle($color, $direction) {
@@ -66,8 +67,8 @@ $arrow-directions: top, right, bottom, left;
 @each $name, $colors in $annotation-variants {
   @each $direction in $arrow-directions {
     .pgn__annotation-#{$name}-#{$direction} {
-      background-color: map-get($colors, "background-color");
-      color: map-get($colors, "color");
+      background-color: map.get($colors, "background-color");
+      color: map.get($colors, "color");
 
       // set additional margin to arrow side of the Annotation
       margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin;
@@ -85,7 +86,7 @@ $arrow-directions: top, right, bottom, left;
       }
 
       &::after {
-        @include triangle(map-get($colors, "background-color"), $direction);
+        @include triangle(map.get($colors, "background-color"), $direction);
 
         [dir="rtl"] & {
           @if $direction == left {
@@ -94,7 +95,7 @@ $arrow-directions: top, right, bottom, left;
             border-width:
               $annotation-arrow-border-width 0 $annotation-arrow-border-width
               $annotation-arrow-border-width;
-            border-left-color: map-get($colors, "background-color");
+            border-left-color: map.get($colors, "background-color");
           }
 
           @else if $direction == right {
@@ -103,7 +104,7 @@ $arrow-directions: top, right, bottom, left;
             border-width:
               $annotation-arrow-border-width $annotation-arrow-border-width
               $annotation-arrow-border-width 0;
-            border-right-color: map-get($colors, "background-color");
+            border-right-color: map.get($colors, "background-color");
           }
         }
       }

package/src/Breadcrumb/Breadcrumb.test.jsx

@@ -48,7 +48,8 @@ describe('<Breadcrumb />', () => {
     expect(screen.getAllByRole('presentation').length).toBe(2);
   });
 
-  it('fires the passed in click handler', () => {
+  it('fires the passed in click handler', async () => {
+    const user = userEvent.setup();
     const clickHandler = jest.fn();
     render(<Breadcrumb {...baseProps} clickHandler={clickHandler} />);
 
@@ -56,7 +57,7 @@ describe('<Breadcrumb />', () => {
     const links = screen.queryAllByRole('link');
     expect(listItems.length).toBe(baseProps.links.length);
 
-    userEvent.click(links[0]);
+    await user.click(links[0]);
     expect(clickHandler).toHaveBeenCalled();
   });
 

package/src/Bubble/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .pgn__bubble {
@@ -12,8 +13,8 @@
 
   @each $name, $colors in $bubble-variants {
     &.pgn__bubble-#{$name} {
-      background-color: map-get($colors, "background-color");
-      color: map-get($colors, "color");
+      background-color: map.get($colors, "background-color");
+      color: map.get($colors, "color");
     }
   }
 

package/src/Bubble/index.tsx

@@ -38,6 +38,7 @@ const Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({
 
 Bubble.propTypes = {
   /** Specifies contents of the component. */
+  // @ts-ignore
   children: PropTypes.node,
   /** The `Bubble` style variant to use. */
   variant: PropTypes.oneOf(STYLE_VARIANTS),

package/src/Button/deprecated/Button.test.jsx

@@ -14,21 +14,23 @@ describe('<Button />', () => {
     expect(button).toBeInTheDocument();
   });
 
-  it('puts focus on button on click', () => {
+  it('puts focus on button on click', async () => {
+    const user = userEvent.setup();
     const { getByText } = render(<Button {...defaultProps} />);
     const button = getByText(defaultProps.label);
 
     expect(button).not.toHaveFocus();
-    userEvent.click(button);
+    await user.click(button);
     expect(button).toHaveFocus();
   });
 
-  it('calls onClick prop on click', () => {
+  it('calls onClick prop on click', async () => {
+    const user = userEvent.setup();
     const onClickSpy = jest.fn();
     const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
     const button = getByText(defaultProps.label);
 
-    userEvent.click(button);
+    await user.click(button);
     expect(onClickSpy).toHaveBeenCalledTimes(1);
   });
 });

package/src/Button/index.scss

@@ -1,10 +1,11 @@
+@use "sass:color";
 @import "variables";
 @import "~bootstrap/scss/button-group";
 
 @mixin button-variant(
-  $background, $border, $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%), $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background),
+  $background, $border, $hover-background: color.adjust($background, $lightness: -7.5%),
+  $hover-border: color.adjust($border, $lightness: -10%), $active-background: color.adjust($background, $lightness: -10%),
+  $active-border: color.adjust($border, $lightness: -12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background),
   $active-color: color-yiq($active-background)
 ) {
   color: $color;
@@ -36,8 +37,8 @@
     }
   }
 
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
+  &:not(:disabled, .disabled):active,
+  &:not(:disabled, .disabled).active,
   .show > &.dropdown-toggle {
     color: $active-color;
     background-color: $active-background;
@@ -71,8 +72,8 @@
     border-color: $color;
   }
 
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
+  &:not(:disabled, .disabled):active,
+  &:not(:disabled, .disabled).active,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -109,10 +110,10 @@
   border-color: transparent;
   background-color: $background;
 
-  &:not(:disabled):not(.disabled) {
+  &:not(:disabled, .disabled) {
     @include hover {
-      color: darken($color, 7.5%);
-      background-color: darken($background, 7.5%);
+      color: color.adjust($color, $lightness: -7.5%);
+      background-color: color.adjust($background, $lightness: -7.5%);
       border-color: transparent;
     }
   }
@@ -123,10 +124,10 @@
     background-color: $background;
   }
 
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
+  &:not(:disabled, .disabled):active,
+  &:not(:disabled, .disabled).active,
   .show > &.dropdown-toggle {
-    color: darken($color, 10%);
+    color: color.adjust($color, $lightness: -10%);
     background: #EEEEEE;
   }
 }
@@ -256,10 +257,10 @@ fieldset:disabled a.btn {
     $active-border: theme-color($color, "active");
 
     // Defaults
-    $hover-background: darken($background, 7.5%) !default;
-    $hover-border: darken($border, 10%) !default;
-    $active-background: darken($background, 10%) !default;
-    $active-border: darken($border, 12.5%) !default;
+    $hover-background: color.adjust($background, $lightness: -7.5%) !default;
+    $hover-border: color.adjust($border, $lightness: -10%) !default;
+    $active-background: color.adjust($background, $lightness: -10%) !default;
+    $active-border: color.adjust($border, $lightness: -12.5%) !default;
 
     @include button-variant(
       $background,
@@ -476,7 +477,7 @@ input[type="button"] {
   }
 }
 
-[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+[dir="rtl"] .btn-group > .btn:not(:last-child, .dropdown-toggle),
 [dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

package/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx

@@ -88,7 +88,8 @@ describe('<CardCarouselControls />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('handles scroll to previous click', () => {
+  it('handles scroll to previous click', async () => {
+    const user = userEvent.setup();
     const contextValue = {
       ...defaultCardCarouselContextValue,
       isScrolledToStart: false,
@@ -96,11 +97,12 @@ describe('<CardCarouselControls />', () => {
     render((
       <CardCarouselControlsWrapper cardCarouselContextValue={contextValue} />
     ));
-    userEvent.click(screen.getByLabelText('Scroll to previous'));
+    await user.click(screen.getByLabelText('Scroll to previous'));
     expect(mockScrollToPrevious).toHaveBeenCalledTimes(1);
   });
 
-  it('handles scroll to next click', () => {
+  it('handles scroll to next click', async () => {
+    const user = userEvent.setup();
     const contextValue = {
       ...defaultCardCarouselContextValue,
       isScrolledToEnd: false,
@@ -108,7 +110,7 @@ describe('<CardCarouselControls />', () => {
     render((
       <CardCarouselControlsWrapper cardCarouselContextValue={contextValue} />
     ));
-    userEvent.click(screen.getByLabelText('Scroll to next'));
+    await user.click(screen.getByLabelText('Scroll to next'));
     expect(mockScrollToNext).toHaveBeenCalledTimes(1);
   });
 });

package/src/Card/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Card
 
 $card-spacer-y:                      .75rem !default;
@@ -21,8 +22,8 @@ $card-img-overlay-padding:           1.25rem !default;
 $card-group-margin:                  calc($grid-gutter-width / 2) !default;
 $card-deck-margin:                   $card-group-margin !default;
 $card-grid-margin:                   $card-group-margin !default;
-$card-deck-margin-bottom:            map_get($spacers, 3) !default;
-$card-grid-margin-bottom:            map_get($spacers, 3) !default;
+$card-deck-margin-bottom:            map.get($spacers, 3) !default;
+$card-grid-margin-bottom:            map.get($spacers, 3) !default;
 
 $card-columns-count:                 3 !default;
 $card-columns-gap:                   1.25rem !default;

package/src/Card/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 @import "~bootstrap/scss/card";
 
@@ -51,19 +52,19 @@ a.pgn__card {
 
 .pgn__card-carousel {
   .pgn__card-carousel-title {
-    margin-bottom: map-get($spacers, 2);
+    margin-bottom: map.get($spacers, 2);
   }
 
   .pgn__card-carousel-subtitle {
     font-size: $font-size-sm;
-    margin-bottom: map-get($spacers, 2);
+    margin-bottom: map.get($spacers, 2);
   }
 
   .pgn__card-carousel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: map-get($spacers, 1);
+    margin-bottom: map.get($spacers, 1);
   }
 }
 
@@ -118,7 +119,7 @@ a.pgn__card {
     .pgn__card-header-content {
       display: flex;
       flex-direction: column;
-      margin-top: map_get($spacers, 4\.5);
+      margin-top: map.get($spacers, 4\.5);
       overflow: auto;
       text-align: start;
       width: 100%;
@@ -146,7 +147,7 @@ a.pgn__card {
 
     %header-subtitle {
       color: $gray-700;
-      margin-top: map_get($spacers, 1);
+      margin-top: map.get($spacers, 1);
     }
 
     .pgn__card-header-subtitle,
@@ -173,7 +174,7 @@ a.pgn__card {
       width: 100%;
 
       .react-loading-skeleton {
-        margin-top: map-get($spacers, 4);
+        margin-top: map.get($spacers, 4);
       }
     }
   }
@@ -357,7 +358,7 @@ a.pgn__card {
       object-position: center center;
       border-radius: $card-logo-border-radius;
       box-shadow: $level-1-box-shadow;
-      padding: map_get($spacers, 2);
+      padding: map.get($spacers, 2);
       background-color: $white;
       display: none;
 
@@ -391,7 +392,7 @@ a.pgn__card {
     }
 
     .pgn__card-status__actions {
-      margin-top: map-get($spacers, 3);
+      margin-top: map.get($spacers, 3);
     }
 
     .pgn__card-status__heading {
@@ -485,7 +486,7 @@ a.pgn__card {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (max-width: map.get($grid-breakpoints, "sm")) {
   .pgn__card-footer {
     &.horizontal > :not(:last-child) {
       margin-inline-end: 0;

package/src/Chip/index.tsx

@@ -94,6 +94,7 @@ const Chip = React.forwardRef(({
 
 Chip.propTypes = {
   /** Specifies the content of the `Chip`. */
+  // @ts-ignore
   children: PropTypes.node.isRequired,
   /** Specifies an additional `className` to add to the base element. */
   className: PropTypes.string,