@codecademy/gamut-patterns 1.0.0-alpha.fb02a7.0 → 67.0.0-alpha.387605.0

package/dist/patterns/StripeLoose.js

@@ -0,0 +1,218 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var StripeLoose = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Stripe Loose' : _ref$title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, ["title", "titleId"]);
+  var patternId = usePatternId('StripeLoose');
+  return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
+    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", {
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 6,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 4,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 6,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 9,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 10,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 11,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 9,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 8,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 10,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 11,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 13,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 12,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 14,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 15,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 13,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 12,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 14,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 15,
+        y: 8,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: "url(#".concat(patternId, ")")
+    })]
+  }));
+});

package/dist/patterns/StripeRegular.d.ts

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

package/dist/patterns/StripeRegular.js

@@ -0,0 +1,130 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { Svg } from '../props';
+import { usePatternId } from '../usePatternId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var StripeRegular = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Stripe Regular' : _ref$title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, ["title", "titleId"]);
+  var patternId = usePatternId('StripeRegular');
+  return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
+    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", {
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 6,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 4,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 6,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7,
+        y: 4,
+        width: 1,
+        height: 1,
+        fill: "currentColor"
+      })]
+    }), /*#__PURE__*/_jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: "url(#".concat(patternId, ")")
+    })]
+  }));
+});

package/dist/patterns/index.d.ts

@@ -0,0 +1,28 @@
+export * from './CheckerDense';
+export * from './CheckerLoose';
+export * from './CheckerRegular';
+export * from './DiagonalADense';
+export * from './DiagonalALoose';
+export * from './DiagonalARegular';
+export * from './DiagonalBDense';
+export * from './DiagonalBLoose';
+export * from './DiagonalBRegular';
+export * from './DotDense';
+export * from './DotLoose';
+export * from './DotRegular';
+export * from './ExDense';
+export * from './ExLoose';
+export * from './ExRegular';
+export * from './FlowerDense';
+export * from './FlowerLoose';
+export * from './FlowerRegular';
+export * from './GridDense';
+export * from './GridLoose';
+export * from './GridRegular';
+export * from './Herringbone';
+export * from './RainDense';
+export * from './RainLoose';
+export * from './RainRegular';
+export * from './StripeDense';
+export * from './StripeLoose';
+export * from './StripeRegular';

package/dist/patterns/index.js

@@ -0,0 +1,28 @@
+export * from './CheckerDense';
+export * from './CheckerLoose';
+export * from './CheckerRegular';
+export * from './DiagonalADense';
+export * from './DiagonalALoose';
+export * from './DiagonalARegular';
+export * from './DiagonalBDense';
+export * from './DiagonalBLoose';
+export * from './DiagonalBRegular';
+export * from './DotDense';
+export * from './DotLoose';
+export * from './DotRegular';
+export * from './ExDense';
+export * from './ExLoose';
+export * from './ExRegular';
+export * from './FlowerDense';
+export * from './FlowerLoose';
+export * from './FlowerRegular';
+export * from './GridDense';
+export * from './GridLoose';
+export * from './GridRegular';
+export * from './Herringbone';
+export * from './RainDense';
+export * from './RainLoose';
+export * from './RainRegular';
+export * from './StripeDense';
+export * from './StripeLoose';
+export * from './StripeRegular';

package/dist/props.d.ts

