@codecademy/gamut-patterns 1.0.0-alpha.fb02a7.0 → 1.0.1-alpha.817a48.0

package/dist/svg/ExDense.svg

@@ -0,0 +1,17 @@
+<svg>
+  <pattern
+    id="exDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect y="1" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#exDense)" />
+</svg>

package/dist/svg/ExLoose.svg

@@ -0,0 +1,17 @@
+<svg>
+  <pattern
+    id="exLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect y="1" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="15" width="1" height="1" fill="currentColor" />
+    <rect x="15" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#exLoose)" />
+</svg>

package/dist/svg/ExRegular.svg

@@ -0,0 +1,17 @@
+<svg>
+  <pattern
+    id="exRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect y="1" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="7" width="1" height="1" fill="currentColor" />
+    <rect x="7" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#exRegular)" />
+</svg>

package/dist/svg/FlowerDense.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="flowerDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#flowerDense)" />
+</svg>

package/dist/svg/FlowerLoose.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="flowerLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="15" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#flowerLoose)" />
+</svg>

package/dist/svg/FlowerRegular.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="flowerRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="7" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#flowerRegular)" />
+</svg>

package/dist/svg/GridDense.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="gridDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="2" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gridDense)" />
+</svg>

package/dist/svg/GridLoose.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="gridLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect y="8" width="1" height="1" fill="currentColor" />
+    <rect x="8" width="1" height="1" fill="currentColor" />
+    <rect x="8" y="8" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gridLoose)" />
+</svg>

package/dist/svg/GridRegular.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="gridRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect y="4" width="1" height="1" fill="currentColor" />
+    <rect x="4" width="1" height="1" fill="currentColor" />
+    <rect x="4" y="4" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gridRegular)" />
+</svg>

package/dist/svg/Herringbone.svg

@@ -0,0 +1,19 @@
+<svg>
+    <pattern
+      id="herringbone"
+      x="0"
+      y="0"
+      width="4"
+      height="4"
+      patternUnits="userSpaceOnUse"
+    >
+      <rect y="1" width="1" height="1" fill="herringbone" />
+      <rect x="1" y="2" width="1" height="1" fill="herringbone" />
+      <rect x="3" width="1" height="1" fill="herringbone" />
+      <rect x="2" width="1" height="1" fill="herringbone" />
+      <rect x="3" y="1" width="1" height="1" fill="herringbone" />
+      <rect x="3" y="3" width="1" height="1" fill="herringbone" />
+      <rect y="3" width="1" height="1" fill="herringbone" />
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#herringbone)" />
+</svg>

package/dist/svg/RainDense.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="rainDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#rainDense)" />
+</svg>

package/dist/svg/RainLoose.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="rainLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#rainLoose)" />
+</svg>

package/dist/svg/RainRegular.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="rainRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#rainRegular)" />
+</svg>

package/dist/svg/StripeDense.svg

@@ -0,0 +1,20 @@
+<svg>
+  <pattern
+    id="stripeDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeDense)" />
+</svg>

package/dist/svg/StripeLoose.svg

@@ -0,0 +1,44 @@
+<svg>
+  <pattern
+    id="stripeLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="8" width="1" height="1" fill="currentColor" />
+    <rect y="8" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="5" width="1" height="1" fill="currentColor" />
+    <rect x="4" width="1" height="1" fill="currentColor" />
+    <rect x="6" width="1" height="1" fill="currentColor" />
+    <rect x="7" width="1" height="1" fill="currentColor" />
+    <rect x="5" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="4" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="6" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="7" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="9" width="1" height="1" fill="currentColor" />
+    <rect x="8" width="1" height="1" fill="currentColor" />
+    <rect x="10" width="1" height="1" fill="currentColor" />
+    <rect x="11" width="1" height="1" fill="currentColor" />
+    <rect x="9" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="8" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="10" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="11" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="13" width="1" height="1" fill="currentColor" />
+    <rect x="12" width="1" height="1" fill="currentColor" />
+    <rect x="14" width="1" height="1" fill="currentColor" />
+    <rect x="15" width="1" height="1" fill="currentColor" />
+    <rect x="13" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="12" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="14" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="15" y="8" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeLoose)" />
+</svg>

