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

package/dist/patterns/DiagonalBLoose.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DiagonalBLoose = /*#__PURE__*/React.forwardRef(({
+  title = 'Diagonal B Loose',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('DiagonalBLoose');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 16,
+      height: 16,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        y: 15,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 14,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2,
+        y: 13,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        y: 12,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 4,
+        y: 11,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5,
+        y: 10,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 6,
+        y: 9,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 8,
+        y: 7,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 9,
+        y: 6,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 10,
+        y: 5,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 11,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 12,
+        y: 3,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 13,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 14,
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 15,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/DiagonalBRegular.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const DiagonalBRegular: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/DiagonalBRegular.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DiagonalBRegular = /*#__PURE__*/React.forwardRef(({
+  title = 'Diagonal B Regular',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('DiagonalBRegular');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 8,
+      height: 8,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        width: 8,
+        height: 8,
+        fill: "transparent"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 7,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 6,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2,
+        y: 5,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 4,
+        y: 3,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 6,
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/DotDense.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const DotDense: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/DotDense.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DotDense = /*#__PURE__*/React.forwardRef(({
+  title = 'Dot Dense',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('DotDense');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsx("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 4,
+      height: 4,
+      patternUnits: "userSpaceOnUse",
+      children: /*#__PURE__*/_jsx("circle", {
+        cx: 0.5,
+        cy: 0.5,
+        r: 0.5,
+        fill: "currentColor"
+      })
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/DotLoose.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const DotLoose: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/DotLoose.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DotLoose = /*#__PURE__*/React.forwardRef(({
+  title = 'Dot Loose',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('DotLoose');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 16,
+      height: 16,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 1,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 0.5,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 1,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 0.5,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 0.5,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 0.5,
+        y: 1,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 0.5,
+        y: 0.5,
+        width: 0.5,
+        height: 0.5,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/DotRegular.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const DotRegular: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/DotRegular.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DotRegular = /*#__PURE__*/React.forwardRef(({
+  title = 'Dot Regular',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('DotRegular');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsx("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 8,
+      height: 8,
+      patternUnits: "userSpaceOnUse",
+      children: /*#__PURE__*/_jsx("circle", {
+        cx: 0.5,
+        cy: 0.5,
+        r: 0.5,
+        fill: "currentColor"
+      })
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/ExDense.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const ExDense: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/ExDense.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ExDense = /*#__PURE__*/React.forwardRef(({
+  title = 'Ex Dense',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('ExDense');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 4,
+      height: 4,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/ExLoose.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const ExLoose: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/ExLoose.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ExLoose = /*#__PURE__*/React.forwardRef(({
+  title = 'Ex Loose',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('ExLoose');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 16,
+      height: 16,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 15,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 15,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/ExRegular.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const ExRegular: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/ExRegular.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ExRegular = /*#__PURE__*/React.forwardRef(({
+  title = 'Ex Regular',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('ExRegular');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 8,
+      height: 8,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/FlowerDense.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const FlowerDense: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;

package/dist/patterns/FlowerDense.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FlowerDense = /*#__PURE__*/React.forwardRef(({
+  title = 'Flower Dense',
+  titleId,
+  ...props
+}, svgRef) => {
+  const patternId = usePatternId('FlowerDense');
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "currentColor",
+    role: "img",
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId,
+    ...props,
+    children: [title ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, /*#__PURE__*/_jsxs("pattern", {
+      id: patternId,
+      x: 0,
+      y: 0,
+      width: 4,
+      height: 4,
+      patternUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("rect", {
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        y: 1,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: `url(#${patternId})`
+    })]
+  });
+});

package/dist/patterns/FlowerLoose.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PatternProps } from '../props';
+export declare const FlowerLoose: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<SVGSVGElement>>;