@@ -0,0 +1,193 @@
+/// <reference types="react" />
+import { StyleProps } from '@codecademy/variance';
+declare const patternStyles: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").Compose<[import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+    readonly flexBasis: {
+        readonly property: "flexBasis";
+    };
+    readonly flexShrink: {
+        readonly property: "flexShrink";
+    };
+    readonly flexGrow: {
+        readonly property: "flexGrow";
+    };
+    readonly order: {
+        readonly property: "order";
+    };
+    readonly gridColumn: {
+        readonly property: "gridColumn";
+    };
+    readonly gridRow: {
+        readonly property: "gridRow";
+    };
+    readonly gridColumnStart: {
+        readonly property: "gridColumnStart";
+    };
+    readonly gridRowStart: {
+        readonly property: "gridRowStart";
+    };
+    readonly gridColumnEnd: {
+        readonly property: "gridColumnEnd";
+    };
+    readonly gridRowEnd: {
+        readonly property: "gridRowEnd";
+    };
+    readonly justifySelf: {
+        readonly property: "justifySelf";
+    };
+    readonly alignSelf: {
+        readonly property: "alignSelf";
+    };
+    readonly gridArea: {
+        readonly property: "gridArea";
+    };
+    readonly display: {
+        readonly property: "display";
+    };
+    readonly overflow: {
+        readonly property: "overflow";
+    };
+    readonly overflowX: {
+        readonly property: "overflowX";
+    };
+    readonly overflowY: {
+        readonly property: "overflowY";
+    };
+    readonly dimensions: {
+        readonly property: "width";
+        readonly properties: readonly ["width", "height"];
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly width: {
+        readonly property: "width";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly minWidth: {
+        readonly property: "minWidth";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly maxWidth: {
+        readonly property: "maxWidth";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly height: {
+        readonly property: "height";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly minHeight: {
+        readonly property: "minHeight";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly maxHeight: {
+        readonly property: "maxHeight";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly verticalAlign: {
+        readonly property: "verticalAlign";
+    };
+}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+    readonly position: {
+        readonly property: "position";
+    };
+    readonly inset: {
+        readonly property: "inset";
+        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly top: {
+        readonly property: "top";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly right: {
+        readonly property: "right";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly bottom: {
+        readonly property: "bottom";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly left: {
+        readonly property: "left";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly zIndex: {
+        readonly property: "zIndex";
+    };
+    readonly opacity: {
+        readonly property: "opacity";
+    };
+}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+    readonly p: {
+        readonly property: "padding";
+        readonly scale: "spacing";
+    };
+    readonly px: {
+        readonly property: "padding";
+        readonly properties: readonly ["paddingLeft", "paddingRight"];
+        readonly scale: "spacing";
+    };
+    readonly py: {
+        readonly property: "padding";
+        readonly properties: readonly ["paddingTop", "paddingBottom"];
+        readonly scale: "spacing";
+    };
+    readonly pt: {
+        readonly property: "paddingTop";
+        readonly scale: "spacing";
+    };
+    readonly pb: {
+        readonly property: "paddingBottom";
+        readonly scale: "spacing";
+    };
+    readonly pr: {
+        readonly property: "paddingRight";
+        readonly scale: "spacing";
+    };
+    readonly pl: {
+        readonly property: "paddingLeft";
+        readonly scale: "spacing";
+    };
+    readonly m: {
+        readonly property: "margin";
+        readonly scale: "spacing";
+    };
+    readonly mx: {
+        readonly property: "margin";
+        readonly properties: readonly ["marginLeft", "marginRight"];
+        readonly scale: "spacing";
+    };
+    readonly my: {
+        readonly property: "margin";
+        readonly properties: readonly ["marginTop", "marginBottom"];
+        readonly scale: "spacing";
+    };
+    readonly mt: {
+        readonly property: "marginTop";
+        readonly scale: "spacing";
+    };
+    readonly mb: {
+        readonly property: "marginBottom";
+        readonly scale: "spacing";
+    };
+    readonly mr: {
+        readonly property: "marginRight";
+        readonly scale: "spacing";
+    };
+    readonly ml: {
+        readonly property: "marginLeft";
+        readonly scale: "spacing";
+    };
+}>>]>>;
+export declare type PatternStyleProps = StyleProps<typeof patternStyles>;
+export interface PatternProps extends Omit<React.SVGProps<SVGSVGElement>, keyof PatternStyleProps>, PatternStyleProps {
+    /**
+     * A suffix added to the end of the unique generated ID for the icon. This is useful if you have multiple of the same icon on the page and need to pass accessibility guidelines.
+     */
+    titleId?: string;
+    title?: string;
+    ref?: React.Ref<SVGSVGElement>;
+}
+export declare const Svg: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & PatternProps, Pick<import("react").SVGProps<SVGSVGElement>, "string" | "scale" | "filter" | "fill" | "values" | "spacing" | "clipPath" | "cursor" | "direction" | "fontSizeAdjust" | "fontStretch" | "fontVariant" | "imageRendering" | "paintOrder" | "pointerEvents" | "rotate" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "mask" | "offset" | "min" | "max" | "end" | "clip" | "className" | "id" | "lang" | "media" | "method" | "name" | "style" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "path" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "shapeRendering" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">, {}>;
+export {};

package/dist/props.js

@@ -0,0 +1,9 @@
+import { styledOptions, system } from '@codecademy/gamut-styles';
+import { variance } from '@codecademy/variance';
+import styled from '@emotion/styled';
+var patternStyles = variance.compose(system.layout, system.positioning, system.space);
+export var Svg = styled('svg', styledOptions())(patternStyles);
+Svg.defaultProps = {
+  width: '100%',
+  height: '100%'
+};

package/dist/svg/CheckerDense.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="checkerDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect 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(#checkerDense)" />
+</svg>

package/dist/svg/CheckerLoose.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="checkerLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect 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(#checkerLoose)" />
+</svg>