@codecademy/gamut-patterns 1.0.0-alpha.dd1efc.0 → 1.0.0-alpha.f6cb5a.0

package/package.json

@@ -1,42 +1,48 @@
 {
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bugs": {
-    "url": "https://github.com/Codecademy/client-modules/issues"
+    "url": "https://github.com/Codecademy/gamut/issues"
   },
   "dependencies": {
-    "@codecademy/gamut-styles": "^9.5.3",
-    "@codecademy/gamut-system": "^0.7.0",
+    "@codecademy/gamut-styles": "13.0.0-alpha.f6cb5a.0",
+    "@codecademy/variance": "1.0.0-alpha.f6cb5a.0",
     "classnames": "^2.2.5"
   },
   "description": "Pattern library for Codecademy",
-  "homepage": "https://github.com/Codecademy/client-modules#readme",
+  "homepage": "https://github.com/Codecademy/gamut#readme",
   "name": "@codecademy/gamut-patterns",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "license": "MIT",
   "peerDependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "react": ">=16.8.1",
-    "react-dom": ">=16.8.1"
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "devDependencies": {
+    "@svgr/cli": "5.5.0",
+    "lodash": "^4.17.5",
+    "svgo": "^1.3.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/Codecademy/client-modules.git"
+    "url": "git+ssh://git@github.com/Codecademy/gamut.git"
   },
   "scripts": {
     "verify": "tsc --noEmit",
-    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
-    "build:clean": "rm -rf dist",
+    "format": "svgo -f ./src/svg --pretty --config=.svgo.yml",
+    "build:icons": "rm -rf ./src/patterns && svgr --out-dir ./src/patterns --ext 'tsx' ./src/svg",
     "build:types": "tsc --emitDeclarationOnly",
-    "build": "yarn build:clean && yarn build:compile && yarn build:types",
+    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
+    "build": "yarn build:icons && yarn build:compile && yarn build:types",
     "lernaBuildTask": "yarn build"
   },
   "sideEffects": false,
-  "version": "1.0.0-alpha.dd1efc.0",
-  "gitHead": "a8988f894031fff3c03da827dea096fda87f2643"
+  "version": "1.0.0-alpha.f6cb5a.0",
+  "gitHead": "ff424ba13fc62985621d93a45a2b4296dd2fbe5f"
 }

package/pattern-template.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const { startCase } = require('lodash');
+
+function patternTemplate(api, opts, { jsx }) {
+  const template = api.template.smart({ plugins: ['jsx', 'typescript'] });
+  const { componentName, filePath } = opts.state;
+  const exportName = componentName.replace('Svg', '');
+  const title = startCase(path.basename(filePath, '.svg'));
+
+  return template.ast`
+    import * as React from 'react';
+    import { Svg, PatternProps } from '../props';
+    import { usePatternId } from '../usePatternId';
+
+    export const ${exportName} = React.forwardRef<SVGSVGElement, PatternProps>(({
+      title = "${title}",
+      titleId,
+      ...props
+    },
+      svgRef
+    ) => {
+      const patternId = usePatternId('${exportName}');
+
+      return ${jsx};
+    }) as React.ForwardRefExoticComponent<
+      PatternProps & React.RefAttributes<SVGSVGElement>
+    >;
+  `;
+}
+module.exports = patternTemplate;

package/svgr.config.js

@@ -0,0 +1,29 @@
+const emotionPlugin = require('./emotion-plugin');
+const template = require('./pattern-template');
+const indexTemplate = require('./index-template');
+
+module.exports = {
+  dimensions: false,
+  titleProp: true,
+  ref: true,
+  svgProps: {
+    fill: 'currentColor',
+    role: 'img',
+    'aria-hidden': 'true',
+  },
+  prettierConfig: {
+    parser: 'typescript',
+  },
+  replaceAttrValues: {
+    '#000': 'currentColor',
+    '#111': 'currentColor',
+    '#444': 'currentColor',
+  },
+  jsx: {
+    babelConfig: {
+      plugins: [emotionPlugin],
+    },
+  },
+  indexTemplate,
+  template,
+};

