From fabbece345c65f306eca9959d650ac0814efa9b6 Mon Sep 17 00:00:00 2001 From: moathabuhamad-cengage Date: Tue, 17 Dec 2024 17:39:57 +0100 Subject: [PATCH] Chore: Improve TypeScript, Linting, and Styling Support in Doc MDX Files (#1588) --- .changeset/chore-deprecate-header copy.md | 5 + .eslintrc.js | 1 + package-lock.json | 5539 ++++++++++++++++- package.json | 2 + website/react-magma-docs/.eslintrc.js | 71 + website/react-magma-docs/gatsby-node.js | 2 +- website/react-magma-docs/package.json | 7 +- .../src/components/CodeBlock/actions.tsx | 6 +- .../src/components/CodeBlock/editor.tsx | 3 +- .../src/components/CodeBlock/preview.tsx | 3 +- .../src/components/Donut/index.js | 1 + .../src/components/Intro/IndexPageContent.js | 4 +- .../src/components/Intro/NavItem.js | 4 +- .../src/components/MainNav/index.js | 1 - .../src/components/PageContent/index.js | 19 +- .../src/components/SimplePropsTable/index.js | 44 +- .../react-magma-docs/src/components/layout.js | 2 + .../src/pages/api-intro/changelog.mdx | 3 +- .../src/pages/api-intro/introduction.mdx | 2 - .../src/pages/api-intro/page-templates.mdx | 23 +- .../src/pages/api-intro/styles-and-themes.mdx | 25 +- .../src/pages/api-intro/usage.mdx | 22 +- .../src/pages/api-intro/versions.mdx | 5 +- .../src/pages/api/accordion.mdx | 14 +- .../react-magma-docs/src/pages/api/alert.mdx | 7 +- .../src/pages/api/announce.mdx | 22 +- .../react-magma-docs/src/pages/api/appbar.mdx | 27 +- .../react-magma-docs/src/pages/api/badge.mdx | 43 +- .../react-magma-docs/src/pages/api/banner.mdx | 7 +- .../src/pages/api/blockquote.mdx | 16 +- .../src/pages/api/breadcrumb.mdx | 2 - .../src/pages/api/breakpoints-container.mdx | 2 - .../react-magma-docs/src/pages/api/button.mdx | 2 - .../src/pages/api/buttongroup.mdx | 20 +- .../react-magma-docs/src/pages/api/card.mdx | 4 +- .../src/pages/api/character-counter.mdx | 13 +- .../react-magma-docs/src/pages/api/chart.mdx | 9 +- .../src/pages/api/checkboxes.mdx | 3 - .../src/pages/api/combobox.mdx | 58 +- .../src/pages/api/container.mdx | 2 - .../src/pages/api/datagrid.mdx | 86 +- .../src/pages/api/date-pickers.mdx | 10 +- .../react-magma-docs/src/pages/api/drawer.mdx | 11 +- .../src/pages/api/dropdown.mdx | 14 +- .../src/pages/api/dropzone.mdx | 24 +- .../react-magma-docs/src/pages/api/flex.mdx | 2 - .../react-magma-docs/src/pages/api/form.mdx | 6 +- .../src/pages/api/formgroup.mdx | 19 +- .../src/pages/api/global-styles.mdx | 2 - .../react-magma-docs/src/pages/api/grid.mdx | 18 +- .../src/pages/api/heading.mdx | 2 - .../src/pages/api/hide-at-breakpoint.mdx | 2 - .../src/pages/api/hyperlink.mdx | 26 +- .../src/pages/api/icon-button.mdx | 21 +- .../react-magma-docs/src/pages/api/icon.mdx | 11 +- .../src/pages/api/indeterminate.mdx | 2 - .../react-magma-docs/src/pages/api/input.mdx | 6 +- .../src/pages/api/internationalization.mdx | 4 +- .../src/pages/api/line-chart.mdx | 5 +- .../react-magma-docs/src/pages/api/list.mdx | 63 +- .../src/pages/api/loading-indicator.mdx | 2 - .../react-magma-docs/src/pages/api/modal.mdx | 2 - .../src/pages/api/native-select.mdx | 22 +- .../src/pages/api/nav-tabs.mdx | 2 - .../src/pages/api/pagination.mdx | 12 +- .../src/pages/api/paragraph.mdx | 2 - .../src/pages/api/password-input.mdx | 2 - .../src/pages/api/progress-bar.mdx | 8 +- .../react-magma-docs/src/pages/api/radio.mdx | 6 +- .../src/pages/api/schema-renderer.mdx | 22 +- .../react-magma-docs/src/pages/api/search.mdx | 9 +- .../react-magma-docs/src/pages/api/select.mdx | 33 +- .../src/pages/api/skip-link.mdx | 26 +- .../react-magma-docs/src/pages/api/spacer.mdx | 8 +- .../src/pages/api/spinner.mdx | 2 - .../src/pages/api/stepper.mdx | 52 +- .../react-magma-docs/src/pages/api/table.mdx | 9 +- .../react-magma-docs/src/pages/api/tabs.mdx | 19 +- .../react-magma-docs/src/pages/api/tag.mdx | 12 +- .../src/pages/api/textarea.mdx | 4 +- .../src/pages/api/time-picker.mdx | 2 - .../react-magma-docs/src/pages/api/toast.mdx | 11 +- .../src/pages/api/toggle-button-group.mdx | 34 +- .../src/pages/api/toggle-button.mdx | 34 +- .../react-magma-docs/src/pages/api/toggle.mdx | 2 - .../src/pages/api/tooltip.mdx | 9 +- .../src/pages/api/transition.mdx | 24 +- .../src/pages/api/tree-view.mdx | 45 +- .../src/pages/api/use-focus-lock.mdx | 2 - .../src/pages/api/use-media-query.mdx | 2 - .../src/pages/api/visually-hidden.mdx | 2 - .../src/pages/design-intro/colors.mdx | 918 ++- .../src/pages/design-intro/get-started.mdx | 17 +- .../src/pages/design-intro/layout.mdx | 33 +- .../src/pages/design-intro/spacing.mdx | 40 +- .../src/pages/design-intro/typography.mdx | 391 +- .../src/pages/design/accordion.mdx | 52 +- .../src/pages/design/alert.mdx | 19 +- .../src/pages/design/badge.mdx | 2 - .../src/pages/design/banner.mdx | 14 +- .../src/pages/design/breadcrumb.mdx | 20 +- .../src/pages/design/button.mdx | 139 +- .../src/pages/design/buttongroup.mdx | 118 +- .../src/pages/design/card.mdx | 58 +- .../src/pages/design/character-counter.mdx | 42 +- .../src/pages/design/checkboxes.mdx | 42 +- .../src/pages/design/combobox.mdx | 1 - .../src/pages/design/date-picker.mdx | 160 +- .../pages/design/design-guidelines-styles.css | 27 +- .../src/pages/design/dropdown.mdx | 182 +- .../src/pages/design/dropzone.mdx | 4 +- .../src/pages/design/header.mdx | 37 +- .../src/pages/design/icon.mdx | 83 +- .../src/pages/design/indeterminate.mdx | 8 +- .../src/pages/design/input.mdx | 208 +- .../src/pages/design/list.mdx | 64 +- .../src/pages/design/loading-indicator.mdx | 44 +- .../src/pages/design/modal.mdx | 2 - .../src/pages/design/native-select.mdx | 2 - .../src/pages/design/password-input.mdx | 13 +- .../src/pages/design/progress-bar.mdx | 38 +- .../src/pages/design/radio.mdx | 40 +- .../src/pages/design/search.mdx | 23 +- .../src/pages/design/select.mdx | 2 - .../src/pages/design/stepper.mdx | 183 +- .../src/pages/design/table.mdx | 54 +- .../src/pages/design/tabs.mdx | 139 +- .../react-magma-docs/src/pages/design/tag.mdx | 1 - .../src/pages/design/time-picker.mdx | 21 +- .../src/pages/design/toast.mdx | 38 +- .../src/pages/design/toggle.mdx | 9 +- .../src/pages/design/tooltip.mdx | 24 +- .../src/pages/design/tree-view.mdx | 151 +- website/react-magma-docs/src/pages/index.js | 2 +- .../src/pages/patterns-intro/introduction.mdx | 2 +- .../src/pages/patterns/header.mdx | 12 +- .../src/pages/select-migration.mdx | 1 - website/react-magma-docs/tsconfig.json | 21 + 138 files changed, 7885 insertions(+), 2416 deletions(-) create mode 100644 .changeset/chore-deprecate-header copy.md create mode 100644 website/react-magma-docs/.eslintrc.js create mode 100644 website/react-magma-docs/tsconfig.json diff --git a/.changeset/chore-deprecate-header copy.md b/.changeset/chore-deprecate-header copy.md new file mode 100644 index 0000000000..19899a9260 --- /dev/null +++ b/.changeset/chore-deprecate-header copy.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +## Chore: Improve TypeScript, Linting, and Styling Support in Doc MDX Files \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index b1ebeef693..f4d2e93205 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,6 @@ module.exports = { extends: 'cengage/react', + plugins: ['prettier'], rules: { 'react/prop-types': [0], }, diff --git a/package-lock.json b/package-lock.json index 4bdb8eb3e7..5aa0d3b2f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,6 +79,8 @@ "eslint-plugin-import": "^2.22.0", "eslint-plugin-jest": "^24.0.2", "eslint-plugin-jsx-a11y": "^6.3.1", + "eslint-plugin-mdx": "^3.1.5", + "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.20.6", "eslint-plugin-react-hooks": "^4.1.2", "eslint-plugin-unicorn": "^22.0.0", @@ -7495,6 +7497,46 @@ "node": ">= 8" } }, + "node_modules/@npmcli/config": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@npmcli/config/-/config-8.3.4.tgz", + "integrity": "sha512-01rtHedemDNhUXdicU7s+QYz/3JyV5Naj84cvdXGH4mgCdL+agmSYaLF4LUG4vMCLzhBO8YtS0gPpH1FGvbgAw==", + "dependencies": { + "@npmcli/map-workspaces": "^3.0.2", + "@npmcli/package-json": "^5.1.1", + "ci-info": "^4.0.0", + "ini": "^4.1.2", + "nopt": "^7.2.1", + "proc-log": "^4.2.0", + "semver": "^7.3.5", + "walk-up-path": "^3.0.1" + }, + "engines": { + "node": "^16.14.0 || >=18.0.0" + } + }, + "node_modules/@npmcli/config/node_modules/ci-info": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz", + "integrity": "sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/sibiraj-s" + } + ], + "engines": { + "node": ">=8" + } + }, + "node_modules/@npmcli/config/node_modules/ini": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", + "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/@npmcli/fs": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz", @@ -8728,6 +8770,17 @@ "node": ">=14" } }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.7", "license": "MIT", @@ -13765,6 +13818,14 @@ "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.14.tgz", "integrity": "sha512-lmPil1g82wwWg/qHSxMWkSKyJGQOK+ejXeMAAWyxNtVUD0/Ycj2maL63RAqpxVfdtvTfZkRnqzB0A9ft59y69g==" }, + "node_modules/@types/concat-stream": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/concat-stream/-/concat-stream-2.0.3.tgz", + "integrity": "sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/configstore": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz", @@ -14100,6 +14161,11 @@ "ci-info": "^3.1.0" } }, + "node_modules/@types/is-empty": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@types/is-empty/-/is-empty-1.2.3.tgz", + "integrity": "sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==" + }, "node_modules/@types/is-function": { "version": "1.0.1", "license": "MIT" @@ -14305,6 +14371,11 @@ "version": "2.0.1", "license": "MIT" }, + "node_modules/@types/supports-color": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.3.tgz", + "integrity": "sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==" + }, "node_modules/@types/tapable": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.12.tgz", @@ -22404,6 +22475,18 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "dependencies": { + "dequal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/dicer": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz", @@ -23414,294 +23497,2637 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint-ast-utils": { - "version": "1.1.0", - "license": "MIT", + "node_modules/eslint-ast-utils": { + "version": "1.1.0", + "license": "MIT", + "dependencies": { + "lodash.get": "^4.4.2", + "lodash.zip": "^4.2.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-config-cengage": { + "version": "2.1.4", + "license": "ISC", + "dependencies": { + "confusing-browser-globals": "^1.0.10" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + }, + "peerDependencies": { + "@typescript-eslint/eslint-plugin": "^4.2.0", + "@typescript-eslint/parser": "^4.2.0", + "babel-eslint": "^10.1.0", + "eslint": "^7.9.0", + "eslint-config-prettier": "^7.0.0", + "eslint-plugin-import": "^2.22.0", + "eslint-plugin-jest": "^24.0.2", + "eslint-plugin-jsx-a11y": "^6.3.1", + "eslint-plugin-react": "7.20.6", + "eslint-plugin-react-hooks": "^4.1.2", + "eslint-plugin-unicorn": "^22.0.0", + "typescript": "^3.9.4" + } + }, + "node_modules/eslint-config-prettier": { + "version": "7.2.0", + "license": "MIT", + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, + "node_modules/eslint-config-react-app": { + "version": "5.2.1", + "license": "MIT", + "dependencies": { + "confusing-browser-globals": "^1.0.9" + }, + "peerDependencies": { + "@typescript-eslint/eslint-plugin": "2.x", + "@typescript-eslint/parser": "2.x", + "babel-eslint": "10.x", + "eslint": "6.x", + "eslint-plugin-flowtype": "3.x || 4.x", + "eslint-plugin-import": "2.x", + "eslint-plugin-jsx-a11y": "6.x", + "eslint-plugin-react": "7.x", + "eslint-plugin-react-hooks": "1.x || 2.x" + } + }, + "node_modules/eslint-import-resolver-node": { + "version": "0.3.6", + "license": "MIT", + "dependencies": { + "debug": "^3.2.7", + "resolve": "^1.20.0" + } + }, + "node_modules/eslint-import-resolver-node/node_modules/debug": { + "version": "3.2.7", + "license": "MIT", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/eslint-mdx": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/eslint-mdx/-/eslint-mdx-3.1.5.tgz", + "integrity": "sha512-ynztX0k7CQ3iDL7fDEIeg3g0O/d6QPv7IBI9fdYLhXp5fAp0fi8X22xF/D3+Pk0f90R27uwqa1clHpay6t0l8Q==", + "dependencies": { + "acorn": "^8.11.3", + "acorn-jsx": "^5.3.2", + "espree": "^9.6.1", + "estree-util-visit": "^2.0.0", + "remark-mdx": "^3.0.0", + "remark-parse": "^11.0.0", + "remark-stringify": "^11.0.0", + "synckit": "^0.9.0", + "tslib": "^2.6.2", + "unified": "^11.0.4", + "unified-engine": "^11.2.0", + "unist-util-visit": "^5.0.0", + "uvu": "^0.5.6", + "vfile": "^6.0.1" + }, + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "eslint": ">=8.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "dependencies": { + "@types/ms": "*" + } + }, + "node_modules/eslint-mdx/node_modules/@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" + }, + "node_modules/eslint-mdx/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/eslint-mdx/node_modules/@types/mdast": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", + "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/eslint-mdx/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/eslint-mdx/node_modules/acorn": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/eslint-mdx/node_modules/bail": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/ccount": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", + "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/character-entities": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", + "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/character-entities-html4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", + "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/character-reference-invalid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", + "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-mdx/node_modules/espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dependencies": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-mdx/node_modules/estree-util-is-identifier-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz", + "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/estree-util-visit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz", + "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "dependencies": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/is-hexadecimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", + "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint-mdx/node_modules/longest-streak": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz", + "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-from-markdown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz", + "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==", + "dependencies": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark": "^4.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-mdx": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz", + "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==", + "dependencies": { + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-mdx-expression": "^2.0.0", + "mdast-util-mdx-jsx": "^3.0.0", + "mdast-util-mdxjs-esm": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-mdx-expression": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz", + "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-mdx-jsx": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz", + "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "devlop": "^1.1.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0", + "parse-entities": "^4.0.0", + "stringify-entities": "^4.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-mdxjs-esm": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz", + "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-phrasing": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz", + "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==", + "dependencies": { + "@types/mdast": "^4.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-to-markdown": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz", + "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==", + "dependencies": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "longest-streak": "^3.0.0", + "mdast-util-phrasing": "^4.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "unist-util-visit": "^5.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/mdast-util-to-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz", + "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==", + "dependencies": { + "@types/mdast": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/micromark": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.1.tgz", + "integrity": "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-core-commonmark": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz", + "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-destination": "^2.0.0", + "micromark-factory-label": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-title": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-html-tag-name": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-extension-mdx-expression": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz", + "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-extension-mdx-jsx": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.1.tgz", + "integrity": "sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==", + "dependencies": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "estree-util-is-identifier-name": "^3.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-extension-mdx-md": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz", + "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==", + "dependencies": { + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-extension-mdxjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz", + "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==", + "dependencies": { + "acorn": "^8.0.0", + "acorn-jsx": "^5.0.0", + "micromark-extension-mdx-expression": "^3.0.0", + "micromark-extension-mdx-jsx": "^3.0.0", + "micromark-extension-mdx-md": "^2.0.0", + "micromark-extension-mdxjs-esm": "^3.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-extension-mdxjs-esm": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz", + "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==", + "dependencies": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-factory-destination": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz", + "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-factory-label": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz", + "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "devlop": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-factory-mdx-expression": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.2.tgz", + "integrity": "sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-factory-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz", + "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-factory-title": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz", + "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-factory-whitespace": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz", + "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-character": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz", + "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-chunked": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz", + "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-classify-character": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz", + "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-combine-extensions": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz", + "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-chunked": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-decode-numeric-character-reference": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz", + "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-decode-string": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz", + "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "decode-named-character-reference": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-encode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz", + "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-mdx/node_modules/micromark-util-events-to-acorn": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz", + "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "@types/unist": "^3.0.0", + "devlop": "^1.0.0", + "estree-util-visit": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-html-tag-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz", + "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-mdx/node_modules/micromark-util-normalize-identifier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz", + "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-resolve-all": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz", + "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-sanitize-uri": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz", + "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-subtokenize": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.3.tgz", + "integrity": "sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "devlop": "^1.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-mdx/node_modules/micromark-util-symbol": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz", + "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-mdx/node_modules/micromark-util-types": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz", + "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-mdx/node_modules/parse-entities": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz", + "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==", + "dependencies": { + "@types/unist": "^2.0.0", + "character-entities": "^2.0.0", + "character-entities-legacy": "^3.0.0", + "character-reference-invalid": "^2.0.0", + "decode-named-character-reference": "^1.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0", + "is-hexadecimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/parse-entities/node_modules/@types/unist": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", + "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==" + }, + "node_modules/eslint-mdx/node_modules/remark-mdx": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz", + "integrity": "sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==", + "dependencies": { + "mdast-util-mdx": "^3.0.0", + "micromark-extension-mdxjs": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/remark-parse": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz", + "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==", + "dependencies": { + "@types/mdast": "^4.0.0", + "mdast-util-from-markdown": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unified": "^11.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/remark-stringify": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz", + "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==", + "dependencies": { + "@types/mdast": "^4.0.0", + "mdast-util-to-markdown": "^2.0.0", + "unified": "^11.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/stringify-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", + "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", + "dependencies": { + "character-entities-html4": "^2.0.0", + "character-entities-legacy": "^3.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-mdx/node_modules/unified": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz", + "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==", + "dependencies": { + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/unist-util-position-from-estree": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz", + "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-mdx/node_modules/zwitch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", + "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-module-utils": { + "version": "2.7.3", + "license": "MIT", + "dependencies": { + "debug": "^3.2.7", + "find-up": "^2.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-module-utils/node_modules/debug": { + "version": "3.2.7", + "license": "MIT", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/eslint-module-utils/node_modules/find-up": { + "version": "2.1.0", + "license": "MIT", + "dependencies": { + "locate-path": "^2.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-module-utils/node_modules/locate-path": { + "version": "2.0.0", + "license": "MIT", + "dependencies": { + "p-locate": "^2.0.0", + "path-exists": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-module-utils/node_modules/p-limit": { + "version": "1.3.0", + "license": "MIT", + "dependencies": { + "p-try": "^1.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-module-utils/node_modules/p-locate": { + "version": "2.0.0", + "license": "MIT", + "dependencies": { + "p-limit": "^1.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-module-utils/node_modules/p-try": { + "version": "1.0.0", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-module-utils/node_modules/path-exists": { + "version": "3.0.0", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-flowtype": { + "version": "3.13.0", + "license": "BSD-3-Clause", + "dependencies": { + "lodash": "^4.17.15" + }, + "engines": { + "node": ">=4" + }, + "peerDependencies": { + "eslint": ">=5.0.0" + } + }, + "node_modules/eslint-plugin-graphql": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-graphql/-/eslint-plugin-graphql-4.0.0.tgz", + "integrity": "sha512-d5tQm24YkVvCEk29ZR5ScsgXqAGCjKlMS8lx3mS7FS/EKsWbkvXQImpvic03EpMIvNTBW5e+2xnHzXB/VHNZJw==", + "dependencies": { + "@babel/runtime": "^7.10.0", + "graphql-config": "^3.0.2", + "lodash.flatten": "^4.4.0", + "lodash.without": "^4.4.0" + }, + "engines": { + "node": ">=10.0" + }, + "peerDependencies": { + "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" + } + }, + "node_modules/eslint-plugin-import": { + "version": "2.25.4", + "license": "MIT", + "dependencies": { + "array-includes": "^3.1.4", + "array.prototype.flat": "^1.2.5", + "debug": "^2.6.9", + "doctrine": "^2.1.0", + "eslint-import-resolver-node": "^0.3.6", + "eslint-module-utils": "^2.7.2", + "has": "^1.0.3", + "is-core-module": "^2.8.0", + "is-glob": "^4.0.3", + "minimatch": "^3.0.4", + "object.values": "^1.1.5", + "resolve": "^1.20.0", + "tsconfig-paths": "^3.12.0" + }, + "engines": { + "node": ">=4" + }, + "peerDependencies": { + "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" + } + }, + "node_modules/eslint-plugin-import/node_modules/debug": { + "version": "2.6.9", + "license": "MIT", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/eslint-plugin-import/node_modules/doctrine": { + "version": "2.1.0", + "license": "Apache-2.0", + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/eslint-plugin-import/node_modules/ms": { + "version": "2.0.0", + "license": "MIT" + }, + "node_modules/eslint-plugin-jest": { + "version": "24.7.0", + "license": "MIT", + "dependencies": { + "@typescript-eslint/experimental-utils": "^4.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@typescript-eslint/eslint-plugin": ">= 4", + "eslint": ">=5" + }, + "peerDependenciesMeta": { + "@typescript-eslint/eslint-plugin": { + "optional": true + } + } + }, + "node_modules/eslint-plugin-jsx-a11y": { + "version": "6.5.1", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.16.3", + "aria-query": "^4.2.2", + "array-includes": "^3.1.4", + "ast-types-flow": "^0.0.7", + "axe-core": "^4.3.5", + "axobject-query": "^2.2.0", + "damerau-levenshtein": "^1.0.7", + "emoji-regex": "^9.2.2", + "has": "^1.0.3", + "jsx-ast-utils": "^3.2.1", + "language-tags": "^1.0.5", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=4.0" + }, + "peerDependencies": { + "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" + } + }, + "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": { + "version": "9.2.2", + "license": "MIT" + }, + "node_modules/eslint-plugin-markdown": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-3.0.1.tgz", + "integrity": "sha512-8rqoc148DWdGdmYF6WSQFT3uQ6PO7zXYgeBpHAOAakX/zpq+NvFYbDA/H7PYzHajwtmaOzAwfxyl++x0g1/N9A==", + "dependencies": { + "mdast-util-from-markdown": "^0.8.5" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/eslint-plugin-markdown/node_modules/mdast-util-from-markdown": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", + "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==", + "dependencies": { + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^2.0.0", + "micromark": "~2.11.0", + "parse-entities": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-markdown/node_modules/mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-markdown/node_modules/micromark": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz", + "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-mdx/-/eslint-plugin-mdx-3.1.5.tgz", + "integrity": "sha512-lUE7tP7IrIRHU3gTtASDe5u4YM2SvQveYVJfuo82yn3MLh/B/v05FNySURCK4aIxIYF1QYo3IRemQG/lyQzpAg==", + "dependencies": { + "eslint-mdx": "^3.1.5", + "eslint-plugin-markdown": "^3.0.1", + "remark-mdx": "^3.0.0", + "remark-parse": "^11.0.0", + "remark-stringify": "^11.0.0", + "tslib": "^2.6.2", + "unified": "^11.0.4", + "vfile": "^6.0.1" + }, + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "eslint": ">=8.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "dependencies": { + "@types/ms": "*" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" + }, + "node_modules/eslint-plugin-mdx/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/@types/mdast": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", + "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/eslint-plugin-mdx/node_modules/acorn": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/bail": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/ccount": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", + "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/character-entities": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", + "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/character-entities-html4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", + "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/character-reference-invalid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", + "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/estree-util-is-identifier-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz", + "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/estree-util-visit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz", + "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "dependencies": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/is-hexadecimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", + "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/longest-streak": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz", + "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-from-markdown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz", + "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==", + "dependencies": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark": "^4.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-mdx": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz", + "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==", + "dependencies": { + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-mdx-expression": "^2.0.0", + "mdast-util-mdx-jsx": "^3.0.0", + "mdast-util-mdxjs-esm": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-mdx-expression": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz", + "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-mdx-jsx": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz", + "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "devlop": "^1.1.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0", + "parse-entities": "^4.0.0", + "stringify-entities": "^4.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-mdxjs-esm": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz", + "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==", + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-phrasing": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz", + "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==", + "dependencies": { + "@types/mdast": "^4.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-to-markdown": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz", + "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==", + "dependencies": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "longest-streak": "^3.0.0", + "mdast-util-phrasing": "^4.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "unist-util-visit": "^5.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/mdast-util-to-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz", + "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==", + "dependencies": { + "@types/mdast": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.1.tgz", + "integrity": "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-core-commonmark": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz", + "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-destination": "^2.0.0", + "micromark-factory-label": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-title": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-html-tag-name": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-extension-mdx-expression": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz", + "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-extension-mdx-jsx": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.1.tgz", + "integrity": "sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==", + "dependencies": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "estree-util-is-identifier-name": "^3.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-extension-mdx-md": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz", + "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==", + "dependencies": { + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-extension-mdxjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz", + "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==", + "dependencies": { + "acorn": "^8.0.0", + "acorn-jsx": "^5.0.0", + "micromark-extension-mdx-expression": "^3.0.0", + "micromark-extension-mdx-jsx": "^3.0.0", + "micromark-extension-mdx-md": "^2.0.0", + "micromark-extension-mdxjs-esm": "^3.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-extension-mdxjs-esm": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz", + "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==", + "dependencies": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-factory-destination": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz", + "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-factory-label": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz", + "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "devlop": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-factory-mdx-expression": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.2.tgz", + "integrity": "sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-factory-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz", + "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-factory-title": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz", + "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-factory-whitespace": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz", + "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-character": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz", + "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-chunked": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz", + "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-classify-character": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz", + "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-combine-extensions": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz", + "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "lodash.get": "^4.4.2", - "lodash.zip": "^4.2.0" - }, - "engines": { - "node": ">=4" + "micromark-util-chunked": "^2.0.0", + "micromark-util-types": "^2.0.0" } }, - "node_modules/eslint-config-cengage": { - "version": "2.1.4", - "license": "ISC", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-decode-numeric-character-reference": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz", + "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "confusing-browser-globals": "^1.0.10" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^4.2.0", - "@typescript-eslint/parser": "^4.2.0", - "babel-eslint": "^10.1.0", - "eslint": "^7.9.0", - "eslint-config-prettier": "^7.0.0", - "eslint-plugin-import": "^2.22.0", - "eslint-plugin-jest": "^24.0.2", - "eslint-plugin-jsx-a11y": "^6.3.1", - "eslint-plugin-react": "7.20.6", - "eslint-plugin-react-hooks": "^4.1.2", - "eslint-plugin-unicorn": "^22.0.0", - "typescript": "^3.9.4" + "micromark-util-symbol": "^2.0.0" } }, - "node_modules/eslint-config-prettier": { - "version": "7.2.0", - "license": "MIT", - "bin": { - "eslint-config-prettier": "bin/cli.js" - }, - "peerDependencies": { - "eslint": ">=7.0.0" + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-decode-string": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz", + "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "decode-named-character-reference": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-symbol": "^2.0.0" } }, - "node_modules/eslint-config-react-app": { - "version": "5.2.1", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-encode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz", + "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-events-to-acorn": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz", + "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "confusing-browser-globals": "^1.0.9" - }, - "peerDependencies": { - "@typescript-eslint/eslint-plugin": "2.x", - "@typescript-eslint/parser": "2.x", - "babel-eslint": "10.x", - "eslint": "6.x", - "eslint-plugin-flowtype": "3.x || 4.x", - "eslint-plugin-import": "2.x", - "eslint-plugin-jsx-a11y": "6.x", - "eslint-plugin-react": "7.x", - "eslint-plugin-react-hooks": "1.x || 2.x" + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "@types/unist": "^3.0.0", + "devlop": "^1.0.0", + "estree-util-visit": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" } }, - "node_modules/eslint-import-resolver-node": { - "version": "0.3.6", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-html-tag-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz", + "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-normalize-identifier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz", + "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "debug": "^3.2.7", - "resolve": "^1.20.0" + "micromark-util-symbol": "^2.0.0" } }, - "node_modules/eslint-import-resolver-node/node_modules/debug": { - "version": "3.2.7", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-resolve-all": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz", + "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "ms": "^2.1.1" + "micromark-util-types": "^2.0.0" } }, - "node_modules/eslint-module-utils": { - "version": "2.7.3", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-sanitize-uri": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz", + "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "debug": "^3.2.7", - "find-up": "^2.1.0" - }, - "engines": { - "node": ">=4" + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" } }, - "node_modules/eslint-module-utils/node_modules/debug": { - "version": "3.2.7", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-subtokenize": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.3.tgz", + "integrity": "sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], "dependencies": { - "ms": "^2.1.1" + "devlop": "^1.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" } }, - "node_modules/eslint-module-utils/node_modules/find-up": { - "version": "2.1.0", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-symbol": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz", + "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-plugin-mdx/node_modules/micromark-util-types": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz", + "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/eslint-plugin-mdx/node_modules/parse-entities": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz", + "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==", "dependencies": { - "locate-path": "^2.0.0" + "@types/unist": "^2.0.0", + "character-entities": "^2.0.0", + "character-entities-legacy": "^3.0.0", + "character-reference-invalid": "^2.0.0", + "decode-named-character-reference": "^1.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0", + "is-hexadecimal": "^2.0.0" }, - "engines": { - "node": ">=4" + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/eslint-module-utils/node_modules/locate-path": { - "version": "2.0.0", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/parse-entities/node_modules/@types/unist": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", + "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==" + }, + "node_modules/eslint-plugin-mdx/node_modules/remark-mdx": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz", + "integrity": "sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==", "dependencies": { - "p-locate": "^2.0.0", - "path-exists": "^3.0.0" + "mdast-util-mdx": "^3.0.0", + "micromark-extension-mdxjs": "^3.0.0" }, - "engines": { - "node": ">=4" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-module-utils/node_modules/p-limit": { - "version": "1.3.0", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/remark-parse": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz", + "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==", "dependencies": { - "p-try": "^1.0.0" + "@types/mdast": "^4.0.0", + "mdast-util-from-markdown": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unified": "^11.0.0" }, - "engines": { - "node": ">=4" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-module-utils/node_modules/p-locate": { - "version": "2.0.0", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/remark-stringify": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz", + "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==", "dependencies": { - "p-limit": "^1.1.0" + "@types/mdast": "^4.0.0", + "mdast-util-to-markdown": "^2.0.0", + "unified": "^11.0.0" }, - "engines": { - "node": ">=4" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-module-utils/node_modules/p-try": { - "version": "1.0.0", - "license": "MIT", - "engines": { - "node": ">=4" + "node_modules/eslint-plugin-mdx/node_modules/stringify-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", + "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", + "dependencies": { + "character-entities-html4": "^2.0.0", + "character-entities-legacy": "^3.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/eslint-module-utils/node_modules/path-exists": { - "version": "3.0.0", - "license": "MIT", - "engines": { - "node": ">=4" + "node_modules/eslint-plugin-mdx/node_modules/trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/eslint-plugin-flowtype": { - "version": "3.13.0", - "license": "BSD-3-Clause", + "node_modules/eslint-plugin-mdx/node_modules/unified": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz", + "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==", "dependencies": { - "lodash": "^4.17.15" - }, - "engines": { - "node": ">=4" + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" }, - "peerDependencies": { - "eslint": ">=5.0.0" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-graphql": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-graphql/-/eslint-plugin-graphql-4.0.0.tgz", - "integrity": "sha512-d5tQm24YkVvCEk29ZR5ScsgXqAGCjKlMS8lx3mS7FS/EKsWbkvXQImpvic03EpMIvNTBW5e+2xnHzXB/VHNZJw==", + "node_modules/eslint-plugin-mdx/node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", "dependencies": { - "@babel/runtime": "^7.10.0", - "graphql-config": "^3.0.2", - "lodash.flatten": "^4.4.0", - "lodash.without": "^4.4.0" - }, - "engines": { - "node": ">=10.0" + "@types/unist": "^3.0.0" }, - "peerDependencies": { - "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-import": { - "version": "2.25.4", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/unist-util-position-from-estree": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz", + "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==", "dependencies": { - "array-includes": "^3.1.4", - "array.prototype.flat": "^1.2.5", - "debug": "^2.6.9", - "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.2", - "has": "^1.0.3", - "is-core-module": "^2.8.0", - "is-glob": "^4.0.3", - "minimatch": "^3.0.4", - "object.values": "^1.1.5", - "resolve": "^1.20.0", - "tsconfig-paths": "^3.12.0" - }, - "engines": { - "node": ">=4" + "@types/unist": "^3.0.0" }, - "peerDependencies": { - "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-import/node_modules/debug": { - "version": "2.6.9", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", "dependencies": { - "ms": "2.0.0" + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-import/node_modules/doctrine": { - "version": "2.1.0", - "license": "Apache-2.0", + "node_modules/eslint-plugin-mdx/node_modules/unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", "dependencies": { - "esutils": "^2.0.2" + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" }, - "engines": { - "node": ">=0.10.0" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-import/node_modules/ms": { - "version": "2.0.0", - "license": "MIT" - }, - "node_modules/eslint-plugin-jest": { - "version": "24.7.0", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", "dependencies": { - "@typescript-eslint/experimental-utils": "^4.0.1" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@typescript-eslint/eslint-plugin": ">= 4", - "eslint": ">=5" + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" }, - "peerDependenciesMeta": { - "@typescript-eslint/eslint-plugin": { - "optional": true - } + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-jsx-a11y": { - "version": "6.5.1", - "license": "MIT", + "node_modules/eslint-plugin-mdx/node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", "dependencies": { - "@babel/runtime": "^7.16.3", - "aria-query": "^4.2.2", - "array-includes": "^3.1.4", - "ast-types-flow": "^0.0.7", - "axe-core": "^4.3.5", - "axobject-query": "^2.2.0", - "damerau-levenshtein": "^1.0.7", - "emoji-regex": "^9.2.2", - "has": "^1.0.3", - "jsx-ast-utils": "^3.2.1", - "language-tags": "^1.0.5", - "minimatch": "^3.0.4" + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" }, - "engines": { - "node": ">=4.0" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/eslint-plugin-mdx/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" }, - "peerDependencies": { - "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": { - "version": "9.2.2", - "license": "MIT" + "node_modules/eslint-plugin-mdx/node_modules/zwitch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", + "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } }, "node_modules/eslint-plugin-prettier": { - "version": "3.4.1", - "license": "MIT", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", "dependencies": { - "prettier-linter-helpers": "^1.0.0" + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.9.1" }, "engines": { - "node": ">=6.0.0" + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" }, "peerDependencies": { - "eslint": ">=5.0.0", - "prettier": ">=1.13.0" + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" }, "peerDependenciesMeta": { + "@types/eslint": { + "optional": true + }, "eslint-config-prettier": { "optional": true } @@ -31810,6 +34236,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/import-meta-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/import-modules": { "version": "2.1.0", "license": "MIT", @@ -32447,6 +34882,11 @@ "is-window": "^1.0.2" } }, + "node_modules/is-empty": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-empty/-/is-empty-1.2.0.tgz", + "integrity": "sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==" + }, "node_modules/is-extendable": { "version": "0.1.1", "license": "MIT", @@ -37637,6 +40077,19 @@ "node": ">=4" } }, + "node_modules/load-plugin": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-6.0.3.tgz", + "integrity": "sha512-kc0X2FEUZr145odl68frm+lMJuQ23+rTXYmR6TImqPtbpmXC4vVXbWKDQ9IzndA0HfyQamWfKLhzsqGSTxE63w==", + "dependencies": { + "@npmcli/config": "^8.0.0", + "import-meta-resolve": "^4.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/load-yaml-file": { "version": "0.2.0", "license": "MIT", @@ -46116,8 +48569,29 @@ "link": true }, "node_modules/react-magma-dom": { - "resolved": "packages/react-magma-dom", - "link": true + "version": "4.8.0-next.1", + "resolved": "https://registry.npmjs.org/react-magma-dom/-/react-magma-dom-4.8.0-next.1.tgz", + "integrity": "sha512-M/bWn0/EnSqeX4dkyFzmSXt+k0PTdm51sWWKpmBoCLAhFeP7q2YcrMfiJlEHcWNlKfs3I5HZen4/sEpCpOTYnw==", + "dependencies": { + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", + "@floating-ui/react-dom": "^2.1.2", + "@popperjs/core": "^2.6.0", + "csstype": "^3.0.8", + "polished": "^3.2.0", + "react-popper": "^2.2.4" + }, + "peerDependencies": { + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", + "date-fns": "^2.12.0", + "downshift": "^5.4.5", + "framer-motion": "^4.1.11", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-magma-icons": "^3.0.0", + "uuid": "^8.3.0" + } }, "node_modules/react-magma-icons": { "version": "3.0.0", @@ -50249,6 +52723,21 @@ "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz", "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==" }, + "node_modules/synckit": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz", + "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==", + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/table": { "version": "6.8.0", "license": "BSD-3-Clause", @@ -52035,6 +54524,26 @@ "eslint": ">=3.14.1" } }, + "node_modules/tsdx/node_modules/eslint-plugin-prettier": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", + "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", + "dependencies": { + "prettier-linter-helpers": "^1.0.0" + }, + "engines": { + "node": ">=6.0.0" + }, + "peerDependencies": { + "eslint": ">=5.0.0", + "prettier": ">=1.13.0" + }, + "peerDependenciesMeta": { + "eslint-config-prettier": { + "optional": true + } + } + }, "node_modules/tsdx/node_modules/eslint-plugin-react-hooks": { "version": "2.5.1", "license": "MIT", @@ -54103,6 +56612,11 @@ "node": ">=18.17" } }, + "node_modules/undici-types": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" + }, "node_modules/unescape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz", @@ -54191,6 +56705,324 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/unified-engine": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/unified-engine/-/unified-engine-11.2.2.tgz", + "integrity": "sha512-15g/gWE7qQl9tQ3nAEbMd5h9HV1EACtFs6N9xaRBZICoCwnNGbal1kOs++ICf4aiTdItZxU2s/kYWhW7htlqJg==", + "dependencies": { + "@types/concat-stream": "^2.0.0", + "@types/debug": "^4.0.0", + "@types/is-empty": "^1.0.0", + "@types/node": "^22.0.0", + "@types/unist": "^3.0.0", + "concat-stream": "^2.0.0", + "debug": "^4.0.0", + "extend": "^3.0.0", + "glob": "^10.0.0", + "ignore": "^6.0.0", + "is-empty": "^1.0.0", + "is-plain-obj": "^4.0.0", + "load-plugin": "^6.0.0", + "parse-json": "^7.0.0", + "trough": "^2.0.0", + "unist-util-inspect": "^8.0.0", + "vfile": "^6.0.0", + "vfile-message": "^4.0.0", + "vfile-reporter": "^8.0.0", + "vfile-statistics": "^3.0.0", + "yaml": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified-engine/node_modules/@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "dependencies": { + "@types/ms": "*" + } + }, + "node_modules/unified-engine/node_modules/@types/node": { + "version": "22.9.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz", + "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==", + "dependencies": { + "undici-types": "~6.19.8" + } + }, + "node_modules/unified-engine/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/unified-engine/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/unified-engine/node_modules/concat-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz", + "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==", + "engines": [ + "node >= 6.0" + ], + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^3.0.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/unified-engine/node_modules/cross-spawn": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/unified-engine/node_modules/foreground-child": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/unified-engine/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/unified-engine/node_modules/ignore": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz", + "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==", + "engines": { + "node": ">= 4" + } + }, + "node_modules/unified-engine/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/unified-engine/node_modules/json-parse-even-better-errors": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz", + "integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, + "node_modules/unified-engine/node_modules/lines-and-columns": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.4.tgz", + "integrity": "sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==", + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + } + }, + "node_modules/unified-engine/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/unified-engine/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/unified-engine/node_modules/parse-json": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-7.1.1.tgz", + "integrity": "sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==", + "dependencies": { + "@babel/code-frame": "^7.21.4", + "error-ex": "^1.3.2", + "json-parse-even-better-errors": "^3.0.0", + "lines-and-columns": "^2.0.3", + "type-fest": "^3.8.0" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/unified-engine/node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "engines": { + "node": ">=8" + } + }, + "node_modules/unified-engine/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/unified-engine/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "engines": { + "node": ">=8" + } + }, + "node_modules/unified-engine/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/unified-engine/node_modules/trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/unified-engine/node_modules/type-fest": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", + "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/unified-engine/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified-engine/node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified-engine/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified-engine/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/unified-engine/node_modules/yaml": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz", + "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==", + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/unified/node_modules/is-buffer": { "version": "2.0.5", "funding": [ @@ -54274,6 +57106,23 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/unist-util-inspect": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/unist-util-inspect/-/unist-util-inspect-8.1.0.tgz", + "integrity": "sha512-mOlg8Mp33pR0eeFpo5d2902ojqFFOKMMG2hF8bmH7ZlhnmjFgh0NI3/ZDwdaBJNbvrS7LZFVrBVtIE9KZ9s7vQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-inspect/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, "node_modules/unist-util-is": { "version": "4.1.0", "license": "MIT", @@ -55015,6 +57864,237 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/vfile-reporter": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-8.1.1.tgz", + "integrity": "sha512-qxRZcnFSQt6pWKn3PAk81yLK2rO2i7CDXpy8v8ZquiEOMLSnPw6BMSi9Y1sUCwGGl7a9b3CJT1CKpnRF7pp66g==", + "dependencies": { + "@types/supports-color": "^8.0.0", + "string-width": "^6.0.0", + "supports-color": "^9.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile": "^6.0.0", + "vfile-message": "^4.0.0", + "vfile-sort": "^4.0.0", + "vfile-statistics": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-reporter/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/vfile-reporter/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/vfile-reporter/node_modules/emoji-regex": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz", + "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==" + }, + "node_modules/vfile-reporter/node_modules/string-width": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-6.1.0.tgz", + "integrity": "sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==", + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^10.2.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/vfile-reporter/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/vfile-reporter/node_modules/supports-color": { + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz", + "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "node_modules/vfile-reporter/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-reporter/node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-reporter/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-sort": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-4.0.0.tgz", + "integrity": "sha512-lffPI1JrbHDTToJwcq0rl6rBmkjQmMuXkAxsZPRS9DXbaJQvc642eCg6EGxcX2i1L+esbuhq+2l9tBll5v8AeQ==", + "dependencies": { + "vfile": "^6.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-sort/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/vfile-sort/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-sort/node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-sort/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-statistics": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-3.0.0.tgz", + "integrity": "sha512-/qlwqwWBWFOmpXujL/20P+Iuydil0rZZNglR+VNm6J0gpLHwuVM5s7g2TfVoswbXjZ4HuIhLMySEyIw5i7/D8w==", + "dependencies": { + "vfile": "^6.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-statistics/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/vfile-statistics/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-statistics/node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-statistics/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/vfile/node_modules/is-buffer": { "version": "2.0.5", "funding": [ @@ -57464,7 +60544,7 @@ }, "packages/charts": { "name": "@react-magma/charts", - "version": "10.0.0-next.2", + "version": "11.0.0-next.0", "license": "MIT", "dependencies": { "@carbon/charts-react": "^1.14.8", @@ -57480,7 +60560,7 @@ "identity-obj-proxy": "^3.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0" }, "engines": { @@ -57492,13 +60572,13 @@ "@emotion/styled": "^11.13.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0" } }, "packages/dropzone": { "name": "@react-magma/dropzone", - "version": "10.0.0-next.1", + "version": "11.0.0-next.0", "license": "MIT", "dependencies": { "polished": "^3.2.0", @@ -57509,7 +60589,7 @@ "@emotion/styled": "^11.13.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0" }, "engines": { @@ -57521,12 +60601,13 @@ "@emotion/styled": "^11.13.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0" } }, "packages/react-magma-dom": { - "version": "4.7.0-next.50", + "version": "4.8.0-next.1", + "extraneous": true, "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", @@ -57561,7 +60642,7 @@ }, "packages/schema-renderer": { "name": "@react-magma/schema-renderer", - "version": "10.0.0-next.2", + "version": "11.0.0-next.0", "license": "MIT", "devDependencies": { "@data-driven-forms/react-form-renderer": "^3.6.0", @@ -57572,7 +60653,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-dropzone": "11.3.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "tsdx": "^0.14.1", "uuid": "^8.3.0" @@ -57588,14 +60669,14 @@ "downshift": "^5.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "uuid": "^8.3.0" } }, "patterns/header": { "name": "@cengage-patterns/header", - "version": "12.0.0-next.2", + "version": "13.0.0-next.0", "license": "MIT", "devDependencies": { "@emotion/react": "^11.13.0", @@ -57605,7 +60686,7 @@ "downshift": "^5.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "uuid": "^8.3.0" }, @@ -57620,25 +60701,25 @@ "downshift": "^5.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "uuid": "^8.3.0" } }, "website/react-magma-docs": { - "version": "5.0.9-next.13", + "version": "5.0.11-next.0", "license": "MIT", "dependencies": { "@babel/plugin-transform-react-jsx": "7.10.4", - "@cengage-patterns/header": "12.0.0-next.2", + "@cengage-patterns/header": "13.0.0-next.0", "@data-driven-forms/react-form-renderer": "^3.6.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@mdx-js/mdx": "^1.5.5", "@mdx-js/react": "^1.5.5", - "@react-magma/charts": "^10.0.0-next.1", - "@react-magma/dropzone": "10.0.0-next.1", - "@react-magma/schema-renderer": "^10.0.0-next.2", + "@react-magma/charts": "^11.0.0-next.0", + "@react-magma/dropzone": "11.0.0-next.0", + "@react-magma/schema-renderer": "^11.0.0-next.0", "buble": "0.19.4", "buffer": "^6.0.3", "core-js": "^3.1.4", @@ -57668,7 +60749,7 @@ "react-focus-lock": "^2.9.2", "react-helmet": "5.2.0", "react-live": "^2.2.1", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "react-spring": "6.1.9", "semver": "^7.3.4", @@ -59246,7 +62327,7 @@ "downshift": "^5.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "uuid": "^8.3.0" } @@ -62834,6 +65915,33 @@ } } }, + "@npmcli/config": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@npmcli/config/-/config-8.3.4.tgz", + "integrity": "sha512-01rtHedemDNhUXdicU7s+QYz/3JyV5Naj84cvdXGH4mgCdL+agmSYaLF4LUG4vMCLzhBO8YtS0gPpH1FGvbgAw==", + "requires": { + "@npmcli/map-workspaces": "^3.0.2", + "@npmcli/package-json": "^5.1.1", + "ci-info": "^4.0.0", + "ini": "^4.1.2", + "nopt": "^7.2.1", + "proc-log": "^4.2.0", + "semver": "^7.3.5", + "walk-up-path": "^3.0.1" + }, + "dependencies": { + "ci-info": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz", + "integrity": "sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==" + }, + "ini": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", + "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==" + } + } + }, "@npmcli/fs": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz", @@ -63673,6 +66781,11 @@ "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "optional": true }, + "@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==" + }, "@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.7", "requires": { @@ -63743,7 +66856,7 @@ "identity-obj-proxy": "^3.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "victory": "^35.4.12" } @@ -63757,7 +66870,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-dropzone": "11.3.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0" } }, @@ -63772,7 +66885,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-dropzone": "11.3.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "tsdx": "^0.14.1", "uuid": "^8.3.0" @@ -67082,6 +70195,14 @@ "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.14.tgz", "integrity": "sha512-lmPil1g82wwWg/qHSxMWkSKyJGQOK+ejXeMAAWyxNtVUD0/Ycj2maL63RAqpxVfdtvTfZkRnqzB0A9ft59y69g==" }, + "@types/concat-stream": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/concat-stream/-/concat-stream-2.0.3.tgz", + "integrity": "sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ==", + "requires": { + "@types/node": "*" + } + }, "@types/configstore": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz", @@ -67410,6 +70531,11 @@ "ci-info": "^3.1.0" } }, + "@types/is-empty": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@types/is-empty/-/is-empty-1.2.3.tgz", + "integrity": "sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==" + }, "@types/is-function": { "version": "1.0.1" }, @@ -67590,6 +70716,11 @@ "@types/stack-utils": { "version": "2.0.1" }, + "@types/supports-color": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.3.tgz", + "integrity": "sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==" + }, "@types/tapable": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.12.tgz", @@ -73302,6 +76433,14 @@ } } }, + "devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "requires": { + "dequal": "^2.0.0" + } + }, "dicer": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz", @@ -74242,6 +77381,730 @@ } } }, + "eslint-mdx": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/eslint-mdx/-/eslint-mdx-3.1.5.tgz", + "integrity": "sha512-ynztX0k7CQ3iDL7fDEIeg3g0O/d6QPv7IBI9fdYLhXp5fAp0fi8X22xF/D3+Pk0f90R27uwqa1clHpay6t0l8Q==", + "requires": { + "acorn": "^8.11.3", + "acorn-jsx": "^5.3.2", + "espree": "^9.6.1", + "estree-util-visit": "^2.0.0", + "remark-mdx": "^3.0.0", + "remark-parse": "^11.0.0", + "remark-stringify": "^11.0.0", + "synckit": "^0.9.0", + "tslib": "^2.6.2", + "unified": "^11.0.4", + "unified-engine": "^11.2.0", + "unist-util-visit": "^5.0.0", + "uvu": "^0.5.6", + "vfile": "^6.0.1" + }, + "dependencies": { + "@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "requires": { + "@types/ms": "*" + } + }, + "@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" + }, + "@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "requires": { + "@types/unist": "*" + } + }, + "@types/mdast": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", + "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "requires": { + "@types/unist": "*" + } + }, + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "acorn": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==" + }, + "bail": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==" + }, + "ccount": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", + "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==" + }, + "character-entities": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", + "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==" + }, + "character-entities-html4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", + "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==" + }, + "character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==" + }, + "character-reference-invalid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", + "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==" + }, + "eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==" + }, + "espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "requires": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + } + }, + "estree-util-is-identifier-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz", + "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==" + }, + "estree-util-visit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz", + "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/unist": "^3.0.0" + } + }, + "is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==" + }, + "is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "requires": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" + } + }, + "is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==" + }, + "is-hexadecimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", + "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==" + }, + "is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==" + }, + "longest-streak": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz", + "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==" + }, + "mdast-util-from-markdown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz", + "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==", + "requires": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark": "^4.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-stringify-position": "^4.0.0" + } + }, + "mdast-util-mdx": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz", + "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==", + "requires": { + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-mdx-expression": "^2.0.0", + "mdast-util-mdx-jsx": "^3.0.0", + "mdast-util-mdxjs-esm": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + } + }, + "mdast-util-mdx-expression": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz", + "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + } + }, + "mdast-util-mdx-jsx": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz", + "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "devlop": "^1.1.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0", + "parse-entities": "^4.0.0", + "stringify-entities": "^4.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile-message": "^4.0.0" + } + }, + "mdast-util-mdxjs-esm": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz", + "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + } + }, + "mdast-util-phrasing": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz", + "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==", + "requires": { + "@types/mdast": "^4.0.0", + "unist-util-is": "^6.0.0" + } + }, + "mdast-util-to-markdown": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz", + "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==", + "requires": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "longest-streak": "^3.0.0", + "mdast-util-phrasing": "^4.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "unist-util-visit": "^5.0.0", + "zwitch": "^2.0.0" + } + }, + "mdast-util-to-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz", + "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==", + "requires": { + "@types/mdast": "^4.0.0" + } + }, + "micromark": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.1.tgz", + "integrity": "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==", + "requires": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-core-commonmark": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz", + "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==", + "requires": { + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-destination": "^2.0.0", + "micromark-factory-label": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-title": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-html-tag-name": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdx-expression": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz", + "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==", + "requires": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdx-jsx": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.1.tgz", + "integrity": "sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==", + "requires": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "estree-util-is-identifier-name": "^3.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-extension-mdx-md": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz", + "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==", + "requires": { + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdxjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz", + "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==", + "requires": { + "acorn": "^8.0.0", + "acorn-jsx": "^5.0.0", + "micromark-extension-mdx-expression": "^3.0.0", + "micromark-extension-mdx-jsx": "^3.0.0", + "micromark-extension-mdx-md": "^2.0.0", + "micromark-extension-mdxjs-esm": "^3.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdxjs-esm": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz", + "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==", + "requires": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-factory-destination": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz", + "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-label": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz", + "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==", + "requires": { + "devlop": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-mdx-expression": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.2.tgz", + "integrity": "sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==", + "requires": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-factory-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz", + "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-title": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz", + "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==", + "requires": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-whitespace": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz", + "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==", + "requires": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-character": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz", + "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==", + "requires": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-chunked": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz", + "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==", + "requires": { + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-classify-character": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz", + "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-combine-extensions": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz", + "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==", + "requires": { + "micromark-util-chunked": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-decode-numeric-character-reference": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz", + "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==", + "requires": { + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-decode-string": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz", + "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==", + "requires": { + "decode-named-character-reference": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-encode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz", + "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==" + }, + "micromark-util-events-to-acorn": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz", + "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==", + "requires": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "@types/unist": "^3.0.0", + "devlop": "^1.0.0", + "estree-util-visit": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-util-html-tag-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz", + "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==" + }, + "micromark-util-normalize-identifier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz", + "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==", + "requires": { + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-resolve-all": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz", + "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==", + "requires": { + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-sanitize-uri": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz", + "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-subtokenize": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.3.tgz", + "integrity": "sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==", + "requires": { + "devlop": "^1.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-symbol": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz", + "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==" + }, + "micromark-util-types": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz", + "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==" + }, + "parse-entities": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz", + "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==", + "requires": { + "@types/unist": "^2.0.0", + "character-entities": "^2.0.0", + "character-entities-legacy": "^3.0.0", + "character-reference-invalid": "^2.0.0", + "decode-named-character-reference": "^1.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0", + "is-hexadecimal": "^2.0.0" + }, + "dependencies": { + "@types/unist": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", + "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==" + } + } + }, + "remark-mdx": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz", + "integrity": "sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==", + "requires": { + "mdast-util-mdx": "^3.0.0", + "micromark-extension-mdxjs": "^3.0.0" + } + }, + "remark-parse": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz", + "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==", + "requires": { + "@types/mdast": "^4.0.0", + "mdast-util-from-markdown": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unified": "^11.0.0" + } + }, + "remark-stringify": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz", + "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==", + "requires": { + "@types/mdast": "^4.0.0", + "mdast-util-to-markdown": "^2.0.0", + "unified": "^11.0.0" + } + }, + "stringify-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", + "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", + "requires": { + "character-entities-html4": "^2.0.0", + "character-entities-legacy": "^3.0.0" + } + }, + "trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==" + }, + "unified": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz", + "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==", + "requires": { + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" + } + }, + "unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-position-from-estree": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz", + "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + } + }, + "unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + } + }, + "vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "requires": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + } + }, + "vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + } + }, + "zwitch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", + "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==" + } + } + }, "eslint-module-utils": { "version": "2.7.3", "requires": { @@ -74368,10 +78231,752 @@ } } }, + "eslint-plugin-markdown": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-3.0.1.tgz", + "integrity": "sha512-8rqoc148DWdGdmYF6WSQFT3uQ6PO7zXYgeBpHAOAakX/zpq+NvFYbDA/H7PYzHajwtmaOzAwfxyl++x0g1/N9A==", + "requires": { + "mdast-util-from-markdown": "^0.8.5" + }, + "dependencies": { + "mdast-util-from-markdown": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", + "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==", + "requires": { + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^2.0.0", + "micromark": "~2.11.0", + "parse-entities": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + } + }, + "mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==" + }, + "micromark": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz", + "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==", + "requires": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + } + } + }, + "eslint-plugin-mdx": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-mdx/-/eslint-plugin-mdx-3.1.5.tgz", + "integrity": "sha512-lUE7tP7IrIRHU3gTtASDe5u4YM2SvQveYVJfuo82yn3MLh/B/v05FNySURCK4aIxIYF1QYo3IRemQG/lyQzpAg==", + "requires": { + "eslint-mdx": "^3.1.5", + "eslint-plugin-markdown": "^3.0.1", + "remark-mdx": "^3.0.0", + "remark-parse": "^11.0.0", + "remark-stringify": "^11.0.0", + "tslib": "^2.6.2", + "unified": "^11.0.4", + "vfile": "^6.0.1" + }, + "dependencies": { + "@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "requires": { + "@types/ms": "*" + } + }, + "@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" + }, + "@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "requires": { + "@types/unist": "*" + } + }, + "@types/mdast": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", + "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "requires": { + "@types/unist": "*" + } + }, + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "acorn": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==" + }, + "bail": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==" + }, + "ccount": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", + "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==" + }, + "character-entities": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", + "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==" + }, + "character-entities-html4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", + "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==" + }, + "character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==" + }, + "character-reference-invalid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", + "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==" + }, + "estree-util-is-identifier-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz", + "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==" + }, + "estree-util-visit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz", + "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/unist": "^3.0.0" + } + }, + "is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==" + }, + "is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "requires": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" + } + }, + "is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==" + }, + "is-hexadecimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", + "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==" + }, + "is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==" + }, + "longest-streak": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz", + "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==" + }, + "mdast-util-from-markdown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz", + "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==", + "requires": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark": "^4.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-stringify-position": "^4.0.0" + } + }, + "mdast-util-mdx": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz", + "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==", + "requires": { + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-mdx-expression": "^2.0.0", + "mdast-util-mdx-jsx": "^3.0.0", + "mdast-util-mdxjs-esm": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + } + }, + "mdast-util-mdx-expression": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz", + "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + } + }, + "mdast-util-mdx-jsx": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz", + "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "devlop": "^1.1.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0", + "parse-entities": "^4.0.0", + "stringify-entities": "^4.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile-message": "^4.0.0" + } + }, + "mdast-util-mdxjs-esm": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz", + "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==", + "requires": { + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.0.0" + } + }, + "mdast-util-phrasing": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz", + "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==", + "requires": { + "@types/mdast": "^4.0.0", + "unist-util-is": "^6.0.0" + } + }, + "mdast-util-to-markdown": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz", + "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==", + "requires": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "longest-streak": "^3.0.0", + "mdast-util-phrasing": "^4.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "unist-util-visit": "^5.0.0", + "zwitch": "^2.0.0" + } + }, + "mdast-util-to-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz", + "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==", + "requires": { + "@types/mdast": "^4.0.0" + } + }, + "micromark": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.1.tgz", + "integrity": "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==", + "requires": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-core-commonmark": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz", + "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==", + "requires": { + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-destination": "^2.0.0", + "micromark-factory-label": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-title": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-html-tag-name": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdx-expression": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz", + "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==", + "requires": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdx-jsx": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.1.tgz", + "integrity": "sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==", + "requires": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "estree-util-is-identifier-name": "^3.0.0", + "micromark-factory-mdx-expression": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-extension-mdx-md": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz", + "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==", + "requires": { + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdxjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz", + "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==", + "requires": { + "acorn": "^8.0.0", + "acorn-jsx": "^5.0.0", + "micromark-extension-mdx-expression": "^3.0.0", + "micromark-extension-mdx-jsx": "^3.0.0", + "micromark-extension-mdx-md": "^2.0.0", + "micromark-extension-mdxjs-esm": "^3.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-mdxjs-esm": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz", + "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==", + "requires": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-factory-destination": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz", + "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-label": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz", + "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==", + "requires": { + "devlop": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-mdx-expression": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.2.tgz", + "integrity": "sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==", + "requires": { + "@types/estree": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-events-to-acorn": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-position-from-estree": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-factory-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz", + "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-title": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz", + "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==", + "requires": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-whitespace": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz", + "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==", + "requires": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-character": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz", + "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==", + "requires": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-chunked": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz", + "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==", + "requires": { + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-classify-character": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz", + "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-combine-extensions": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz", + "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==", + "requires": { + "micromark-util-chunked": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-decode-numeric-character-reference": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz", + "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==", + "requires": { + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-decode-string": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz", + "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==", + "requires": { + "decode-named-character-reference": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-encode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz", + "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==" + }, + "micromark-util-events-to-acorn": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz", + "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==", + "requires": { + "@types/acorn": "^4.0.0", + "@types/estree": "^1.0.0", + "@types/unist": "^3.0.0", + "devlop": "^1.0.0", + "estree-util-visit": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "vfile-message": "^4.0.0" + } + }, + "micromark-util-html-tag-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz", + "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==" + }, + "micromark-util-normalize-identifier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz", + "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==", + "requires": { + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-resolve-all": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz", + "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==", + "requires": { + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-sanitize-uri": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz", + "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==", + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "micromark-util-subtokenize": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.3.tgz", + "integrity": "sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==", + "requires": { + "devlop": "^1.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-symbol": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz", + "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==" + }, + "micromark-util-types": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz", + "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==" + }, + "parse-entities": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz", + "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==", + "requires": { + "@types/unist": "^2.0.0", + "character-entities": "^2.0.0", + "character-entities-legacy": "^3.0.0", + "character-reference-invalid": "^2.0.0", + "decode-named-character-reference": "^1.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0", + "is-hexadecimal": "^2.0.0" + }, + "dependencies": { + "@types/unist": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", + "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==" + } + } + }, + "remark-mdx": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz", + "integrity": "sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==", + "requires": { + "mdast-util-mdx": "^3.0.0", + "micromark-extension-mdxjs": "^3.0.0" + } + }, + "remark-parse": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz", + "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==", + "requires": { + "@types/mdast": "^4.0.0", + "mdast-util-from-markdown": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unified": "^11.0.0" + } + }, + "remark-stringify": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz", + "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==", + "requires": { + "@types/mdast": "^4.0.0", + "mdast-util-to-markdown": "^2.0.0", + "unified": "^11.0.0" + } + }, + "stringify-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", + "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", + "requires": { + "character-entities-html4": "^2.0.0", + "character-entities-legacy": "^3.0.0" + } + }, + "trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==" + }, + "unified": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz", + "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==", + "requires": { + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" + } + }, + "unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-position-from-estree": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz", + "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + } + }, + "unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + } + }, + "vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "requires": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + } + }, + "vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + } + }, + "zwitch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", + "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==" + } + } + }, "eslint-plugin-prettier": { - "version": "3.4.1", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", "requires": { - "prettier-linter-helpers": "^1.0.0" + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.9.1" } }, "eslint-plugin-react": { @@ -79908,6 +84513,11 @@ "resolve-cwd": "^3.0.0" } }, + "import-meta-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==" + }, "import-modules": { "version": "2.1.0" }, @@ -80311,6 +84921,11 @@ "is-window": "^1.0.2" } }, + "is-empty": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-empty/-/is-empty-1.2.0.tgz", + "integrity": "sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==" + }, "is-extendable": { "version": "0.1.1" }, @@ -83683,6 +88298,15 @@ } } }, + "load-plugin": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-6.0.3.tgz", + "integrity": "sha512-kc0X2FEUZr145odl68frm+lMJuQ23+rTXYmR6TImqPtbpmXC4vVXbWKDQ9IzndA0HfyQamWfKLhzsqGSTxE63w==", + "requires": { + "@npmcli/config": "^8.0.0", + "import-meta-resolve": "^4.0.0" + } + }, "load-yaml-file": { "version": "0.2.0", "requires": { @@ -89460,15 +94084,15 @@ "version": "file:website/react-magma-docs", "requires": { "@babel/plugin-transform-react-jsx": "7.10.4", - "@cengage-patterns/header": "12.0.0-next.2", + "@cengage-patterns/header": "13.0.0-next.0", "@data-driven-forms/react-form-renderer": "^3.6.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@mdx-js/mdx": "^1.5.5", "@mdx-js/react": "^1.5.5", - "@react-magma/charts": "^10.0.0-next.1", - "@react-magma/dropzone": "10.0.0-next.1", - "@react-magma/schema-renderer": "^10.0.0-next.2", + "@react-magma/charts": "^11.0.0-next.0", + "@react-magma/dropzone": "11.0.0-next.0", + "@react-magma/schema-renderer": "^11.0.0-next.0", "buble": "0.19.4", "buffer": "^6.0.3", "core-js": "^3.1.4", @@ -89498,7 +94122,7 @@ "react-focus-lock": "^2.9.2", "react-helmet": "5.2.0", "react-live": "^2.2.1", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.8.0-next.0", "react-magma-icons": "^3.0.0", "react-spring": "6.1.9", "semver": "^7.3.4", @@ -89507,23 +94131,17 @@ } }, "react-magma-dom": { - "version": "file:packages/react-magma-dom", + "version": "4.8.0-next.1", + "resolved": "https://registry.npmjs.org/react-magma-dom/-/react-magma-dom-4.8.0-next.1.tgz", + "integrity": "sha512-M/bWn0/EnSqeX4dkyFzmSXt+k0PTdm51sWWKpmBoCLAhFeP7q2YcrMfiJlEHcWNlKfs3I5HZen4/sEpCpOTYnw==", "requires": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@floating-ui/react-dom": "^2.1.2", "@popperjs/core": "^2.6.0", "csstype": "^3.0.8", - "date-fns": "^2.16.1", - "downshift": "^5.4.5", - "framer-motion": "^4.1.11", - "mkdirp": "^1.0.4", "polished": "^3.2.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-magma-icons": "^3.0.0", - "react-popper": "^2.2.4", - "uuid": "^8.3.0" + "react-popper": "^2.2.4" } }, "react-magma-icons": { @@ -92523,6 +97141,15 @@ "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz", "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==" }, + "synckit": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz", + "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==", + "requires": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + } + }, "table": { "version": "6.8.0", "requires": { @@ -93788,6 +98415,14 @@ "get-stdin": "^6.0.0" } }, + "eslint-plugin-prettier": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", + "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, "eslint-plugin-react-hooks": { "version": "2.5.1" }, @@ -95137,6 +99772,11 @@ "resolved": "https://registry.npmjs.org/undici/-/undici-6.19.8.tgz", "integrity": "sha512-U8uCCl2x9TK3WANvmBavymRzxbfFYG+tAu+fgx3zxQy3qdagQqBLwJVrdyO1TBfUXvfKveMKJZhpvUYoOjM+4g==" }, + "undici-types": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" + }, "unescape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz", @@ -95204,6 +99844,225 @@ } } }, + "unified-engine": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/unified-engine/-/unified-engine-11.2.2.tgz", + "integrity": "sha512-15g/gWE7qQl9tQ3nAEbMd5h9HV1EACtFs6N9xaRBZICoCwnNGbal1kOs++ICf4aiTdItZxU2s/kYWhW7htlqJg==", + "requires": { + "@types/concat-stream": "^2.0.0", + "@types/debug": "^4.0.0", + "@types/is-empty": "^1.0.0", + "@types/node": "^22.0.0", + "@types/unist": "^3.0.0", + "concat-stream": "^2.0.0", + "debug": "^4.0.0", + "extend": "^3.0.0", + "glob": "^10.0.0", + "ignore": "^6.0.0", + "is-empty": "^1.0.0", + "is-plain-obj": "^4.0.0", + "load-plugin": "^6.0.0", + "parse-json": "^7.0.0", + "trough": "^2.0.0", + "unist-util-inspect": "^8.0.0", + "vfile": "^6.0.0", + "vfile-message": "^4.0.0", + "vfile-reporter": "^8.0.0", + "vfile-statistics": "^3.0.0", + "yaml": "^2.0.0" + }, + "dependencies": { + "@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "requires": { + "@types/ms": "*" + } + }, + "@types/node": { + "version": "22.9.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz", + "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==", + "requires": { + "undici-types": "~6.19.8" + } + }, + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "requires": { + "balanced-match": "^1.0.0" + } + }, + "concat-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz", + "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==", + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^3.0.2", + "typedarray": "^0.0.6" + } + }, + "cross-spawn": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "foreground-child": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "requires": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + } + }, + "glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "requires": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + } + }, + "ignore": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz", + "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==" + }, + "is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==" + }, + "json-parse-even-better-errors": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz", + "integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==" + }, + "lines-and-columns": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.4.tgz", + "integrity": "sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==" + }, + "minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "requires": { + "brace-expansion": "^2.0.1" + } + }, + "minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==" + }, + "parse-json": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-7.1.1.tgz", + "integrity": "sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==", + "requires": { + "@babel/code-frame": "^7.21.4", + "error-ex": "^1.3.2", + "json-parse-even-better-errors": "^3.0.0", + "lines-and-columns": "^2.0.3", + "type-fest": "^3.8.0" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==" + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" + }, + "signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" + }, + "trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==" + }, + "type-fest": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", + "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==" + }, + "unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "requires": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + } + }, + "vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + } + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "requires": { + "isexe": "^2.0.0" + } + }, + "yaml": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz", + "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==" + } + } + }, "union-value": { "version": "1.0.1", "requires": { @@ -95241,6 +100100,21 @@ "unist-util-generated": { "version": "1.1.6" }, + "unist-util-inspect": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/unist-util-inspect/-/unist-util-inspect-8.1.0.tgz", + "integrity": "sha512-mOlg8Mp33pR0eeFpo5d2902ojqFFOKMMG2hF8bmH7ZlhnmjFgh0NI3/ZDwdaBJNbvrS7LZFVrBVtIE9KZ9s7vQ==", + "requires": { + "@types/unist": "^3.0.0" + }, + "dependencies": { + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + } + } + }, "unist-util-is": { "version": "4.1.0" }, @@ -95758,6 +100632,171 @@ "unist-util-stringify-position": "^2.0.0" } }, + "vfile-reporter": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-8.1.1.tgz", + "integrity": "sha512-qxRZcnFSQt6pWKn3PAk81yLK2rO2i7CDXpy8v8ZquiEOMLSnPw6BMSi9Y1sUCwGGl7a9b3CJT1CKpnRF7pp66g==", + "requires": { + "@types/supports-color": "^8.0.0", + "string-width": "^6.0.0", + "supports-color": "^9.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile": "^6.0.0", + "vfile-message": "^4.0.0", + "vfile-sort": "^4.0.0", + "vfile-statistics": "^3.0.0" + }, + "dependencies": { + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==" + }, + "emoji-regex": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz", + "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==" + }, + "string-width": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-6.1.0.tgz", + "integrity": "sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==", + "requires": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^10.2.1", + "strip-ansi": "^7.0.1" + } + }, + "strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "requires": { + "ansi-regex": "^6.0.1" + } + }, + "supports-color": { + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz", + "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==" + }, + "unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "requires": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + } + }, + "vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + } + } + } + }, + "vfile-sort": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-4.0.0.tgz", + "integrity": "sha512-lffPI1JrbHDTToJwcq0rl6rBmkjQmMuXkAxsZPRS9DXbaJQvc642eCg6EGxcX2i1L+esbuhq+2l9tBll5v8AeQ==", + "requires": { + "vfile": "^6.0.0", + "vfile-message": "^4.0.0" + }, + "dependencies": { + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "requires": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + } + }, + "vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + } + } + } + }, + "vfile-statistics": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-3.0.0.tgz", + "integrity": "sha512-/qlwqwWBWFOmpXujL/20P+Iuydil0rZZNglR+VNm6J0gpLHwuVM5s7g2TfVoswbXjZ4HuIhLMySEyIw5i7/D8w==", + "requires": { + "vfile": "^6.0.0", + "vfile-message": "^4.0.0" + }, + "dependencies": { + "@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "requires": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + } + }, + "vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + } + } + } + }, "victory": { "version": "35.11.4", "resolved": "https://registry.npmjs.org/victory/-/victory-35.11.4.tgz", diff --git a/package.json b/package.json index a880c2b4c5..ad043156c8 100644 --- a/package.json +++ b/package.json @@ -122,6 +122,8 @@ "eslint-plugin-import": "^2.22.0", "eslint-plugin-jest": "^24.0.2", "eslint-plugin-jsx-a11y": "^6.3.1", + "eslint-plugin-mdx": "^3.1.5", + "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.20.6", "eslint-plugin-react-hooks": "^4.1.2", "eslint-plugin-unicorn": "^22.0.0", diff --git a/website/react-magma-docs/.eslintrc.js b/website/react-magma-docs/.eslintrc.js new file mode 100644 index 0000000000..639e455192 --- /dev/null +++ b/website/react-magma-docs/.eslintrc.js @@ -0,0 +1,71 @@ +const eslintrc = require('../../.eslintrc'); +const propertiesJson = require('react-magma-dom/dist/properties.json'); +const propertyNames = propertiesJson.map(property => property.name); + +const globals = propertyNames.reduce((acc, name) => { + acc[name] = 'readonly'; + return acc; +}, {}); + +module.exports = { + ...eslintrc, + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint', 'mdx'], + rules: { + ...eslintrc.rules, + 'complexity': 'off', + 'jsx-a11y/anchor-is-valid': 'off', + 'jsx-a11y/anchor-has-content': 'off', + 'react/no-unescaped-entities': 'off', + }, + settings: { + 'mdx/code-blocks': true, + }, + globals: { + ...globals, + React: 'readonly', + PropTypes: 'readonly', + MDXProvider: 'readonly', + SkipLinkContent: 'readonly', + Heading: 'readonly', + Alert: 'readonly', + magma: 'readonly', + PageContent: 'readonly', + convertTextToId: 'readonly', + LayoutComponent: 'readonly', + SimplePropsTable: 'readonly', + Divider: 'readonly', + NetlifyFooter: 'readonly', + styled: 'readonly', + CodeBlock: 'readonly', + Link: 'readonly', + IconButtonProps: 'readonly', + ButtonProps: 'readonly', + ContentArticle: 'readonly', + Table: 'readonly', + PageHeading: 'readonly', + SectionHeading: 'readonly', + LinkHeading: 'readonly', + H4: 'readonly', + H5: 'readonly', + H6: 'readonly', + SmartDocsHeading: 'readonly', + LeadParagraph: 'readonly', + }, + overrides: [ + { + files: ['*.mdx'], + extends: [ + 'plugin:mdx/recommended', + ], + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + }, + rules: { + 'mdx/no-unused-expressions': 'off', + 'react/no-unescaped-entities': 'off', + }, + }, + ], +}; diff --git a/website/react-magma-docs/gatsby-node.js b/website/react-magma-docs/gatsby-node.js index 7d5e67ddca..1b350c0763 100644 --- a/website/react-magma-docs/gatsby-node.js +++ b/website/react-magma-docs/gatsby-node.js @@ -7,7 +7,7 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => { fs: 'empty', }, resolve: { - extensions: ['*', '.mjs', '.js', '.json'], + extensions: ['.*', '.mjs', '.js', '.json'], alias: { path: require.resolve('path-browserify'), }, diff --git a/website/react-magma-docs/package.json b/website/react-magma-docs/package.json index 9c62e25976..69d31582f1 100644 --- a/website/react-magma-docs/package.json +++ b/website/react-magma-docs/package.json @@ -65,7 +65,10 @@ "develop": "gatsby develop", "docs": "npm run develop", "serve": "gatsby serve", - "format": "prettier --write \"src/**/*.js\"", - "test": "echo \"Error: no test specified\"" + "format": "prettier --write --loglevel warn --ignore-path .eslintignore \"**/src/**/*.{js,jsx,ts,tsx,md,mdx,json,html,css,yml,yaml,graphql}\"", + "test": "echo \"Error: no test specified\"", + "lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx,md,mdx}'", + "lint:fix": "npx eslint 'src/**/*.{js,jsx,ts,tsx,md,mdx}' --fix", + "lint:check": "npx eslint 'src/**/*.{js,jsx,ts,tsx,md,mdx}' --max-warnings=0" } } diff --git a/website/react-magma-docs/src/components/CodeBlock/actions.tsx b/website/react-magma-docs/src/components/CodeBlock/actions.tsx index 040a93caf0..facab52ede 100644 --- a/website/react-magma-docs/src/components/CodeBlock/actions.tsx +++ b/website/react-magma-docs/src/components/CodeBlock/actions.tsx @@ -98,7 +98,8 @@ export const CodeSandboxAction = ({ ...props }: CodeSandboxActionProps) => { host: 'github', }} dependencies={{ - '@data-driven-forms/react-form-renderer': pkg.dependencies['@data-driven-forms/react-form-renderer'], + '@data-driven-forms/react-form-renderer': + pkg.dependencies['@data-driven-forms/react-form-renderer'], '@emotion/react': pkg.dependencies['@emotion/react'], '@emotion/styled': pkg.dependencies['@emotion/styled'], 'date-fns': pkg.dependencies['date-fns'], @@ -111,7 +112,8 @@ export const CodeSandboxAction = ({ ...props }: CodeSandboxActionProps) => { '@react-magma/charts': pkg.dependencies['@react-magma/charts'], '@cengage-patterns/header': pkg.dependencies['@cengage-patterns/header'], - '@react-magma/schema-renderer': pkg.dependencies['@react-magma/schema-renderer'], + '@react-magma/schema-renderer': + pkg.dependencies['@react-magma/schema-renderer'], uuid: pkg.dependencies['uuid'], }} providedFiles={{ diff --git a/website/react-magma-docs/src/components/CodeBlock/editor.tsx b/website/react-magma-docs/src/components/CodeBlock/editor.tsx index 21c16d47a9..958bea71f5 100644 --- a/website/react-magma-docs/src/components/CodeBlock/editor.tsx +++ b/website/react-magma-docs/src/components/CodeBlock/editor.tsx @@ -44,11 +44,10 @@ const Pre = styled.pre<{ expanded?: boolean; isInverse?: boolean }>` export const Editor = ({ ...props }: EditorProps) => { const context = useContext(CodeBlockContext); + const isInverse = useIsInverse(); if (context.noCode) return null; - const isInverse = useIsInverse(); - return ( { const context = useContext(CodeBlockContext); const supported = SUPPORTED_LANGUAGES.includes(context.language); + const isInverse = MAGMA.useIsInverse(); if (context.noRender || !supported) return null; const preview = formatPreview(props.code); - const isInverse = MAGMA.useIsInverse(); - return ( ( {[...Array(60)].map((_, i) => ( - + - + Working smarter, not harder

diff --git a/website/react-magma-docs/src/components/Intro/NavItem.js b/website/react-magma-docs/src/components/Intro/NavItem.js index 9ac49b3c23..f4df810192 100644 --- a/website/react-magma-docs/src/components/Intro/NavItem.js +++ b/website/react-magma-docs/src/components/Intro/NavItem.js @@ -17,7 +17,9 @@ const StyledLink = styled.button` border-color: ${props => props.active ? props.theme.colors.secondary : 'transparent'}; color: ${props => - props.active ? props.theme.colors.secondary : props.theme.colors.neutral100}; + props.active + ? props.theme.colors.secondary + : props.theme.colors.neutral100}; display: block; font-size: 13px; line-height: 1.3em; diff --git a/website/react-magma-docs/src/components/MainNav/index.js b/website/react-magma-docs/src/components/MainNav/index.js index c761ec6ae2..139905523b 100644 --- a/website/react-magma-docs/src/components/MainNav/index.js +++ b/website/react-magma-docs/src/components/MainNav/index.js @@ -354,7 +354,6 @@ export const MainNav = ({ ...props }) => { > {node.frontmatter.title} - ))} diff --git a/website/react-magma-docs/src/components/PageContent/index.js b/website/react-magma-docs/src/components/PageContent/index.js index 4f4834245b..960a42b642 100644 --- a/website/react-magma-docs/src/components/PageContent/index.js +++ b/website/react-magma-docs/src/components/PageContent/index.js @@ -1,21 +1,20 @@ /* eslint-disable complexity */ -import React from 'react'; -import PropTypes from 'prop-types'; import styled from '@emotion/styled'; -import { graphql, StaticQuery } from 'gatsby'; -import { Link } from 'gatsby'; -import { SubPageTabs } from '../SubPageTabs'; -import { convertTextToId } from '../../utils'; +import { graphql, Link, StaticQuery } from 'gatsby'; +import PropTypes from 'prop-types'; +import React from 'react'; import { - TabPanelsContainer, - TabPanel, - TabsContainer, magma, - NavTabs, NavTab, + NavTabs, + TabPanel, + TabPanelsContainer, + TabsContainer, useIsInverse, } from 'react-magma-dom'; +import { convertTextToId } from '../../utils'; import { PANEL_WIDTH } from '../SlidingDrawer'; +import { SubPageTabs } from '../SubPageTabs'; export const CONTENT_MAX_WIDTH = 1112; diff --git a/website/react-magma-docs/src/components/SimplePropsTable/index.js b/website/react-magma-docs/src/components/SimplePropsTable/index.js index d2dba8c244..60bc32782f 100644 --- a/website/react-magma-docs/src/components/SimplePropsTable/index.js +++ b/website/react-magma-docs/src/components/SimplePropsTable/index.js @@ -31,18 +31,18 @@ export const SimplePropsTable = ({ propertyValues }) => { font-weight: 600; padding-bottom: 0; `; - -const StyledFlexLeft = styled(Flex)` - @media (max-width: ${magma.breakpoints.small}px) { - padding: 8px 8px 4px !important; - } -`; -const StyledFlexRight = styled(Flex)` - @media (max-width: ${magma.breakpoints.small}px) { - padding-top: 0 !important; - } -`; + const StyledFlexLeft = styled(Flex)` + @media (max-width: ${magma.breakpoints.small}px) { + padding: 8px 8px 4px !important; + } + `; + + const StyledFlexRight = styled(Flex)` + @media (max-width: ${magma.breakpoints.small}px) { + padding-top: 0 !important; + } + `; if (propertyValues === undefined) { return null; @@ -83,7 +83,14 @@ const StyledFlexRight = styled(Flex)` > {name} @@ -105,10 +112,7 @@ const StyledFlexRight = styled(Flex)` )} {prop.deprecated && ( - + Deprecated )} @@ -122,11 +126,11 @@ const StyledFlexRight = styled(Flex)` xs={3} direction={FlexDirection.column} spacing={0} - > + > + > Description @@ -135,7 +139,7 @@ const StyledFlexRight = styled(Flex)` xs={12} md={9} direction={FlexDirection.column} - > + > ); })} - + ); }; diff --git a/website/react-magma-docs/src/components/layout.js b/website/react-magma-docs/src/components/layout.js index f5e02a3eec..81a6cb9e58 100755 --- a/website/react-magma-docs/src/components/layout.js +++ b/website/react-magma-docs/src/components/layout.js @@ -14,6 +14,7 @@ import { CodeBlock } from './CodeBlock'; import { Link } from 'gatsby'; import { IconButtonProps } from '../components/IconButtonProps'; import { ButtonProps } from '../components/ButtonProps'; +import { LeadParagraph } from '../components/LeadParagraph'; const ContentArticle = styled.article` @media (max-width: 1025px) { @@ -80,6 +81,7 @@ export const Layout = ({ children, pageContext }) => { hr: Divider, Alert, Link, + LeadParagraph, PageContent: props => ( {props.children} ), diff --git a/website/react-magma-docs/src/pages/api-intro/changelog.mdx b/website/react-magma-docs/src/pages/api-intro/changelog.mdx index b49992b1f8..b1c66eabea 100644 --- a/website/react-magma-docs/src/pages/api-intro/changelog.mdx +++ b/website/react-magma-docs/src/pages/api-intro/changelog.mdx @@ -108,7 +108,7 @@ order: 4 ### Minor Changes - ab6ffd4ed: feat(TreeView): New TreeView & TreeItem components -- ede3d0f62: feat(Tabs): Two new components, `TabsScrollSpyContainer` and `TabScrollSpyPanel` allow for a unique `Tab` layout with a scroll-spy navigation UI. Please note that this component is in *beta*. Use at your own risk. +- ede3d0f62: feat(Tabs): Two new components, `TabsScrollSpyContainer` and `TabScrollSpyPanel` allow for a unique `Tab` layout with a scroll-spy navigation UI. Please note that this component is in _beta_. Use at your own risk. ### Patch Changes @@ -641,5 +641,4 @@ This was an accidental release. Please skip this version and upgrade to to 2.5.1 - **tooltip:** removed deprciated keyCode ([3ad9cb9](https://github.com/cengage/react-magma/commit/3ad9cb9b0cd9b9ccd01431b04862ffbfe174df6c)) - **typography:** export TypographyContextVariant ([1012171](https://github.com/cengage/react-magma/commit/101217160ba2b5bce1e3931d77f39ee77d6f8b64)) - diff --git a/website/react-magma-docs/src/pages/api-intro/introduction.mdx b/website/react-magma-docs/src/pages/api-intro/introduction.mdx index 1c9dc9007b..20d00f2254 100644 --- a/website/react-magma-docs/src/pages/api-intro/introduction.mdx +++ b/website/react-magma-docs/src/pages/api-intro/introduction.mdx @@ -3,8 +3,6 @@ title: Getting Started order: 1 --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api-intro/page-templates.mdx b/website/react-magma-docs/src/pages/api-intro/page-templates.mdx index d05e47309d..75dfcd76fe 100644 --- a/website/react-magma-docs/src/pages/api-intro/page-templates.mdx +++ b/website/react-magma-docs/src/pages/api-intro/page-templates.mdx @@ -3,8 +3,6 @@ title: Page Templates order: 2 --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -16,7 +14,10 @@ import { LeadParagraph } from '../../components/LeadParagraph'; This template is ideal for applications that need as much of the screen as possible.

- GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
```tsx @@ -26,7 +27,6 @@ import { Drawer, DrawerPosition, Grid, - GridAlignContent, GridItem, GridJustifyContent, magma, @@ -141,7 +141,10 @@ export function Example() { This template is great for pages that focus more on reading content like marketing materials, articles, etc.
- GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
```tsx @@ -246,7 +249,10 @@ export function Example() { This template includes a screen region for a left sidebar and includes all of the necessary responsive behavior.
- GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
```tsx @@ -342,7 +348,10 @@ export function Example() { This template also includes the sidebar screen region, but the header extends all the way across the top of the page.
- GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
```tsx diff --git a/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx b/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx index 1d8e42e3f4..a8c78d5c19 100644 --- a/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx +++ b/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx @@ -3,7 +3,6 @@ title: Styles and Themes order: 4 --- -import { LeadParagraph } from '../../components/LeadParagraph'; import { Donut } from '../../components/Donut'; @@ -22,7 +21,7 @@ Custom styles can be passed to components using the `style` prop. Magma variables can also be used in the style prop to apply themed styles on the fly. -```typescript +```tsx import React from 'react'; import { Button, Paragraph } from 'react-magma-dom'; @@ -50,9 +49,9 @@ Some non-atomic components support styling of individual elements within the com For example, the Checkbox supports the following properties: `containerStyle`, `inputStyle` and `labelStyle`. In these cases, the `style` prop would have no effect because there is more than one element to target. -```typescript +```tsx import React from 'react'; -import { Button } from 'react-magma-dom'; +import { Checkbox } from 'react-magma-dom'; export function Example() { return ( @@ -206,7 +205,7 @@ A project can have multiple theme files that are triggered conditionally by the The code below is an example of a theme file (applying to all components), including a themes for all valid individual components (only applies to those components - see subsection below for more information). -```js noCodeSandbox +```jsx noCodeSandbox noRender import { magma } from 'react-magma-dom'; const typeScale = { @@ -401,7 +400,7 @@ To apply component-specific theming, theme objects can be included in the theme These individual theme objects will be applied globally to **only those components.** The theme object for each above component can be found on its documentation page. See below for an example of an individual component's theme object: -```js noCodeSandbox +```jsx noCodeSandbox noRender tooltip: { arrowSize: '4px', arrowSizeDoubled: '8px', @@ -424,7 +423,7 @@ One of the features of the Magma theme is a typography scale, that contains thir The `typeScale` can be set as part of the theme. -```js noCodeSandbox +```jsx noCodeSandbox noRender typeScale: { size01: { fontSize: '12px', @@ -495,7 +494,7 @@ typeScale: { Furthermore, font-size and line-height can be set in the theme for six heading levels and four paragraph relative sizes for two different screen resolutions. The theme also contains options for two additional typography variants for those heading and paragraph styles. -```js noCodeSandbox +```jsx noCodeSandbox noRender typographyVisualStyles: { headingXLarge: { mobile: typeScale.size07, @@ -565,7 +564,7 @@ Designers are advised to use values from the space scale whenever possible. The `spaceScale` can be overridden in by defining its values new theme. -```js noCodeSandbox +```jsx noCodeSandbox noRender spaceScale: { spacing01: '2px', spacing02: '4px', @@ -601,13 +600,10 @@ import { ButtonVariant, Card, CardBody, - CardHeading, Combobox, - Drawer, Flex, FlexBehavior, Heading, - HyperLink, IconButton, magma, Radio, @@ -626,6 +622,7 @@ import { TabPanel, Tag, Tooltip, + ThemeContext, } from 'react-magma-dom'; import { InfoIcon } from 'react-magma-icons'; @@ -965,8 +962,8 @@ export function Example() { return ( diff --git a/website/react-magma-docs/src/pages/api-intro/usage.mdx b/website/react-magma-docs/src/pages/api-intro/usage.mdx index b9ac1c3bed..1f334a884e 100644 --- a/website/react-magma-docs/src/pages/api-intro/usage.mdx +++ b/website/react-magma-docs/src/pages/api-intro/usage.mdx @@ -3,12 +3,12 @@ title: Usage order: 3 --- -import { LeadParagraph } from '../../components/LeadParagraph'; - -How to use React Magma components. The examples here use the Button component. More information about each of the components can be found in the Component API section. + How to use React Magma components. The examples here use the{' '} + Button component. More information about each of + the components can be found in the Component API section. ## Basic Usage @@ -16,11 +16,11 @@ How to use React Magma components. The examples here use the ThemeContext.Provider to inherit styles from the theme. -```js noRender startExpanded +```jsx noRender startExpanded import React from 'react'; import { GlobalStyles } from 'react-magma-dom'; -function Example() { +export function Example() { return (
@@ -74,7 +74,7 @@ import React from 'react'; import { magma } from 'react-magma-dom'; import styled from '@emotion/styled'; -function Example() { +export function Example() { const StyledDiv = styled('div')(props => ({ background: props.theme.colors.neutral, color: props.theme.colors.neutral100, @@ -93,4 +93,4 @@ Wherever possible selecting elements should be handled using visible text or ari If that is not sufficient, each of our components accept a `testId` that is passed to the primary element as a `data-testid` attribute that can be found with the `getByTestId` helper function from `@testing-library/react`. - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api-intro/versions.mdx b/website/react-magma-docs/src/pages/api-intro/versions.mdx index 5c236bbeac..6b8a6ce6d6 100644 --- a/website/react-magma-docs/src/pages/api-intro/versions.mdx +++ b/website/react-magma-docs/src/pages/api-intro/versions.mdx @@ -14,9 +14,6 @@ import { TagSize, } from 'react-magma-dom'; import { getVersions } from '../../utils'; -import { LeadParagraph } from '../../components/LeadParagraph'; - - export const NextVersionTable = () => { const [tags, setTags] = React.useState([]); @@ -170,6 +167,8 @@ export const IconsTable = () => { ); }; + + On an older version? Want to see the newest unreleased updates? Switch to a different version of the docs at anytime. diff --git a/website/react-magma-docs/src/pages/api/accordion.mdx b/website/react-magma-docs/src/pages/api/accordion.mdx index e19c8ca891..3d42c93ff4 100644 --- a/website/react-magma-docs/src/pages/api/accordion.mdx +++ b/website/react-magma-docs/src/pages/api/accordion.mdx @@ -11,8 +11,6 @@ props: - AccordionPanelProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -27,7 +25,7 @@ An accordion is made up of four components: `Accordion`, `AccordionItem`, `Accor By default, multiple items are expandable. The `defaultIndex` prop which takes a zero-based array can be used to set panels open by default. -```typescript +```tsx import React from 'react'; import { Accordion, @@ -68,7 +66,7 @@ By default, the `isMulti` true, which means that the accordion will allow multip When the `isMulti` prop is false, the `defaultIndex` prop will take a single number, instead of an array. -```typescript +```tsx import React from 'react'; import { Accordion, @@ -109,7 +107,7 @@ If you would like to control which panels are open directly, you can use the `in If `isMulti` is true, then the `index` prop must be an array. -```typescript +```tsx import React from 'react'; import { Accordion, @@ -179,7 +177,7 @@ export function Example() { By default, a chevron icon appears on the right of each `AccordionItem`. You may change the position to the left, or remove it by using the `iconPosition` prop, which accepts the values `AccordionIconPosition.left`, `AccordionIconPosition.none`, or `AccordionIconPosition.right`. -```typescript +```tsx import React from 'react'; import { Accordion, @@ -209,7 +207,7 @@ export function Example() { You can disable a single item by adding the `isDisabled` prop to the `AccordionItem` component. -```typescript +```tsx import React from 'react'; import { Accordion, @@ -243,7 +241,7 @@ export function Example() { The `isInverse` prop will render light text, to be used on a dark background. The children will inherit the `isInverse` prop unless specified otherwise. -```typescript +```tsx import React from 'react'; import { Accordion, diff --git a/website/react-magma-docs/src/pages/api/alert.mdx b/website/react-magma-docs/src/pages/api/alert.mdx index 8dce533a4e..e55631de2b 100644 --- a/website/react-magma-docs/src/pages/api/alert.mdx +++ b/website/react-magma-docs/src/pages/api/alert.mdx @@ -5,12 +5,11 @@ props: - AlertProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - -Alerts are available for any length of text, and may contain HTML markup. They may also have an optional dismiss button. + Alerts are available for any length of text, and may contain HTML markup. They + may also have an optional dismiss button. ## Basic Usage @@ -157,4 +156,4 @@ All of the [global HTML attributes](https://developer.mozilla.org/en-US/docs/Web - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api/announce.mdx b/website/react-magma-docs/src/pages/api/announce.mdx index 6611a85dca..9ba52ec63b 100644 --- a/website/react-magma-docs/src/pages/api/announce.mdx +++ b/website/react-magma-docs/src/pages/api/announce.mdx @@ -5,13 +5,14 @@ props: - AnnounceProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - -When dynamically changing content on a page, it is important that all users become aware of these changes. While changes may be visually apparent to users who cans see the page, -they may not be clear to users of assistive technology. The `Announce` component uses the `aria-live` attribute to to expose dynamic content to those using screen readers. + When dynamically changing content on a page, it is important that all users + become aware of these changes. While changes may be visually apparent to users + who cans see the page, they may not be clear to users of assistive technology. + The `Announce` component uses the `aria-live` attribute to to expose dynamic + content to those using screen readers. ## Basic Usage @@ -21,9 +22,8 @@ import React from 'react'; import { Announce, Button } from 'react-magma-dom'; export function Example() { - const [announceContent, setAnnounceContent] = React.useState( - 'Initial content' - ); + const [announceContent, setAnnounceContent] = + React.useState('Initial content'); function updateAnnounceContent() { setAnnounceContent('New content replacing the initial content'); @@ -56,10 +56,8 @@ import React from 'react'; import { Announce, Button } from 'react-magma-dom'; export function Example() { - const [ - announceContentAssertive, - setAnnounceContentAssertive, - ] = React.useState('Initial assertive content'); + const [announceContentAssertive, setAnnounceContentAssertive] = + React.useState('Initial assertive content'); const [announceContentOff, setAnnounceContentOff] = React.useState( 'Initial off content' ); @@ -108,4 +106,4 @@ export function Example() { All of the [global HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) can be provided as props and will be applied to the wrapping `div` element that gets rendered. - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api/appbar.mdx b/website/react-magma-docs/src/pages/api/appbar.mdx index 5601f58dff..e53836464c 100644 --- a/website/react-magma-docs/src/pages/api/appbar.mdx +++ b/website/react-magma-docs/src/pages/api/appbar.mdx @@ -5,19 +5,22 @@ props: - AppBarProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - -The AppBar component is a relatively simple container, rendering a header element, used to display information and actions relating to the current screen. -

-It is the foundation for the Header Pattern, a more robust, more opinionated component that also handles the rendering of several components inside of it. + The AppBar component is a relatively simple container, rendering a header + element, used to display information and actions relating to the current + screen. +
+
+ It is the foundation for the Header Pattern, + a more robust, more opinionated component that also handles the rendering of several + components inside of it. ## Basic Usage -```typescript +```tsx import React from 'react'; import { AppBar } from 'react-magma-dom'; @@ -30,7 +33,7 @@ export function Example() { The `isCompact` prop will render a shorter appbar with less padding. -```typescript +```tsx import React from 'react'; import { AppBar } from 'react-magma-dom'; @@ -43,7 +46,7 @@ export function Example() { The `isInverse` prop will render an appbar with a dark background and light text. The components inside the app bar will inherit the `isInverse` prop unless specified otherwise. -```typescript +```tsx import React from 'react'; import { AppBar } from 'react-magma-dom'; @@ -58,7 +61,7 @@ The `position` prop will set the positioning type with CSS. It accepts values `a If the `position` is set to `sticky` or `fixed`, the app bar will have a small drop-shadow. -```typescript +```tsx import React from 'react'; import { AppBar, AppBarPosition, Heading, Paragraph } from 'react-magma-dom'; @@ -105,7 +108,7 @@ export function Example() { This is a more complex example of putting mutliple elements inside an `AppBar`. -```typescript +```tsx import React from 'react'; import { AppBar, @@ -157,10 +160,10 @@ export function Example() { } ``` -# AppBar Props +## AppBar Props **Any other props supplied will be provided to the wrapping `header` element.** - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api/badge.mdx b/website/react-magma-docs/src/pages/api/badge.mdx index e47382348d..7f0ce9a2be 100644 --- a/website/react-magma-docs/src/pages/api/badge.mdx +++ b/website/react-magma-docs/src/pages/api/badge.mdx @@ -5,12 +5,11 @@ props: - BadgeProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - - Badges are a small labeling component, used to highlight key pieces of information. + Badges are a small labeling component, used to highlight key pieces of + information. ## Basic Usage @@ -31,14 +30,21 @@ The `counter` is for displaying a numeric count, and can be used inside a button ```tsx import React from 'react'; -import { Badge, BadgeColor, BadgeVariant, Button, ButtonGroup } from 'react-magma-dom'; +import { + Badge, + BadgeColor, + BadgeVariant, + Button, + ButtonGroup, +} from 'react-magma-dom'; export function Example() { return ( <> Label 99+ -

+
+
); } @@ -204,7 +200,7 @@ export function Example() { ### Text File Example -```typescript +```tsx import React from 'react'; import { Dropzone } from '@react-magma/dropzone'; import { Textarea } from 'react-magma-dom'; @@ -245,9 +241,9 @@ export function Example() { ### CSV Example -```typescript +```tsx import React from 'react'; -import { DataGrid } from 'react-magma-dom'; +import { Datagrid } from 'react-magma-dom'; import { Dropzone } from '@react-magma/dropzone'; export function Example() { @@ -311,7 +307,7 @@ export function Example() { } ``` -## File Uploader Props +## Dropzone Props **Any other props supplied will be provided to the wrapping `div` element.** diff --git a/website/react-magma-docs/src/pages/api/flex.mdx b/website/react-magma-docs/src/pages/api/flex.mdx index aadad26b11..99e487717a 100644 --- a/website/react-magma-docs/src/pages/api/flex.mdx +++ b/website/react-magma-docs/src/pages/api/flex.mdx @@ -5,8 +5,6 @@ props: - FlexProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/form.mdx b/website/react-magma-docs/src/pages/api/form.mdx index c3a2c5abea..2d84b46d52 100644 --- a/website/react-magma-docs/src/pages/api/form.mdx +++ b/website/react-magma-docs/src/pages/api/form.mdx @@ -5,8 +5,6 @@ props: - FormProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -16,7 +14,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Basic Usage -```typescript +```tsx import React from 'react'; import { Button, @@ -55,7 +53,7 @@ export function Example() { ## Inverse -```typescript +```tsx import React from 'react'; import { Button, diff --git a/website/react-magma-docs/src/pages/api/formgroup.mdx b/website/react-magma-docs/src/pages/api/formgroup.mdx index 87a95ca25c..57bc3aaf82 100644 --- a/website/react-magma-docs/src/pages/api/formgroup.mdx +++ b/website/react-magma-docs/src/pages/api/formgroup.mdx @@ -5,13 +5,14 @@ props: - FormGroupProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - -FormGroup components wrap controls such as the Checkbox and Toggle components. -For Radio Buttons, you should use the Radio Group component. + FormGroup components wrap controls such as the{' '} + Checkbox and{' '} + Toggle components. For{' '} + Radio Buttons, you should use the{' '} + Radio Group component. ## Basic Usage @@ -21,7 +22,6 @@ form groups should be used to make that association, both visually and for users The label/group association will be handled via the passed in `id` if one is supplied or via an auto-generated `id` if not supplied. - ```tsx import React from 'react'; import { FormGroup, Checkbox, Toggle } from 'react-magma-dom'; @@ -73,7 +73,7 @@ export function Example() { - + Labelled by H3 @@ -117,10 +117,7 @@ import { FormGroup, Checkbox } from 'react-magma-dom'; export function Example() { return ( - + @@ -157,4 +154,4 @@ All of the [global HTML attributes](https://developer.mozilla.org/en-US/docs/Web - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api/global-styles.mdx b/website/react-magma-docs/src/pages/api/global-styles.mdx index b65e2b1a83..4288dc047d 100644 --- a/website/react-magma-docs/src/pages/api/global-styles.mdx +++ b/website/react-magma-docs/src/pages/api/global-styles.mdx @@ -3,8 +3,6 @@ pageTitle: Global Styles API title: Global Styles --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/grid.mdx b/website/react-magma-docs/src/pages/api/grid.mdx index c071a8c4c9..7aabd8f04d 100644 --- a/website/react-magma-docs/src/pages/api/grid.mdx +++ b/website/react-magma-docs/src/pages/api/grid.mdx @@ -6,8 +6,6 @@ props: - GridItemProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - CSS Grid React Component @@ -18,7 +16,7 @@ The Grid component is simply a container that has `display: grid;` on it. All of Child elements can be added as they are, or inside of ``. `GridItem` accepts props that allow it to be styled to span columns or rows, and be part of a grid area. -```typescript +```tsx import React from 'react'; import { Grid, @@ -28,6 +26,7 @@ import { useMediaQuery, } from 'react-magma-dom'; +// eslint-disable-next-line complexity export function Example() { const isSmallerScreen = useMediaQuery( `(max-width:${magma.breakpoints.small}px)` @@ -145,9 +144,14 @@ export function Example() { `` and `` both accept the `as` prop to allow for semantic HTML. -```typescript +```tsx import React from 'react'; -import { Grid, GridItem, GridAlignItems, GridJustifyContent } from 'react-magma-dom'; +import { + Grid, + GridItem, + GridAlignItems, + GridJustifyContent, +} from 'react-magma-dom'; export function Example() { return ( @@ -233,11 +237,11 @@ Grids can be placed within media queries, nested inside other grids, intrinsical [The Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) on [CSS-Tricks.com](https://css-tricks.com/) explains everything about grid in depth. -# Grid Props +## Grid Props -# Grid Item Props +## Grid Item Props diff --git a/website/react-magma-docs/src/pages/api/heading.mdx b/website/react-magma-docs/src/pages/api/heading.mdx index fdfb426643..0c454f335c 100644 --- a/website/react-magma-docs/src/pages/api/heading.mdx +++ b/website/react-magma-docs/src/pages/api/heading.mdx @@ -5,8 +5,6 @@ props: - HeadingProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/hide-at-breakpoint.mdx b/website/react-magma-docs/src/pages/api/hide-at-breakpoint.mdx index f1d26ad83b..ab5f677bc3 100644 --- a/website/react-magma-docs/src/pages/api/hide-at-breakpoint.mdx +++ b/website/react-magma-docs/src/pages/api/hide-at-breakpoint.mdx @@ -5,8 +5,6 @@ props: - HideAtBreakpointProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/hyperlink.mdx b/website/react-magma-docs/src/pages/api/hyperlink.mdx index 4fd30bf221..8597a295f4 100644 --- a/website/react-magma-docs/src/pages/api/hyperlink.mdx +++ b/website/react-magma-docs/src/pages/api/hyperlink.mdx @@ -5,8 +5,6 @@ props: - HyperlinkProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -293,18 +291,28 @@ The underline text decoration can be turned off. When a hyperlink is used within ```tsx import React from 'react'; -import { Hyperlink, Spacer, SpacerAxis, magma, HyperlinkIconPosition } from 'react-magma-dom'; +import { + Hyperlink, + Spacer, + SpacerAxis, + magma, + HyperlinkIconPosition, +} from 'react-magma-dom'; import { OpenInNewIcon } from 'react-magma-icons'; export function Example() { return ( <> - - Google - - - Cupcake ipsum dolor sit amet wafer biscuit toffee. Chocolate bar - brownie lemon drops tootsie roll pudding muffin powder pudding.{' '} + + Google + + + Cupcake ipsum dolor sit amet wafer biscuit toffee. Chocolate bar brownie + lemon drops tootsie roll pudding muffin powder pudding.{' '} Icon buttons have an icon included in them. @@ -16,13 +14,13 @@ If no children are included, then they render in the icon-only style. For icon only buttons you must include an{' '} - aria-label property that accurately - describes the function of the button, so that screen-reader users will know - the button's purpose. + aria-label property that + accurately describes the function of the button, so that screen-reader users + will know the button's purpose. For icon buttons with text, an{' '} - aria-label is not needed, as the + aria-label is not needed, as the function of the button should be described in the visible button text. @@ -380,16 +378,13 @@ export function Example() { ```tsx import React from 'react'; import { - Card, - CardBody, IconButton, ButtonVariant, ButtonGroup, + Card, + CardBody, } from 'react-magma-dom'; -import { - PriorityHighIcon, - NotificationsIcon, -} from 'react-magma-icons'; +import { PriorityHighIcon, NotificationsIcon } from 'react-magma-icons'; export function Example() { return ( @@ -500,4 +495,4 @@ All of the [standard button attributes](https://developer.mozilla.org/en-US/docs - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api/icon.mdx b/website/react-magma-docs/src/pages/api/icon.mdx index 77b2d3898d..26ac0e24f5 100644 --- a/website/react-magma-docs/src/pages/api/icon.mdx +++ b/website/react-magma-docs/src/pages/api/icon.mdx @@ -3,8 +3,6 @@ pageTitle: Icon API title: Icon --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -101,9 +99,10 @@ export function Example() { ## Available Icons -```typescript noCode noCodeSandbox noCopy noBorder +```tsx noCode noCodeSandbox noCopy noBorder import React from 'react'; import ICONS from 'react-magma-icons'; +import { Heading } from 'react-magma-dom'; export function Example() { return ( @@ -114,9 +113,9 @@ export function Example() { b = b.toLowerCase(); return a > b ? 1 : a < b ? -1 : 0; }) - .map(category => { + .map((category, idx) => { return ( -
+
{category}
{ICONS.categories[category].map(icon => { @@ -128,7 +127,7 @@ export function Example() {
- {icon} + {icon} ); })} diff --git a/website/react-magma-docs/src/pages/api/indeterminate.mdx b/website/react-magma-docs/src/pages/api/indeterminate.mdx index aaf3ee7234..cd822bf8f8 100644 --- a/website/react-magma-docs/src/pages/api/indeterminate.mdx +++ b/website/react-magma-docs/src/pages/api/indeterminate.mdx @@ -5,8 +5,6 @@ props: - IndeterminateCheckboxProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/input.mdx b/website/react-magma-docs/src/pages/api/input.mdx index 3769d5ba5a..9a1936a8de 100644 --- a/website/react-magma-docs/src/pages/api/input.mdx +++ b/website/react-magma-docs/src/pages/api/input.mdx @@ -3,8 +3,6 @@ pageTitle: Input API title: Input --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -220,7 +218,7 @@ export function Example() { Character Counter is enabled when using the `maxCount` prop. As the user types past the allowable length, an error state appears showing the overrage. -```typescript +```tsx import React from 'react'; import { Input } from 'react-magma-dom'; @@ -501,7 +499,7 @@ export function Example() { import React from 'react'; import { Input } from 'react-magma-dom'; export function Example() { - const [focused, setFocused] = React.useState(false); + const [, setFocused] = React.useState(false); const [message, setMessage] = React.useState(''); function changeFocusedMessage() { diff --git a/website/react-magma-docs/src/pages/api/internationalization.mdx b/website/react-magma-docs/src/pages/api/internationalization.mdx index 2ff6f10ef8..8854ff57e0 100644 --- a/website/react-magma-docs/src/pages/api/internationalization.mdx +++ b/website/react-magma-docs/src/pages/api/internationalization.mdx @@ -3,8 +3,6 @@ pageTitle: Internationalization API title: Internationalization --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -36,7 +34,7 @@ There are some values in the context that are used to localize date and time. Th ## Default Context Object -```typescript noCode noCopy noCodeSandbox +```tsx noCode noCopy noCodeSandbox import React from 'react'; import { defaultI18n } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/line-chart.mdx b/website/react-magma-docs/src/pages/api/line-chart.mdx index 7a6eac2115..79ecb30d71 100644 --- a/website/react-magma-docs/src/pages/api/line-chart.mdx +++ b/website/react-magma-docs/src/pages/api/line-chart.mdx @@ -3,12 +3,11 @@ pageTitle: LineChart API title: LineChart --- -import { LeadParagraph } from '../../components/LeadParagraph'; - - LineChart is deprecated. Use Chart instead. + LineChart is deprecated. Use{' '} + Chart instead. A line chart component diff --git a/website/react-magma-docs/src/pages/api/list.mdx b/website/react-magma-docs/src/pages/api/list.mdx index 5aad562914..79802ec064 100644 --- a/website/react-magma-docs/src/pages/api/list.mdx +++ b/website/react-magma-docs/src/pages/api/list.mdx @@ -6,8 +6,6 @@ props: - ListItemProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -19,8 +17,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; By default `List` uses an unorganized markup `
    `. - -```typescript +```tsx import React from 'react'; import { List, ListItem } from 'react-magma-dom'; @@ -82,19 +79,21 @@ Another method of `List` is the ordered list `
      `. There are several methods o - The `isReversed` prop changes the order from ascending to descending numbers or letters. - The `listType` prop allows for changing the bulleted items from a number to lowercase letters, uppercase letters, lowercase Roman numerals, or uppercase Roman numerals. -```typescript +```tsx import React from 'react'; import { List, ListItem, olListType } from 'react-magma-dom'; export function Example() { return ( - + Fruits - + Apples Bananas Oranges @@ -102,26 +101,17 @@ export function Example() { Vegetables - + Leafy greens - + Spinach Kale Root vegetables - + Carrots Potatoes @@ -130,10 +120,7 @@ export function Example() { Dairy - + Milk Cheese @@ -147,7 +134,7 @@ export function Example() { The `description` prop is a boolean which changes a nested list item into a styled paragraph. -```typescript +```tsx import React from 'react'; import { List, ListItem } from 'react-magma-dom'; @@ -162,9 +149,7 @@ export function Example() { German Shepherd - - Courageous, energetic, loyal - + Courageous, energetic, loyal Labrador Retriever @@ -174,9 +159,7 @@ export function Example() { American Bully - - Strong, athletic, affectionate - + Strong, athletic, affectionate @@ -198,7 +181,7 @@ An Icon `List` allows the user to use Magma Icons in place of bulleted or numeri ### Icon sizes -```typescript +```tsx import React from 'react'; import { List, ListItem, IconSizes } from 'react-magma-dom'; import { InboxIcon, DraftsIcon, DeleteIcon } from 'react-magma-icons'; @@ -211,13 +194,13 @@ export function Example() { }>Drafts }>Trash -
      +
      }>Inbox }>Drafts }>Trash -
      +
      }>Inbox }>Drafts @@ -230,9 +213,9 @@ export function Example() { ### Icon Alignment -```typescript +```tsx import React from 'react'; -import { List, ListItem, IconAlignment, magma } from 'react-magma-dom'; +import { List, ListItem, IconAlignment } from 'react-magma-dom'; import { EmailIcon } from 'react-magma-icons'; export function Example() { @@ -256,7 +239,7 @@ export function Example() { ### Icon colors -```typescript +```tsx import React from 'react'; import { List, ListItem } from 'react-magma-dom'; import { EmailIcon } from 'react-magma-icons'; @@ -295,7 +278,7 @@ export function Example() { The `isInverse` prop will render a dark background and light text. The children will inherit the `isInverse` prop unless specified otherwise. -```typescript +```tsx import React from 'react'; import { Card, CardBody, List, ListItem } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/loading-indicator.mdx b/website/react-magma-docs/src/pages/api/loading-indicator.mdx index c0af586952..635234fc9f 100644 --- a/website/react-magma-docs/src/pages/api/loading-indicator.mdx +++ b/website/react-magma-docs/src/pages/api/loading-indicator.mdx @@ -5,8 +5,6 @@ props: - LoadingIndicatorProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/modal.mdx b/website/react-magma-docs/src/pages/api/modal.mdx index bd2792b990..32243b1e4a 100644 --- a/website/react-magma-docs/src/pages/api/modal.mdx +++ b/website/react-magma-docs/src/pages/api/modal.mdx @@ -5,8 +5,6 @@ props: - ModalProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/native-select.mdx b/website/react-magma-docs/src/pages/api/native-select.mdx index 94fd82f453..f0b80ffa54 100644 --- a/website/react-magma-docs/src/pages/api/native-select.mdx +++ b/website/react-magma-docs/src/pages/api/native-select.mdx @@ -5,8 +5,6 @@ props: - NativeSelectProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -16,7 +14,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Basic Usage -```typescript +```tsx import React from 'react'; import { NativeSelect } from 'react-magma-dom'; @@ -33,7 +31,7 @@ export function Example() { ## Uncontrolled Select -```typescript +```tsx import React from 'react'; import { NativeSelect } from 'react-magma-dom'; export function Example() { @@ -64,7 +62,7 @@ export function Example() { ## Controlled Select -```typescript +```tsx import React from 'react'; import { NativeSelect } from 'react-magma-dom'; export function Example() { @@ -85,7 +83,7 @@ export function Example() { ## Disabled -```typescript +```tsx import React from 'react'; import { NativeSelect } from 'react-magma-dom'; @@ -102,7 +100,7 @@ export function Example() { ## Error -```typescript +```tsx import React from 'react'; import { NativeSelect } from 'react-magma-dom'; @@ -123,7 +121,7 @@ export function Example() { ## Helper Message -```typescript +```tsx import React from 'react'; import { NativeSelect } from 'react-magma-dom'; @@ -222,7 +220,7 @@ export function Example() { The `isInverse` prop will render a dark background and light text. The children will inherit the `isInverse` prop unless specified otherwise. -```typescript +```tsx import React from 'react'; import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom'; @@ -247,7 +245,7 @@ export function Example() { ## Inverse Disabled -```typescript +```tsx import React from 'react'; import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom'; @@ -273,7 +271,7 @@ export function Example() { ## Inverse with Error -```typescript +```tsx import React from 'react'; import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom'; @@ -299,7 +297,7 @@ export function Example() { ## Inverse Helper Message -```typescript +```tsx import React from 'react'; import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/nav-tabs.mdx b/website/react-magma-docs/src/pages/api/nav-tabs.mdx index 0a6619d3a5..9d3453109f 100644 --- a/website/react-magma-docs/src/pages/api/nav-tabs.mdx +++ b/website/react-magma-docs/src/pages/api/nav-tabs.mdx @@ -6,8 +6,6 @@ props: - NavTabComponentProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/pagination.mdx b/website/react-magma-docs/src/pages/api/pagination.mdx index dacf8698ba..3cd7ff2193 100644 --- a/website/react-magma-docs/src/pages/api/pagination.mdx +++ b/website/react-magma-docs/src/pages/api/pagination.mdx @@ -7,8 +7,6 @@ props: - UncontrolledPaginationProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -19,7 +17,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; For expanded page content, the `Pagination` component may be added. `Pagination` takes props for count, which is the total number of navigable indices within the component. Additional functions include `defaultPage`, `isInverse`, and `size`. -```typescript +```tsx import React from 'react'; import { Pagination } from 'react-magma-dom'; @@ -34,7 +32,7 @@ An alternative presentation of `Pagination` is available with the `type` prop wh Please note that the `Pagination` props of `numberOfAdjacentPages`, `numberOfEdgePages`, `size`, `showFirstButton`, and `showLastButton` are not applicable to this type. -```typescript +```tsx import React from 'react'; import { Pagination, PaginationType } from 'react-magma-dom'; @@ -48,7 +46,7 @@ export function Example() { The `isInverse` property is an optional boolean, that reverses the colors so that the buttons can better appear on a dark background. The default value is `false`. -```typescript +```tsx import React from 'react'; import { Card, CardBody, Pagination } from 'react-magma-dom'; @@ -67,7 +65,7 @@ export function Example() { `size` allows for changing the scale of the `Pagination` component. Two props are allowed, `medium` and `large`. -```typescript +```tsx import React from 'react'; import { Pagination } from 'react-magma-dom'; @@ -80,7 +78,7 @@ export function Example() { `pageChange` passes the active data state of the `Pagination` component. -```typescript +```tsx import React from 'react'; import { Pagination } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/paragraph.mdx b/website/react-magma-docs/src/pages/api/paragraph.mdx index d5c007e402..b36327394c 100644 --- a/website/react-magma-docs/src/pages/api/paragraph.mdx +++ b/website/react-magma-docs/src/pages/api/paragraph.mdx @@ -5,8 +5,6 @@ props: - ParagraphProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/password-input.mdx b/website/react-magma-docs/src/pages/api/password-input.mdx index 315588e919..78d347537e 100644 --- a/website/react-magma-docs/src/pages/api/password-input.mdx +++ b/website/react-magma-docs/src/pages/api/password-input.mdx @@ -5,8 +5,6 @@ props: - PasswordInputProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/progress-bar.mdx b/website/react-magma-docs/src/pages/api/progress-bar.mdx index 35ea346196..5a161c06b1 100644 --- a/website/react-magma-docs/src/pages/api/progress-bar.mdx +++ b/website/react-magma-docs/src/pages/api/progress-bar.mdx @@ -5,8 +5,6 @@ props: - ProgressBarProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -125,11 +123,7 @@ export function Example() { percentage={72} />
      - + diff --git a/website/react-magma-docs/src/pages/api/radio.mdx b/website/react-magma-docs/src/pages/api/radio.mdx index 4369b42ce3..28ce19ec35 100644 --- a/website/react-magma-docs/src/pages/api/radio.mdx +++ b/website/react-magma-docs/src/pages/api/radio.mdx @@ -6,8 +6,6 @@ props: - RadioGroupProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -487,9 +485,9 @@ export function Example() { if (!radioRef.current) { setRadioGroupVal(null); } else if (radioRef.current.checked) { - setRadioGroupVal(""); + setRadioGroupVal(''); } else if (!radioRef.current.checked) { - setRadioGroupVal("1"); + setRadioGroupVal('1'); } } diff --git a/website/react-magma-docs/src/pages/api/schema-renderer.mdx b/website/react-magma-docs/src/pages/api/schema-renderer.mdx index 0f60cb464e..02948c97de 100644 --- a/website/react-magma-docs/src/pages/api/schema-renderer.mdx +++ b/website/react-magma-docs/src/pages/api/schema-renderer.mdx @@ -3,8 +3,6 @@ pageTitle: Schema Renderer API title: Schema Renderer --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -234,8 +232,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, } from '@react-magma/schema-renderer'; import { InputType } from 'react-magma-dom'; @@ -294,8 +290,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, } from '@react-magma/schema-renderer'; import { InputType } from 'react-magma-dom'; @@ -344,8 +338,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, } from '@react-magma/schema-renderer'; export function Example() { @@ -428,8 +420,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, } from '@react-magma/schema-renderer'; import { InputType } from 'react-magma-dom'; @@ -489,8 +479,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, } from '@react-magma/schema-renderer'; export function Example() { @@ -532,11 +520,9 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, validatorTypes, } from '@react-magma/schema-renderer'; -import { Alert, AlertVariant, InputType } from 'react-magma-dom'; +import { InputType } from 'react-magma-dom'; export function Example() { const schema: Schema = { @@ -693,9 +679,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, - validatorTypes, } from '@react-magma/schema-renderer'; export function Example() { @@ -744,9 +727,6 @@ import { Schema, templateTypes, componentTypes, - componentMapper, - ComponentMapper, - validatorTypes, } from '@react-magma/schema-renderer'; const mockEndpoint = value => diff --git a/website/react-magma-docs/src/pages/api/search.mdx b/website/react-magma-docs/src/pages/api/search.mdx index e124a7c7f9..3586bbd679 100644 --- a/website/react-magma-docs/src/pages/api/search.mdx +++ b/website/react-magma-docs/src/pages/api/search.mdx @@ -5,8 +5,6 @@ props: - SearchProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -94,7 +92,12 @@ export function Example() { return ( - {}} /> + { + handleSearch(term); + }} + /> ); diff --git a/website/react-magma-docs/src/pages/api/select.mdx b/website/react-magma-docs/src/pages/api/select.mdx index 70f1b86bb8..8ced084a1c 100644 --- a/website/react-magma-docs/src/pages/api/select.mdx +++ b/website/react-magma-docs/src/pages/api/select.mdx @@ -5,8 +5,6 @@ props: - SelectProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -69,14 +67,14 @@ export function Example() { Set initial state using the `initialSelectedItem`, `initialSelectedItems`, and `initialHighlightedIndex` props. - When using any of the initial* props - be aware that passing in the controlled version of that prop will overwrite - the initial version. + When using any of the initial*{' '} + props be aware that passing in the controlled version of that prop will + overwrite the initial version.

      Ex: - selectedItem takes precedence over{' '} - initialSelectedItem + selectedItem takes precedence + over initialSelectedItem       ```tsx @@ -513,16 +511,6 @@ export function Example() { updateSelectedItem(changes.selectedItem); } - const [selectedItems, updateSelectedItems] = React.useState([]); - - function handleSelectedItemsChange(changes) { - updateSelectedItems(changes.selectedItems); - } - - function handleRemoveSelectedItem(removedItem) { - updateSelectedItems(selectedItems.filter(item => item !== removedItem)); - } - return ( @@ -647,22 +635,27 @@ export function Example() { switch (type) { case SelectStateChangeTypes.ToggleButtonClick: updateIsOpen(!isOpen); + break; case SelectStateChangeTypes.ToggleButtonKeyDownArrowDown: updateIsOpen(newChanges.isOpen); updateHighlightedIndex(newChanges.highlightedIndex); + break; case SelectStateChangeTypes.ItemMouseMove: case SelectStateChangeTypes.FunctionSetHighlightedIndex: case SelectStateChangeTypes.MenuKeyDownArrowDown: case SelectStateChangeTypes.MenuKeyDownArrowUp: updateHighlightedIndex(newChanges.highlightedIndex); + break; case SelectStateChangeTypes.MenuKeyDownEscape: case SelectStateChangeTypes.MenuBlur: updateIsOpen(false); updateHighlightedIndex(newChanges.highlightedIndex); + break; case SelectStateChangeTypes.ItemClick: updateHighlightedIndex(newChanges.highlightedIndex); updateIsOpen(newChanges.isOpen); updateSelectedItem(newChanges.selectedItem); + break; default: break; } @@ -1208,13 +1201,13 @@ corresponds to a `stateChangeTypes` property. The list of all the possible types In the development environment these types equate to strings
      (eg:{' '} - + ComboboxStateChangeTypes.InputKeyDownArrowDown = '__input_keydown_arrow_down__' ). However, in the production environment the types equate to numbers
      - (eg: + (eg: ComboboxStateChangeTypes.InputKeyDownArrowDown = 0 ).       @@ -1303,7 +1296,7 @@ corresponds to a `stateChangeTypes` property. The list of all the possible types ### MultiSelect -
      +
      • diff --git a/website/react-magma-docs/src/pages/api/skip-link.mdx b/website/react-magma-docs/src/pages/api/skip-link.mdx index 8c42ea3890..9801a22cbe 100644 --- a/website/react-magma-docs/src/pages/api/skip-link.mdx +++ b/website/react-magma-docs/src/pages/api/skip-link.mdx @@ -6,8 +6,6 @@ props: - SkipLinkContentProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -45,10 +43,8 @@ const SideNav = ({ length }) => { return ( @@ -95,10 +91,8 @@ const SideNav = ({ length }) => { return ( @@ -136,10 +130,8 @@ const SideNav = ({ length }) => { return ( @@ -178,10 +170,8 @@ const SideNav = ({ length }) => { return ( diff --git a/website/react-magma-docs/src/pages/api/spacer.mdx b/website/react-magma-docs/src/pages/api/spacer.mdx index 5105d78705..4bcbd4ab78 100644 --- a/website/react-magma-docs/src/pages/api/spacer.mdx +++ b/website/react-magma-docs/src/pages/api/spacer.mdx @@ -5,8 +5,6 @@ props: - SpacerProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -18,7 +16,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; The `size` prop is required and will set the height and width of the `Spacer` component. This value can either be a number or a string. If a number is used, the size will be set in pixels. -```typescript +```tsx import React from 'react'; import { Card, CardBody, Spacer, magma } from 'react-magma-dom'; @@ -49,7 +47,7 @@ export function Example() { By default, the `Spacer` component use the size for both height and width. However, the `axis` prop can be used if you only wish to create horizontal or vertical space. It accepts the options `SpacerAxis.horizontal`, `SpacerAxis.vertical` and `SpacerAxis.both` (default). -```typescript +```tsx import React from 'react'; import { Button, Spacer, SpacerAxis, magma } from 'react-magma-dom'; @@ -64,7 +62,7 @@ export function Example() { } ``` -# Spacer Props +## Spacer Props **Any other props supplied will be provided to the wrapping `span` element.** diff --git a/website/react-magma-docs/src/pages/api/spinner.mdx b/website/react-magma-docs/src/pages/api/spinner.mdx index d30c2861f7..a5c48dca2d 100644 --- a/website/react-magma-docs/src/pages/api/spinner.mdx +++ b/website/react-magma-docs/src/pages/api/spinner.mdx @@ -5,8 +5,6 @@ props: - SpinnerProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/stepper.mdx b/website/react-magma-docs/src/pages/api/stepper.mdx index 7610d13783..54b9d555c2 100644 --- a/website/react-magma-docs/src/pages/api/stepper.mdx +++ b/website/react-magma-docs/src/pages/api/stepper.mdx @@ -7,8 +7,6 @@ props: - ResponsiveStepperContainerProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -21,7 +19,7 @@ The Stepper consists of two components, the `Stepper` which acts like a wrapper Throughout the series of `Step`s, the prop `currentStep` sets the appropriate styling between incomplete, active, and complete. -```typescript +```tsx import React from 'react'; import { Container, @@ -97,9 +95,16 @@ export function Example() { When using `layout` with `StepperLayout.summaryView`, the option to change the step label may be done with the `stepLabel` which takes a string and replaces the default "Step" label. -```typescript +```tsx import React from 'react'; -import { Container, Stepper, Step, StepperLayout, Button, ButtonGroup } from 'react-magma-dom'; +import { + Container, + Stepper, + Step, + StepperLayout, + Button, + ButtonGroup, +} from 'react-magma-dom'; export function Example() { const [currentStep, setCurrentStep] = React.useState(0); @@ -165,9 +170,16 @@ export function Example() { When using layout `StepperLayout.summaryView`, after all of the steps are complete, the `completionLabel` prop takes a string and changes the title. -```typescript +```tsx import React from 'react'; -import { Container, Stepper, Step, StepperLayout, Button, ButtonGroup } from 'react-magma-dom'; +import { + Container, + Stepper, + Step, + StepperLayout, + Button, + ButtonGroup, +} from 'react-magma-dom'; export function Example() { const [currentStep, setCurrentStep] = React.useState(4); @@ -236,7 +248,7 @@ export function Example() { For proper accessibility usage, the `ariaLabel` prop takes a string to idenitify the `Stepper` to screenreaders appropriately. -```typescript +```tsx import React from 'react'; import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; @@ -304,7 +316,7 @@ For alternative layouts, the `layout` prop hides either labels or shows just the #### Layout - Hide Labels -```typescript +```tsx import React from 'react'; import { StepperLayout, @@ -379,7 +391,7 @@ export function Example() { #### Layout - Show Labels -```typescript +```tsx import React from 'react'; import { StepperLayout, @@ -454,7 +466,7 @@ export function Example() { #### Layout - Summary View -```typescript +```tsx import React from 'react'; import { StepperLayout, @@ -533,7 +545,7 @@ For responsive layouts, the `breakpoint` prop used along with `breakpointLayout` #### Breakpoint - Show Labels -```typescript +```tsx import React from 'react'; import { StepperLayout, @@ -610,7 +622,7 @@ export function Example() { #### Breakpoint - Hide Labels -```typescript +```tsx import React from 'react'; import { StepperLayout, @@ -686,7 +698,7 @@ export function Example() { #### Breakpoint - Summary View -```typescript +```tsx import React from 'react'; import { StepperLayout, @@ -766,7 +778,7 @@ The `orientation` prop allows you to change the orientation of the `Stepper`. By #### Vertical orientation -```typescript +```tsx import React from 'react'; import { Container, @@ -862,7 +874,7 @@ export function Example() { ## Stepper inside a Dropdown -```typescript +```tsx import React from 'react'; import { Dropdown, @@ -944,7 +956,7 @@ export function Example() { For responsive layouts, the `breakpoint` prop can be used in combination with the `breakpointOrientation` prop to change the `Stepper`’s orientation based on screen width. The `breakpoint` prop sets a maximum screen width, and `breakpointOrientation` defines the desired orientation (horizontal or vertical) when the screen width is below the specified breakpoint. By default, the `Stepper` is displayed horizontally if no responsive props are used. It is recommended to use `breakpointOrientation` with `ResponsiveStepperContainer` for optimal behavior. -```typescript +```tsx import React from 'react'; import { Container, @@ -1036,13 +1048,11 @@ export function Example() { When a `Step` is in the error state, use `hasError` on the `Step` to change the styling. -```typescript +```tsx import React from 'react'; import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; export function Example() { - const [currentStep, setCurrentStep] = React.useState(0); - return ( <> @@ -1076,7 +1086,7 @@ export function Example() { ## Inverse -```typescript +```tsx import React from 'react'; import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/table.mdx b/website/react-magma-docs/src/pages/api/table.mdx index 55fdecdd0b..1b58e93ead 100644 --- a/website/react-magma-docs/src/pages/api/table.mdx +++ b/website/react-magma-docs/src/pages/api/table.mdx @@ -15,12 +15,12 @@ props: - UncontrolledRowsPerPageProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - -Tables are used to organize and display information from a data set efficiently. A table contains a header row at the top that lists column names, followed by rows for data. + Tables are used to organize and display information from a data set + efficiently. A table contains a header row at the top that lists column names, + followed by rows for data. ## Basic Usage @@ -466,7 +466,6 @@ import { TableBody, TableCell, TableSortDirection, - magma, } from 'react-magma-dom'; export function Example() { @@ -1081,4 +1080,4 @@ All of the [global HTML attributes](https://developer.mozilla.org/en-US/docs/Web - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/api/tabs.mdx b/website/react-magma-docs/src/pages/api/tabs.mdx index 55fc4d9272..10ea8b7502 100644 --- a/website/react-magma-docs/src/pages/api/tabs.mdx +++ b/website/react-magma-docs/src/pages/api/tabs.mdx @@ -11,8 +11,6 @@ props: - TabsContainerProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -77,7 +75,6 @@ import { TabPanelsContainer, TabPanel, TabsOrientation, - magma, } from 'react-magma-dom'; export function Example() { @@ -126,7 +123,6 @@ import { TabPanelsContainer, TabPanel, TabsBorderPosition, - magma, } from 'react-magma-dom'; export function Example() { @@ -174,7 +170,6 @@ import { TabPanel, TabsBorderPosition, TabsOrientation, - magma, } from 'react-magma-dom'; export function Example() { @@ -265,7 +260,6 @@ import { Tab, TabPanelsContainer, TabPanel, - magma, } from 'react-magma-dom'; export function Example() { @@ -354,7 +348,6 @@ import { Tab, TabPanelsContainer, TabPanel, - magma, } from 'react-magma-dom'; export function Example() { @@ -537,7 +530,6 @@ import { Tab, TabPanelsContainer, TabPanel, - magma, } from 'react-magma-dom'; export function Example() { @@ -598,7 +590,6 @@ import { TabPanelsContainer, TabPanel, TabsOrientation, - magma, } from 'react-magma-dom'; export function Example() { @@ -654,11 +645,7 @@ Please note that a containing div has been used to showcase the scrolling behavi ```tsx import React from 'react'; -import { - TabsScrollSpyContainer, - TabScrollSpyPanel, - magma, -} from 'react-magma-dom'; +import { TabsScrollSpyContainer, TabScrollSpyPanel } from 'react-magma-dom'; export function Example() { return ( @@ -792,7 +779,6 @@ import { Tab, TabPanelsContainer, TabPanel, - magma, } from 'react-magma-dom'; import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons'; @@ -838,7 +824,6 @@ import { Tab, TabPanelsContainer, TabPanel, - magma, } from 'react-magma-dom'; import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons'; @@ -882,7 +867,6 @@ import { TabPanelsContainer, TabPanel, TabsOrientation, - magma, } from 'react-magma-dom'; import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons'; @@ -997,7 +981,6 @@ import { TabPanel, TabsOrientation, TabsIconPosition, - magma, } from 'react-magma-dom'; import { EmailIcon, AndroidIcon, BellIcon } from 'react-magma-icons'; diff --git a/website/react-magma-docs/src/pages/api/tag.mdx b/website/react-magma-docs/src/pages/api/tag.mdx index 16f3246e5b..3d5e505df9 100644 --- a/website/react-magma-docs/src/pages/api/tag.mdx +++ b/website/react-magma-docs/src/pages/api/tag.mdx @@ -6,8 +6,6 @@ props: - ClickableTagProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -16,7 +14,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Basic Usage -```typescript +```tsx import React from 'react'; import { Tag } from 'react-magma-dom'; @@ -52,7 +50,7 @@ export function Example() { ## Tag With Icon -```typescript +```tsx import React from 'react'; import { Spacer, SpacerAxis, Tag, magma } from 'react-magma-dom'; import { AccountCircleIcon } from 'react-magma-icons'; @@ -72,7 +70,7 @@ export function Example() { ## Clickable Tag -```typescript +```tsx import React from 'react'; import { Tag } from 'react-magma-dom'; @@ -94,7 +92,7 @@ export function Example() { ## Deletable Tag -```typescript +```tsx import React from 'react'; import { Button, @@ -162,7 +160,7 @@ export function Example() { ## Deletable Tag With Icon -```typescript +```tsx import React from 'react'; import { Button, diff --git a/website/react-magma-docs/src/pages/api/textarea.mdx b/website/react-magma-docs/src/pages/api/textarea.mdx index b23fd6e490..5acd515089 100644 --- a/website/react-magma-docs/src/pages/api/textarea.mdx +++ b/website/react-magma-docs/src/pages/api/textarea.mdx @@ -5,8 +5,6 @@ props: - TextareaProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - A Textarea is an input field for long content. @@ -67,7 +65,7 @@ export function Example() { ## Character Counter -```typescript +```tsx import React from 'react'; import { Textarea } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/time-picker.mdx b/website/react-magma-docs/src/pages/api/time-picker.mdx index 5062fd01b9..d0da6a0af9 100644 --- a/website/react-magma-docs/src/pages/api/time-picker.mdx +++ b/website/react-magma-docs/src/pages/api/time-picker.mdx @@ -5,8 +5,6 @@ props: - TimePickerProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/toast.mdx b/website/react-magma-docs/src/pages/api/toast.mdx index ab0ef5e19d..7ff5779504 100644 --- a/website/react-magma-docs/src/pages/api/toast.mdx +++ b/website/react-magma-docs/src/pages/api/toast.mdx @@ -6,8 +6,6 @@ props: - ToastsContainerProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -17,7 +15,9 @@ import { LeadParagraph } from '../../components/LeadParagraph'; - Toast messages can only be 1 or 2 lines long and have a max-width of 600px. If your message is longer than that, please shorten it or use a different component. + Toast messages can only be 1 or 2 lines long and have a max-width of 600px. If + your message is longer than that, please shorten it or use a different + component. ## Basic Usage @@ -61,13 +61,10 @@ import React from 'react'; import { Announce, Button, - ButtonColor, ButtonGroup, - Card, Toast, ToastsContainer, AlertVariant, - Spacer, } from 'react-magma-dom'; export function Example() { @@ -472,13 +469,11 @@ import React from 'react'; import { Announce, Button, - ButtonColor, ButtonGroup, Card, Toast, ToastsContainer, AlertVariant, - Spacer, } from 'react-magma-dom'; export function Example() { diff --git a/website/react-magma-docs/src/pages/api/toggle-button-group.mdx b/website/react-magma-docs/src/pages/api/toggle-button-group.mdx index e8c0e03b66..77e9946f4c 100644 --- a/website/react-magma-docs/src/pages/api/toggle-button-group.mdx +++ b/website/react-magma-docs/src/pages/api/toggle-button-group.mdx @@ -5,8 +5,6 @@ props: - ToggleButtonGroupProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -18,7 +16,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; The Toggle Button Group enables styling and selection states across a group of ToggleButtons. -```typescript +```tsx import React from 'react'; import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; import { @@ -60,7 +58,7 @@ export function Example() { Using the same `value` between `ToggleButtonGroup` and `ToggleButton` allows a user to define preselected buttons. -```typescript +```tsx import React from 'react'; import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; import { @@ -102,15 +100,14 @@ export function Example() { When `exclusive` is enabled, it ensures a radio style ToggleButtonGroup has at least one selected state. -```typescript +```tsx import React from 'react'; -import { ButtonSize, ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; +import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; import { FormatAlignLeftIcon, FormatAlignCenterIcon, FormatAlignRightIcon, FormatAlignJustifyIcon, - SettingsIcon, } from 'react-magma-icons'; export function Example() { @@ -147,20 +144,14 @@ The `enforced` prop requires that at least one button be selected (after first s The `enforced` prop in conjunction with `exclusive` allows just one toggled button across the group like a radio. -```typescript +```tsx import React from 'react'; -import { - ButtonSize, - ToggleButton, - ToggleButtonGroup, - Spacer, -} from 'react-magma-dom'; +import { ToggleButton, ToggleButtonGroup, Spacer } from 'react-magma-dom'; import { FormatAlignLeftIcon, FormatAlignCenterIcon, FormatAlignRightIcon, FormatAlignJustifyIcon, - SettingsIcon, } from 'react-magma-icons'; export function Example() { @@ -220,7 +211,7 @@ export function Example() { Removes margins and border radius on each button then applies the border-radius around the container. -```typescript +```tsx import React from 'react'; import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; import { @@ -262,7 +253,7 @@ export function Example() { Three sizes are configurable with the `ButtonSize` prop between `small`, `medium` (default), and `large` across the group. -```typescript +```tsx import React from 'react'; import { ButtonSize, ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; @@ -281,14 +272,9 @@ export function Example() { ## Inverse -```typescript +```tsx import React from 'react'; -import { - ButtonSize, - Container, - ToggleButton, - ToggleButtonGroup, -} from 'react-magma-dom'; +import { Container, ToggleButton, ToggleButtonGroup } from 'react-magma-dom'; export function Example() { return ( diff --git a/website/react-magma-docs/src/pages/api/toggle-button.mdx b/website/react-magma-docs/src/pages/api/toggle-button.mdx index 1a10f7b3b9..005f4786a1 100644 --- a/website/react-magma-docs/src/pages/api/toggle-button.mdx +++ b/website/react-magma-docs/src/pages/api/toggle-button.mdx @@ -6,8 +6,6 @@ props: - ToggleButtonIconProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -17,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Basic Usage -```typescript +```tsx import React from 'react'; import { ToggleButton } from 'react-magma-dom'; @@ -30,7 +28,7 @@ export function Example() { When a pre-selected state is needed, `isChecked` enables an active selected state on render. -```typescript +```tsx import React from 'react'; import { ToggleButton } from 'react-magma-dom'; @@ -47,7 +45,7 @@ export function Example() { Toggle Buttons come in three formats. Icon only, text only, or text with an icon. `aria-label` prop is required for icon only buttons. -```typescript +```tsx import React from 'react'; import { Flex, FlexBehavior, ToggleButton } from 'react-magma-dom'; import { SettingsIcon } from 'react-magma-icons'; @@ -57,7 +55,11 @@ export function Example() { <> - } aria-label="Settings" /> + } + aria-label="Settings" + /> Text only @@ -77,7 +79,7 @@ export function Example() { Three sizes are configurable with the `ButtonSize` prop between `small`, `medium` (default), and `large`. -```typescript +```tsx import React from 'react'; import { Flex, FlexBehavior, ToggleButton } from 'react-magma-dom'; import { SettingsIcon } from 'react-magma-icons'; @@ -116,7 +118,7 @@ export function Example() { ## Disabled -```typescript +```tsx import React from 'react'; import { Flex, FlexBehavior, ToggleButton } from 'react-magma-dom'; import { SettingsIcon } from 'react-magma-icons'; @@ -126,7 +128,12 @@ export function Example() { <> - } aria-label="Settings" /> + } + aria-label="Settings" + /> @@ -146,7 +153,7 @@ export function Example() { ## Inverse -```typescript +```tsx import React from 'react'; import { Container, Flex, FlexBehavior, ToggleButton } from 'react-magma-dom'; import { SettingsIcon } from 'react-magma-icons'; @@ -156,7 +163,12 @@ export function Example() { - } aria-label="Settings" /> + } + aria-label="Settings" + /> diff --git a/website/react-magma-docs/src/pages/api/toggle.mdx b/website/react-magma-docs/src/pages/api/toggle.mdx index 6265265b60..4b34daff66 100644 --- a/website/react-magma-docs/src/pages/api/toggle.mdx +++ b/website/react-magma-docs/src/pages/api/toggle.mdx @@ -5,8 +5,6 @@ props: - ToggleProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/tooltip.mdx b/website/react-magma-docs/src/pages/api/tooltip.mdx index aa866136e0..10a771af05 100644 --- a/website/react-magma-docs/src/pages/api/tooltip.mdx +++ b/website/react-magma-docs/src/pages/api/tooltip.mdx @@ -5,8 +5,6 @@ props: - TooltipProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -18,7 +16,6 @@ import { LeadParagraph } from '../../components/LeadParagraph'; The Tooltip component should wrap the triggerring element. This trigger should be a focusable element for accessibility, such as a button. - ```tsx import React from 'react'; import { Tooltip, IconButton, ButtonVariant } from 'react-magma-dom'; @@ -69,10 +66,6 @@ import { ButtonVariant, } from 'react-magma-dom'; import { - ArrowDownwardIcon, - ArrowForwardIcon, - ArrowBackIcon, - ArrowUpwardIcon, KeyboardArrowRightIcon, KeyboardArrowLeftIcon, KeyboardArrowDownIcon, @@ -215,7 +208,7 @@ export function Example() { The values of some style properties are set in the Magma theme. -```js noCodeSandbox +```jsx noCodeSandbox noRender tooltip: { arrowSize: '4px', arrowSizeDoubled: '8px', diff --git a/website/react-magma-docs/src/pages/api/transition.mdx b/website/react-magma-docs/src/pages/api/transition.mdx index 16a4881282..decf1bad47 100644 --- a/website/react-magma-docs/src/pages/api/transition.mdx +++ b/website/react-magma-docs/src/pages/api/transition.mdx @@ -5,8 +5,6 @@ props: - TransitionProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -23,7 +21,7 @@ in the transition animating to the `exit` variant. Going from `isOpen={false}` t Collapse will transition the child components from 100% height to 0px. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -54,7 +52,7 @@ export function Example() { To have the child components fade from completely transparent use the fade transition. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -85,7 +83,7 @@ export function Example() { The Nudge transitions (`nudgeLeft`, `nudgeRight`, `nudgeTop`, `nudgeBottom`) move the children from 50px away from their target. Alone this might look weird, but when used in conjection with fade it gives the apparence of fading into a closer position. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -116,7 +114,7 @@ export function Example() { The rotate transitions (`rotate45`, `rotate90`, `rotate180`) will rotate the child components counter-clockwise. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -150,7 +148,7 @@ export function Example() { The scale transition will scale the child components from 95% to 100%. This alone will not look impressive, but when used with `fade` creates a nice transition. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -182,7 +180,7 @@ export function Example() { The slide transitions (`slideRight`, `slideLeft`, `slideTop`, `slideBottom`) will slide the children to the edge of the screen from outside of view. The slide transitions will always anchor the children to one of the edges of the screen. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -213,7 +211,7 @@ export function Example() { Transitions can be combined to create more advanced effects. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -245,7 +243,7 @@ export function Example() { By default, `Transition` will only transition between the two style variants for `enter` and `exit` but will leave the children in the DOM. Using the prop `unmountOnExit` will remove the children from the DOM completely after they have been animated off the visible screen. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -276,7 +274,7 @@ export function Example() { The magma theme has several sane defaults to create a consistent experience across all apps. But `Transition` does allow for `customTransition` and `style` to be overwritten. -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition } from 'react-magma-dom'; @@ -334,7 +332,7 @@ export function Example() { ### Kitchen Sink -```typescript +```tsx import React from 'react'; import styled from '@emotion/styled'; import { Button, Transition, Checkbox } from 'react-magma-dom'; @@ -559,7 +557,7 @@ export function Example() { } ``` -# Transition Props +## Transition Props **Any other props supplied will be provided to the wrapping [`motion.div`](https://www.framer.com/api/motion/component/) element.** diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx index 0ad6dbf90d..fd2d28440a 100644 --- a/website/react-magma-docs/src/pages/api/tree-view.mdx +++ b/website/react-magma-docs/src/pages/api/tree-view.mdx @@ -6,8 +6,6 @@ props: - TreeItemProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -17,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Basic Usage -```typescript +```tsx import React from 'react'; import { TreeView, TreeItem, Heading } from 'react-magma-dom'; @@ -25,7 +23,7 @@ export function Example() { return ( <> - Gardner's Art through the ages + {`Gardner's Art through the ages`} - Gardner's Art through the ages + {`Gardner's Art through the ages`} {currentTreeEvent || 'No'} event was triggered

        - Expanded Items: {expandedItems ? expandedItems.join(', ') : ' '} + + Expanded Items: {expandedItems ? expandedItems.join(', ') : ' '} +

        (); const [isShowAll, setIsShowAll] = React.useState(false); - const [selectedItems, setSelectedItems] = + const [, setSelectedItems] = React.useState(); function onSelection(items: TreeItemSelectedInterface[]) { @@ -1106,7 +1109,7 @@ export function Example() { ## Inverse -```typescript +```tsx import React from 'react'; import { TreeView, TreeItem, Card } from 'react-magma-dom'; @@ -1154,7 +1157,7 @@ export function Example() { Use the `labelStyle` prop to customize the `TreeItem` labels. -```typescript +```tsx import React from 'react'; import { TreeView, TreeItem, magma } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/api/use-focus-lock.mdx b/website/react-magma-docs/src/pages/api/use-focus-lock.mdx index 2d863967b2..7459a949ec 100644 --- a/website/react-magma-docs/src/pages/api/use-focus-lock.mdx +++ b/website/react-magma-docs/src/pages/api/use-focus-lock.mdx @@ -3,8 +3,6 @@ pageTitle: useFocusLock Hook API title: useFocusLock Hook --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/use-media-query.mdx b/website/react-magma-docs/src/pages/api/use-media-query.mdx index f9ea867868..1da54e19db 100644 --- a/website/react-magma-docs/src/pages/api/use-media-query.mdx +++ b/website/react-magma-docs/src/pages/api/use-media-query.mdx @@ -3,8 +3,6 @@ pageTitle: useMediaQuery Hook API title: useMediaQuery Hook --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/api/visually-hidden.mdx b/website/react-magma-docs/src/pages/api/visually-hidden.mdx index 490167e331..0326630d28 100644 --- a/website/react-magma-docs/src/pages/api/visually-hidden.mdx +++ b/website/react-magma-docs/src/pages/api/visually-hidden.mdx @@ -5,8 +5,6 @@ props: - VisuallyHiddenProps --- -import { LeadParagraph } from '../../components/LeadParagraph'; - diff --git a/website/react-magma-docs/src/pages/design-intro/colors.mdx b/website/react-magma-docs/src/pages/design-intro/colors.mdx index 1cc1cae0ca..cb39576d59 100644 --- a/website/react-magma-docs/src/pages/design-intro/colors.mdx +++ b/website/react-magma-docs/src/pages/design-intro/colors.mdx @@ -4,11 +4,9 @@ title: Color order: 2 --- -import { Link } from 'gatsby'; import '../design/design-guidelines-styles.css'; import { ColorSwatch } from '../../components/ColorSwatch'; import { magma } from 'react-magma-dom'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -31,26 +29,26 @@ The primary colors are based on our main brand color. These colors are used in l We use primary-500 to indicate primary actions, buttons, text links, etc. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        primary-700

        Space Cadet

        -
        -
        -

        Hex

        -

        {magma.colors.primary700}

        +
        +
        +

        Hex

        +

        {magma.colors.primary700}

        -
        -

        RGB

        +
        +

        RGB

        26,30,81

        @@ -60,20 +58,20 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        primary-600

        Resolution Blue

        -
        -
        -

        Hex

        -

        {magma.colors.primary600}

        +
        +
        +

        Hex

        +

        {magma.colors.primary600}

        -
        -

        RGB

        +
        +

        RGB

        41,47,124

        @@ -83,20 +81,20 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        primary-500

        Free Speech Blue

        -
        -
        -

        Hex

        -

        {magma.colors.primary500}

        +
        +
        +

        Hex

        +

        {magma.colors.primary500}

        -
        -

        RGB

        +
        +

        RGB

        57,66,176

        @@ -106,20 +104,20 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        primary-400

        Slate Blue

        -
        -
        -

        Hex

        -

        {magma.colors.primary400}

        +
        +
        +

        Hex

        +

        {magma.colors.primary400}

        -
        -

        RGB

        +
        +

        RGB

        93,101,203

        @@ -129,20 +127,20 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        primary-300

        Blue Bell

        -
        -
        -

        Hex

        -

        {magma.colors.primary300}

        +
        +
        +

        Hex

        +

        {magma.colors.primary300}

        -
        -

        RGB

        +
        +

        RGB

        139,145,218

        @@ -152,20 +150,20 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        primary-200

        Lavender Blue

        -
        -
        -

        Hex

        -

        {magma.colors.primary200}

        +
        +
        +

        Hex

        +

        {magma.colors.primary200}

        -
        -

        RGB

        +
        +

        RGB

        186,189,233

        @@ -175,20 +173,20 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        primary-100

        Quartz

        -
        -
        -

        Hex

        -

        {magma.colors.primary100}

        +
        +
        +

        Hex

        +

        {magma.colors.primary100}

        -
        -

        RGB

        +
        +

        RGB

        232,233,248

        @@ -199,26 +197,26 @@ We use primary-500 to indicate primary actions, buttons, text links, etc. The secondary colors are based off secondary-500 from the Cengage Higher Ed branding guidelines. It is commonly used for important calls to action on pages where purchases are made. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        secondary-700

        Golden Poppy

        -
        -
        -

        Hex

        -

        {magma.colors.secondary700}

        +
        +
        +

        Hex

        +

        {magma.colors.secondary700}

        -
        -

        RGB

        +
        +

        RGB

        236,201,1

        @@ -228,20 +226,20 @@ The secondary colors are based off secondary-500 from the Cengage Higher Ed bran passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        secondary-600

        Sizzling Sunrise

        -
        -
        -

        Hex

        -

        {magma.colors.secondary600}

        +
        +
        +

        Hex

        +

        {magma.colors.secondary600}

        -
        -

        RGB

        +
        +

        RGB

        254,218,13

        @@ -251,20 +249,20 @@ The secondary colors are based off secondary-500 from the Cengage Higher Ed bran passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        secondary-500

        Paris Daisy

        -
        -
        -

        Hex

        -

        {magma.colors.secondary500}

        +
        +
        +

        Hex

        +

        {magma.colors.secondary500}

        -
        -

        RGB

        +
        +

        RGB

        254,228,73

        @@ -275,26 +273,26 @@ The secondary colors are based off secondary-500 from the Cengage Higher Ed bran The tertiary colors are based off tertiary-500 from the Cengage Higher Ed branding guidelines. It is commonly used in place of the primary colors on dark backgrounds. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        tertiary-700

        Maya Blue

        -
        -
        -

        Hex

        -

        {magma.colors.tertiary700}

        +
        +
        +

        Hex

        +

        {magma.colors.tertiary700}

        -
        -

        RGB

        +
        +

        RGB

        121,165,255

        @@ -304,20 +302,20 @@ The tertiary colors are based off tertiary-500 from the Cengage Higher Ed brandi passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        tertiary-600

        Columbia Blue

        -
        -
        -

        Hex

        -

        {magma.colors.tertiary600}

        +
        +
        +

        Hex

        +

        {magma.colors.tertiary600}

        -
        -

        RGB

        +
        +

        RGB

        162,193,255

        @@ -327,20 +325,20 @@ The tertiary colors are based off tertiary-500 from the Cengage Higher Ed brandi passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        tertiary-500

        Periwinkle Crayola

        -
        -
        -

        Hex

        -

        {magma.colors.tertiary500}

        +
        +
        +

        Hex

        +

        {magma.colors.tertiary500}

        -
        -

        RGB

        +
        +

        RGB

        205,222,255

        @@ -351,26 +349,26 @@ The tertiary colors are based off tertiary-500 from the Cengage Higher Ed brandi The neutrals come in varying levels of saturation to create the right level of contrast. Dark neutrals are the primary colors we use for typography. We commonly use light neutrals for type set on a dark background, or for subtle backgrounds that don’t take away from the cleanliness of a page. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-900

        Black

        -
        -
        -

        Hex

        -

        {magma.colors.neutral900}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral900}

        -
        -

        RGB

        +
        +

        RGB

        0,0,0

        @@ -380,20 +378,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-800

        Jet

        -
        -
        -

        Hex

        -

        {magma.colors.neutral800}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral800}

        -
        -

        RGB

        +
        +

        RGB

        45,45,45

        @@ -403,20 +401,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-700

        Onyx

        -
        -
        -

        Hex

        -

        {magma.colors.neutral700}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral700}

        -
        -

        RGB

        +
        +

        RGB

        69,69,69

        @@ -426,20 +424,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-600

        Mortar

        -
        -
        -

        Hex

        -

        {magma.colors.neutral600}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral600}

        -
        -

        RGB

        +
        +

        RGB

        90,90,90

        @@ -449,20 +447,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-500

        Sonic Silver

        -
        -
        -

        Hex

        -

        {magma.colors.neutral500}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral500}

        -
        -

        RGB

        +
        +

        RGB

        112,112,112

        @@ -472,20 +470,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-400

        Suva Gray

        -
        -
        -

        Hex

        -

        {magma.colors.neutral400}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral400}

        -
        -

        RGB

        +
        +

        RGB

        141,141,141

        @@ -495,20 +493,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-300

        Light Gray

        -
        -
        -

        Hex

        -

        {magma.colors.neutral300}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral300}

        -
        -

        RGB

        +
        +

        RGB

        212,212,212

        @@ -518,20 +516,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-200

        White Smoke

        -
        -
        -

        Hex

        -

        {magma.colors.neutral200}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral200}

        -
        -

        RGB

        +
        +

        RGB

        245,245,245

        @@ -541,20 +539,20 @@ The neutrals come in varying levels of saturation to create the right level of c passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        neutral-100

        White

        -
        -
        -

        Hex

        -

        {magma.colors.neutral100}

        +
        +
        +

        Hex

        +

        {magma.colors.neutral100}

        -
        -

        RGB

        +
        +

        RGB

        255,255,255

        @@ -565,26 +563,26 @@ The neutrals come in varying levels of saturation to create the right level of c The info colors are used to provide users with neutral, informational feedback. They are primarily used within alerts, and to indicate when an interactive element is in the focused state. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        info-700

        Blue Lagoon

        -
        -
        -

        Hex

        -

        {magma.colors.info700}

        +
        +
        +

        Hex

        +

        {magma.colors.info700}

        -
        -

        RGB

        +
        +

        RGB

        26,30,81

        @@ -594,20 +592,20 @@ The info colors are used to provide users with neutral, informational feedback. passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        info-600

        Sapphire Blue

        -
        -
        -

        Hex

        -

        {magma.colors.info600}

        +
        +
        +

        Hex

        +

        {magma.colors.info600}

        -
        -

        RGB

        +
        +

        RGB

        41,47,124

        @@ -617,20 +615,20 @@ The info colors are used to provide users with neutral, informational feedback. passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        info-500

        French Blue

        -
        -
        -

        Hex

        -

        {magma.colors.info500}

        +
        +
        +

        Hex

        +

        {magma.colors.info500}

        -
        -

        RGB

        +
        +

        RGB

        57,66,176

        @@ -640,20 +638,20 @@ The info colors are used to provide users with neutral, informational feedback. passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        info-400

        Deep Sky Blue

        -
        -
        -

        Hex

        -

        {magma.colors.info400}

        +
        +
        +

        Hex

        +

        {magma.colors.info400}

        -
        -

        RGB

        +
        +

        RGB

        93,101,203

        @@ -663,20 +661,20 @@ The info colors are used to provide users with neutral, informational feedback. passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        info-300

        Blue Jeans

        -
        -
        -

        Hex

        -

        {magma.colors.info300}

        +
        +
        +

        Hex

        +

        {magma.colors.info300}

        -
        -

        RGB

        +
        +

        RGB

        139,145,218

        @@ -686,20 +684,20 @@ The info colors are used to provide users with neutral, informational feedback. passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        info-200

        Uranian Blue

        -
        -
        -

        Hex

        -

        {magma.colors.info200}

        +
        +
        +

        Hex

        +

        {magma.colors.info200}

        -
        -

        RGB

        +
        +

        RGB

        186,189,233

        @@ -709,20 +707,20 @@ The info colors are used to provide users with neutral, informational feedback. passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        info-100

        Alice Blue

        -
        -
        -

        Hex

        -

        {magma.colors.info100}

        +
        +
        +

        Hex

        +

        {magma.colors.info100}

        -
        -

        RGB

        +
        +

        RGB

        232,233,248

        @@ -733,26 +731,26 @@ The info colors are used to provide users with neutral, informational feedback. The danger colors are mainly used for backgrounds in messages and in error states to draw attention to important information or actions that are destructive or block workflow. You'll find red used in components such as alerts, buttons, and typography. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        danger-700

        Falu Red

        -
        -
        -

        Hex

        -

        {magma.colors.danger700}

        +
        +
        +

        Hex

        +

        {magma.colors.danger700}

        -
        -

        RGB

        +
        +

        RGB

        127,23,20

        @@ -762,20 +760,20 @@ The danger colors are mainly used for backgrounds in messages and in error state passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        danger-600

        Carnelian

        -
        -
        -

        Hex

        -

        {magma.colors.danger600}

        +
        +
        +

        Hex

        +

        {magma.colors.danger600}

        -
        -

        RGB

        +
        +

        RGB

        169,31,26

        @@ -785,20 +783,20 @@ The danger colors are mainly used for backgrounds in messages and in error state passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        danger-500

        Maximum Red

        -
        -
        -

        Hex

        -

        {magma.colors.danger500}

        +
        +
        +

        Hex

        +

        {magma.colors.danger500}

        -
        -

        RGB

        +
        +

        RGB

        211,40,33

        @@ -808,20 +806,20 @@ The danger colors are mainly used for backgrounds in messages and in error state passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        danger-400

        Cinnabar

        -
        -
        -

        Hex

        -

        {magma.colors.danger400}

        +
        +
        +

        Hex

        +

        {magma.colors.danger400}

        -
        -

        RGB

        +
        +

        RGB

        226,73,67

        @@ -831,20 +829,20 @@ The danger colors are mainly used for backgrounds in messages and in error state passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        danger-300

        Light Coral

        -
        -
        -

        Hex

        -

        {magma.colors.danger300}

        +
        +
        +

        Hex

        +

        {magma.colors.danger300}

        -
        -

        RGB

        +
        +

        RGB

        232,113,109

        @@ -854,20 +852,20 @@ The danger colors are mainly used for backgrounds in messages and in error state passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        danger-200

        Sundown

        -
        -
        -

        Hex

        -

        {magma.colors.danger200}

        +
        +
        +

        Hex

        +

        {magma.colors.danger200}

        -
        -

        RGB

        +
        +

        RGB

        250,174,176

        @@ -877,20 +875,20 @@ The danger colors are mainly used for backgrounds in messages and in error state passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        danger-100

        Rose White

        -
        -
        -

        Hex

        -

        {magma.colors.danger100}

        +
        +
        +

        Hex

        +

        {magma.colors.danger100}

        -
        -

        RGB

        +
        +

        RGB

        253,239,238

        @@ -901,26 +899,26 @@ The danger colors are mainly used for backgrounds in messages and in error state The warning colors are used to indicate a warning or that progress is impeded. It is primarily used within the alert components. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        warning-700

        Sepia

        -
        -
        -

        Hex

        -

        {magma.colors.warning700}

        +
        +
        +

        Hex

        +

        {magma.colors.warning700}

        -
        -

        RGB

        +
        +

        RGB

        110,52,14

        @@ -930,20 +928,20 @@ The warning colors are used to indicate a warning or that progress is impeded. I passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        warning-600

        Saddle Brown

        -
        -
        -

        Hex

        -

        {magma.colors.warning600}

        +
        +
        +

        Hex

        +

        {magma.colors.warning600}

        -
        -

        RGB

        +
        +

        RGB

        141,67,17

        @@ -953,20 +951,20 @@ The warning colors are used to indicate a warning or that progress is impeded. I passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        warning-500

        Windsor Tan

        -
        -
        -

        Hex

        -

        {magma.colors.warning500}

        +
        +
        +

        Hex

        +

        {magma.colors.warning500}

        -
        -

        RGB

        +
        +

        RGB

        173,81,21

        @@ -976,20 +974,20 @@ The warning colors are used to indicate a warning or that progress is impeded. I passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        warning-400

        Spanish Orange

        -
        -
        -

        Hex

        -

        {magma.colors.warning400}

        +
        +
        +

        Hex

        +

        {magma.colors.warning400}

        -
        -

        RGB

        +
        +

        RGB

        224,106,28

        @@ -999,20 +997,20 @@ The warning colors are used to indicate a warning or that progress is impeded. I passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        warning-300

        Persian Orange

        -
        -
        -

        Hex

        -

        {magma.colors.warning300}

        +
        +
        +

        Hex

        +

        {magma.colors.warning300}

        -
        -

        RGB

        +
        +

        RGB

        233,139,76

        @@ -1022,20 +1020,20 @@ The warning colors are used to indicate a warning or that progress is impeded. I passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        warning-200

        Apricot

        -
        -
        -

        Hex

        -

        {magma.colors.warning200}

        +
        +
        +

        Hex

        +

        {magma.colors.warning200}

        -
        -

        RGB

        +
        +

        RGB

        246,205,178

        @@ -1045,20 +1043,20 @@ The warning colors are used to indicate a warning or that progress is impeded. I passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        warning-100

        Linen

        -
        -
        -

        Hex

        -

        {magma.colors.warning100}

        +
        +
        +

        Hex

        +

        {magma.colors.warning100}

        -
        -

        RGB

        +
        +

        RGB

        252,238,229

        @@ -1069,26 +1067,26 @@ The warning colors are used to indicate a warning or that progress is impeded. I We use green to celebrate success. The success colors are commonly used in the alerts and through typography. -
        +
        -
        -
        -

        Name

        +
        +
        +

        Name

        success-700

        Crusoe

        -
        -
        -

        Hex

        -

        {magma.colors.success700}

        +
        +
        +

        Hex

        +

        {magma.colors.success700}

        -
        -

        RGB

        +
        +

        RGB

        15,83,35

        @@ -1098,20 +1096,20 @@ We use green to celebrate success. The success colors are commonly used in the a passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        success-600

        Dartmouth Green

        -
        -
        -

        Hex

        -

        {magma.colors.success600}

        +
        +
        +

        Hex

        +

        {magma.colors.success600}

        -
        -

        RGB

        +
        +

        RGB

        19,106,45

        @@ -1121,20 +1119,20 @@ We use green to celebrate success. The success colors are commonly used in the a passesDarkTest={false} passesLightTest={true} > -
        -
        -

        Name

        +
        +
        +

        Name

        success-500

        Dark Spring Green

        -
        -
        -

        Hex

        -

        {magma.colors.success500}

        +
        +
        +

        Hex

        +

        {magma.colors.success500}

        -
        -

        RGB

        +
        +

        RGB

        23,128,55

        @@ -1144,20 +1142,20 @@ We use green to celebrate success. The success colors are commonly used in the a passesDarkTest={false} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        success-400

        Lime Green

        -
        -
        -

        Hex

        -

        {magma.colors.success400}

        +
        +
        +

        Hex

        +

        {magma.colors.success400}

        -
        -

        RGB

        +
        +

        RGB

        33,185,78

        @@ -1167,20 +1165,20 @@ We use green to celebrate success. The success colors are commonly used in the a passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        success-300

        Emerald

        -
        -
        -

        Hex

        -

        {magma.colors.success300}

        +
        +
        +

        Hex

        +

        {magma.colors.success300}

        -
        -

        RGB

        +
        +

        RGB

        62,221,110

        @@ -1190,20 +1188,20 @@ We use green to celebrate success. The success colors are commonly used in the a passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        success-200

        Celadon

        -
        -
        -

        Hex

        -

        {magma.colors.success200}

        +
        +
        +

        Hex

        +

        {magma.colors.success200}

        -
        -

        RGB

        +
        +

        RGB

        172,240,193

        @@ -1213,20 +1211,20 @@ We use green to celebrate success. The success colors are commonly used in the a passesDarkTest={true} passesLightTest={false} > -
        -
        -

        Name

        +
        +
        +

        Name

        success-100

        Honeydew

        -
        -
        -

        Hex

        -

        {magma.colors.success100}

        +
        +
        +

        Hex

        +

        {magma.colors.success100}

        -
        -

        RGB

        +
        +

        RGB

        227,250,234

        diff --git a/website/react-magma-docs/src/pages/design-intro/get-started.mdx b/website/react-magma-docs/src/pages/design-intro/get-started.mdx index 5a4d0f2496..0ef6282257 100644 --- a/website/react-magma-docs/src/pages/design-intro/get-started.mdx +++ b/website/react-magma-docs/src/pages/design-intro/get-started.mdx @@ -4,9 +4,6 @@ title: Getting Started order: 1 --- -import { Heading, magma } from 'react-magma-dom'; -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -44,7 +41,7 @@ If you have any questions or issues, please reach out in the #react-magma Slack Cengage exists to empower students and instructors with the audacity to realize their potential and the tenacity to achieve their goals. React Magma helps us build tools that are relevant and easy to use, and create educational experiences that accelerate learning while putting our users at the center of everything we do. The following design principles guide every decision we make. -
        +

        Anticipate Needs

        Don't overburden me with options or choice. Proactively assume what I need @@ -59,7 +56,7 @@ React Magma helps us build tools that are relevant and easy to use, and create e

        – MindTap Instructor
        -
        +

        Tolerate Mistakes

        Mistakes are proof that I’m trying, but they should never impede my @@ -74,7 +71,7 @@ React Magma helps us build tools that are relevant and easy to use, and create e

        – SAM Student
        -
        +

        Inspire Confidence

        Build confidence at every opportunity. Confidence that I can improve my @@ -89,7 +86,7 @@ React Magma helps us build tools that are relevant and easy to use, and create e

        – MindTap Instructor
        -
        +

        Cultivate Focus

        Distractions are plentiful and my undivided attention is scarce. Any @@ -105,7 +102,7 @@ React Magma helps us build tools that are relevant and easy to use, and create e

        – WebAssign Student
        -
        +

        Preserve Simplicity

        Be intentionally simple. Making common tasks fast, and easy for me to @@ -120,7 +117,7 @@ React Magma helps us build tools that are relevant and easy to use, and create e

        – MindTap Student
        -
        +

        Encourage Mobility

        I am not constrained by device or location and I expect the same of my @@ -136,6 +133,6 @@ React Magma helps us build tools that are relevant and easy to use, and create e

        – CNOW Student
        - + diff --git a/website/react-magma-docs/src/pages/design-intro/layout.mdx b/website/react-magma-docs/src/pages/design-intro/layout.mdx index 66d5ec9535..6350ae6d1a 100644 --- a/website/react-magma-docs/src/pages/design-intro/layout.mdx +++ b/website/react-magma-docs/src/pages/design-intro/layout.mdx @@ -12,7 +12,6 @@ import { TableBody, TableCell, } from 'react-magma-dom'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -28,7 +27,10 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Every layout is made up of columns, gutters, and margins that respond accordingly to the size of the viewport.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        1. Columns @@ -46,7 +48,7 @@ The columns indicate where the content of the page goes. The widths of the colum - +
        GATSBY_EMPTY_ALT @@ -55,7 +57,7 @@ The columns indicate where the content of the page goes. The widths of the colum
        - +
        GATSBY_EMPTY_ALT @@ -78,7 +80,7 @@ The width of gutters on standard Cengage page layouts should be set to 24px. On
        - +
        GATSBY_EMPTY_ALT @@ -106,7 +108,10 @@ The width of margins on standard Cengage full-width page layouts should be set t Larger margins based on percentages can be used to restrict the maximum width of the content area. Commonly used for text-heavy pages displaying sales materials, articles, etc.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        --- @@ -154,7 +159,7 @@ Each breakpoint range determines the number of columns, and recommended margins - + _\* Even for full-width layouts, we are only allowing the content area to size up to 1600px wide. Beyond that, the margins are essentially ignored and the space between the content area and the edges of the screen will grow as much as necessary._ @@ -165,23 +170,29 @@ _\* Even for full-width layouts, we are only allowing the content area to size u Some Cengage web applications have a global sidebar on the left side of the page. This sidebar necessitates that the main content changes from 12 columns to 6 at 1024px wide and below. This is much earlier than the other layouts detailed above.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        When using the global sidebar, the main content area still has 12 columns when the viewport is wider than 1024px
        - +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        When using the global sidebar, the main content area changes to 6 columns when the viewport is 1024px wide and below.
        - + diff --git a/website/react-magma-docs/src/pages/design-intro/spacing.mdx b/website/react-magma-docs/src/pages/design-intro/spacing.mdx index 8cfd411a60..01df6e0781 100644 --- a/website/react-magma-docs/src/pages/design-intro/spacing.mdx +++ b/website/react-magma-docs/src/pages/design-intro/spacing.mdx @@ -12,7 +12,6 @@ import { TableBody, TableCell, } from 'react-magma-dom'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -42,7 +41,7 @@ The spacing scale helps us determine how much space to put between or inside of 0.125 2px - + @@ -50,7 +49,7 @@ The spacing scale helps us determine how much space to put between or inside of 0.25 4px - + @@ -58,7 +57,7 @@ The spacing scale helps us determine how much space to put between or inside of 0.5 8px - + @@ -66,7 +65,7 @@ The spacing scale helps us determine how much space to put between or inside of 0.75 12px - + @@ -74,7 +73,7 @@ The spacing scale helps us determine how much space to put between or inside of 1 16px - + @@ -82,7 +81,7 @@ The spacing scale helps us determine how much space to put between or inside of 1.5 24px - + @@ -90,7 +89,7 @@ The spacing scale helps us determine how much space to put between or inside of 1.75 28px - + @@ -98,7 +97,7 @@ The spacing scale helps us determine how much space to put between or inside of 2 32px - + @@ -106,7 +105,7 @@ The spacing scale helps us determine how much space to put between or inside of 2.5 40px - + @@ -114,7 +113,7 @@ The spacing scale helps us determine how much space to put between or inside of 3 48px - + @@ -122,7 +121,7 @@ The spacing scale helps us determine how much space to put between or inside of 3.5 56px - + @@ -130,7 +129,7 @@ The spacing scale helps us determine how much space to put between or inside of 4 64px - + @@ -138,7 +137,7 @@ The spacing scale helps us determine how much space to put between or inside of 6 96px - + @@ -146,23 +145,26 @@ The spacing scale helps us determine how much space to put between or inside of 10 160px - + - +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        Example of using spacing properties to add padding inside a card, as well as the margins between the content within the card.
        - +
        GATSBY_EMPTY_ALT @@ -207,6 +209,6 @@ No, the spacing properties themselves do not change values based on the screen s Example: At 1440px `padding-right: spacing05` but at breakpoint 768px `padding-right: spacing03`. - + diff --git a/website/react-magma-docs/src/pages/design-intro/typography.mdx b/website/react-magma-docs/src/pages/design-intro/typography.mdx index 4a15514406..ede9c34e56 100644 --- a/website/react-magma-docs/src/pages/design-intro/typography.mdx +++ b/website/react-magma-docs/src/pages/design-intro/typography.mdx @@ -4,10 +4,8 @@ title: Typography order: 2 --- -import { Link } from 'gatsby'; import '../design/design-guidelines-styles.css'; -import { Button, Paragraph, Heading } from 'react-magma-dom'; -import { LeadParagraph } from '../../components/LeadParagraph'; +import { Paragraph } from 'react-magma-dom'; @@ -37,15 +35,15 @@ Productive type is reserved for use in web-based product design, where the user #### Productive Body Text Styles -
        -
        -
        +
        +
        +
        This is a good size for higher emphasis text, as well as the subheadline of a page.
        -
        +

        Body / Large

        @@ -55,7 +53,7 @@ Productive type is reserved for use in web-based product design, where the user

        Weight: Regular / 400

        Letter-spacing: 0px

        -
        +

        Body / Large

        @@ -66,8 +64,8 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is commonly used in layouts for paragraphs. The line height and size make for comfortable, long-form reading, in mediums that allow for @@ -75,7 +73,7 @@ Productive type is reserved for use in web-based product design, where the user calculated.
        -
        +

        Body / Medium

        @@ -86,14 +84,14 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is commonly used for helper and error text on inputs, as well as other explanatory text.
        -
        +

        Body / Small

        @@ -104,14 +102,14 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: .16px

        -
        -
        +
        +
        This is good to use for captions and other meta-data or explanatory text.
        -
        +

        Body / X-Small

        @@ -123,18 +121,18 @@ Productive type is reserved for use in web-based product design, where the user
        - + #### Productive Heading Text Styles -
        -
        -
        +
        +
        +
        This is used for layout headings
        -
        +

        Heading / X-Large

        @@ -144,7 +142,7 @@ Productive type is reserved for use in web-based product design, where the user

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / X-Large

        @@ -155,13 +153,13 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is used for layout headings
        -
        +

        Heading / Large

        @@ -171,7 +169,7 @@ Productive type is reserved for use in web-based product design, where the user

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / Large

        @@ -182,13 +180,13 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is used for layout headings and component titles
        -
        +

        Heading / Medium

        @@ -198,7 +196,7 @@ Productive type is reserved for use in web-based product design, where the user

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / Medium

        @@ -209,13 +207,13 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is used for layout headings and component titles
        -
        +

        Heading / Small

        @@ -225,7 +223,7 @@ Productive type is reserved for use in web-based product design, where the user

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / Small

        @@ -236,13 +234,13 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is used for layout headings and component titles
        -
        +

        Heading / X-Small

        @@ -253,13 +251,13 @@ Productive type is reserved for use in web-based product design, where the user

        Letter-spacing: 0px

        -
        -
        +
        +
        This is used for layout headings and component titles
        -
        +

        Heading / 2X-Small

        @@ -271,7 +269,7 @@ Productive type is reserved for use in web-based product design, where the user
        - + ### Expressive Type Set @@ -279,15 +277,15 @@ Expressive type is reserved for use in editorial and digital marketing experienc #### Expressive Body Text Styles -
        -
        -
        +
        +
        +
        This is a good size for higher emphasis text, as well as the subheadline of a page.
        -
        +

        Body / Large

        @@ -298,7 +296,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        Color: primary600 / #292F7C

        -
        +

        Body / Large

        @@ -311,13 +309,13 @@ Expressive type is reserved for use in editorial and digital marketing experienc
        - + #### Expressive Heading Text Styles -
        -
        -
        +
        +
        +
        -
        +

        Heading / 2X-Large

        @@ -336,7 +334,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Medium / 500

        Letter-spacing: 0px

        -
        +

        Heading / 2X-Large

        @@ -347,8 +345,8 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / X-Large

        @@ -367,7 +365,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / X-Large

        @@ -378,8 +376,8 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / Large

        @@ -398,7 +396,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / Large

        @@ -409,8 +407,8 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / Medium

        @@ -429,7 +427,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Semibold / 600

        Letter-spacing: 0px

        -
        +

        Heading / Medium

        @@ -440,8 +438,8 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / Small

        @@ -460,7 +458,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Medium / 500

        Letter-spacing: 0px

        -
        +

        Heading / Small

        @@ -471,8 +469,8 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / X-Small

        @@ -491,7 +489,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Medium / 500

        Letter-spacing: 0px

        -
        +

        Heading / X-Small

        @@ -502,8 +500,8 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / 2X-Small

        @@ -522,7 +520,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc

        Weight: Medium / 500

        Letter-spacing: .32px

        -
        +

        Heading / 2X-Small

        @@ -534,7 +532,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
        - + ### Narrative Type Set @@ -542,15 +540,15 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P #### Narrative Body Text Styles -
        -
        -
        +
        +
        +
        This is a good size for higher emphasis text, as well as the subheadline of a page.
        -
        +

        Body / Large

        @@ -560,7 +558,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Weight: Regular / 400

        Letter-spacing: 0px

        -
        +

        Body / Large

        @@ -571,8 +569,8 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        This is commonly used in layouts for paragraphs. The line height and size make for comfortable, long-form reading, in mediums that allow for @@ -580,7 +578,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P calculated.
        -
        +

        Body / Medium

        @@ -591,14 +589,14 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        This size is great for creating contrast between the main paragraph of the passage and secondary information.
        -
        +

        Body / Small

        @@ -609,14 +607,14 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: .16px

        -
        -
        +
        +
        This is good to use for captions and other meta-data or explanatory text.
        -
        +

        Body / X-Small

        @@ -628,13 +626,13 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P
        - + #### Narrative Heading Text Styles -
        -
        -
        +
        +
        +
        -
        +

        Heading / X-Large

        @@ -653,7 +651,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Weight: Bold / 700

        Letter-spacing: 0px

        -
        +

        Heading / X-Large

        @@ -664,8 +662,8 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / Large

        @@ -684,7 +682,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Weight: Bold / 700

        Letter-spacing: 0px

        -
        +

        Heading / Large

        @@ -695,8 +693,8 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / Medium

        @@ -715,7 +713,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Weight: Bold / 700

        Letter-spacing: 0px

        -
        +

        Heading / Medium

        @@ -726,8 +724,8 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / Small

        @@ -746,7 +744,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Weight: Bold / 700

        Letter-spacing: 0px

        -
        +

        Heading / Small

        @@ -757,8 +755,8 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / X-Small

        @@ -778,8 +776,8 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P

        Letter-spacing: 0px

        -
        -
        +
        +
        -
        +

        Heading / 2X-Small

        @@ -800,7 +798,7 @@ Narrative type uses Noto Serif but is otherwise styled the same as the default P
        - + ### Changing Headings Styles @@ -809,7 +807,10 @@ The headings presets above are assigned by default to H1 through H6 in the Modal component. For optimal accessibility the title of the modal needs to be an H1, but we definitely don't want it to be styled with text that large. So we use an H1, but apply the Productive Heading Small style to it. This flexibility allows consumers of Magma to design using the styles that work best for the UI, but still have a clear informational hierarchy for assistive technologies.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        #### Consistency is Key @@ -821,7 +822,10 @@ Continuing from above, there isn't just one way an H1 or and H3 should be styled Another advantage to using the presets above is that Responsive behavior is already built into each style so you don't have to figure out and include it yourself. This means a number of the larger sizes will automatically reduce in size at 600px wide. This ensures we have appropriate text sizes on smaller devices. The breakpoint can be overridden if you want this change to happen earlier or later.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        --- @@ -832,17 +836,24 @@ Another advantage to using the presets above is that Responsive behavior is alre Our primary typface is Work Sans. It’s clear and approachable and is great for headlines, subheads, navigation and body copy. - + Download Work Sans -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        Work Sans is a typeface family based loosely on early Grotesques, such as those by Stephenson Blake, Miller & Richard and Bauerschen Giesserei. The Regular weight and others in the middle of the family are optimised for @@ -860,17 +871,24 @@ Our primary typface is Work Sans. It’s clear and approachable and is great for Noto Serif is a beautiful serif font. It's easy to read, provides a nice contrast with Work Sans and has great support for special characters. At this point, Noto Serif should primarily be used for the reader applications that display our text books. - + Download Noto Serif -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +

        When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports @@ -912,14 +930,17 @@ If you have a need to use a font size outside of the pre-made sets above, you ma Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Font weight and size pairings must be carefully balanced. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold one. The weights available in React Magma are `thin (100)`, `extra-light (200)`, `light (300)`, `regular (400)`, `medium (500)`, `semi-bold (600)`, `bold (700)`, `extra-bold (800)` and `black (900)`. -

        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        @@ -927,14 +948,17 @@ Font weight is an important typographic variable that can add emphasis and diffe Each weight has an italic style, which should only be used when you need to emphasize certain words in a sentence (titles of works, technical terms, names of devices, captions, etc.). -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        @@ -942,13 +966,16 @@ Each weight has an italic style, which should only be used when you need to emph Type color should be carefully considered, with legibility and accessibility as your main concerns. Color can be helpful for reinforcing the meaning or context of a piece of text or action, but color should never be the only way this is communicated, or just for decoration. When text is generally kept neutral in color, then it can be much more powerful when you do need to use it to point out actions or a special important messages. The text itself is the clearest way to explain what the user needs to know, but icons can also help provide helpful clues. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Text should generally be kept neutral in color until there's a reason to use a color. @@ -956,31 +983,40 @@ Type color should be carefully considered, with legibility and accessibility as

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        On dark backgrounds, neutral text appears as white.

        -
        -
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Don't use color as decoration.

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        The contrast between text and its background needs to be 4.5:1, or 3:1 for large (18px) text. @@ -989,12 +1025,15 @@ Type color should be carefully considered, with legibility and accessibility as

        -
        -
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Appropriate color usage can help reinforce the meaning of text, but is not a replacement for clear text and other helpful visual aids @@ -1003,11 +1042,14 @@ Type color should be carefully considered, with legibility and accessibility as

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        A message is successful if you can remove the color from it, and the meaning is still clear. @@ -1022,16 +1064,22 @@ Type color should be carefully considered, with legibility and accessibility as It is common to lighten certain pieces of text in order to create more contrast. For example, making a subtitle more subdued than the title, or instructional text like the helper text on form inputs. This can be easily done by applying the "subdued" color to a piece of text. On a light background, this makes the color #707070. The inverse equivalent is a semi-transparent white. -

        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        @@ -1044,7 +1092,10 @@ It is common to lighten certain pieces of text in order to create more contrast. Headings and paragraphs have margins built into them by default. These margins provide the desired rhythm created by spacing when they are used together in a traditional narrative context. These margins can be easily modified using the spacing scale or completely removed when using headings or paragraphs in other contexts.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        diff --git a/website/react-magma-docs/src/pages/design/accordion.mdx b/website/react-magma-docs/src/pages/design/accordion.mdx index e7b0333bb5..e9c34cf57d 100644 --- a/website/react-magma-docs/src/pages/design/accordion.mdx +++ b/website/react-magma-docs/src/pages/design/accordion.mdx @@ -5,7 +5,6 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -42,11 +41,14 @@ By default the chevron icon is placed on the right side of the header. This allo In some scenarios, the accordion can be modified to place the chevron icon in front of the title to function more like a tree. But this should be used with care because the content of the panel may not align with the title. -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Use the default icon alignment to make sure accordion text content properly aligns with other text content on the page. @@ -54,9 +56,12 @@ In some scenarios, the accordion can be modified to place the chevron icon in fr

        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Caution

        +

        Caution

        Be careful putting the icon on the left side of the accordion, because this could cause unintended alignment issues with other text content on @@ -68,14 +73,14 @@ In some scenarios, the accordion can be modified to place the chevron icon in fr If you place the chevron icon on the left side of the title, don’t be tempted to use a right-facing chevron. While it is common to have right-facing arrows on the left side of tree, placing it on the right side completely changes the meaning of the icon. So for the sake of consistency, we will only allow up and down chevrons for components that expand and collapse. -

        +
        GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Only use up and down chevrons to indicate whether an accordion section is expanded or collapsed, even if you move the icon to the left side. @@ -83,9 +88,12 @@ If you place the chevron icon on the left side of the title, don’t be tempted

        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Don't change the chevron icon to something else like arrows or plus and minus icons. @@ -95,9 +103,12 @@ If you place the chevron icon on the left side of the title, don’t be tempted

        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Don't group additional icons with the chevron without providing some kind of separation to avoid missing the expanding functionality entirely. @@ -109,15 +120,24 @@ If you place the chevron icon on the left side of the title, don’t be tempted Accordions can be placed within main page content or placed inside of a container such as a side panel or card. -

        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        diff --git a/website/react-magma-docs/src/pages/design/alert.mdx b/website/react-magma-docs/src/pages/design/alert.mdx index 2249abfb80..66ea9d9b6d 100644 --- a/website/react-magma-docs/src/pages/design/alert.mdx +++ b/website/react-magma-docs/src/pages/design/alert.mdx @@ -6,7 +6,7 @@ order: 1 import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; + import { Alert } from 'react-magma-dom'; @@ -103,13 +103,19 @@ Alerts have an inverse option where we have defined colors that are optimized fo Inline alerts are embedded within the content of a page. They can provide the user with helpful information regarding a specific process or part of the interface. They can also be triggered by an action the user took, like submitting a form before filling out all the required fields.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissible by the user and persist until the issue is fixed either by the user or the system.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        --- @@ -119,9 +125,12 @@ If an inline alert is being used to communicate some general information to the When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        - + --- diff --git a/website/react-magma-docs/src/pages/design/badge.mdx b/website/react-magma-docs/src/pages/design/badge.mdx index 8d13b6c9ad..1b6f94c7f5 100644 --- a/website/react-magma-docs/src/pages/design/badge.mdx +++ b/website/react-magma-docs/src/pages/design/badge.mdx @@ -4,9 +4,7 @@ title: Badge order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/design/banner.mdx b/website/react-magma-docs/src/pages/design/banner.mdx index 15bf3685af..5ef95fb254 100644 --- a/website/react-magma-docs/src/pages/design/banner.mdx +++ b/website/react-magma-docs/src/pages/design/banner.mdx @@ -4,9 +4,7 @@ title: Banner order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -15,7 +13,10 @@ import { LeadParagraph } from '../../components/LeadParagraph';
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        ## Usage @@ -29,9 +30,12 @@ Banner alerts typically appear at the very top of the browser viewport and exten When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        - + --- diff --git a/website/react-magma-docs/src/pages/design/breadcrumb.mdx b/website/react-magma-docs/src/pages/design/breadcrumb.mdx index 0019fc83e6..ba240d05e7 100644 --- a/website/react-magma-docs/src/pages/design/breadcrumb.mdx +++ b/website/react-magma-docs/src/pages/design/breadcrumb.mdx @@ -4,9 +4,7 @@ title: Breadcrumb order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -20,7 +18,10 @@ import { LeadParagraph } from '../../components/LeadParagraph'; The default breadcrumb component is styled for use on backgrounds **neutral100** or **neutral200**. For dark backgrounds you can use the inverse version.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        --- @@ -29,14 +30,17 @@ The default breadcrumb component is styled for use on backgrounds **neutral100** As the viewport gets smaller, the breadcrumb component will simply wrap to as many lines as necessary. Mobile apps do not typically use breadcrumbs, and the same goes for when our Responsive applications are rendered on smaller screens. Therefore it is appropriate to suppress the breadcrumbs at a specified breakpoint, and provide an alternative way of navigating if necessary. A common breakpoint for hiding breadcrumbs is 600px, which covers the majority of small tablets and phones. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        diff --git a/website/react-magma-docs/src/pages/design/button.mdx b/website/react-magma-docs/src/pages/design/button.mdx index 41d188960a..c597352e33 100644 --- a/website/react-magma-docs/src/pages/design/button.mdx +++ b/website/react-magma-docs/src/pages/design/button.mdx @@ -4,9 +4,8 @@ title: Button order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; + import { Button } from 'react-magma-dom'; @@ -64,22 +63,22 @@ Almost all buttons use text labels, which describe the action that will occur if Text labels should always be short and have clear purpose. If a button requires a text label with three or more words, try really hard to shorten it. If you can’t, you may use title case to help reduce the size of the button’s footprint. We recommend buttons using title case also have an outline or solid container, to help differentiate the button from the text around it. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Keep labels short

        -
        +
        GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Don’t wrap text. For maximum legibility and recognition as a button, a text label should never wrap to multiple lines. @@ -88,12 +87,12 @@ Text labels should always be short and have clear purpose. If a button requires

        -
        -
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Text labels can be written in title case if all efforts to make the label less than three words have been exhausted, or if the button @@ -102,14 +101,14 @@ Text labels should always be short and have clear purpose. If a button requires

        -
        +
        -
        -
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Text buttons don’t typically need a container when in all caps, because the label is differentiated from the text around it. @@ -117,11 +116,11 @@ Text labels should always be short and have clear purpose. If a button requires

        -
        +
        GATSBY_EMPTY_ALT
        -

        Caution

        +

        Caution

        Text labels need to be distinct from other elements. Without a container, the button above could be hard to distinguish from the @@ -137,22 +136,22 @@ Text labels should always be short and have clear purpose. If a button requires You can place icons next to text labels to both clarify an action and call attention to a button. If a text label is not used, make sure the icon is intuitive and clear through testing. Also, consider using a tooltip so its exact meaning can be easily seen on hover. -

        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        Use icons that clearly communicate their meaning.

        -
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        You can use icons without a text label if testing proves that the intended action of the button is clear to the users. @@ -161,12 +160,12 @@ You can place icons next to text labels to both clarify an action and call atten

        -
        -
        +
        +
        GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Don’t vertically align an icon and text in the center of a contained button. @@ -174,11 +173,11 @@ You can place icons next to text labels to both clarify an action and call atten

        -
        +
        GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Don’t use two icons in the same button.

        @@ -212,14 +211,14 @@ The **primary** button should be used by default for important actions. From the When you are pairing together primary and secondary actions such as "Save" and "Cancel", it is recommended you use the primary and secondary buttons. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -
        +
        @@ -229,16 +228,22 @@ The **subtle** button style is intended to have even less emphasis than **second An additional benefit of the subtle button's very neutral appearance is to help limit the amount of the primary brand color appearing on the page. Too much of this color can result in a very chaotic experience where everything looks relatively important and is distracting. The subtle button helps calm an interface that has a high number of actions that can be performed. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        @@ -248,14 +253,14 @@ An additional benefit of the subtle button's very neutral appearance is to help For actions that delete things, you can emphasize this action with the **danger** buttons. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -
        +
        @@ -269,9 +274,9 @@ The **marketing** button is intended to be used on product websites where the pr If your button is going on a dark background, all of the buttons have an inverse appearance for optimal accessibility. They are carefully designed for use within entirely dark themes for Dark Mode. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        @@ -285,9 +290,9 @@ If your button is going on a dark background, all of the buttons have an inverse Buttons have clear states to provide feedback to the user. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        @@ -301,9 +306,9 @@ It’s important for users to clearly see when the browser’s focus is on a but The solid outline is 2px thick with at least a 2px offset, and the color is info-500. These properties ensure the outline is visible on a light background. The color changes to semi-transparent-white for optimal visibility on dark backgrounds. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        @@ -329,13 +334,13 @@ An app can show more than one button in a layout at a time, so a high-emphasis b Multiple button types can be used to express different emphasis levels. When using buttons that are contextually connected to left-to-right content, the buttons should also be left aligned, with the most important action coming first. When the buttons are positioned as actions for a larger context, like an entire modal or page, then the buttons will typically be right aligned, with the most important action on the far right. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        When using multiple buttons, you can place a text button next to a solid button to show emphasis. @@ -343,11 +348,11 @@ Multiple button types can be used to express different emphasis levels. When usi

        -
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        When using multiple buttons in the bottom bar of a modal, the buttons align to the right with the most important button on the far @@ -357,12 +362,12 @@ Multiple button types can be used to express different emphasis levels. When usi

        -
        -
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        You can place a text button (low emphasis) next to an outlined button (medium emphasis). @@ -370,7 +375,7 @@ Multiple button types can be used to express different emphasis levels. When usi

        -
        +
        @@ -380,13 +385,13 @@ Multiple button types can be used to express different emphasis levels. When usi Button sizes and placements will sometimes need to change because of the size of the user’s screen. CSS breakpoints should be determined based on need, instead of limited to a set of standard breakpoints. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        You may allow the buttons to go block level if it benefits the design or if there isn’t enough room for them to remain @@ -395,11 +400,11 @@ Button sizes and placements will sometimes need to change because of the size of

        -
        +
        GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        No need to force buttons to be block level if they fit in the container without problem. diff --git a/website/react-magma-docs/src/pages/design/buttongroup.mdx b/website/react-magma-docs/src/pages/design/buttongroup.mdx index 096b6e3927..39b6fb5adc 100644 --- a/website/react-magma-docs/src/pages/design/buttongroup.mdx +++ b/website/react-magma-docs/src/pages/design/buttongroup.mdx @@ -4,9 +4,7 @@ title: ButtonGroup order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -24,14 +22,17 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ButtonGroup can be either horizontal or vertical in its orientation. By default, ButtonGroup is horizontal. Use the vertical option when horizontal space is limited. -

        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        @@ -39,14 +40,14 @@ ButtonGroup can be either horizontal or vertical in its orientation. By default, ButtonGroup comes in three different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -
        +
        @@ -54,14 +55,17 @@ ButtonGroup comes in three different sizes: small, medium, and large. The medium You can easily remove the space between buttons to create a single unit. When you join buttons like this together, there typically isn't a hierarchy within their relationship, so it is acceptable to use the same button style. This property is not intended for vertical ButtonGroups. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        @@ -73,16 +77,22 @@ You can easily remove the space between buttons to create a single unit. When yo The most critical action within a ButtonGroup should be a primary, marketing, or danger button (fill or outline). The other actions should always be a secondary outline button. If all of the buttons are of equal importance, the buttons can all use the same variant. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        @@ -92,14 +102,17 @@ The most critical action within a ButtonGroup should be a primary, marketing, or ButtonGroups are aligned contextually. In general, ButtonGroups are left-aligned to follow content such as a block of text. They can be center-aligned if that block of text is also center-aligned. And, they should be right-aligned inside container components such as modals, or cards. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        @@ -107,16 +120,22 @@ ButtonGroups are aligned contextually. In general, ButtonGroups are left-aligned The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        @@ -126,16 +145,22 @@ The order of button priority should match the alignment of surrounding text. Whe Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the most critical action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        @@ -145,17 +170,20 @@ Not all buttons in a group require an icon, but buttons with icons should always Use ButtonGroup to show any additional actions related to the most critical action. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        - + diff --git a/website/react-magma-docs/src/pages/design/card.mdx b/website/react-magma-docs/src/pages/design/card.mdx index 3addf91886..42dcf23b6e 100644 --- a/website/react-magma-docs/src/pages/design/card.mdx +++ b/website/react-magma-docs/src/pages/design/card.mdx @@ -4,9 +4,7 @@ title: Card order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -20,21 +18,24 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Cards are one of the core building blocks in React Magma. They can be used to create the overall layout of a page, contain relatively large amounts of content focusing on a single topic, or contain small related pieces of content such as a carousel. -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        - + ## Anatomy @@ -61,7 +62,7 @@ Use full-width dividers that extend to the edges of a card to separate more dist
        GATSBY_EMPTY_ALT
        - + --- @@ -80,7 +81,7 @@ If a card can move, such as in a carousel or a drag and drop scenario, you shoul
        GATSBY_EMPTY_ALT
        - + --- @@ -90,13 +91,16 @@ A card will grow vertically to display as much content as you choose to put insi To avoid these issues, you should instead provide links within the card to view more information somewhere else, or allow the cards to expand and show more details. You may also switch from one method to the other based on a logical breakpoint. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        If the maximum height of the card isn't enough to display all of the content, then allow the card to expand and collapse on small @@ -105,11 +109,14 @@ To avoid these issues, you should instead provide links within the card to view

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        On small devices, do not allow scrolling within a card or you could create a trap for the user on small devices preventing them from @@ -120,7 +127,7 @@ To avoid these issues, you should instead provide links within the card to view

        - + --- @@ -139,7 +146,7 @@ Cards can contain many kinds of UI controls, including buttons, tabs, toggle swi
        GATSBY_EMPTY_ALT
        - + --- @@ -152,7 +159,7 @@ Various colors from the global color palette may be used as the background of a
        GATSBY_EMPTY_ALT
        - + --- @@ -165,7 +172,7 @@ Callout cards add a band of color to the left edge of the container. This can be
        GATSBY_EMPTY_ALT
        - + --- @@ -178,7 +185,10 @@ When cards are grouped together, it's because they are working together for a co In general, cards change size depending on the amount of content within them. But you can emphasize certain cards creating a layout that implies a hierarchy on the page with different sized columns. Just be mindful the card is large enough to support the content of the card, and that the content responds appropriately on smaller screens.
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        ### Scannable @@ -188,6 +198,6 @@ If you want a group of cards to be easy to scan, use a clean and consistent patt
        GATSBY_EMPTY_ALT
        - + diff --git a/website/react-magma-docs/src/pages/design/character-counter.mdx b/website/react-magma-docs/src/pages/design/character-counter.mdx index ef2a21956b..bba80a4fb4 100644 --- a/website/react-magma-docs/src/pages/design/character-counter.mdx +++ b/website/react-magma-docs/src/pages/design/character-counter.mdx @@ -4,10 +4,7 @@ title: Character Counter order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; -import { Tooltip } from 'react-magma-dom'; @@ -40,40 +37,49 @@ import { Tooltip } from 'react-magma-dom'; The character counter initially tells the user the maximum number of characters they are allowed to enter. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        As the user types, the character counter updates in real-time and informs the user how many characters they have left. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        When the user exceeds the maximum number of characters allowed, the character counter alerts them with an error and tells the user how many characters over the limit they are. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -
        +
        diff --git a/website/react-magma-docs/src/pages/design/checkboxes.mdx b/website/react-magma-docs/src/pages/design/checkboxes.mdx index 1987b9639b..4f4bd446e8 100644 --- a/website/react-magma-docs/src/pages/design/checkboxes.mdx +++ b/website/react-magma-docs/src/pages/design/checkboxes.mdx @@ -5,7 +5,6 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -23,8 +22,11 @@ Use checkboxes to: - Turn an option/setting on or off
        -
        - GATSBY_EMPTY_ALT +
        + GATSBY_EMPTY_ALT

        Checkboxes

        @@ -40,7 +42,7 @@ Checkboxes can have a parent-child relationship with other checkboxes. - If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox
        -
        +
        GATSBY_EMPTY_ALT -
        - GATSBY_EMPTY_ALT +
        + GATSBY_EMPTY_ALT

        Checkbox states

        @@ -69,7 +74,7 @@ Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enable The default color used for checked checkboxes is primary-500 from the Magma palette, but sometimes a special scenario or specific UI can benefit from using one of the other colors from the palette. Colors like Info Blue (info-500), Success Green (success-500), or Danger Red (danger-500) can help add context when used responsibly and consistently.
        -
        +
        GATSBY_EMPTY_ALT
        -
        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Do not use multiple colors in the same UI. Pick one and stick with it. @@ -97,17 +102,17 @@ The default color used for checked checkboxes is primary-500 from the Magma pale

        -
        +
        GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        - If you are going to change the color, don't use a neutral color. This - could be confused with a checkbox that is checked and disabled. + If you are going to change the color, don't use a neutral color. + This could be confused with a checkbox that is checked and disabled.

        @@ -120,8 +125,11 @@ The default color used for checked checkboxes is primary-500 from the Magma pale Use the inverse version when using the checkboxes on a dark background.
        -
        - GATSBY_EMPTY_ALT +
        + GATSBY_EMPTY_ALT

        Inverse colors

        diff --git a/website/react-magma-docs/src/pages/design/combobox.mdx b/website/react-magma-docs/src/pages/design/combobox.mdx index ac0ee3145d..dde1aae5c1 100644 --- a/website/react-magma-docs/src/pages/design/combobox.mdx +++ b/website/react-magma-docs/src/pages/design/combobox.mdx @@ -5,7 +5,6 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/design/date-picker.mdx b/website/react-magma-docs/src/pages/design/date-picker.mdx index b757146f2f..caff6a56db 100644 --- a/website/react-magma-docs/src/pages/design/date-picker.mdx +++ b/website/react-magma-docs/src/pages/design/date-picker.mdx @@ -4,9 +4,6 @@ title: Date Picker order: 1 --- -import { LeadParagraph } from '../../components/LeadParagraph'; -import { Link } from 'gatsby'; - @@ -16,8 +13,11 @@ import { Link } from 'gatsby';
        -
        - GATSBY_EMPTY_ALT +
        + GATSBY_EMPTY_ALT
        @@ -47,22 +47,28 @@ The field label tells the user what information they need to input. Using placeh - Do not truncate text labels. - Keep labels as short and clear as possible to avoid wrapping to multiple lines. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Do not truncate field labels.

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Caution

        +

        Caution

        Wrapping long field labels is acceptable, but try to avoid at all costs. Labels are best kept simple and short enough to fit on a @@ -78,9 +84,9 @@ The field label tells the user what information they need to input. Using placeh Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation. -

        -
        -
        +
        +
        +
        GATSBY_EMPTY_ALT
        @@ -91,7 +97,7 @@ Placeholder text provides hints or examples of what to enter. Placeholder text d
        -
        +
        @@ -99,17 +105,20 @@ Placeholder text provides hints or examples of what to enter. Placeholder text d Helper text is pertinent information that assists the user in completing a field. Helper text appears underneath the container and remains visible unless there is a validation error on that field. Use sentence-style capitalization, and in most cases, write the text as full sentences with punctuation. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Example of input helper text

        -
        +
        @@ -117,13 +126,16 @@ Helper text is pertinent information that assists the user in completing a field Required fields should be indicated by putting an asterisk (\*) at the end of the label. If there are very few required inputs in the form, you can use the helper text to inform the user what the asterisk means. If there are a relatively large number of required fields in the form, you can put a legend at the top of the form and just tell them once. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        A required field is indicated with an asterisk. If there aren't many required fields, you may use the Helper Text to tell the user what @@ -132,11 +144,14 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Correct

        +

        Correct

        If there are multiple required fields, you may explain the meaning of the asterisk one time above the form. @@ -145,12 +160,15 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

        -
        -
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        -

        Incorrect

        +

        Incorrect

        Only required fields are called out as such. Do not mark optional fields. @@ -158,7 +176,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

        -
        +
        @@ -174,17 +192,20 @@ The input container is filled with white and has a 1px border. The color of the Inputs have a 5px border radius to be consistent with buttons, which often accompany inputs. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Examples of text fields on light and dark backgrounds.

        -
        +
        @@ -194,11 +215,14 @@ Inputs have a 5px border radius to be consistent with buttons, which often accom Icons can be used to help provide clarity or functionality. Leading icons are typically used to help clarify the type of input, such as email or phone. Trailing icons are typically also buttons that can be used to clear the input or trigger something else like a calendar component. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Example of input with leading icon. The Visa icon helps identify the @@ -207,9 +231,12 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty

        -
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Example of input with trailing icon. The calendar icon is a button @@ -227,17 +254,20 @@ The "Help Icon" can be added to inputs that might require more explanation or cl The icon can be configured to simply display a message within a tooltip or also trigger actions like opening a modal or navigating to another location for extreme cases. -

        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Example of input with Help icon

        -
        +
        @@ -245,11 +275,14 @@ The icon can be configured to simply display a message within a tooltip or also ## Input States -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Inputs can display the following states: active, disabled, focused, @@ -258,7 +291,7 @@ The icon can be configured to simply display a message within a tooltip or also

        -
        +
        @@ -267,23 +300,26 @@ The icon can be configured to simply display a message within a tooltip or also 1. Focus 1. Error - + ### Error Messages When the input provided is invalid, an error message should be used to provide instructions on how to fix the error. The error message will replace the helper text until it is fixed. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        Example of input with error message

        -
        +
        diff --git a/website/react-magma-docs/src/pages/design/design-guidelines-styles.css b/website/react-magma-docs/src/pages/design/design-guidelines-styles.css index f093920fe3..c960f9bb64 100644 --- a/website/react-magma-docs/src/pages/design/design-guidelines-styles.css +++ b/website/react-magma-docs/src/pages/design/design-guidelines-styles.css @@ -96,12 +96,12 @@ figcaption .title-correct { } figcaption .title-incorrect { - background: #D32821; + background: #d32821; color: #fff; } figcaption .title-caution { - background: #AD5115; + background: #ad5115; color: #fff; } @@ -136,7 +136,7 @@ figcaption .title-caution { } .swatch-rows .color-test-light { - color: #FFFFFF; + color: #ffffff; margin: 0; font-size: 16px; line-height: 24px; @@ -229,8 +229,8 @@ figcaption .title-caution { text-align: center; margin-bottom: 32px; border-radius: 8px; - background: #FFFFFF; - border: 1px solid #D4D4D4; + background: #ffffff; + border: 1px solid #d4d4d4; } .principles-c h3 { @@ -248,9 +248,9 @@ figcaption .title-caution { padding: 24px; margin: 0; text-align: left; - background: #3942B0; + background: #3942b0; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; } .principles-c blockquote p { @@ -443,44 +443,43 @@ td .space-example { font-size: 20px; font-weight: 400; line-height: 32px; - color: #292F7C; + color: #292f7c; } .expressive-heading-xlarge { font-size: 32px; font-weight: 600; line-height: 40px; - color: #292F7C; + color: #292f7c; } .expressive-heading-large { font-size: 28px; font-weight: 300; line-height: 40px; - color: #292F7C; + color: #292f7c; } .expressive-heading-medium { font-size: 24px; font-weight: 300; line-height: 32px; - color: #292F7C; + color: #292f7c; } .expressive-heading-small { font-size: 20px; font-weight: 300; line-height: 32px; - color: #292F7C; + color: #292f7c; } .expressive-heading-xsmall { font-size: 18px; font-weight: 300; line-height: 32px; - color: #292F7C; + color: #292f7c; } - } @media only screen and (max-width: 480px) { diff --git a/website/react-magma-docs/src/pages/design/dropdown.mdx b/website/react-magma-docs/src/pages/design/dropdown.mdx index 5a6b90b721..7f6b18c10e 100644 --- a/website/react-magma-docs/src/pages/design/dropdown.mdx +++ b/website/react-magma-docs/src/pages/design/dropdown.mdx @@ -4,9 +4,7 @@ title: Dropdown order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -18,7 +16,10 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Usage
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
        --- @@ -29,11 +30,14 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Dropdown menus typically contain a list of text-only menu items. -
        -
        -
        +
        +
        +
        - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

        There is 8px of space above the first item in the dropdown, and @@ -43,7 +47,7 @@ Dropdown menus typically contain a list of text-only menu items.

        -
        +
        1. Container
        2. Text Label
          3. @@ -57,14 +61,17 @@ Dropdown menus typically contain a list of text-only menu items. Dropdown menu items may also use an icon on the left side to help clarify the meaning of the menu choice. -
          -
          -
          +
          +
          +
          - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
          -
          +
          1. Container
          2. Icon
            3. @@ -79,9 +86,9 @@ Dropdown menu items may also use an icon on the left side to help clarify the me Dropdown menus may use a selection state by placing a checkmark next to the currently active choice. -
            -
            -
            +
            +
            +
            -
            +
            1. Container
            2. Selected item indicator
              3. @@ -103,14 +110,17 @@ Dropdown menus may use a selection state by placing a checkmark next to the curr Some dropdowns benefit from organizing the choices or options into groups, and then labelling those groups. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              @@ -120,13 +130,16 @@ A dropdown will stretch horizontally by default to fit the longest item in the l **Note:** For Responsive applications, dropdowns should have a width no greater than 320px. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don't let menus extend beyond the boundaries of the browser window because of long menu labels or other wide content. @@ -134,11 +147,14 @@ A dropdown will stretch horizontally by default to fit the longest item in the l

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Set the width of the dropdown to an appropriate value for where it's placed in the UI. @@ -147,12 +163,15 @@ A dropdown will stretch horizontally by default to fit the longest item in the l

              -
              -
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              You can change how the menu aligns with the button to ensure it doesn't spill outside the browser viewport. @@ -160,7 +179,7 @@ A dropdown will stretch horizontally by default to fit the longest item in the l

              -
              +
              @@ -168,13 +187,16 @@ A dropdown will stretch horizontally by default to fit the longest item in the l Dropdowns have a default max-height of 250px and will scroll if necessary. This helps prevent extremely long lists of choices from stretching beyond the top and bottom boundaries of the browser window. 250px is enough to show an average of 6 single line menu choices at once. The max-height can be easily changed if a different value would improve the experience. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              If the dropdown isn't tall enough to show all content, it will automatically scroll. @@ -182,11 +204,14 @@ Dropdowns have a default max-height of 250px and will scroll if necessary. This

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Caution

              +

              Caution

              Allowing a dropdown to get really tall could make it difficult to use. @@ -205,17 +230,20 @@ Dropdowns have a default max-height of 250px and will scroll if necessary. This The standard dropdown button is the most common element used to trigger a dropdown container. -

              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of single dropdown button.

              -
              +
              @@ -223,17 +251,20 @@ The standard dropdown button is the most common element used to trigger a dropdo Split buttons combine a single action button with a menu of related choices into a single component. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of split-dropdown button.

              -
              +
              @@ -241,9 +272,9 @@ Split buttons combine a single action button with a menu of related choices into Other button variants may be used as a trigger for a dropdown menu. Caution should be used because depending on the label or icon within the button, or where it's used, showing a dropdown menu could be confusing. -
              -
              -
              +
              +
              +
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Dropdowns can be left or right aligned.

              - +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Dropdowns can be positioned above the trigger element. If using a button, @@ -295,9 +332,12 @@ A dropdown is typically displayed below the trigger element, and the left edge o

              - +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Dropdowns can be positioned to the left or right of the trigger element. @@ -311,11 +351,14 @@ A dropdown is typically displayed below the trigger element, and the left edge o Dropdowns are capable of displaying any kind of content, but great care should be taken with this ability. Dropdowns are great for showing small amounts of content or simple forms and functions. Trying to do too much within a dropdown could quickly become difficult to use, and this is especially the case on small screens. -

              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Small forms can be shown inside a dropdown instead of going to a new @@ -324,9 +367,12 @@ Dropdowns are capable of displaying any kind of content, but great care should b

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Menu items can be combined with custom content.

              diff --git a/website/react-magma-docs/src/pages/design/dropzone.mdx b/website/react-magma-docs/src/pages/design/dropzone.mdx index b57be3d9b3..f242e107a4 100644 --- a/website/react-magma-docs/src/pages/design/dropzone.mdx +++ b/website/react-magma-docs/src/pages/design/dropzone.mdx @@ -4,9 +4,7 @@ title: Dropzone order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -90,6 +88,6 @@ If the error is with the uploader itself and not a specific file, then a validat ![ ](../../images/dropzone/uploader-validation.png) - + diff --git a/website/react-magma-docs/src/pages/design/header.mdx b/website/react-magma-docs/src/pages/design/header.mdx index a54c35d3be..2838a9bbd3 100644 --- a/website/react-magma-docs/src/pages/design/header.mdx +++ b/website/react-magma-docs/src/pages/design/header.mdx @@ -4,9 +4,7 @@ title: Header isPattern: true --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -32,13 +30,16 @@ The header component is designed to be extremely flexible allowing designers to 1. Hamburger menu for responsive design
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              Header on small/mobile screen
              -
              +
              GATSBY_EMPTY_ALT
              Header on large/desktop screen
              @@ -48,7 +49,10 @@ The header component is designed to be extremely flexible allowing designers to Horizontal specifications are consistent across all “flavors” of the header (standard, compact, and responsive.)
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              Header on small/mobile screen
              @@ -58,7 +62,10 @@ Horizontal specifications are consistent across all “flavors” of the header
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              Header with sidebar menu icon
              @@ -67,7 +74,10 @@ Horizontal specifications are consistent across all “flavors” of the header In certain circumstances, designers may need to left-justify header features. The component allows for this and uses the same basic rules of horizontal and vertical spacing.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              Header with left justification
              @@ -126,7 +136,7 @@ Here are several examples of strategies that designers should avoid:
              GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Incorrect: Too many icons create inbalance and clutter

              @@ -138,7 +148,7 @@ Don't duplicate items that already exist in the sidebar or elsewhere on the UI.
              GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              These already exist in the sidebar or are better suited there

              @@ -146,9 +156,12 @@ Don't duplicate items that already exist in the sidebar or elsewhere on the UI. ### Don't use a collapsed sidebar and hamburger menu
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Sidebar controls should never co-exist with the hamburger menu

              diff --git a/website/react-magma-docs/src/pages/design/icon.mdx b/website/react-magma-docs/src/pages/design/icon.mdx index e555f6b1bd..27c4260951 100644 --- a/website/react-magma-docs/src/pages/design/icon.mdx +++ b/website/react-magma-docs/src/pages/design/icon.mdx @@ -4,8 +4,6 @@ title: Icon order: 2 --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -36,13 +34,16 @@ This example illustrates how 12px, 14px, 16px, and 20px text strings are paired ![ ](../../images/icons/icon-text-balance.png) -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Maintain the balance of icons with text by using the line-height as a guide. @@ -50,11 +51,14 @@ This example illustrates how 12px, 14px, 16px, and 20px text strings are paired

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don't let icons get too large or too small when paired with text. Use the line-height of the text as a guide. @@ -73,13 +77,16 @@ Our icons are simple monochromatic symbols, and any color from the color palette The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the background it appears on. The color of the icon can help reflect the importance or nature of the action the icon is representing, but shouldn't rely on color alone. Text labels or tooltips are still important elements that can help make the action clearer to users. -

              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              It's nearly always a good idea to match the color of the icon with the text label, but sometimes you may want the icon to be a list @@ -88,11 +95,14 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              In this example, the icon only hits a contrast ratio of 1.7:1. Despit the fact there is a text label, the icons should still hit a @@ -102,12 +112,15 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the

              -
              -
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Do not mix colors when combining an icon with text, unless you are using different shades of the same color or using our default text @@ -116,7 +129,7 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the

              -
              +
              @@ -126,24 +139,30 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the When positioning an icon next to text you should always center-align them. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Always center-align icons with text when they're next to each other.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don't bottom-align or top-align icons with text when they're next to each other. @@ -153,6 +172,6 @@ When positioning an icon next to text you should always center-align them.

              - + diff --git a/website/react-magma-docs/src/pages/design/indeterminate.mdx b/website/react-magma-docs/src/pages/design/indeterminate.mdx index 71cea9f69d..aa5f9d5743 100644 --- a/website/react-magma-docs/src/pages/design/indeterminate.mdx +++ b/website/react-magma-docs/src/pages/design/indeterminate.mdx @@ -5,12 +5,12 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; - Commonly used in hierarchical checkboxes to indicate that only some of the checkbox's descendants are checked. + Commonly used in hierarchical checkboxes to indicate that only some of the + checkbox's descendants are checked. ## Usage @@ -19,9 +19,9 @@ Use the indeterminate state when the checkbox contains a sub list of selections, View the documentation for checkboxes for more details. - +
              -
              +
              GATSBY_EMPTY_ALT @@ -18,8 +15,11 @@ import { Link } from 'gatsby'; Inputs can be used alone or they can be combined with other types of inputs to create more robust forms. In addition to text fields, other types of inputs include text area, password, search, number, and more.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -52,8 +52,11 @@ Use this input when the expected user input is a single line of text, as opposed View component API for text fields.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -64,8 +67,11 @@ Use this input when the expected user input is more than one sentence. View component API for text areas.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -76,8 +82,11 @@ Use this input when you want to keep the user's password masked for security. View the password input documentation for more detail.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -88,8 +97,11 @@ Use this input when you want to limit the user's input to numerical characters. View component API for number inputs.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -100,8 +112,11 @@ Use the search input when the desired functionality is to submit a search query. View component API or design guidelines for search inputs.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -112,8 +127,11 @@ Use the date input when you want the user to input a date in the format you choo View component API for date inputs.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -134,7 +152,7 @@ View component API for date inputs. The field label tells the user what information they need to input. Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this should typically be limited to search inputs because it hides context and presents accessibility issues. -**Input labels should be written in sentence case.** This means only the first word and proper nouns should be capitalized. +**Input labels should be written in sentence case.** This means only the first word and proper nouns should be capitalized. #### Accessibility best practices for labels @@ -143,22 +161,28 @@ The field label tells the user what information they need to input. Using placeh - Do not truncate text labels. - Keep labels as short and clear as possible to avoid wrapping to multiple lines. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Do not truncate field labels.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Caution

              +

              Caution

              Wrapping long field labels is acceptable, but try to avoid at all costs. Labels are best kept simple and short enough to fit on a @@ -174,9 +198,9 @@ The field label tells the user what information they need to input. Using placeh Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation. -

              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              @@ -187,7 +211,7 @@ Placeholder text provides hints or examples of what to enter. Placeholder text d
              -
              +
              @@ -195,17 +219,20 @@ Placeholder text provides hints or examples of what to enter. Placeholder text d Helper text is pertinent information that assists the user in completing a field. Helper text appears underneath the container and remains visible unless there is a validation error on that field. Use sentence-style capitalization, and in most cases, write the text as full sentences with punctuation. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of input helper text

              -
              +
              @@ -213,13 +240,16 @@ Helper text is pertinent information that assists the user in completing a field Required fields should be indicated by putting an asterisk (\*) at the end of the label. If there are very few required inputs in the form, you can use the helper text to inform the user what the asterisk means. If there are a relatively large number of required fields in the form, you can put a legend at the top of the form and just tell them once. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              A required field is indicated with an asterisk. If there aren't many required fields, you may use the Helper Text to tell the user what @@ -228,11 +258,14 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              If there are multiple required fields, you may explain the meaning of the asterisk one time above the form. @@ -241,12 +274,15 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

              -
              -
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Only required fields are called out as such. Do not mark optional fields. @@ -254,7 +290,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

              -
              +
              @@ -270,17 +306,20 @@ The input container is filled with white and has a 1px border. The color of the Inputs have a 5px border radius to be consistent with buttons, which often accompany inputs. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Examples of text fields on light and dark backgrounds.

              -
              +
              @@ -290,11 +329,14 @@ Inputs have a 5px border radius to be consistent with buttons, which often accom Icons can be used to help provide clarity or functionality. Leading icons are typically used to help clarify the type of input, such as email or phone. Trailing icons are typically also buttons that can be used to clear the input or trigger something else like a calendar component. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of input with leading icon. The Visa icon helps identify the @@ -303,9 +345,12 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of input with trailing icon. The calendar icon is a button @@ -319,21 +364,24 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty #### Help Link -The "Help Icon" can be added to inputs that might require more explanation or clarification to the user. The difference between the "Help Icon" and the "Helper Text" below the input is that the "Help Icon" is used to explain things like why the user needs to fill out that input or how you're going to use that information. The "Helper Text" is used to explain how to fill out the input by showing examples of expected information or restrictions. +The "Help Icon" can be added to inputs that might require more explanation or clarification to the user. The difference between the "Help Icon" and the "Helper Text" below the input is that the "Help Icon" is used to explain things like why the user needs to fill out that input or how you're going to use that information. The "Helper Text" is used to explain how to fill out the input by showing examples of expected information or restrictions. The icon can be configured to simply display a message within a tooltip or also trigger actions like opening a modal or navigating to another location for extreme cases. -

              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of input with Help icon

              -
              +
              @@ -341,11 +389,14 @@ The icon can be configured to simply display a message within a tooltip or also ## Input States -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Inputs can display the following states: active, disabled, focused, @@ -354,7 +405,7 @@ The icon can be configured to simply display a message within a tooltip or also

              -
              +
              @@ -363,23 +414,26 @@ The icon can be configured to simply display a message within a tooltip or also 1. Focus 1. Error - + ### Error Messages When the input provided is invalid, an error message should be used to provide instructions on how to fix the error. The error message will replace the helper text until it is fixed. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of input with error message

              -
              +
              @@ -394,4 +448,4 @@ When the input provided is invalid, an error message should be used to provide i The regular sized inputs should be used in all cases, unless you are creating an interface that justifies the use of the large input. One example could be a page focusing entirely on search. Inputs should not be customized outside of these two standards without review and approval by the UX Department. - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/design/list.mdx b/website/react-magma-docs/src/pages/design/list.mdx index 3f2d0e870b..4c2cbddff9 100644 --- a/website/react-magma-docs/src/pages/design/list.mdx +++ b/website/react-magma-docs/src/pages/design/list.mdx @@ -4,9 +4,7 @@ title: List order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -25,18 +23,21 @@ Use unordered (bulleted) lists when you don’t need to convey a specific order Use ordered (numbered) lists when you need to convey a sequence or hierarchy between list items. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              The list in this image shows a list of grocery items in no particular order.
              -
              +
              GATSBY_EMPTY_ALT
              @@ -74,16 +75,22 @@ The basic unordered and ordered lists have very minimal styling and instead rely You can use the spacing tokens in React Magma to increase the vertical space between each item in the list. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              @@ -93,14 +100,14 @@ You can use the spacing tokens in React Magma to increase the vertical space bet The icon list is really just a variant of the Unordered List, but instead of bullets, you can put Material Design icons in front of each list item. -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -
              +
              @@ -108,14 +115,14 @@ The icon list is really just a variant of the Unordered List, but instead of bul There are three icon size choices, including small, medium, and large. These sizes provide flexibility and allow you to find the right balance between the size of the icon and the content associated with it. -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -
              +
              @@ -123,17 +130,20 @@ There are three icon size choices, including small, medium, and large. These siz You can align the icon with the center or top of the associated content. This largely depends on the layout of the associated content. For example, top-aligning the icon with single lines of content creates a very undesirable appearance. Also center-aligning the icon with content consisting of several lines may also create an odd-looking result. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              - + diff --git a/website/react-magma-docs/src/pages/design/loading-indicator.mdx b/website/react-magma-docs/src/pages/design/loading-indicator.mdx index 8c9b1b07c9..2bf8394c3f 100644 --- a/website/react-magma-docs/src/pages/design/loading-indicator.mdx +++ b/website/react-magma-docs/src/pages/design/loading-indicator.mdx @@ -4,9 +4,7 @@ title: Loading Indicator order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -27,9 +25,9 @@ React Magma loading indicators range from small circular spinners, to larger com Circular spinners are used when the amount of time needed to run a process or load some content is unknown. The circular spinner can be applied to any surface, and should be placed in a way that makes it clear what it is related to. This means the size of the spinner can vary depending on where it's used, but the size should be set in multiples of 10px. -
              -
              -
              +
              +
              +
              -
              +
              @@ -45,14 +43,17 @@ Circular spinners are used when the amount of time needed to run a process or lo Progress bars should be used when real progress data can be fed to it, and you also know it could take several seconds or longer to complete. This could include the uploading of files, loading pages, loading large areas of data, etc. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              @@ -67,7 +68,10 @@ Many actions happen quickly, such as saving updates, submitting a form, or loadi If you know that it will take less than a second to complete an action, then no loading indicator is necessary. If you know the action is going to take 1 - 5 seconds to complete, you should use a circular spinner.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Replace the label in the button with the circular spinner after clicking @@ -75,14 +79,17 @@ If you know that it will take less than a second to complete an action, then no

              - + ### Large Amounts of Data If you are loading large amounts of data like an entire page or large areas of data, the amount of time it takes to load can vary greatly. We need to effectively communicate with the user what is happening, but that takes some informed decisions on our part.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              In this example, we are using a loading indicator while the Learning Path @@ -115,8 +122,11 @@ If there is no way of measuring how long it will take in real-time, but you know If you know from testing that it typically takes more than 15 seconds to load, **AND** you can measure the progress in real-time, you should use the component that uses the progress bar plus message.

              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT

              @@ -126,7 +136,7 @@ If you know from testing that it typically takes more than 15 seconds to load, *

              - + This component also allows for three messages, although at different intervals than the variant with the spinner above. diff --git a/website/react-magma-docs/src/pages/design/modal.mdx b/website/react-magma-docs/src/pages/design/modal.mdx index 6e5c2a1971..2305bf94c4 100644 --- a/website/react-magma-docs/src/pages/design/modal.mdx +++ b/website/react-magma-docs/src/pages/design/modal.mdx @@ -4,10 +4,8 @@ title: Modal order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; import { DemoModal } from '../../components/DemoModal'; -import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/design/native-select.mdx b/website/react-magma-docs/src/pages/design/native-select.mdx index d049a17069..a8f37e3595 100644 --- a/website/react-magma-docs/src/pages/design/native-select.mdx +++ b/website/react-magma-docs/src/pages/design/native-select.mdx @@ -4,9 +4,7 @@ title: Native Select order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/design/password-input.mdx b/website/react-magma-docs/src/pages/design/password-input.mdx index a47589ca58..b3d1a1c9ae 100644 --- a/website/react-magma-docs/src/pages/design/password-input.mdx +++ b/website/react-magma-docs/src/pages/design/password-input.mdx @@ -4,18 +4,19 @@ title: Password Input order: 1 --- -import { LeadParagraph } from '../../components/LeadParagraph'; -import { Link } from 'gatsby'; - - Use the password input when you want to keep the user's password masked for security. + Use the password input when you want to keep the user's password masked for + security.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              diff --git a/website/react-magma-docs/src/pages/design/progress-bar.mdx b/website/react-magma-docs/src/pages/design/progress-bar.mdx index 9cb3426cbf..ce4dcb503e 100644 --- a/website/react-magma-docs/src/pages/design/progress-bar.mdx +++ b/website/react-magma-docs/src/pages/design/progress-bar.mdx @@ -4,9 +4,7 @@ title: Progress Bar order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -24,8 +22,11 @@ Perhaps most importantly, the progress bar should reflect real data or progress, To see how progress bars are used as loading indicators, view the [loading indicator component](/design/loading-indicator/).
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -34,8 +35,11 @@ To see how progress bars are used as loading indicators, view the [loading indic ## Anatomy
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -58,7 +62,10 @@ The width of the progress bar is controlled by the container it is within. For m When a static progress bar is used, it represents the progress of something at that point in time and does not change until an explicit action is performed that updates the progress bar.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of using progress bar to help communicate that the user is on step @@ -67,7 +74,10 @@ When a static progress bar is used, it represents the progress of something at t

              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Progress bars can be used to visually display the same data point for @@ -82,7 +92,10 @@ When a static progress bar is used, it represents the progress of something at t When a dynamic progress bar is used, it means it's updating in real-time while you wait for a series of processes outside of your control to complete.

              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of using progress bar to help communicate that the data is loading @@ -106,8 +119,11 @@ The track on the dark/inverse progress bar has a black background at 25% opacity **Note:** _The colors of the track should not be customized unless you are designing a new theme, and then it's your responsibility to make sure the new design meets accessibility requirements._

              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              diff --git a/website/react-magma-docs/src/pages/design/radio.mdx b/website/react-magma-docs/src/pages/design/radio.mdx index 451812660b..43614bb94a 100644 --- a/website/react-magma-docs/src/pages/design/radio.mdx +++ b/website/react-magma-docs/src/pages/design/radio.mdx @@ -5,11 +5,12 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; -The Radio button allows the user to select one option from a set. + + The Radio button allows the user to select one option from a set. + ## Usage @@ -18,7 +19,7 @@ Use radio buttons when the user needs to see all available options. If available Radio buttons should have the most commonly used option selected by default.
              -
              +
              GATSBY_EMPTY_ALTRadio buttons

              -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Use radio buttons when only one item can be selected from a list.

              -
              +
              GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don’t use checkboxes when only one item can be selected from a list. Use radio buttons instead. @@ -62,8 +63,11 @@ Radio buttons should have the most commonly used option selected by default.

              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT

              Radio buttons - only one option can be selected at a time.

              @@ -75,8 +79,11 @@ Radio buttons should have the most commonly used option selected by default. Radio buttons can be off or on. Radio buttons have enabled, focused and pressed states.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT

              Radio states

              @@ -88,8 +95,11 @@ Radio buttons can be off or on. Radio buttons have enabled, focused and pressed Use the inverse version when using the radio buttons on a dark background.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT

              Inverse colors

              diff --git a/website/react-magma-docs/src/pages/design/search.mdx b/website/react-magma-docs/src/pages/design/search.mdx index 40dcc7ae85..d9c165ec5e 100644 --- a/website/react-magma-docs/src/pages/design/search.mdx +++ b/website/react-magma-docs/src/pages/design/search.mdx @@ -3,9 +3,6 @@ title: Search order: 1 --- -import { Link } from 'gatsby'; -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -25,16 +22,22 @@ Search offers users a way to explore a website or application using keywords. Se Set the user’s context for the search with helpful placeholder text within the search field (search documents), that pertains to the page or section the search box is in. Search in the global header should just say search. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              @@ -52,6 +55,6 @@ Set the user’s context for the search with helpful placeholder text within the - Include enough of a description in the results for users to make a judgement as to whether that particular result is relevant. - Highlight the search term in the results, where appropriate. - + diff --git a/website/react-magma-docs/src/pages/design/select.mdx b/website/react-magma-docs/src/pages/design/select.mdx index 681682dc2e..0e09e5e783 100644 --- a/website/react-magma-docs/src/pages/design/select.mdx +++ b/website/react-magma-docs/src/pages/design/select.mdx @@ -4,9 +4,7 @@ title: Select order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/design/stepper.mdx b/website/react-magma-docs/src/pages/design/stepper.mdx index fe71feeb97..a9d9b46adb 100644 --- a/website/react-magma-docs/src/pages/design/stepper.mdx +++ b/website/react-magma-docs/src/pages/design/stepper.mdx @@ -5,7 +5,6 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -23,15 +22,15 @@ Steppers aid in guiding a user's expectations while navigating through a multist ### When to use -- When the user is working through a linear process that can be organized into three or more steps. -- When the user could benefit from understanding their progress on long forms such as eCommerce checkouts, or course creation. -- When user inputs need to be validated before moving on to the next step. +- When the user is working through a linear process that can be organized into three or more steps. +- When the user could benefit from understanding their progress on long forms such as eCommerce checkouts, or course creation. +- When user inputs need to be validated before moving on to the next step. ### When not to use -- When a process or form has fewer than three steps. -- When the process can be completed in any sequence. -- When the quantity of steps can vary depending on conditional logic. +- When a process or form has fewer than three steps. +- When the process can be completed in any sequence. +- When the quantity of steps can vary depending on conditional logic. --- @@ -39,18 +38,19 @@ Steppers aid in guiding a user's expectations while navigating through a multist ### Anatomy -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              - 1. **Status indicator:** Communicates if a step is completed, current, not started, disabled or has an error. @@ -89,11 +89,17 @@ The step summary layout shows the primary and secondary labels, but only for the The stepper component can be placed on a full page, in a modal, or in a side panel.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              @@ -104,21 +110,23 @@ The stepper component can be placed on a full page, in a modal, or in a side pan ## Content -### Main Elements +### Main Elements #### Label -The label should succinctly convey the user's objectives for each step in one or two words. One option is to clearly indicate the action of the step by using the {verb} + {noun} content formula. For example, “Choose date” or “Configure settings.” A label may use one word if it is universally understood, such as “Cart,” “Shipping,” or “Payment.” Avoid vague terms like “Processing.” You may also number each step to make the progression more obvious. +The label should succinctly convey the user's objectives for each step in one or two words. One option is to clearly indicate the action of the step by using the {`verb`} + {`noun`} content formula. For example, “Choose date” or “Configure settings.” A label may use one word if it is universally understood, such as “Cart,” “Shipping,” or “Payment.” Avoid vague terms like “Processing.” You may also number each step to make the progression more obvious. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -126,15 +134,17 @@ The label should succinctly convey the user's objectives for each step in one or Secondary labels are optional and should be used if some additional description or helper text is beneficial. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -142,17 +152,16 @@ Secondary labels are optional and should be used if some additional description #### Label and Secondary Label -When there isn’t enough space, the labels will wrap to as many lines as necessary. The space available for a label is impacted by the number of steps in the process and the size of the area the stepper is in. If you don’t want the label to wrap, consider rewording the label or use the “summary view” layout. +When there isn’t enough space, the labels will wrap to as many lines as necessary. The space available for a label is impacted by the number of steps in the process and the size of the area the stepper is in. If you don’t want the label to wrap, consider rewording the label or use the “summary view” layout. -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -168,15 +177,17 @@ Each step within the stepper has four states: completed, active, incomplete, and A step is complete when a user has filled out the required information within a step and progressed to the following step. When possible, use validation to confirm that a step has been completed before the user continues. All steps that have been completed are indicated by an outlined circle with a checkmark and a blue active line. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -184,15 +195,17 @@ A step is complete when a user has filled out the required information within a A step is current when a user is interacting with the information within that step. The current step the user is on is indicated by a half-filled circle and a blue active line. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -200,15 +213,17 @@ A step is current when a user is interacting with the information within that st A step is not started when a user has not yet interacted with that step. Steps the user has not encountered yet, or future steps, are indicated by an outlined circle and a gray active line. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -216,23 +231,22 @@ A step is not started when a user has not yet interacted with that step. Steps t A step may be in error when a user has entered invalid or incomplete information. There could also be a server-side error. Provide clear information about the error and guidance on how to resolve the issue. -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -
              -
              +
              ### Interactions -Currently, the stepper is not interactive, providing only a visual update of the users’ progress. This type of functionality may be added in the future. As a result, the navigation from step to step must be handled within the content of the step and it is up to the consumer to decide what is best for their application. +Currently, the stepper is not interactive, providing only a visual update of the users’ progress. This type of functionality may be added in the future. As a result, the navigation from step to step must be handled within the content of the step and it is up to the consumer to decide what is best for their application. -A common example includes buttons labeled as “Next” and “Back”, and often ending with a button labeled “Finish.” But the labels themselves need to make sense for the process being completed, so there isn’t any mandated language to use. You can also choose to not include a “Back” button if you don’t want the user to go back to previous steps. Whatever you do, we suggest conducting usability tests to ensure you have created the best experience possible. +A common example includes buttons labeled as “Next” and “Back”, and often ending with a button labeled “Finish.” But the labels themselves need to make sense for the process being completed, so there isn’t any mandated language to use. You can also choose to not include a “Back” button if you don’t want the user to go back to previous steps. Whatever you do, we suggest conducting usability tests to ensure you have created the best experience possible.
              GATSBY_EMPTY_ALT @@ -240,9 +254,9 @@ A common example includes buttons labeled as “Next” and “Back”, and ofte ### Validation -When possible, use validation to confirm that a step has been completed before the user continues. If any entry is invalid, the stepper should show an error state. Additionally, the invalid entry should be marked with an error state and include an inline error message that helps the user understand the problem and how to fix it. +When possible, use validation to confirm that a step has been completed before the user continues. If any entry is invalid, the stepper should show an error state. Additionally, the invalid entry should be marked with an error state and include an inline error message that helps the user understand the problem and how to fix it. -If the user cannot proceed due to a server-side issue, then an inline alert should appear. +If the user cannot proceed due to a server-side issue, then an inline alert should appear.
              GATSBY_EMPTY_ALT @@ -252,41 +266,53 @@ If the user cannot proceed due to a server-side issue, then an inline alert shou The variable nature of the stepper makes it difficult to mandate just one set of changes or behaviors for small screens. For this reason we allow the consumer to not only pick the break point, but also three choices for what happens to the stepper as the screen gets smaller, or the user zooms in enough to trigger it. -#### Standard Labels +#### Standard Labels -If you don’t have very many steps and the labels are short, it is very possible for this format to work even on small screens. +If you don’t have very many steps and the labels are short, it is very possible for this format to work even on small screens.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              -
              +
              -#### Hide Labels +#### Hide Labels -Hiding the labels on small screens is acceptable, but only if you are using very clear titles to make up for their absence. +Hiding the labels on small screens is acceptable, but only if you are using very clear titles to make up for their absence.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              -#### Step Summary +#### Step Summary -This may be the most common format for small screens or zooming in. You only display the specific information necessary at that moment, but you aren’t losing the context of what number step you are on, and how many are left. +This may be the most common format for small screens or zooming in. You only display the specific information necessary at that moment, but you aren’t losing the context of what number step you are on, and how many are left.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              -
              +
              --- ## Accessibility -- W3C Web Accessibility Tutorial for Multi-Page Forms provides examples of how to create accessible progress indicators. +- + W3C Web Accessibility Tutorial for Multi-Page Forms + + provides examples of how to create accessible progress indicators. **WCAG requirements:** @@ -295,5 +321,4 @@ This may be the most common format for small screens or zooming in. You only dis - Headings and Labels (WCAG Success Criteria 2.4.6) - Name, Role, Value (WCAG Success Criteria 4.1.2) - diff --git a/website/react-magma-docs/src/pages/design/table.mdx b/website/react-magma-docs/src/pages/design/table.mdx index 8d944b9bde..5953ed6d71 100644 --- a/website/react-magma-docs/src/pages/design/table.mdx +++ b/website/react-magma-docs/src/pages/design/table.mdx @@ -5,7 +5,6 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -92,16 +91,19 @@ The loose density can be useful if you have a relatively small amount of data an - The table title should make it clear to the user what the data is and what purpose it serves in the UI. - A description can be added under the title to provide more information about the data or its source. -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              @@ -115,22 +117,28 @@ The loose density can be useful if you have a relatively small amount of data an
              GATSBY_EMPTY_ALT
              -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don't truncate column titles.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Let long column titles wrap naturally.

              @@ -178,16 +186,22 @@ A sorted table has three states: unsorted (sort-double-arrow), sorted-up (arrow- Inline actions are functions that may be performed on a specific table row. In order to save space, inline actions can be condensed under a single overflow menu. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              diff --git a/website/react-magma-docs/src/pages/design/tabs.mdx b/website/react-magma-docs/src/pages/design/tabs.mdx index b64a027cba..ea55ce047b 100644 --- a/website/react-magma-docs/src/pages/design/tabs.mdx +++ b/website/react-magma-docs/src/pages/design/tabs.mdx @@ -4,9 +4,7 @@ title: Tabs order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -22,7 +20,11 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Anatomy
              - +
              1. Tab @@ -36,13 +38,16 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Text labels should clearly and succinctly describe the content they represent. Tabs have a max-width of 250px by default, and long labels will wrap, but this obviously has a drastic impact on the presentation so we should take great care with the words we choose. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Caution

              +

              Caution

              Be careful how much text you use in your tab labels. The text will wrap, but it has a drastic impact on the presentation of your tabs. @@ -50,11 +55,14 @@ Text labels should clearly and succinctly describe the content they represent. T

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Do not resize the text on a tab to make it fit on a single line.

              @@ -62,12 +70,15 @@ Text labels should clearly and succinctly describe the content they represent. T
              -
              -
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Do not truncate text on a tab to make it fit on a single line. This could make it difficult to understand the true intent of the tab. @@ -75,11 +86,14 @@ Text labels should clearly and succinctly describe the content they represent. T

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Do not mix icon-only tabs with text-only tabs. All tabs in a group should use the same type of tab consistently. @@ -107,9 +121,12 @@ Icons can be placed to the left of the label or on top of the label, depending o

              - +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Icons can be stacked on top of the label which saves horizontal space, but @@ -125,35 +142,41 @@ Icon-only tabs can be very useful for communicating the content they represent,

              GATSBY_EMPTY_ALT
              -

              Caution

              +

              Caution

              Icons used on their own should only be done if testing proves that the icons being used are clear and easy to understand or learn quickly.

              - + ### Active Tab Indicator The active tab indicator helps make it very clear which tab is currently selected. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              The indicator appears on the bottom of the tab by default.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Caution

              +

              Caution

              Displaying tabs below their associated content panel is most commonly used for navigation that appears at the bottom of the @@ -193,30 +216,36 @@ Tabs are displayed in a single row or column, with each tab connected to the con

              Example of tabs in the header of a panel.

              - +
              GATSBY_EMPTY_ALT

              Example of tabs in a column.

              - -
              -
              -
              + +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don't nest tabs to create multiple levels.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don't stack tabs meant to be horizontal on top of each other.

              @@ -242,14 +271,14 @@ Auto-width tabs can be left-aligned, right-aligned, or centered.

              By default, auto-width tabs are left aligned.

              - +
              GATSBY_EMPTY_ALT

              You may also right-align the tabs with the content below or above.

              - +
              GATSBY_EMPTY_ALT
              @@ -262,7 +291,10 @@ Auto-width tabs can be left-aligned, right-aligned, or centered. The tab container for auto-width tabs will automatically scroll if the container becomes too small to show all the tabs. Buttons to scroll left and right will automatically be added, but users with touch-based devices will also be able to drag the tab container left and right.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              If there are more tabs to see beyond the edge of the container, you will @@ -281,11 +313,14 @@ Full-width tabs can be calculated by the width of the container divided by the n

              Simple example of full-width tabs, each tab being of equal width.

              - +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Caution

              +

              Caution

              Be careful with how the content aligns with the tabs themselves. In this example, the alignment could cause users to misunderstand what the tabs @@ -312,7 +347,10 @@ Tabs may also be placed to the left of their corresponding content in a vertical Vertical tabs will also automatically scroll when the height of their container is too small to display all of the tabs.

              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              If there are more tabs to see beyond the bottom of the container, you will @@ -328,10 +366,13 @@ Vertical tabs will also automatically scroll when the height of their container The tabs have inverse styling available for use on dark backgrounds. Take care with the color you choose for the background to make sure the necessary contrast ratios are upheld for accessibility compliance.

              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT

              Example of tabs on a dark blue background.

              - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/design/tag.mdx b/website/react-magma-docs/src/pages/design/tag.mdx index c8bba97425..4f7f90f019 100644 --- a/website/react-magma-docs/src/pages/design/tag.mdx +++ b/website/react-magma-docs/src/pages/design/tag.mdx @@ -5,7 +5,6 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/design/time-picker.mdx b/website/react-magma-docs/src/pages/design/time-picker.mdx index 9bfb5130a1..5bc3236c3c 100644 --- a/website/react-magma-docs/src/pages/design/time-picker.mdx +++ b/website/react-magma-docs/src/pages/design/time-picker.mdx @@ -4,22 +4,20 @@ title: Time Picker order: 1 --- -import { LeadParagraph } from '../../components/LeadParagraph'; -import { Link } from 'gatsby'; - - - Capture time from the user - +Capture time from the user ## Usage The Time input gives the user the ability to input a time in a format the developer can control.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              @@ -28,8 +26,11 @@ The Time input gives the user the ability to input a time in a format the develo You can tab into the Time input to individually manipulate the hours, minutes, and AM/PM indicator. Use the up and down arrows to change their values.
              -
              - GATSBY_EMPTY_ALT +
              + GATSBY_EMPTY_ALT
              diff --git a/website/react-magma-docs/src/pages/design/toast.mdx b/website/react-magma-docs/src/pages/design/toast.mdx index 9aa96955e4..66ecc4f26a 100644 --- a/website/react-magma-docs/src/pages/design/toast.mdx +++ b/website/react-magma-docs/src/pages/design/toast.mdx @@ -4,9 +4,7 @@ title: Toast order: 1 --- -import { Link } from 'gatsby'; import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; @@ -20,7 +18,10 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Toasts are the least intrusive of the three types of alerts and are used primarily for communicating non-critical information to the user. Toasts appear in the lower-left corner of the viewport.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              --- @@ -46,9 +47,12 @@ The basic anatomy of the alert is the same across all three types (banner, inlin If multiple toasts are triggered, they will automatically stack vertically. When at all possible, try to group batch-like actions into a single toast instead of triggering multiple alerts.
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Do not trigger multiple toasts when a single action processes multiple identical results @@ -56,9 +60,12 @@ If multiple toasts are triggered, they will automatically stack vertically. When

              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Combine the results from a single action into a single toast alert.

              @@ -71,16 +78,16 @@ Because toasts are intended to be the least disruptive type of alert, you can ge Avoid displaying errors or warnings with toasts, but if you have to, then these should not auto-dismiss. Errors and warnings are generally considered critical, and you don't want the user to miss the notification. The user has to manually dismiss these messages when they are ready, or when the issue is resolved. -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Toasts displaying error messages or warnings should only be manually dismissible. @@ -88,14 +95,14 @@ Avoid displaying errors or warnings with toasts, but if you have to, then these

              -
              +
              GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Toasts displaying general information or success messages may be set to auto-dismiss. @@ -125,7 +132,10 @@ Take the following guidelines into consideration when crafting your message: When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert. The toast will also automatically stretch to 100% of the viewport width with spacing around it.

              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              --- diff --git a/website/react-magma-docs/src/pages/design/toggle.mdx b/website/react-magma-docs/src/pages/design/toggle.mdx index 622adfd406..d190e2c027 100644 --- a/website/react-magma-docs/src/pages/design/toggle.mdx +++ b/website/react-magma-docs/src/pages/design/toggle.mdx @@ -5,18 +5,19 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; -Toggle switches toggle the state of a single setting on or off. + + Toggle switches toggle the state of a single setting on or off. + ## Usage Toggle switches are a great way to adjust settings when you are simply turning something on and off. The option that the switch controls, as well as the state it is in, should be made clear from the corresponding inline label.
              -
              +
              GATSBY_EMPTY_ALT -
              +
              GATSBY_EMPTY_ALT @@ -19,22 +17,28 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Tooltips are necessary for interactive elements whose function may not be clearly spelled out within the element itself. This is especially valuable for elements that are represented only by an image or icon. Tooltips should always be paired closely with the element with which they are associated. The message within the tooltip should always be kept as short and clear as possible. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              +

              Correct

              Use tooltips for interactive imagery like icon buttons.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              +

              Incorrect

              Don’t use tooltips to restate visible UI text.

              diff --git a/website/react-magma-docs/src/pages/design/tree-view.mdx b/website/react-magma-docs/src/pages/design/tree-view.mdx index e87d286d67..ca3a5b8b5a 100644 --- a/website/react-magma-docs/src/pages/design/tree-view.mdx +++ b/website/react-magma-docs/src/pages/design/tree-view.mdx @@ -5,12 +5,12 @@ order: 1 --- import './design-guidelines-styles.css'; -import { LeadParagraph } from '../../components/LeadParagraph'; - TreeView provides a hierarchical list of items that can be collapsed or expanded to hide or reveal their contents. + TreeView provides a hierarchical list of items that can be collapsed or + expanded to hide or reveal their contents. ## Usage @@ -18,14 +18,14 @@ import { LeadParagraph } from '../../components/LeadParagraph'; A tree view comprises nested heading levels, establishing a content hierarchy for users and aiding in the navigation of extensive amounts of information. The tree view component includes branch nodes that can be expanded or collapsed, unveiling or concealing child nodes. Additionally, the tree may feature leaf nodes, which can emerge at any level of the hierarchy and do not possess child nodes.
              -
              +
              GATSBY_EMPTY_ALT
              ### When to use -- Commonly utilized for exploring file system configurations consisting of folders and documents. +- Commonly utilized for exploring file system configurations consisting of folders and documents. - To organize large amounts of information that can nest within multiple levels. ### When not to use @@ -38,26 +38,23 @@ When dealing with a single level of nested information, consider utilizing an al ### Anatomy -
              - -
              +
              -
              -
              -
              +
              +
              +
              GATSBY_EMPTY_ALT
              -
              -
              +
              -1. **Branch node:** A node that has one or more child nodes. Can be expanded or collapsed to reveal or hide child nodes. -1. **Leaf node:** A node that has no child nodes and can appear at any level of the tree view hierarchy. A leaf node may be referred to as a child node when it is nested underneath a branch node. -1. **Arrow icon:** An icon to expand or collapse a branch node. -1. **Checkbox (multi-select only):** A checkbox to select multiple nodes. +1. **Branch node:** A node that has one or more child nodes. Can be expanded or collapsed to reveal or hide child nodes. +1. **Leaf node:** A node that has no child nodes and can appear at any level of the tree view hierarchy. A leaf node may be referred to as a child node when it is nested underneath a branch node. +1. **Arrow icon:** An icon to expand or collapse a branch node. +1. **Checkbox (multi-select only):** A checkbox to select multiple nodes. 1. **Node icon (optional):** An icon to visually represent and support a node label, they can assist the user to scan different content types quickly. ### Alignment @@ -66,15 +63,17 @@ When dealing with a single level of nested information, consider utilizing an al Nodes stack directly on top of each other with 0px space between them. Having nodes flush with each other ensures consistent spacing and alignment between each node in the tree view. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -82,16 +81,22 @@ Nodes stack directly on top of each other with 0px space between them. Having no Nested nodes in a tree view rely on organized and consistent alignment to group nodes together. When a level within the hierarchy contains both branches and leaves, the spacing is adjusted to make sure the text labels at the same level are always aligned. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              @@ -113,27 +118,29 @@ If the text label is longer than the space allows, the text will wrap to 2 or mo Icons can be a helpful way of scanning a list for various item types. Icons should be clear and not require a high level of interpretation to understand. To maintain proper alignment, icons should be used at all levels of a hierarchy or not at all. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Correct

              -

              - Do consistently use icons for each node in a tree view. -

              +

              Correct

              +

              Do consistently use icons for each node in a tree view.

              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -

              Incorrect

              -

              - Do not mix text-only and icon nodes in a tree view. -

              +

              Incorrect

              +

              Do not mix text-only and icon nodes in a tree view.

              @@ -148,16 +155,22 @@ Icons can be a helpful way of scanning a list for various item types. Icons shou Branch nodes and leaf nodes exhibit identical styles across various states. The sole disparity in their structure lies in the presence of an arrow, which signifies the expansion or collapse of branch nodes. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              @@ -173,32 +186,36 @@ Upon receiving focus, a single-select tree sets focus on its initial node. To expand or collapse a branch node the user can click anywhere within the arrow icon bounding box. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              #### Selecting -- To select a branch node the user can click anywhere on the node excluding the arrow icon bounding box. +- To select a branch node the user can click anywhere on the node excluding the arrow icon bounding box. - To select a leaf node the user can click anywhere on the node container. -
              -
              -
              +
              +
              +
              - GATSBY_EMPTY_ALT + GATSBY_EMPTY_ALT
              -
              -
              +
              @@ -206,9 +223,9 @@ To expand or collapse a branch node the user can click anywhere within the arrow - **Up and down arrows:** Moves focus between visible nodes in the tree. - **Right and left arrows:** Opens and closes branch nodes. -- **Space:** Toggles the selection state of the focused node. -- **Enter:** activates a node, i.e., performs its default action. In multi-select, it toggles the selection state of the focused node. In single-select it selects the focused node. -- **Home:** Moves focus to the first node in the tree without opening or closing a node. +- **Space:** Toggles the selection state of the focused node. +- **Enter:** activates a node, i.e., performs its default action. In multi-select, it toggles the selection state of the focused node. In single-select it selects the focused node. +- **Home:** Moves focus to the first node in the tree without opening or closing a node. - **End:** Moves focus to the last node in the tree that is focusable without opening a node. --- @@ -216,7 +233,9 @@ To expand or collapse a branch node the user can click anywhere within the arrow ## Accessibility - Tree (W3C Recommendation) -- Tree view WAI-ARIA practices (W3C) - +- + Tree view WAI-ARIA practices + + (W3C) diff --git a/website/react-magma-docs/src/pages/index.js b/website/react-magma-docs/src/pages/index.js index a39c33a1ea..9c90a7696a 100644 --- a/website/react-magma-docs/src/pages/index.js +++ b/website/react-magma-docs/src/pages/index.js @@ -35,4 +35,4 @@ const IndexPage = () => ( ); -export default IndexPage; \ No newline at end of file +export default IndexPage; diff --git a/website/react-magma-docs/src/pages/patterns-intro/introduction.mdx b/website/react-magma-docs/src/pages/patterns-intro/introduction.mdx index 7da161d1c3..bddc8cfd3c 100644 --- a/website/react-magma-docs/src/pages/patterns-intro/introduction.mdx +++ b/website/react-magma-docs/src/pages/patterns-intro/introduction.mdx @@ -11,4 +11,4 @@ Patterns are opinionated, advanced components composed of React Magma components Each pattern is installed as individual packages, separate from component library, `react-magma-dom`. They also can serve as examples of how to combine React Magma components together in your application. - \ No newline at end of file + diff --git a/website/react-magma-docs/src/pages/patterns/header.mdx b/website/react-magma-docs/src/pages/patterns/header.mdx index 8a9931c094..cfd0755a78 100644 --- a/website/react-magma-docs/src/pages/patterns/header.mdx +++ b/website/react-magma-docs/src/pages/patterns/header.mdx @@ -3,8 +3,6 @@ pageTitle: Header title: Header --- -import { LeadParagraph } from '../../components/LeadParagraph'; - @@ -54,7 +52,7 @@ export function Example() { The `isInverse` prop will render an appbar with a dark background and light text. The components inside the header will inherit the `isInverse` prop unless specified otherwise. -```typescript +```tsx import React from 'react'; import { Header } from '@cengage-patterns/header'; @@ -67,7 +65,7 @@ export function Example() { The `searchProps` prop takes an object of Search Props from the Search component. -```typescript +```tsx import React from 'react'; import { Header } from '@cengage-patterns/header'; @@ -90,7 +88,7 @@ export function Example() { The `callToActionProps` prop takes an object of Hyperlink Props from the Hyperlink component. -```typescript +```tsx import React from 'react'; import { Header } from '@cengage-patterns/header'; @@ -114,7 +112,7 @@ export function Example() { The `children` are displayed at the end of the Header, after the logo, call to action and search. -```typescript +```tsx import React from 'react'; import { Header } from '@cengage-patterns/header'; import { NotificationsIcon, PersonIcon, SettingsIcon } from 'react-magma-icons'; @@ -214,7 +212,7 @@ The useMediaQuery hook can be used The `Header` does not provide a way to display the items that are hidden at smaller screen sizes. It is the responsibility of the consumer to display those items in another way. -```typescript +```tsx import React from 'react'; import { Header } from '@cengage-patterns/header'; import { useMediaQuery, magma } from 'react-magma-dom'; diff --git a/website/react-magma-docs/src/pages/select-migration.mdx b/website/react-magma-docs/src/pages/select-migration.mdx index ffccba5b96..9fedc83e48 100644 --- a/website/react-magma-docs/src/pages/select-migration.mdx +++ b/website/react-magma-docs/src/pages/select-migration.mdx @@ -3,7 +3,6 @@ title: 'Select Migration Guide' --- import { LeadParagraph } from '../components/LeadParagraph'; -import { Link } from 'gatsby'; diff --git a/website/react-magma-docs/tsconfig.json b/website/react-magma-docs/tsconfig.json new file mode 100644 index 0000000000..4d6c96bce2 --- /dev/null +++ b/website/react-magma-docs/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../tsconfig", + "include": [ + "**/*.ts", + "**/*.tsx", + "**/*.js", + "**/*.jsx" + ], + "mdx": { + "checkMdx": true + }, + "compilerOptions": { + "removeComments": false, + "noUnusedParameters": false, + "noImplicitAny": false, + "noImplicitReturns": false, + "noImplicitThis": false, + "strictFunctionTypes": false, + "strictNullChecks": false, + } +}