@openedx/paragon 22.0.0-alpha.18 → 22.0.0-alpha.20

package/dist/theme-urls.json

@@ -1,11 +1,5 @@
 {
   "themeUrls": {
-    "core": {
-      "paths": {
-        "default": "./core.css",
-        "minified": "./core.min.css"
-      }
-    },
     "defaults": {
       "light": "light"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.18",
+  "version": "22.0.0-alpha.20",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -82,6 +82,7 @@
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.2.1",
     "react-focus-on": "^3.5.4",
+    "react-imask": "^7.1.3",
     "react-loading-skeleton": "^3.1.0",
     "react-popper": "^2.2.5",
     "react-proptype-conditional-require": "^1.0.4",
@@ -204,5 +205,8 @@
     "www",
     "icons",
     "dependent-usage-analyzer"
-  ]
+  ],
+  "overrides": {
+    "@testing-library/dom": "9.3.3"
+  }
 }

package/src/ActionRow/README.md

@@ -17,6 +17,7 @@ A layout utility for the common use case of aligning buttons, links or text
 in a row in a control bar or nav.
 
 ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via `flex-direction: column-reverse;`).
+
 ## Basic Usage
 
 ```jsx live
@@ -36,7 +37,9 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 
 ```jsx live
 <ActionRow>
-  <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
+  <Form.Checkbox className="flex-column flex-sm-row">
+      Don't ask me again.
+  </Form.Checkbox>
   <ActionRow.Spacer />
   <Button variant="tertiary">
     Cancel
@@ -49,7 +52,6 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 
 ## Stacked Usage
 