package/tsconfig.json

@@ -1,6 +1,11 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"],
+  "include": [
+    "../../typings/*.d.ts",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "../gamut-styles/dist/typings/theme.d.ts"
+  ],
   "compilerOptions": {
     "outDir": "./dist"
   }

package/dist/patterns/checker/CheckerDense.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PatternProps } from '../../types';
-export declare const CheckerDense: React.FC<PatternProps>;

package/dist/patterns/checker/CheckerDense.js

@@ -1,47 +0,0 @@
-import _styled from "@emotion/styled/base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import { styledConfig, system } from '@codecademy/gamut-styles';
-import { variance } from '@codecademy/variance';
-import React from 'react';
-var logoStyles = variance.compose(system.layout, system.positioning, system.space);
-
-var Svg = /*#__PURE__*/_styled('svg', _extends({}, {
-  target: "e2exq970",
-  label: "Svg"
-}, styledConfig))(logoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYXR0ZXJucy9jaGVja2VyL0NoZWNrZXJEZW5zZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYVkiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhdHRlcm5zL2NoZWNrZXIvQ2hlY2tlckRlbnNlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZENvbmZpZywgc3lzdGVtIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IHZhcmlhbmNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgUGF0dGVyblByb3BzIH0gZnJvbSAnLi4vLi4vdHlwZXMnO1xuXG5jb25zdCBsb2dvU3R5bGVzID0gdmFyaWFuY2UuY29tcG9zZShcbiAgc3lzdGVtLmxheW91dCxcbiAgc3lzdGVtLnBvc2l0aW9uaW5nLFxuICBzeXN0ZW0uc3BhY2Vcbik7XG5cbmNvbnN0IFN2ZyA9IHN0eWxlZCgnc3ZnJywgc3R5bGVkQ29uZmlnKTxQYXR0ZXJuUHJvcHM+KGxvZ29TdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQ2hlY2tlckRlbnNlOiBSZWFjdC5GQzxQYXR0ZXJuUHJvcHM+ID0gKHsgLi4ucHJvcHMgfSkgPT4gKFxuICA8U3ZnIHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjEwMCVcIiB7Li4ucHJvcHN9IGFyaWEtaGlkZGVuPlxuICAgIDxwYXR0ZXJuXG4gICAgICBpZD1cImNoZWNrZXJEZW5zZVwiXG4gICAgICB4PVwiMFwiXG4gICAgICB5PVwiMFwiXG4gICAgICB3aWR0aD1cIjRcIlxuICAgICAgaGVpZ2h0PVwiNFwiXG4gICAgICBwYXR0ZXJuVW5pdHM9XCJ1c2VyU3BhY2VPblVzZVwiXG4gICAgPlxuICAgICAgPHJlY3Qgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjJcIiB5PVwiMlwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICA8L3BhdHRlcm4+XG4gICAgPHJlY3QgeD1cIjBcIiB5PVwiMFwiIHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjEwMCVcIiBmaWxsPVwidXJsKCNjaGVja2VyRGVuc2UpXCIgLz5cbiAgPC9Tdmc+XG4pO1xuIl19 */");
-
-export var CheckerDense = function CheckerDense(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Svg, _extends({
-    width: "100%",
-    height: "100%"
-  }, props, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("pattern", {
-    id: "checkerDense",
-    x: "0",
-    y: "0",
-    width: "4",
-    height: "4",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "100%",
-    height: "100%",
-    fill: "url(#checkerDense)"
-  }));
-};

package/dist/patterns/checker/CheckerLoose.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PatternProps } from '../../types';
-export declare const CheckerLoose: React.FC<PatternProps>;

package/dist/patterns/checker/CheckerLoose.js

