<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[10841] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns: Pattern Directory: Sync with git WordPress/pattern-directory@61dd8e98cf529673169df6730de365388add3583</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/10841">10841</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/10841","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-03-24 16:36:42 +0000 (Wed, 24 Mar 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Pattern Directory: Sync with git WordPress/pattern-directory@61dd8e98cf529673169df6730de365388add3583</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsGruntfilejs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/Gruntfile.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_componentsscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsssettings_colorsscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/settings/_colors.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscssstylecss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsfunctionsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/</li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexassetphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternpreviewscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-preview.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssinglewporgpatternphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php</a></li>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/</li>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/</li>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/</li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewcanvasjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewdraghandlejs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/drag-handle.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patterncreatorscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-creator.scss</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsGruntfilejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/Gruntfile.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/Gruntfile.js 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/Gruntfile.js 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,5 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> module.exports = function( grunt ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const isChild = 'wporg' !== grunt.file.readJSON( 'package.json' ).name;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const defaultWebpackConfig = require( '@wordpress/scripts/config/webpack.config' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const getSassFiles = () => {
</span><span class="cx" style="display: block; padding: 0 10px"> const files = {};
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,11 +64,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> options: { signature: false },
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ webpack: {
+ myConfig: defaultWebpackConfig,
+ },
+
</ins><span class="cx" style="display: block; padding: 0 10px"> watch: {
</span><span class="cx" style="display: block; padding: 0 10px"> css: {
</span><span class="cx" style="display: block; padding: 0 10px"> files: [ '**/*.scss', '../wporg/css/**/*scss' ],
</span><span class="cx" style="display: block; padding: 0 10px"> tasks: [ 'css' ],
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ javascript: {
+ files: [ 'src/**/*.js' ],
+ tasks: [ 'webpack' ],
+ },
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -79,9 +88,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> grunt.loadNpmTasks( 'grunt-postcss' );
</span><span class="cx" style="display: block; padding: 0 10px"> grunt.loadNpmTasks( 'grunt-sass-globbing' );
</span><span class="cx" style="display: block; padding: 0 10px"> grunt.loadNpmTasks( 'grunt-contrib-watch' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ grunt.loadNpmTasks( 'grunt-webpack' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> grunt.registerTask( 'css', [ 'sass_globbing', 'sass', 'postcss' ] );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ grunt.registerTask( 'js', [ 'webpack' ] );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- grunt.registerTask( 'default', [ 'css' ] );
- grunt.registerTask( 'build', [ 'css' ] ); // Automatically runs "production" steps
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ grunt.registerTask( 'default', [ 'css', 'webpack' ] );
+ grunt.registerTask( 'build', [ 'css', 'webpack' ] ); // Automatically runs "production" steps
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexassetphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill'), 'version' => 'c982c1a3f3551b114b02d712036d1fb5');
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><span class="cx" style="display: block; padding: 0 10px">Property changes on: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,3534 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/******/ (function(modules) { // webpackBootstrap
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId]) {
+/******/ return installedModules[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ i: moduleId,
+/******/ l: false,
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.l = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // define getter function for harmony exports
+/******/ __webpack_require__.d = function(exports, name, getter) {
+/******/ if(!__webpack_require__.o(exports, name)) {
+/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ }
+/******/ };
+/******/
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/
+/******/ // create a fake namespace object
+/******/ // mode & 1: value is a module id, require it
+/******/ // mode & 2: merge all properties of value into the ns
+/******/ // mode & 4: return value when already ns object
+/******/ // mode & 8|1: behave like require
+/******/ __webpack_require__.t = function(value, mode) {
+/******/ if(mode & 1) value = __webpack_require__(value);
+/******/ if(mode & 8) return value;
+/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ return ns;
+/******/ };
+/******/
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = function(module) {
+/******/ var getter = module && module.__esModule ?
+/******/ function getDefault() { return module['default']; } :
+/******/ function getModuleExports() { return module; };
+/******/ __webpack_require__.d(getter, 'a', getter);
+/******/ return getter;
+/******/ };
+/******/
+/******/ // Object.prototype.hasOwnProperty.call
+/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/arrayLikeToArray.js":
+/*!*************************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/arrayLikeToArray.js ***!
+ \*************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _arrayLikeToArray(arr, len) {
+ if (len == null || len > arr.length) len = arr.length;
+
+ for (var i = 0, arr2 = new Array(len); i < len; i++) {
+ arr2[i] = arr[i];
+ }
+
+ return arr2;
+}
+
+module.exports = _arrayLikeToArray;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/arrayWithHoles.js":
+/*!***********************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/arrayWithHoles.js ***!
+ \***********************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+}
+
+module.exports = _arrayWithHoles;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/extends.js":
+/*!****************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/extends.js ***!
+ \****************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _extends() {
+ module.exports = _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);
+}
+
+module.exports = _extends;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js":
+/*!*****************************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js ***!
+ \*****************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _iterableToArrayLimit(arr, i) {
+ if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+ var _arr = [];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i["return"] != null) _i["return"]();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+
+ return _arr;
+}
+
+module.exports = _iterableToArrayLimit;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/nonIterableRest.js":
+/*!************************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/nonIterableRest.js ***!
+ \************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _nonIterableRest() {
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+module.exports = _nonIterableRest;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js":
+/*!********************************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***!
+ \********************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var objectWithoutPropertiesLoose = __webpack_require__(/*! ./objectWithoutPropertiesLoose */ "../../../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js");
+
+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;
+}
+
+module.exports = _objectWithoutProperties;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js":
+/*!*************************************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js ***!
+ \*************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+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;
+}
+
+module.exports = _objectWithoutPropertiesLoose;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js":
+/*!**********************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/slicedToArray.js ***!
+ \**********************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayWithHoles = __webpack_require__(/*! ./arrayWithHoles */ "../../../../node_modules/@babel/runtime/helpers/arrayWithHoles.js");
+
+var iterableToArrayLimit = __webpack_require__(/*! ./iterableToArrayLimit */ "../../../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js");
+
+var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray */ "../../../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
+
+var nonIterableRest = __webpack_require__(/*! ./nonIterableRest */ "../../../../node_modules/@babel/runtime/helpers/nonIterableRest.js");
+
+function _slicedToArray(arr, i) {
+ return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
+}
+
+module.exports = _slicedToArray;
+
+/***/ }),
+
+/***/ "../../../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
+/*!***********************************************************************************************************************!*\
+ !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
+ \***********************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray */ "../../../../node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
+
+function _unsupportedIterableToArray(o, minLen) {
+ if (!o) return;
+ if (typeof o === "string") return arrayLikeToArray(o, minLen);
+ var n = Object.prototype.toString.call(o).slice(8, -1);
+ if (n === "Object" && o.constructor) n = o.constructor.name;
+ if (n === "Map" || n === "Set") return Array.from(o);
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
+}
+
+module.exports = _unsupportedIterableToArray;
+
+/***/ }),
+
+/***/ "./node_modules/react-use-gesture/dist/reactusegesture.esm.js":
+/*!********************************************************************!*\
+ !*** ./node_modules/react-use-gesture/dist/reactusegesture.esm.js ***!
+ \********************************************************************/
+/*! exports provided: addV, rubberbandIfOutOfBounds, subV, useDrag, useGesture, useHover, useMove, usePinch, useScroll, useWheel */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addV", function() { return addV; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rubberbandIfOutOfBounds", function() { return rubberbandIfOutOfBounds; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "subV", function() { return subV; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useDrag", function() { return useDrag; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useGesture", function() { return useGesture; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useHover", function() { return useHover; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useMove", function() { return useMove; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "usePinch", function() { return usePinch; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useScroll", function() { return useScroll; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useWheel", function() { return useWheel; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+
+// vector add
+function addV(v1, v2) {
+ return v1.map(function (v, i) {
+ return v + v2[i];
+ });
+} // vector substract
+
+function subV(v1, v2) {
+ return v1.map(function (v, i) {
+ return v - v2[i];
+ });
+}
+/**
+ * Calculates distance
+ * @param movement the difference between current and initial vectors
+ * @returns distance
+ */
+
+function calculateDistance(movement) {
+ return Math.hypot.apply(Math, movement);
+}
+function calculateAllGeometry(movement, delta) {
+ if (delta === void 0) {
+ delta = movement;
+ }
+
+ var dl = calculateDistance(delta);
+ var alpha = dl === 0 ? 0 : 1 / dl;
+ var direction = delta.map(function (v) {
+ return alpha * v;
+ });
+ var distance = calculateDistance(movement);
+ return {
+ distance: distance,
+ direction: direction
+ };
+}
+/**
+ * Calculates all kinematics
+ * @template T the expected vector type
+ * @param movement the difference between current and initial vectors
+ * @param delta the difference between current and previous vectors
+ * @param delta_t the time difference between current and previous timestamps
+ * @returns all kinematics
+ */
+
+function calculateAllKinematics(movement, delta, dt) {
+ var dl = calculateDistance(delta);
+ var alpha = dl === 0 ? 0 : 1 / dl;
+ var beta = dt === 0 ? 0 : 1 / dt;
+ var velocity = beta * dl;
+ var velocities = delta.map(function (v) {
+ return beta * v;
+ });
+ var direction = delta.map(function (v) {
+ return alpha * v;
+ });
+ var distance = calculateDistance(movement);
+ return {
+ velocities: velocities,
+ velocity: velocity,
+ distance: distance,
+ direction: direction
+ };
+}
+/**
+ * Because IE doesn't support `Math.sign` function, so we use the polyfill version of the function.
+ * This polyfill function is suggested by Mozilla:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign#Polyfill
+ * @param x target number
+ */
+
+function sign(x) {
+ if (Math.sign) return Math.sign(x);
+ return Number(x > 0) - Number(x < 0) || +x;
+}
+
+function minMax(value, min, max) {
+ return Math.max(min, Math.min(value, max));
+} // Based on @aholachek ;)
+// https://twitter.com/chpwn/status/285540192096497664
+// iOS constant = 0.55
+// https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5
+
+
+function rubberband2(distance, constant) {
+ // default constant from the article is 0.7
+ return Math.pow(distance, constant * 5);
+}
+
+function rubberband(distance, dimension, constant) {
+ if (dimension === 0 || Math.abs(dimension) === Infinity) return rubberband2(distance, constant);
+ return distance * dimension * constant / (dimension + constant * distance);
+}
+
+function rubberbandIfOutOfBounds(position, min, max, constant) {
+ if (constant === void 0) {
+ constant = 0.15;
+ }
+
+ if (constant === 0) return minMax(position, min, max);
+ if (position < min) return -rubberband(min - position, max - min, constant) + min;
+ if (position > max) return +rubberband(position - max, max - min, constant) + max;
+ return position;
+}
+
+function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+}
+
+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);
+}
+
+function _inheritsLoose(subClass, superClass) {
+ subClass.prototype = Object.create(superClass.prototype);
+ subClass.prototype.constructor = subClass;
+ subClass.__proto__ = superClass;
+}
+
+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;
+}
+
+function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return self;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+ if (!o) return;
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+ var n = Object.prototype.toString.call(o).slice(8, -1);
+ if (n === "Object" && o.constructor) n = o.constructor.name;
+ if (n === "Map" || n === "Set") return Array.from(o);
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+ if (len == null || len > arr.length) len = arr.length;
+
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+ return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+ var it;
+
+ if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+ if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+ if (it) o = it;
+ var i = 0;
+ return function () {
+ if (i >= o.length) return {
+ done: true
+ };
+ return {
+ done: false,
+ value: o[i++]
+ };
+ };
+ }
+
+ throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+ }
+
+ it = o[Symbol.iterator]();
+ return it.next.bind(it);
+}
+
+function noop() {}
+/**
+ * TODO Beware that only optimized cases are covered in tests =)
+ * TODO Need to cover general case as well
+ *
+ * @param fns
+ */
+
+function chainFns() {
+ for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+ fns[_key] = arguments[_key];
+ }
+
+ if (fns.length === 0) return noop;
+ if (fns.length === 1) return fns[0];
+ return function () {
+ var result;
+
+ for (var _iterator = _createForOfIteratorHelperLoose(fns), _step; !(_step = _iterator()).done;) {
+ var fn = _step.value;
+ result = fn.apply(this, arguments) || result;
+ }
+
+ return result;
+ };
+}
+/**
+ * Expects a simple value or 2D vector (an array with 2 elements) and
+ * always returns 2D vector. If simple value is passed, returns a
+ * vector with this value as both coordinates.
+ *
+ * @param value
+ */
+
+function ensureVector(value, fallback) {
+ if (value === undefined) {
+ if (fallback === undefined) {
+ throw new Error('Must define fallback value if undefined is expected');
+ }
+
+ value = fallback;
+ }
+
+ if (Array.isArray(value)) return value;
+ return [value, value];
+}
+/**
+ * Helper for defining a default value
+ *
+ * @param value
+ * @param fallback
+ */
+
+function assignDefault(value, fallback) {
+ return Object.assign({}, fallback, value || {});
+}
+/**
+ * Resolves getters (functions) by calling them
+ * If simple value is given it just passes through
+ *
+ * @param v
+ */
+
+function valueFn(v) {
+ if (typeof v === 'function') {
+ for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+ args[_key2 - 1] = arguments[_key2];
+ }
+
+ // @ts-ignore
+ return v.apply(void 0, args);
+ } else {
+ return v;
+ }
+}
+
+function resolveWith(config, resolvers) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ var result = {};
+
+ for (var _i = 0, _Object$entries = Object.entries(resolvers); _i < _Object$entries.length; _i++) {
+ var _Object$entries$_i = _Object$entries[_i],
+ key = _Object$entries$_i[0],
+ resolver = _Object$entries$_i[1];
+
+ switch (typeof resolver) {
+ case 'function':
+ result[key] = resolver.call(result, config[key], key, config);
+ break;
+
+ case 'object':
+ result[key] = resolveWith(config[key], resolver);
+ break;
+
+ case 'boolean':
+ if (resolver) result[key] = config[key];
+ break;
+ }
+ }
+
+ return result;
+}
+
+/**
+ * Whether the browser supports GestureEvent (ie Safari)
+ * @returns true if the browser supports gesture event
+ */
+function supportsGestureEvents() {
+ try {
+ // TODO [TS] possibly find GestureEvent definitions?
+ // @ts-ignore: no type definitions for webkit GestureEvents
+ return 'constructor' in GestureEvent;
+ } catch (e) {
+ return false;
+ }
+}
+function supportsTouchEvents() {
+ return typeof window !== 'undefined' && 'ontouchstart' in window;
+}
+function supportsPointerEvents() {
+ return typeof window !== 'undefined' && 'onpointerdown' in window;
+}
+
+function getEventTouches(event) {
+ if ('pointerId' in event) return null;
+ return event.type === 'touchend' ? event.changedTouches : event.targetTouches;
+}
+
+function getTouchIds(event) {
+ return Array.from(getEventTouches(event)).map(function (t) {
+ return t.identifier;
+ });
+}
+function getGenericEventData(event) {
+ var buttons = 'buttons' in event ? event.buttons : 0;
+ var shiftKey = event.shiftKey,
+ altKey = event.altKey,
+ metaKey = event.metaKey,
+ ctrlKey = event.ctrlKey; // TODO check if this might create some overrides?
+
+ return {
+ buttons: buttons,
+ shiftKey: shiftKey,
+ altKey: altKey,
+ metaKey: metaKey,
+ ctrlKey: ctrlKey
+ };
+}
+
+var identity = function identity(xy) {
+ return xy;
+};
+/**
+ * Gets pointer event values.
+ * @param event
+ * @returns pointer event values
+ */
+
+
+function getPointerEventValues(event, transform) {
+ if (transform === void 0) {
+ transform = identity;
+ }
+
+ var touchEvents = getEventTouches(event);
+
+ var _ref = touchEvents ? touchEvents[0] : event,
+ clientX = _ref.clientX,
+ clientY = _ref.clientY;
+
+ return transform([clientX, clientY]);
+}
+/**
+ * Gets two touches event data
+ * @param event
+ * @returns two touches event data
+ */
+
+function getTwoTouchesEventValues(event, pointerIds, transform) {
+ if (transform === void 0) {
+ transform = identity;
+ }
+
+ var _Array$from$filter = Array.from(event.touches).filter(function (t) {
+ return pointerIds.includes(t.identifier);
+ }),
+ A = _Array$from$filter[0],
+ B = _Array$from$filter[1];
+
+ if (!A || !B) throw Error("The event doesn't have two pointers matching the pointerIds");
+ var dx = B.clientX - A.clientX;
+ var dy = B.clientY - A.clientY;
+ var cx = (B.clientX + A.clientX) / 2;
+ var cy = (B.clientY + A.clientY) / 2; // const e: any = 'nativeEvent' in event ? event.nativeEvent : event
+
+ var distance = Math.hypot(dx, dy); // FIXME rotation has inconsistant values so we're not using it atm
+ // const angle = (e.rotation as number) ?? -(Math.atan2(dx, dy) * 180) / Math.PI
+
+ var angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
+ var values = transform([distance, angle]);
+ var origin = transform([cx, cy]);
+ return {
+ values: values,
+ origin: origin
+ };
+}
+/**
+ * Gets scroll event values
+ * @param event
+ * @returns scroll event values
+ */
+
+function getScrollEventValues(event, transform) {
+ if (transform === void 0) {
+ transform = identity;
+ }
+
+ // If the currentTarget is the window then we return the scrollX/Y position.
+ // If not (ie the currentTarget is a DOM element), then we return scrollLeft/Top
+ var _event$currentTarget = event.currentTarget,
+ scrollX = _event$currentTarget.scrollX,
+ scrollY = _event$currentTarget.scrollY,
+ scrollLeft = _event$currentTarget.scrollLeft,
+ scrollTop = _event$currentTarget.scrollTop;
+ return transform([scrollX || scrollLeft || 0, scrollY || scrollTop || 0]);
+} // wheel delta defaults from https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+
+var LINE_HEIGHT = 40;
+var PAGE_HEIGHT = 800;
+/**
+ * Gets wheel event values.
+ * @param event
+ * @returns wheel event values
+ */
+
+function getWheelEventValues(event, transform) {
+ if (transform === void 0) {
+ transform = identity;
+ }
+
+ var deltaX = event.deltaX,
+ deltaY = event.deltaY,
+ deltaMode = event.deltaMode; // normalize wheel values, especially for Firefox
+
+ if (deltaMode === 1) {
+ deltaX *= LINE_HEIGHT;
+ deltaY *= LINE_HEIGHT;
+ } else if (deltaMode === 2) {
+ deltaX *= PAGE_HEIGHT;
+ deltaY *= PAGE_HEIGHT;
+ }
+
+ return transform([deltaX, deltaY]);
+}
+/**
+ * Gets webkit gesture event values.
+ * @param event
+ * @returns webkit gesture event values
+ */
+
+function getWebkitGestureEventValues(event, transform) {
+ if (transform === void 0) {
+ transform = identity;
+ }
+
+ return transform([event.scale, event.rotation]);
+}
+
+var DEFAULT_DRAG_DELAY = 180;
+var DEFAULT_RUBBERBAND = 0.15;
+var DEFAULT_SWIPE_VELOCITY = 0.5;
+var DEFAULT_SWIPE_DISTANCE = 50;
+var DEFAULT_SWIPE_DURATION = 250;
+var InternalGestureOptionsNormalizers = {
+ threshold: function threshold(value) {
+ if (value === void 0) {
+ value = 0;
+ }
+
+ return ensureVector(value);
+ },
+ rubberband: function rubberband(value) {
+ if (value === void 0) {
+ value = 0;
+ }
+
+ switch (value) {
+ case true:
+ return ensureVector(DEFAULT_RUBBERBAND);
+
+ case false:
+ return ensureVector(0);
+
+ default:
+ return ensureVector(value);
+ }
+ },
+ enabled: function enabled(value) {
+ if (value === void 0) {
+ value = true;
+ }
+
+ return value;
+ },
+ triggerAllEvents: function triggerAllEvents(value) {
+ if (value === void 0) {
+ value = false;
+ }
+
+ return value;
+ },
+ initial: function initial(value) {
+ if (value === void 0) {
+ value = 0;
+ }
+
+ if (typeof value === 'function') return value;
+ return ensureVector(value);
+ },
+ transform: true
+};
+
+var InternalCoordinatesOptionsNormalizers = /*#__PURE__*/_extends({}, InternalGestureOptionsNormalizers, {
+ axis: true,
+ lockDirection: function lockDirection(value) {
+ if (value === void 0) {
+ value = false;
+ }
+
+ return value;
+ },
+ bounds: function bounds(value) {
+ if (value === void 0) {
+ value = {};
+ }
+
+ if (typeof value === 'function') return function (state) {
+ return InternalCoordinatesOptionsNormalizers.bounds(value(state));
+ };
+ var _value2 = value,
+ _value2$left = _value2.left,
+ left = _value2$left === void 0 ? -Infinity : _value2$left,
+ _value2$right = _value2.right,
+ right = _value2$right === void 0 ? Infinity : _value2$right,
+ _value2$top = _value2.top,
+ top = _value2$top === void 0 ? -Infinity : _value2$top,
+ _value2$bottom = _value2.bottom,
+ bottom = _value2$bottom === void 0 ? Infinity : _value2$bottom;
+ return [[left, right], [top, bottom]];
+ }
+});
+
+var isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement;
+var InternalGenericOptionsNormalizers = {
+ enabled: function enabled(value) {
+ if (value === void 0) {
+ value = true;
+ }
+
+ return value;
+ },
+ domTarget: true,
+ window: /*#__PURE__*/function (_window) {
+ function window(_x) {
+ return _window.apply(this, arguments);
+ }
+
+ window.toString = function () {
+ return _window.toString();
+ };
+
+ return window;
+ }(function (value) {
+ if (value === void 0) {
+ value = isBrowser ? window : undefined;
+ }
+
+ return value;
+ }),
+ eventOptions: function eventOptions(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ _ref$passive = _ref.passive,
+ passive = _ref$passive === void 0 ? true : _ref$passive,
+ _ref$capture = _ref.capture,
+ capture = _ref$capture === void 0 ? false : _ref$capture;
+
+ return {
+ passive: passive,
+ capture: capture
+ };
+ },
+ transform: true
+};
+
+var InternalDistanceAngleOptionsNormalizers = /*#__PURE__*/_extends({}, InternalGestureOptionsNormalizers, {
+ bounds: function bounds(_value, _key, _ref2) {
+ var _ref2$distanceBounds = _ref2.distanceBounds,
+ distanceBounds = _ref2$distanceBounds === void 0 ? {} : _ref2$distanceBounds,
+ _ref2$angleBounds = _ref2.angleBounds,
+ angleBounds = _ref2$angleBounds === void 0 ? {} : _ref2$angleBounds;
+
+ var _distanceBounds = function _distanceBounds(state) {
+ var D = assignDefault(valueFn(distanceBounds, state), {
+ min: -Infinity,
+ max: Infinity
+ });
+ return [D.min, D.max];
+ };
+
+ var _angleBounds = function _angleBounds(state) {
+ var A = assignDefault(valueFn(angleBounds, state), {
+ min: -Infinity,
+ max: Infinity
+ });
+ return [A.min, A.max];
+ };
+
+ if (typeof distanceBounds !== 'function' && typeof angleBounds !== 'function') return [_distanceBounds(), _angleBounds()];
+ return function (state) {
+ return [_distanceBounds(state), _angleBounds(state)];
+ };
+ }
+});
+
+var InternalDragOptionsNormalizers = /*#__PURE__*/_extends({}, InternalCoordinatesOptionsNormalizers, {
+ useTouch: function useTouch(value) {
+ if (value === void 0) {
+ value = false;
+ }
+
+ var supportsTouch = supportsTouchEvents();
+ var supportsPointer = supportsPointerEvents();
+ if (value && supportsTouch) return true;
+ if (supportsTouch && !supportsPointer) return true;
+ return false;
+ },
+ experimental_preventWindowScrollY: function experimental_preventWindowScrollY(value) {
+ if (value === void 0) {
+ value = false;
+ }
+
+ return value;
+ },
+ threshold: function threshold(v, _k, _ref3) {
+ var _ref3$filterTaps = _ref3.filterTaps,
+ filterTaps = _ref3$filterTaps === void 0 ? false : _ref3$filterTaps,
+ _ref3$lockDirection = _ref3.lockDirection,
+ lockDirection = _ref3$lockDirection === void 0 ? false : _ref3$lockDirection,
+ _ref3$axis = _ref3.axis,
+ axis = _ref3$axis === void 0 ? undefined : _ref3$axis;
+ var A = ensureVector(v, filterTaps ? 3 : lockDirection ? 1 : axis ? 1 : 0);
+ this.filterTaps = filterTaps;
+ return A;
+ },
+ swipeVelocity: function swipeVelocity(v) {
+ if (v === void 0) {
+ v = DEFAULT_SWIPE_VELOCITY;
+ }
+
+ return ensureVector(v);
+ },
+ swipeDistance: function swipeDistance(v) {
+ if (v === void 0) {
+ v = DEFAULT_SWIPE_DISTANCE;
+ }
+
+ return ensureVector(v);
+ },
+ swipeDuration: function swipeDuration(value) {
+ if (value === void 0) {
+ value = DEFAULT_SWIPE_DURATION;
+ }
+
+ return value;
+ },
+ delay: function delay(value) {
+ if (value === void 0) {
+ value = 0;
+ }
+
+ switch (value) {
+ case true:
+ return DEFAULT_DRAG_DELAY;
+
+ case false:
+ return 0;
+
+ default:
+ return value;
+ }
+ }
+});
+
+function getInternalGenericOptions(config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ // TODO warn when passive is set to true and domTarget is undefined
+ return resolveWith(config, InternalGenericOptionsNormalizers);
+}
+function getInternalCoordinatesOptions(config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ return resolveWith(config, InternalCoordinatesOptionsNormalizers);
+}
+function getInternalDistanceAngleOptions(config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ return resolveWith(config, InternalDistanceAngleOptionsNormalizers);
+}
+function getInternalDragOptions(config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ return resolveWith(config, InternalDragOptionsNormalizers);
+}
+
+function _buildMoveConfig(_ref) {
+ var domTarget = _ref.domTarget,
+ eventOptions = _ref.eventOptions,
+ window = _ref.window,
+ enabled = _ref.enabled,
+ rest = _objectWithoutPropertiesLoose(_ref, ["domTarget", "eventOptions", "window", "enabled"]);
+
+ var opts = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ window: window,
+ enabled: enabled
+ });
+ opts.move = getInternalCoordinatesOptions(rest);
+ return opts;
+}
+function _buildHoverConfig(_ref2) {
+ var domTarget = _ref2.domTarget,
+ eventOptions = _ref2.eventOptions,
+ window = _ref2.window,
+ enabled = _ref2.enabled,
+ rest = _objectWithoutPropertiesLoose(_ref2, ["domTarget", "eventOptions", "window", "enabled"]);
+
+ var opts = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ window: window,
+ enabled: enabled
+ });
+ opts.hover = _extends({
+ enabled: true
+ }, rest);
+ return opts;
+}
+function _buildDragConfig(_ref3) {
+ var domTarget = _ref3.domTarget,
+ eventOptions = _ref3.eventOptions,
+ window = _ref3.window,
+ enabled = _ref3.enabled,
+ rest = _objectWithoutPropertiesLoose(_ref3, ["domTarget", "eventOptions", "window", "enabled"]);
+
+ var opts = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ window: window,
+ enabled: enabled
+ });
+ opts.drag = getInternalDragOptions(rest);
+ return opts;
+}
+function _buildPinchConfig(_ref4) {
+ var domTarget = _ref4.domTarget,
+ eventOptions = _ref4.eventOptions,
+ window = _ref4.window,
+ enabled = _ref4.enabled,
+ rest = _objectWithoutPropertiesLoose(_ref4, ["domTarget", "eventOptions", "window", "enabled"]);
+
+ var opts = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ window: window,
+ enabled: enabled
+ });
+ opts.pinch = getInternalDistanceAngleOptions(rest);
+ return opts;
+}
+function _buildScrollConfig(_ref5) {
+ var domTarget = _ref5.domTarget,
+ eventOptions = _ref5.eventOptions,
+ window = _ref5.window,
+ enabled = _ref5.enabled,
+ rest = _objectWithoutPropertiesLoose(_ref5, ["domTarget", "eventOptions", "window", "enabled"]);
+
+ var opts = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ window: window,
+ enabled: enabled
+ });
+ opts.scroll = getInternalCoordinatesOptions(rest);
+ return opts;
+}
+function _buildWheelConfig(_ref6) {
+ var domTarget = _ref6.domTarget,
+ eventOptions = _ref6.eventOptions,
+ window = _ref6.window,
+ enabled = _ref6.enabled,
+ rest = _objectWithoutPropertiesLoose(_ref6, ["domTarget", "eventOptions", "window", "enabled"]);
+
+ var opts = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ window: window,
+ enabled: enabled
+ });
+ opts.wheel = getInternalCoordinatesOptions(rest);
+ return opts;
+}
+function buildComplexConfig(config, actions) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ if (actions === void 0) {
+ actions = new Set();
+ }
+
+ var _config = config,
+ drag = _config.drag,
+ wheel = _config.wheel,
+ move = _config.move,
+ scroll = _config.scroll,
+ pinch = _config.pinch,
+ hover = _config.hover,
+ eventOptions = _config.eventOptions,
+ window = _config.window,
+ transform = _config.transform,
+ domTarget = _config.domTarget,
+ enabled = _config.enabled;
+ var mergedConfig = getInternalGenericOptions({
+ domTarget: domTarget,
+ eventOptions: eventOptions,
+ transform: transform,
+ window: window,
+ enabled: enabled
+ });
+ if (actions.has('onDrag')) mergedConfig.drag = getInternalDragOptions(drag);
+ if (actions.has('onWheel')) mergedConfig.wheel = getInternalCoordinatesOptions(wheel);
+ if (actions.has('onScroll')) mergedConfig.scroll = getInternalCoordinatesOptions(scroll);
+ if (actions.has('onMove')) mergedConfig.move = getInternalCoordinatesOptions(move);
+ if (actions.has('onPinch')) mergedConfig.pinch = getInternalDistanceAngleOptions(pinch);
+ if (actions.has('onHover')) mergedConfig.hover = _extends({
+ enabled: true
+ }, hover);
+ return mergedConfig;
+}
+
+function getInitial(mixed) {
+ return _extends({
+ _active: false,
+ _blocked: false,
+ _intentional: [false, false],
+ _movement: [0, 0],
+ _initial: [0, 0],
+ _bounds: [[-Infinity, Infinity], [-Infinity, Infinity]],
+ _threshold: [0, 0],
+ _lastEventType: undefined,
+ _dragStarted: false,
+ _dragPreventScroll: false,
+ _dragIsTap: true,
+ _dragDelayed: false,
+ event: undefined,
+ intentional: false,
+ values: [0, 0],
+ velocities: [0, 0],
+ delta: [0, 0],
+ movement: [0, 0],
+ offset: [0, 0],
+ lastOffset: [0, 0],
+ direction: [0, 0],
+ initial: [0, 0],
+ previous: [0, 0],
+ first: false,
+ last: false,
+ active: false,
+ timeStamp: 0,
+ startTime: 0,
+ elapsedTime: 0,
+ cancel: noop,
+ canceled: false,
+ memo: undefined,
+ args: undefined
+ }, mixed);
+}
+
+function getInitialState() {
+ var shared = {
+ hovering: false,
+ scrolling: false,
+ wheeling: false,
+ dragging: false,
+ moving: false,
+ pinching: false,
+ touches: 0,
+ buttons: 0,
+ down: false,
+ shiftKey: false,
+ altKey: false,
+ metaKey: false,
+ ctrlKey: false,
+ locked: false
+ };
+ var drag = getInitial({
+ _pointerId: undefined,
+ axis: undefined,
+ xy: [0, 0],
+ vxvy: [0, 0],
+ velocity: 0,
+ distance: 0,
+ tap: false,
+ swipe: [0, 0]
+ });
+ var pinch = getInitial({
+ // @ts-expect-error when used _pointerIds we can assert its type will be [number, number]
+ _pointerIds: [],
+ da: [0, 0],
+ vdva: [0, 0],
+ // @ts-expect-error origin can never be passed as undefined in userland
+ origin: undefined,
+ turns: 0
+ });
+ var wheel = getInitial({
+ axis: undefined,
+ xy: [0, 0],
+ vxvy: [0, 0],
+ velocity: 0,
+ distance: 0
+ });
+ var move = getInitial({
+ axis: undefined,
+ xy: [0, 0],
+ vxvy: [0, 0],
+ velocity: 0,
+ distance: 0
+ });
+ var scroll = getInitial({
+ axis: undefined,
+ xy: [0, 0],
+ vxvy: [0, 0],
+ velocity: 0,
+ distance: 0
+ });
+ return {
+ shared: shared,
+ drag: drag,
+ pinch: pinch,
+ wheel: wheel,
+ move: move,
+ scroll: scroll
+ };
+}
+
+var RecognizersMap = /*#__PURE__*/new Map();
+
+var identity$1 = function identity(xy) {
+ return xy;
+};
+/**
+ * @private
+ * Recognizer abstract class.
+ */
+
+
+var Recognizer = /*#__PURE__*/function () {
+ /**
+ * Creates an instance of a gesture recognizer.
+ * @param stateKey drag, move, pinch, etc.
+ * @param controller the controller attached to the gesture
+ * @param [args] the args that should be passed to the gesture handler
+ */
+ function Recognizer(controller, args) {
+ var _this = this;
+
+ if (args === void 0) {
+ args = [];
+ }
+
+ this.controller = controller;
+ this.args = args;
+ this.debounced = true; // Convenience method to set a timeout for a given gesture
+
+ this.setTimeout = function (callback, ms) {
+ var _window;
+
+ if (ms === void 0) {
+ ms = 140;
+ }
+
+ clearTimeout(_this.controller.timeouts[_this.stateKey]);
+
+ for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+ args[_key - 2] = arguments[_key];
+ }
+
+ _this.controller.timeouts[_this.stateKey] = (_window = window).setTimeout.apply(_window, [callback, ms].concat(args));
+ }; // Convenience method to clear a timeout for a given gesture
+
+
+ this.clearTimeout = function () {
+ clearTimeout(_this.controller.timeouts[_this.stateKey]);
+ };
+ /**
+ * Fires the gesture handler
+ */
+
+
+ this.fireGestureHandler = function (forceFlag) {
+ if (forceFlag === void 0) {
+ forceFlag = false;
+ }
+
+ /**
+ * If the gesture has been blocked (this can happen when the gesture has started in an unwanted direction),
+ * clean everything and don't do anything.
+ */
+ if (_this.state._blocked) {
+ // we need debounced gestures to end by themselves
+ if (!_this.debounced) {
+ _this.state._active = false;
+
+ _this.clean();
+ }
+
+ return null;
+ } // If the gesture has no intentional dimension, don't fire the handler.
+
+
+ if (!forceFlag && !_this.state.intentional && !_this.config.triggerAllEvents) return null;
+
+ if (_this.state.intentional) {
+ var prev_active = _this.state.active;
+ var next_active = _this.state._active;
+ _this.state.active = next_active;
+ _this.state.first = next_active && !prev_active;
+ _this.state.last = prev_active && !next_active;
+ _this.controller.state.shared[_this.ingKey] = next_active; // Sets dragging, pinching, etc. to the gesture active state
+ }
+
+ var touches = _this.controller.pointerIds.size || _this.controller.touchIds.size;
+ var down = _this.controller.state.shared.buttons > 0 || touches > 0;
+
+ var state = _extends({}, _this.controller.state.shared, _this.state, _this.mapStateValues(_this.state), {
+ locked: !!document.pointerLockElement,
+ touches: touches,
+ down: down
+ }); // @ts-expect-error
+
+
+ var newMemo = _this.handler(state); // Sets memo to the returned value of the handler (unless it's not undefined)
+
+
+ _this.state.memo = newMemo !== void 0 ? newMemo : _this.state.memo;
+ return state;
+ };
+
+ this.controller = controller;
+ this.args = args;
+ } // Returns the gesture config
+
+
+ var _proto = Recognizer.prototype;
+
+ // Convenience method to update the shared state
+ _proto.updateSharedState = function updateSharedState(sharedState) {
+ Object.assign(this.controller.state.shared, sharedState);
+ } // Convenience method to update the gesture state
+ ;
+
+ _proto.updateGestureState = function updateGestureState(gestureState) {
+ Object.assign(this.state, gestureState);
+ }
+ /**
+ * Returns state properties depending on the movement and state.
+ *
+ * Should be overriden for custom behavior, doesn't do anything in the implementation
+ * below.
+ */
+ ;
+
+ _proto.checkIntentionality = function checkIntentionality(_intentional, _movement) {
+ return {
+ _intentional: _intentional,
+ _blocked: false
+ };
+ }
+ /**
+ * Returns basic movement properties for the gesture based on the next values and current state.
+ */
+ ;
+
+ _proto.getMovement = function getMovement(values) {
+ var rubberband = this.config.rubberband;
+ var _this$state = this.state,
+ _bounds = _this$state._bounds,
+ _initial = _this$state._initial,
+ _active = _this$state._active,
+ wasIntentional = _this$state._intentional,
+ lastOffset = _this$state.lastOffset,
+ prevMovement = _this$state.movement,
+ _T = _this$state._threshold;
+ var M = this.getInternalMovement(values, this.state);
+ var i0 = wasIntentional[0] === false ? getIntentionalDisplacement(M[0], _T[0]) : wasIntentional[0];
+ var i1 = wasIntentional[1] === false ? getIntentionalDisplacement(M[1], _T[1]) : wasIntentional[1]; // Get gesture specific state properties based on intentionality and movement.
+
+ var intentionalityCheck = this.checkIntentionality([i0, i1], M);
+
+ if (intentionalityCheck._blocked) {
+ return _extends({}, intentionalityCheck, {
+ _movement: M,
+ delta: [0, 0]
+ });
+ }
+
+ var _intentional = intentionalityCheck._intentional;
+ var _movement = M;
+ /**
+ * The movement sent to the handler has 0 in its dimensions when intentionality is false.
+ * It is calculated from the actual movement minus the threshold.
+ */
+
+ var movement = [_intentional[0] !== false ? M[0] - _intentional[0] : 0, _intentional[1] !== false ? M[1] - _intentional[1] : 0];
+ var offset = addV(movement, lastOffset);
+ /**
+ * Rubberband should be 0 when the gesture is no longer active, so that movement
+ * and offset can return within their bounds.
+ */
+
+ var _rubberband = _active ? rubberband : [0, 0];
+
+ movement = computeRubberband(_bounds, addV(movement, _initial), _rubberband);
+ return _extends({}, intentionalityCheck, {
+ intentional: _intentional[0] !== false || _intentional[1] !== false,
+ _initial: _initial,
+ _movement: _movement,
+ movement: movement,
+ values: values,
+ offset: computeRubberband(_bounds, offset, _rubberband),
+ delta: subV(movement, prevMovement)
+ });
+ } // Cleans the gesture. Can be overriden by gestures.
+ ;
+
+ _proto.clean = function clean() {
+ this.clearTimeout();
+ };
+
+ _createClass(Recognizer, [{
+ key: "config",
+ get: function get() {
+ return this.controller.config[this.stateKey];
+ } // Is the gesture enabled
+
+ }, {
+ key: "enabled",
+ get: function get() {
+ return this.controller.config.enabled && this.config.enabled;
+ } // Returns the controller state for a given gesture
+
+ }, {
+ key: "state",
+ get: function get() {
+ return this.controller.state[this.stateKey];
+ } // Returns the gesture handler
+
+ }, {
+ key: "handler",
+ get: function get() {
+ return this.controller.handlers[this.stateKey];
+ }
+ }, {
+ key: "transform",
+ get: function get() {
+ return this.config.transform || this.controller.config.transform || identity$1;
+ }
+ }]);
+
+ return Recognizer;
+}(); //--------------------------------------------
+
+function getIntentionalDisplacement(movement, threshold) {
+ if (Math.abs(movement) >= threshold) {
+ return sign(movement) * threshold;
+ } else {
+ return false;
+ }
+}
+
+function computeRubberband(bounds, _ref, _ref2) {
+ var Vx = _ref[0],
+ Vy = _ref[1];
+ var Rx = _ref2[0],
+ Ry = _ref2[1];
+ var _bounds$ = bounds[0],
+ X1 = _bounds$[0],
+ X2 = _bounds$[1],
+ _bounds$2 = bounds[1],
+ Y1 = _bounds$2[0],
+ Y2 = _bounds$2[1];
+ return [rubberbandIfOutOfBounds(Vx, X1, X2, Rx), rubberbandIfOutOfBounds(Vy, Y1, Y2, Ry)];
+}
+/**
+ * Returns a generic, common payload for all gestures from an event.
+ */
+
+
+function getGenericPayload(_ref3, event, isStartEvent) {
+ var state = _ref3.state;
+ var timeStamp = event.timeStamp,
+ _lastEventType = event.type;
+ var previous = state.values;
+ var elapsedTime = isStartEvent ? 0 : timeStamp - state.startTime;
+ return {
+ _lastEventType: _lastEventType,
+ event: event,
+ timeStamp: timeStamp,
+ elapsedTime: elapsedTime,
+ previous: previous
+ };
+}
+/**
+ * Returns the reinitialized start state for the gesture.
+ * Should be common to all gestures.
+ */
+
+function getStartGestureState(_ref4, values, event, initial) {
+ var state = _ref4.state,
+ config = _ref4.config,
+ stateKey = _ref4.stateKey,
+ args = _ref4.args,
+ transform = _ref4.transform;
+ var offset = state.offset;
+ var startTime = event.timeStamp;
+ var initialFn = config.initial,
+ bounds = config.bounds,
+ threshold = config.threshold; // the _threshold is the difference between a [0,0] offset converted to
+ // its new space coordinates
+
+ var _threshold = subV(transform(threshold), transform([0, 0])).map(Math.abs);
+
+ var _state = _extends({}, getInitialState()[stateKey], {
+ _active: true,
+ args: args,
+ values: values,
+ initial: initial != null ? initial : values,
+ _threshold: _threshold,
+ offset: offset,
+ lastOffset: offset,
+ startTime: startTime
+ });
+
+ return _extends({}, _state, {
+ _initial: valueFn(initialFn, _state),
+ _bounds: valueFn(bounds, _state)
+ });
+}
+
+/**
+ * The controller will keep track of the state for all gestures and also keep
+ * track of timeouts, and window listeners.
+ */
+
+var Controller = function Controller(classes) {
+ var _this = this;
+
+ this.classes = classes;
+ this.pointerIds = new Set(); // register Pointer Events pointerIds
+
+ this.touchIds = new Set(); // register Touch Events identifiers
+
+ this.supportsTouchEvents = supportsTouchEvents();
+ this.supportsGestureEvents = supportsGestureEvents();
+
+ this.bind = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ var bindings = {};
+
+ for (var _iterator = _createForOfIteratorHelperLoose(_this.classes), _step; !(_step = _iterator()).done;) {
+ var RecognizerClass = _step.value;
+ new RecognizerClass(_this, args).addBindings(bindings);
+ } // // we also add event bindings for native handlers
+
+
+ var _loop = function _loop(eventKey) {
+ addBindings(bindings, eventKey, function (event) {
+ return _this.nativeRefs[eventKey](_extends({}, _this.state.shared, {
+ event: event,
+ args: args
+ }));
+ });
+ };
+
+ for (var eventKey in _this.nativeRefs) {
+ _loop(eventKey);
+ }
+
+ if (_this.config.domTarget) {
+ // If config.domTarget is set we add event listeners to it and return the clean function.
+ return updateDomListeners(_this, bindings);
+ } else {
+ // If not, we return an object that contains gesture handlers mapped to react handler event keys.
+ return getPropsListener(_this, bindings);
+ }
+ };
+
+ this.effect = function () {
+ if (_this.config.domTarget) _this.bind();
+ return _this.clean;
+ };
+ /**
+ * Function ran on component unmount: cleans timeouts and removes dom listeners set by the bind function.
+ */
+
+
+ this.clean = function () {
+ var domTarget = getDomTargetFromConfig(_this.config);
+ var eventOptions = _this.config.eventOptions;
+ if (domTarget) removeListeners(domTarget, takeAll(_this.domListeners), eventOptions);
+ Object.values(_this.timeouts).forEach(clearTimeout);
+ clearAllWindowListeners(_this);
+ };
+
+ this.classes = classes;
+ this.state = getInitialState();
+ this.timeouts = {};
+ this.domListeners = [];
+ this.windowListeners = {};
+};
+function addEventIds(controller, event) {
+ if ('pointerId' in event) {
+ controller.pointerIds.add(event.pointerId);
+ } else {
+ controller.touchIds = new Set(getTouchIds(event));
+ }
+}
+function removeEventIds(controller, event) {
+ if ('pointerId' in event) {
+ controller.pointerIds["delete"](event.pointerId);
+ } else {
+ getTouchIds(event).forEach(function (id) {
+ return controller.touchIds["delete"](id);
+ });
+ }
+}
+function clearAllWindowListeners(controller) {
+ var _controller$config = controller.config,
+ el = _controller$config.window,
+ eventOptions = _controller$config.eventOptions,
+ windowListeners = controller.windowListeners;
+ if (!el) return;
+
+ for (var stateKey in windowListeners) {
+ var handlers = windowListeners[stateKey];
+ removeListeners(el, handlers, eventOptions);
+ }
+
+ controller.windowListeners = {};
+}
+function clearWindowListeners(_ref, stateKey, options) {
+ var config = _ref.config,
+ windowListeners = _ref.windowListeners;
+
+ if (options === void 0) {
+ options = config.eventOptions;
+ }
+
+ if (!config.window) return;
+ removeListeners(config.window, windowListeners[stateKey], options);
+ delete windowListeners[stateKey];
+}
+function updateWindowListeners(_ref2, stateKey, listeners, options) {
+ var config = _ref2.config,
+ windowListeners = _ref2.windowListeners;
+
+ if (listeners === void 0) {
+ listeners = [];
+ }
+
+ if (options === void 0) {
+ options = config.eventOptions;
+ }
+
+ if (!config.window) return;
+ removeListeners(config.window, windowListeners[stateKey], options);
+ addListeners(config.window, windowListeners[stateKey] = listeners, options);
+}
+
+function updateDomListeners(_ref3, bindings) {
+ var config = _ref3.config,
+ domListeners = _ref3.domListeners;
+ var domTarget = getDomTargetFromConfig(config);
+ if (!domTarget) throw new Error('domTarget must be defined');
+ var eventOptions = config.eventOptions;
+ removeListeners(domTarget, takeAll(domListeners), eventOptions);
+
+ for (var _i = 0, _Object$entries = Object.entries(bindings); _i < _Object$entries.length; _i++) {
+ var _Object$entries$_i = _Object$entries[_i],
+ key = _Object$entries$_i[0],
+ fns = _Object$entries$_i[1];
+ var name = key.slice(2).toLowerCase();
+ domListeners.push([name, chainFns.apply(void 0, fns)]);
+ }
+
+ addListeners(domTarget, domListeners, eventOptions);
+}
+
+function getPropsListener(_ref4, bindings) {
+ var config = _ref4.config;
+ var props = {};
+ var captureString = config.eventOptions.capture ? 'Capture' : '';
+
+ for (var _i2 = 0, _Object$entries2 = Object.entries(bindings); _i2 < _Object$entries2.length; _i2++) {
+ var _Object$entries2$_i = _Object$entries2[_i2],
+ event = _Object$entries2$_i[0],
+ fns = _Object$entries2$_i[1];
+ var fnsArray = Array.isArray(fns) ? fns : [fns];
+ var key = event + captureString;
+ props[key] = chainFns.apply(void 0, fnsArray);
+ }
+
+ return props;
+}
+
+function takeAll(array) {
+ if (array === void 0) {
+ array = [];
+ }
+
+ return array.splice(0, array.length);
+}
+
+function getDomTargetFromConfig(_ref5) {
+ var domTarget = _ref5.domTarget;
+ return domTarget && 'current' in domTarget ? domTarget.current : domTarget;
+}
+/**
+ * bindings is an object which keys match ReactEventHandlerKeys.
+ * Since a recognizer might want to bind a handler function to an event key already used by a previously
+ * added recognizer, we need to make sure that each event key is an array of all the functions mapped for
+ * that key.
+ */
+
+
+function addBindings(bindings, name, fn) {
+ if (!bindings[name]) bindings[name] = [];
+ bindings[name].push(fn);
+}
+
+function addListeners(el, listeners, options) {
+ if (listeners === void 0) {
+ listeners = [];
+ }
+
+ if (options === void 0) {
+ options = {};
+ }
+
+ for (var _iterator2 = _createForOfIteratorHelperLoose(listeners), _step2; !(_step2 = _iterator2()).done;) {
+ var _step2$value = _step2.value,
+ eventName = _step2$value[0],
+ eventHandler = _step2$value[1];
+ el.addEventListener(eventName, eventHandler, options);
+ }
+}
+
+function removeListeners(el, listeners, options) {
+ if (listeners === void 0) {
+ listeners = [];
+ }
+
+ if (options === void 0) {
+ options = {};
+ }
+
+ for (var _iterator3 = _createForOfIteratorHelperLoose(listeners), _step3; !(_step3 = _iterator3()).done;) {
+ var _step3$value = _step3.value,
+ eventName = _step3$value[0],
+ eventHandler = _step3$value[1];
+ el.removeEventListener(eventName, eventHandler, options);
+ }
+}
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * Utility hook called by all gesture hooks and that will be responsible for the internals.
+ *
+ * @param handlers
+ * @param classes
+ * @param config
+ * @param nativeHandlers - native handlers such as onClick, onMouseDown, etc.
+ */
+
+function useRecognizers(handlers, config, nativeHandlers) {
+ if (nativeHandlers === void 0) {
+ nativeHandlers = {};
+ }
+
+ var classes = resolveClasses(handlers);
+ var controller = react__WEBPACK_IMPORTED_MODULE_0___default.a.useMemo(function () {
+ return new Controller(classes);
+ }, []);
+ controller.config = config;
+ controller.handlers = handlers;
+ controller.nativeRefs = nativeHandlers;
+ react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(controller.effect, []); // @ts-ignore
+
+ if (controller.config.domTarget) return deprecationNoticeForDomTarget; // @ts-ignore
+
+ return controller.bind;
+}
+
+function deprecationNoticeForDomTarget() {
+ if (true) {
+ // eslint-disable-next-line no-console
+ console.warn("Deprecation notice: When the `domTarget` option is specified, you don't need to write `useEffect(bind, [bind])` anymore: event binding is now made handled internally to this lib.\n\nNext version won't return anything when `domTarget` is provided, therefore your code will break if you try to call `useEffect`.");
+ }
+}
+
+function resolveClasses(internalHandlers) {
+ var classes = new Set();
+ if (internalHandlers.drag) classes.add(RecognizersMap.get('drag'));
+ if (internalHandlers.wheel) classes.add(RecognizersMap.get('wheel'));
+ if (internalHandlers.scroll) classes.add(RecognizersMap.get('scroll'));
+ if (internalHandlers.move) classes.add(RecognizersMap.get('move'));
+ if (internalHandlers.pinch) classes.add(RecognizersMap.get('pinch'));
+ if (internalHandlers.hover) classes.add(RecognizersMap.get('hover'));
+ return classes;
+}
+
+/**
+ * @private
+ * Abstract class for coordinates-based gesture recongizers
+ */
+
+var CoordinatesRecognizer = /*#__PURE__*/function (_Recognizer) {
+ _inheritsLoose(CoordinatesRecognizer, _Recognizer);
+
+ function CoordinatesRecognizer() {
+ return _Recognizer.apply(this, arguments) || this;
+ }
+
+ var _proto = CoordinatesRecognizer.prototype;
+
+ /**
+ * Returns the real movement (without taking intentionality into account)
+ */
+ _proto.getInternalMovement = function getInternalMovement(values, state) {
+ return subV(values, state.initial);
+ }
+ /**
+ * In coordinates-based gesture, this function will detect the first intentional axis,
+ * lock the gesture axis if lockDirection is specified in the config, block the gesture
+ * if the first intentional axis doesn't match the specified axis in config.
+ */
+ ;
+
+ _proto.checkIntentionality = function checkIntentionality(_intentional, _movement) {
+ if (_intentional[0] === false && _intentional[1] === false) {
+ return {
+ _intentional: _intentional,
+ axis: this.state.axis
+ };
+ }
+
+ var _movement$map = _movement.map(Math.abs),
+ absX = _movement$map[0],
+ absY = _movement$map[1];
+
+ var axis = this.state.axis || (absX > absY ? 'x' : absX < absY ? 'y' : undefined);
+ if (!this.config.axis && !this.config.lockDirection) return {
+ _intentional: _intentional,
+ _blocked: false,
+ axis: axis
+ };
+ if (!axis) return {
+ _intentional: [false, false],
+ _blocked: false,
+ axis: axis
+ };
+ if (!!this.config.axis && axis !== this.config.axis) return {
+ _intentional: _intentional,
+ _blocked: true,
+ axis: axis
+ };
+ _intentional[axis === 'x' ? 1 : 0] = false;
+ return {
+ _intentional: _intentional,
+ _blocked: false,
+ axis: axis
+ };
+ };
+
+ _proto.getKinematics = function getKinematics(values, event) {
+ var state = this.getMovement(values);
+
+ if (!state._blocked) {
+ var dt = event.timeStamp - this.state.timeStamp;
+ Object.assign(state, calculateAllKinematics(state.movement, state.delta, dt));
+ }
+
+ return state;
+ };
+
+ _proto.mapStateValues = function mapStateValues(state) {
+ return {
+ xy: state.values,
+ vxvy: state.velocities
+ };
+ };
+
+ return CoordinatesRecognizer;
+}(Recognizer);
+
+var TAP_DISTANCE_THRESHOLD = 3;
+
+function persistEvent(event) {
+ 'persist' in event && typeof event.persist === 'function' && event.persist();
+}
+
+var DragRecognizer = /*#__PURE__*/function (_CoordinatesRecognize) {
+ _inheritsLoose(DragRecognizer, _CoordinatesRecognize);
+
+ function DragRecognizer() {
+ var _this;
+
+ _this = _CoordinatesRecognize.apply(this, arguments) || this;
+ _this.ingKey = 'dragging';
+ _this.stateKey = 'drag'; // TODO add back when setPointerCapture is widely wupported
+ // https://caniuse.com/#search=setPointerCapture
+
+ _this.setPointerCapture = function (event) {
+ // don't perform pointere capture when user wants to use touch events or
+ // when a pointerLockElement exists as this would throw an error
+ if (_this.config.useTouch || document.pointerLockElement) return;
+ var target = event.target,
+ pointerId = event.pointerId;
+
+ if (target && 'setPointerCapture' in target) {
+ // this would work in the DOM but doesn't with react three fiber
+ // target.addEventListener('pointermove', this.onDragChange, this.controller.config.eventOptions)
+ // @ts-expect-error
+ target.setPointerCapture(pointerId);
+ }
+
+ _this.updateGestureState({
+ _dragTarget: target,
+ _dragPointerId: pointerId
+ });
+ };
+
+ _this.releasePointerCapture = function () {
+ if (_this.config.useTouch || document.pointerLockElement) return;
+ var _this$state = _this.state,
+ _dragTarget = _this$state._dragTarget,
+ _dragPointerId = _this$state._dragPointerId;
+
+ if (_dragPointerId && _dragTarget && 'releasePointerCapture' in _dragTarget) {
+ // this would work in the DOM but doesn't with react three fiber
+ // target.removeEventListener('pointermove', this.onDragChange, this.controller.config.eventOptions)
+ if (!('hasPointerCapture' in _dragTarget) || _dragTarget.hasPointerCapture(_dragPointerId)) try {
+ _dragTarget.releasePointerCapture(_dragPointerId);
+ } catch (e) {}
+ }
+ };
+
+ _this.preventScroll = function (event) {
+ if (_this.state._dragPreventScroll && event.cancelable) {
+ event.preventDefault();
+ }
+ };
+
+ _this.getEventId = function (event) {
+ if (_this.config.useTouch) return event.changedTouches[0].identifier;
+ return event.pointerId;
+ };
+
+ _this.isValidEvent = function (event) {
+ // if we were using pointer events only event.isPrimary === 1 would suffice
+ return _this.state._pointerId === _this.getEventId(event);
+ };
+
+ _this.shouldPreventWindowScrollY = _this.config.experimental_preventWindowScrollY && _this.controller.supportsTouchEvents;
+
+ _this.setUpWindowScrollDetection = function (event) {
+ persistEvent(event); // we add window listeners that will prevent the scroll when the user has started dragging
+
+ updateWindowListeners(_this.controller, _this.stateKey, [['touchmove', _this.preventScroll], ['touchend', _this.clean.bind(_assertThisInitialized(_this))], ['touchcancel', _this.clean.bind(_assertThisInitialized(_this))]], {
+ passive: false
+ });
+
+ _this.setTimeout(_this.startDrag.bind(_assertThisInitialized(_this)), 250, event);
+ };
+
+ _this.setUpDelayedDragTrigger = function (event) {
+ _this.state._dragDelayed = true;
+ persistEvent(event);
+
+ _this.setTimeout(_this.startDrag.bind(_assertThisInitialized(_this)), _this.config.delay, event);
+ };
+
+ _this.setStartState = function (event) {
+ var values = getPointerEventValues(event, _this.transform);
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event), getGenericPayload(_assertThisInitialized(_this), event, true), {
+ _pointerId: _this.getEventId(event)
+ }));
+
+ _this.updateGestureState(_this.getMovement(values));
+ };
+
+ _this.onDragStart = function (event) {
+ addEventIds(_this.controller, event);
+ if (!_this.enabled || _this.state._active) return;
+
+ _this.setStartState(event);
+
+ _this.setPointerCapture(event);
+
+ if (_this.shouldPreventWindowScrollY) _this.setUpWindowScrollDetection(event);else if (_this.config.delay > 0) _this.setUpDelayedDragTrigger(event);else _this.startDrag(event, true); // we pass the values to the startDrag event
+ };
+
+ _this.onDragChange = function (event) {
+ if ( // if the gesture was canceled or
+ _this.state.canceled || // if onDragStart wasn't fired or
+ !_this.state._active || // if the event pointerId doesn't match the one that initiated the drag
+ !_this.isValidEvent(event) || // if the event has the same timestamp as the previous event
+ // note that checking type equality is ONLY for tests ¯\_(ツ)_/¯
+ _this.state._lastEventType === event.type && event.timeStamp === _this.state.timeStamp) return;
+ var values;
+
+ if (document.pointerLockElement) {
+ var movementX = event.movementX,
+ movementY = event.movementY;
+ values = addV(_this.transform([movementX, movementY]), _this.state.values);
+ } else values = getPointerEventValues(event, _this.transform);
+
+ var kinematics = _this.getKinematics(values, event); // if startDrag hasn't fired
+
+
+ if (!_this.state._dragStarted) {
+ // If the gesture isn't active then respond to the event only if
+ // it's been delayed via the `delay` option, in which case start
+ // the gesture immediately.
+ if (_this.state._dragDelayed) {
+ _this.startDrag(event);
+
+ return;
+ } // if the user wants to prevent vertical window scroll when user starts dragging
+
+
+ if (_this.shouldPreventWindowScrollY) {
+ if (!_this.state._dragPreventScroll && kinematics.axis) {
+ // if the user is dragging horizontally then we should allow the drag
+ if (kinematics.axis === 'x') {
+ _this.startDrag(event);
+ } else {
+ _this.state._active = false;
+ return;
+ }
+ } else return;
+ } else return;
+ }
+
+ var genericEventData = getGenericEventData(event);
+
+ _this.updateSharedState(genericEventData);
+
+ var genericPayload = getGenericPayload(_assertThisInitialized(_this), event); // This verifies if the drag can be assimilated to a tap by checking
+ // if the real distance of the drag (ie not accounting for the threshold) is
+ // greater than the TAP_DISTANCE_THRESHOLD.
+
+ var realDistance = calculateDistance(kinematics._movement);
+ var _dragIsTap = _this.state._dragIsTap;
+ if (_dragIsTap && realDistance >= TAP_DISTANCE_THRESHOLD) _dragIsTap = false;
+
+ _this.updateGestureState(_extends({}, genericPayload, kinematics, {
+ _dragIsTap: _dragIsTap
+ }));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onDragEnd = function (event) {
+ removeEventIds(_this.controller, event); // if the event pointerId doesn't match the one that initiated the drag
+ // we don't want to end the drag
+
+ if (!_this.isValidEvent(event)) return;
+
+ _this.clean(); // if the gesture is no longer active (ie canceled)
+ // don't do anything
+
+
+ if (!_this.state._active) return;
+ _this.state._active = false;
+ var tap = _this.state._dragIsTap;
+ var _this$state$velocitie = _this.state.velocities,
+ vx = _this$state$velocitie[0],
+ vy = _this$state$velocitie[1];
+ var _this$state$movement = _this.state.movement,
+ mx = _this$state$movement[0],
+ my = _this$state$movement[1];
+ var _this$state$_intentio = _this.state._intentional,
+ ix = _this$state$_intentio[0],
+ iy = _this$state$_intentio[1];
+ var _this$config$swipeVel = _this.config.swipeVelocity,
+ svx = _this$config$swipeVel[0],
+ svy = _this$config$swipeVel[1];
+ var _this$config$swipeDis = _this.config.swipeDistance,
+ sx = _this$config$swipeDis[0],
+ sy = _this$config$swipeDis[1];
+ var sd = _this.config.swipeDuration;
+
+ var endState = _extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getMovement(_this.state.values));
+
+ var swipe = [0, 0];
+
+ if (endState.elapsedTime < sd) {
+ if (ix !== false && Math.abs(vx) > svx && Math.abs(mx) > sx) swipe[0] = sign(vx);
+ if (iy !== false && Math.abs(vy) > svy && Math.abs(my) > sy) swipe[1] = sign(vy);
+ }
+
+ _this.updateSharedState({
+ buttons: 0
+ });
+
+ _this.updateGestureState(_extends({}, endState, {
+ tap: tap,
+ swipe: swipe
+ }));
+
+ _this.fireGestureHandler(_this.config.filterTaps && tap === true);
+ };
+
+ _this.clean = function () {
+ _CoordinatesRecognize.prototype.clean.call(_assertThisInitialized(_this));
+
+ _this.state._dragStarted = false;
+
+ _this.releasePointerCapture();
+
+ clearWindowListeners(_this.controller, _this.stateKey);
+ };
+
+ _this.onCancel = function () {
+ if (_this.state.canceled) return;
+
+ _this.updateGestureState({
+ canceled: true,
+ _active: false
+ });
+
+ _this.updateSharedState({
+ buttons: 0
+ });
+
+ setTimeout(function () {
+ return _this.fireGestureHandler();
+ }, 0);
+ };
+
+ _this.onClick = function (event) {
+ if (!_this.state._dragIsTap) event.stopPropagation();
+ };
+
+ return _this;
+ }
+
+ var _proto = DragRecognizer.prototype;
+
+ _proto.startDrag = function startDrag(event, onDragIsStart) {
+ if (onDragIsStart === void 0) {
+ onDragIsStart = false;
+ }
+
+ // startDrag can happen after a timeout, so we need to check if the gesture is still active
+ // as the user might have lift up the pointer in between.
+ if ( // if the gesture isn't active (probably means)
+ !this.state._active || // if the drag has already started we should ignore subsequent attempts
+ this.state._dragStarted) return;
+ if (!onDragIsStart) this.setStartState(event);
+ this.updateGestureState({
+ _dragStarted: true,
+ _dragPreventScroll: true,
+ cancel: this.onCancel
+ });
+ this.clearTimeout();
+ this.fireGestureHandler();
+ };
+
+ _proto.addBindings = function addBindings$1(bindings) {
+ if (this.config.useTouch) {
+ addBindings(bindings, 'onTouchStart', this.onDragStart);
+
+ addBindings(bindings, 'onTouchMove', this.onDragChange); // this is needed for react-three-fiber
+
+
+ addBindings(bindings, 'onTouchEnd', this.onDragEnd);
+
+ addBindings(bindings, 'onTouchCancel', this.onDragEnd);
+ } else {
+ addBindings(bindings, 'onPointerDown', this.onDragStart);
+
+ addBindings(bindings, 'onPointerMove', this.onDragChange); // this is needed for react-three-fiber
+
+
+ addBindings(bindings, 'onPointerUp', this.onDragEnd);
+
+ addBindings(bindings, 'onPointerCancel', this.onDragEnd);
+ }
+
+ if (this.config.filterTaps) {
+ var handler = this.controller.config.eventOptions.capture ? 'onClick' : 'onClickCapture';
+
+ addBindings(bindings, handler, this.onClick);
+ }
+ };
+
+ return DragRecognizer;
+}(CoordinatesRecognizer);
+
+/**
+ * Inlined from https://github.com/alexreardon/memoize-one
+ */
+function memoizeOne(resultFn, isEqual) {
+ var lastThis;
+ var lastArgs = [];
+ var lastResult;
+ var calledOnce = false;
+
+ function memoized() {
+ for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+ newArgs[_key] = arguments[_key];
+ }
+
+ if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
+ return lastResult;
+ }
+
+ lastResult = resultFn.apply(this, newArgs);
+ calledOnce = true;
+ lastThis = this;
+ lastArgs = newArgs;
+ return lastResult;
+ }
+
+ return memoized;
+}
+
+/**
+ * Taken from https://github.com/FormidableLabs/react-fast-compare
+ *
+ * Dropped comments and ArrayBuffer handling
+ */
+function equal(a, b) {
+ if (a === b) return true;
+
+ if (a && b && typeof a == 'object' && typeof b == 'object') {
+ if (a.constructor !== b.constructor) return false;
+ var length, i, keys;
+
+ if (Array.isArray(a)) {
+ length = a.length;
+ if (length !== b.length) return false;
+
+ for (i = length; i-- !== 0;) {
+ if (!equal(a[i], b[i])) return false;
+ }
+
+ return true;
+ }
+
+ var it;
+
+ if (typeof Map === 'function' && a instanceof Map && b instanceof Map) {
+ if (a.size !== b.size) return false;
+ it = a.entries();
+
+ while (!(i = it.next()).done) {
+ if (!b.has(i.value[0])) return false;
+ }
+
+ it = a.entries();
+
+ while (!(i = it.next()).done) {
+ if (!equal(i.value[1], b.get(i.value[0]))) return false;
+ }
+
+ return true;
+ }
+
+ if (typeof Set === 'function' && a instanceof Set && b instanceof Set) {
+ if (a.size !== b.size) return false;
+ it = a.entries();
+
+ while (!(i = it.next()).done) {
+ if (!b.has(i.value[0])) return false;
+ }
+
+ return true;
+ }
+
+ if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+ if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+ if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+ keys = Object.keys(a);
+ length = keys.length;
+ if (length !== Object.keys(b).length) return false;
+
+ for (i = length; i-- !== 0;) {
+ if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+ }
+
+ if (typeof Element !== 'undefined' && a instanceof Element) return false;
+
+ for (i = length; i-- !== 0;) {
+ if (keys[i] === '_owner' && a.$$typeof) continue;
+ if (!equal(a[keys[i]], b[keys[i]])) return false;
+ }
+
+ return true;
+ } // true if both NaN, false otherwise — NaN !== NaN → true
+ // eslint-disable-next-line no-self-compare
+
+
+ return a !== a && b !== b;
+}
+
+function isEqual(a, b) {
+ try {
+ return equal(a, b);
+ } catch (error) {
+ if ((error.message || '').match(/stack|recursion/i)) {
+ // eslint-disable-next-line no-console
+ console.warn('react-fast-compare cannot handle circular refs');
+ return false;
+ }
+
+ throw error;
+ }
+}
+
+/**
+ * Drag hook.
+ *
+ * @param handler - the function fired every time the drag gesture updates
+ * @param [config={}] - the config object including generic options and drag options
+ */
+
+function useDrag(handler, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ RecognizersMap.set('drag', DragRecognizer);
+ var buildDragConfig = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+
+ if (!buildDragConfig.current) {
+ buildDragConfig.current = memoizeOne(_buildDragConfig, isEqual);
+ }
+
+ return useRecognizers({
+ drag: handler
+ }, buildDragConfig.current(config));
+}
+
+/**
+ * @private
+ * Abstract class for distance/angle-based gesture recongizers
+ */
+
+var DistanceAngleRecognizer = /*#__PURE__*/function (_Recognizer) {
+ _inheritsLoose(DistanceAngleRecognizer, _Recognizer);
+
+ function DistanceAngleRecognizer() {
+ return _Recognizer.apply(this, arguments) || this;
+ }
+
+ var _proto = DistanceAngleRecognizer.prototype;
+
+ _proto.getInternalMovement = function getInternalMovement(values, state) {
+ var prev_a = state.values[1]; // not be defined if ctrl+wheel is used for zoom only
+
+ var d = values[0],
+ _values$ = values[1],
+ a = _values$ === void 0 ? prev_a : _values$;
+ var delta_a = a - prev_a;
+ var next_turns = state.turns;
+ if (Math.abs(delta_a) > 270) next_turns += sign(delta_a);
+ return subV([d, a - 360 * next_turns], state.initial);
+ };
+
+ _proto.getKinematics = function getKinematics(values, event) {
+ var state = this.getMovement(values);
+ var turns = (values[1] - state._movement[1] - this.state.initial[1]) / 360;
+ var dt = event.timeStamp - this.state.timeStamp;
+
+ var _calculateAllKinemati = calculateAllKinematics(state.movement, state.delta, dt),
+ kinematics = _objectWithoutPropertiesLoose(_calculateAllKinemati, ["distance", "velocity"]);
+
+ return _extends({
+ turns: turns
+ }, state, kinematics);
+ };
+
+ _proto.mapStateValues = function mapStateValues(state) {
+ return {
+ da: state.values,
+ vdva: state.velocities
+ };
+ };
+
+ return DistanceAngleRecognizer;
+}(Recognizer);
+
+var ZOOM_CONSTANT = 7;
+var WEBKIT_DISTANCE_SCALE_FACTOR = 260;
+var PinchRecognizer = /*#__PURE__*/function (_DistanceAngleRecogni) {
+ _inheritsLoose(PinchRecognizer, _DistanceAngleRecogni);
+
+ function PinchRecognizer() {
+ var _this;
+
+ _this = _DistanceAngleRecogni.apply(this, arguments) || this;
+ _this.ingKey = 'pinching';
+ _this.stateKey = 'pinch';
+
+ _this.onPinchStart = function (event) {
+ addEventIds(_this.controller, event);
+ var touchIds = _this.controller.touchIds;
+ if (!_this.enabled) return;
+
+ if (_this.state._active) {
+ // check that the pointerIds that initiated the gesture
+ // are still enabled. This is useful for when the page
+ // loses track of the pointers (minifying gesture on iPad).
+ if (_this.state._pointerIds.every(function (id) {
+ return touchIds.has(id);
+ })) return; // something was wrong with the pointers but we let it go.
+ } // until we reach two fingers on the target don't react
+
+
+ if (touchIds.size < 2) return;
+
+ var _pointerIds = Array.from(touchIds).slice(0, 2);
+
+ var _getTwoTouchesEventVa = getTwoTouchesEventValues(event, _pointerIds, _this.transform),
+ values = _getTwoTouchesEventVa.values,
+ origin = _getTwoTouchesEventVa.origin;
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event), getGenericPayload(_assertThisInitialized(_this), event, true), {
+ _pointerIds: _pointerIds,
+ cancel: _this.onCancel,
+ origin: origin
+ }));
+
+ _this.updateGestureState(_this.getMovement(values));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onPinchChange = function (event) {
+ var _this$state = _this.state,
+ canceled = _this$state.canceled,
+ _active = _this$state._active;
+ if (canceled || !_active || // if the event has the same timestamp as the previous event
+ event.timeStamp === _this.state.timeStamp) return;
+ var genericEventData = getGenericEventData(event);
+
+ _this.updateSharedState(genericEventData);
+
+ try {
+ var _getTwoTouchesEventVa2 = getTwoTouchesEventValues(event, _this.state._pointerIds, _this.transform),
+ values = _getTwoTouchesEventVa2.values,
+ origin = _getTwoTouchesEventVa2.origin;
+
+ var kinematics = _this.getKinematics(values, event);
+
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), kinematics, {
+ origin: origin
+ }));
+
+ _this.fireGestureHandler();
+ } catch (e) {
+ _this.onPinchEnd(event);
+ }
+ };
+
+ _this.onPinchEnd = function (event) {
+ removeEventIds(_this.controller, event);
+ var pointerIds = getTouchIds(event); // if none of the lifted pointerIds is in the state pointerIds don't do anything
+
+ if (_this.state._pointerIds.every(function (id) {
+ return !pointerIds.includes(id);
+ })) return;
+
+ _this.clean();
+
+ if (!_this.state._active) return;
+
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getMovement(_this.state.values), {
+ _active: false
+ }));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onCancel = function () {
+ if (_this.state.canceled) return;
+
+ _this.updateGestureState({
+ _active: false,
+ canceled: true
+ });
+
+ setTimeout(function () {
+ return _this.fireGestureHandler();
+ }, 0);
+ };
+ /**
+ * PINCH WITH WEBKIT GESTURES
+ */
+
+
+ _this.onGestureStart = function (event) {
+ if (!_this.enabled) return;
+ event.preventDefault();
+ var values = getWebkitGestureEventValues(event, _this.transform);
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event), getGenericPayload(_assertThisInitialized(_this), event, true), {
+ origin: [event.clientX, event.clientY],
+ cancel: _this.onCancel
+ }));
+
+ _this.updateGestureState(_this.getMovement(values));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onGestureChange = function (event) {
+ var _this$state2 = _this.state,
+ canceled = _this$state2.canceled,
+ _active = _this$state2._active;
+ if (canceled || !_active) return;
+ event.preventDefault();
+ var genericEventData = getGenericEventData(event);
+
+ _this.updateSharedState(genericEventData); // this normalizes the values of the Safari's WebKitEvent by calculating
+ // the delta and then multiplying it by a constant.
+
+
+ var values = getWebkitGestureEventValues(event, _this.transform);
+ values[0] = (values[0] - _this.state.event.scale) * WEBKIT_DISTANCE_SCALE_FACTOR + _this.state.values[0];
+
+ var kinematics = _this.getKinematics(values, event);
+
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), kinematics, {
+ origin: [event.clientX, event.clientY]
+ }));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onGestureEnd = function (event) {
+ _this.clean();
+
+ if (!_this.state._active) return;
+
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getMovement(_this.state.values), {
+ _active: false,
+ origin: [event.clientX, event.clientY]
+ }));
+
+ _this.fireGestureHandler();
+ };
+ /**
+ * PINCH WITH WHEEL
+ */
+
+
+ _this.wheelShouldRun = function (event) {
+ return _this.enabled && event.ctrlKey;
+ };
+
+ _this.getWheelValuesFromEvent = function (event) {
+ var _getWheelEventValues = getWheelEventValues(event, _this.transform),
+ delta_d = _getWheelEventValues[1];
+
+ var _this$state$values = _this.state.values,
+ prev_d = _this$state$values[0],
+ prev_a = _this$state$values[1]; // ZOOM_CONSTANT is based on Safari trackpad natural zooming
+
+ var _delta_d = -delta_d * ZOOM_CONSTANT; // new distance is the previous state distance added to the delta
+
+
+ var d = prev_d + _delta_d;
+ var a = prev_a !== void 0 ? prev_a : 0;
+ return {
+ values: [d, a],
+ origin: [event.clientX, event.clientY],
+ delta: [_delta_d, a]
+ };
+ };
+
+ _this.onWheel = function (event) {
+ if (!_this.wheelShouldRun(event)) return;
+
+ _this.setTimeout(_this.onWheelEnd);
+
+ if (!_this.state._active) _this.onWheelStart(event);else _this.onWheelChange(event);
+ };
+
+ _this.onWheelStart = function (event) {
+ var _this$getWheelValuesF = _this.getWheelValuesFromEvent(event),
+ values = _this$getWheelValuesF.values,
+ delta = _this$getWheelValuesF.delta,
+ origin = _this$getWheelValuesF.origin;
+
+ if (event.cancelable) event.preventDefault();else if (true) {
+ // eslint-disable-next-line no-console
+ console.warn('To properly support zoom on trackpads, try using the `domTarget` option and `config.eventOptions.passive` set to `false`. This message will only appear in development mode.');
+ }
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event, _this.state.values), getGenericPayload(_assertThisInitialized(_this), event, true), {
+ offset: values,
+ delta: delta,
+ origin: origin
+ }));
+
+ _this.updateGestureState(_this.getMovement(values));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onWheelChange = function (event) {
+ if (event.cancelable) event.preventDefault();
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ var _this$getWheelValuesF2 = _this.getWheelValuesFromEvent(event),
+ values = _this$getWheelValuesF2.values,
+ origin = _this$getWheelValuesF2.origin,
+ delta = _this$getWheelValuesF2.delta;
+
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getKinematics(values, event), {
+ origin: origin,
+ delta: delta
+ }));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onWheelEnd = function () {
+ _this.clean();
+
+ if (!_this.state._active) return;
+ _this.state._active = false;
+
+ _this.updateGestureState(_this.getMovement(_this.state.values));
+
+ _this.fireGestureHandler();
+ };
+
+ return _this;
+ }
+
+ var _proto = PinchRecognizer.prototype;
+
+ _proto.addBindings = function addBindings$1(bindings) {
+ // Only try to use gesture events when they are supported and domTarget is set
+ // as React doesn't support gesture handlers.
+ if (this.controller.config.domTarget && !this.controller.supportsTouchEvents && this.controller.supportsGestureEvents) {
+ addBindings(bindings, 'onGestureStart', this.onGestureStart);
+
+ addBindings(bindings, 'onGestureChange', this.onGestureChange);
+
+ addBindings(bindings, 'onGestureEnd', this.onGestureEnd);
+ } else {
+ addBindings(bindings, 'onTouchStart', this.onPinchStart);
+
+ addBindings(bindings, 'onTouchMove', this.onPinchChange);
+
+ addBindings(bindings, 'onTouchEnd', this.onPinchEnd);
+
+ addBindings(bindings, 'onTouchCancel', this.onPinchEnd);
+
+ addBindings(bindings, 'onWheel', this.onWheel);
+ }
+ };
+
+ return PinchRecognizer;
+}(DistanceAngleRecognizer);
+
+/**
+ * Pinch hook.
+ *
+ * @param handler - the function fired every time the pinch gesture updates
+ * @param [config={}] - the config object including generic options and pinch options
+ */
+
+function usePinch(handler, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ RecognizersMap.set('pinch', PinchRecognizer);
+ var buildPinchConfig = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+
+ if (!buildPinchConfig.current) {
+ buildPinchConfig.current = memoizeOne(_buildPinchConfig, isEqual);
+ }
+
+ return useRecognizers({
+ pinch: handler
+ }, buildPinchConfig.current(config));
+}
+
+var WheelRecognizer = /*#__PURE__*/function (_CoordinatesRecognize) {
+ _inheritsLoose(WheelRecognizer, _CoordinatesRecognize);
+
+ function WheelRecognizer() {
+ var _this;
+
+ _this = _CoordinatesRecognize.apply(this, arguments) || this;
+ _this.ingKey = 'wheeling';
+ _this.stateKey = 'wheel';
+ _this.debounced = true;
+
+ _this.handleEvent = function (event) {
+ if (event.ctrlKey && 'pinch' in _this.controller.handlers) return;
+ if (!_this.enabled) return;
+
+ _this.setTimeout(_this.onEnd);
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ var values = addV(getWheelEventValues(event, _this.transform), _this.state.values);
+
+ if (!_this.state._active) {
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event, _this.state.values), getGenericPayload(_assertThisInitialized(_this), event, true)));
+
+ var movement = _this.getMovement(values);
+
+ var geometry = calculateAllGeometry(movement.delta);
+
+ _this.updateGestureState(movement);
+
+ _this.updateGestureState(geometry);
+ } else {
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getKinematics(values, event)));
+ }
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onEnd = function () {
+ _this.clean();
+
+ if (!_this.state._active) return;
+
+ var movement = _this.getMovement(_this.state.values);
+
+ _this.updateGestureState(movement);
+
+ _this.updateGestureState({
+ _active: false,
+ velocities: [0, 0],
+ velocity: 0
+ });
+
+ _this.fireGestureHandler();
+ };
+
+ return _this;
+ }
+
+ var _proto = WheelRecognizer.prototype;
+
+ _proto.addBindings = function addBindings$1(bindings) {
+ addBindings(bindings, 'onWheel', this.handleEvent);
+ };
+
+ return WheelRecognizer;
+}(CoordinatesRecognizer);
+
+/**
+ * Wheel hook.
+ *
+ * @param handler - the function fired every time the wheel gesture updates
+ * @param the config object including generic options and wheel options
+ */
+
+function useWheel(handler, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ RecognizersMap.set('wheel', WheelRecognizer);
+ var buildWheelConfig = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+
+ if (!buildWheelConfig.current) {
+ buildWheelConfig.current = memoizeOne(_buildWheelConfig, isEqual);
+ }
+
+ return useRecognizers({
+ wheel: handler
+ }, buildWheelConfig.current(config));
+}
+
+var MoveRecognizer = /*#__PURE__*/function (_CoordinatesRecognize) {
+ _inheritsLoose(MoveRecognizer, _CoordinatesRecognize);
+
+ function MoveRecognizer() {
+ var _this;
+
+ _this = _CoordinatesRecognize.apply(this, arguments) || this;
+ _this.ingKey = 'moving';
+ _this.stateKey = 'move';
+ _this.debounced = true;
+
+ _this.onMove = function (event) {
+ if (!_this.enabled) return;
+
+ _this.setTimeout(_this.onMoveEnd);
+
+ if (!_this.state._active) _this.onMoveStart(event);else _this.onMoveChange(event);
+ };
+
+ _this.onMoveStart = function (event) {
+ _this.updateSharedState(getGenericEventData(event));
+
+ var values = getPointerEventValues(event, _this.transform);
+
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event), getGenericPayload(_assertThisInitialized(_this), event, true)));
+
+ _this.updateGestureState(_this.getMovement(values));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onMoveChange = function (event) {
+ _this.updateSharedState(getGenericEventData(event));
+
+ var values = getPointerEventValues(event, _this.transform);
+
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getKinematics(values, event)));
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onMoveEnd = function () {
+ _this.clean();
+
+ if (!_this.state._active) return;
+ var values = _this.state.values;
+
+ _this.updateGestureState(_this.getMovement(values));
+
+ _this.updateGestureState({
+ velocities: [0, 0],
+ velocity: 0,
+ _active: false
+ });
+
+ _this.fireGestureHandler();
+ };
+
+ _this.hoverTransform = function () {
+ return _this.controller.config.hover.transform || _this.controller.config.transform;
+ };
+
+ _this.onPointerEnter = function (event) {
+ _this.controller.state.shared.hovering = true;
+ if (!_this.controller.config.enabled) return;
+
+ if (_this.controller.config.hover.enabled) {
+ var values = getPointerEventValues(event, _this.hoverTransform());
+
+ var state = _extends({}, _this.controller.state.shared, _this.state, getGenericPayload(_assertThisInitialized(_this), event, true), {
+ args: _this.args,
+ values: values,
+ active: true,
+ hovering: true
+ });
+
+ _this.controller.handlers.hover(_extends({}, state, _this.mapStateValues(state)));
+ }
+
+ if ('move' in _this.controller.handlers) _this.onMoveStart(event);
+ };
+
+ _this.onPointerLeave = function (event) {
+ _this.controller.state.shared.hovering = false;
+ if ('move' in _this.controller.handlers) _this.onMoveEnd();
+ if (!_this.controller.config.hover.enabled) return;
+ var values = getPointerEventValues(event, _this.hoverTransform());
+
+ var state = _extends({}, _this.controller.state.shared, _this.state, getGenericPayload(_assertThisInitialized(_this), event), {
+ args: _this.args,
+ values: values,
+ active: false
+ });
+
+ _this.controller.handlers.hover(_extends({}, state, _this.mapStateValues(state)));
+ };
+
+ return _this;
+ }
+
+ var _proto = MoveRecognizer.prototype;
+
+ _proto.addBindings = function addBindings$1(bindings) {
+ if ('move' in this.controller.handlers) {
+ addBindings(bindings, 'onPointerMove', this.onMove);
+ }
+
+ if ('hover' in this.controller.handlers) {
+ addBindings(bindings, 'onPointerEnter', this.onPointerEnter);
+
+ addBindings(bindings, 'onPointerLeave', this.onPointerLeave);
+ }
+ };
+
+ return MoveRecognizer;
+}(CoordinatesRecognizer);
+
+/**
+ * Move hook.
+ *
+ * @param handler - the function fired every time the move gesture updates
+ * @param [config={}] - the config object including generic options and move options
+ */
+
+function useMove(handler, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ RecognizersMap.set('move', MoveRecognizer);
+ var buildMoveConfig = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+
+ if (!buildMoveConfig.current) {
+ buildMoveConfig.current = memoizeOne(_buildMoveConfig, isEqual);
+ }
+
+ return useRecognizers({
+ move: handler
+ }, buildMoveConfig.current(config));
+}
+
+/**
+ * Hover hook.
+ *
+ * @param handler - the function fired every time the hover gesture updates
+ * @param [config={}] - the config object including generic options and hover options
+ */
+
+function useHover(handler, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ RecognizersMap.set('hover', MoveRecognizer);
+ var buildHoverConfig = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+
+ if (!buildHoverConfig.current) {
+ buildHoverConfig.current = memoizeOne(_buildHoverConfig, isEqual);
+ }
+
+ return useRecognizers({
+ hover: handler
+ }, buildHoverConfig.current(config));
+}
+
+var ScrollRecognizer = /*#__PURE__*/function (_CoordinatesRecognize) {
+ _inheritsLoose(ScrollRecognizer, _CoordinatesRecognize);
+
+ function ScrollRecognizer() {
+ var _this;
+
+ _this = _CoordinatesRecognize.apply(this, arguments) || this;
+ _this.ingKey = 'scrolling';
+ _this.stateKey = 'scroll';
+ _this.debounced = true;
+
+ _this.handleEvent = function (event) {
+ if (!_this.enabled) return;
+
+ _this.clearTimeout();
+
+ _this.setTimeout(_this.onEnd);
+
+ var values = getScrollEventValues(event, _this.transform);
+
+ _this.updateSharedState(getGenericEventData(event));
+
+ if (!_this.state._active) {
+ _this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event, _this.state.values), getGenericPayload(_assertThisInitialized(_this), event, true)));
+
+ var movementDetection = _this.getMovement(values);
+
+ var geometry = calculateAllGeometry(movementDetection.delta);
+
+ _this.updateGestureState(movementDetection);
+
+ _this.updateGestureState(geometry);
+ } else {
+ _this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getKinematics(values, event)));
+ }
+
+ _this.fireGestureHandler();
+ };
+
+ _this.onEnd = function () {
+ _this.clean();
+
+ if (!_this.state._active) return;
+
+ _this.updateGestureState(_extends({}, _this.getMovement(_this.state.values), {
+ _active: false,
+ velocities: [0, 0],
+ velocity: 0
+ }));
+
+ _this.fireGestureHandler();
+ };
+
+ return _this;
+ }
+
+ var _proto = ScrollRecognizer.prototype;
+
+ _proto.addBindings = function addBindings$1(bindings) {
+ addBindings(bindings, 'onScroll', this.handleEvent);
+ };
+
+ return ScrollRecognizer;
+}(CoordinatesRecognizer);
+
+/**
+ * Scroll hook.
+ *
+ * @param handler - the function fired every time the scroll gesture updates
+ * @param [config={}] - the config object including generic options and scroll options
+ */
+
+function useScroll(handler, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ RecognizersMap.set('scroll', ScrollRecognizer);
+ var buildScrollConfig = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+
+ if (!buildScrollConfig.current) {
+ buildScrollConfig.current = memoizeOne(_buildScrollConfig, isEqual);
+ }
+
+ return useRecognizers({
+ scroll: handler
+ }, buildScrollConfig.current(config));
+}
+
+var RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/;
+
+function sortHandlers(handlers) {
+ var _native = {};
+ var handle = {};
+ var actions = new Set();
+
+ for (var key in handlers) {
+ if (RE_NOT_NATIVE.test(key)) {
+ actions.add(RegExp.lastMatch);
+ handle[key] = handlers[key];
+ } else {
+ _native[key] = handlers[key];
+ }
+ }
+
+ return [handle, _native, actions];
+}
+/**
+ * @public
+ *
+ * The most complete gesture hook, allowing support for multiple gestures.
+ *
+ * @param {Handlers} handlers - an object with on[Gesture] keys containg gesture handlers
+ * @param {UseGestureConfig} [config={}] - the full config object
+ * @returns {(...args: any[]) => HookReturnType<Config>}
+ */
+
+
+function useGesture(_handlers, config) {
+ if (config === void 0) {
+ config = {};
+ }
+
+ var _sortHandlers = sortHandlers(_handlers),
+ handlers = _sortHandlers[0],
+ nativeHandlers = _sortHandlers[1],
+ actions = _sortHandlers[2];
+
+ RecognizersMap.set('drag', DragRecognizer);
+ RecognizersMap.set('hover', MoveRecognizer);
+ RecognizersMap.set('move', MoveRecognizer);
+ RecognizersMap.set('pinch', PinchRecognizer);
+ RecognizersMap.set('scroll', ScrollRecognizer);
+ RecognizersMap.set('wheel', WheelRecognizer);
+ var mergedConfig = buildComplexConfig(config, actions);
+ var internalHandlers = {};
+ if (actions.has('onDrag')) internalHandlers.drag = includeStartEndHandlers(handlers, 'onDrag');
+ if (actions.has('onWheel')) internalHandlers.wheel = includeStartEndHandlers(handlers, 'onWheel');
+ if (actions.has('onScroll')) internalHandlers.scroll = includeStartEndHandlers(handlers, 'onScroll');
+ if (actions.has('onMove')) internalHandlers.move = includeStartEndHandlers(handlers, 'onMove');
+ if (actions.has('onPinch')) internalHandlers.pinch = includeStartEndHandlers(handlers, 'onPinch');
+ if (actions.has('onHover')) internalHandlers.hover = handlers.onHover;
+ return useRecognizers(internalHandlers, mergedConfig, nativeHandlers);
+}
+
+function includeStartEndHandlers(handlers, handlerKey) {
+ var startKey = handlerKey + 'Start';
+ var endKey = handlerKey + 'End';
+
+ var fn = function fn(state) {
+ var memo = undefined;
+ if (state.first && startKey in handlers) handlers[startKey](state);
+ if (handlerKey in handlers) memo = handlers[handlerKey](state);
+ if (state.last && endKey in handlers) handlers[endKey](state);
+ return memo;
+ };
+
+ return fn;
+}
+
+
+//# sourceMappingURL=reactusegesture.esm.js.map
+
+
+/***/ }),
+
+/***/ "./src/components/pattern-preview/canvas.js":
+/*!**************************************************!*\
+ !*** ./src/components/pattern-preview/canvas.js ***!
+ \**************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+function Canvas(_ref) {
+ var html = _ref.html;
+ var style = {
+ width: '100%',
+ height: '50vh',
+ minHeight: '600px',
+ overflowY: 'auto'
+ };
+ var extraIframeStyles = // @todo - Should we keep the TT1 style? Load css from a local file?
+ '<link rel="stylesheet" id="twenty-twenty-one-style-css" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css?ver=1.2" media="all" />' + '<style>body{pointer-events:none;display: flex;align-items: center;justify-content: center;min-height: 100vh;} body > div {width: 100%}</style>';
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__["__unstableIframe"], {
+ className: "pattern-preview__viewport-iframe",
+ style: style,
+ headHTML: window.__editorStyles.html + extraIframeStyles
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
+ dangerouslySetInnerHTML: {
+ __html: html
+ }
+ })));
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (Canvas);
+
+/***/ }),
+
+/***/ "./src/components/pattern-preview/drag-handle.js":
+/*!*******************************************************!*\
+ !*** ./src/components/pattern-preview/drag-handle.js ***!
+ \*******************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "../../../../node_modules/@babel/runtime/helpers/extends.js");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_use_gesture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-use-gesture */ "./node_modules/react-use-gesture/dist/reactusegesture.esm.js");
+/* harmony import */ var _wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/keycodes */ "@wordpress/keycodes");
+/* harmony import */ var _wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4__);
+
+
+
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+function DragHandle(_ref) {
+ var label = _ref.label,
+ className = _ref.className,
+ onDragChange = _ref.onDragChange,
+ _ref$direction = _ref.direction,
+ direction = _ref$direction === void 0 ? 'left' : _ref$direction,
+ props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, ["label", "className", "onDragChange", "direction"]);
+
+ var dragGestures = Object(react_use_gesture__WEBPACK_IMPORTED_MODULE_3__["useDrag"])(function (_ref2) {
+ var delta = _ref2.delta,
+ dragging = _ref2.dragging;
+ var multiplier = direction === 'left' ? -2 : 2;
+
+ if (dragging) {
+ onDragChange(delta[0] * multiplier);
+ }
+ });
+
+ var onKeyDown = function onKeyDown(event) {
+ var keyCode = event.keyCode;
+
+ if (direction === 'left' && keyCode === _wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4__["LEFT"] || direction === 'right' && keyCode === _wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4__["RIGHT"]) {
+ onDragChange(20);
+ } else if (direction === 'left' && keyCode === _wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4__["RIGHT"] || direction === 'right' && keyCode === _wordpress_keycodes__WEBPACK_IMPORTED_MODULE_4__["LEFT"]) {
+ onDragChange(-20);
+ }
+ };
+
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])("div", {
+ className: "pattern-preview__drag-handle ".concat(className)
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])("button", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+ className: "pattern-preview__drag-handle-button",
+ "aria-label": label
+ }, props, {
+ onKeyDown: onKeyDown
+ }, dragGestures())));
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (DragHandle);
+
+/***/ }),
+
+/***/ "./src/components/pattern-preview/index.js":
+/*!*************************************************!*\
+ !*** ./src/components/pattern-preview/index.js ***!
+ \*************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
+/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-preview/canvas.js");
+/* harmony import */ var _drag_handle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./drag-handle */ "./src/components/pattern-preview/drag-handle.js");
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+/* eslint-disable jsx-a11y/anchor-is-valid -- These are just placeholders. */
+
+var INITIAL_WIDTH = 1200;
+
+function PatternPreview(_ref) {
+ var blockContent = _ref.blockContent;
+ var instanceId = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_3__["useInstanceId"])(PatternPreview);
+
+ var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(window.innerWidth < INITIAL_WIDTH ? window.innerWidth : INITIAL_WIDTH),
+ _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
+ width = _useState2[0],
+ setWidth = _useState2[1];
+
+ var onDragChange = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(function (delta) {
+ setWidth(function (value) {
+ return value + delta;
+ });
+ }, [setWidth]);
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+ className: "pattern-preview__viewport",
+ style: {
+ width: width
+ }
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_drag_handle__WEBPACK_IMPORTED_MODULE_6__["default"], {
+ label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Drag to resize', 'wporg-patterns'),
+ className: "is-left",
+ onDragChange: onDragChange,
+ direction: "left",
+ "aria-describedby": "pattern-preview__resize-help-".concat(instanceId)
+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_5__["default"], {
+ html: blockContent
+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_drag_handle__WEBPACK_IMPORTED_MODULE_6__["default"], {
+ label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Drag to resize', 'wporg-patterns'),
+ className: "is-right",
+ onDragChange: onDragChange,
+ direction: "right",
+ "aria-describedby": "pattern-preview__resize-help-".concat(instanceId)
+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["VisuallyHidden"], {
+ id: "pattern-preview__resize-help-".concat(instanceId),
+ className: "pattern-preview__resize-help"
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Use left and right arrow keys to resize the preview.', 'wporg-patterns'))));
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (PatternPreview);
+
+/***/ }),
+
+/***/ "./src/index.js":
+/*!**********************!*\
+ !*** ./src/index.js ***!
+ \**********************/
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _components_pattern_preview__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/pattern-preview */ "./src/components/pattern-preview/index.js");
+
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+ // Load the preview into any awaiting preview container.
+
+var previewContainers = document.querySelectorAll('.pattern-preview__container');
+
+var _loop = function _loop(i) {
+ var container = previewContainers[i];
+ var blockContent = JSON.parse(decodeURIComponent(container.innerText)); // Use `wp.blocks.parse` to convert HTML to block objects (for use in editor), if needed.
+
+ Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_pattern_preview__WEBPACK_IMPORTED_MODULE_1__["default"], {
+ blockContent: blockContent
+ }), container, function () {
+ // This callback is called after the render to unhide the container.
+ container.hidden = false;
+ });
+};
+
+for (var i = 0; i < previewContainers.length; i++) {
+ _loop(i);
+}
+
+/***/ }),
+
+/***/ "@wordpress/block-editor":
+/*!*************************************!*\
+ !*** external ["wp","blockEditor"] ***!
+ \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["blockEditor"]; }());
+
+/***/ }),
+
+/***/ "@wordpress/components":
+/*!************************************!*\
+ !*** external ["wp","components"] ***!
+ \************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["components"]; }());
+
+/***/ }),
+
+/***/ "@wordpress/compose":
+/*!*********************************!*\
+ !*** external ["wp","compose"] ***!
+ \*********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["compose"]; }());
+
+/***/ }),
+
+/***/ "@wordpress/element":
+/*!*********************************!*\
+ !*** external ["wp","element"] ***!
+ \*********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["element"]; }());
+
+/***/ }),
+
+/***/ "@wordpress/i18n":
+/*!******************************!*\
+ !*** external ["wp","i18n"] ***!
+ \******************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["i18n"]; }());
+
+/***/ }),
+
+/***/ "@wordpress/keycodes":
+/*!**********************************!*\
+ !*** external ["wp","keycodes"] ***!
+ \**********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["keycodes"]; }());
+
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+ !*** external "React" ***!
+ \************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["React"]; }());
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=index.js.map
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_componentsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -20,7 +20,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @import "../../../wporg/css/components/widget-area";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "../../../wporg/css/components/wporg-footer";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "../../../wporg/css/components/wporg-header";
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "pattern-creator";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@import "pattern-preview";
+@import "pattern";
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "search-form";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "section-heading";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "site-title";
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patterncreatorscss"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-creator.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-creator.scss 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-creator.scss 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,16 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-body.single-wporg-pattern {
- box-sizing: border-box;
- font-size: 14px;
- font-weight: 400;
- line-height: 1.2;
-
- .site-content {
- margin: auto;
- max-width: none;
- padding: 0;
- }
-
- .site-main {
- max-width: $size__wide-width;
- }
-}
</del></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternpreviewscss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-preview.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-preview.scss (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-preview.scss 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,80 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pattern-preview__container {
+ padding: 2rem 0 0;
+ background: $color-gray-light-200;
+}
+
+.pattern-preview__viewport {
+ position: relative;
+ margin: 0 auto;
+ padding: 0 20px;
+ max-width: 100vw;
+ min-width: 320px;
+
+ .pattern-preview__viewport-iframe {
+ background: $color-white;
+ border: 1px solid $color-gray-light-400;
+ vertical-align: middle;
+ max-width: 100vw;
+ }
+
+ &:focus-within .pattern-preview__resize-help {
+ clip: initial;
+ clip-path: initial;
+ height: initial;
+ margin: initial;
+ overflow: initial;
+ width: initial;
+ bottom: -1rem;
+ left: 20px;
+ right: 20px;
+ padding: 8px 16px;
+ background: $color-white;
+ border-radius: 2px;
+ border: 1px solid $color-gray-light-600;
+ text-align: center;
+ }
+}
+
+.pattern-preview__drag-handle {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 20px;
+}
+
+.pattern-preview__drag-handle.is-left {
+ left: 0;
+}
+
+.pattern-preview__drag-handle.is-right {
+ right: 0;
+}
+
+.pattern-preview__drag-handle-button {
+ $height: 100px;
+ position: absolute;
+ top: calc(50% - #{$height/2});
+ left: 6px;
+ padding: 0;
+ width: 8px;
+ height: $height;
+ appearance: none;
+ cursor: grab;
+ outline: none;
+ background: $color-gray-200;
+ border-radius: 99999px;
+ border: none;
+
+ &:hover {
+ background: $color-gray-300;
+ }
+
+ &:active {
+ cursor: grabbing;
+ background: $color-gray-400;
+ }
+
+ &:focus {
+ box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
+ }
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternscss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,57 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+body.single-wporg-pattern {
+ box-sizing: border-box;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.2;
+
+ .site-content {
+ margin: auto;
+ max-width: none;
+ padding: 0;
+ }
+
+ .entry-header {
+ max-width: $size__site-main;
+ padding: 2rem 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ .entry-title {
+ margin-top: 0;
+ line-height: 1.2;
+ }
+ }
+
+ .pattern-actions {
+ display: flex;
+ align-items: stretch;
+
+ button + button {
+ margin-left: 2em;
+ }
+ }
+
+ .entry-content {
+ max-width: $size__site-main;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .pattern__meta {
+ padding: 2rem 0;
+ background: $color-gray-light-200;
+
+ > div {
+ max-width: $size__site-main;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .pattern-preview__report {
+ text-align: right;
+ }
+ }
+
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsssettings_colorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/settings/_colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/settings/_colors.scss 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/settings/_colors.scss 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -32,6 +32,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $color-error-red: #c92c2c;
</span><span class="cx" style="display: block; padding: 0 10px"> $color-alert-red: #d94f4f;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$color-black: #000;
+$color-white: #fff;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $color-accent-blue-shade4: #006899;
</span><span class="cx" style="display: block; padding: 0 10px"> $color-accent-green-shade1: #399648;
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscssstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@charset "UTF-8";[class*=col-]{margin:inherit}.row{display:flex;flex-direction:row;flex-wrap:wrap}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}}.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row.gutters>.row{margin-left:0}}.row.gutters>.row>[class*=col-]{margin-left:2%}@media (max-width:768px){.row.gutters>.row>[class*=col-]{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.3333333333%}.offset-1{margin-left:8.3333333333%}.col-2{width:16.6666666667%}.offset-2{margin-left:16.6666666667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.3333333333%}.offset-4{margin-left:33.3333333333%}.col-5{width:41.6666666667%}.offset-5{margin-left:41.6666666667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.3333333333%}.offset-7{
margin-left:58.3333333333%}.col-8{width:66.6666666667%}.offset-8{margin-left:66.6666666667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.3333333333%}.offset-10{margin-left:83.3333333333%}.col-11{width:91.6666666667%}.offset-11{margin-left:91.6666666667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:6.33333%}.gutters>.col-1:nth-child(n+13){margin-top:2%}.gutters>.offset-1{margin-left:10.33333%!important}.gutters>.col-2{width:14.66667%}.gutters>.col-2:nth-child(n+7){margin-top:2%}.gutters>.offset-2{margin-left:18.66667%!important}.gutters>.col-3{width:23%}.gutters>.col-3:nth-child(n+5){margin-top:2%}.gutters>.offset-3{margin-left:27%!important}.gutters>.col-4{width:31.33333%}.gutters>.col-4:nth-child(n+4){margin-top:2%}.gutters>.offset-4{margin-left:35.33333%!important}.gutters>.col-5{width:39.66667%}.gutters>.offset-5{margin-left:43.66667%!important}.gutters>.col-6{width:48%}.gutters>.col-6:nth-chil
d(n+3){margin-top:2%}.gutters>.offset-6{margin-left:52%!important}.gutters>.col-7{width:56.33333%}.gutters>.offset-7{margin-left:60.33333%!important}.gutters>.col-8{width:64.66667%}.gutters>.offset-8{margin-left:68.66667%!important}.gutters>.col-9{width:73%}.gutters>.offset-9{margin-left:77%!important}.gutters>.col-10{width:81.33333%}.gutters>.offset-10{margin-left:85.33333%!important}.gutters>.col-11{width:89.66667%}.gutters>.offset-11{margin-left:93.66667%!important}.gutters>.col-12{width:98%}.gutters>.offset-12{margin-left:102%!important}@media (max-width:768px){[class*=" offset-"],[class^=offset-]{margin-left:0}}.first{order:-1}.last{order:1}@media (max-width:768px){.row [class*=col-]{margin-left:0;width:100%}.row.gutters [class*=col-]{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,
.push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}@media (max-width:768px){.align-left-sm{justify-content:flex-start}}.float-right{float:right}.float-left{float:left}@media (max-width:768px){.float-left,.float-right{float:none}}.fixed{position:fixed;top:0;left:0;z-index:100;width:100%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;he
ight:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webki
t-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}optgroup{font-weight:700}table{border-spacing:0}td,th{padding:0}p{margin:1rem 0}cite,dfn,em,i{font-style:italic}blockquote{margin:0 1.5rem}address{margin:0 0 1.5rem}pre{background:#eee;font-family:Courier\ 10 Pitch,Courier,monospace;line-height:1.6;margin-bottom:1.6rem;max-width:100%;overflow:auto;padding:1.6rem}code,kbd,pre,tt,var{font-size:15px;font-size:.9375rem}code,kbd,tt,var{font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{background:#fff9c0;text-decoration:none}big{font-size:125%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:#fff}blockquote,q{quotes:"" "&quo
t;}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote{border-left:2px solid #767676;color:#767676;margin:1rem 0;padding-left:.8rem}blockquote cite{font-size:12.8px;font-size:.8rem}figure{margin:0}hr{background-color:#eee;border:0;height:2px;margin:5rem auto}img{height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Open Sans,sans-serif;clear:both;line-height:1.5;margin:2rem 0 1rem}.h1,h1{font-size:39.062px;font-size:2.44140625rem}.h1,.h2,h1,h2{font-weight:300}.h2,h2{font-size:31.25px;font-size:1.953125rem}.h3,h3{font-size:25px;font-size:1.5625rem;font-weight:400}.h4,h4{font-size:20px;font-size:1.25rem;color:#32373c;font-weight:600;padding:0}.h5,h5{font-size:16px;font-size:1rem;letter-spacing:.16px;letter-spacing:.01rem}.h5,.h6,h5,h6{font-weight:600;text-transform:uppercase}.h6,h6{font-size:12.8px;font-size:.8rem;letter-spacing:.8px}a{color:#0073aa;text-decoration:none}a:active,a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:
active,a:hover{outline:0}li>a,p a{text-decoration:underline}li>a:hover,p a:hover{color:#d54e21}ol,ul{margin:0 0 1.5em 1.5em;padding:0}ul{list-style:square}ol{list-style:decimal}ol.unmarked-list,ul.unmarked-list{list-style:none;padding-left:0}li>ol,li>ul{margin-bottom:0}dt{font-weight:700}dd{margin:0 1.5em 1.5em}table{border:1px solid #eee;border-collapse:collapse;font-size:12.8px;font-size:.8rem;margin:0 0 1rem;padding:0;width:100%}table thead{background:#32373c;color:#fff}table td,table th{border:1px solid #eee;font-weight:400;margin:0;padding:.4rem;text-align:left;vertical-align:top}table tbody tr:nth-child(2n){background:#f7f7f7}html{font-size:100%}body,button,input,select,textarea{color:#32373c;font-family:Open Sans,sans-serif;font-size:100%;line-height:1.5}@media screen and (min-width:737px){html{font-size:1.125rem}}.custom-select{display:inline-block;box-sizing:border-box;padding:.5rem 2rem .5rem .8rem;width:auto;font-size:1em;line-height:1.3;border:1px solid #6c77
82;box-shadow:none;border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.custom-select::-ms-expand{display:none}.custom-select:focus{box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.custom-select option{font-weight:400}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:700
;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.site-content[tabindex="-1"]:focus{outline:0}.no-js .hide-if-no-js{display:none}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}@media screen and (max-width:480px){.alignleft,.alignright{display:block;float:none;margin-left:auto;margin-right:auto}}.button,.button-primary,.button-secondary,.plugin-upload-form .button-primary{border:1px solid;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:12.8px;font-size:.8rem;height:25px;height:1.5625rem;line-height:1;margin:0;padding:0 .8rem;text-decoration:none;white-space:nowrap;-webkit-appearance:none}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0;pa
dding:0}.button-group.button-xl .button,.button.button-xl{font-size:16px;font-size:1rem;height:39.062px;height:2.44140625rem;line-height:1;padding:0 1.5rem}.button-group.button-large .button,.button.button-large{height:31.25px;height:1.953125rem;line-height:1;padding:0 1rem}.button-group.button-small .button,.button.button-small{font-size:10.24px;font-size:.64rem;height:20px;height:1.25rem;line-height:1;padding:0 .5rem}a.button,a.button-primary,a.button-secondary{line-height:25px;line-height:1.5625rem}.button-group.button-large a.button,a.button.button-large{line-height:31.25px;line-height:1.953125rem}.button-group.button-xl a.button,a.button.button-xl{line-height:39.062px;line-height:2.44140625rem}.button-group.button-small a.button,a.button.button-small{line-height:20px;line-height:1.25rem}.button:active,.button:focus{outline:none}.button.hidden{display:none}input[type=reset],input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background:none;border:none;box-s
hadow:none;padding:0 2px 1px;width:auto}.button,.button-secondary,.button:visited{background:#f7f7f7;border-color:#ccc;box-shadow:0 1px 0 #ccc;color:#555;vertical-align:top}p .button{vertical-align:baseline}.button-secondary:focus,.button-secondary:hover,.button.focus,.button.hover,.button:focus,.button:hover{background:#fafafa;border-color:#999;color:#23282d}.button-link:focus,.button-secondary:focus,.button.focus,.button:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.button-secondary:active,.button.active,.button.active:hover,.button:active{background:#eee;border-color:#999;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.button.active:focus{border-color:#5b9dd9;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}.button-disabled,.button-secondary.disabled,.button-secondary:disabled,.button-secondary[disabled],.button.disabled,.button:disabled,.button[disabled]{background:#f7f7f7!important;border-color:#ddd!importan
t;box-shadow:none!important;color:#a0a5aa!important;cursor:default;text-shadow:0 1px 0 #fff!important;transform:none!important}.button-link,input[type=submit].button-link{background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;margin:0;outline:none;padding:0}.button-link:focus{outline:1px solid #5b9dd9}.button-primary,.download-button,.plugin-upload-form .button-primary{text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.button-primary,.button-primary:visited,.download-button,.download-button:visited,.plugin-upload-form .button-primary,.plugin-upload-form .button-primary:visited{background:#0085ba;border-color:#0073aa #006799 #006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover,.download-button.focus,.download-button.hover,.download-button:focus,.download-button:hover,.plugin-upload-form .button-primary.focus,.plugin-upload-form .bu
tton-primary.hover,.plugin-upload-form .button-primary:focus,.plugin-upload-form .button-primary:hover{background:#008ec2;border-color:#006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary:focus,.download-button.focus,.download-button:focus,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.button-primary.active,.button-primary.active:focus,.button-primary.active:hover,.button-primary:active,.download-button.active,.download-button.active:focus,.download-button.active:hover,.download-button:active,.plugin-upload-form .button-primary.active,.plugin-upload-form .button-primary.active:focus,.plugin-upload-form .button-primary.active:hover,.plugin-upload-form .button-primary:active{background:#0073aa;border-color:#006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}.button-primary.disabled,.button-primary:disabled,.button-primary[disabled],.download-button.disabled,.down
load-button:disabled,.download-button[disabled],.plugin-upload-form .button-primary.disabled,.plugin-upload-form .button-primary:disabled,.plugin-upload-form .button-primary[disabled]{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-primary.button.button-hero,.download-button.button.button-hero,.plugin-upload-form .button-primary.button.button-hero{box-shadow:0 2px 0 #006799}.button-primary.button.button-hero.active,.button-primary.button.button-hero.active:focus,.button-primary.button.button-hero.active:hover,.button-primary.button.button-hero:active,.download-button.button.button-hero.active,.download-button.button.button-hero.active:focus,.download-button.button.button-hero.active:hover,.download-button.button.button-hero:active,.plugin-upload-form .button-primary.button.button-hero.active,.plugin-upload-form .button-primary.button.button-hero.active:f
ocus,.plugin-upload-form .button-primary.button.button-hero.active:hover,.plugin-upload-form .button-primary.button.button-hero:active{box-shadow:inset 0 3px 0 #006799}.button-primary-disabled{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-group{display:inline-block;font-size:0;position:relative;vertical-align:middle;white-space:nowrap}.button-group>.button{border-radius:0;display:inline-block;margin-right:-1px;z-index:10}.button-group>.button-primary{z-index:100}.button-group>.button:hover{z-index:20}.button-group>.button:first-child{border-radius:3px 0 0 3px}.button-group>.button:last-child{border-radius:0 3px 3px 0}.button-group>.button:focus{position:relative;z-index:1}@media screen and (max-width:737px){.button,.button.button-large,.button.button-small,.plugin-upload-form .button-primary{font-size:14px;height:auto;line-height:norm
al;margin-bottom:4px;padding:6px 14px;vertical-align:middle}}.clear:after,.clear:before,.comment-content:after,.comment-content:before,.entry-content:after,.entry-content:before,.home-below:after,.home-below:before,.site-content:after,.site-content:before,.site-footer:after,.site-footer:before,.site-header:after,.site-header:before{content:"";display:table;table-layout:fixed}.clear:after,.comment-content:after,.entry-content:after,.home-below:after,.site-content:after,.site-footer:after,.site-header:after{clear:both}p.subheading{color:#82878c;font-weight:300;margin:-.4rem auto 2rem;text-align:center}p.intro,p.subheading{font-size:20px;font-size:1.25rem}p.aside{font-size:12.8px;font-size:.8rem}p.note{font-size:10.24px;font-size:.64rem;letter-spacing:.16px;letter-spacing:.01rem;max-width:291.038px;max-width:18.1898940355rem}input,textarea{box-sizing:border-box}input[type=checkbox],input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=e
mail],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#fff;border:1px solid #ddd;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);color:#32373c;outline:none;transition:border-color .05s ease-in-out}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#5b9dd9;box-shadow:0 0 2px rgba(30,140,190,.8)}input[type=email],input[type=url]{direction:ltr}input[type=number]{height:28px;line-height:inherit}input[type=checkbox],input[type=radio]{background:#fff;bord
er:1px solid #b4b9be;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);clear:none;color:#555;cursor:pointer;display:inline-block;height:16px;line-height:0;margin:-4px 4px 0 0;min-width:16px;outline:0;padding:0!important;text-align:center;transition:border-color .05s ease-in-out;vertical-align:middle;width:16px;-webkit-appearance:none}input[type=checkbox]:checked:before,input[type=radio]:checked:before{display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}input[type=checkbox]:checked:before{color:#1e8cbe;content:"";margin:-3px 0 0 -4px}input[type=radio]{border-radius:
50%;line-height:10px;margin-right:4px}input[type=radio]:checked+label:before{color:#82878c}input[type=radio]:checked:before{background-color:#1e8cbe;border-radius:50px;content:"•";font-size:24px;height:6px;line-height:16px;margin:4px;text-indent:-9999px;width:6px}input[type=reset]:active,input[type=reset]:hover{color:#00a0d2}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-decoration{display:none}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}input,select,textarea{border-radius:0;font-size:14px;padding:3px 5px}textarea{line-height:1.4;overflow:auto;padding:2px 6px;resize:vertical}textarea.code{line-height:1.4;padding:4px 6px 1px}label{cursor:pointer;vertical-align:middle}input,select{margin:1px;padding:3px 5px}input.code{padding-top:6px}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#eee}.wp-core-ui :-moz-placeholder,:-moz-placeholder{color:#a9a9a9}input.disabl
ed,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:hsla(0,0%,100%,.5);border-color:hsla(0,0%,87.1%,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(51,51,51,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:none;box-shadow:none}input.large-text,textarea.large-text{width:99%}input.regular-text{width:25em}input.small-text{padding:1px 6px;width:50px}input[type=number].small-text{width:65px}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;padding:6px 10px}input[type=number]{height:40px}input.code{padding-bottom:5px;padding-top:10px}input[type=checkbox]{-webkit-appearance:none;padding:10px}input[type=checkbox]:checked:before{font:normal 30px/1 dashicons;margin:-
3px -5px}input[type=checkbox],input[type=radio]{height:25px;width:25px}input[type=radio]:checked:before{vertical-align:middle;width:9px;height:9px;margin:7px;line-height:16px}input,textarea{font-size:16px}input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:55px;display:inline;padding:3px 6px;margin:0 3px}input.regular-text{width:100%}label{font-size:14px}fieldset label{display:block}}a.button:active,a.button:focus,a.button:hover{text-decoration:none}.notice{background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:1em 0;padding:1px 12px}.notice p{font-size:12.8px;font-size:.8rem;margin:.5em 0;padding:2px}.notice.notice-alt{box-shadow:none}.notice.notice-large{padding:10px 20px}.notice.notice-success{border-left-color:#46b450}.notice.notice-success.notice-alt{background-color:#ecf7ed}.notice.notice-warning{border-left-color:#ffb900}.notice.notice-warning.notice-alt{b
ackground-color:#fff8e5}.notice.notice-error{border-left-color:#dc3232}.notice.notice-error.notice-alt{background-color:#fbeaea}.notice.notice-info{border-left-color:#00a0d2}.notice.notice-info.notice-alt{background-color:#e5f5fa}.error-404 .page-content,.error-404 .page-title{text-align:center}.error-404 .page-content .logo-swing{height:160px;height:10rem;margin:6rem auto;position:relative;text-align:center;width:160px;width:10rem}.error-404 .page-content .logo-swing .wp-logo{left:0;max-width:none;position:absolute;top:0;width:160px;width:10rem}@keyframes hinge{10%{width:180px;height:180px;transform:rotate(0deg)}15%{width:185px;height:185px;transform:rotate(0deg)}20%{width:180px;height:180px;transform:rotate(5deg)}40%{transform-origin:top left;animation-timing-function:ease-in-out}60%{transform:rotate(40deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{tra
nsform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comments-area>:last-child{margin-bottom:0}.comments-area .comment-list+.comment-respond{border-top:1px solid #eaeaea}.comments-area .comment-list+.comment-respond,.comments-area .comment-navigation+.comment-respond{padding-top:1.6em}.comments-area .comments-title{margin-bottom:1.3333em}.comments-area .comment-list{list-style:none;margin:0}.comments-area .comment-list .pingback,.comments-area .comment-list .trackback,.comments-area .comment-list article{border-top:1px solid #eaeaea;padding:1.6em 0}.comments-area .comment-list article:not(:only-child){padding-bottom:0}.comments-area .comment-list article+.comment-respond{padding-bottom:1.6em}.comments-area .comment-list .children{list-style:none;margin:0}.comments-area .comment-list .children>li{padding-left:.8em}.comments-area .comment-list .alt{background:none}.comments-area .comment-author{color:#999;margi
n-bottom:.4em}.comments-area .comment-author .avatar{float:left;height:24px;margin-right:.8em;width:24px}.comments-area .comment-metadata,.comments-area .pingback .edit-link{color:#999;line-height:1.5}.comments-area .comment-metadata a,.comments-area .pingback .edit-link a{color:#777}.comments-area .comment-metadata{font-size:12.8px;font-size:.8rem;margin-bottom:1.6em}.comments-area .comment-metadata .edit-link,.comments-area .pingback .edit-link{margin-left:1em}.comments-area .pingback .edit-link:before{top:5px}.comments-area .comment-content ol,.comments-area .comment-content ul{margin:0 0 1.6em 1.3333em}.comments-area .comment-content>:last-child,.comments-area .comment-content li>ol,.comments-area .comment-content li>ul{margin-bottom:0}.comments-area .comment-content .reply{font-size:12px}.comments-area .comment-content .reply a{border:1px solid #eaeaea;color:#707070;display:inline-block;font-weight:700;line-height:1;margin-top:2em;padding:.4167em .8333em;text-transform
:uppercase}.comments-area .comment-content .reply a:focus,.comments-area .comment-content .reply a:hover{border-color:#333;color:#333;outline:0}.comments-area .comment-reply-title a{font-weight:inherit}.comments-area .comment-form label{font-size:12.8px;font-size:.8rem;font-weight:700;display:block;letter-spacing:.04em;line-height:1.5}.comments-area .comment-form input[type=email],.comments-area .comment-form input[type=text],.comments-area .comment-form input[type=url],.comments-area .comment-form textarea{width:100%}.comments-area .comment-awaiting-moderation,.comments-area .comment-notes,.comments-area .form-allowed-tags,.comments-area .logged-in-as{font-size:16px;font-size:1rem;line-height:1.5;margin-bottom:2em}.comments-area .no-comments{border-top:1px solid #eaeaea;color:#999;font-weight:700;padding-top:1.6em}.comments-area .comment-navigation+.no-comments{border-top:0}.comments-area .form-allowed-tags code{font-family:Inconsolata,monospace}.comments-area .form-submit{margin-b
ottom:0}.comments-area .required{color:#c0392b}.entry-content{hyphens:auto;word-wrap:break-word}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.entry-content [class*=col-]~h2,.entry-content [class*=col-]~h3,.entry-content [class*=col-]~h4,.entry-content [class*=col-]~h5,.entry-content [class*=col-]~h6{clear:none}.entry-header{position:relative}.entry-header .sticky-post{font-style:italic;position:absolute;top:-12.8px;top:-.8rem}.entry-header .sticky-post,.entry-meta{color:#999;font-size:12.8px;font-size:.8rem}.entry-meta{margin-bottom:1rem}.entry-meta a{color:#777}.entry-meta>span{margin-right:1rem}.entry-meta>span :last-of-type{margin:0}.entry-meta .byline,.entry-meta .updated:not(.published),.sticky .entry-meta .posted-on{display:none}.group-blog .entry-meta .byline,.single .entry-meta .byline{display:inline}.entry-summary{hyphens:auto;word-wrap:break-word}body:not(.single):not(.search) .site-main .post{margin-bottom:3.0517578125rem;max-width:40
em}.gallery{margin-bottom:1.5rem}.gallery .gallery-item{display:inline-block;margin:0;text-align:center;vertical-align:top;width:100%}.gallery.gallery-columns-2 .gallery-item{max-width:50%}.gallery.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery.gallery-columns-4 .gallery-item{max-width:25%}.gallery.gallery-columns-5 .gallery-item{max-width:20%}.gallery.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery .gallery-caption{display:block}.main-navigation{background:#0073aa;clear:both;left:0;position:absolute;top:60px;width:100%}.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,.2);float:left;left:-999em;position:absolute;top:1.5em;z-index:99999}.main-navigation ul ul ul{left:-999em;top:0}.main-navigation ul ul li.focus>u
l,.main-navigation ul ul li:hover>ul{left:100%}.main-navigation ul ul a{width:200px}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul{left:auto}.main-navigation li{border-top:1px solid hsla(0,0%,100%,.2);padding:1rem}.main-navigation a{color:hsla(0,0%,100%,.8);display:block;font-size:12.8px;font-size:.8rem;text-decoration:none}.main-navigation a.active,.main-navigation a:hover{color:#fff}@media screen and (min-width:737px){.main-navigation a.active{border-bottom:1px solid}}.main-navigation.toggled{z-index:1}.main-navigation.toggled ul{display:block}.menu-toggle{background:transparent;border:none;color:#fff;font-size:25px;font-size:1.5625rem;height:56px;height:3.5rem;overflow:hidden;position:absolute;right:16px;right:1rem;top:-58px;width:56px;width:3.5rem;-webkit-appearance:none}.toggled .menu-toggle:before{content:""}@media screen and (min-width:737px){.menu-toggle{display:none}.main-navigation{float:right;position:static;width:auto}.main-navigati
on.toggled{padding:1px 0}.main-navigation ul{display:inline-block;font-size:0}.main-navigation ul li{border:0;display:inline-block;font-size:1rem;margin-right:1rem;padding:0}.main-navigation ul li:last-of-type{margin-right:0}}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}embed,iframe,object{max-width:100%}body.page .gutters .col-12{width:100%}body.page .entry-header{background:#0073aa;padding:1rem 0}body.page .entry-header .entry-title{color:#fff;font-size:25px;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){body.page .entry-header .entry-title{padding:0 10px}}body.page .entry-header.home{padding:1.5625rem 1.143rem;text-align:center}@media screen and (min-width:737px){body.page .site-header+.site-main .entry-title{padding:initial}}body.page .entry-content,body.page .entry-footer{margin:0 auto;max-width:960px;paddi
ng:3.0517578125rem 1.5625rem}.post-navigation{margin:5em auto;padding:0}.post-navigation a{border-bottom:1px solid #eaeaea;color:#444;display:block;font-weight:600;padding:11px 0 12px;text-transform:none;width:100%}.post-navigation a:hover{color:#21759b}.post-navigation .nav-links{border-top:1px solid #eaeaea;hyphens:auto;word-wrap:break-word}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navigation .nav-next{text-align:right}.pagination .nav-links{text-align:center}.pagination .nav-links .page-numbers{background-color:#f9f9f9;cursor:hand;display:inline-block;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.dots,.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{background:none;font-size:.9em;width:auto}.pagination .nav-links .page-numbers.dots{cursor:inherit}@media screen and (max-width:737px){.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.
prev{font-size:0;min-width:0;padding:0}.pagination .nav-links .page-numbers.next:after,.pagination .nav-links .page-numbers.prev:before{background-color:#f9f9f9;display:inline-block;font-size:1rem;line-height:1.5;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.prev:before{content:"‹"}.pagination .nav-links .page-numbers.next:after{content:"›"}}.pagination .nav-links span.page-numbers{background-color:#f7f7f7;font-weight:700}.search-form .search-field{line-height:normal;margin:0;padding:4px 5px;vertical-align:text-bottom}body.search .gutters .col-12{width:100%}body.search .site-main{margin:0 auto;max-width:960px;padding:0 1.5625rem 3.0517578125rem}.site-content{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-content{padding:0 10px 3.0517578125rem}}@media screen and (max-width:737px){.site-content .site-main{float:none;margin:0;width:auto}}.home .site-content,.page .site-content,.site-content.page{margi
n:auto;max-width:none;padding:0}.site-content .page-title{font-size:20px;font-size:1.25rem;font-weight:400}.site-content .no-results{margin:0 auto 3.0517578125rem;max-width:40em;padding:0 2rem}.site-description{color:hsla(0,0%,100%,.8);font-size:20px;font-size:1.25rem;font-weight:300;margin:-.4rem auto 2rem;text-align:center}.site-header{background:#0073aa;padding:1rem 0;position:relative}.site-header .site-branding{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-header .site-branding{padding:0 10px}}.site-header.home{padding:1.5625rem 1.143rem;text-align:center}.site-title{display:inline-block;font-size:25px;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 2rem 0 0;max-width:none}.site-title a{color:#fff;font-weight:300}.site-title a:active,.site-title a:focus,.site-title a:hover{text-decoration:none}.site-header.home .site-title{display:inherit;font-size:61.035px;font-size:3.8146972656rem;margin:2rem 0 1rem}.widget-area{font-si
ze:12.8px;font-size:.8rem}@media screen and (min-width:480px) and (max-width:768px){.widget-area{display:flex}.widget-area .widget{width:48%}}#wporg-footer{background-color:#f7f7f7;border-top:1px solid #dfdfdf;padding:22px 14px 65px}#wporg-footer,#wporg-footer .wrapper{clear:both;margin:0 auto;overflow:auto}#wporg-footer .wrapper{max-width:930px}#wporg-footer ul{float:left;margin-bottom:20px;margin-left:24px;overflow:auto;padding-left:0;width:135px}@media screen and (min-width:960px){#wporg-footer ul:first-child{margin-left:0}}#wporg-footer ul li{color:#bbb;font-size:14px;list-style-type:none;margin-bottom:1px}#wporg-footer ul li a{text-decoration:none;text-decoration-skip-ink:none}#wporg-footer ul li a:hover{color:#0073aa;text-decoration:underline}#wporg-footer .cip{clear:both;color:#ccc;float:none;font-size:12.8px;font-size:.8rem;letter-spacing:.3em;margin:35px auto 0;text-align:center;text-transform:uppercase}#wporg-footer .cip.cip-image{background:url(//s.w.org/style/images/code
ispoetry.png?1=) 50% no-repeat;background-size:190px 15px;height:15px;text-indent:-9999px;width:190px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),only screen and (min-resolution:144dpi){#wporg-footer .cip.cip-image{background-image:url(//s.w.org/style/images/codeispoetry-2x.png?1=)}}@media screen and (min-width:561px) and (max-width:959px){#wporg-footer .wrapper{max-width:600px}#wporg-footer ul{margin-left:2%;width:32%}#wporg-footer ul:nth-child(3n+1){margin-left:0}#wporg-footer ul:nth-child(4n){clear:both}}@media screen and (max-width:560px){#wporg-footer .wrapper{max-width:360px}#wporg-footer ul{margin-left:4%;width:48%}#wporg-footer ul:nth-child(odd){margin-left:0;clear:both}}#wporg-header{background:#23282d;height:140px;position:relative;text-align:center;width:100%}#wporg-header .wrapper{margin:0 auto;max-width:960px}#wporg-header h1{display:inline-block;margin:auto;width:303px}#wporg-header h1 a{background:url(//s.w.org/
style/images/wporg-logo.svg?3=) 0 no-repeat;background-size:290px 46px;display:block;height:88px;text-indent:-9999px}#wporg-header h2.rosetta{clear:none;color:#dfdfdf;font-family:Georgia,Times New Roman,serif;font-size:30px;margin:0 0 0 60px}#wporg-header h2.rosetta a{border-bottom:none;color:#dfdfdf;display:block;height:52px;line-height:22px;padding:0}#wporg-header h2.rosetta a:hover{text-decoration:none}#wporg-header #wporg-header-menu{background:#23282d;left:-75%;list-style:none;margin:0;max-width:75%;min-width:200px;position:absolute;text-align:left;top:100%;transition:left .3s;z-index:100000}#wporg-header #wporg-header-menu.toggled{left:0}#wporg-header ul li{list-style-type:none;position:relative}#wporg-header ul li a{color:#eee;display:block;font-family:Open Sans,Helvetica,Arial,Liberation Sans,sans-serif;font-size:13px;font-weight:600;height:34px;line-height:34px;margin:0 4px;padding:10px 30px;text-decoration:none}#wporg-header ul li a.subcurrent{font-weight:700}@media (max-w
idth:768px){#wporg-header ul li a{height:auto}}#wporg-header ul li.current-menu-item a,#wporg-header ul li.current_page_parent a,#wporg-header ul li a.current,#wporg-header ul li a:hover{color:#00a0d2}#wporg-header ul li#download,#wporg-header ul li.download{float:right;height:34px;margin-right:14px;overflow:hidden;padding:0 0 34px}@media screen and (max-width:767px){#wporg-header ul li#download,#wporg-header ul li.download{display:block;float:none;margin:10px 20px 20px;padding-bottom:0;height:auto}#wporg-header ul li#download a,#wporg-header ul li.download a{padding:4px 10px;text-align:center}}#wporg-header ul li#download a,#wporg-header ul li.download a{margin:0;padding:0 16px}#wporg-header ul li#download a:hover,#wporg-header ul li.download a:hover{color:#eee}#wporg-header ul li#download.current,#wporg-header ul li#download.current-menu-item,#wporg-header ul li#download .uparrow,#wporg-header ul li.download.current,#wporg-header ul li.download.current-menu-item,#wporg-header ul l
i.download .uparrow{display:none}#wporg-header ul li .nav-submenu{clip:rect(1px,1px,1px,1px);height:1px;left:-2px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;z-index:99999}#wporg-header ul li .nav-submenu li a{display:inline-block;height:24px;line-height:24px;margin:0;white-space:nowrap}@media screen and (min-width:768px){#wporg-header #head-search{float:right;margin-right:14px;padding-top:30px}}#wporg-header #head-search form{border-bottom:1px solid #3f3f3f;display:inline-block;margin-left:60px;width:288px}#wporg-header #head-search form input.text{background:#191e23;border:0;border-radius:0;box-sizing:content-box;color:#b4b9be;float:left;font-family:Open Sans,sans-serif;font-size:12px;height:24px;margin:0;outline:none;padding:3px;vertical-align:top;width:256px}#wporg-header #head-search form input.text::-moz-placeholder{color:#eee}@media screen and (max-width:480px){#wporg-header #head-search form input.text{width:216px}}#wporg-header #head-search form .button{b
ackground:#191e23 url(//s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831) no-repeat 2px 5px;border:none;border-radius:0;box-shadow:none;float:left;height:30px;margin:0;padding:0;text-shadow:none!important;width:26px}@media screen and (max-width:480px){#wporg-header #head-search form{width:248px}}@media screen and (min-width:480px){#wporg-header #head-search form{margin-left:0}}@media screen and (min-width:768px){#wporg-header{height:120px;text-align:inherit}#wporg-header h1{float:left;padding-left:10px}#wporg-header h2.rosetta{float:left;margin-left:0;padding:36px 27px 0}#wporg-header #headline h2{text-rendering:optimizeLegibility}#wporg-header #wporg-header-menu{float:left;height:46px;list-style:none;margin:-15px 0 0;max-width:inherit;min-width:0;padding:0;position:static;width:100%}#wporg-header ul li{float:left;position:relative}#wporg-header ul li a{height:46px;padding:0 6px}#wporg-header ul li a.current~.uparrow{border-bottom:9px solid #f7f7f7;border-left:9px solid tr
ansparent;border-right:9px solid transparent;height:0;margin:-8px auto 0;width:0}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:50%;margin:-8px 0 0 -9px;position:absolute;width:0}#wporg-header ul li .nav-submenu:hover~.uparrow,#wporg-header ul li:hover .nav-submenu~.uparrow{border-bottom:9px solid #32373c;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-10px auto 0;width:0}#wporg-header ul li .nav-submenu{background:#32373c;border:1px solid #32373c;border-top:0;margin-top:-1px;min-width:0}#wporg-header ul li .nav-submenu li{float:none}#wporg-header ul li .nav-submenu li a{height:34px;line-height:34px}#wporg-header .nav-menu .focus>ul,#wporg-header .nav-menu ul li:hover>ul,#wporg-header ul.nav-menu .focus>ul,#wporg-header ul.nav-menu li:hover>ul{clip:inherit;h
eight:inherit;overflow:inherit;width:inherit}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after,#wporg-header ul li a.current~.uparrow{border-bottom-color:#0073aa}}.page-download #wporg-header #download,.page-parent-download #wporg-header #download{display:none}#mobile-menu-button{background:none;border:none;box-shadow:none;display:block;float:left;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;left:10px;line-height:1;padding:1px;position:absolute;text-align:center;text-decoration:inherit;text-shadow:none;top:75px;transition:color .1s ease-in;vertical-align:top;-webkit-font-smoothing:antialiased}#mobile-menu-button:before{border:none;box-sizing:border-box;color:#888;content:"";display:inline-block;float:left;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;vertical-align:middle;-webkit-font-smoothing:antialiased}@media screen and (min-width:768px){#mobile-menu-button{displa
y:none}}#download-mobile{background:#f7f7f7;border-bottom:1px solid #ddd}#download-mobile .wrapper{padding:20px 0;text-align:center}#download-mobile span.download-ready{font-size:1.6em;margin:0 .25em}#download-mobile a.download-button{font-size:1.6em;height:inherit;margin:10px .25em;padding:10px 15px}body.single-wporg-pattern{box-sizing:border-box;font-size:14px;font-weight:400;line-height:1.2}body.single-wporg-pattern .site-content{margin:auto;max-width:none;padding:0}body.single-wporg-pattern .site-main{max-width:1440px}.site-header:not(.home) .search-form{display:flex;align-items:center}.site-header:not(.home) .search-form>input{flex:1;border:0;border-radius:2px 0 0 2px;display:inline-block;font-size:12px;padding:5px 10px;position:relative;width:auto;height:100%}.site-header:not(.home) .search-form button{margin:0;border-radius:0 2px 2px 0;padding:3px 12px;height:unset}.search-form--is-inline .search-form{display:flex;justify-content:space-between;background:#fff}.search-form-
-is-inline .search-form>label{flex:1}.search-form--is-inline .search-form input{padding:.5rem;background:transparent;border:none;box-shadow:none;width:100%;font-size:14px}@media only screen and (min-width:768px){.search-form--is-inline .search-form input{font-size:16px}}.search-form--is-inline .search-form button{background:transparent;margin-bottom:0;border:0;box-shadow:none;height:inherit;text-shadow:none;color:#32373c}.search-form--is-inline .search-form button:focus{-webkit-box-shadow:0 0 2px 1px #0073aa;box-shadow:0 0 2px 1px #0073aa}.search-form--is-centered .search-form{margin:0 auto}.search-form--is-constrained .search-form{max-width:384px}.search-form--is-muted .search-form{border-color:#d7dade!important}.search-form--is-muted .search-form button,.search-form--is-muted .search-form input{background:#f8f9f9;color:#7e8993}.search-form--has-medium-text .search-form input{font-size:14px}.search-form--has-border .search-form{border:1px solid #7e8993}.section-heading_link,.sec
tion-heading_title{margin-bottom:0}.section-heading_title{font-weight:300}.section-heading_title .archive-title-prefix{display:block;font-size:16px;font-size:1rem}.section-heading_link{text-decoration:underline;font-weight:600;margin-top:16px!important}@media only screen and (min-width:768px){.section-heading_link{margin-top:0!important}}.section-heading_description{margin:1rem 0 0}.section-heading_description :last-child{margin-bottom:0}.section-heading--with-space{padding-bottom:16px}.site-title a{text-decoration:none}.site-title a:active,.site-title a:focus,.site-title a:hover{color:#fff}.has-wporg-blue-color{color:#1e8cbe}.has-wporg-blue-background-color{background-color:#1e8cbe}.has-wporg-purple-color{color:#826eb4}.has-wporg-purple-background-color{background-color:#826eb4}.has-wporg-white-color{color:#fff}.has-wporg-white-background-color{background-color:#fff}.home-page .shapes{position:relative;margin:0 auto}.home-page .shapes .parallelogram p:before{font-size:64px;height:6
4px;left:-16px;position:relative}.home-page .shapes .parallelogram{color:#fff;display:block;margin:0 auto;opacity:.9;padding:60px 40px;text-align:center;text-decoration:none}.home-page .shapes strong{display:block;font-size:28px;font-weight:300;padding-bottom:15px;padding-top:15px}.home-page .shapes p{color:#fff;font-size:16px;font-weight:300;margin:0}.home-page .shapes u{display:block;font-size:18px;padding-top:15px}@media only screen and (min-width:768px){.home-page .shapes{height:400px}.home-page .shapes .parallelogram{width:50%;position:absolute;padding:50px 90px}}@media only screen and (min-width:960px){.home-page .shapes .parallelogram{-webkit-transform:skew(-15deg);-ms-transform:skew(-15deg);transform:skew(-15deg)}.home-page .shapes .parallelogram:before,.home-page .shapes p{-webkit-transform:skew(15deg);-ms-transform:skew(15deg);transform:skew(15deg)}}@media only screen and (min-width:1200px){.home-page .shapes{margin:0 -60px}}.terms{font-style:italic;font-size:14px}
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@charset "UTF-8";[class*=col-]{margin:inherit}.row{display:flex;flex-direction:row;flex-wrap:wrap}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}}.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row.gutters>.row{margin-left:0}}.row.gutters>.row>[class*=col-]{margin-left:2%}@media (max-width:768px){.row.gutters>.row>[class*=col-]{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.3333333333%}.offset-1{margin-left:8.3333333333%}.col-2{width:16.6666666667%}.offset-2{margin-left:16.6666666667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.3333333333%}.offset-4{margin-left:33.3333333333%}.col-5{width:41.6666666667%}.offset-5{margin-left:41.6666666667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.3333333333%}.offset-7{
margin-left:58.3333333333%}.col-8{width:66.6666666667%}.offset-8{margin-left:66.6666666667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.3333333333%}.offset-10{margin-left:83.3333333333%}.col-11{width:91.6666666667%}.offset-11{margin-left:91.6666666667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:6.33333%}.gutters>.col-1:nth-child(n+13){margin-top:2%}.gutters>.offset-1{margin-left:10.33333%!important}.gutters>.col-2{width:14.66667%}.gutters>.col-2:nth-child(n+7){margin-top:2%}.gutters>.offset-2{margin-left:18.66667%!important}.gutters>.col-3{width:23%}.gutters>.col-3:nth-child(n+5){margin-top:2%}.gutters>.offset-3{margin-left:27%!important}.gutters>.col-4{width:31.33333%}.gutters>.col-4:nth-child(n+4){margin-top:2%}.gutters>.offset-4{margin-left:35.33333%!important}.gutters>.col-5{width:39.66667%}.gutters>.offset-5{margin-left:43.66667%!important}.gutters>.col-6{width:48%}.gutters>.col-6:nth-chil
d(n+3){margin-top:2%}.gutters>.offset-6{margin-left:52%!important}.gutters>.col-7{width:56.33333%}.gutters>.offset-7{margin-left:60.33333%!important}.gutters>.col-8{width:64.66667%}.gutters>.offset-8{margin-left:68.66667%!important}.gutters>.col-9{width:73%}.gutters>.offset-9{margin-left:77%!important}.gutters>.col-10{width:81.33333%}.gutters>.offset-10{margin-left:85.33333%!important}.gutters>.col-11{width:89.66667%}.gutters>.offset-11{margin-left:93.66667%!important}.gutters>.col-12{width:98%}.gutters>.offset-12{margin-left:102%!important}@media (max-width:768px){[class*=" offset-"],[class^=offset-]{margin-left:0}}.first{order:-1}.last{order:1}@media (max-width:768px){.row [class*=col-]{margin-left:0;width:100%}.row.gutters [class*=col-]{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,
.push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}@media (max-width:768px){.align-left-sm{justify-content:flex-start}}.float-right{float:right}.float-left{float:left}@media (max-width:768px){.float-left,.float-right{float:none}}.fixed{position:fixed;top:0;left:0;z-index:100;width:100%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;he
ight:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webki
t-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}optgroup{font-weight:700}table{border-spacing:0}td,th{padding:0}p{margin:1rem 0}cite,dfn,em,i{font-style:italic}blockquote{margin:0 1.5rem}address{margin:0 0 1.5rem}pre{background:#eee;font-family:Courier\ 10 Pitch,Courier,monospace;line-height:1.6;margin-bottom:1.6rem;max-width:100%;overflow:auto;padding:1.6rem}code,kbd,pre,tt,var{font-size:15px;font-size:.9375rem}code,kbd,tt,var{font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{background:#fff9c0;text-decoration:none}big{font-size:125%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:#fff}blockquote,q{quotes:"" "&quo
t;}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote{border-left:2px solid #767676;color:#767676;margin:1rem 0;padding-left:.8rem}blockquote cite{font-size:12.8px;font-size:.8rem}figure{margin:0}hr{background-color:#eee;border:0;height:2px;margin:5rem auto}img{height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Open Sans,sans-serif;clear:both;line-height:1.5;margin:2rem 0 1rem}.h1,h1{font-size:39.062px;font-size:2.44140625rem}.h1,.h2,h1,h2{font-weight:300}.h2,h2{font-size:31.25px;font-size:1.953125rem}.h3,h3{font-size:25px;font-size:1.5625rem;font-weight:400}.h4,h4{font-size:20px;font-size:1.25rem;color:#32373c;font-weight:600;padding:0}.h5,h5{font-size:16px;font-size:1rem;letter-spacing:.16px;letter-spacing:.01rem}.h5,.h6,h5,h6{font-weight:600;text-transform:uppercase}.h6,h6{font-size:12.8px;font-size:.8rem;letter-spacing:.8px}a{color:#0073aa;text-decoration:none}a:active,a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:
active,a:hover{outline:0}li>a,p a{text-decoration:underline}li>a:hover,p a:hover{color:#d54e21}ol,ul{margin:0 0 1.5em 1.5em;padding:0}ul{list-style:square}ol{list-style:decimal}ol.unmarked-list,ul.unmarked-list{list-style:none;padding-left:0}li>ol,li>ul{margin-bottom:0}dt{font-weight:700}dd{margin:0 1.5em 1.5em}table{border:1px solid #eee;border-collapse:collapse;font-size:12.8px;font-size:.8rem;margin:0 0 1rem;padding:0;width:100%}table thead{background:#32373c;color:#fff}table td,table th{border:1px solid #eee;font-weight:400;margin:0;padding:.4rem;text-align:left;vertical-align:top}table tbody tr:nth-child(2n){background:#f7f7f7}html{font-size:100%}body,button,input,select,textarea{color:#32373c;font-family:Open Sans,sans-serif;font-size:100%;line-height:1.5}@media screen and (min-width:737px){html{font-size:1.125rem}}.custom-select{display:inline-block;box-sizing:border-box;padding:.5rem 2rem .5rem .8rem;width:auto;font-size:1em;line-height:1.3;border:1px solid #6c77
82;box-shadow:none;border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.custom-select::-ms-expand{display:none}.custom-select:focus{box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.custom-select option{font-weight:400}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:700
;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.site-content[tabindex="-1"]:focus{outline:0}.no-js .hide-if-no-js{display:none}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}@media screen and (max-width:480px){.alignleft,.alignright{display:block;float:none;margin-left:auto;margin-right:auto}}.button,.button-primary,.button-secondary,.plugin-upload-form .button-primary{border:1px solid;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:12.8px;font-size:.8rem;height:25px;height:1.5625rem;line-height:1;margin:0;padding:0 .8rem;text-decoration:none;white-space:nowrap;-webkit-appearance:none}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0;pa
dding:0}.button-group.button-xl .button,.button.button-xl{font-size:16px;font-size:1rem;height:39.062px;height:2.44140625rem;line-height:1;padding:0 1.5rem}.button-group.button-large .button,.button.button-large{height:31.25px;height:1.953125rem;line-height:1;padding:0 1rem}.button-group.button-small .button,.button.button-small{font-size:10.24px;font-size:.64rem;height:20px;height:1.25rem;line-height:1;padding:0 .5rem}a.button,a.button-primary,a.button-secondary{line-height:25px;line-height:1.5625rem}.button-group.button-large a.button,a.button.button-large{line-height:31.25px;line-height:1.953125rem}.button-group.button-xl a.button,a.button.button-xl{line-height:39.062px;line-height:2.44140625rem}.button-group.button-small a.button,a.button.button-small{line-height:20px;line-height:1.25rem}.button:active,.button:focus{outline:none}.button.hidden{display:none}input[type=reset],input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background:none;border:none;box-s
hadow:none;padding:0 2px 1px;width:auto}.button,.button-secondary,.button:visited{background:#f7f7f7;border-color:#ccc;box-shadow:0 1px 0 #ccc;color:#555;vertical-align:top}p .button{vertical-align:baseline}.button-secondary:focus,.button-secondary:hover,.button.focus,.button.hover,.button:focus,.button:hover{background:#fafafa;border-color:#999;color:#23282d}.button-link:focus,.button-secondary:focus,.button.focus,.button:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.button-secondary:active,.button.active,.button.active:hover,.button:active{background:#eee;border-color:#999;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.button.active:focus{border-color:#5b9dd9;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}.button-disabled,.button-secondary.disabled,.button-secondary:disabled,.button-secondary[disabled],.button.disabled,.button:disabled,.button[disabled]{background:#f7f7f7!important;border-color:#ddd!importan
t;box-shadow:none!important;color:#a0a5aa!important;cursor:default;text-shadow:0 1px 0 #fff!important;transform:none!important}.button-link,input[type=submit].button-link{background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;margin:0;outline:none;padding:0}.button-link:focus{outline:1px solid #5b9dd9}.button-primary,.download-button,.plugin-upload-form .button-primary{text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.button-primary,.button-primary:visited,.download-button,.download-button:visited,.plugin-upload-form .button-primary,.plugin-upload-form .button-primary:visited{background:#0085ba;border-color:#0073aa #006799 #006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover,.download-button.focus,.download-button.hover,.download-button:focus,.download-button:hover,.plugin-upload-form .button-primary.focus,.plugin-upload-form .bu
tton-primary.hover,.plugin-upload-form .button-primary:focus,.plugin-upload-form .button-primary:hover{background:#008ec2;border-color:#006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary:focus,.download-button.focus,.download-button:focus,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.button-primary.active,.button-primary.active:focus,.button-primary.active:hover,.button-primary:active,.download-button.active,.download-button.active:focus,.download-button.active:hover,.download-button:active,.plugin-upload-form .button-primary.active,.plugin-upload-form .button-primary.active:focus,.plugin-upload-form .button-primary.active:hover,.plugin-upload-form .button-primary:active{background:#0073aa;border-color:#006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}.button-primary.disabled,.button-primary:disabled,.button-primary[disabled],.download-button.disabled,.down
load-button:disabled,.download-button[disabled],.plugin-upload-form .button-primary.disabled,.plugin-upload-form .button-primary:disabled,.plugin-upload-form .button-primary[disabled]{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-primary.button.button-hero,.download-button.button.button-hero,.plugin-upload-form .button-primary.button.button-hero{box-shadow:0 2px 0 #006799}.button-primary.button.button-hero.active,.button-primary.button.button-hero.active:focus,.button-primary.button.button-hero.active:hover,.button-primary.button.button-hero:active,.download-button.button.button-hero.active,.download-button.button.button-hero.active:focus,.download-button.button.button-hero.active:hover,.download-button.button.button-hero:active,.plugin-upload-form .button-primary.button.button-hero.active,.plugin-upload-form .button-primary.button.button-hero.active:f
ocus,.plugin-upload-form .button-primary.button.button-hero.active:hover,.plugin-upload-form .button-primary.button.button-hero:active{box-shadow:inset 0 3px 0 #006799}.button-primary-disabled{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-group{display:inline-block;font-size:0;position:relative;vertical-align:middle;white-space:nowrap}.button-group>.button{border-radius:0;display:inline-block;margin-right:-1px;z-index:10}.button-group>.button-primary{z-index:100}.button-group>.button:hover{z-index:20}.button-group>.button:first-child{border-radius:3px 0 0 3px}.button-group>.button:last-child{border-radius:0 3px 3px 0}.button-group>.button:focus{position:relative;z-index:1}@media screen and (max-width:737px){.button,.button.button-large,.button.button-small,.plugin-upload-form .button-primary{font-size:14px;height:auto;line-height:norm
al;margin-bottom:4px;padding:6px 14px;vertical-align:middle}}.clear:after,.clear:before,.comment-content:after,.comment-content:before,.entry-content:after,.entry-content:before,.home-below:after,.home-below:before,.site-content:after,.site-content:before,.site-footer:after,.site-footer:before,.site-header:after,.site-header:before{content:"";display:table;table-layout:fixed}.clear:after,.comment-content:after,.entry-content:after,.home-below:after,.site-content:after,.site-footer:after,.site-header:after{clear:both}p.subheading{color:#82878c;font-weight:300;margin:-.4rem auto 2rem;text-align:center}p.intro,p.subheading{font-size:20px;font-size:1.25rem}p.aside{font-size:12.8px;font-size:.8rem}p.note{font-size:10.24px;font-size:.64rem;letter-spacing:.16px;letter-spacing:.01rem;max-width:291.038px;max-width:18.1898940355rem}input,textarea{box-sizing:border-box}input[type=checkbox],input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=e
mail],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#fff;border:1px solid #ddd;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);color:#32373c;outline:none;transition:border-color .05s ease-in-out}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#5b9dd9;box-shadow:0 0 2px rgba(30,140,190,.8)}input[type=email],input[type=url]{direction:ltr}input[type=number]{height:28px;line-height:inherit}input[type=checkbox],input[type=radio]{background:#fff;bord
er:1px solid #b4b9be;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);clear:none;color:#555;cursor:pointer;display:inline-block;height:16px;line-height:0;margin:-4px 4px 0 0;min-width:16px;outline:0;padding:0!important;text-align:center;transition:border-color .05s ease-in-out;vertical-align:middle;width:16px;-webkit-appearance:none}input[type=checkbox]:checked:before,input[type=radio]:checked:before{display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}input[type=checkbox]:checked:before{color:#1e8cbe;content:"";margin:-3px 0 0 -4px}input[type=radio]{border-radius:
50%;line-height:10px;margin-right:4px}input[type=radio]:checked+label:before{color:#82878c}input[type=radio]:checked:before{background-color:#1e8cbe;border-radius:50px;content:"•";font-size:24px;height:6px;line-height:16px;margin:4px;text-indent:-9999px;width:6px}input[type=reset]:active,input[type=reset]:hover{color:#00a0d2}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-decoration{display:none}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}input,select,textarea{border-radius:0;font-size:14px;padding:3px 5px}textarea{line-height:1.4;overflow:auto;padding:2px 6px;resize:vertical}textarea.code{line-height:1.4;padding:4px 6px 1px}label{cursor:pointer;vertical-align:middle}input,select{margin:1px;padding:3px 5px}input.code{padding-top:6px}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#eee}.wp-core-ui :-moz-placeholder,:-moz-placeholder{color:#a9a9a9}input.disabl
ed,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:hsla(0,0%,100%,.5);border-color:hsla(0,0%,87.1%,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(51,51,51,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:none;box-shadow:none}input.large-text,textarea.large-text{width:99%}input.regular-text{width:25em}input.small-text{padding:1px 6px;width:50px}input[type=number].small-text{width:65px}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;padding:6px 10px}input[type=number]{height:40px}input.code{padding-bottom:5px;padding-top:10px}input[type=checkbox]{-webkit-appearance:none;padding:10px}input[type=checkbox]:checked:before{font:normal 30px/1 dashicons;margin:-
3px -5px}input[type=checkbox],input[type=radio]{height:25px;width:25px}input[type=radio]:checked:before{vertical-align:middle;width:9px;height:9px;margin:7px;line-height:16px}input,textarea{font-size:16px}input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:55px;display:inline;padding:3px 6px;margin:0 3px}input.regular-text{width:100%}label{font-size:14px}fieldset label{display:block}}a.button:active,a.button:focus,a.button:hover{text-decoration:none}.notice{background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:1em 0;padding:1px 12px}.notice p{font-size:12.8px;font-size:.8rem;margin:.5em 0;padding:2px}.notice.notice-alt{box-shadow:none}.notice.notice-large{padding:10px 20px}.notice.notice-success{border-left-color:#46b450}.notice.notice-success.notice-alt{background-color:#ecf7ed}.notice.notice-warning{border-left-color:#ffb900}.notice.notice-warning.notice-alt{b
ackground-color:#fff8e5}.notice.notice-error{border-left-color:#dc3232}.notice.notice-error.notice-alt{background-color:#fbeaea}.notice.notice-info{border-left-color:#00a0d2}.notice.notice-info.notice-alt{background-color:#e5f5fa}.error-404 .page-content,.error-404 .page-title{text-align:center}.error-404 .page-content .logo-swing{height:160px;height:10rem;margin:6rem auto;position:relative;text-align:center;width:160px;width:10rem}.error-404 .page-content .logo-swing .wp-logo{left:0;max-width:none;position:absolute;top:0;width:160px;width:10rem}@keyframes hinge{10%{width:180px;height:180px;transform:rotate(0deg)}15%{width:185px;height:185px;transform:rotate(0deg)}20%{width:180px;height:180px;transform:rotate(5deg)}40%{transform-origin:top left;animation-timing-function:ease-in-out}60%{transform:rotate(40deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{tra
nsform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comments-area>:last-child{margin-bottom:0}.comments-area .comment-list+.comment-respond{border-top:1px solid #eaeaea}.comments-area .comment-list+.comment-respond,.comments-area .comment-navigation+.comment-respond{padding-top:1.6em}.comments-area .comments-title{margin-bottom:1.3333em}.comments-area .comment-list{list-style:none;margin:0}.comments-area .comment-list .pingback,.comments-area .comment-list .trackback,.comments-area .comment-list article{border-top:1px solid #eaeaea;padding:1.6em 0}.comments-area .comment-list article:not(:only-child){padding-bottom:0}.comments-area .comment-list article+.comment-respond{padding-bottom:1.6em}.comments-area .comment-list .children{list-style:none;margin:0}.comments-area .comment-list .children>li{padding-left:.8em}.comments-area .comment-list .alt{background:none}.comments-area .comment-author{color:#999;margi
n-bottom:.4em}.comments-area .comment-author .avatar{float:left;height:24px;margin-right:.8em;width:24px}.comments-area .comment-metadata,.comments-area .pingback .edit-link{color:#999;line-height:1.5}.comments-area .comment-metadata a,.comments-area .pingback .edit-link a{color:#777}.comments-area .comment-metadata{font-size:12.8px;font-size:.8rem;margin-bottom:1.6em}.comments-area .comment-metadata .edit-link,.comments-area .pingback .edit-link{margin-left:1em}.comments-area .pingback .edit-link:before{top:5px}.comments-area .comment-content ol,.comments-area .comment-content ul{margin:0 0 1.6em 1.3333em}.comments-area .comment-content>:last-child,.comments-area .comment-content li>ol,.comments-area .comment-content li>ul{margin-bottom:0}.comments-area .comment-content .reply{font-size:12px}.comments-area .comment-content .reply a{border:1px solid #eaeaea;color:#707070;display:inline-block;font-weight:700;line-height:1;margin-top:2em;padding:.4167em .8333em;text-transform
:uppercase}.comments-area .comment-content .reply a:focus,.comments-area .comment-content .reply a:hover{border-color:#333;color:#333;outline:0}.comments-area .comment-reply-title a{font-weight:inherit}.comments-area .comment-form label{font-size:12.8px;font-size:.8rem;font-weight:700;display:block;letter-spacing:.04em;line-height:1.5}.comments-area .comment-form input[type=email],.comments-area .comment-form input[type=text],.comments-area .comment-form input[type=url],.comments-area .comment-form textarea{width:100%}.comments-area .comment-awaiting-moderation,.comments-area .comment-notes,.comments-area .form-allowed-tags,.comments-area .logged-in-as{font-size:16px;font-size:1rem;line-height:1.5;margin-bottom:2em}.comments-area .no-comments{border-top:1px solid #eaeaea;color:#999;font-weight:700;padding-top:1.6em}.comments-area .comment-navigation+.no-comments{border-top:0}.comments-area .form-allowed-tags code{font-family:Inconsolata,monospace}.comments-area .form-submit{margin-b
ottom:0}.comments-area .required{color:#c0392b}.entry-content{hyphens:auto;word-wrap:break-word}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.entry-content [class*=col-]~h2,.entry-content [class*=col-]~h3,.entry-content [class*=col-]~h4,.entry-content [class*=col-]~h5,.entry-content [class*=col-]~h6{clear:none}.entry-header{position:relative}.entry-header .sticky-post{font-style:italic;position:absolute;top:-12.8px;top:-.8rem}.entry-header .sticky-post,.entry-meta{color:#999;font-size:12.8px;font-size:.8rem}.entry-meta{margin-bottom:1rem}.entry-meta a{color:#777}.entry-meta>span{margin-right:1rem}.entry-meta>span :last-of-type{margin:0}.entry-meta .byline,.entry-meta .updated:not(.published),.sticky .entry-meta .posted-on{display:none}.group-blog .entry-meta .byline,.single .entry-meta .byline{display:inline}.entry-summary{hyphens:auto;word-wrap:break-word}body:not(.single):not(.search) .site-main .post{margin-bottom:3.0517578125rem;max-width:40
em}.gallery{margin-bottom:1.5rem}.gallery .gallery-item{display:inline-block;margin:0;text-align:center;vertical-align:top;width:100%}.gallery.gallery-columns-2 .gallery-item{max-width:50%}.gallery.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery.gallery-columns-4 .gallery-item{max-width:25%}.gallery.gallery-columns-5 .gallery-item{max-width:20%}.gallery.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery .gallery-caption{display:block}.main-navigation{background:#0073aa;clear:both;left:0;position:absolute;top:60px;width:100%}.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,.2);float:left;left:-999em;position:absolute;top:1.5em;z-index:99999}.main-navigation ul ul ul{left:-999em;top:0}.main-navigation ul ul li.focus>u
l,.main-navigation ul ul li:hover>ul{left:100%}.main-navigation ul ul a{width:200px}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul{left:auto}.main-navigation li{border-top:1px solid hsla(0,0%,100%,.2);padding:1rem}.main-navigation a{color:hsla(0,0%,100%,.8);display:block;font-size:12.8px;font-size:.8rem;text-decoration:none}.main-navigation a.active,.main-navigation a:hover{color:#fff}@media screen and (min-width:737px){.main-navigation a.active{border-bottom:1px solid}}.main-navigation.toggled{z-index:1}.main-navigation.toggled ul{display:block}.menu-toggle{background:transparent;border:none;color:#fff;font-size:25px;font-size:1.5625rem;height:56px;height:3.5rem;overflow:hidden;position:absolute;right:16px;right:1rem;top:-58px;width:56px;width:3.5rem;-webkit-appearance:none}.toggled .menu-toggle:before{content:""}@media screen and (min-width:737px){.menu-toggle{display:none}.main-navigation{float:right;position:static;width:auto}.main-navigati
on.toggled{padding:1px 0}.main-navigation ul{display:inline-block;font-size:0}.main-navigation ul li{border:0;display:inline-block;font-size:1rem;margin-right:1rem;padding:0}.main-navigation ul li:last-of-type{margin-right:0}}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}embed,iframe,object{max-width:100%}body.page .gutters .col-12{width:100%}body.page .entry-header{background:#0073aa;padding:1rem 0}body.page .entry-header .entry-title{color:#fff;font-size:25px;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){body.page .entry-header .entry-title{padding:0 10px}}body.page .entry-header.home{padding:1.5625rem 1.143rem;text-align:center}@media screen and (min-width:737px){body.page .site-header+.site-main .entry-title{padding:initial}}body.page .entry-content,body.page .entry-footer{margin:0 auto;max-width:960px;paddi
ng:3.0517578125rem 1.5625rem}.post-navigation{margin:5em auto;padding:0}.post-navigation a{border-bottom:1px solid #eaeaea;color:#444;display:block;font-weight:600;padding:11px 0 12px;text-transform:none;width:100%}.post-navigation a:hover{color:#21759b}.post-navigation .nav-links{border-top:1px solid #eaeaea;hyphens:auto;word-wrap:break-word}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navigation .nav-next{text-align:right}.pagination .nav-links{text-align:center}.pagination .nav-links .page-numbers{background-color:#f9f9f9;cursor:hand;display:inline-block;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.dots,.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{background:none;font-size:.9em;width:auto}.pagination .nav-links .page-numbers.dots{cursor:inherit}@media screen and (max-width:737px){.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.
prev{font-size:0;min-width:0;padding:0}.pagination .nav-links .page-numbers.next:after,.pagination .nav-links .page-numbers.prev:before{background-color:#f9f9f9;display:inline-block;font-size:1rem;line-height:1.5;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.prev:before{content:"‹"}.pagination .nav-links .page-numbers.next:after{content:"›"}}.pagination .nav-links span.page-numbers{background-color:#f7f7f7;font-weight:700}.search-form .search-field{line-height:normal;margin:0;padding:4px 5px;vertical-align:text-bottom}body.search .gutters .col-12{width:100%}body.search .site-main{margin:0 auto;max-width:960px;padding:0 1.5625rem 3.0517578125rem}.site-content{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-content{padding:0 10px 3.0517578125rem}}@media screen and (max-width:737px){.site-content .site-main{float:none;margin:0;width:auto}}.home .site-content,.page .site-content,.site-content.page{margi
n:auto;max-width:none;padding:0}.site-content .page-title{font-size:20px;font-size:1.25rem;font-weight:400}.site-content .no-results{margin:0 auto 3.0517578125rem;max-width:40em;padding:0 2rem}.site-description{color:hsla(0,0%,100%,.8);font-size:20px;font-size:1.25rem;font-weight:300;margin:-.4rem auto 2rem;text-align:center}.site-header{background:#0073aa;padding:1rem 0;position:relative}.site-header .site-branding{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-header .site-branding{padding:0 10px}}.site-header.home{padding:1.5625rem 1.143rem;text-align:center}.site-title{display:inline-block;font-size:25px;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 2rem 0 0;max-width:none}.site-title a{color:#fff;font-weight:300}.site-title a:active,.site-title a:focus,.site-title a:hover{text-decoration:none}.site-header.home .site-title{display:inherit;font-size:61.035px;font-size:3.8146972656rem;margin:2rem 0 1rem}.widget-area{font-si
ze:12.8px;font-size:.8rem}@media screen and (min-width:480px) and (max-width:768px){.widget-area{display:flex}.widget-area .widget{width:48%}}#wporg-footer{background-color:#f7f7f7;border-top:1px solid #dfdfdf;padding:22px 14px 65px}#wporg-footer,#wporg-footer .wrapper{clear:both;margin:0 auto;overflow:auto}#wporg-footer .wrapper{max-width:930px}#wporg-footer ul{float:left;margin-bottom:20px;margin-left:24px;overflow:auto;padding-left:0;width:135px}@media screen and (min-width:960px){#wporg-footer ul:first-child{margin-left:0}}#wporg-footer ul li{color:#bbb;font-size:14px;list-style-type:none;margin-bottom:1px}#wporg-footer ul li a{text-decoration:none;text-decoration-skip-ink:none}#wporg-footer ul li a:hover{color:#0073aa;text-decoration:underline}#wporg-footer .cip{clear:both;color:#ccc;float:none;font-size:12.8px;font-size:.8rem;letter-spacing:.3em;margin:35px auto 0;text-align:center;text-transform:uppercase}#wporg-footer .cip.cip-image{background:url(//s.w.org/style/images/code
ispoetry.png?1=) 50% no-repeat;background-size:190px 15px;height:15px;text-indent:-9999px;width:190px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),only screen and (min-resolution:144dpi){#wporg-footer .cip.cip-image{background-image:url(//s.w.org/style/images/codeispoetry-2x.png?1=)}}@media screen and (min-width:561px) and (max-width:959px){#wporg-footer .wrapper{max-width:600px}#wporg-footer ul{margin-left:2%;width:32%}#wporg-footer ul:nth-child(3n+1){margin-left:0}#wporg-footer ul:nth-child(4n){clear:both}}@media screen and (max-width:560px){#wporg-footer .wrapper{max-width:360px}#wporg-footer ul{margin-left:4%;width:48%}#wporg-footer ul:nth-child(odd){margin-left:0;clear:both}}#wporg-header{background:#23282d;height:140px;position:relative;text-align:center;width:100%}#wporg-header .wrapper{margin:0 auto;max-width:960px}#wporg-header h1{display:inline-block;margin:auto;width:303px}#wporg-header h1 a{background:url(//s.w.org/
style/images/wporg-logo.svg?3=) 0 no-repeat;background-size:290px 46px;display:block;height:88px;text-indent:-9999px}#wporg-header h2.rosetta{clear:none;color:#dfdfdf;font-family:Georgia,Times New Roman,serif;font-size:30px;margin:0 0 0 60px}#wporg-header h2.rosetta a{border-bottom:none;color:#dfdfdf;display:block;height:52px;line-height:22px;padding:0}#wporg-header h2.rosetta a:hover{text-decoration:none}#wporg-header #wporg-header-menu{background:#23282d;left:-75%;list-style:none;margin:0;max-width:75%;min-width:200px;position:absolute;text-align:left;top:100%;transition:left .3s;z-index:100000}#wporg-header #wporg-header-menu.toggled{left:0}#wporg-header ul li{list-style-type:none;position:relative}#wporg-header ul li a{color:#eee;display:block;font-family:Open Sans,Helvetica,Arial,Liberation Sans,sans-serif;font-size:13px;font-weight:600;height:34px;line-height:34px;margin:0 4px;padding:10px 30px;text-decoration:none}#wporg-header ul li a.subcurrent{font-weight:700}@media (max-w
idth:768px){#wporg-header ul li a{height:auto}}#wporg-header ul li.current-menu-item a,#wporg-header ul li.current_page_parent a,#wporg-header ul li a.current,#wporg-header ul li a:hover{color:#00a0d2}#wporg-header ul li#download,#wporg-header ul li.download{float:right;height:34px;margin-right:14px;overflow:hidden;padding:0 0 34px}@media screen and (max-width:767px){#wporg-header ul li#download,#wporg-header ul li.download{display:block;float:none;margin:10px 20px 20px;padding-bottom:0;height:auto}#wporg-header ul li#download a,#wporg-header ul li.download a{padding:4px 10px;text-align:center}}#wporg-header ul li#download a,#wporg-header ul li.download a{margin:0;padding:0 16px}#wporg-header ul li#download a:hover,#wporg-header ul li.download a:hover{color:#eee}#wporg-header ul li#download.current,#wporg-header ul li#download.current-menu-item,#wporg-header ul li#download .uparrow,#wporg-header ul li.download.current,#wporg-header ul li.download.current-menu-item,#wporg-header ul l
i.download .uparrow{display:none}#wporg-header ul li .nav-submenu{clip:rect(1px,1px,1px,1px);height:1px;left:-2px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;z-index:99999}#wporg-header ul li .nav-submenu li a{display:inline-block;height:24px;line-height:24px;margin:0;white-space:nowrap}@media screen and (min-width:768px){#wporg-header #head-search{float:right;margin-right:14px;padding-top:30px}}#wporg-header #head-search form{border-bottom:1px solid #3f3f3f;display:inline-block;margin-left:60px;width:288px}#wporg-header #head-search form input.text{background:#191e23;border:0;border-radius:0;box-sizing:content-box;color:#b4b9be;float:left;font-family:Open Sans,sans-serif;font-size:12px;height:24px;margin:0;outline:none;padding:3px;vertical-align:top;width:256px}#wporg-header #head-search form input.text::-moz-placeholder{color:#eee}@media screen and (max-width:480px){#wporg-header #head-search form input.text{width:216px}}#wporg-header #head-search form .button{b
ackground:#191e23 url(//s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831) no-repeat 2px 5px;border:none;border-radius:0;box-shadow:none;float:left;height:30px;margin:0;padding:0;text-shadow:none!important;width:26px}@media screen and (max-width:480px){#wporg-header #head-search form{width:248px}}@media screen and (min-width:480px){#wporg-header #head-search form{margin-left:0}}@media screen and (min-width:768px){#wporg-header{height:120px;text-align:inherit}#wporg-header h1{float:left;padding-left:10px}#wporg-header h2.rosetta{float:left;margin-left:0;padding:36px 27px 0}#wporg-header #headline h2{text-rendering:optimizeLegibility}#wporg-header #wporg-header-menu{float:left;height:46px;list-style:none;margin:-15px 0 0;max-width:inherit;min-width:0;padding:0;position:static;width:100%}#wporg-header ul li{float:left;position:relative}#wporg-header ul li a{height:46px;padding:0 6px}#wporg-header ul li a.current~.uparrow{border-bottom:9px solid #f7f7f7;border-left:9px solid tr
ansparent;border-right:9px solid transparent;height:0;margin:-8px auto 0;width:0}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:50%;margin:-8px 0 0 -9px;position:absolute;width:0}#wporg-header ul li .nav-submenu:hover~.uparrow,#wporg-header ul li:hover .nav-submenu~.uparrow{border-bottom:9px solid #32373c;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-10px auto 0;width:0}#wporg-header ul li .nav-submenu{background:#32373c;border:1px solid #32373c;border-top:0;margin-top:-1px;min-width:0}#wporg-header ul li .nav-submenu li{float:none}#wporg-header ul li .nav-submenu li a{height:34px;line-height:34px}#wporg-header .nav-menu .focus>ul,#wporg-header .nav-menu ul li:hover>ul,#wporg-header ul.nav-menu .focus>ul,#wporg-header ul.nav-menu li:hover>ul{clip:inherit;h
eight:inherit;overflow:inherit;width:inherit}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after,#wporg-header ul li a.current~.uparrow{border-bottom-color:#0073aa}}.page-download #wporg-header #download,.page-parent-download #wporg-header #download{display:none}#mobile-menu-button{background:none;border:none;box-shadow:none;display:block;float:left;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;left:10px;line-height:1;padding:1px;position:absolute;text-align:center;text-decoration:inherit;text-shadow:none;top:75px;transition:color .1s ease-in;vertical-align:top;-webkit-font-smoothing:antialiased}#mobile-menu-button:before{border:none;box-sizing:border-box;color:#888;content:"";display:inline-block;float:left;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;vertical-align:middle;-webkit-font-smoothing:antialiased}@media screen and (min-width:768px){#mobile-menu-button{displa
y:none}}#download-mobile{background:#f7f7f7;border-bottom:1px solid #ddd}#download-mobile .wrapper{padding:20px 0;text-align:center}#download-mobile span.download-ready{font-size:1.6em;margin:0 .25em}#download-mobile a.download-button{font-size:1.6em;height:inherit;margin:10px .25em;padding:10px 15px}.pattern-preview__container{padding:2rem 0 0;background:#f3f4f5}.pattern-preview__viewport{position:relative;margin:0 auto;padding:0 20px;max-width:100vw;min-width:320px}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;vertical-align:middle;max-width:100vw}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;clip-path:none;height:auto;margin:initial;overflow:initial;width:auto;bottom:-16px;bottom:-1rem;left:20px;right:20px;padding:8px 16px;background:#fff;border-radius:2px;border:1px solid #d7dade;text-align:center}.pattern-preview__drag-handle{position:absolute;top:0;bottom:0;width:20px}.pattern-preview__dr
ag-handle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{position:absolute;top:calc(50% - 50px);left:6px;padding:0;width:8px;height:100px;appearance:none;cursor:grab;outline:none;background:#7e8993;border-radius:99999px;border:none}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{cursor:grabbing;background:#606a74}.pattern-preview__drag-handle-button:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}body.single-wporg-pattern{box-sizing:border-box;font-size:14px;font-weight:400;line-height:1.2}body.single-wporg-pattern .site-content{margin:auto;max-width:none;padding:0}body.single-wporg-pattern .entry-header{max-width:960px;padding:2rem 0;margin-left:auto;margin-right:auto}body.single-wporg-pattern .entry-header .entry-title{margin-top:0;line-height:1.2}body.single-wporg-pattern .pattern-actions{display:flex;align-items:stretch}body.single-wporg-pattern .pattern-actions but
ton+button{margin-left:2em}body.single-wporg-pattern .entry-content{max-width:960px;margin-left:auto;margin-right:auto}body.single-wporg-pattern .pattern__meta{padding:2rem 0;background:#f3f4f5}body.single-wporg-pattern .pattern__meta>div{max-width:960px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between}body.single-wporg-pattern .pattern__meta .pattern-preview__report{text-align:right}.site-header:not(.home) .search-form{display:flex;align-items:center}.site-header:not(.home) .search-form>input{flex:1;border:0;border-radius:2px 0 0 2px;display:inline-block;font-size:12px;padding:5px 10px;position:relative;width:auto;height:100%}.site-header:not(.home) .search-form button{margin:0;border-radius:0 2px 2px 0;padding:3px 12px;height:unset}.search-form--is-inline .search-form{display:flex;justify-content:space-between;background:#fff}.search-form--is-inline .search-form>label{flex:1}.search-form--is-inline .search-form input{padding:.5rem;background:t
ransparent;border:none;box-shadow:none;width:100%;font-size:14px}@media only screen and (min-width:768px){.search-form--is-inline .search-form input{font-size:16px}}.search-form--is-inline .search-form button{background:transparent;margin-bottom:0;border:0;box-shadow:none;height:inherit;text-shadow:none;color:#32373c}.search-form--is-inline .search-form button:focus{-webkit-box-shadow:0 0 2px 1px #0073aa;box-shadow:0 0 2px 1px #0073aa}.search-form--is-centered .search-form{margin:0 auto}.search-form--is-constrained .search-form{max-width:384px}.search-form--is-muted .search-form{border-color:#d7dade!important}.search-form--is-muted .search-form button,.search-form--is-muted .search-form input{background:#f8f9f9;color:#7e8993}.search-form--has-medium-text .search-form input{font-size:14px}.search-form--has-border .search-form{border:1px solid #7e8993}.section-heading_link,.section-heading_title{margin-bottom:0}.section-heading_title{font-weight:300}.section-heading_title .archive-tit
le-prefix{display:block;font-size:16px;font-size:1rem}.section-heading_link{text-decoration:underline;font-weight:600;margin-top:16px!important}@media only screen and (min-width:768px){.section-heading_link{margin-top:0!important}}.section-heading_description{margin:1rem 0 0}.section-heading_description :last-child{margin-bottom:0}.section-heading--with-space{padding-bottom:16px}.site-title a{text-decoration:none}.site-title a:active,.site-title a:focus,.site-title a:hover{color:#fff}.has-wporg-blue-color{color:#1e8cbe}.has-wporg-blue-background-color{background-color:#1e8cbe}.has-wporg-purple-color{color:#826eb4}.has-wporg-purple-background-color{background-color:#826eb4}.has-wporg-white-color{color:#fff}.has-wporg-white-background-color{background-color:#fff}.home-page .shapes{position:relative;margin:0 auto}.home-page .shapes .parallelogram p:before{font-size:64px;height:64px;left:-16px;position:relative}.home-page .shapes .parallelogram{color:#fff;display:block;margin:0 auto;opa
city:.9;padding:60px 40px;text-align:center;text-decoration:none}.home-page .shapes strong{display:block;font-size:28px;font-weight:300;padding-bottom:15px;padding-top:15px}.home-page .shapes p{color:#fff;font-size:16px;font-weight:300;margin:0}.home-page .shapes u{display:block;font-size:18px;padding-top:15px}@media only screen and (min-width:768px){.home-page .shapes{height:400px}.home-page .shapes .parallelogram{width:50%;position:absolute;padding:50px 90px}}@media only screen and (min-width:960px){.home-page .shapes .parallelogram{-webkit-transform:skew(-15deg);-ms-transform:skew(-15deg);transform:skew(-15deg)}.home-page .shapes .parallelogram:before,.home-page .shapes p{-webkit-transform:skew(15deg);-ms-transform:skew(15deg);transform:skew(15deg)}}@media only screen and (min-width:1200px){.home-page .shapes{margin:0 -60px}}.terms{font-style:italic;font-size:14px}
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsfunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2,10 +2,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> namespace WordPressdotorg\Pattern_Directory\Theme;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+use const WordPressdotorg\Pattern_Directory\Pattern_Post_Type\POST_TYPE;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'wp_head', __NAMESPACE__ . '\generate_block_editor_styles_html' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Sets up theme defaults and registers support for various WordPress features.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,4 +36,66 @@
</span><span class="cx" style="display: block; padding: 0 10px"> array( 'dashicons', 'open-sans' ),
</span><span class="cx" style="display: block; padding: 0 10px"> filemtime( __DIR__ . '/css/style.css' )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ $script_asset_path = dirname( __FILE__ ) . '/build/index.asset.php';
+ if ( is_singular( POST_TYPE ) && file_exists( $script_asset_path ) ) {
+ $script_asset = require( $script_asset_path );
+ wp_enqueue_script(
+ 'wporg-pattern-script',
+ get_theme_file_uri( '/build/index.js' ),
+ $script_asset['dependencies'],
+ $script_asset['version'],
+ true
+ );
+
+ wp_enqueue_style( 'wp-components' );
+
+ wp_set_script_translations( 'wporg-pattern-script', 'wporg-patterns' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Generate styles used in the block pattern preview iframe.
+ * See https://github.com/WordPress/gutenberg/blob/6ad2a433769a4514fc52083e97aa47a0bc9edf07/lib/client-assets.php#L710
+ */
+function generate_block_editor_styles_html() {
+ if ( ! is_singular( POST_TYPE ) ) {
+ return;
+ }
+
+ $handles = array(
+ 'wp-block-editor',
+ 'wp-block-library',
+ 'wp-edit-blocks',
+ );
+
+ $block_registry = \WP_Block_Type_Registry::get_instance();
+
+ foreach ( $block_registry->get_all_registered() as $block_type ) {
+ if ( ! empty( $block_type->style ) ) {
+ $handles[] = $block_type->style;
+ }
+
+ if ( ! empty( $block_type->editor_style ) ) {
+ $handles[] = $block_type->editor_style;
+ }
+ }
+
+ $handles = array_unique( $handles );
+ $done = wp_styles()->done;
+
+ ob_start();
+
+ wp_styles()->done = array();
+ wp_styles()->do_items( $handles );
+ wp_styles()->done = $done;
+
+ wp_add_inline_script(
+ 'wporg-pattern-script',
+ sprintf(
+ 'window.__editorStyles = JSON.parse( decodeURIComponent( \'%s\' ) );',
+ rawurlencode( wp_json_encode( array( 'html' => ob_get_clean() ) ) )
+ ),
+ 'before'
+ );
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json 2021-03-23 02:33:04 UTC (rev 10840)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,10 +12,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "scripts": {
</span><span class="cx" style="display: block; padding: 0 10px"> "start": "grunt watch",
</span><span class="cx" style="display: block; padding: 0 10px"> "build": "grunt build",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "build:css": "grunt css",
+ "build:js": "grunt js",
</ins><span class="cx" style="display: block; padding: 0 10px"> "dev": "grunt",
</span><span class="cx" style="display: block; padding: 0 10px"> "format:js": "echo \"No JS.\"",
</span><span class="cx" style="display: block; padding: 0 10px"> "lint:css": "wp-scripts lint-style css",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "lint:js": "echo \"No JS.\"",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "lint:js": "wp-scripts lint-js src",
+ "format:js": "wp-scripts format-js src",
</ins><span class="cx" style="display: block; padding: 0 10px"> "packages-update": "wp-scripts packages-update"
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> "browserslist": [
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -22,8 +25,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "extends @wordpress/browserslist-config"
</span><span class="cx" style="display: block; padding: 0 10px"> ],
</span><span class="cx" style="display: block; padding: 0 10px"> "devDependencies": {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "@wordpress/block-editor": "5.3.0",
</ins><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/browserslist-config": "3.0.1",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "@wordpress/scripts": "14.0.0",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "@wordpress/components": "13.0.0",
+ "@wordpress/compose": "3.25.0",
+ "@wordpress/element": "2.20.0",
+ "@wordpress/i18n": "3.19.0",
+ "@wordpress/keycodes": "2.19.0",
+ "@wordpress/scripts": "14.0.1",
</ins><span class="cx" style="display: block; padding: 0 10px"> "autoprefixer": "9.8.6",
</span><span class="cx" style="display: block; padding: 0 10px"> "cssnano": "4.1.10",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt": "1.3.0",
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,9 +40,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-postcss": "0.9.0",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-sass": "3.1.0",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-sass-globbing": "1.5.1",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "sass": "1.32.8",
- "pixrem": "5.0.0"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "grunt-webpack": "4.0.2",
+ "pixrem": "5.0.0",
+ "react-use-gesture": "9.1.3",
+ "sass": "1.32.8"
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "eslintConfig": {
+ "extends": "../../../../.eslintrc.js",
+ "globals": {
+ "wporgBlockPattern": "readonly"
+ }
+ },
+ "prettier": "../../../../.prettierrc.js",
</ins><span class="cx" style="display: block; padding: 0 10px"> "stylelint": {
</span><span class="cx" style="display: block; padding: 0 10px"> "extends": "../../../../.stylelintrc",
</span><span class="cx" style="display: block; padding: 0 10px"> "ignoreFiles": ["**/*.css", "**/*.css.map"]
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssinglewporgpatternphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,70 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * The template for displaying all single posts.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
+ *
+ * @package WordPressdotorg\Theme
+ */
+
+namespace WordPressdotorg\Theme;
+
+get_header();
+?>
+
+ <main id="main" class="site-main col-12" role="main">
+
+ <?php
+ while ( have_posts() ) :
+ the_post();
+ ?>
+
+ <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+ <header class="entry-header">
+ <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+ <p>A large hero section with an example background image and a heading in the center.</p>
+ <div class="pattern-actions">
+ <button class="button button-primary">Copy Pattern</button>
+ <button class="button">Add to favorites</button>
+ </div>
+ </header><!-- .entry-header -->
+
+ <div class="pattern-preview__container" hidden>
+ <?php echo rawurlencode( wp_json_encode( get_the_content() ) ); ?>
+ </div>
+
+ <div class="pattern__meta">
+ <div>
+ <div class="pattern__categories">
+ <?php
+ $categories_list = get_the_term_list( get_the_ID(), 'wporg-pattern-category', '', ', ' );
+ if ( $categories_list ) {
+ /* translators: 1: list of pattern categories. */
+ printf( esc_html__( 'Categories: %1$s', 'wporg-patterns' ), $categories_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+ }
+ ?>
+ </div>
+ <div class="pattern__report">
+ <button class="button">Report this pattern</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="entry-content">
+ <h2>More from this designer</h2>
+ <div class="pattern-grid">
+ <ul>
+ <li>Pattern A</li>
+ <li>Pattern B</li>
+ <li>Pattern C</li>
+ </ul>
+ </div>
+ </div><!-- .entry-content -->
+ </article><!-- #post-## -->
+
+ <?php endwhile; ?>
+
+ </main><!-- #main -->
+
+<?php
+get_footer();
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewcanvasjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,38 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import {
+ /* eslint-disable-next-line @wordpress/no-unsafe-wp-apis -- Experimental is OK. */
+ __unstableIframe as Iframe,
+} from '@wordpress/block-editor';
+
+function Canvas( { html } ) {
+ const style = {
+ width: '100%',
+ height: '50vh',
+ minHeight: '600px',
+ overflowY: 'auto',
+ };
+ const extraIframeStyles =
+ // @todo - Should we keep the TT1 style? Load css from a local file?
+ '<link rel="stylesheet" id="twenty-twenty-one-style-css" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css?ver=1.2" media="all" />' +
+ '<style>body{pointer-events:none;display: flex;align-items: center;justify-content: center;min-height: 100vh;} body > div {width: 100%}</style>';
+
+ return (
+ <div>
+ <Iframe
+ className="pattern-preview__viewport-iframe"
+ style={ style }
+ headHTML={ window.__editorStyles.html + extraIframeStyles }
+ >
+ <div
+ dangerouslySetInnerHTML={ {
+ __html: html,
+ } }
+ />
+ </Iframe>
+ </div>
+ );
+}
+
+export default Canvas;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewdraghandlejs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/drag-handle.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/drag-handle.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/drag-handle.js 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,45 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import { useDrag } from 'react-use-gesture';
+
+/**
+ * WordPress dependencies
+ */
+import { LEFT, RIGHT } from '@wordpress/keycodes';
+
+function DragHandle( { label, className, onDragChange, direction = 'left', ...props } ) {
+ const dragGestures = useDrag( ( { delta, dragging } ) => {
+ const multiplier = direction === 'left' ? -2 : 2;
+ if ( dragging ) {
+ onDragChange( delta[ 0 ] * multiplier );
+ }
+ } );
+
+ const onKeyDown = ( event ) => {
+ const { keyCode } = event;
+
+ if ( ( direction === 'left' && keyCode === LEFT ) || ( direction === 'right' && keyCode === RIGHT ) ) {
+ onDragChange( 20 );
+ } else if (
+ ( direction === 'left' && keyCode === RIGHT ) ||
+ ( direction === 'right' && keyCode === LEFT )
+ ) {
+ onDragChange( -20 );
+ }
+ };
+
+ return (
+ <div className={ `pattern-preview__drag-handle ${ className }` }>
+ <button
+ className="pattern-preview__drag-handle-button"
+ aria-label={ label }
+ { ...props }
+ onKeyDown={ onKeyDown }
+ { ...dragGestures() }
+ />
+ </div>
+ );
+}
+
+export default DragHandle;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/index.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/index.js 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,58 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Canvas from './canvas';
+import DragHandle from './drag-handle';
+
+/* eslint-disable jsx-a11y/anchor-is-valid -- These are just placeholders. */
+
+const INITIAL_WIDTH = 1200;
+
+function PatternPreview( { blockContent } ) {
+ const instanceId = useInstanceId( PatternPreview );
+ const [ width, setWidth ] = useState( window.innerWidth < INITIAL_WIDTH ? window.innerWidth : INITIAL_WIDTH );
+ const onDragChange = useCallback(
+ ( delta ) => {
+ setWidth( ( value ) => value + delta );
+ },
+ [ setWidth ]
+ );
+
+ return (
+ <>
+ <div className="pattern-preview__viewport" style={ { width } }>
+ <DragHandle
+ label={ __( 'Drag to resize', 'wporg-patterns' ) }
+ className="is-left"
+ onDragChange={ onDragChange }
+ direction="left"
+ aria-describedby={ `pattern-preview__resize-help-${ instanceId }` }
+ />
+ <Canvas html={ blockContent } />
+ <DragHandle
+ label={ __( 'Drag to resize', 'wporg-patterns' ) }
+ className="is-right"
+ onDragChange={ onDragChange }
+ direction="right"
+ aria-describedby={ `pattern-preview__resize-help-${ instanceId }` }
+ />
+ <VisuallyHidden
+ id={ `pattern-preview__resize-help-${ instanceId }` }
+ className="pattern-preview__resize-help"
+ >
+ { __( 'Use left and right arrow keys to resize the preview.', 'wporg-patterns' ) }
+ </VisuallyHidden>
+ </div>
+ </>
+ );
+}
+
+export default PatternPreview;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js 2021-03-24 16:36:42 UTC (rev 10841)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,22 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PatternPreview from './components/pattern-preview';
+
+// Load the preview into any awaiting preview container.
+const previewContainers = document.querySelectorAll( '.pattern-preview__container' );
+for ( let i = 0; i < previewContainers.length; i++ ) {
+ const container = previewContainers[ i ];
+ const blockContent = JSON.parse( decodeURIComponent( container.innerText ) );
+ // Use `wp.blocks.parse` to convert HTML to block objects (for use in editor), if needed.
+
+ render( <PatternPreview blockContent={ blockContent } />, container, () => {
+ // This callback is called after the render to unhide the container.
+ container.hidden = false;
+ } );
+}
</ins></span></pre>
</div>
</div>
</body>
</html>