-
 ```jsx live
 <ActionRow isStacked>
   <p className="x-small">

package/src/DataTable/CollapsibleButtonGroup.jsx

@@ -102,7 +102,7 @@ CollapsibleButtonGroup.propTypes = {
   className: PropTypes.string,
   /** Array of action objects, containing a component and their callback args */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,
     args: PropTypes.shape({}),
   })).isRequired,
 };

package/src/DataTable/RowStatus.jsx

@@ -4,10 +4,16 @@ import { FormattedMessage } from 'react-intl';
 import DataTableContext from './DataTableContext';
 
 function RowStatus({ className, statusText }) {
-  const { page, rows, itemCount } = useContext(DataTableContext);
-  const pageSize = page?.length || rows?.length;
+  const {
+    page, rows, itemCount, state,
+  } = useContext(DataTableContext);
+  const rowCount = page?.length || rows?.length;
+  const pageSize = state?.pageSize || 0;
+  const pageIndex = state?.pageIndex || 0;
+  const firstRow = pageSize * pageIndex + 1;
+  const lastRow = firstRow + rowCount - 1;
 
-  if (!pageSize) {
+  if (!rowCount) {
     return null;
   }
   return (
@@ -15,9 +21,9 @@ function RowStatus({ className, statusText }) {
       {statusText || (
         <FormattedMessage
           id="pgn.DataTable.RowStatus.statusText"
-          defaultMessage="Showing {pageSize} of {itemCount}."
+          defaultMessage="Showing {firstRow} - {lastRow} of {itemCount}."
           description="A text describing how many rows is shown in the table"
-          values={{ itemCount, pageSize }}
+          values={{ itemCount, firstRow, lastRow }}
         />
       )}
     </div>

package/src/DataTable/TableFilters.jsx

@@ -30,7 +30,7 @@ TableFilters.defaultProps = {
 
 TableFilters.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.shape({
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     canFilter: PropTypes.bool,
     render: PropTypes.func.isRequired,
   })).isRequired,

package/src/DataTable/TableFooter.jsx

@@ -25,11 +25,7 @@ function TableFooter({ className, children }) {
 
 TableFooter.propTypes = {
   /** Specifies the content of the `TableFooter` */
-  children: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
-  ]),
+  children: PropTypes.node,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
 };

package/src/DataTable/filters/CheckboxFilter.jsx

@@ -62,7 +62,7 @@ CheckboxFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/src/DataTable/filters/DropdownFilter.jsx

@@ -50,7 +50,7 @@ DropdownFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       number: PropTypes.number,

package/src/DataTable/filters/MultiSelectDropdownFilter.jsx

@@ -66,7 +66,7 @@ MultiSelectDropdownFilter.propTypes = {
     /** Function to set the filter value */
     setFilter: PropTypes.func.isRequired,
     /** Column header used for labels and placeholders */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** Names and values for the select options */
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,

package/src/DataTable/filters/TextFilter.jsx

@@ -51,7 +51,7 @@ TextFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     getHeaderProps: PropTypes.func.isRequired,
     filterValue: PropTypes.string,
   }).isRequired,

package/src/DataTable/index.jsx

@@ -270,13 +270,13 @@ DataTable.propTypes = {
   /** Definition of table columns */
   columns: PropTypes.arrayOf(PropTypes.shape({
     /** User visible column name */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** String used to access the correct cell data for this column */
     accessor: requiredWhenNot(PropTypes.string, 'Cell'),
     /** Specifies a function that receives `row` as argument and returns cell content */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Specifies filter component */
-    Filter: PropTypes.func,
+    Filter: PropTypes.elementType,
     /** Specifies filter type */
     filter: PropTypes.string,
     /** Specifies filter choices */
@@ -293,8 +293,8 @@ DataTable.propTypes = {
   /** Alternate column for selecting rows. See react table useSort docs for more information */
   manualSelectColumn: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-    Cell: PropTypes.func.isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     disableSortBy: PropTypes.bool.isRequired,
   }),
   /** Table columns can be sorted */
@@ -315,16 +315,16 @@ DataTable.propTypes = {
   /** defaults that will be set on each column. Will be overridden by individual column values */
   defaultColumnValues: PropTypes.shape({
     /** A default filter component for the column */
-    Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    Filter: PropTypes.elementType,
   }),
   /** Actions or other additional non-data columns can be added here  */
   additionalColumns: PropTypes.arrayOf(PropTypes.shape({
     /** id must be unique from other columns ids */
     id: PropTypes.string.isRequired,
     /** column header that will be displayed to the user */
-    Header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Component that renders in the added column. It will receive the row as a prop */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   })),
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
@@ -401,15 +401,15 @@ DataTable.propTypes = {
   /** Number between one and four filters that can be shown on the top row. */
   numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
-  EmptyTableComponent: PropTypes.func,
+  EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */
-  RowStatusComponent: PropTypes.func,
+  RowStatusComponent: PropTypes.elementType,
   /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */
-  SelectionStatusComponent: PropTypes.func,
+  SelectionStatusComponent: PropTypes.elementType,
   /** Component to be displayed for filter status. Displayed when there are active filters. */
-  FilterStatusComponent: PropTypes.func,
+  FilterStatusComponent: PropTypes.elementType,
   /** If children are not provided a table with control bar and footer will be rendered */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
   /** options for data view toggle */

package/src/DataTable/tests/DataTable.test.jsx

@@ -135,7 +135,7 @@ describe('<DataTable />', () => {
   it('displays a control bar', () => {
     render(<DataTableWrapper {...props} />);
     expect(screen.getByTestId('table-control-bar')).toBeInTheDocument();
-    expect(screen.getAllByText('Showing 7 of 7.')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Showing 1 - 7 of 7.')[0]).toBeInTheDocument();
   });
 
   it('displays a table', () => {

package/src/DataTable/tests/RowStatus.test.jsx

@@ -32,13 +32,13 @@ describe('<RowStatus />', () => {
   it('displays the row status with pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, page: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('displays the row status without pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, rows: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('sets class names on the parent', () => {

package/src/DataTable/tests/SmartStatus.test.jsx

@@ -67,13 +67,13 @@ describe('<SmartStatus />', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('Shows the number of items on the page if selection is off and there are no filters', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('shows an alternate selection status', () => {
     const altStatusText = 'horses R cool';

package/src/DataTable/tests/TableActions.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import classNames from 'classnames';
 import TableActions from '../TableActions';
@@ -216,9 +216,10 @@ describe('<TableActions />', () => {
       expect(overflowToggle).toBeInTheDocument();
 
       userEvent.click(overflowToggle);
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThan(1);
+      waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        expect(buttons.length).toBeGreaterThan(1);
+      });
     });
 
     it('renders the correct alt text for the dropdown', () => {

package/src/Dropzone/index.scss

@@ -8,20 +8,27 @@
   box-sizing: border-box;
   cursor: pointer;
 
+  &:hover,
+  &:focus,
+  &.pgn__dropzone-validation-error,
+  &.pgn__dropzone-active {
+    border-color: transparent;
+  }
+
   &:hover {
-    border: var(--pgn-spacing-dropzone-border-hover) solid var(--pgn-color-dropzone-border-hover);
+    box-shadow: var(--pgn-elevation-dropzone-hover);
   }
 
   &:focus {
-    border: var(--pgn-spacing-dropzone-border-focus) solid var(--pgn-color-dropzone-border-focus);
+    box-shadow: var(--pgn-elevation-dropzone-focus);
   }
 
   &.pgn__dropzone-validation-error {
-    border: var(--pgn-spacing-dropzone-border-error) solid var(--pgn-color-dropzone-border-error);
+    box-shadow: var(--pgn-elevation-dropzone-error);
   }
 
   &.pgn__dropzone-active {
-    border: var(--pgn-spacing-dropzone-border-active) solid var(--pgn-color-dropzone-border-active);
+    box-shadow: var(--pgn-elevation-dropzone-active);
   }
 }
 

package/src/Form/FormControl.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RBFormControl from 'react-bootstrap/FormControl';
+import { IMaskInput } from 'react-imask';
 import { useFormGroupContext } from './FormGroupContext';
 import FormControlFeedback from './FormControlFeedback';
 import FormControlDecoratorGroup from './FormControlDecoratorGroup';
@@ -17,6 +18,7 @@ const FormControl = React.forwardRef(({
   floatingLabel,
   autoResize,
   onChange,
+  inputMask,
   ...props
 }, ref) => {
   const {
@@ -71,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={as}
+        as={inputMask ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}
@@ -80,6 +82,7 @@ const FormControl = React.forwardRef(({
           'has-value': hasValue,
         })}
         onChange={handleOnChange}
+        mask={inputMask}
         {...controlProps}
       />
     </FormControlDecoratorGroup>
@@ -122,6 +125,8 @@ FormControl.propTypes = {
   isInvalid: PropTypes.bool,
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
   autoResize: PropTypes.bool,
+  /** Specifies what format to use for the input mask. */
+  inputMask: PropTypes.string,
 };
 
 FormControl.defaultProps = {
@@ -140,6 +145,7 @@ FormControl.defaultProps = {
   isValid: undefined,
   isInvalid: undefined,
   autoResize: false,
+  inputMask: undefined,
 };
 
 export default FormControl;

package/src/Form/form-control.mdx

@@ -43,7 +43,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
-
 ## Input types
 
 ```jsx live
