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

package/dist/props.d.ts

@@ -0,0 +1,302 @@
+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 containerType: {
+        readonly property: "containerType";
+    };
+    readonly display: {
+        readonly property: "display";
+    };
+    readonly overflow: {
+        readonly property: "overflow";
+    };
+    readonly overflowX: {
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly overflowY: {
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly dimensions: {
+        readonly property: "width";
+        readonly properties: {
+            readonly physical: readonly ["width", "height"];
+            readonly logical: readonly ["inlineSize", "blockSize"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly width: {
+        readonly property: {
+            readonly physical: "width";
+            readonly logical: "inlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly minWidth: {
+        readonly property: {
+            readonly physical: "minWidth";
+            readonly logical: "minInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly maxWidth: {
+        readonly property: {
+            readonly physical: "maxWidth";
+            readonly logical: "maxInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly height: {
+        readonly property: {
+            readonly physical: "height";
+            readonly logical: "blockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly minHeight: {
+        readonly property: {
+            readonly physical: "minHeight";
+            readonly logical: "minBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly maxHeight: {
+        readonly property: {
+            readonly physical: "maxHeight";
+            readonly logical: "maxBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly verticalAlign: {
+        readonly property: "verticalAlign";
+    };
+    readonly direction: {
+        readonly property: "direction";
+    };
+}>>, 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 physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly top: {
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly right: {
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly bottom: {
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly left: {
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        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 physical: readonly ["paddingLeft", "paddingRight"];
+            readonly logical: readonly ["paddingInlineStart", "paddingInlineEnd"];
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly py: {
+        readonly property: "padding";
+        readonly properties: {
+            readonly physical: readonly ["paddingTop", "paddingBottom"];
+            readonly logical: readonly ["paddingBlockStart", "paddingBlockEnd"];
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly pt: {
+        readonly property: {
+            readonly physical: "paddingTop";
+            readonly logical: "paddingBlockStart";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly pb: {
+        readonly property: {
+            readonly physical: "paddingBottom";
+            readonly logical: "paddingBlockEnd";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly pr: {
+        readonly property: {
+            readonly physical: "paddingRight";
+            readonly logical: "paddingInlineEnd";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly pl: {
+        readonly property: {
+            readonly physical: "paddingLeft";
+            readonly logical: "paddingInlineStart";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly m: {
+        readonly property: "margin";
+        readonly scale: "spacing";
+    };
+    readonly mx: {
+        readonly property: "margin";
+        readonly properties: {
+            readonly physical: readonly ["marginLeft", "marginRight"];
+            readonly logical: readonly ["marginInlineStart", "marginInlineEnd"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly scale: "spacing";
+    };
+    readonly my: {
+        readonly property: "margin";
+        readonly properties: {
+            readonly physical: readonly ["marginTop", "marginBottom"];
+            readonly logical: readonly ["marginBlockStart", "marginBlockEnd"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly scale: "spacing";
+    };
+    readonly mt: {
+        readonly property: {
+            readonly physical: "marginTop";
+            readonly logical: "marginBlockStart";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly mb: {
+        readonly property: {
+            readonly physical: "marginBottom";
+            readonly logical: "marginBlockEnd";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly mr: {
+        readonly property: {
+            readonly physical: "marginRight";
+            readonly logical: "marginInlineEnd";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+    readonly ml: {
+        readonly property: {
+            readonly physical: "marginLeft";
+            readonly logical: "marginInlineStart";
+        };
+        readonly scale: "spacing";
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+    };
+}>>]>>;
+export 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("react").ForwardRefExoticComponent<Omit<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & PatternProps & Pick<import("react").SVGProps<SVGSVGElement>, "string" | "scale" | "filter" | "fill" | "values" | "spacing" | "name" | "alignmentBaseline" | "baselineShift" | "clipPath" | "clipRule" | "colorInterpolationFilters" | "cursor" | "cx" | "cy" | "d" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontSizeAdjust" | "fontVariant" | "imageRendering" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "paintOrder" | "pointerEvents" | "r" | "rotate" | "rx" | "ry" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textRendering" | "transform" | "transformOrigin" | "unicodeBidi" | "vectorEffect" | "visibility" | "wordSpacing" | "writingMode" | "x" | "y" | "mask" | "offset" | "min" | "max" | "end" | "clip" | "suppressHydrationWarning" | "className" | "id" | "lang" | "media" | "method" | "style" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolation" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "fontStretch" | "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" | "limitingConeAngle" | "local" | "markerHeight" | "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" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist/props.js

@@ -0,0 +1,17 @@
+import { styledOptions, system } from '@codecademy/gamut-styles';
+import { variance } from '@codecademy/variance';
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const patternStyles = variance.compose(system.layout, system.positioning, system.space);
+const StyledSvg = styled('svg', styledOptions())(patternStyles);
+export const Svg = /*#__PURE__*/forwardRef(({
+  height = '100%',
+  width = '100%',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(StyledSvg, {
+  height: height,
+  ref: ref,
+  width: width,
+  ...rest
+}));

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>

package/dist/svg/CheckerRegular.svg

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

package/dist/svg/DiagonalADense.svg

@@ -0,0 +1,20 @@
+<svg>
+  <pattern
+    id="diagonalADense"
+    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" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="3" width="1" height="1" fill="currentColor" />
+    <rect y="3" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="1" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalADense)" />
+</svg>

package/dist/svg/DiagonalALoose.svg

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

package/dist/svg/DiagonalARegular.svg

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

package/dist/svg/DiagonalBDense.svg

@@ -0,0 +1,24 @@
+<svg>
+  <pattern
+    id="diagonalBDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <g clipPath="url(#clipDiagonalBDense)">
+      <rect width="4" height="4" fill="transparent" />
+      <rect y="3" width="1" height="1" fill="currentColor" />
+      <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+      <rect x="2" y="1" width="1" height="1" fill="currentColor" />
+      <rect x="3" width="1" height="1" fill="currentColor" />
+    </g>
+    <defs>
+      <clipPath id="clipDiagonalBDense">
+        <rect width="4" height="4" fill="transparent" />
+      </clipPath>
+    </defs>
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalBDense)" />
+</svg>

package/dist/svg/DiagonalBLoose.svg

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

package/dist/svg/DiagonalBRegular.svg

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

package/dist/svg/DotDense.svg

@@ -0,0 +1,13 @@
+<svg>
+  <pattern
+    id="dotDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <circle cx="0.5" cy="0.5" r="0.5" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#dotDense)" />
+</svg>

package/dist/svg/DotLoose.svg

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

package/dist/svg/DotRegular.svg

@@ -0,0 +1,13 @@
+<svg>
+  <pattern
+    id="dotRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <circle cx="0.5" cy="0.5" r="0.5" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#dotRegular)" />
+</svg>