@@ -1,47 +0,0 @@
-import _styled from "@emotion/styled/base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import { styledConfig, system } from '@codecademy/gamut-styles';
-import { variance } from '@codecademy/variance';
-import React from 'react';
-var logoStyles = variance.compose(system.layout, system.positioning, system.space);
-
-var Svg = /*#__PURE__*/_styled('svg', _extends({}, {
-  target: "eelxufy0",
-  label: "Svg"
-}, styledConfig))(logoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYXR0ZXJucy9jaGVja2VyL0NoZWNrZXJMb29zZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYVkiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhdHRlcm5zL2NoZWNrZXIvQ2hlY2tlckxvb3NlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZENvbmZpZywgc3lzdGVtIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IHZhcmlhbmNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgUGF0dGVyblByb3BzIH0gZnJvbSAnLi4vLi4vdHlwZXMnO1xuXG5jb25zdCBsb2dvU3R5bGVzID0gdmFyaWFuY2UuY29tcG9zZShcbiAgc3lzdGVtLmxheW91dCxcbiAgc3lzdGVtLnBvc2l0aW9uaW5nLFxuICBzeXN0ZW0uc3BhY2Vcbik7XG5cbmNvbnN0IFN2ZyA9IHN0eWxlZCgnc3ZnJywgc3R5bGVkQ29uZmlnKTxQYXR0ZXJuUHJvcHM+KGxvZ29TdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQ2hlY2tlckxvb3NlOiBSZWFjdC5GQzxQYXR0ZXJuUHJvcHM+ID0gKHsgLi4ucHJvcHMgfSkgPT4gKFxuICA8U3ZnIHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjEwMCVcIiB7Li4ucHJvcHN9IGFyaWEtaGlkZGVuPlxuICAgIDxwYXR0ZXJuXG4gICAgICBpZD1cImNoZWNrZXJMb29zZVwiXG4gICAgICB4PVwiMFwiXG4gICAgICB5PVwiMFwiXG4gICAgICB3aWR0aD1cIjE2XCJcbiAgICAgIGhlaWdodD1cIjE2XCJcbiAgICAgIHBhdHRlcm5Vbml0cz1cInVzZXJTcGFjZU9uVXNlXCJcbiAgICA+XG4gICAgICA8cmVjdCB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiOFwiIHk9XCI4XCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgIDwvcGF0dGVybj5cbiAgICA8cmVjdCB4PVwiMFwiIHk9XCIwXCIgd2lkdGg9XCIxMDAlXCIgaGVpZ2h0PVwiMTAwJVwiIGZpbGw9XCJ1cmwoI2NoZWNrZXJMb29zZSlcIiAvPlxuICA8L1N2Zz5cbik7XG4iXX0= */");
-
-export var CheckerLoose = function CheckerLoose(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Svg, _extends({
-    width: "100%",
-    height: "100%"
-  }, props, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("pattern", {
-    id: "checkerLoose",
-    x: "0",
-    y: "0",
-    width: "16",
-    height: "16",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "8",
-    y: "8",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "100%",
-    height: "100%",
-    fill: "url(#checkerLoose)"
-  }));
-};

package/dist/patterns/checker/CheckerRegular.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PatternProps } from '../../types';
-export declare const CheckerRegular: React.FC<PatternProps>;

package/dist/patterns/checker/CheckerRegular.js