@@ -163,6 +162,148 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
+## Input masks
+Paragon uses the [react-imask](https://www.npmjs.com/package/react-imask) library,
+which allows you to add masks of different types for inputs.
+To create your own mask, you need to pass the required mask pattern (`+{1} (000) 000-0000`) to the `inputMask` property. <br />
+See [react-imask](https://imask.js.org) for documentation on available props.
+
+```jsx live
+() => {
+  {/* start example state */}
+  const [maskType, setMaskType] = useState('phone');
+  {/* end example state */}
+
+  const inputsWithMask = {
+    phone: (
+      <>
+        <h3>Phone</h3>
+        <Form.Group>
+          <Form.Control
+            inputMask="+{1} (000) 000-0000"
+            value={value}
+            onChange={handleChange}
+            leadingElement={<Icon src={FavoriteBorder} />}
+            floatingLabel="What is your phone number?"
+          />
+        </Form.Group>
+      </>
+    ),
+    creditCard: (<>
+      <h3>Credit card</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="0000 0000 0000 0000"
+          value={value}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your credit card number?"
+        />
+      </Form.Group>
+    </>),
+    securePassword: (<>
+      <h3>Secure password</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="XXX-XX-0000"
+          value={value}
+          definitions={{
+            X: {
+              mask: '0',
+              displayChar: 'X',
+              placeholderChar: '#',
+            },
+          }}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your password?"
+        />
+      </Form.Group>
+    </>),
+    OTPpassword: (<>
+      <h3>OTP password</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="G-00000"
+          value={value}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your OPT password?"
+        />
+      </Form.Group>
+    </>),
+    price: (
+        <>
+          <h3>Course priсe</h3>
+          <Form.Group>
+            <Form.Control
+              inputMask="$num"
+              blocks={{
+                num: {
+                  // nested masks are available!
+                  mask: Number,
+                  thousandsSeparator: ' '
+                }
+              }}
+              value={value}
+              onChange={handleChange}
+              leadingElement={<Icon src={FavoriteBorder} />}
+              floatingLabel="What is the price of this course?"
+            />
+          </Form.Group>
+        </>
+    ),
+  };
+
+  const [value, setValue] = useState('');
+
+  const handleChange = (e) => setValue(e.target.value);
+
+  return (
+    <>
+      {/* start example form block */}
+      <ExamplePropsForm
+        inputs={[
+          { value: maskType, setValue: setMaskType, options: Object.keys(inputsWithMask), name: 'Mask variants' },
+        ]}
+      />
+      {/* end example form block */}
+
+      {inputsWithMask[maskType]}
+    </>
+  );
+}
+```
+
+## Input masks with clear value
+To get a value without a mask, you need to use `onChange` instead of `onAccept` to handle changes.
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+
+  return (
+      <>
+        <Form.Group>
+          <Form.Control
+            inputMask="+{1} (000) 000-0000"
+            leadingElement={<Icon src={FavoriteBorder} />}
+            trailingElement={<Icon src={Verified} />}
+            floatingLabel="What is your phone number?"
+            value={value}
+            // depending on prop above first argument is
+            // `value` if `unmask=false`,
+            // `unmaskedValue` if `unmask=true`,
+            // `typedValue` if `unmask='typed'`
+            onAccept={(_, mask) => setValue(mask._unmaskedValue)}
+          />
+        </Form.Group>
+        Unmasked value: {JSON.stringify(value)}
+      </>
+  );
+}
+```
+
 ## Textarea autoResize
 
 `autoResize` prop allows input to be resized according to the content height.

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -8,8 +8,27 @@ const ref = {
   current: null,
 };
 
+let unmaskedInputValue;
+
+// eslint-disable-next-line react/prop-types
+function Component({ isClearValue }) {
+  const [inputValue, setInputValue] = useState('');
+  unmaskedInputValue = inputValue;
+
+  return (
+    <FormControl
+      inputMask="+{1} (000) 000-0000"
+      value={inputValue}
+      onChange={(e) => (!isClearValue ? setInputValue(e.target.value) : null)}
+      /* eslint-disable-next-line no-underscore-dangle */
+      onAccept={(_, mask) => (isClearValue ? setInputValue(mask._unmaskedValue) : null)}
+      data-testid="form-control-with-mask"
+    />
+  );
+}
+
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', async () => {
+  it('textarea changes its height with autoResize prop', () => {
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
@@ -26,9 +45,27 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    await userEvent.type(textarea, inputText);
+    userEvent.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', () => {
+    render(<Component />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    userEvent.type(input, '5555555555');
+    expect(input.value).toBe('+1 (555) 555-5555');
+  });
+
+  it('should be cleared from the mask elements value', () => {
+    render(<Component isClearValue />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    userEvent.type(input, '5555555555');
+
+    expect(input.value).toBe('+1 (555) 555-5555');
+    expect(unmaskedInputValue).toBe('15555555555');
+  });
 });

package/styles/css/core/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 16 Nov 2023 10:44:11 GMT
+ * Generated on Wed, 06 Dec 2023 09:28:09 GMT
  */
 
 :root {
@@ -195,10 +195,6 @@
   --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
   --pgn-spacing-form-input-check-margin-x-base: .25rem;
   --pgn-spacing-form-input-check-gutter: 1.25rem;
-  --pgn-spacing-dropzone-border-error: 2px;
-  --pgn-spacing-dropzone-border-active: 2px;
-  --pgn-spacing-dropzone-border-focus: 2px;
-  --pgn-spacing-dropzone-border-hover: 2px;
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: .625rem;