@codecademy/gamut-patterns 1.0.0-alpha.c3e36a.0 → 1.0.0-alpha.d04966.0

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

@@ -1,282 +1 @@
-import { StyleProps } from '@codecademy/variance';
-import { SVGProps } from 'react';
-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 display: {
-        readonly property: "display";
-    };
-    readonly overflow: {
-        readonly property: "overflow";
-    };
-    readonly overflowX: {
-        readonly property: "overflowX";
-    };
-    readonly overflowY: {
-        readonly property: "overflowY";
-    };
-    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";
-    };
-    readonly justifySelf: {
-        readonly property: "justifySelf";
-    };
-    readonly alignSelf: {
-        readonly property: "alignSelf";
-    };
-    readonly gridArea: {
-        readonly property: "gridArea";
-    };
-}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
-    readonly position: {
-        readonly property: "position";
-    };
-    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 PatternProps = SVGProps<SVGSVGElement> & StyleProps<typeof patternStyles>;
-export declare const PatternSvg: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & SVGProps<SVGSVGElement> & {
-    display?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "display";
-    }>;
-    overflow?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflow";
-    }>;
-    overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflowX";
-    }>;
-    overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflowY";
-    }>;
-    width?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "width";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "minWidth";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "maxWidth";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    height?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "height";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "minHeight";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "maxHeight";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "verticalAlign";
-    }>;
-    justifySelf?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "justifySelf";
-    }>;
-    alignSelf?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "alignSelf";
-    }>;
-    gridArea?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "gridArea";
-    }>;
-    position?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "position";
-    }>;
-    top?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "top";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    right?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "right";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    bottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "bottom";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    left?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "left";
-        readonly transform: (value: string | number) => string | 0;
-    }>;
-    zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "zIndex";
-    }>;
-    opacity?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "opacity";
-    }>;
-    p?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "padding";
-        readonly scale: "spacing";
-    }>;
-    px?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "padding";
-        readonly properties: readonly ["paddingLeft", "paddingRight"];
-        readonly scale: "spacing";
-    }>;
-    py?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "padding";
-        readonly properties: readonly ["paddingTop", "paddingBottom"];
-        readonly scale: "spacing";
-    }>;
-    pt?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "paddingTop";
-        readonly scale: "spacing";
-    }>;
-    pb?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "paddingBottom";
-        readonly scale: "spacing";
-    }>;
-    pr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "paddingRight";
-        readonly scale: "spacing";
-    }>;
-    pl?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "paddingLeft";
-        readonly scale: "spacing";
-    }>;
-    m?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "margin";
-        readonly scale: "spacing";
-    }>;
-    mx?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "margin";
-        readonly properties: readonly ["marginLeft", "marginRight"];
-        readonly scale: "spacing";
-    }>;
-    my?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "margin";
-        readonly properties: readonly ["marginTop", "marginBottom"];
-        readonly scale: "spacing";
-    }>;
-    mt?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginTop";
-        readonly scale: "spacing";
-    }>;
-    mb?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginBottom";
-        readonly scale: "spacing";
-    }>;
-    mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginRight";
-        readonly scale: "spacing";
-    }>;
-    ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "marginLeft";
-        readonly scale: "spacing";
-    }>;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, SVGProps<SVGSVGElement>, {}>;
-export declare type PatternComponent = React.ComponentProps<typeof PatternSvg>;
-export {};
+export type { PatternProps } from './props';

package/dist/types.js

@@ -1,11 +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';
-var patternStyles = variance.compose(system.layout, system.positioning, system.space);
-export var PatternSvg = /*#__PURE__*/_styled('svg', _extends({}, {
-  target: "e1w0gaod0",
-  label: "PatternSvg"
-}, styledConfig))(patternStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy90eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjMEIiLCJmaWxlIjoiLi4vc3JjL3R5cGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkQ29uZmlnLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBTVkdQcm9wcyB9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgcGF0dGVyblN0eWxlcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5wb3NpdGlvbmluZyxcbiAgc3lzdGVtLnNwYWNlXG4pO1xuXG5leHBvcnQgdHlwZSBQYXR0ZXJuUHJvcHMgPSBTVkdQcm9wczxTVkdTVkdFbGVtZW50PiAmXG4gIFN0eWxlUHJvcHM8dHlwZW9mIHBhdHRlcm5TdHlsZXM+O1xuXG5leHBvcnQgY29uc3QgUGF0dGVyblN2ZyA9IHN0eWxlZChcbiAgJ3N2ZycsXG4gIHN0eWxlZENvbmZpZ1xuKTxQYXR0ZXJuUHJvcHM+KHBhdHRlcm5TdHlsZXMpO1xuXG4vLyBUeXBlZm9yd2FyZCB2YWxpZCBTVkcgYXR0cnMuXG5leHBvcnQgdHlwZSBQYXR0ZXJuQ29tcG9uZW50ID0gUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIFBhdHRlcm5Tdmc+O1xuIl19 */"); // Typeforward valid SVG attrs.

package/dist/usePatternId.d.ts

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

package/dist/usePatternId.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+var counter = {};
+export function usePatternId(id) {
+  return useMemo(function () {
+    var key = id.toLowerCase();
+    var idCounter = (counter === null || counter === void 0 ? void 0 : counter[key]) || 0;
+    counter[key] = idCounter;
+    return "".concat(id, "-pattern-").concat(counter[key] += 1);
+  }, [id]);
+}

package/emotion-plugin.js

@@ -0,0 +1,46 @@
+const plugin = (api) => {
+  const vistor = {
+    JSXElement(path) {
+      // We only want to find SVG element
+      if (path.get('openingElement.name').isJSXIdentifier({ name: 'svg' })) {
+        // Update the opening and closing tags to the styled component identifier
+        const emotionTag = api.types.jsxIdentifier('Svg');
+        path.get('openingElement.name').replaceWith(emotionTag);
+        path.get('closingElement.name').replaceWith(emotionTag);
+      }
+    },
+    JSXAttribute(path) {
+      const valuePath = path.get('value');
+      const attrName = path.get('name').toString();
+      if (attrName === 'id' && valuePath.isStringLiteral()) {
+        valuePath.replaceWith(
+          api.types.jsxExpressionContainer(
+            api.template.ast('patternId').expression
+          )
+        );
+      }
+
+      if (
+        attrName === 'fill' &&
+        valuePath.isStringLiteral() &&
+        valuePath.toString().includes('url')
+      ) {
+        valuePath.replaceWith(
+          api.types.jsxExpressionContainer(
+            api.template.ast('`url(#${patternId})`').expression
+          )
+        );
+      }
+    },
+  };
+
+  return {
+    visitor: {
+      Program(path) {
+        path.traverse(vistor);
+      },
+    },
+  };
+};
+
+module.exports = plugin;

package/icon-template.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const { startCase } = require('lodash');
+
+function iconTemplate(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};
+    });
+  `;
+}
+module.exports = iconTemplate;

package/index-template.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+function indexTemplate(files) {
+  const exportEntries = files.map((file) => {
+    const basename = path.basename(file, path.extname(file));
+    return `export * from './${basename}';`;
+  });
+  return exportEntries.join('\n');
+}
+module.exports = indexTemplate;

package/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config.base')('gamut-patterns');