@@ -1,47 +0,0 @@
-import _styled from "@emotion/styled/base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import { styledConfig, system } from '@codecademy/gamut-styles';
-import { variance } from '@codecademy/variance';
-import React from 'react';
-var logoStyles = variance.compose(system.layout, system.positioning, system.space);
-
-var Svg = /*#__PURE__*/_styled('svg', _extends({}, {
-  target: "ew9tag60",
-  label: "Svg"
-}, styledConfig))(logoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYXR0ZXJucy9jaGVja2VyL0NoZWNrZXJSZWd1bGFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhWSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGF0dGVybnMvY2hlY2tlci9DaGVja2VyUmVndWxhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWRDb25maWcsIHN5c3RlbSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyB2YXJpYW5jZSB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFBhdHRlcm5Qcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgbG9nb1N0eWxlcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5wb3NpdGlvbmluZyxcbiAgc3lzdGVtLnNwYWNlXG4pO1xuXG5jb25zdCBTdmcgPSBzdHlsZWQoJ3N2ZycsIHN0eWxlZENvbmZpZyk8UGF0dGVyblByb3BzPihsb2dvU3R5bGVzKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrZXJSZWd1bGFyOiBSZWFjdC5GQzxQYXR0ZXJuUHJvcHM+ID0gKHsgLi4ucHJvcHMgfSkgPT4gKFxuICA8U3ZnIHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjEwMCVcIiB7Li4ucHJvcHN9IGFyaWEtaGlkZGVuPlxuICAgIDxwYXR0ZXJuXG4gICAgICBpZD1cImNoZWNrZXJSZWd1bGFyXCJcbiAgICAgIHg9XCIwXCJcbiAgICAgIHk9XCIwXCJcbiAgICAgIHdpZHRoPVwiOFwiXG4gICAgICBoZWlnaHQ9XCI4XCJcbiAgICAgIHBhdHRlcm5Vbml0cz1cInVzZXJTcGFjZU9uVXNlXCJcbiAgICA+XG4gICAgICA8cmVjdCB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiNFwiIHk9XCI0XCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgIDwvcGF0dGVybj5cbiAgICA8cmVjdCB4PVwiMFwiIHk9XCIwXCIgd2lkdGg9XCIxMDAlXCIgaGVpZ2h0PVwiMTAwJVwiIGZpbGw9XCJ1cmwoI2NoZWNrZXJSZWd1bGFyKVwiIC8+XG4gIDwvU3ZnPlxuKTtcbiJdfQ== */");
-
-export var CheckerRegular = function CheckerRegular(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Svg, _extends({
-    width: "100%",
-    height: "100%"
-  }, props, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("pattern", {
-    id: "checkerRegular",
-    x: "0",
-    y: "0",
-    width: "8",
-    height: "8",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "4",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "100%",
-    height: "100%",
-    fill: "url(#checkerRegular)"
-  }));
-};

package/dist/patterns/checker/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CheckerDense';
-export * from './CheckerLoose';
-export * from './CheckerRegular';

package/dist/patterns/checker/index.js

@@ -1,3 +0,0 @@
-export * from './CheckerDense';
-export * from './CheckerLoose';
-export * from './CheckerRegular';

package/dist/patterns/diagonalA/DiagonalADense.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PatternProps } from '../../types';
-export declare const DiagonalADense: React.FC<PatternProps>;

package/dist/patterns/diagonalA/DiagonalADense.js

