@openedx/paragon 22.13.0 → 22.15.0

package/src/Form/_index.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:string";
 @import "variables";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/input-group";
@@ -60,7 +62,7 @@ $select-icon-padding: .5625rem !default;
     }
   }
 
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
+  @media (min-width: map.get($grid-breakpoints, "sm")) {
     margin-inline-end: $custom-control-gutter;
   }
 
@@ -306,7 +308,7 @@ $select-icon-padding: .5625rem !default;
       text-align: right;
     }
 
-    &:not(:focus):not(.has-value) {
+    &:not(:focus, .has-value) {
       color: transparent;
     }
 
@@ -318,17 +320,17 @@ $select-icon-padding: .5625rem !default;
     }
   }
 
-  .form-control:not(:focus):not(.has-value) {
+  .form-control:not(:focus, .has-value) {
     &::placeholder,
     &::-webkit-datetime-edit {
       opacity: 0;
     }
   }
 
-  select.form-control:not(.has-value):not(:focus) {
+  select.form-control:not(.has-value, :focus) {
     // color: rgba(0,0,0,0); Force the rgba syntax to appear in the output rather
     // than transparent. IE11 does not understand color: transparent here.
-    color: unquote("rgba(0,0,0,0)");
+    color: string.unquote("rgba(0,0,0,0)");
   }
 }
 
@@ -545,7 +547,7 @@ select.form-control {
 .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
 .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn,
 .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text,
-.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .btn:not(:last-child, .dropdown-toggle),
 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   [dir="rtl"] & {
     border-radius: 0 $input-border-radius $input-border-radius 0;
@@ -588,7 +590,7 @@ select.form-control {
   .pgn__form-autosuggest__dropdown {
     @include pgn-box-shadow(1, "centered");
 
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (min-width: map.get($grid-breakpoints, "sm")) {
       margin-inline-end: $custom-control-gutter;
     }
 

package/src/Form/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+@use "sass:map";
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
 $input-font-family:                     $input-btn-font-family !default;
@@ -198,7 +200,7 @@ $custom-range-thumb-border-radius:           1rem !default;
 $custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-active-bg:               color.adjust($component-active-bg, $lightness: 35%) !default;
 $custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;
 
 $custom-file-height:                $input-height !default;
@@ -238,7 +240,7 @@ $form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg x
 
 $form-validation-states: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$form-validation-states: map-merge(
+$form-validation-states: map.merge(
   (
     "valid": (
       "color": $form-feedback-valid-color,

package/src/Form/tests/FormAutosuggest.test.jsx

@@ -89,59 +89,64 @@ describe('render behavior', () => {
     expect(screen.getByDisplayValue('Test Value')).toBeInTheDocument();
   });
 
-  it('renders component with options', () => {
+  it('renders component with options', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
   });
 
-  it('renders with value required error msg', () => {
+  it('renders with value required error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isValueRequired />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example value required error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders with selection required error msg', () => {
+  it('renders with selection required error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isSelectionRequired />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.type(input, '1');
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.type(input, '1');
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example selection required error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders with custom error msg', () => {
+  it('renders with custom error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent hasCustomError />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example custom error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders component with options that all have IDs', () => {
+  it('renders component with options that all have IDs', async () => {
+    const user = userEvent.setup();
     const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const optionItemIds = getAllByTestId('autosuggest-optionitem').map(item => item.id);
 
     expect(optionItemIds).not.toContain(null);
@@ -154,12 +159,13 @@ describe('render behavior', () => {
     expect(getByTestId('autosuggest-screen-reader-options-count').getAttribute('aria-live')).toEqual('assertive');
   });
 
-  it('displays correct amount of options found to screen readers', () => {
+  it('displays correct amount of options found to screen readers', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
@@ -172,167 +178,180 @@ describe('render behavior', () => {
 });
 
 describe('controlled behavior', () => {
-  it('sets input value based on clicked option', () => {
+  it('sets input value based on clicked option', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(input.value).toEqual('Option 1');
   });
 
-  it('calls onChange based on clicked option', () => {
+  it('calls onChange based on clicked option', async () => {
+    const user = userEvent.setup();
     const onChange = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onChange).toHaveBeenCalledWith({ selectionId: 'option-1-id', selectionValue: 'Option 1', userProvidedText: 'Option 1' });
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onChange when the textbox is cleared', () => {
+  it('calls onChange when the textbox is cleared', async () => {
+    const user = userEvent.setup();
     const onChange = jest.fn();
     const { getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.type(input, '1');
-    userEvent.type(input, '{backspace}');
+    await user.type(input, '1');
+    await user.type(input, '{backspace}');
 
     expect(onChange).toHaveBeenCalledWith({ selectionId: '', selectionValue: '', userProvidedText: '' });
   });
 
-  it('calls the function passed to onClick when an option with it is selected', () => {
+  it('calls the function passed to onClick when an option with it is selected', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 2');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call onClick when an option without it is selected', () => {
+  it('does not call onClick when an option without it is selected', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(0);
   });
 
-  it('should set the correct activedescendant', () => {
+  it('should set the correct activedescendant', async () => {
+    const user = userEvent.setup();
     const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const expectedOptionId = getAllByTestId('autosuggest-optionitem')[0].id;
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     expect(input.getAttribute('aria-activedescendant')).toEqual(expectedOptionId);
   });
 
-  it('filters dropdown based on typed field value with one match', () => {
+  it('filters dropdown based on typed field value with one match', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, 'Option 1');
+    await user.click(input);
+    await user.type(input, 'Option 1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(1);
   });
 
-  it('toggles options list', () => {
+  it('toggles options list', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const reopenedList = queryAllByTestId('autosuggest-optionitem');
     expect(reopenedList.length).toBe(3);
   });
 
-  it('filters dropdown based on typed field value with multiple matches', () => {
+  it('filters dropdown based on typed field value with multiple matches', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(2);
   });
 
-  it('closes options list on click outside', () => {
+  it('closes options list on click outside', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(document.body);
+    await user.click(document.body);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('updates screen reader option count based on typed field value with multiple matches', () => {
+  it('updates screen reader option count based on typed field value with multiple matches', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     expect(getByText('2 options found')).toBeInTheDocument();
   });
 
-  it('closes options list when tabbed out and the input is no longer active', () => {
+  it('closes options list when tabbed out and the input is no longer active', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     expect(document.activeElement).toBe(getByTestId('autosuggest-textbox-input'));
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).not.toBe(getByTestId('autosuggest-textbox-input'));
 
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('check focus on input after esc', () => {
+  it('check focus on input after esc', async () => {
+    const user = userEvent.setup();
     const { getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
 
-    userEvent.keyboard('{esc}');
+    await user.keyboard('{Escape}');
 
     expect(input.matches(':focus')).toBe(true);
   });

package/src/Form/tests/FormCheckboxSet.test.jsx

@@ -166,7 +166,8 @@ describe('FormCheckboxSet', () => {
     });
   });
 
-  it('checks if onClick is called once in FormCheckboxSet', () => {
+  it('checks if onClick is called once in FormCheckboxSet', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByLabelText } = render(
       <FormGroup controlId="my-field">
@@ -181,7 +182,7 @@ describe('FormCheckboxSet', () => {
       </FormGroup>,
     );
 
-    userEvent.click(getByLabelText('Red'));
+    await user.click(getByLabelText('Red'));
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 });

package/src/Form/tests/FormControl.test.jsx

@@ -28,7 +28,8 @@ function Component({ isClearValue }) {
 }
 
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', () => {
+  it('textarea changes its height with autoResize prop', async () => {
+    const user = userEvent.setup();
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
@@ -45,25 +46,27 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    userEvent.type(textarea, inputText);
+    await user.type(textarea, inputText);
 
     expect(onChangeFunc).toHaveBeenCalledTimes(inputText.length);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
   });
 
-  it('should apply and accept input mask for phone numbers', () => {
+  it('should apply and accept input mask for phone numbers', async () => {
+    const user = userEvent.setup();
     render(<Component />);
 
     const input = screen.getByTestId('form-control-with-mask');
-    userEvent.type(input, '5555555555');
+    await user.type(input, '5555555555');
     expect(input.value).toBe('+1 (555) 555-5555');
   });
 
-  it('should be cleared from the mask elements value', () => {
+  it('should be cleared from the mask elements value', async () => {
+    const user = userEvent.setup();
     render(<Component isClearValue />);
 
     const input = screen.getByTestId('form-control-with-mask');
-    userEvent.type(input, '5555555555');
+    await user.type(input, '5555555555');
 
     expect(input.value).toBe('+1 (555) 555-5555');
     expect(unmaskedInputValue).toBe('15555555555');

package/src/Form/tests/FormRadioSet.test.jsx

@@ -109,7 +109,8 @@ describe('FormRadioSet', () => {
     expect(deciduousRadio).toHaveAttribute('name', 'trees');
   });
 
-  it('checks if onClick is called once in FormRadioSet', () => {
+  it('checks if onClick is called once in FormRadioSet', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByLabelText } = render(
       <FormGroup>
@@ -124,7 +125,7 @@ describe('FormRadioSet', () => {
       </FormGroup>,
     );
 
-    userEvent.click(getByLabelText('Red'));
+    await user.click(getByLabelText('Red'));
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 });

package/src/Hyperlink/Hyperlink.test.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { IntlProvider } from 'react-intl';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import Hyperlink from '.';
+import Hyperlink, { HyperlinkProps } from '.';
 
-const destination = 'destination';
+const destination = 'http://destination.example';
 const content = 'content';
-const onClick = jest.fn();
+const onClick = jest.fn().mockImplementation((e) => e.preventDefault());
 const props = {
   destination,
   onClick,
@@ -20,13 +20,37 @@ const externalLinkProps = {
   ...props,
 };
 
+interface LinkProps extends HyperlinkProps {
+  to: string;
+}
+
+function Link({ to, children, ...rest }: LinkProps) {
+  return (
+    <a
+      data-testid="custom-hyperlink-element"
+      href={to}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+function HyperlinkWrapper({ children, ...rest }: HyperlinkProps) {
+  return (
+    <IntlProvider locale="en">
+      <Hyperlink {...rest}>{children}</Hyperlink>
+    </IntlProvider>
+  );
+}
+
 describe('correct rendering', () => {
   beforeEach(() => {
-    onClick.mockClear();
+    jest.clearAllMocks();
   });
 
   it('renders Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink {...props}>{content}</Hyperlink>);
+    const { getByRole } = render(<HyperlinkWrapper {...props}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     expect(wrapper).toBeInTheDocument();
 
@@ -36,12 +60,29 @@ describe('correct rendering', () => {
     expect(wrapper).toHaveAttribute('href', destination);
     expect(wrapper).toHaveAttribute('target', '_self');
 
+    // Clicking on the link should call the onClick handler
     await userEvent.click(wrapper);
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
+  it('renders with custom element type via "as" prop', () => {
+    const propsWithoutDestination = {
+      to: destination, // `to` simulates common `Link` components' prop
+    };
+    const { getByRole } = render(<HyperlinkWrapper as={Link} {...propsWithoutDestination}>{content}</HyperlinkWrapper>);
+    const wrapper = getByRole('link');
+    expect(wrapper).toBeInTheDocument();
+
+    expect(wrapper).toHaveClass('pgn__hyperlink');
+    expect(wrapper).toHaveClass('standalone-link');
+    expect(wrapper).toHaveTextContent(content);
+    expect(wrapper).toHaveAttribute('href', destination);
+    expect(wrapper).toHaveAttribute('target', '_self');
+    expect(wrapper).toHaveAttribute('data-testid', 'custom-hyperlink-element');
+  });
+
   it('renders an underlined Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink isInline {...props}>{content}</Hyperlink>);
+    const { getByRole } = render(<HyperlinkWrapper isInline {...props}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     expect(wrapper).toBeInTheDocument();
     expect(wrapper).toHaveClass('pgn__hyperlink');
@@ -50,7 +91,7 @@ describe('correct rendering', () => {
   });
 
   it('renders external Hyperlink', () => {
-    const { getByRole, getByTestId } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
+    const { getByRole, getByTestId } = render(<HyperlinkWrapper {...externalLinkProps}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     const icon = getByTestId('hyperlink-icon');
     const iconSvg = icon.querySelector('svg');
@@ -66,19 +107,8 @@ describe('correct rendering', () => {
 
 describe('security', () => {
   it('prevents reverse tabnabbing for links with target="_blank"', () => {
-    const { getByRole } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
+    const { getByRole } = render(<HyperlinkWrapper {...externalLinkProps}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     expect(wrapper).toHaveAttribute('rel', 'noopener noreferrer');
   });
 });
-
-describe('event handlers are triggered correctly', () => {
-  it('should fire onClick', async () => {
-    const spy = jest.fn();
-    const { getByRole } = render(<Hyperlink {...props} onClick={spy}>{content}</Hyperlink>);
-    const wrapper = getByRole('link');
-    expect(spy).toHaveBeenCalledTimes(0);
-    await userEvent.click(wrapper);
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/Hyperlink/README.md

@@ -7,7 +7,7 @@ categories:
 - Buttonlike
 status: 'Needs Work'
 designStatus: 'Done'
-devStatus: 'To Do'
+devStatus: 'Done'
 notes: |
   Improve prop naming. Deprecate content prop.
   Use React.forwardRef for ref forwarding.
@@ -100,3 +100,16 @@ notes: |
   </div>
 </div>
 ```
+
+## with custom link element (e.g., using a router)
+
+``Hyperlink`` typically relies on the standard HTML anchor tag (i.e., ``a``); however, this behavior may be overriden when the destination link is to an internal route where it should be using routing instead (e.g., ``Link`` from React Router).
+
+```jsx live
+<Hyperlink
+  as={GatsbyLink}
+  to="/components/button"
+>
+  Button
+</Hyperlink>
+```

package/src/Hyperlink/index.scss

@@ -1,9 +1,11 @@
+@use "sass:map";
+
 .pgn__hyperlink {
   display: inline-flex;
   align-items: center;
   text-align: start;
 
   &__external-icon {
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: map.get($spacers, 2);
   }
 }