package/dist/svg/StripeRegular.svg

@@ -0,0 +1,28 @@
+<svg>
+    <pattern
+      id="stripeRegular"
+      x="0"
+      y="0"
+      width="8"
+      height="8"
+      patternUnits="userSpaceOnUse"
+    >
+      <rect x="1" width="1" height="1" fill="currentColor" />
+      <rect width="1" height="1" fill="currentColor" />
+      <rect x="2" width="1" height="1" fill="currentColor" />
+      <rect x="3" width="1" height="1" fill="currentColor" />
+      <rect x="1" y="4" width="1" height="1" fill="currentColor" />
+      <rect y="4" width="1" height="1" fill="currentColor" />
+      <rect x="2" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="3" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="5" width="1" height="1" fill="currentColor" />
+      <rect x="4" width="1" height="1" fill="currentColor" />
+      <rect x="6" width="1" height="1" fill="currentColor" />
+      <rect x="7" width="1" height="1" fill="currentColor" />
+      <rect x="5" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="4" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="6" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="7" y="4" width="1" height="1" fill="currentColor" />
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeRegular)" />
+  </svg>

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type { PatternProps } from './props';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/usePatternId.d.ts

@@ -0,0 +1 @@
+export declare function usePatternId(id: string): string;

package/dist/usePatternId.js

@@ -0,0 +1,7 @@
+import { useId, useMemo } from 'react';
+export function usePatternId(id) {
+  const generatedId = useId();
+  return useMemo(() => {
+    return `${id}-pattern-${generatedId}`;
+  }, [id, generatedId]);
+}

package/package.json

@@ -1,52 +1,35 @@
 {
+  "name": "@codecademy/gamut-patterns",
+  "description": "Pattern library for Codecademy",
+  "version": "1.0.1-alpha.817a48.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
-  "bugs": {
-    "url": "https://github.com/Codecademy/client-modules/issues"
-  },
+  "bugs": "https://github.com/Codecademy/gamut/issues",
   "dependencies": {
-    "@codecademy/gamut": "33.0.0-alpha.fb02a7.0",
-    "@codecademy/gamut-styles": "^9.5.3",
-    "@codecademy/gamut-system": "^0.7.0",
+    "@codecademy/gamut-styles": "21.0.1-alpha.817a48.0",
+    "@codecademy/variance": "1.0.1-alpha.817a48.0",
     "classnames": "^2.2.5"
   },
-  "description": "Pattern library for Codecademy",
-  "homepage": "https://github.com/Codecademy/client-modules#readme",
-  "name": "@codecademy/gamut-patterns",
-  "module": "./dist/index.js",
-  "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/Codecademy/gamut#readme",
   "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "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 || ^18.3.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/Codecademy/client-modules.git"
-  },
+  "repository": "Codecademy/gamut.git",
   "scripts": {
-    "verify": "tsc --noEmit",
-    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
-    "build:clean": "rm -rf dist",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build": "yarn build:clean && yarn build:compile && yarn build:types",
-    "lernaBuildTask": "yarn build"
-  },
-  "sideEffects": [
-    "dist/**/[A-Z]**/[A-Z]*.js",
-    "dist/**/[A-Z]**/index.js"
-  ],
-  "version": "1.0.0-alpha.fb02a7.0",
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
+    "build": "nx build @codecademy/gamut-patterns",
+    "format": "svgo -f ./src/svg --pretty --config=.svgo.yml"
   },
-  "files": [
-    "lib"
-  ],
-  "gitHead": "18684215cc68f2fe69f21966cdb8f807378bfbd4"
+  "sideEffects": false,
+  "types": "dist/index.d.ts"
 }

package/CHANGELOG.md

@@ -1,15 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## 1.0.0-alpha.fb02a7.0 (2021-04-27)
-
-
-### ⚠ BREAKING CHANGES
-
-* add new gamut-patterns package
-
-### Features
-
-* add new gamut-patterns package ([0c1c869](https://github.com/Codecademy/client-modules/commit/0c1c869f622bb8f8c4bfba4ac7d01d98736c966f))

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 Ryzac, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.