@@ -1,81 +0,0 @@
-import _styled from "@emotion/styled/base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import { styledConfig, system } from '@codecademy/gamut-styles';
-import { variance } from '@codecademy/variance';
-import React from 'react';
-var logoStyles = variance.compose(system.layout, system.positioning, system.space);
-
-var Svg = /*#__PURE__*/_styled('svg', _extends({}, {
-  target: "e1iycset0",
-  label: "Svg"
-}, styledConfig))(logoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYXR0ZXJucy9kaWFnb25hbEEvRGlhZ29uYWxBRGVuc2UudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFZIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYXR0ZXJucy9kaWFnb25hbEEvRGlhZ29uYWxBRGVuc2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkQ29uZmlnLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBQYXR0ZXJuUHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbmNvbnN0IGxvZ29TdHlsZXMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0ubGF5b3V0LFxuICBzeXN0ZW0ucG9zaXRpb25pbmcsXG4gIHN5c3RlbS5zcGFjZVxuKTtcblxuY29uc3QgU3ZnID0gc3R5bGVkKCdzdmcnLCBzdHlsZWRDb25maWcpPFBhdHRlcm5Qcm9wcz4obG9nb1N0eWxlcyk7XG5cbmV4cG9ydCBjb25zdCBEaWFnb25hbEFEZW5zZTogUmVhY3QuRkM8UGF0dGVyblByb3BzPiA9ICh7IC4uLnByb3BzIH0pID0+IChcbiAgPFN2ZyB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIxMDAlXCIgey4uLnByb3BzfSBhcmlhLWhpZGRlbj5cbiAgICA8cGF0dGVyblxuICAgICAgaWQ9XCJkaWFnb25hbEFEZW5zZVwiXG4gICAgICB4PVwiMFwiXG4gICAgICB5PVwiMFwiXG4gICAgICB3aWR0aD1cIjRcIlxuICAgICAgaGVpZ2h0PVwiNFwiXG4gICAgICBwYXR0ZXJuVW5pdHM9XCJ1c2VyU3BhY2VPblVzZVwiXG4gICAgPlxuICAgICAgPHJlY3Qgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjJcIiB5PVwiMlwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxXCIgeT1cIjJcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMVwiIHk9XCIzXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeT1cIjNcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiM1wiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIzXCIgeT1cIjFcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMlwiIHk9XCIxXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgIDwvcGF0dGVybj5cbiAgICA8cmVjdCB4PVwiMFwiIHk9XCIwXCIgd2lkdGg9XCIxMDAlXCIgaGVpZ2h0PVwiMTAwJVwiIGZpbGw9XCJ1cmwoI2RpYWdvbmFsQURlbnNlKVwiIC8+XG4gIDwvU3ZnPlxuKTtcbiJdfQ== */");
-
-export var DiagonalADense = function DiagonalADense(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Svg, _extends({
-    width: "100%",
-    height: "100%"
-  }, props, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("pattern", {
-    id: "diagonalADense",
-    x: "0",
-    y: "0",
-    width: "4",
-    height: "4",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "1",
-    y: "2",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "1",
-    y: "3",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    y: "3",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "3",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "3",
-    y: "1",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "1",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "100%",
-    height: "100%",
-    fill: "url(#diagonalADense)"
-  }));
-};

package/dist/patterns/diagonalA/DiagonalALoose.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PatternProps } from '../../types';
-export declare const DiagonalALoose: React.FC<PatternProps>;

package/dist/patterns/diagonalA/DiagonalALoose.js

