resolved conflicts.

.eslintrc.json

@@ -0,0 +1,52 @@
+{
+	"env": {
+		"browser": true,
+		"es6": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:react-hooks/recommended",
+		"plugin:jsx-a11y/recommended",
+		"plugin:prettier/recommended",
+		"prettier/react"
+	],
+	"parserOptions": {
+		"ecmaFeatures": {
+			"jsx": true
+		},
+		"ecmaVersion": 2018,
+		"sourceType": "module"
+	},
+	"parser": "@babel/eslint-parser",
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"plugins": ["react", "prettier"],
+	"rules": {
+		"react/prop-types": [
+			2,
+			{
+				"skipUndeclared": true
+			}
+		],
+		"prettier/prettier": [
+			"error",
+			{
+				"printWidth": 100,
+				"tabWidth": 2,
+				"useTabs": true,
+				"singleQuote": true,
+				"trailingComma": "es5",
+				"endOfLine": "lf"
+			}
+		],
+		"react/jsx-uses-react": "error"
+	},
+	"globals": {
+		"Atomics": "readonly",
+		"SharedArrayBuffer": "readonly"
+	}
+}

.github/workflows/chromatic.yml

@@ -2,10 +2,10 @@ name: "Chromatic"
 on:
   pull_request_target:
     branches:
-      - "master"
+      - release/**
   push:
     branches:
-      - "master"
+      - release/**
 
 jobs:
   test:

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,74 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches:
+      - master
+      - release/**
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches:
+      - master
+      - release/**
+  schedule:
+    - cron: '34 6 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.prettierignore

@@ -0,0 +1,5 @@
+*.yml
+*.yaml
+package.json
+dist/
+node_modules/

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+	"printWidth": 100,
+	"tabWidth": 2,
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"endOfLine": "lf"
+}

.storybook/body-class.js

@@ -1,2 +1,2 @@
 var body = document.body;
-body.classList.add( 'sui-2-12-3' );
+body.classList.add( 'sui-2-12-8' );

.storybook/main.js

@@ -8,8 +8,7 @@ module.exports = {
 		"@storybook/addon-links",
 		"@storybook/addon-actions",
 		"@storybook/addon-essentials",
-		"@storybook/addon-a11y",
-		"@storybook/addon-notes/register-panel"
+		"@storybook/addon-a11y"
 	],
 	webpackFinal: async ( config ) => {
 		// Change the order of resolution of main fields.

.storybook/preview.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { addParameters } from '@storybook/react';
 import '@wpmudev/shared-ui/dist/css/shared-ui.min.css'; // Get latest SUI styles.
 import "./body-class";
 
+// List custom viewports.
 const customViewports = {
 	xl: {
 		name: 'Desktop',
@@ -45,6 +47,7 @@ const customViewports = {
 	},
 };
 
+// Edit parameters.
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   backgrounds: {
@@ -56,12 +59,22 @@ export const parameters = {
   viewport: {
 	  viewports: customViewports
   },
+  viewMode: 'canvas'
 }
 
+// Edit "preview" markup.
+const Wrapper = ({ children }) => {
+	return (
+		<div className="sui-wrap">
+			{ children }
+		</div>
+	);
+};
+
 export const decorators = [
 	( Story ) => (
-		<div className="sui-wrap">
+		<Wrapper>
 			<Story />
-		</div>
+		</Wrapper>
 	),
-]
+];