@@ -1,225 +0,0 @@
-import _styled from "@emotion/styled/base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import { styledConfig, system } from '@codecademy/gamut-styles';
-import { variance } from '@codecademy/variance';
-import React from 'react';
-var logoStyles = variance.compose(system.layout, system.positioning, system.space);
-
-var Svg = /*#__PURE__*/_styled('svg', _extends({}, {
-  target: "e1ujzhz10",
-  label: "Svg"
-}, styledConfig))(logoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYXR0ZXJucy9kaWFnb25hbEEvRGlhZ29uYWxBTG9vc2UudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFZIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYXR0ZXJucy9kaWFnb25hbEEvRGlhZ29uYWxBTG9vc2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkQ29uZmlnLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBQYXR0ZXJuUHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbmNvbnN0IGxvZ29TdHlsZXMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0ubGF5b3V0LFxuICBzeXN0ZW0ucG9zaXRpb25pbmcsXG4gIHN5c3RlbS5zcGFjZVxuKTtcblxuY29uc3QgU3ZnID0gc3R5bGVkKCdzdmcnLCBzdHlsZWRDb25maWcpPFBhdHRlcm5Qcm9wcz4obG9nb1N0eWxlcyk7XG5cbmV4cG9ydCBjb25zdCBEaWFnb25hbEFMb29zZTogUmVhY3QuRkM8UGF0dGVyblByb3BzPiA9ICh7IC4uLnByb3BzIH0pID0+IChcbiAgPFN2ZyB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIxMDAlXCIgey4uLnByb3BzfSBhcmlhLWhpZGRlbj5cbiAgICA8cGF0dGVyblxuICAgICAgaWQ9XCJkaWFnb25hbEFMb29zZVwiXG4gICAgICB4PVwiMFwiXG4gICAgICB5PVwiMFwiXG4gICAgICB3aWR0aD1cIjE2XCJcbiAgICAgIGhlaWdodD1cIjE2XCJcbiAgICAgIHBhdHRlcm5Vbml0cz1cInVzZXJTcGFjZU9uVXNlXCJcbiAgICA+XG4gICAgICA8cmVjdCB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMTRcIiB5PVwiMlwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxM1wiIHk9XCIyXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjEzXCIgeT1cIjNcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMTJcIiB5PVwiM1wiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxNVwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxNVwiIHk9XCIxXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjE0XCIgeT1cIjFcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMTFcIiB5PVwiNVwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxMFwiIHk9XCI1XCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjEwXCIgeT1cIjZcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiOVwiIHk9XCI2XCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjhcIiB5PVwiN1wiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCI5XCIgeT1cIjdcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMTJcIiB5PVwiNFwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxMVwiIHk9XCI0XCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjdcIiB5PVwiOVwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCI2XCIgeT1cIjlcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiNlwiIHk9XCIxMFwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCI1XCIgeT1cIjEwXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjhcIiB5PVwiOFwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCI3XCIgeT1cIjhcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiNFwiIHk9XCIxMlwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIzXCIgeT1cIjEyXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjNcIiB5PVwiMTNcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMlwiIHk9XCIxM1wiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCIxXCIgeT1cIjE0XCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjJcIiB5PVwiMTRcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB5PVwiMTVcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8cmVjdCB4PVwiMVwiIHk9XCIxNVwiIHdpZHRoPVwiMVwiIGhlaWdodD1cIjFcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDxyZWN0IHg9XCI1XCIgeT1cIjExXCIgd2lkdGg9XCIxXCIgaGVpZ2h0PVwiMVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgPHJlY3QgeD1cIjRcIiB5PVwiMTFcIiB3aWR0aD1cIjFcIiBoZWlnaHQ9XCIxXCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgPC9wYXR0ZXJuPlxuICAgIDxyZWN0IHg9XCIwXCIgeT1cIjBcIiB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIxMDAlXCIgZmlsbD1cInVybCgjZGlhZ29uYWxBTG9vc2UpXCIgLz5cbiAgPC9Tdmc+XG4pO1xuIl19 */");
-
-export var DiagonalALoose = function DiagonalALoose(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Svg, _extends({
-    width: "100%",
-    height: "100%"
-  }, props, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("pattern", {
-    id: "diagonalALoose",
-    x: "0",
-    y: "0",
-    width: "16",
-    height: "16",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "14",
-    y: "2",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "13",
-    y: "2",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "13",
-    y: "3",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "12",
-    y: "3",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "1",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "14",
-    y: "1",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "11",
-    y: "5",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "10",
-    y: "5",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "10",
-    y: "6",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "9",
-    y: "6",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "8",
-    y: "7",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "9",
-    y: "7",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "12",
-    y: "4",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "11",
-    y: "4",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "7",
-    y: "9",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "6",
-    y: "9",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "6",
-    y: "10",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "5",
-    y: "10",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "8",
-    y: "8",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "7",
-    y: "8",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "12",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "3",
-    y: "12",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "3",
-    y: "13",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "13",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "1",
-    y: "14",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "14",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    y: "15",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "1",
-    y: "15",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "5",
-    y: "11",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "11",
-    width: "1",
-    height: "1",
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "100%",
-    height: "100%",
-    fill: "url(#diagonalALoose)"
-  }));
-};

package/dist/patterns/diagonalA/DiagonalARegular.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { PatternProps } from '../../types';
-export declare const DiagonalARegular: React.FC<PatternProps>;