| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 /******/ (() => { // webpackBootstrap 2 /******/ var __webpack_modules__ = ({ 3 4 /***/ 66: 5 /***/ ((module) => { 6 7 "use strict"; 8 9 10 var isMergeableObject = function isMergeableObject(value) { 11 return isNonNullObject(value) 12 && !isSpecial(value) 13 }; 14 15 function isNonNullObject(value) { 16 return !!value && typeof value === 'object' 17 } 18 19 function isSpecial(value) { 20 var stringValue = Object.prototype.toString.call(value); 21 22 return stringValue === '[object RegExp]' 23 || stringValue === '[object Date]' 24 || isReactElement(value) 25 } 26 27 // see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25 28 var canUseSymbol = typeof Symbol === 'function' && Symbol.for; 29 var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7; 30 31 function isReactElement(value) { 32 return value.$$typeof === REACT_ELEMENT_TYPE 33 } 34 35 function emptyTarget(val) { 36 return Array.isArray(val) ? [] : {} 37 } 38 39 function cloneUnlessOtherwiseSpecified(value, options) { 40 return (options.clone !== false && options.isMergeableObject(value)) 41 ? deepmerge(emptyTarget(value), value, options) 42 : value 43 } 44 45 function defaultArrayMerge(target, source, options) { 46 return target.concat(source).map(function(element) { 47 return cloneUnlessOtherwiseSpecified(element, options) 48 }) 49 } 50 51 function getMergeFunction(key, options) { 52 if (!options.customMerge) { 53 return deepmerge 54 } 55 var customMerge = options.customMerge(key); 56 return typeof customMerge === 'function' ? customMerge : deepmerge 57 } 58 59 function getEnumerableOwnPropertySymbols(target) { 60 return Object.getOwnPropertySymbols 61 ? Object.getOwnPropertySymbols(target).filter(function(symbol) { 62 return Object.propertyIsEnumerable.call(target, symbol) 63 }) 64 : [] 65 } 66 67 function getKeys(target) { 68 return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target)) 69 } 70 71 function propertyIsOnObject(object, property) { 72 try { 73 return property in object 74 } catch(_) { 75 return false 76 } 77 } 78 79 // Protects from prototype poisoning and unexpected merging up the prototype chain. 80 function propertyIsUnsafe(target, key) { 81 return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet, 82 && !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain, 83 && Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable. 84 } 85 86 function mergeObject(target, source, options) { 87 var destination = {}; 88 if (options.isMergeableObject(target)) { 89 getKeys(target).forEach(function(key) { 90 destination[key] = cloneUnlessOtherwiseSpecified(target[key], options); 91 }); 92 } 93 getKeys(source).forEach(function(key) { 94 if (propertyIsUnsafe(target, key)) { 95 return 96 } 97 98 if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) { 99 destination[key] = getMergeFunction(key, options)(target[key], source[key], options); 100 } else { 101 destination[key] = cloneUnlessOtherwiseSpecified(source[key], options); 102 } 103 }); 104 return destination 105 } 106 107 function deepmerge(target, source, options) { 108 options = options || {}; 109 options.arrayMerge = options.arrayMerge || defaultArrayMerge; 110 options.isMergeableObject = options.isMergeableObject || isMergeableObject; 111 // cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge() 112 // implementations can use it. The caller may not replace it. 113 options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified; 114 115 var sourceIsArray = Array.isArray(source); 116 var targetIsArray = Array.isArray(target); 117 var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray; 118 119 if (!sourceAndTargetTypesMatch) { 120 return cloneUnlessOtherwiseSpecified(source, options) 121 } else if (sourceIsArray) { 122 return options.arrayMerge(target, source, options) 123 } else { 124 return mergeObject(target, source, options) 125 } 126 } 127 128 deepmerge.all = function deepmergeAll(array, options) { 129 if (!Array.isArray(array)) { 130 throw new Error('first argument should be an array') 131 } 132 133 return array.reduce(function(prev, next) { 134 return deepmerge(prev, next, options) 135 }, {}) 136 }; 137 138 var deepmerge_1 = deepmerge; 139 140 module.exports = deepmerge_1; 141 142 143 /***/ }), 144 145 /***/ 83: 146 /***/ ((__unused_webpack_module, exports, __webpack_require__) => { 147 148 "use strict"; 149 /** 150 * @license React 151 * use-sync-external-store-shim.production.js 152 * 153 * Copyright (c) Meta Platforms, Inc. and affiliates. 154 * 155 * This source code is licensed under the MIT license found in the 156 * LICENSE file in the root directory of this source tree. 157 */ 158 159 160 var React = __webpack_require__(1609); 161 function is(x, y) { 162 return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y); 163 } 164 var objectIs = "function" === typeof Object.is ? Object.is : is, 165 useState = React.useState, 166 useEffect = React.useEffect, 167 useLayoutEffect = React.useLayoutEffect, 168 useDebugValue = React.useDebugValue; 169 function useSyncExternalStore$2(subscribe, getSnapshot) { 170 var value = getSnapshot(), 171 _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }), 172 inst = _useState[0].inst, 173 forceUpdate = _useState[1]; 174 useLayoutEffect( 175 function () { 176 inst.value = value; 177 inst.getSnapshot = getSnapshot; 178 checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); 179 }, 180 [subscribe, value, getSnapshot] 181 ); 182 useEffect( 183 function () { 184 checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); 185 return subscribe(function () { 186 checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst }); 187 }); 188 }, 189 [subscribe] 190 ); 191 useDebugValue(value); 192 return value; 193 } 194 function checkIfSnapshotChanged(inst) { 195 var latestGetSnapshot = inst.getSnapshot; 196 inst = inst.value; 197 try { 198 var nextValue = latestGetSnapshot(); 199 return !objectIs(inst, nextValue); 200 } catch (error) { 201 return !0; 202 } 203 } 204 function useSyncExternalStore$1(subscribe, getSnapshot) { 205 return getSnapshot(); 206 } 207 var shim = 208 "undefined" === typeof window || 209 "undefined" === typeof window.document || 210 "undefined" === typeof window.document.createElement 211 ? useSyncExternalStore$1 212 : useSyncExternalStore$2; 213 exports.useSyncExternalStore = 214 void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim; 215 216 217 /***/ }), 218 219 /***/ 422: 220 /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 221 222 "use strict"; 223 224 225 if (true) { 226 module.exports = __webpack_require__(83); 227 } else {} 228 229 230 /***/ }), 231 232 /***/ 1178: 233 /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 234 235 "use strict"; 236 237 238 if (true) { 239 module.exports = __webpack_require__(2950); 240 } else {} 241 242 243 /***/ }), 244 245 /***/ 1609: 246 /***/ ((module) => { 247 248 "use strict"; 249 module.exports = window["React"]; 250 251 /***/ }), 252 253 /***/ 1880: 254 /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 255 256 "use strict"; 257 258 259 var reactIs = __webpack_require__(1178); 260 261 /** 262 * Copyright 2015, Yahoo! Inc. 263 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. 264 */ 265 var REACT_STATICS = { 266 childContextTypes: true, 267 contextType: true, 268 contextTypes: true, 269 defaultProps: true, 270 displayName: true, 271 getDefaultProps: true, 272 getDerivedStateFromError: true, 273 getDerivedStateFromProps: true, 274 mixins: true, 275 propTypes: true, 276 type: true 277 }; 278 var KNOWN_STATICS = { 279 name: true, 280 length: true, 281 prototype: true, 282 caller: true, 283 callee: true, 284 arguments: true, 285 arity: true 286 }; 287 var FORWARD_REF_STATICS = { 288 '$$typeof': true, 289 render: true, 290 defaultProps: true, 291 displayName: true, 292 propTypes: true 293 }; 294 var MEMO_STATICS = { 295 '$$typeof': true, 296 compare: true, 297 defaultProps: true, 298 displayName: true, 299 propTypes: true, 300 type: true 301 }; 302 var TYPE_STATICS = {}; 303 TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS; 304 TYPE_STATICS[reactIs.Memo] = MEMO_STATICS; 305 306 function getStatics(component) { 307 // React v16.11 and below 308 if (reactIs.isMemo(component)) { 309 return MEMO_STATICS; 310 } // React v16.12 and above 311 312 313 return TYPE_STATICS[component['$$typeof']] || REACT_STATICS; 314 } 315 316 var defineProperty = Object.defineProperty; 317 var getOwnPropertyNames = Object.getOwnPropertyNames; 318 var getOwnPropertySymbols = Object.getOwnPropertySymbols; 319 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; 320 var getPrototypeOf = Object.getPrototypeOf; 321 var objectPrototype = Object.prototype; 322 function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) { 323 if (typeof sourceComponent !== 'string') { 324 // don't hoist over string (html) components 325 if (objectPrototype) { 326 var inheritedComponent = getPrototypeOf(sourceComponent); 327 328 if (inheritedComponent && inheritedComponent !== objectPrototype) { 329 hoistNonReactStatics(targetComponent, inheritedComponent, blacklist); 330 } 331 } 332 333 var keys = getOwnPropertyNames(sourceComponent); 334 335 if (getOwnPropertySymbols) { 336 keys = keys.concat(getOwnPropertySymbols(sourceComponent)); 337 } 338 339 var targetStatics = getStatics(targetComponent); 340 var sourceStatics = getStatics(sourceComponent); 341 342 for (var i = 0; i < keys.length; ++i) { 343 var key = keys[i]; 344 345 if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) { 346 var descriptor = getOwnPropertyDescriptor(sourceComponent, key); 347 348 try { 349 // Avoid failures from read-only properties 350 defineProperty(targetComponent, key, descriptor); 351 } catch (e) {} 352 } 353 } 354 } 355 356 return targetComponent; 357 } 358 359 module.exports = hoistNonReactStatics; 360 361 362 /***/ }), 363 364 /***/ 2950: 365 /***/ ((__unused_webpack_module, exports) => { 366 367 "use strict"; 368 /** @license React v16.13.1 369 * react-is.production.min.js 370 * 371 * Copyright (c) Facebook, Inc. and its affiliates. 372 * 373 * This source code is licensed under the MIT license found in the 374 * LICENSE file in the root directory of this source tree. 375 */ 376 377 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b? 378 Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119; 379 function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d; 380 exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t}; 381 exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p}; 382 exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z; 383 384 385 /***/ }), 386 387 /***/ 7734: 388 /***/ ((module) => { 389 390 "use strict"; 391 392 393 // do not edit .js files directly - edit src/index.jst 394 395 396 var envHasBigInt64Array = typeof BigInt64Array !== 'undefined'; 397 398 399 module.exports = function equal(a, b) { 400 if (a === b) return true; 401 402 if (a && b && typeof a == 'object' && typeof b == 'object') { 403 if (a.constructor !== b.constructor) return false; 404 405 var length, i, keys; 406 if (Array.isArray(a)) { 407 length = a.length; 408 if (length != b.length) return false; 409 for (i = length; i-- !== 0;) 410 if (!equal(a[i], b[i])) return false; 411 return true; 412 } 413 414 415 if ((a instanceof Map) && (b instanceof Map)) { 416 if (a.size !== b.size) return false; 417 for (i of a.entries()) 418 if (!b.has(i[0])) return false; 419 for (i of a.entries()) 420 if (!equal(i[1], b.get(i[0]))) return false; 421 return true; 422 } 423 424 if ((a instanceof Set) && (b instanceof Set)) { 425 if (a.size !== b.size) return false; 426 for (i of a.entries()) 427 if (!b.has(i[0])) return false; 428 return true; 429 } 430 431 if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) { 432 length = a.length; 433 if (length != b.length) return false; 434 for (i = length; i-- !== 0;) 435 if (a[i] !== b[i]) return false; 436 return true; 437 } 438 439 440 if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags; 441 if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf(); 442 if (a.toString !== Object.prototype.toString) return a.toString() === b.toString(); 443 444 keys = Object.keys(a); 445 length = keys.length; 446 if (length !== Object.keys(b).length) return false; 447 448 for (i = length; i-- !== 0;) 449 if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false; 450 451 for (i = length; i-- !== 0;) { 452 var key = keys[i]; 453 454 if (!equal(a[key], b[key])) return false; 455 } 456 457 return true; 458 } 459 460 // true if both NaN, false otherwise 461 return a!==a && b!==b; 462 }; 463 464 465 /***/ }), 466 467 /***/ 8924: 468 /***/ ((__unused_webpack_module, exports) => { 469 470 // Copyright (c) 2014 Rafael Caricio. All rights reserved. 471 // Use of this source code is governed by a BSD-style license that can be 472 // found in the LICENSE file. 473 474 var GradientParser = {}; 475 476 GradientParser.parse = (function() { 477 478 var tokens = { 479 linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i, 480 repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i, 481 radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i, 482 repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i, 483 sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i, 484 extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/, 485 positionKeywords: /^(left|center|right|top|bottom)/i, 486 pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/, 487 percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/, 488 emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/, 489 angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/, 490 startCall: /^\(/, 491 endCall: /^\)/, 492 comma: /^,/, 493 hexColor: /^\#([0-9a-fA-F]+)/, 494 literalColor: /^([a-zA-Z]+)/, 495 rgbColor: /^rgb/i, 496 rgbaColor: /^rgba/i, 497 number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/ 498 }; 499 500 var input = ''; 501 502 function error(msg) { 503 var err = new Error(input + ': ' + msg); 504 err.source = input; 505 throw err; 506 } 507 508 function getAST() { 509 var ast = matchListDefinitions(); 510 511 if (input.length > 0) { 512 error('Invalid input not EOF'); 513 } 514 515 return ast; 516 } 517 518 function matchListDefinitions() { 519 return matchListing(matchDefinition); 520 } 521 522 function matchDefinition() { 523 return matchGradient( 524 'linear-gradient', 525 tokens.linearGradient, 526 matchLinearOrientation) || 527 528 matchGradient( 529 'repeating-linear-gradient', 530 tokens.repeatingLinearGradient, 531 matchLinearOrientation) || 532 533 matchGradient( 534 'radial-gradient', 535 tokens.radialGradient, 536 matchListRadialOrientations) || 537 538 matchGradient( 539 'repeating-radial-gradient', 540 tokens.repeatingRadialGradient, 541 matchListRadialOrientations); 542 } 543 544 function matchGradient(gradientType, pattern, orientationMatcher) { 545 return matchCall(pattern, function(captures) { 546 547 var orientation = orientationMatcher(); 548 if (orientation) { 549 if (!scan(tokens.comma)) { 550 error('Missing comma before color stops'); 551 } 552 } 553 554 return { 555 type: gradientType, 556 orientation: orientation, 557 colorStops: matchListing(matchColorStop) 558 }; 559 }); 560 } 561 562 function matchCall(pattern, callback) { 563 var captures = scan(pattern); 564 565 if (captures) { 566 if (!scan(tokens.startCall)) { 567 error('Missing ('); 568 } 569 570 result = callback(captures); 571 572 if (!scan(tokens.endCall)) { 573 error('Missing )'); 574 } 575 576 return result; 577 } 578 } 579 580 function matchLinearOrientation() { 581 return matchSideOrCorner() || 582 matchAngle(); 583 } 584 585 function matchSideOrCorner() { 586 return match('directional', tokens.sideOrCorner, 1); 587 } 588 589 function matchAngle() { 590 return match('angular', tokens.angleValue, 1); 591 } 592 593 function matchListRadialOrientations() { 594 var radialOrientations, 595 radialOrientation = matchRadialOrientation(), 596 lookaheadCache; 597 598 if (radialOrientation) { 599 radialOrientations = []; 600 radialOrientations.push(radialOrientation); 601 602 lookaheadCache = input; 603 if (scan(tokens.comma)) { 604 radialOrientation = matchRadialOrientation(); 605 if (radialOrientation) { 606 radialOrientations.push(radialOrientation); 607 } else { 608 input = lookaheadCache; 609 } 610 } 611 } 612 613 return radialOrientations; 614 } 615 616 function matchRadialOrientation() { 617 var radialType = matchCircle() || 618 matchEllipse(); 619 620 if (radialType) { 621 radialType.at = matchAtPosition(); 622 } else { 623 var defaultPosition = matchPositioning(); 624 if (defaultPosition) { 625 radialType = { 626 type: 'default-radial', 627 at: defaultPosition 628 }; 629 } 630 } 631 632 return radialType; 633 } 634 635 function matchCircle() { 636 var circle = match('shape', /^(circle)/i, 0); 637 638 if (circle) { 639 circle.style = matchLength() || matchExtentKeyword(); 640 } 641 642 return circle; 643 } 644 645 function matchEllipse() { 646 var ellipse = match('shape', /^(ellipse)/i, 0); 647 648 if (ellipse) { 649 ellipse.style = matchDistance() || matchExtentKeyword(); 650 } 651 652 return ellipse; 653 } 654 655 function matchExtentKeyword() { 656 return match('extent-keyword', tokens.extentKeywords, 1); 657 } 658 659 function matchAtPosition() { 660 if (match('position', /^at/, 0)) { 661 var positioning = matchPositioning(); 662 663 if (!positioning) { 664 error('Missing positioning value'); 665 } 666 667 return positioning; 668 } 669 } 670 671 function matchPositioning() { 672 var location = matchCoordinates(); 673 674 if (location.x || location.y) { 675 return { 676 type: 'position', 677 value: location 678 }; 679 } 680 } 681 682 function matchCoordinates() { 683 return { 684 x: matchDistance(), 685 y: matchDistance() 686 }; 687 } 688 689 function matchListing(matcher) { 690 var captures = matcher(), 691 result = []; 692 693 if (captures) { 694 result.push(captures); 695 while (scan(tokens.comma)) { 696 captures = matcher(); 697 if (captures) { 698 result.push(captures); 699 } else { 700 error('One extra comma'); 701 } 702 } 703 } 704 705 return result; 706 } 707 708 function matchColorStop() { 709 var color = matchColor(); 710 711 if (!color) { 712 error('Expected color definition'); 713 } 714 715 color.length = matchDistance(); 716 return color; 717 } 718 719 function matchColor() { 720 return matchHexColor() || 721 matchRGBAColor() || 722 matchRGBColor() || 723 matchLiteralColor(); 724 } 725 726 function matchLiteralColor() { 727 return match('literal', tokens.literalColor, 0); 728 } 729 730 function matchHexColor() { 731 return match('hex', tokens.hexColor, 1); 732 } 733 734 function matchRGBColor() { 735 return matchCall(tokens.rgbColor, function() { 736 return { 737 type: 'rgb', 738 value: matchListing(matchNumber) 739 }; 740 }); 741 } 742 743 function matchRGBAColor() { 744 return matchCall(tokens.rgbaColor, function() { 745 return { 746 type: 'rgba', 747 value: matchListing(matchNumber) 748 }; 749 }); 750 } 751 752 function matchNumber() { 753 return scan(tokens.number)[1]; 754 } 755 756 function matchDistance() { 757 return match('%', tokens.percentageValue, 1) || 758 matchPositionKeyword() || 759 matchLength(); 760 } 761 762 function matchPositionKeyword() { 763 return match('position-keyword', tokens.positionKeywords, 1); 764 } 765 766 function matchLength() { 767 return match('px', tokens.pixelValue, 1) || 768 match('em', tokens.emValue, 1); 769 } 770 771 function match(type, pattern, captureIndex) { 772 var captures = scan(pattern); 773 if (captures) { 774 return { 775 type: type, 776 value: captures[captureIndex] 777 }; 778 } 779 } 780 781 function scan(regexp) { 782 var captures, 783 blankCaptures; 784 785 blankCaptures = /^[\n\r\t\s]+/.exec(input); 786 if (blankCaptures) { 787 consume(blankCaptures[0].length); 788 } 789 790 captures = regexp.exec(input); 791 if (captures) { 792 consume(captures[0].length); 793 } 794 795 return captures; 796 } 797 798 function consume(size) { 799 input = input.substr(size); 800 } 801 802 return function(code) { 803 input = code.toString(); 804 return getAST(); 805 }; 806 })(); 807 808 exports.parse = (GradientParser || {}).parse; 809 810 811 /***/ }), 812 813 /***/ 9664: 814 /***/ ((module) => { 815 816 module.exports = 817 /******/ (function(modules) { // webpackBootstrap 818 /******/ // The module cache 819 /******/ var installedModules = {}; 820 /******/ 821 /******/ // The require function 822 /******/ function __nested_webpack_require_187__(moduleId) { 823 /******/ 824 /******/ // Check if module is in cache 825 /******/ if(installedModules[moduleId]) 826 /******/ return installedModules[moduleId].exports; 827 /******/ 828 /******/ // Create a new module (and put it into the cache) 829 /******/ var module = installedModules[moduleId] = { 830 /******/ exports: {}, 831 /******/ id: moduleId, 832 /******/ loaded: false 833 /******/ }; 834 /******/ 835 /******/ // Execute the module function 836 /******/ modules[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_187__); 837 /******/ 838 /******/ // Flag the module as loaded 839 /******/ module.loaded = true; 840 /******/ 841 /******/ // Return the exports of the module 842 /******/ return module.exports; 843 /******/ } 844 /******/ 845 /******/ 846 /******/ // expose the modules object (__webpack_modules__) 847 /******/ __nested_webpack_require_187__.m = modules; 848 /******/ 849 /******/ // expose the module cache 850 /******/ __nested_webpack_require_187__.c = installedModules; 851 /******/ 852 /******/ // __webpack_public_path__ 853 /******/ __nested_webpack_require_187__.p = ""; 854 /******/ 855 /******/ // Load entry module and return exports 856 /******/ return __nested_webpack_require_187__(0); 857 /******/ }) 858 /************************************************************************/ 859 /******/ ([ 860 /* 0 */ 861 /***/ (function(module, exports, __nested_webpack_require_1468__) { 862 863 module.exports = __nested_webpack_require_1468__(1); 864 865 866 /***/ }), 867 /* 1 */ 868 /***/ (function(module, exports, __nested_webpack_require_1587__) { 869 870 'use strict'; 871 872 Object.defineProperty(exports, "__esModule", { 873 value: true 874 }); 875 876 var _utils = __nested_webpack_require_1587__(2); 877 878 Object.defineProperty(exports, 'combineChunks', { 879 enumerable: true, 880 get: function get() { 881 return _utils.combineChunks; 882 } 883 }); 884 Object.defineProperty(exports, 'fillInChunks', { 885 enumerable: true, 886 get: function get() { 887 return _utils.fillInChunks; 888 } 889 }); 890 Object.defineProperty(exports, 'findAll', { 891 enumerable: true, 892 get: function get() { 893 return _utils.findAll; 894 } 895 }); 896 Object.defineProperty(exports, 'findChunks', { 897 enumerable: true, 898 get: function get() { 899 return _utils.findChunks; 900 } 901 }); 902 903 /***/ }), 904 /* 2 */ 905 /***/ (function(module, exports) { 906 907 'use strict'; 908 909 Object.defineProperty(exports, "__esModule", { 910 value: true 911 }); 912 913 914 /** 915 * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word. 916 * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean }) 917 */ 918 var findAll = exports.findAll = function findAll(_ref) { 919 var autoEscape = _ref.autoEscape, 920 _ref$caseSensitive = _ref.caseSensitive, 921 caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive, 922 _ref$findChunks = _ref.findChunks, 923 findChunks = _ref$findChunks === undefined ? defaultFindChunks : _ref$findChunks, 924 sanitize = _ref.sanitize, 925 searchWords = _ref.searchWords, 926 textToHighlight = _ref.textToHighlight; 927 return fillInChunks({ 928 chunksToHighlight: combineChunks({ 929 chunks: findChunks({ 930 autoEscape: autoEscape, 931 caseSensitive: caseSensitive, 932 sanitize: sanitize, 933 searchWords: searchWords, 934 textToHighlight: textToHighlight 935 }) 936 }), 937 totalLength: textToHighlight ? textToHighlight.length : 0 938 }); 939 }; 940 941 /** 942 * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks. 943 * @return {start:number, end:number}[] 944 */ 945 946 947 var combineChunks = exports.combineChunks = function combineChunks(_ref2) { 948 var chunks = _ref2.chunks; 949 950 chunks = chunks.sort(function (first, second) { 951 return first.start - second.start; 952 }).reduce(function (processedChunks, nextChunk) { 953 // First chunk just goes straight in the array... 954 if (processedChunks.length === 0) { 955 return [nextChunk]; 956 } else { 957 // ... subsequent chunks get checked to see if they overlap... 958 var prevChunk = processedChunks.pop(); 959 if (nextChunk.start <= prevChunk.end) { 960 // It may be the case that prevChunk completely surrounds nextChunk, so take the 961 // largest of the end indeces. 962 var endIndex = Math.max(prevChunk.end, nextChunk.end); 963 processedChunks.push({ highlight: false, start: prevChunk.start, end: endIndex }); 964 } else { 965 processedChunks.push(prevChunk, nextChunk); 966 } 967 return processedChunks; 968 } 969 }, []); 970 971 return chunks; 972 }; 973 974 /** 975 * Examine text for any matches. 976 * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}). 977 * @return {start:number, end:number}[] 978 */ 979 var defaultFindChunks = function defaultFindChunks(_ref3) { 980 var autoEscape = _ref3.autoEscape, 981 caseSensitive = _ref3.caseSensitive, 982 _ref3$sanitize = _ref3.sanitize, 983 sanitize = _ref3$sanitize === undefined ? defaultSanitize : _ref3$sanitize, 984 searchWords = _ref3.searchWords, 985 textToHighlight = _ref3.textToHighlight; 986 987 textToHighlight = sanitize(textToHighlight); 988 989 return searchWords.filter(function (searchWord) { 990 return searchWord; 991 }) // Remove empty words 992 .reduce(function (chunks, searchWord) { 993 searchWord = sanitize(searchWord); 994 995 if (autoEscape) { 996 searchWord = escapeRegExpFn(searchWord); 997 } 998 999 var regex = new RegExp(searchWord, caseSensitive ? 'g' : 'gi'); 1000 1001 var match = void 0; 1002 while (match = regex.exec(textToHighlight)) { 1003 var _start = match.index; 1004 var _end = regex.lastIndex; 1005 // We do not return zero-length matches 1006 if (_end > _start) { 1007 chunks.push({ highlight: false, start: _start, end: _end }); 1008 } 1009 1010 // Prevent browsers like Firefox from getting stuck in an infinite loop 1011 // See http://www.regexguru.com/2008/04/watch-out-for-zero-length-matches/ 1012 if (match.index === regex.lastIndex) { 1013 regex.lastIndex++; 1014 } 1015 } 1016 1017 return chunks; 1018 }, []); 1019 }; 1020 // Allow the findChunks to be overridden in findAll, 1021 // but for backwards compatibility we export as the old name 1022 exports.findChunks = defaultFindChunks; 1023 1024 /** 1025 * Given a set of chunks to highlight, create an additional set of chunks 1026 * to represent the bits of text between the highlighted text. 1027 * @param chunksToHighlight {start:number, end:number}[] 1028 * @param totalLength number 1029 * @return {start:number, end:number, highlight:boolean}[] 1030 */ 1031 1032 var fillInChunks = exports.fillInChunks = function fillInChunks(_ref4) { 1033 var chunksToHighlight = _ref4.chunksToHighlight, 1034 totalLength = _ref4.totalLength; 1035 1036 var allChunks = []; 1037 var append = function append(start, end, highlight) { 1038 if (end - start > 0) { 1039 allChunks.push({ 1040 start: start, 1041 end: end, 1042 highlight: highlight 1043 }); 1044 } 1045 }; 1046 1047 if (chunksToHighlight.length === 0) { 1048 append(0, totalLength, false); 1049 } else { 1050 var lastIndex = 0; 1051 chunksToHighlight.forEach(function (chunk) { 1052 append(lastIndex, chunk.start, false); 1053 append(chunk.start, chunk.end, true); 1054 lastIndex = chunk.end; 1055 }); 1056 append(lastIndex, totalLength, false); 1057 } 1058 return allChunks; 1059 }; 1060 1061 function defaultSanitize(string) { 1062 return string; 1063 } 1064 1065 function escapeRegExpFn(string) { 1066 return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); 1067 } 1068 1069 /***/ }) 1070 /******/ ]); 1071 1072 1073 /***/ }), 1074 1075 /***/ 9681: 1076 /***/ ((module) => { 1077 1078 var characterMap = { 1079 "À": "A", 1080 "Á": "A", 1081 "Â": "A", 1082 "Ã": "A", 1083 "Ä": "A", 1084 "Å": "A", 1085 "Ấ": "A", 1086 "Ắ": "A", 1087 "Ẳ": "A", 1088 "Ẵ": "A", 1089 "Ặ": "A", 1090 "Æ": "AE", 1091 "Ầ": "A", 1092 "Ằ": "A", 1093 "Ȃ": "A", 1094 "Ả": "A", 1095 "Ạ": "A", 1096 "Ẩ": "A", 1097 "Ẫ": "A", 1098 "Ậ": "A", 1099 "Ç": "C", 1100 "Ḉ": "C", 1101 "È": "E", 1102 "É": "E", 1103 "Ê": "E", 1104 "Ë": "E", 1105 "Ế": "E", 1106 "Ḗ": "E", 1107 "Ề": "E", 1108 "Ḕ": "E", 1109 "Ḝ": "E", 1110 "Ȇ": "E", 1111 "Ẻ": "E", 1112 "Ẽ": "E", 1113 "Ẹ": "E", 1114 "Ể": "E", 1115 "Ễ": "E", 1116 "Ệ": "E", 1117 "Ì": "I", 1118 "Í": "I", 1119 "Î": "I", 1120 "Ï": "I", 1121 "Ḯ": "I", 1122 "Ȋ": "I", 1123 "Ỉ": "I", 1124 "Ị": "I", 1125 "Ð": "D", 1126 "Ñ": "N", 1127 "Ò": "O", 1128 "Ó": "O", 1129 "Ô": "O", 1130 "Õ": "O", 1131 "Ö": "O", 1132 "Ø": "O", 1133 "Ố": "O", 1134 "Ṍ": "O", 1135 "Ṓ": "O", 1136 "Ȏ": "O", 1137 "Ỏ": "O", 1138 "Ọ": "O", 1139 "Ổ": "O", 1140 "Ỗ": "O", 1141 "Ộ": "O", 1142 "Ờ": "O", 1143 "Ở": "O", 1144 "Ỡ": "O", 1145 "Ớ": "O", 1146 "Ợ": "O", 1147 "Ù": "U", 1148 "Ú": "U", 1149 "Û": "U", 1150 "Ü": "U", 1151 "Ủ": "U", 1152 "Ụ": "U", 1153 "Ử": "U", 1154 "Ữ": "U", 1155 "Ự": "U", 1156 "Ý": "Y", 1157 "à": "a", 1158 "á": "a", 1159 "â": "a", 1160 "ã": "a", 1161 "ä": "a", 1162 "å": "a", 1163 "ấ": "a", 1164 "ắ": "a", 1165 "ẳ": "a", 1166 "ẵ": "a", 1167 "ặ": "a", 1168 "æ": "ae", 1169 "ầ": "a", 1170 "ằ": "a", 1171 "ȃ": "a", 1172 "ả": "a", 1173 "ạ": "a", 1174 "ẩ": "a", 1175 "ẫ": "a", 1176 "ậ": "a", 1177 "ç": "c", 1178 "ḉ": "c", 1179 "è": "e", 1180 "é": "e", 1181 "ê": "e", 1182 "ë": "e", 1183 "ế": "e", 1184 "ḗ": "e", 1185 "ề": "e", 1186 "ḕ": "e", 1187 "ḝ": "e", 1188 "ȇ": "e", 1189 "ẻ": "e", 1190 "ẽ": "e", 1191 "ẹ": "e", 1192 "ể": "e", 1193 "ễ": "e", 1194 "ệ": "e", 1195 "ì": "i", 1196 "í": "i", 1197 "î": "i", 1198 "ï": "i", 1199 "ḯ": "i", 1200 "ȋ": "i", 1201 "ỉ": "i", 1202 "ị": "i", 1203 "ð": "d", 1204 "ñ": "n", 1205 "ò": "o", 1206 "ó": "o", 1207 "ô": "o", 1208 "õ": "o", 1209 "ö": "o", 1210 "ø": "o", 1211 "ố": "o", 1212 "ṍ": "o", 1213 "ṓ": "o", 1214 "ȏ": "o", 1215 "ỏ": "o", 1216 "ọ": "o", 1217 "ổ": "o", 1218 "ỗ": "o", 1219 "ộ": "o", 1220 "ờ": "o", 1221 "ở": "o", 1222 "ỡ": "o", 1223 "ớ": "o", 1224 "ợ": "o", 1225 "ù": "u", 1226 "ú": "u", 1227 "û": "u", 1228 "ü": "u", 1229 "ủ": "u", 1230 "ụ": "u", 1231 "ử": "u", 1232 "ữ": "u", 1233 "ự": "u", 1234 "ý": "y", 1235 "ÿ": "y", 1236 "Ā": "A", 1237 "ā": "a", 1238 "Ă": "A", 1239 "ă": "a", 1240 "Ą": "A", 1241 "ą": "a", 1242 "Ć": "C", 1243 "ć": "c", 1244 "Ĉ": "C", 1245 "ĉ": "c", 1246 "Ċ": "C", 1247 "ċ": "c", 1248 "Č": "C", 1249 "č": "c", 1250 "C̆": "C", 1251 "c̆": "c", 1252 "Ď": "D", 1253 "ď": "d", 1254 "Đ": "D", 1255 "đ": "d", 1256 "Ē": "E", 1257 "ē": "e", 1258 "Ĕ": "E", 1259 "ĕ": "e", 1260 "Ė": "E", 1261 "ė": "e", 1262 "Ę": "E", 1263 "ę": "e", 1264 "Ě": "E", 1265 "ě": "e", 1266 "Ĝ": "G", 1267 "Ǵ": "G", 1268 "ĝ": "g", 1269 "ǵ": "g", 1270 "Ğ": "G", 1271 "ğ": "g", 1272 "Ġ": "G", 1273 "ġ": "g", 1274 "Ģ": "G", 1275 "ģ": "g", 1276 "Ĥ": "H", 1277 "ĥ": "h", 1278 "Ħ": "H", 1279 "ħ": "h", 1280 "Ḫ": "H", 1281 "ḫ": "h", 1282 "Ĩ": "I", 1283 "ĩ": "i", 1284 "Ī": "I", 1285 "ī": "i", 1286 "Ĭ": "I", 1287 "ĭ": "i", 1288 "Į": "I", 1289 "į": "i", 1290 "İ": "I", 1291 "ı": "i", 1292 "IJ": "IJ", 1293 "ij": "ij", 1294 "Ĵ": "J", 1295 "ĵ": "j", 1296 "Ķ": "K", 1297 "ķ": "k", 1298 "Ḱ": "K", 1299 "ḱ": "k", 1300 "K̆": "K", 1301 "k̆": "k", 1302 "Ĺ": "L", 1303 "ĺ": "l", 1304 "Ļ": "L", 1305 "ļ": "l", 1306 "Ľ": "L", 1307 "ľ": "l", 1308 "Ŀ": "L", 1309 "ŀ": "l", 1310 "Ł": "l", 1311 "ł": "l", 1312 "Ḿ": "M", 1313 "ḿ": "m", 1314 "M̆": "M", 1315 "m̆": "m", 1316 "Ń": "N", 1317 "ń": "n", 1318 "Ņ": "N", 1319 "ņ": "n", 1320 "Ň": "N", 1321 "ň": "n", 1322 "ʼn": "n", 1323 "N̆": "N", 1324 "n̆": "n", 1325 "Ō": "O", 1326 "ō": "o", 1327 "Ŏ": "O", 1328 "ŏ": "o", 1329 "Ő": "O", 1330 "ő": "o", 1331 "Œ": "OE", 1332 "œ": "oe", 1333 "P̆": "P", 1334 "p̆": "p", 1335 "Ŕ": "R", 1336 "ŕ": "r", 1337 "Ŗ": "R", 1338 "ŗ": "r", 1339 "Ř": "R", 1340 "ř": "r", 1341 "R̆": "R", 1342 "r̆": "r", 1343 "Ȓ": "R", 1344 "ȓ": "r", 1345 "Ś": "S", 1346 "ś": "s", 1347 "Ŝ": "S", 1348 "ŝ": "s", 1349 "Ş": "S", 1350 "Ș": "S", 1351 "ș": "s", 1352 "ş": "s", 1353 "Š": "S", 1354 "š": "s", 1355 "Ţ": "T", 1356 "ţ": "t", 1357 "ț": "t", 1358 "Ț": "T", 1359 "Ť": "T", 1360 "ť": "t", 1361 "Ŧ": "T", 1362 "ŧ": "t", 1363 "T̆": "T", 1364 "t̆": "t", 1365 "Ũ": "U", 1366 "ũ": "u", 1367 "Ū": "U", 1368 "ū": "u", 1369 "Ŭ": "U", 1370 "ŭ": "u", 1371 "Ů": "U", 1372 "ů": "u", 1373 "Ű": "U", 1374 "ű": "u", 1375 "Ų": "U", 1376 "ų": "u", 1377 "Ȗ": "U", 1378 "ȗ": "u", 1379 "V̆": "V", 1380 "v̆": "v", 1381 "Ŵ": "W", 1382 "ŵ": "w", 1383 "Ẃ": "W", 1384 "ẃ": "w", 1385 "X̆": "X", 1386 "x̆": "x", 1387 "Ŷ": "Y", 1388 "ŷ": "y", 1389 "Ÿ": "Y", 1390 "Y̆": "Y", 1391 "y̆": "y", 1392 "Ź": "Z", 1393 "ź": "z", 1394 "Ż": "Z", 1395 "ż": "z", 1396 "Ž": "Z", 1397 "ž": "z", 1398 "ſ": "s", 1399 "ƒ": "f", 1400 "Ơ": "O", 1401 "ơ": "o", 1402 "Ư": "U", 1403 "ư": "u", 1404 "Ǎ": "A", 1405 "ǎ": "a", 1406 "Ǐ": "I", 1407 "ǐ": "i", 1408 "Ǒ": "O", 1409 "ǒ": "o", 1410 "Ǔ": "U", 1411 "ǔ": "u", 1412 "Ǖ": "U", 1413 "ǖ": "u", 1414 "Ǘ": "U", 1415 "ǘ": "u", 1416 "Ǚ": "U", 1417 "ǚ": "u", 1418 "Ǜ": "U", 1419 "ǜ": "u", 1420 "Ứ": "U", 1421 "ứ": "u", 1422 "Ṹ": "U", 1423 "ṹ": "u", 1424 "Ǻ": "A", 1425 "ǻ": "a", 1426 "Ǽ": "AE", 1427 "ǽ": "ae", 1428 "Ǿ": "O", 1429 "ǿ": "o", 1430 "Þ": "TH", 1431 "þ": "th", 1432 "Ṕ": "P", 1433 "ṕ": "p", 1434 "Ṥ": "S", 1435 "ṥ": "s", 1436 "X́": "X", 1437 "x́": "x", 1438 "Ѓ": "Г", 1439 "ѓ": "г", 1440 "Ќ": "К", 1441 "ќ": "к", 1442 "A̋": "A", 1443 "a̋": "a", 1444 "E̋": "E", 1445 "e̋": "e", 1446 "I̋": "I", 1447 "i̋": "i", 1448 "Ǹ": "N", 1449 "ǹ": "n", 1450 "Ồ": "O", 1451 "ồ": "o", 1452 "Ṑ": "O", 1453 "ṑ": "o", 1454 "Ừ": "U", 1455 "ừ": "u", 1456 "Ẁ": "W", 1457 "ẁ": "w", 1458 "Ỳ": "Y", 1459 "ỳ": "y", 1460 "Ȁ": "A", 1461 "ȁ": "a", 1462 "Ȅ": "E", 1463 "ȅ": "e", 1464 "Ȉ": "I", 1465 "ȉ": "i", 1466 "Ȍ": "O", 1467 "ȍ": "o", 1468 "Ȑ": "R", 1469 "ȑ": "r", 1470 "Ȕ": "U", 1471 "ȕ": "u", 1472 "B̌": "B", 1473 "b̌": "b", 1474 "Č̣": "C", 1475 "č̣": "c", 1476 "Ê̌": "E", 1477 "ê̌": "e", 1478 "F̌": "F", 1479 "f̌": "f", 1480 "Ǧ": "G", 1481 "ǧ": "g", 1482 "Ȟ": "H", 1483 "ȟ": "h", 1484 "J̌": "J", 1485 "ǰ": "j", 1486 "Ǩ": "K", 1487 "ǩ": "k", 1488 "M̌": "M", 1489 "m̌": "m", 1490 "P̌": "P", 1491 "p̌": "p", 1492 "Q̌": "Q", 1493 "q̌": "q", 1494 "Ř̩": "R", 1495 "ř̩": "r", 1496 "Ṧ": "S", 1497 "ṧ": "s", 1498 "V̌": "V", 1499 "v̌": "v", 1500 "W̌": "W", 1501 "w̌": "w", 1502 "X̌": "X", 1503 "x̌": "x", 1504 "Y̌": "Y", 1505 "y̌": "y", 1506 "A̧": "A", 1507 "a̧": "a", 1508 "B̧": "B", 1509 "b̧": "b", 1510 "Ḑ": "D", 1511 "ḑ": "d", 1512 "Ȩ": "E", 1513 "ȩ": "e", 1514 "Ɛ̧": "E", 1515 "ɛ̧": "e", 1516 "Ḩ": "H", 1517 "ḩ": "h", 1518 "I̧": "I", 1519 "i̧": "i", 1520 "Ɨ̧": "I", 1521 "ɨ̧": "i", 1522 "M̧": "M", 1523 "m̧": "m", 1524 "O̧": "O", 1525 "o̧": "o", 1526 "Q̧": "Q", 1527 "q̧": "q", 1528 "U̧": "U", 1529 "u̧": "u", 1530 "X̧": "X", 1531 "x̧": "x", 1532 "Z̧": "Z", 1533 "z̧": "z", 1534 "й":"и", 1535 "Й":"И", 1536 "ё":"е", 1537 "Ё":"Е", 1538 }; 1539 1540 var chars = Object.keys(characterMap).join('|'); 1541 var allAccents = new RegExp(chars, 'g'); 1542 var firstAccent = new RegExp(chars, ''); 1543 1544 function matcher(match) { 1545 return characterMap[match]; 1546 } 1547 1548 var removeAccents = function(string) { 1549 return string.replace(allAccents, matcher); 1550 }; 1551 1552 var hasAccents = function(string) { 1553 return !!string.match(firstAccent); 1554 }; 1555 1556 module.exports = removeAccents; 1557 module.exports.has = hasAccents; 1558 module.exports.remove = removeAccents; 1559 1560 1561 /***/ }) 1562 1563 /******/ }); 1564 /************************************************************************/ 1565 /******/ // The module cache 1566 /******/ var __webpack_module_cache__ = {}; 1567 /******/ 1568 /******/ // The require function 1569 /******/ function __webpack_require__(moduleId) { 1570 /******/ // Check if module is in cache 1571 /******/ var cachedModule = __webpack_module_cache__[moduleId]; 1572 /******/ if (cachedModule !== undefined) { 1573 /******/ return cachedModule.exports; 1574 /******/ } 1575 /******/ // Create a new module (and put it into the cache) 1576 /******/ var module = __webpack_module_cache__[moduleId] = { 1577 /******/ // no module.id needed 1578 /******/ // no module.loaded needed 1579 /******/ exports: {} 1580 /******/ }; 1581 /******/ 1582 /******/ // Execute the module function 1583 /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 1584 /******/ 1585 /******/ // Return the exports of the module 1586 /******/ return module.exports; 1587 /******/ } 1588 /******/ 1589 /************************************************************************/ 1590 /******/ /* webpack/runtime/compat get default export */ 1591 /******/ (() => { 1592 /******/ // getDefaultExport function for compatibility with non-harmony modules 1593 /******/ __webpack_require__.n = (module) => { 1594 /******/ var getter = module && module.__esModule ? 1595 /******/ () => (module['default']) : 1596 /******/ () => (module); 1597 /******/ __webpack_require__.d(getter, { a: getter }); 1598 /******/ return getter; 1599 /******/ }; 1600 /******/ })(); 1601 /******/ 1602 /******/ /* webpack/runtime/create fake namespace object */ 1603 /******/ (() => { 1604 /******/ var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__); 1605 /******/ var leafPrototypes; 1606 /******/ // create a fake namespace object 1607 /******/ // mode & 1: value is a module id, require it 1608 /******/ // mode & 2: merge all properties of value into the ns 1609 /******/ // mode & 4: return value when already ns object 1610 /******/ // mode & 16: return value when it's Promise-like 1611 /******/ // mode & 8|1: behave like require 1612 /******/ __webpack_require__.t = function(value, mode) { 1613 /******/ if(mode & 1) value = this(value); 1614 /******/ if(mode & 8) return value; 1615 /******/ if(typeof value === 'object' && value) { 1616 /******/ if((mode & 4) && value.__esModule) return value; 1617 /******/ if((mode & 16) && typeof value.then === 'function') return value; 1618 /******/ } 1619 /******/ var ns = Object.create(null); 1620 /******/ __webpack_require__.r(ns); 1621 /******/ var def = {}; 1622 /******/ leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)]; 1623 /******/ for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) { 1624 /******/ Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key]))); 1625 /******/ } 1626 /******/ def['default'] = () => (value); 1627 /******/ __webpack_require__.d(ns, def); 1628 /******/ return ns; 1629 /******/ }; 1630 /******/ })(); 1631 /******/ 1632 /******/ /* webpack/runtime/define property getters */ 1633 /******/ (() => { 1634 /******/ // define getter functions for harmony exports 1635 /******/ __webpack_require__.d = (exports, definition) => { 1636 /******/ for(var key in definition) { 1637 /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 1638 /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 1639 /******/ } 1640 /******/ } 1641 /******/ }; 1642 /******/ })(); 1643 /******/ 1644 /******/ /* webpack/runtime/hasOwnProperty shorthand */ 1645 /******/ (() => { 1646 /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 1647 /******/ })(); 1648 /******/ 1649 /******/ /* webpack/runtime/make namespace object */ 1650 /******/ (() => { 1651 /******/ // define __esModule on exports 1652 /******/ __webpack_require__.r = (exports) => { 1653 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 1654 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 1655 /******/ } 1656 /******/ Object.defineProperty(exports, '__esModule', { value: true }); 1657 /******/ }; 1658 /******/ })(); 1659 /******/ 1660 /******/ /* webpack/runtime/nonce */ 1661 /******/ (() => { 1662 /******/ __webpack_require__.nc = undefined; 1663 /******/ })(); 1664 /******/ 1665 /************************************************************************/ 1666 var __webpack_exports__ = {}; 1667 // This entry needs to be wrapped in an IIFE because it needs to be in strict mode. 1668 (() => { 1669 "use strict"; 1670 // ESM COMPAT FLAG 1671 __webpack_require__.r(__webpack_exports__); 1672 1673 // EXPORTS 1674 __webpack_require__.d(__webpack_exports__, { 1675 AlignmentMatrixControl: () => (/* reexport */ alignment_matrix_control), 1676 AnglePickerControl: () => (/* reexport */ angle_picker_control), 1677 Animate: () => (/* reexport */ animate), 1678 Autocomplete: () => (/* reexport */ Autocomplete), 1679 BaseControl: () => (/* reexport */ base_control), 1680 BlockQuotation: () => (/* reexport */ external_wp_primitives_namespaceObject.BlockQuotation), 1681 BorderBoxControl: () => (/* reexport */ border_box_control_component), 1682 BorderControl: () => (/* reexport */ border_control_component), 1683 BoxControl: () => (/* reexport */ box_control), 1684 Button: () => (/* reexport */ build_module_button), 1685 ButtonGroup: () => (/* reexport */ button_group), 1686 Card: () => (/* reexport */ card_component), 1687 CardBody: () => (/* reexport */ card_body_component), 1688 CardDivider: () => (/* reexport */ card_divider_component), 1689 CardFooter: () => (/* reexport */ card_footer_component), 1690 CardHeader: () => (/* reexport */ card_header_component), 1691 CardMedia: () => (/* reexport */ card_media_component), 1692 CheckboxControl: () => (/* reexport */ checkbox_control), 1693 Circle: () => (/* reexport */ external_wp_primitives_namespaceObject.Circle), 1694 ClipboardButton: () => (/* reexport */ ClipboardButton), 1695 ColorIndicator: () => (/* reexport */ color_indicator), 1696 ColorPalette: () => (/* reexport */ color_palette), 1697 ColorPicker: () => (/* reexport */ LegacyAdapter), 1698 ComboboxControl: () => (/* reexport */ combobox_control), 1699 Composite: () => (/* reexport */ Composite), 1700 CustomGradientPicker: () => (/* reexport */ custom_gradient_picker), 1701 CustomSelectControl: () => (/* reexport */ custom_select_control), 1702 Dashicon: () => (/* reexport */ dashicon), 1703 DatePicker: () => (/* reexport */ date), 1704 DateTimePicker: () => (/* reexport */ build_module_date_time), 1705 Disabled: () => (/* reexport */ disabled), 1706 Draggable: () => (/* reexport */ draggable), 1707 DropZone: () => (/* reexport */ drop_zone), 1708 DropZoneProvider: () => (/* reexport */ DropZoneProvider), 1709 Dropdown: () => (/* reexport */ dropdown), 1710 DropdownMenu: () => (/* reexport */ dropdown_menu), 1711 DuotonePicker: () => (/* reexport */ duotone_picker), 1712 DuotoneSwatch: () => (/* reexport */ duotone_swatch), 1713 ExternalLink: () => (/* reexport */ external_link), 1714 Fill: () => (/* reexport */ slot_fill_Fill), 1715 Flex: () => (/* reexport */ flex_component), 1716 FlexBlock: () => (/* reexport */ flex_block_component), 1717 FlexItem: () => (/* reexport */ flex_item_component), 1718 FocalPointPicker: () => (/* reexport */ focal_point_picker), 1719 FocusReturnProvider: () => (/* reexport */ with_focus_return_Provider), 1720 FocusableIframe: () => (/* reexport */ FocusableIframe), 1721 FontSizePicker: () => (/* reexport */ font_size_picker), 1722 FormFileUpload: () => (/* reexport */ form_file_upload), 1723 FormToggle: () => (/* reexport */ form_toggle), 1724 FormTokenField: () => (/* reexport */ form_token_field), 1725 G: () => (/* reexport */ external_wp_primitives_namespaceObject.G), 1726 GradientPicker: () => (/* reexport */ gradient_picker), 1727 Guide: () => (/* reexport */ guide), 1728 GuidePage: () => (/* reexport */ GuidePage), 1729 HorizontalRule: () => (/* reexport */ external_wp_primitives_namespaceObject.HorizontalRule), 1730 Icon: () => (/* reexport */ build_module_icon), 1731 IconButton: () => (/* reexport */ deprecated), 1732 IsolatedEventContainer: () => (/* reexport */ isolated_event_container), 1733 KeyboardShortcuts: () => (/* reexport */ keyboard_shortcuts), 1734 Line: () => (/* reexport */ external_wp_primitives_namespaceObject.Line), 1735 MenuGroup: () => (/* reexport */ menu_group), 1736 MenuItem: () => (/* reexport */ menu_item), 1737 MenuItemsChoice: () => (/* reexport */ menu_items_choice), 1738 Modal: () => (/* reexport */ modal), 1739 NavigableMenu: () => (/* reexport */ navigable_container_menu), 1740 Navigator: () => (/* reexport */ navigator_Navigator), 1741 Notice: () => (/* reexport */ build_module_notice), 1742 NoticeList: () => (/* reexport */ list), 1743 Panel: () => (/* reexport */ panel), 1744 PanelBody: () => (/* reexport */ body), 1745 PanelHeader: () => (/* reexport */ panel_header), 1746 PanelRow: () => (/* reexport */ row), 1747 Path: () => (/* reexport */ external_wp_primitives_namespaceObject.Path), 1748 Placeholder: () => (/* reexport */ placeholder), 1749 Polygon: () => (/* reexport */ external_wp_primitives_namespaceObject.Polygon), 1750 Popover: () => (/* reexport */ popover), 1751 ProgressBar: () => (/* reexport */ progress_bar), 1752 QueryControls: () => (/* reexport */ query_controls), 1753 RadioControl: () => (/* reexport */ radio_control), 1754 RangeControl: () => (/* reexport */ range_control), 1755 Rect: () => (/* reexport */ external_wp_primitives_namespaceObject.Rect), 1756 ResizableBox: () => (/* reexport */ resizable_box), 1757 ResponsiveWrapper: () => (/* reexport */ responsive_wrapper), 1758 SVG: () => (/* reexport */ external_wp_primitives_namespaceObject.SVG), 1759 SandBox: () => (/* reexport */ sandbox), 1760 ScrollLock: () => (/* reexport */ scroll_lock), 1761 SearchControl: () => (/* reexport */ search_control), 1762 SelectControl: () => (/* reexport */ select_control), 1763 Slot: () => (/* reexport */ slot_fill_Slot), 1764 SlotFillProvider: () => (/* reexport */ Provider), 1765 Snackbar: () => (/* reexport */ snackbar), 1766 SnackbarList: () => (/* reexport */ snackbar_list), 1767 Spinner: () => (/* reexport */ spinner), 1768 TabPanel: () => (/* reexport */ tab_panel), 1769 TabbableContainer: () => (/* reexport */ tabbable), 1770 TextControl: () => (/* reexport */ text_control), 1771 TextHighlight: () => (/* reexport */ text_highlight), 1772 TextareaControl: () => (/* reexport */ textarea_control), 1773 TimePicker: () => (/* reexport */ date_time_time), 1774 Tip: () => (/* reexport */ build_module_tip), 1775 ToggleControl: () => (/* reexport */ toggle_control), 1776 Toolbar: () => (/* reexport */ toolbar), 1777 ToolbarButton: () => (/* reexport */ toolbar_button), 1778 ToolbarDropdownMenu: () => (/* reexport */ toolbar_dropdown_menu), 1779 ToolbarGroup: () => (/* reexport */ toolbar_group), 1780 ToolbarItem: () => (/* reexport */ toolbar_item), 1781 Tooltip: () => (/* reexport */ tooltip), 1782 TreeSelect: () => (/* reexport */ tree_select), 1783 VisuallyHidden: () => (/* reexport */ visually_hidden_component), 1784 __experimentalAlignmentMatrixControl: () => (/* reexport */ alignment_matrix_control), 1785 __experimentalApplyValueToSides: () => (/* reexport */ applyValueToSides), 1786 __experimentalBorderBoxControl: () => (/* reexport */ border_box_control_component), 1787 __experimentalBorderControl: () => (/* reexport */ border_control_component), 1788 __experimentalBoxControl: () => (/* reexport */ box_control), 1789 __experimentalConfirmDialog: () => (/* reexport */ confirm_dialog_component), 1790 __experimentalDimensionControl: () => (/* reexport */ dimension_control), 1791 __experimentalDivider: () => (/* reexport */ divider_component), 1792 __experimentalDropdownContentWrapper: () => (/* reexport */ dropdown_content_wrapper), 1793 __experimentalElevation: () => (/* reexport */ elevation_component), 1794 __experimentalGrid: () => (/* reexport */ grid_component), 1795 __experimentalHStack: () => (/* reexport */ h_stack_component), 1796 __experimentalHasSplitBorders: () => (/* reexport */ hasSplitBorders), 1797 __experimentalHeading: () => (/* reexport */ heading_component), 1798 __experimentalInputControl: () => (/* reexport */ input_control), 1799 __experimentalInputControlPrefixWrapper: () => (/* reexport */ input_prefix_wrapper), 1800 __experimentalInputControlSuffixWrapper: () => (/* reexport */ input_suffix_wrapper), 1801 __experimentalIsDefinedBorder: () => (/* reexport */ isDefinedBorder), 1802 __experimentalIsEmptyBorder: () => (/* reexport */ isEmptyBorder), 1803 __experimentalItem: () => (/* reexport */ item_component), 1804 __experimentalItemGroup: () => (/* reexport */ item_group_component), 1805 __experimentalNavigation: () => (/* reexport */ navigation), 1806 __experimentalNavigationBackButton: () => (/* reexport */ back_button), 1807 __experimentalNavigationGroup: () => (/* reexport */ group), 1808 __experimentalNavigationItem: () => (/* reexport */ navigation_item), 1809 __experimentalNavigationMenu: () => (/* reexport */ navigation_menu), 1810 __experimentalNavigatorBackButton: () => (/* reexport */ legacy_NavigatorBackButton), 1811 __experimentalNavigatorButton: () => (/* reexport */ legacy_NavigatorButton), 1812 __experimentalNavigatorProvider: () => (/* reexport */ NavigatorProvider), 1813 __experimentalNavigatorScreen: () => (/* reexport */ legacy_NavigatorScreen), 1814 __experimentalNavigatorToParentButton: () => (/* reexport */ legacy_NavigatorToParentButton), 1815 __experimentalNumberControl: () => (/* reexport */ number_control), 1816 __experimentalPaletteEdit: () => (/* reexport */ palette_edit), 1817 __experimentalParseQuantityAndUnitFromRawValue: () => (/* reexport */ parseQuantityAndUnitFromRawValue), 1818 __experimentalRadio: () => (/* reexport */ radio_group_radio), 1819 __experimentalRadioGroup: () => (/* reexport */ radio_group), 1820 __experimentalScrollable: () => (/* reexport */ scrollable_component), 1821 __experimentalSpacer: () => (/* reexport */ spacer_component), 1822 __experimentalStyleProvider: () => (/* reexport */ style_provider), 1823 __experimentalSurface: () => (/* reexport */ surface_component), 1824 __experimentalText: () => (/* reexport */ text_component), 1825 __experimentalToggleGroupControl: () => (/* reexport */ toggle_group_control_component), 1826 __experimentalToggleGroupControlOption: () => (/* reexport */ toggle_group_control_option_component), 1827 __experimentalToggleGroupControlOptionIcon: () => (/* reexport */ toggle_group_control_option_icon_component), 1828 __experimentalToolbarContext: () => (/* reexport */ toolbar_context), 1829 __experimentalToolsPanel: () => (/* reexport */ tools_panel_component), 1830 __experimentalToolsPanelContext: () => (/* reexport */ ToolsPanelContext), 1831 __experimentalToolsPanelItem: () => (/* reexport */ tools_panel_item_component), 1832 __experimentalTreeGrid: () => (/* reexport */ tree_grid), 1833 __experimentalTreeGridCell: () => (/* reexport */ cell), 1834 __experimentalTreeGridItem: () => (/* reexport */ tree_grid_item), 1835 __experimentalTreeGridRow: () => (/* reexport */ tree_grid_row), 1836 __experimentalTruncate: () => (/* reexport */ truncate_component), 1837 __experimentalUnitControl: () => (/* reexport */ unit_control), 1838 __experimentalUseCustomUnits: () => (/* reexport */ useCustomUnits), 1839 __experimentalUseNavigator: () => (/* reexport */ useNavigator), 1840 __experimentalUseSlot: () => (/* reexport */ useSlot), 1841 __experimentalUseSlotFills: () => (/* reexport */ useSlotFills), 1842 __experimentalVStack: () => (/* reexport */ v_stack_component), 1843 __experimentalView: () => (/* reexport */ component), 1844 __experimentalZStack: () => (/* reexport */ z_stack_component), 1845 __unstableAnimatePresence: () => (/* reexport */ AnimatePresence), 1846 __unstableComposite: () => (/* reexport */ legacy_Composite), 1847 __unstableCompositeGroup: () => (/* reexport */ legacy_CompositeGroup), 1848 __unstableCompositeItem: () => (/* reexport */ legacy_CompositeItem), 1849 __unstableDisclosureContent: () => (/* reexport */ disclosure_DisclosureContent), 1850 __unstableGetAnimateClassName: () => (/* reexport */ getAnimateClassName), 1851 __unstableMotion: () => (/* reexport */ motion), 1852 __unstableUseAutocompleteProps: () => (/* reexport */ useAutocompleteProps), 1853 __unstableUseCompositeState: () => (/* reexport */ useCompositeState), 1854 __unstableUseNavigateRegions: () => (/* reexport */ useNavigateRegions), 1855 createSlotFill: () => (/* reexport */ createSlotFill), 1856 navigateRegions: () => (/* reexport */ navigate_regions), 1857 privateApis: () => (/* reexport */ privateApis), 1858 useBaseControlProps: () => (/* reexport */ useBaseControlProps), 1859 useNavigator: () => (/* reexport */ useNavigator), 1860 withConstrainedTabbing: () => (/* reexport */ with_constrained_tabbing), 1861 withFallbackStyles: () => (/* reexport */ with_fallback_styles), 1862 withFilters: () => (/* reexport */ withFilters), 1863 withFocusOutside: () => (/* reexport */ with_focus_outside), 1864 withFocusReturn: () => (/* reexport */ with_focus_return), 1865 withNotices: () => (/* reexport */ with_notices), 1866 withSpokenMessages: () => (/* reexport */ with_spoken_messages) 1867 }); 1868 1869 // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/text/styles.js 1870 var text_styles_namespaceObject = {}; 1871 __webpack_require__.r(text_styles_namespaceObject); 1872 __webpack_require__.d(text_styles_namespaceObject, { 1873 Text: () => (Text), 1874 block: () => (styles_block), 1875 destructive: () => (destructive), 1876 highlighterText: () => (highlighterText), 1877 muted: () => (muted), 1878 positive: () => (positive), 1879 upperCase: () => (upperCase) 1880 }); 1881 1882 // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js 1883 var toggle_group_control_option_base_styles_namespaceObject = {}; 1884 __webpack_require__.r(toggle_group_control_option_base_styles_namespaceObject); 1885 __webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, { 1886 Rp: () => (ButtonContentView), 1887 y0: () => (LabelView), 1888 uG: () => (buttonView), 1889 eh: () => (labelBlock) 1890 }); 1891 1892 ;// external ["wp","primitives"] 1893 const external_wp_primitives_namespaceObject = window["wp"]["primitives"]; 1894 ;// ./node_modules/clsx/dist/clsx.mjs 1895 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ const dist_clsx = (clsx); 1896 ;// external ["wp","i18n"] 1897 const external_wp_i18n_namespaceObject = window["wp"]["i18n"]; 1898 ;// external ["wp","compose"] 1899 const external_wp_compose_namespaceObject = window["wp"]["compose"]; 1900 ;// external ["wp","element"] 1901 const external_wp_element_namespaceObject = window["wp"]["element"]; 1902 ;// ./node_modules/@ariakit/react-core/esm/__chunks/3YLGPPWQ.js 1903 "use client"; 1904 var __defProp = Object.defineProperty; 1905 var __defProps = Object.defineProperties; 1906 var __getOwnPropDescs = Object.getOwnPropertyDescriptors; 1907 var __getOwnPropSymbols = Object.getOwnPropertySymbols; 1908 var __hasOwnProp = Object.prototype.hasOwnProperty; 1909 var __propIsEnum = Object.prototype.propertyIsEnumerable; 1910 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 1911 var _3YLGPPWQ_spreadValues = (a, b) => { 1912 for (var prop in b || (b = {})) 1913 if (__hasOwnProp.call(b, prop)) 1914 __defNormalProp(a, prop, b[prop]); 1915 if (__getOwnPropSymbols) 1916 for (var prop of __getOwnPropSymbols(b)) { 1917 if (__propIsEnum.call(b, prop)) 1918 __defNormalProp(a, prop, b[prop]); 1919 } 1920 return a; 1921 }; 1922 var _3YLGPPWQ_spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); 1923 var __objRest = (source, exclude) => { 1924 var target = {}; 1925 for (var prop in source) 1926 if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) 1927 target[prop] = source[prop]; 1928 if (source != null && __getOwnPropSymbols) 1929 for (var prop of __getOwnPropSymbols(source)) { 1930 if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) 1931 target[prop] = source[prop]; 1932 } 1933 return target; 1934 }; 1935 1936 1937 1938 ;// ./node_modules/@ariakit/core/esm/__chunks/3YLGPPWQ.js 1939 "use client"; 1940 var _3YLGPPWQ_defProp = Object.defineProperty; 1941 var _3YLGPPWQ_defProps = Object.defineProperties; 1942 var _3YLGPPWQ_getOwnPropDescs = Object.getOwnPropertyDescriptors; 1943 var _3YLGPPWQ_getOwnPropSymbols = Object.getOwnPropertySymbols; 1944 var _3YLGPPWQ_hasOwnProp = Object.prototype.hasOwnProperty; 1945 var _3YLGPPWQ_propIsEnum = Object.prototype.propertyIsEnumerable; 1946 var _3YLGPPWQ_defNormalProp = (obj, key, value) => key in obj ? _3YLGPPWQ_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 1947 var _chunks_3YLGPPWQ_spreadValues = (a, b) => { 1948 for (var prop in b || (b = {})) 1949 if (_3YLGPPWQ_hasOwnProp.call(b, prop)) 1950 _3YLGPPWQ_defNormalProp(a, prop, b[prop]); 1951 if (_3YLGPPWQ_getOwnPropSymbols) 1952 for (var prop of _3YLGPPWQ_getOwnPropSymbols(b)) { 1953 if (_3YLGPPWQ_propIsEnum.call(b, prop)) 1954 _3YLGPPWQ_defNormalProp(a, prop, b[prop]); 1955 } 1956 return a; 1957 }; 1958 var _chunks_3YLGPPWQ_spreadProps = (a, b) => _3YLGPPWQ_defProps(a, _3YLGPPWQ_getOwnPropDescs(b)); 1959 var _3YLGPPWQ_objRest = (source, exclude) => { 1960 var target = {}; 1961 for (var prop in source) 1962 if (_3YLGPPWQ_hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) 1963 target[prop] = source[prop]; 1964 if (source != null && _3YLGPPWQ_getOwnPropSymbols) 1965 for (var prop of _3YLGPPWQ_getOwnPropSymbols(source)) { 1966 if (exclude.indexOf(prop) < 0 && _3YLGPPWQ_propIsEnum.call(source, prop)) 1967 target[prop] = source[prop]; 1968 } 1969 return target; 1970 }; 1971 1972 1973 1974 ;// ./node_modules/@ariakit/core/esm/__chunks/PBFD2E7P.js 1975 "use client"; 1976 1977 1978 // src/utils/misc.ts 1979 function noop(..._) { 1980 } 1981 function shallowEqual(a, b) { 1982 if (a === b) return true; 1983 if (!a) return false; 1984 if (!b) return false; 1985 if (typeof a !== "object") return false; 1986 if (typeof b !== "object") return false; 1987 const aKeys = Object.keys(a); 1988 const bKeys = Object.keys(b); 1989 const { length } = aKeys; 1990 if (bKeys.length !== length) return false; 1991 for (const key of aKeys) { 1992 if (a[key] !== b[key]) { 1993 return false; 1994 } 1995 } 1996 return true; 1997 } 1998 function applyState(argument, currentValue) { 1999 if (isUpdater(argument)) { 2000 const value = isLazyValue(currentValue) ? currentValue() : currentValue; 2001 return argument(value); 2002 } 2003 return argument; 2004 } 2005 function isUpdater(argument) { 2006 return typeof argument === "function"; 2007 } 2008 function isLazyValue(value) { 2009 return typeof value === "function"; 2010 } 2011 function isObject(arg) { 2012 return typeof arg === "object" && arg != null; 2013 } 2014 function isEmpty(arg) { 2015 if (Array.isArray(arg)) return !arg.length; 2016 if (isObject(arg)) return !Object.keys(arg).length; 2017 if (arg == null) return true; 2018 if (arg === "") return true; 2019 return false; 2020 } 2021 function isInteger(arg) { 2022 if (typeof arg === "number") { 2023 return Math.floor(arg) === arg; 2024 } 2025 return String(Math.floor(Number(arg))) === arg; 2026 } 2027 function PBFD2E7P_hasOwnProperty(object, prop) { 2028 if (typeof Object.hasOwn === "function") { 2029 return Object.hasOwn(object, prop); 2030 } 2031 return Object.prototype.hasOwnProperty.call(object, prop); 2032 } 2033 function chain(...fns) { 2034 return (...args) => { 2035 for (const fn of fns) { 2036 if (typeof fn === "function") { 2037 fn(...args); 2038 } 2039 } 2040 }; 2041 } 2042 function cx(...args) { 2043 return args.filter(Boolean).join(" ") || void 0; 2044 } 2045 function normalizeString(str) { 2046 return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); 2047 } 2048 function omit(object, keys) { 2049 const result = _chunks_3YLGPPWQ_spreadValues({}, object); 2050 for (const key of keys) { 2051 if (PBFD2E7P_hasOwnProperty(result, key)) { 2052 delete result[key]; 2053 } 2054 } 2055 return result; 2056 } 2057 function pick(object, paths) { 2058 const result = {}; 2059 for (const key of paths) { 2060 if (PBFD2E7P_hasOwnProperty(object, key)) { 2061 result[key] = object[key]; 2062 } 2063 } 2064 return result; 2065 } 2066 function identity(value) { 2067 return value; 2068 } 2069 function beforePaint(cb = noop) { 2070 const raf = requestAnimationFrame(cb); 2071 return () => cancelAnimationFrame(raf); 2072 } 2073 function afterPaint(cb = noop) { 2074 let raf = requestAnimationFrame(() => { 2075 raf = requestAnimationFrame(cb); 2076 }); 2077 return () => cancelAnimationFrame(raf); 2078 } 2079 function invariant(condition, message) { 2080 if (condition) return; 2081 if (typeof message !== "string") throw new Error("Invariant failed"); 2082 throw new Error(message); 2083 } 2084 function getKeys(obj) { 2085 return Object.keys(obj); 2086 } 2087 function isFalsyBooleanCallback(booleanOrCallback, ...args) { 2088 const result = typeof booleanOrCallback === "function" ? booleanOrCallback(...args) : booleanOrCallback; 2089 if (result == null) return false; 2090 return !result; 2091 } 2092 function disabledFromProps(props) { 2093 return props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true"; 2094 } 2095 function removeUndefinedValues(obj) { 2096 const result = {}; 2097 for (const key in obj) { 2098 if (obj[key] !== void 0) { 2099 result[key] = obj[key]; 2100 } 2101 } 2102 return result; 2103 } 2104 function defaultValue(...values) { 2105 for (const value of values) { 2106 if (value !== void 0) return value; 2107 } 2108 return void 0; 2109 } 2110 2111 2112 2113 // EXTERNAL MODULE: external "React" 2114 var external_React_ = __webpack_require__(1609); 2115 var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2); 2116 var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_); 2117 ;// ./node_modules/@ariakit/react-core/esm/__chunks/SK3NAZA3.js 2118 "use client"; 2119 2120 2121 // src/utils/misc.ts 2122 2123 2124 function setRef(ref, value) { 2125 if (typeof ref === "function") { 2126 ref(value); 2127 } else if (ref) { 2128 ref.current = value; 2129 } 2130 } 2131 function isValidElementWithRef(element) { 2132 if (!element) return false; 2133 if (!(0,external_React_.isValidElement)(element)) return false; 2134 if ("ref" in element.props) return true; 2135 if ("ref" in element) return true; 2136 return false; 2137 } 2138 function getRefProperty(element) { 2139 if (!isValidElementWithRef(element)) return null; 2140 const props = _3YLGPPWQ_spreadValues({}, element.props); 2141 return props.ref || element.ref; 2142 } 2143 function mergeProps(base, overrides) { 2144 const props = _3YLGPPWQ_spreadValues({}, base); 2145 for (const key in overrides) { 2146 if (!PBFD2E7P_hasOwnProperty(overrides, key)) continue; 2147 if (key === "className") { 2148 const prop = "className"; 2149 props[prop] = base[prop] ? `$base[prop]} $overrides[prop]}` : overrides[prop]; 2150 continue; 2151 } 2152 if (key === "style") { 2153 const prop = "style"; 2154 props[prop] = base[prop] ? _3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({}, base[prop]), overrides[prop]) : overrides[prop]; 2155 continue; 2156 } 2157 const overrideValue = overrides[key]; 2158 if (typeof overrideValue === "function" && key.startsWith("on")) { 2159 const baseValue = base[key]; 2160 if (typeof baseValue === "function") { 2161 props[key] = (...args) => { 2162 overrideValue(...args); 2163 baseValue(...args); 2164 }; 2165 continue; 2166 } 2167 } 2168 props[key] = overrideValue; 2169 } 2170 return props; 2171 } 2172 2173 2174 2175 ;// ./node_modules/@ariakit/core/esm/__chunks/DTR5TSDJ.js 2176 "use client"; 2177 2178 // src/utils/dom.ts 2179 var canUseDOM = checkIsBrowser(); 2180 function checkIsBrowser() { 2181 var _a; 2182 return typeof window !== "undefined" && !!((_a = window.document) == null ? void 0 : _a.createElement); 2183 } 2184 function getDocument(node) { 2185 if (!node) return document; 2186 if ("self" in node) return node.document; 2187 return node.ownerDocument || document; 2188 } 2189 function getWindow(node) { 2190 if (!node) return self; 2191 if ("self" in node) return node.self; 2192 return getDocument(node).defaultView || window; 2193 } 2194 function getActiveElement(node, activeDescendant = false) { 2195 const { activeElement } = getDocument(node); 2196 if (!(activeElement == null ? void 0 : activeElement.nodeName)) { 2197 return null; 2198 } 2199 if (isFrame(activeElement) && activeElement.contentDocument) { 2200 return getActiveElement( 2201 activeElement.contentDocument.body, 2202 activeDescendant 2203 ); 2204 } 2205 if (activeDescendant) { 2206 const id = activeElement.getAttribute("aria-activedescendant"); 2207 if (id) { 2208 const element = getDocument(activeElement).getElementById(id); 2209 if (element) { 2210 return element; 2211 } 2212 } 2213 } 2214 return activeElement; 2215 } 2216 function contains(parent, child) { 2217 return parent === child || parent.contains(child); 2218 } 2219 function isFrame(element) { 2220 return element.tagName === "IFRAME"; 2221 } 2222 function isButton(element) { 2223 const tagName = element.tagName.toLowerCase(); 2224 if (tagName === "button") return true; 2225 if (tagName === "input" && element.type) { 2226 return buttonInputTypes.indexOf(element.type) !== -1; 2227 } 2228 return false; 2229 } 2230 var buttonInputTypes = [ 2231 "button", 2232 "color", 2233 "file", 2234 "image", 2235 "reset", 2236 "submit" 2237 ]; 2238 function isVisible(element) { 2239 if (typeof element.checkVisibility === "function") { 2240 return element.checkVisibility(); 2241 } 2242 const htmlElement = element; 2243 return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0; 2244 } 2245 function isTextField(element) { 2246 try { 2247 const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null; 2248 const isTextArea = element.tagName === "TEXTAREA"; 2249 return isTextInput || isTextArea || false; 2250 } catch (error) { 2251 return false; 2252 } 2253 } 2254 function isTextbox(element) { 2255 return element.isContentEditable || isTextField(element); 2256 } 2257 function getTextboxValue(element) { 2258 if (isTextField(element)) { 2259 return element.value; 2260 } 2261 if (element.isContentEditable) { 2262 const range = getDocument(element).createRange(); 2263 range.selectNodeContents(element); 2264 return range.toString(); 2265 } 2266 return ""; 2267 } 2268 function getTextboxSelection(element) { 2269 let start = 0; 2270 let end = 0; 2271 if (isTextField(element)) { 2272 start = element.selectionStart || 0; 2273 end = element.selectionEnd || 0; 2274 } else if (element.isContentEditable) { 2275 const selection = getDocument(element).getSelection(); 2276 if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && contains(element, selection.anchorNode) && selection.focusNode && contains(element, selection.focusNode)) { 2277 const range = selection.getRangeAt(0); 2278 const nextRange = range.cloneRange(); 2279 nextRange.selectNodeContents(element); 2280 nextRange.setEnd(range.startContainer, range.startOffset); 2281 start = nextRange.toString().length; 2282 nextRange.setEnd(range.endContainer, range.endOffset); 2283 end = nextRange.toString().length; 2284 } 2285 } 2286 return { start, end }; 2287 } 2288 function getPopupRole(element, fallback) { 2289 const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"]; 2290 const role = element == null ? void 0 : element.getAttribute("role"); 2291 if (role && allowedPopupRoles.indexOf(role) !== -1) { 2292 return role; 2293 } 2294 return fallback; 2295 } 2296 function getPopupItemRole(element, fallback) { 2297 var _a; 2298 const itemRoleByPopupRole = { 2299 menu: "menuitem", 2300 listbox: "option", 2301 tree: "treeitem" 2302 }; 2303 const popupRole = getPopupRole(element); 2304 if (!popupRole) return fallback; 2305 const key = popupRole; 2306 return (_a = itemRoleByPopupRole[key]) != null ? _a : fallback; 2307 } 2308 function scrollIntoViewIfNeeded(element, arg) { 2309 if (isPartiallyHidden(element) && "scrollIntoView" in element) { 2310 element.scrollIntoView(arg); 2311 } 2312 } 2313 function getScrollingElement(element) { 2314 if (!element) return null; 2315 const isScrollableOverflow = (overflow) => { 2316 if (overflow === "auto") return true; 2317 if (overflow === "scroll") return true; 2318 return false; 2319 }; 2320 if (element.clientHeight && element.scrollHeight > element.clientHeight) { 2321 const { overflowY } = getComputedStyle(element); 2322 if (isScrollableOverflow(overflowY)) return element; 2323 } else if (element.clientWidth && element.scrollWidth > element.clientWidth) { 2324 const { overflowX } = getComputedStyle(element); 2325 if (isScrollableOverflow(overflowX)) return element; 2326 } 2327 return getScrollingElement(element.parentElement) || document.scrollingElement || document.body; 2328 } 2329 function isPartiallyHidden(element) { 2330 const elementRect = element.getBoundingClientRect(); 2331 const scroller = getScrollingElement(element); 2332 if (!scroller) return false; 2333 const scrollerRect = scroller.getBoundingClientRect(); 2334 const isHTML = scroller.tagName === "HTML"; 2335 const scrollerTop = isHTML ? scrollerRect.top + scroller.scrollTop : scrollerRect.top; 2336 const scrollerBottom = isHTML ? scroller.clientHeight : scrollerRect.bottom; 2337 const scrollerLeft = isHTML ? scrollerRect.left + scroller.scrollLeft : scrollerRect.left; 2338 const scrollerRight = isHTML ? scroller.clientWidth : scrollerRect.right; 2339 const top = elementRect.top < scrollerTop; 2340 const left = elementRect.left < scrollerLeft; 2341 const bottom = elementRect.bottom > scrollerBottom; 2342 const right = elementRect.right > scrollerRight; 2343 return top || left || bottom || right; 2344 } 2345 function setSelectionRange(element, ...args) { 2346 if (/text|search|password|tel|url/i.test(element.type)) { 2347 element.setSelectionRange(...args); 2348 } 2349 } 2350 function sortBasedOnDOMPosition(items, getElement) { 2351 const pairs = items.map((item, index) => [index, item]); 2352 let isOrderDifferent = false; 2353 pairs.sort(([indexA, a], [indexB, b]) => { 2354 const elementA = getElement(a); 2355 const elementB = getElement(b); 2356 if (elementA === elementB) return 0; 2357 if (!elementA || !elementB) return 0; 2358 if (isElementPreceding(elementA, elementB)) { 2359 if (indexA > indexB) { 2360 isOrderDifferent = true; 2361 } 2362 return -1; 2363 } 2364 if (indexA < indexB) { 2365 isOrderDifferent = true; 2366 } 2367 return 1; 2368 }); 2369 if (isOrderDifferent) { 2370 return pairs.map(([_, item]) => item); 2371 } 2372 return items; 2373 } 2374 function isElementPreceding(a, b) { 2375 return Boolean( 2376 b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING 2377 ); 2378 } 2379 2380 2381 2382 ;// ./node_modules/@ariakit/core/esm/__chunks/QAGXQEUG.js 2383 "use client"; 2384 2385 2386 // src/utils/platform.ts 2387 function isTouchDevice() { 2388 return canUseDOM && !!navigator.maxTouchPoints; 2389 } 2390 function isApple() { 2391 if (!canUseDOM) return false; 2392 return /mac|iphone|ipad|ipod/i.test(navigator.platform); 2393 } 2394 function isSafari() { 2395 return canUseDOM && isApple() && /apple/i.test(navigator.vendor); 2396 } 2397 function isFirefox() { 2398 return canUseDOM && /firefox\//i.test(navigator.userAgent); 2399 } 2400 function isMac() { 2401 return canUseDOM && navigator.platform.startsWith("Mac") && !isTouchDevice(); 2402 } 2403 2404 2405 2406 ;// ./node_modules/@ariakit/core/esm/utils/events.js 2407 "use client"; 2408 2409 2410 2411 2412 // src/utils/events.ts 2413 function isPortalEvent(event) { 2414 return Boolean( 2415 event.currentTarget && !contains(event.currentTarget, event.target) 2416 ); 2417 } 2418 function isSelfTarget(event) { 2419 return event.target === event.currentTarget; 2420 } 2421 function isOpeningInNewTab(event) { 2422 const element = event.currentTarget; 2423 if (!element) return false; 2424 const isAppleDevice = isApple(); 2425 if (isAppleDevice && !event.metaKey) return false; 2426 if (!isAppleDevice && !event.ctrlKey) return false; 2427 const tagName = element.tagName.toLowerCase(); 2428 if (tagName === "a") return true; 2429 if (tagName === "button" && element.type === "submit") return true; 2430 if (tagName === "input" && element.type === "submit") return true; 2431 return false; 2432 } 2433 function isDownloading(event) { 2434 const element = event.currentTarget; 2435 if (!element) return false; 2436 const tagName = element.tagName.toLowerCase(); 2437 if (!event.altKey) return false; 2438 if (tagName === "a") return true; 2439 if (tagName === "button" && element.type === "submit") return true; 2440 if (tagName === "input" && element.type === "submit") return true; 2441 return false; 2442 } 2443 function fireEvent(element, type, eventInit) { 2444 const event = new Event(type, eventInit); 2445 return element.dispatchEvent(event); 2446 } 2447 function fireBlurEvent(element, eventInit) { 2448 const event = new FocusEvent("blur", eventInit); 2449 const defaultAllowed = element.dispatchEvent(event); 2450 const bubbleInit = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, eventInit), { bubbles: true }); 2451 element.dispatchEvent(new FocusEvent("focusout", bubbleInit)); 2452 return defaultAllowed; 2453 } 2454 function fireFocusEvent(element, eventInit) { 2455 const event = new FocusEvent("focus", eventInit); 2456 const defaultAllowed = element.dispatchEvent(event); 2457 const bubbleInit = __spreadProps(__spreadValues({}, eventInit), { bubbles: true }); 2458 element.dispatchEvent(new FocusEvent("focusin", bubbleInit)); 2459 return defaultAllowed; 2460 } 2461 function fireKeyboardEvent(element, type, eventInit) { 2462 const event = new KeyboardEvent(type, eventInit); 2463 return element.dispatchEvent(event); 2464 } 2465 function fireClickEvent(element, eventInit) { 2466 const event = new MouseEvent("click", eventInit); 2467 return element.dispatchEvent(event); 2468 } 2469 function isFocusEventOutside(event, container) { 2470 const containerElement = container || event.currentTarget; 2471 const relatedTarget = event.relatedTarget; 2472 return !relatedTarget || !contains(containerElement, relatedTarget); 2473 } 2474 function getInputType(event) { 2475 const nativeEvent = "nativeEvent" in event ? event.nativeEvent : event; 2476 if (!nativeEvent) return; 2477 if (!("inputType" in nativeEvent)) return; 2478 if (typeof nativeEvent.inputType !== "string") return; 2479 return nativeEvent.inputType; 2480 } 2481 function queueBeforeEvent(element, type, callback, timeout) { 2482 const createTimer = (callback2) => { 2483 if (timeout) { 2484 const timerId2 = setTimeout(callback2, timeout); 2485 return () => clearTimeout(timerId2); 2486 } 2487 const timerId = requestAnimationFrame(callback2); 2488 return () => cancelAnimationFrame(timerId); 2489 }; 2490 const cancelTimer = createTimer(() => { 2491 element.removeEventListener(type, callSync, true); 2492 callback(); 2493 }); 2494 const callSync = () => { 2495 cancelTimer(); 2496 callback(); 2497 }; 2498 element.addEventListener(type, callSync, { once: true, capture: true }); 2499 return cancelTimer; 2500 } 2501 function addGlobalEventListener(type, listener, options, scope = window) { 2502 const children = []; 2503 try { 2504 scope.document.addEventListener(type, listener, options); 2505 for (const frame of Array.from(scope.frames)) { 2506 children.push(addGlobalEventListener(type, listener, options, frame)); 2507 } 2508 } catch (e) { 2509 } 2510 const removeEventListener = () => { 2511 try { 2512 scope.document.removeEventListener(type, listener, options); 2513 } catch (e) { 2514 } 2515 for (const remove of children) { 2516 remove(); 2517 } 2518 }; 2519 return removeEventListener; 2520 } 2521 2522 2523 ;// ./node_modules/@ariakit/react-core/esm/__chunks/ABQUS43J.js 2524 "use client"; 2525 2526 2527 2528 // src/utils/hooks.ts 2529 2530 2531 2532 2533 var _React = _3YLGPPWQ_spreadValues({}, external_React_namespaceObject); 2534 var useReactId = _React.useId; 2535 var useReactDeferredValue = _React.useDeferredValue; 2536 var useReactInsertionEffect = _React.useInsertionEffect; 2537 var useSafeLayoutEffect = canUseDOM ? external_React_.useLayoutEffect : external_React_.useEffect; 2538 function useInitialValue(value) { 2539 const [initialValue] = (0,external_React_.useState)(value); 2540 return initialValue; 2541 } 2542 function useLazyValue(init) { 2543 const ref = useRef(); 2544 if (ref.current === void 0) { 2545 ref.current = init(); 2546 } 2547 return ref.current; 2548 } 2549 function useLiveRef(value) { 2550 const ref = (0,external_React_.useRef)(value); 2551 useSafeLayoutEffect(() => { 2552 ref.current = value; 2553 }); 2554 return ref; 2555 } 2556 function usePreviousValue(value) { 2557 const [previousValue, setPreviousValue] = useState(value); 2558 if (value !== previousValue) { 2559 setPreviousValue(value); 2560 } 2561 return previousValue; 2562 } 2563 function useEvent(callback) { 2564 const ref = (0,external_React_.useRef)(() => { 2565 throw new Error("Cannot call an event handler while rendering."); 2566 }); 2567 if (useReactInsertionEffect) { 2568 useReactInsertionEffect(() => { 2569 ref.current = callback; 2570 }); 2571 } else { 2572 ref.current = callback; 2573 } 2574 return (0,external_React_.useCallback)((...args) => { 2575 var _a; 2576 return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args); 2577 }, []); 2578 } 2579 function useTransactionState(callback) { 2580 const [state, setState] = (0,external_React_.useState)(null); 2581 useSafeLayoutEffect(() => { 2582 if (state == null) return; 2583 if (!callback) return; 2584 let prevState = null; 2585 callback((prev) => { 2586 prevState = prev; 2587 return state; 2588 }); 2589 return () => { 2590 callback(prevState); 2591 }; 2592 }, [state, callback]); 2593 return [state, setState]; 2594 } 2595 function useMergeRefs(...refs) { 2596 return (0,external_React_.useMemo)(() => { 2597 if (!refs.some(Boolean)) return; 2598 return (value) => { 2599 for (const ref of refs) { 2600 setRef(ref, value); 2601 } 2602 }; 2603 }, refs); 2604 } 2605 function useId(defaultId) { 2606 if (useReactId) { 2607 const reactId = useReactId(); 2608 if (defaultId) return defaultId; 2609 return reactId; 2610 } 2611 const [id, setId] = (0,external_React_.useState)(defaultId); 2612 useSafeLayoutEffect(() => { 2613 if (defaultId || id) return; 2614 const random = Math.random().toString(36).slice(2, 8); 2615 setId(`id-$random}`); 2616 }, [defaultId, id]); 2617 return defaultId || id; 2618 } 2619 function useDeferredValue(value) { 2620 if (useReactDeferredValue) { 2621 return useReactDeferredValue(value); 2622 } 2623 const [deferredValue, setDeferredValue] = useState(value); 2624 useEffect(() => { 2625 const raf = requestAnimationFrame(() => setDeferredValue(value)); 2626 return () => cancelAnimationFrame(raf); 2627 }, [value]); 2628 return deferredValue; 2629 } 2630 function useTagName(refOrElement, type) { 2631 const stringOrUndefined = (type2) => { 2632 if (typeof type2 !== "string") return; 2633 return type2; 2634 }; 2635 const [tagName, setTagName] = (0,external_React_.useState)(() => stringOrUndefined(type)); 2636 useSafeLayoutEffect(() => { 2637 const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement; 2638 setTagName((element == null ? void 0 : element.tagName.toLowerCase()) || stringOrUndefined(type)); 2639 }, [refOrElement, type]); 2640 return tagName; 2641 } 2642 function useAttribute(refOrElement, attributeName, defaultValue) { 2643 const initialValue = useInitialValue(defaultValue); 2644 const [attribute, setAttribute] = (0,external_React_.useState)(initialValue); 2645 (0,external_React_.useEffect)(() => { 2646 const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement; 2647 if (!element) return; 2648 const callback = () => { 2649 const value = element.getAttribute(attributeName); 2650 setAttribute(value == null ? initialValue : value); 2651 }; 2652 const observer = new MutationObserver(callback); 2653 observer.observe(element, { attributeFilter: [attributeName] }); 2654 callback(); 2655 return () => observer.disconnect(); 2656 }, [refOrElement, attributeName, initialValue]); 2657 return attribute; 2658 } 2659 function useUpdateEffect(effect, deps) { 2660 const mounted = (0,external_React_.useRef)(false); 2661 (0,external_React_.useEffect)(() => { 2662 if (mounted.current) { 2663 return effect(); 2664 } 2665 mounted.current = true; 2666 }, deps); 2667 (0,external_React_.useEffect)( 2668 () => () => { 2669 mounted.current = false; 2670 }, 2671 [] 2672 ); 2673 } 2674 function useUpdateLayoutEffect(effect, deps) { 2675 const mounted = useRef(false); 2676 useSafeLayoutEffect(() => { 2677 if (mounted.current) { 2678 return effect(); 2679 } 2680 mounted.current = true; 2681 }, deps); 2682 useSafeLayoutEffect( 2683 () => () => { 2684 mounted.current = false; 2685 }, 2686 [] 2687 ); 2688 } 2689 function useForceUpdate() { 2690 return (0,external_React_.useReducer)(() => [], []); 2691 } 2692 function useBooleanEvent(booleanOrCallback) { 2693 return useEvent( 2694 typeof booleanOrCallback === "function" ? booleanOrCallback : () => booleanOrCallback 2695 ); 2696 } 2697 function useWrapElement(props, callback, deps = []) { 2698 const wrapElement = (0,external_React_.useCallback)( 2699 (element) => { 2700 if (props.wrapElement) { 2701 element = props.wrapElement(element); 2702 } 2703 return callback(element); 2704 }, 2705 [...deps, props.wrapElement] 2706 ); 2707 return _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { wrapElement }); 2708 } 2709 function usePortalRef(portalProp = false, portalRefProp) { 2710 const [portalNode, setPortalNode] = (0,external_React_.useState)(null); 2711 const portalRef = useMergeRefs(setPortalNode, portalRefProp); 2712 const domReady = !portalProp || portalNode; 2713 return { portalRef, portalNode, domReady }; 2714 } 2715 function useMetadataProps(props, key, value) { 2716 const parent = props.onLoadedMetadataCapture; 2717 const onLoadedMetadataCapture = (0,external_React_.useMemo)(() => { 2718 return Object.assign(() => { 2719 }, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, parent), { [key]: value })); 2720 }, [parent, key, value]); 2721 return [parent == null ? void 0 : parent[key], { onLoadedMetadataCapture }]; 2722 } 2723 function useIsMouseMoving() { 2724 (0,external_React_.useEffect)(() => { 2725 addGlobalEventListener("mousemove", setMouseMoving, true); 2726 addGlobalEventListener("mousedown", resetMouseMoving, true); 2727 addGlobalEventListener("mouseup", resetMouseMoving, true); 2728 addGlobalEventListener("keydown", resetMouseMoving, true); 2729 addGlobalEventListener("scroll", resetMouseMoving, true); 2730 }, []); 2731 const isMouseMoving = useEvent(() => mouseMoving); 2732 return isMouseMoving; 2733 } 2734 var mouseMoving = false; 2735 var previousScreenX = 0; 2736 var previousScreenY = 0; 2737 function hasMouseMovement(event) { 2738 const movementX = event.movementX || event.screenX - previousScreenX; 2739 const movementY = event.movementY || event.screenY - previousScreenY; 2740 previousScreenX = event.screenX; 2741 previousScreenY = event.screenY; 2742 return movementX || movementY || "production" === "test"; 2743 } 2744 function setMouseMoving(event) { 2745 if (!hasMouseMovement(event)) return; 2746 mouseMoving = true; 2747 } 2748 function resetMouseMoving() { 2749 mouseMoving = false; 2750 } 2751 2752 2753 2754 ;// ./node_modules/@ariakit/core/esm/__chunks/BCALMBPZ.js 2755 "use client"; 2756 2757 2758 2759 // src/utils/store.ts 2760 function getInternal(store, key) { 2761 const internals = store.__unstableInternals; 2762 invariant(internals, "Invalid store"); 2763 return internals[key]; 2764 } 2765 function createStore(initialState, ...stores) { 2766 let state = initialState; 2767 let prevStateBatch = state; 2768 let lastUpdate = Symbol(); 2769 let destroy = noop; 2770 const instances = /* @__PURE__ */ new Set(); 2771 const updatedKeys = /* @__PURE__ */ new Set(); 2772 const setups = /* @__PURE__ */ new Set(); 2773 const listeners = /* @__PURE__ */ new Set(); 2774 const batchListeners = /* @__PURE__ */ new Set(); 2775 const disposables = /* @__PURE__ */ new WeakMap(); 2776 const listenerKeys = /* @__PURE__ */ new WeakMap(); 2777 const storeSetup = (callback) => { 2778 setups.add(callback); 2779 return () => setups.delete(callback); 2780 }; 2781 const storeInit = () => { 2782 const initialized = instances.size; 2783 const instance = Symbol(); 2784 instances.add(instance); 2785 const maybeDestroy = () => { 2786 instances.delete(instance); 2787 if (instances.size) return; 2788 destroy(); 2789 }; 2790 if (initialized) return maybeDestroy; 2791 const desyncs = getKeys(state).map( 2792 (key) => chain( 2793 ...stores.map((store) => { 2794 var _a; 2795 const storeState = (_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store); 2796 if (!storeState) return; 2797 if (!PBFD2E7P_hasOwnProperty(storeState, key)) return; 2798 return sync(store, [key], (state2) => { 2799 setState( 2800 key, 2801 state2[key], 2802 // @ts-expect-error - Not public API. This is just to prevent 2803 // infinite loops. 2804 true 2805 ); 2806 }); 2807 }) 2808 ) 2809 ); 2810 const teardowns = []; 2811 for (const setup2 of setups) { 2812 teardowns.push(setup2()); 2813 } 2814 const cleanups = stores.map(init); 2815 destroy = chain(...desyncs, ...teardowns, ...cleanups); 2816 return maybeDestroy; 2817 }; 2818 const sub = (keys, listener, set = listeners) => { 2819 set.add(listener); 2820 listenerKeys.set(listener, keys); 2821 return () => { 2822 var _a; 2823 (_a = disposables.get(listener)) == null ? void 0 : _a(); 2824 disposables.delete(listener); 2825 listenerKeys.delete(listener); 2826 set.delete(listener); 2827 }; 2828 }; 2829 const storeSubscribe = (keys, listener) => sub(keys, listener); 2830 const storeSync = (keys, listener) => { 2831 disposables.set(listener, listener(state, state)); 2832 return sub(keys, listener); 2833 }; 2834 const storeBatch = (keys, listener) => { 2835 disposables.set(listener, listener(state, prevStateBatch)); 2836 return sub(keys, listener, batchListeners); 2837 }; 2838 const storePick = (keys) => createStore(pick(state, keys), finalStore); 2839 const storeOmit = (keys) => createStore(omit(state, keys), finalStore); 2840 const getState = () => state; 2841 const setState = (key, value, fromStores = false) => { 2842 var _a; 2843 if (!PBFD2E7P_hasOwnProperty(state, key)) return; 2844 const nextValue = applyState(value, state[key]); 2845 if (nextValue === state[key]) return; 2846 if (!fromStores) { 2847 for (const store of stores) { 2848 (_a = store == null ? void 0 : store.setState) == null ? void 0 : _a.call(store, key, nextValue); 2849 } 2850 } 2851 const prevState = state; 2852 state = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, state), { [key]: nextValue }); 2853 const thisUpdate = Symbol(); 2854 lastUpdate = thisUpdate; 2855 updatedKeys.add(key); 2856 const run = (listener, prev, uKeys) => { 2857 var _a2; 2858 const keys = listenerKeys.get(listener); 2859 const updated = (k) => uKeys ? uKeys.has(k) : k === key; 2860 if (!keys || keys.some(updated)) { 2861 (_a2 = disposables.get(listener)) == null ? void 0 : _a2(); 2862 disposables.set(listener, listener(state, prev)); 2863 } 2864 }; 2865 for (const listener of listeners) { 2866 run(listener, prevState); 2867 } 2868 queueMicrotask(() => { 2869 if (lastUpdate !== thisUpdate) return; 2870 const snapshot = state; 2871 for (const listener of batchListeners) { 2872 run(listener, prevStateBatch, updatedKeys); 2873 } 2874 prevStateBatch = snapshot; 2875 updatedKeys.clear(); 2876 }); 2877 }; 2878 const finalStore = { 2879 getState, 2880 setState, 2881 __unstableInternals: { 2882 setup: storeSetup, 2883 init: storeInit, 2884 subscribe: storeSubscribe, 2885 sync: storeSync, 2886 batch: storeBatch, 2887 pick: storePick, 2888 omit: storeOmit 2889 } 2890 }; 2891 return finalStore; 2892 } 2893 function setup(store, ...args) { 2894 if (!store) return; 2895 return getInternal(store, "setup")(...args); 2896 } 2897 function init(store, ...args) { 2898 if (!store) return; 2899 return getInternal(store, "init")(...args); 2900 } 2901 function subscribe(store, ...args) { 2902 if (!store) return; 2903 return getInternal(store, "subscribe")(...args); 2904 } 2905 function sync(store, ...args) { 2906 if (!store) return; 2907 return getInternal(store, "sync")(...args); 2908 } 2909 function batch(store, ...args) { 2910 if (!store) return; 2911 return getInternal(store, "batch")(...args); 2912 } 2913 function omit2(store, ...args) { 2914 if (!store) return; 2915 return getInternal(store, "omit")(...args); 2916 } 2917 function pick2(store, ...args) { 2918 if (!store) return; 2919 return getInternal(store, "pick")(...args); 2920 } 2921 function mergeStore(...stores) { 2922 const initialState = stores.reduce((state, store2) => { 2923 var _a; 2924 const nextState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2); 2925 if (!nextState) return state; 2926 return Object.assign(state, nextState); 2927 }, {}); 2928 const store = createStore(initialState, ...stores); 2929 return Object.assign({}, ...stores, store); 2930 } 2931 function throwOnConflictingProps(props, store) { 2932 if (true) return; 2933 if (!store) return; 2934 const defaultKeys = Object.entries(props).filter(([key, value]) => key.startsWith("default") && value !== void 0).map(([key]) => { 2935 var _a; 2936 const stateKey = key.replace("default", ""); 2937 return `${((_a = stateKey[0]) == null ? void 0 : _a.toLowerCase()) || ""}$stateKey.slice(1)}`; 2938 }); 2939 if (!defaultKeys.length) return; 2940 const storeState = store.getState(); 2941 const conflictingProps = defaultKeys.filter( 2942 (key) => PBFD2E7P_hasOwnProperty(storeState, key) 2943 ); 2944 if (!conflictingProps.length) return; 2945 throw new Error( 2946 `Passing a store prop in conjunction with a default state is not supported. 2947 2948 const store = useSelectStore(); 2949 <SelectProvider store={store} defaultValue="Apple" /> 2950 ^ ^ 2951 2952 Instead, pass the default state to the topmost store: 2953 2954 const store = useSelectStore({ defaultValue: "Apple" }); 2955 <SelectProvider store={store} /> 2956 2957 See https://github.com/ariakit/ariakit/pull/2745 for more details. 2958 2959 If there's a particular need for this, please submit a feature request at https://github.com/ariakit/ariakit 2960 ` 2961 ); 2962 } 2963 2964 2965 2966 // EXTERNAL MODULE: ./node_modules/use-sync-external-store/shim/index.js 2967 var shim = __webpack_require__(422); 2968 ;// ./node_modules/@ariakit/react-core/esm/__chunks/YV4JVR4I.js 2969 "use client"; 2970 2971 2972 2973 // src/utils/store.tsx 2974 2975 2976 2977 2978 var { useSyncExternalStore } = shim; 2979 var noopSubscribe = () => () => { 2980 }; 2981 function useStoreState(store, keyOrSelector = identity) { 2982 const storeSubscribe = external_React_.useCallback( 2983 (callback) => { 2984 if (!store) return noopSubscribe(); 2985 return subscribe(store, null, callback); 2986 }, 2987 [store] 2988 ); 2989 const getSnapshot = () => { 2990 const key = typeof keyOrSelector === "string" ? keyOrSelector : null; 2991 const selector = typeof keyOrSelector === "function" ? keyOrSelector : null; 2992 const state = store == null ? void 0 : store.getState(); 2993 if (selector) return selector(state); 2994 if (!state) return; 2995 if (!key) return; 2996 if (!PBFD2E7P_hasOwnProperty(state, key)) return; 2997 return state[key]; 2998 }; 2999 return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot); 3000 } 3001 function useStoreStateObject(store, object) { 3002 const objRef = external_React_.useRef( 3003 {} 3004 ); 3005 const storeSubscribe = external_React_.useCallback( 3006 (callback) => { 3007 if (!store) return noopSubscribe(); 3008 return subscribe(store, null, callback); 3009 }, 3010 [store] 3011 ); 3012 const getSnapshot = () => { 3013 const state = store == null ? void 0 : store.getState(); 3014 let updated = false; 3015 const obj = objRef.current; 3016 for (const prop in object) { 3017 const keyOrSelector = object[prop]; 3018 if (typeof keyOrSelector === "function") { 3019 const value = keyOrSelector(state); 3020 if (value !== obj[prop]) { 3021 obj[prop] = value; 3022 updated = true; 3023 } 3024 } 3025 if (typeof keyOrSelector === "string") { 3026 if (!state) continue; 3027 if (!PBFD2E7P_hasOwnProperty(state, keyOrSelector)) continue; 3028 const value = state[keyOrSelector]; 3029 if (value !== obj[prop]) { 3030 obj[prop] = value; 3031 updated = true; 3032 } 3033 } 3034 } 3035 if (updated) { 3036 objRef.current = _3YLGPPWQ_spreadValues({}, obj); 3037 } 3038 return objRef.current; 3039 }; 3040 return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot); 3041 } 3042 function useStoreProps(store, props, key, setKey) { 3043 const value = PBFD2E7P_hasOwnProperty(props, key) ? props[key] : void 0; 3044 const setValue = setKey ? props[setKey] : void 0; 3045 const propsRef = useLiveRef({ value, setValue }); 3046 useSafeLayoutEffect(() => { 3047 return sync(store, [key], (state, prev) => { 3048 const { value: value2, setValue: setValue2 } = propsRef.current; 3049 if (!setValue2) return; 3050 if (state[key] === prev[key]) return; 3051 if (state[key] === value2) return; 3052 setValue2(state[key]); 3053 }); 3054 }, [store, key]); 3055 useSafeLayoutEffect(() => { 3056 if (value === void 0) return; 3057 store.setState(key, value); 3058 return batch(store, [key], () => { 3059 if (value === void 0) return; 3060 store.setState(key, value); 3061 }); 3062 }); 3063 } 3064 function YV4JVR4I_useStore(createStore, props) { 3065 const [store, setStore] = external_React_.useState(() => createStore(props)); 3066 useSafeLayoutEffect(() => init(store), [store]); 3067 const useState2 = external_React_.useCallback( 3068 (keyOrSelector) => useStoreState(store, keyOrSelector), 3069 [store] 3070 ); 3071 const memoizedStore = external_React_.useMemo( 3072 () => _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, store), { useState: useState2 }), 3073 [store, useState2] 3074 ); 3075 const updateStore = useEvent(() => { 3076 setStore((store2) => createStore(_3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({}, props), store2.getState()))); 3077 }); 3078 return [memoizedStore, updateStore]; 3079 } 3080 3081 3082 3083 ;// ./node_modules/@ariakit/react-core/esm/__chunks/C3IKGW5T.js 3084 "use client"; 3085 3086 3087 3088 // src/collection/collection-store.ts 3089 3090 function useCollectionStoreProps(store, update, props) { 3091 useUpdateEffect(update, [props.store]); 3092 useStoreProps(store, props, "items", "setItems"); 3093 return store; 3094 } 3095 function useCollectionStore(props = {}) { 3096 const [store, update] = useStore(Core.createCollectionStore, props); 3097 return useCollectionStoreProps(store, update, props); 3098 } 3099 3100 3101 3102 ;// ./node_modules/@ariakit/core/esm/__chunks/CYQWQL4J.js 3103 "use client"; 3104 3105 3106 3107 3108 3109 // src/collection/collection-store.ts 3110 function getCommonParent(items) { 3111 var _a; 3112 const firstItem = items.find((item) => !!item.element); 3113 const lastItem = [...items].reverse().find((item) => !!item.element); 3114 let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement; 3115 while (parentElement && (lastItem == null ? void 0 : lastItem.element)) { 3116 const parent = parentElement; 3117 if (lastItem && parent.contains(lastItem.element)) { 3118 return parentElement; 3119 } 3120 parentElement = parentElement.parentElement; 3121 } 3122 return getDocument(parentElement).body; 3123 } 3124 function getPrivateStore(store) { 3125 return store == null ? void 0 : store.__unstablePrivateStore; 3126 } 3127 function createCollectionStore(props = {}) { 3128 var _a; 3129 throwOnConflictingProps(props, props.store); 3130 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 3131 const items = defaultValue( 3132 props.items, 3133 syncState == null ? void 0 : syncState.items, 3134 props.defaultItems, 3135 [] 3136 ); 3137 const itemsMap = new Map(items.map((item) => [item.id, item])); 3138 const initialState = { 3139 items, 3140 renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, []) 3141 }; 3142 const syncPrivateStore = getPrivateStore(props.store); 3143 const privateStore = createStore( 3144 { items, renderedItems: initialState.renderedItems }, 3145 syncPrivateStore 3146 ); 3147 const collection = createStore(initialState, props.store); 3148 const sortItems = (renderedItems) => { 3149 const sortedItems = sortBasedOnDOMPosition(renderedItems, (i) => i.element); 3150 privateStore.setState("renderedItems", sortedItems); 3151 collection.setState("renderedItems", sortedItems); 3152 }; 3153 setup(collection, () => init(privateStore)); 3154 setup(privateStore, () => { 3155 return batch(privateStore, ["items"], (state) => { 3156 collection.setState("items", state.items); 3157 }); 3158 }); 3159 setup(privateStore, () => { 3160 return batch(privateStore, ["renderedItems"], (state) => { 3161 let firstRun = true; 3162 let raf = requestAnimationFrame(() => { 3163 const { renderedItems } = collection.getState(); 3164 if (state.renderedItems === renderedItems) return; 3165 sortItems(state.renderedItems); 3166 }); 3167 if (typeof IntersectionObserver !== "function") { 3168 return () => cancelAnimationFrame(raf); 3169 } 3170 const ioCallback = () => { 3171 if (firstRun) { 3172 firstRun = false; 3173 return; 3174 } 3175 cancelAnimationFrame(raf); 3176 raf = requestAnimationFrame(() => sortItems(state.renderedItems)); 3177 }; 3178 const root = getCommonParent(state.renderedItems); 3179 const observer = new IntersectionObserver(ioCallback, { root }); 3180 for (const item of state.renderedItems) { 3181 if (!item.element) continue; 3182 observer.observe(item.element); 3183 } 3184 return () => { 3185 cancelAnimationFrame(raf); 3186 observer.disconnect(); 3187 }; 3188 }); 3189 }); 3190 const mergeItem = (item, setItems, canDeleteFromMap = false) => { 3191 let prevItem; 3192 setItems((items2) => { 3193 const index = items2.findIndex(({ id }) => id === item.id); 3194 const nextItems = items2.slice(); 3195 if (index !== -1) { 3196 prevItem = items2[index]; 3197 const nextItem = _chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, prevItem), item); 3198 nextItems[index] = nextItem; 3199 itemsMap.set(item.id, nextItem); 3200 } else { 3201 nextItems.push(item); 3202 itemsMap.set(item.id, item); 3203 } 3204 return nextItems; 3205 }); 3206 const unmergeItem = () => { 3207 setItems((items2) => { 3208 if (!prevItem) { 3209 if (canDeleteFromMap) { 3210 itemsMap.delete(item.id); 3211 } 3212 return items2.filter(({ id }) => id !== item.id); 3213 } 3214 const index = items2.findIndex(({ id }) => id === item.id); 3215 if (index === -1) return items2; 3216 const nextItems = items2.slice(); 3217 nextItems[index] = prevItem; 3218 itemsMap.set(item.id, prevItem); 3219 return nextItems; 3220 }); 3221 }; 3222 return unmergeItem; 3223 }; 3224 const registerItem = (item) => mergeItem( 3225 item, 3226 (getItems) => privateStore.setState("items", getItems), 3227 true 3228 ); 3229 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, collection), { 3230 registerItem, 3231 renderItem: (item) => chain( 3232 registerItem(item), 3233 mergeItem( 3234 item, 3235 (getItems) => privateStore.setState("renderedItems", getItems) 3236 ) 3237 ), 3238 item: (id) => { 3239 if (!id) return null; 3240 let item = itemsMap.get(id); 3241 if (!item) { 3242 const { items: items2 } = privateStore.getState(); 3243 item = items2.find((item2) => item2.id === id); 3244 if (item) { 3245 itemsMap.set(id, item); 3246 } 3247 } 3248 return item || null; 3249 }, 3250 // @ts-expect-error Internal 3251 __unstablePrivateStore: privateStore 3252 }); 3253 } 3254 3255 3256 3257 ;// ./node_modules/@ariakit/core/esm/__chunks/7PRQYBBV.js 3258 "use client"; 3259 3260 // src/utils/array.ts 3261 function toArray(arg) { 3262 if (Array.isArray(arg)) { 3263 return arg; 3264 } 3265 return typeof arg !== "undefined" ? [arg] : []; 3266 } 3267 function addItemToArray(array, item, index = -1) { 3268 if (!(index in array)) { 3269 return [...array, item]; 3270 } 3271 return [...array.slice(0, index), item, ...array.slice(index)]; 3272 } 3273 function flatten2DArray(array) { 3274 const flattened = []; 3275 for (const row of array) { 3276 flattened.push(...row); 3277 } 3278 return flattened; 3279 } 3280 function reverseArray(array) { 3281 return array.slice().reverse(); 3282 } 3283 3284 3285 3286 ;// ./node_modules/@ariakit/core/esm/__chunks/AJZ4BYF3.js 3287 "use client"; 3288 3289 3290 3291 3292 3293 3294 // src/composite/composite-store.ts 3295 var NULL_ITEM = { id: null }; 3296 function findFirstEnabledItem(items, excludeId) { 3297 return items.find((item) => { 3298 if (excludeId) { 3299 return !item.disabled && item.id !== excludeId; 3300 } 3301 return !item.disabled; 3302 }); 3303 } 3304 function getEnabledItems(items, excludeId) { 3305 return items.filter((item) => { 3306 if (excludeId) { 3307 return !item.disabled && item.id !== excludeId; 3308 } 3309 return !item.disabled; 3310 }); 3311 } 3312 function getItemsInRow(items, rowId) { 3313 return items.filter((item) => item.rowId === rowId); 3314 } 3315 function flipItems(items, activeId, shouldInsertNullItem = false) { 3316 const index = items.findIndex((item) => item.id === activeId); 3317 return [ 3318 ...items.slice(index + 1), 3319 ...shouldInsertNullItem ? [NULL_ITEM] : [], 3320 ...items.slice(0, index) 3321 ]; 3322 } 3323 function groupItemsByRows(items) { 3324 const rows = []; 3325 for (const item of items) { 3326 const row = rows.find((currentRow) => { 3327 var _a; 3328 return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId; 3329 }); 3330 if (row) { 3331 row.push(item); 3332 } else { 3333 rows.push([item]); 3334 } 3335 } 3336 return rows; 3337 } 3338 function getMaxRowLength(array) { 3339 let maxLength = 0; 3340 for (const { length } of array) { 3341 if (length > maxLength) { 3342 maxLength = length; 3343 } 3344 } 3345 return maxLength; 3346 } 3347 function createEmptyItem(rowId) { 3348 return { 3349 id: "__EMPTY_ITEM__", 3350 disabled: true, 3351 rowId 3352 }; 3353 } 3354 function normalizeRows(rows, activeId, focusShift) { 3355 const maxLength = getMaxRowLength(rows); 3356 for (const row of rows) { 3357 for (let i = 0; i < maxLength; i += 1) { 3358 const item = row[i]; 3359 if (!item || focusShift && item.disabled) { 3360 const isFirst = i === 0; 3361 const previousItem = isFirst && focusShift ? findFirstEnabledItem(row) : row[i - 1]; 3362 row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem == null ? void 0 : previousItem.rowId); 3363 } 3364 } 3365 } 3366 return rows; 3367 } 3368 function verticalizeItems(items) { 3369 const rows = groupItemsByRows(items); 3370 const maxLength = getMaxRowLength(rows); 3371 const verticalized = []; 3372 for (let i = 0; i < maxLength; i += 1) { 3373 for (const row of rows) { 3374 const item = row[i]; 3375 if (item) { 3376 verticalized.push(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, item), { 3377 // If there's no rowId, it means that it's not a grid composite, but 3378 // a single row instead. So, instead of verticalizing it, that is, 3379 // assigning a different rowId based on the column index, we keep it 3380 // undefined so they will be part of the same row. This is useful 3381 // when using up/down on one-dimensional composites. 3382 rowId: item.rowId ? `$i}` : void 0 3383 })); 3384 } 3385 } 3386 } 3387 return verticalized; 3388 } 3389 function createCompositeStore(props = {}) { 3390 var _a; 3391 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 3392 const collection = createCollectionStore(props); 3393 const activeId = defaultValue( 3394 props.activeId, 3395 syncState == null ? void 0 : syncState.activeId, 3396 props.defaultActiveId 3397 ); 3398 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, collection.getState()), { 3399 id: defaultValue( 3400 props.id, 3401 syncState == null ? void 0 : syncState.id, 3402 `id-$Math.random().toString(36).slice(2, 8)}` 3403 ), 3404 activeId, 3405 baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null), 3406 includesBaseElement: defaultValue( 3407 props.includesBaseElement, 3408 syncState == null ? void 0 : syncState.includesBaseElement, 3409 activeId === null 3410 ), 3411 moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0), 3412 orientation: defaultValue( 3413 props.orientation, 3414 syncState == null ? void 0 : syncState.orientation, 3415 "both" 3416 ), 3417 rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false), 3418 virtualFocus: defaultValue( 3419 props.virtualFocus, 3420 syncState == null ? void 0 : syncState.virtualFocus, 3421 false 3422 ), 3423 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false), 3424 focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false), 3425 focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false) 3426 }); 3427 const composite = createStore(initialState, collection, props.store); 3428 setup( 3429 composite, 3430 () => sync(composite, ["renderedItems", "activeId"], (state) => { 3431 composite.setState("activeId", (activeId2) => { 3432 var _a2; 3433 if (activeId2 !== void 0) return activeId2; 3434 return (_a2 = findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id; 3435 }); 3436 }) 3437 ); 3438 const getNextId = (direction = "next", options = {}) => { 3439 var _a2, _b; 3440 const defaultState = composite.getState(); 3441 const { 3442 skip = 0, 3443 activeId: activeId2 = defaultState.activeId, 3444 focusShift = defaultState.focusShift, 3445 focusLoop = defaultState.focusLoop, 3446 focusWrap = defaultState.focusWrap, 3447 includesBaseElement = defaultState.includesBaseElement, 3448 renderedItems = defaultState.renderedItems, 3449 rtl = defaultState.rtl 3450 } = options; 3451 const isVerticalDirection = direction === "up" || direction === "down"; 3452 const isNextDirection = direction === "next" || direction === "down"; 3453 const canReverse = isNextDirection ? rtl && !isVerticalDirection : !rtl || isVerticalDirection; 3454 const canShift = focusShift && !skip; 3455 let items = !isVerticalDirection ? renderedItems : flatten2DArray( 3456 normalizeRows(groupItemsByRows(renderedItems), activeId2, canShift) 3457 ); 3458 items = canReverse ? reverseArray(items) : items; 3459 items = isVerticalDirection ? verticalizeItems(items) : items; 3460 if (activeId2 == null) { 3461 return (_a2 = findFirstEnabledItem(items)) == null ? void 0 : _a2.id; 3462 } 3463 const activeItem = items.find((item) => item.id === activeId2); 3464 if (!activeItem) { 3465 return (_b = findFirstEnabledItem(items)) == null ? void 0 : _b.id; 3466 } 3467 const isGrid = items.some((item) => item.rowId); 3468 const activeIndex = items.indexOf(activeItem); 3469 const nextItems = items.slice(activeIndex + 1); 3470 const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId); 3471 if (skip) { 3472 const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2); 3473 const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one. 3474 nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1]; 3475 return nextItem2 == null ? void 0 : nextItem2.id; 3476 } 3477 const canLoop = focusLoop && (isVerticalDirection ? focusLoop !== "horizontal" : focusLoop !== "vertical"); 3478 const canWrap = isGrid && focusWrap && (isVerticalDirection ? focusWrap !== "horizontal" : focusWrap !== "vertical"); 3479 const hasNullItem = isNextDirection ? (!isGrid || isVerticalDirection) && canLoop && includesBaseElement : isVerticalDirection ? includesBaseElement : false; 3480 if (canLoop) { 3481 const loopItems = canWrap && !hasNullItem ? items : getItemsInRow(items, activeItem.rowId); 3482 const sortedItems = flipItems(loopItems, activeId2, hasNullItem); 3483 const nextItem2 = findFirstEnabledItem(sortedItems, activeId2); 3484 return nextItem2 == null ? void 0 : nextItem2.id; 3485 } 3486 if (canWrap) { 3487 const nextItem2 = findFirstEnabledItem( 3488 // We can use nextItems, which contains all the next items, including 3489 // items from other rows, to wrap between rows. However, if there is a 3490 // null item (the composite container), we'll only use the next items in 3491 // the row. So moving next from the last item will focus on the 3492 // composite container. On grid composites, horizontal navigation never 3493 // focuses on the composite container, only vertical. 3494 hasNullItem ? nextItemsInRow : nextItems, 3495 activeId2 3496 ); 3497 const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id; 3498 return nextId; 3499 } 3500 const nextItem = findFirstEnabledItem(nextItemsInRow, activeId2); 3501 if (!nextItem && hasNullItem) { 3502 return null; 3503 } 3504 return nextItem == null ? void 0 : nextItem.id; 3505 }; 3506 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, collection), composite), { 3507 setBaseElement: (element) => composite.setState("baseElement", element), 3508 setActiveId: (id) => composite.setState("activeId", id), 3509 move: (id) => { 3510 if (id === void 0) return; 3511 composite.setState("activeId", id); 3512 composite.setState("moves", (moves) => moves + 1); 3513 }, 3514 first: () => { 3515 var _a2; 3516 return (_a2 = findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id; 3517 }, 3518 last: () => { 3519 var _a2; 3520 return (_a2 = findFirstEnabledItem(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id; 3521 }, 3522 next: (options) => { 3523 if (options !== void 0 && typeof options === "number") { 3524 options = { skip: options }; 3525 } 3526 return getNextId("next", options); 3527 }, 3528 previous: (options) => { 3529 if (options !== void 0 && typeof options === "number") { 3530 options = { skip: options }; 3531 } 3532 return getNextId("previous", options); 3533 }, 3534 down: (options) => { 3535 if (options !== void 0 && typeof options === "number") { 3536 options = { skip: options }; 3537 } 3538 return getNextId("down", options); 3539 }, 3540 up: (options) => { 3541 if (options !== void 0 && typeof options === "number") { 3542 options = { skip: options }; 3543 } 3544 return getNextId("up", options); 3545 } 3546 }); 3547 } 3548 3549 3550 3551 ;// ./node_modules/@ariakit/react-core/esm/__chunks/4CMBR7SL.js 3552 "use client"; 3553 3554 3555 3556 3557 3558 // src/composite/composite-store.ts 3559 3560 function useCompositeStoreOptions(props) { 3561 const id = useId(props.id); 3562 return _3YLGPPWQ_spreadValues({ id }, props); 3563 } 3564 function useCompositeStoreProps(store, update, props) { 3565 store = useCollectionStoreProps(store, update, props); 3566 useStoreProps(store, props, "activeId", "setActiveId"); 3567 useStoreProps(store, props, "includesBaseElement"); 3568 useStoreProps(store, props, "virtualFocus"); 3569 useStoreProps(store, props, "orientation"); 3570 useStoreProps(store, props, "rtl"); 3571 useStoreProps(store, props, "focusLoop"); 3572 useStoreProps(store, props, "focusWrap"); 3573 useStoreProps(store, props, "focusShift"); 3574 return store; 3575 } 3576 function useCompositeStore(props = {}) { 3577 props = useCompositeStoreOptions(props); 3578 const [store, update] = YV4JVR4I_useStore(createCompositeStore, props); 3579 return useCompositeStoreProps(store, update, props); 3580 } 3581 3582 3583 3584 ;// ./node_modules/@ariakit/react-core/esm/__chunks/5VQZOHHZ.js 3585 "use client"; 3586 3587 // src/composite/utils.ts 3588 3589 var _5VQZOHHZ_NULL_ITEM = { id: null }; 3590 function _5VQZOHHZ_flipItems(items, activeId, shouldInsertNullItem = false) { 3591 const index = items.findIndex((item) => item.id === activeId); 3592 return [ 3593 ...items.slice(index + 1), 3594 ...shouldInsertNullItem ? [_5VQZOHHZ_NULL_ITEM] : [], 3595 ...items.slice(0, index) 3596 ]; 3597 } 3598 function _5VQZOHHZ_findFirstEnabledItem(items, excludeId) { 3599 return items.find((item) => { 3600 if (excludeId) { 3601 return !item.disabled && item.id !== excludeId; 3602 } 3603 return !item.disabled; 3604 }); 3605 } 3606 function getEnabledItem(store, id) { 3607 if (!id) return null; 3608 return store.item(id) || null; 3609 } 3610 function _5VQZOHHZ_groupItemsByRows(items) { 3611 const rows = []; 3612 for (const item of items) { 3613 const row = rows.find((currentRow) => { 3614 var _a; 3615 return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId; 3616 }); 3617 if (row) { 3618 row.push(item); 3619 } else { 3620 rows.push([item]); 3621 } 3622 } 3623 return rows; 3624 } 3625 function selectTextField(element, collapseToEnd = false) { 3626 if (isTextField(element)) { 3627 element.setSelectionRange( 3628 collapseToEnd ? element.value.length : 0, 3629 element.value.length 3630 ); 3631 } else if (element.isContentEditable) { 3632 const selection = getDocument(element).getSelection(); 3633 selection == null ? void 0 : selection.selectAllChildren(element); 3634 if (collapseToEnd) { 3635 selection == null ? void 0 : selection.collapseToEnd(); 3636 } 3637 } 3638 } 3639 var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY"); 3640 function focusSilently(element) { 3641 element[FOCUS_SILENTLY] = true; 3642 element.focus({ preventScroll: true }); 3643 } 3644 function silentlyFocused(element) { 3645 const isSilentlyFocused = element[FOCUS_SILENTLY]; 3646 delete element[FOCUS_SILENTLY]; 3647 return isSilentlyFocused; 3648 } 3649 function isItem(store, element, exclude) { 3650 if (!element) return false; 3651 if (element === exclude) return false; 3652 const item = store.item(element.id); 3653 if (!item) return false; 3654 if (exclude && item.element === exclude) return false; 3655 return true; 3656 } 3657 3658 3659 3660 ;// external "ReactJSXRuntime" 3661 const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"]; 3662 ;// ./node_modules/@ariakit/react-core/esm/__chunks/LMDWO4NN.js 3663 "use client"; 3664 3665 3666 3667 3668 // src/utils/system.tsx 3669 3670 3671 function forwardRef2(render) { 3672 const Role = external_React_.forwardRef((props, ref) => render(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { ref }))); 3673 Role.displayName = render.displayName || render.name; 3674 return Role; 3675 } 3676 function memo2(Component, propsAreEqual) { 3677 return external_React_.memo(Component, propsAreEqual); 3678 } 3679 function LMDWO4NN_createElement(Type, props) { 3680 const _a = props, { wrapElement, render } = _a, rest = __objRest(_a, ["wrapElement", "render"]); 3681 const mergedRef = useMergeRefs(props.ref, getRefProperty(render)); 3682 let element; 3683 if (external_React_.isValidElement(render)) { 3684 const renderProps = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, render.props), { ref: mergedRef }); 3685 element = external_React_.cloneElement(render, mergeProps(rest, renderProps)); 3686 } else if (render) { 3687 element = render(rest); 3688 } else { 3689 element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Type, _3YLGPPWQ_spreadValues({}, rest)); 3690 } 3691 if (wrapElement) { 3692 return wrapElement(element); 3693 } 3694 return element; 3695 } 3696 function createHook(useProps) { 3697 const useRole = (props = {}) => { 3698 return useProps(props); 3699 }; 3700 useRole.displayName = useProps.name; 3701 return useRole; 3702 } 3703 function createStoreContext(providers = [], scopedProviders = []) { 3704 const context = external_React_.createContext(void 0); 3705 const scopedContext = external_React_.createContext(void 0); 3706 const useContext2 = () => external_React_.useContext(context); 3707 const useScopedContext = (onlyScoped = false) => { 3708 const scoped = external_React_.useContext(scopedContext); 3709 const store = useContext2(); 3710 if (onlyScoped) return scoped; 3711 return scoped || store; 3712 }; 3713 const useProviderContext = () => { 3714 const scoped = external_React_.useContext(scopedContext); 3715 const store = useContext2(); 3716 if (scoped && scoped === store) return; 3717 return store; 3718 }; 3719 const ContextProvider = (props) => { 3720 return providers.reduceRight( 3721 (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { children })), 3722 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, _3YLGPPWQ_spreadValues({}, props)) 3723 ); 3724 }; 3725 const ScopedContextProvider = (props) => { 3726 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextProvider, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { children: scopedProviders.reduceRight( 3727 (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { children })), 3728 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(scopedContext.Provider, _3YLGPPWQ_spreadValues({}, props)) 3729 ) })); 3730 }; 3731 return { 3732 context, 3733 scopedContext, 3734 useContext: useContext2, 3735 useScopedContext, 3736 useProviderContext, 3737 ContextProvider, 3738 ScopedContextProvider 3739 }; 3740 } 3741 3742 3743 3744 ;// ./node_modules/@ariakit/react-core/esm/__chunks/VDHZ5F7K.js 3745 "use client"; 3746 3747 3748 // src/collection/collection-context.tsx 3749 var ctx = createStoreContext(); 3750 var useCollectionContext = ctx.useContext; 3751 var useCollectionScopedContext = ctx.useScopedContext; 3752 var useCollectionProviderContext = ctx.useProviderContext; 3753 var CollectionContextProvider = ctx.ContextProvider; 3754 var CollectionScopedContextProvider = ctx.ScopedContextProvider; 3755 3756 3757 3758 ;// ./node_modules/@ariakit/react-core/esm/__chunks/P7GR5CS5.js 3759 "use client"; 3760 3761 3762 3763 // src/composite/composite-context.tsx 3764 3765 var P7GR5CS5_ctx = createStoreContext( 3766 [CollectionContextProvider], 3767 [CollectionScopedContextProvider] 3768 ); 3769 var useCompositeContext = P7GR5CS5_ctx.useContext; 3770 var useCompositeScopedContext = P7GR5CS5_ctx.useScopedContext; 3771 var useCompositeProviderContext = P7GR5CS5_ctx.useProviderContext; 3772 var CompositeContextProvider = P7GR5CS5_ctx.ContextProvider; 3773 var CompositeScopedContextProvider = P7GR5CS5_ctx.ScopedContextProvider; 3774 var CompositeItemContext = (0,external_React_.createContext)( 3775 void 0 3776 ); 3777 var CompositeRowContext = (0,external_React_.createContext)( 3778 void 0 3779 ); 3780 3781 3782 3783 ;// ./node_modules/@ariakit/react-core/esm/__chunks/SWN3JYXT.js 3784 "use client"; 3785 3786 // src/focusable/focusable-context.tsx 3787 3788 var FocusableContext = (0,external_React_.createContext)(true); 3789 3790 3791 3792 ;// ./node_modules/@ariakit/core/esm/utils/focus.js 3793 "use client"; 3794 3795 3796 3797 // src/utils/focus.ts 3798 var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])"; 3799 function hasNegativeTabIndex(element) { 3800 const tabIndex = Number.parseInt(element.getAttribute("tabindex") || "0", 10); 3801 return tabIndex < 0; 3802 } 3803 function isFocusable(element) { 3804 if (!element.matches(selector)) return false; 3805 if (!isVisible(element)) return false; 3806 if (element.closest("[inert]")) return false; 3807 return true; 3808 } 3809 function isTabbable(element) { 3810 if (!isFocusable(element)) return false; 3811 if (hasNegativeTabIndex(element)) return false; 3812 if (!("form" in element)) return true; 3813 if (!element.form) return true; 3814 if (element.checked) return true; 3815 if (element.type !== "radio") return true; 3816 const radioGroup = element.form.elements.namedItem(element.name); 3817 if (!radioGroup) return true; 3818 if (!("length" in radioGroup)) return true; 3819 const activeElement = getActiveElement(element); 3820 if (!activeElement) return true; 3821 if (activeElement === element) return true; 3822 if (!("form" in activeElement)) return true; 3823 if (activeElement.form !== element.form) return true; 3824 if (activeElement.name !== element.name) return true; 3825 return false; 3826 } 3827 function getAllFocusableIn(container, includeContainer) { 3828 const elements = Array.from( 3829 container.querySelectorAll(selector) 3830 ); 3831 if (includeContainer) { 3832 elements.unshift(container); 3833 } 3834 const focusableElements = elements.filter(isFocusable); 3835 focusableElements.forEach((element, i) => { 3836 if (isFrame(element) && element.contentDocument) { 3837 const frameBody = element.contentDocument.body; 3838 focusableElements.splice(i, 1, ...getAllFocusableIn(frameBody)); 3839 } 3840 }); 3841 return focusableElements; 3842 } 3843 function getAllFocusable(includeBody) { 3844 return getAllFocusableIn(document.body, includeBody); 3845 } 3846 function getFirstFocusableIn(container, includeContainer) { 3847 const [first] = getAllFocusableIn(container, includeContainer); 3848 return first || null; 3849 } 3850 function getFirstFocusable(includeBody) { 3851 return getFirstFocusableIn(document.body, includeBody); 3852 } 3853 function getAllTabbableIn(container, includeContainer, fallbackToFocusable) { 3854 const elements = Array.from( 3855 container.querySelectorAll(selector) 3856 ); 3857 const tabbableElements = elements.filter(isTabbable); 3858 if (includeContainer && isTabbable(container)) { 3859 tabbableElements.unshift(container); 3860 } 3861 tabbableElements.forEach((element, i) => { 3862 if (isFrame(element) && element.contentDocument) { 3863 const frameBody = element.contentDocument.body; 3864 const allFrameTabbable = getAllTabbableIn( 3865 frameBody, 3866 false, 3867 fallbackToFocusable 3868 ); 3869 tabbableElements.splice(i, 1, ...allFrameTabbable); 3870 } 3871 }); 3872 if (!tabbableElements.length && fallbackToFocusable) { 3873 return elements; 3874 } 3875 return tabbableElements; 3876 } 3877 function getAllTabbable(fallbackToFocusable) { 3878 return getAllTabbableIn(document.body, false, fallbackToFocusable); 3879 } 3880 function getFirstTabbableIn(container, includeContainer, fallbackToFocusable) { 3881 const [first] = getAllTabbableIn( 3882 container, 3883 includeContainer, 3884 fallbackToFocusable 3885 ); 3886 return first || null; 3887 } 3888 function getFirstTabbable(fallbackToFocusable) { 3889 return getFirstTabbableIn(document.body, false, fallbackToFocusable); 3890 } 3891 function getLastTabbableIn(container, includeContainer, fallbackToFocusable) { 3892 const allTabbable = getAllTabbableIn( 3893 container, 3894 includeContainer, 3895 fallbackToFocusable 3896 ); 3897 return allTabbable[allTabbable.length - 1] || null; 3898 } 3899 function getLastTabbable(fallbackToFocusable) { 3900 return getLastTabbableIn(document.body, false, fallbackToFocusable); 3901 } 3902 function getNextTabbableIn(container, includeContainer, fallbackToFirst, fallbackToFocusable) { 3903 const activeElement = getActiveElement(container); 3904 const allFocusable = getAllFocusableIn(container, includeContainer); 3905 const activeIndex = allFocusable.indexOf(activeElement); 3906 const nextFocusableElements = allFocusable.slice(activeIndex + 1); 3907 return nextFocusableElements.find(isTabbable) || (fallbackToFirst ? allFocusable.find(isTabbable) : null) || (fallbackToFocusable ? nextFocusableElements[0] : null) || null; 3908 } 3909 function getNextTabbable(fallbackToFirst, fallbackToFocusable) { 3910 return getNextTabbableIn( 3911 document.body, 3912 false, 3913 fallbackToFirst, 3914 fallbackToFocusable 3915 ); 3916 } 3917 function getPreviousTabbableIn(container, includeContainer, fallbackToLast, fallbackToFocusable) { 3918 const activeElement = getActiveElement(container); 3919 const allFocusable = getAllFocusableIn(container, includeContainer).reverse(); 3920 const activeIndex = allFocusable.indexOf(activeElement); 3921 const previousFocusableElements = allFocusable.slice(activeIndex + 1); 3922 return previousFocusableElements.find(isTabbable) || (fallbackToLast ? allFocusable.find(isTabbable) : null) || (fallbackToFocusable ? previousFocusableElements[0] : null) || null; 3923 } 3924 function getPreviousTabbable(fallbackToFirst, fallbackToFocusable) { 3925 return getPreviousTabbableIn( 3926 document.body, 3927 false, 3928 fallbackToFirst, 3929 fallbackToFocusable 3930 ); 3931 } 3932 function getClosestFocusable(element) { 3933 while (element && !isFocusable(element)) { 3934 element = element.closest(selector); 3935 } 3936 return element || null; 3937 } 3938 function hasFocus(element) { 3939 const activeElement = getActiveElement(element); 3940 if (!activeElement) return false; 3941 if (activeElement === element) return true; 3942 const activeDescendant = activeElement.getAttribute("aria-activedescendant"); 3943 if (!activeDescendant) return false; 3944 return activeDescendant === element.id; 3945 } 3946 function hasFocusWithin(element) { 3947 const activeElement = getActiveElement(element); 3948 if (!activeElement) return false; 3949 if (contains(element, activeElement)) return true; 3950 const activeDescendant = activeElement.getAttribute("aria-activedescendant"); 3951 if (!activeDescendant) return false; 3952 if (!("id" in element)) return false; 3953 if (activeDescendant === element.id) return true; 3954 return !!element.querySelector(`#$CSS.escape(activeDescendant)}`); 3955 } 3956 function focusIfNeeded(element) { 3957 if (!hasFocusWithin(element) && isFocusable(element)) { 3958 element.focus(); 3959 } 3960 } 3961 function disableFocus(element) { 3962 var _a; 3963 const currentTabindex = (_a = element.getAttribute("tabindex")) != null ? _a : ""; 3964 element.setAttribute("data-tabindex", currentTabindex); 3965 element.setAttribute("tabindex", "-1"); 3966 } 3967 function disableFocusIn(container, includeContainer) { 3968 const tabbableElements = getAllTabbableIn(container, includeContainer); 3969 for (const element of tabbableElements) { 3970 disableFocus(element); 3971 } 3972 } 3973 function restoreFocusIn(container) { 3974 const elements = container.querySelectorAll("[data-tabindex]"); 3975 const restoreTabIndex = (element) => { 3976 const tabindex = element.getAttribute("data-tabindex"); 3977 element.removeAttribute("data-tabindex"); 3978 if (tabindex) { 3979 element.setAttribute("tabindex", tabindex); 3980 } else { 3981 element.removeAttribute("tabindex"); 3982 } 3983 }; 3984 if (container.hasAttribute("data-tabindex")) { 3985 restoreTabIndex(container); 3986 } 3987 for (const element of elements) { 3988 restoreTabIndex(element); 3989 } 3990 } 3991 function focusIntoView(element, options) { 3992 if (!("scrollIntoView" in element)) { 3993 element.focus(); 3994 } else { 3995 element.focus({ preventScroll: true }); 3996 element.scrollIntoView(_chunks_3YLGPPWQ_spreadValues({ block: "nearest", inline: "nearest" }, options)); 3997 } 3998 } 3999 4000 4001 ;// ./node_modules/@ariakit/react-core/esm/__chunks/LVA2YJMS.js 4002 "use client"; 4003 4004 4005 4006 4007 4008 // src/focusable/focusable.tsx 4009 4010 4011 4012 4013 4014 4015 var TagName = "div"; 4016 var isSafariBrowser = isSafari(); 4017 var alwaysFocusVisibleInputTypes = [ 4018 "text", 4019 "search", 4020 "url", 4021 "tel", 4022 "email", 4023 "password", 4024 "number", 4025 "date", 4026 "month", 4027 "week", 4028 "time", 4029 "datetime", 4030 "datetime-local" 4031 ]; 4032 var safariFocusAncestorSymbol = Symbol("safariFocusAncestor"); 4033 function isSafariFocusAncestor(element) { 4034 if (!element) return false; 4035 return !!element[safariFocusAncestorSymbol]; 4036 } 4037 function markSafariFocusAncestor(element, value) { 4038 if (!element) return; 4039 element[safariFocusAncestorSymbol] = value; 4040 } 4041 function isAlwaysFocusVisible(element) { 4042 const { tagName, readOnly, type } = element; 4043 if (tagName === "TEXTAREA" && !readOnly) return true; 4044 if (tagName === "SELECT" && !readOnly) return true; 4045 if (tagName === "INPUT" && !readOnly) { 4046 return alwaysFocusVisibleInputTypes.includes(type); 4047 } 4048 if (element.isContentEditable) return true; 4049 const role = element.getAttribute("role"); 4050 if (role === "combobox" && element.dataset.name) { 4051 return true; 4052 } 4053 return false; 4054 } 4055 function getLabels(element) { 4056 if ("labels" in element) { 4057 return element.labels; 4058 } 4059 return null; 4060 } 4061 function isNativeCheckboxOrRadio(element) { 4062 const tagName = element.tagName.toLowerCase(); 4063 if (tagName === "input" && element.type) { 4064 return element.type === "radio" || element.type === "checkbox"; 4065 } 4066 return false; 4067 } 4068 function isNativeTabbable(tagName) { 4069 if (!tagName) return true; 4070 return tagName === "button" || tagName === "summary" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a"; 4071 } 4072 function supportsDisabledAttribute(tagName) { 4073 if (!tagName) return true; 4074 return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea"; 4075 } 4076 function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) { 4077 if (!focusable) { 4078 return tabIndexProp; 4079 } 4080 if (trulyDisabled) { 4081 if (nativeTabbable && !supportsDisabled) { 4082 return -1; 4083 } 4084 return; 4085 } 4086 if (nativeTabbable) { 4087 return tabIndexProp; 4088 } 4089 return tabIndexProp || 0; 4090 } 4091 function useDisableEvent(onEvent, disabled) { 4092 return useEvent((event) => { 4093 onEvent == null ? void 0 : onEvent(event); 4094 if (event.defaultPrevented) return; 4095 if (disabled) { 4096 event.stopPropagation(); 4097 event.preventDefault(); 4098 } 4099 }); 4100 } 4101 var isKeyboardModality = true; 4102 function onGlobalMouseDown(event) { 4103 const target = event.target; 4104 if (target && "hasAttribute" in target) { 4105 if (!target.hasAttribute("data-focus-visible")) { 4106 isKeyboardModality = false; 4107 } 4108 } 4109 } 4110 function onGlobalKeyDown(event) { 4111 if (event.metaKey) return; 4112 if (event.ctrlKey) return; 4113 if (event.altKey) return; 4114 isKeyboardModality = true; 4115 } 4116 var useFocusable = createHook( 4117 function useFocusable2(_a) { 4118 var _b = _a, { 4119 focusable = true, 4120 accessibleWhenDisabled, 4121 autoFocus, 4122 onFocusVisible 4123 } = _b, props = __objRest(_b, [ 4124 "focusable", 4125 "accessibleWhenDisabled", 4126 "autoFocus", 4127 "onFocusVisible" 4128 ]); 4129 const ref = (0,external_React_.useRef)(null); 4130 (0,external_React_.useEffect)(() => { 4131 if (!focusable) return; 4132 addGlobalEventListener("mousedown", onGlobalMouseDown, true); 4133 addGlobalEventListener("keydown", onGlobalKeyDown, true); 4134 }, [focusable]); 4135 if (isSafariBrowser) { 4136 (0,external_React_.useEffect)(() => { 4137 if (!focusable) return; 4138 const element = ref.current; 4139 if (!element) return; 4140 if (!isNativeCheckboxOrRadio(element)) return; 4141 const labels = getLabels(element); 4142 if (!labels) return; 4143 const onMouseUp = () => queueMicrotask(() => element.focus()); 4144 for (const label of labels) { 4145 label.addEventListener("mouseup", onMouseUp); 4146 } 4147 return () => { 4148 for (const label of labels) { 4149 label.removeEventListener("mouseup", onMouseUp); 4150 } 4151 }; 4152 }, [focusable]); 4153 } 4154 const disabled = focusable && disabledFromProps(props); 4155 const trulyDisabled = !!disabled && !accessibleWhenDisabled; 4156 const [focusVisible, setFocusVisible] = (0,external_React_.useState)(false); 4157 (0,external_React_.useEffect)(() => { 4158 if (!focusable) return; 4159 if (trulyDisabled && focusVisible) { 4160 setFocusVisible(false); 4161 } 4162 }, [focusable, trulyDisabled, focusVisible]); 4163 (0,external_React_.useEffect)(() => { 4164 if (!focusable) return; 4165 if (!focusVisible) return; 4166 const element = ref.current; 4167 if (!element) return; 4168 if (typeof IntersectionObserver === "undefined") return; 4169 const observer = new IntersectionObserver(() => { 4170 if (!isFocusable(element)) { 4171 setFocusVisible(false); 4172 } 4173 }); 4174 observer.observe(element); 4175 return () => observer.disconnect(); 4176 }, [focusable, focusVisible]); 4177 const onKeyPressCapture = useDisableEvent( 4178 props.onKeyPressCapture, 4179 disabled 4180 ); 4181 const onMouseDownCapture = useDisableEvent( 4182 props.onMouseDownCapture, 4183 disabled 4184 ); 4185 const onClickCapture = useDisableEvent(props.onClickCapture, disabled); 4186 const onMouseDownProp = props.onMouseDown; 4187 const onMouseDown = useEvent((event) => { 4188 onMouseDownProp == null ? void 0 : onMouseDownProp(event); 4189 if (event.defaultPrevented) return; 4190 if (!focusable) return; 4191 const element = event.currentTarget; 4192 if (!isSafariBrowser) return; 4193 if (isPortalEvent(event)) return; 4194 if (!isButton(element) && !isNativeCheckboxOrRadio(element)) return; 4195 let receivedFocus = false; 4196 const onFocus = () => { 4197 receivedFocus = true; 4198 }; 4199 const options = { capture: true, once: true }; 4200 element.addEventListener("focusin", onFocus, options); 4201 const focusableContainer = getClosestFocusable(element.parentElement); 4202 markSafariFocusAncestor(focusableContainer, true); 4203 queueBeforeEvent(element, "mouseup", () => { 4204 element.removeEventListener("focusin", onFocus, true); 4205 markSafariFocusAncestor(focusableContainer, false); 4206 if (receivedFocus) return; 4207 focusIfNeeded(element); 4208 }); 4209 }); 4210 const handleFocusVisible = (event, currentTarget) => { 4211 if (currentTarget) { 4212 event.currentTarget = currentTarget; 4213 } 4214 if (!focusable) return; 4215 const element = event.currentTarget; 4216 if (!element) return; 4217 if (!hasFocus(element)) return; 4218 onFocusVisible == null ? void 0 : onFocusVisible(event); 4219 if (event.defaultPrevented) return; 4220 element.dataset.focusVisible = "true"; 4221 setFocusVisible(true); 4222 }; 4223 const onKeyDownCaptureProp = props.onKeyDownCapture; 4224 const onKeyDownCapture = useEvent((event) => { 4225 onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event); 4226 if (event.defaultPrevented) return; 4227 if (!focusable) return; 4228 if (focusVisible) return; 4229 if (event.metaKey) return; 4230 if (event.altKey) return; 4231 if (event.ctrlKey) return; 4232 if (!isSelfTarget(event)) return; 4233 const element = event.currentTarget; 4234 const applyFocusVisible = () => handleFocusVisible(event, element); 4235 queueBeforeEvent(element, "focusout", applyFocusVisible); 4236 }); 4237 const onFocusCaptureProp = props.onFocusCapture; 4238 const onFocusCapture = useEvent((event) => { 4239 onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event); 4240 if (event.defaultPrevented) return; 4241 if (!focusable) return; 4242 if (!isSelfTarget(event)) { 4243 setFocusVisible(false); 4244 return; 4245 } 4246 const element = event.currentTarget; 4247 const applyFocusVisible = () => handleFocusVisible(event, element); 4248 if (isKeyboardModality || isAlwaysFocusVisible(event.target)) { 4249 queueBeforeEvent(event.target, "focusout", applyFocusVisible); 4250 } else { 4251 setFocusVisible(false); 4252 } 4253 }); 4254 const onBlurProp = props.onBlur; 4255 const onBlur = useEvent((event) => { 4256 onBlurProp == null ? void 0 : onBlurProp(event); 4257 if (!focusable) return; 4258 if (!isFocusEventOutside(event)) return; 4259 setFocusVisible(false); 4260 }); 4261 const autoFocusOnShow = (0,external_React_.useContext)(FocusableContext); 4262 const autoFocusRef = useEvent((element) => { 4263 if (!focusable) return; 4264 if (!autoFocus) return; 4265 if (!element) return; 4266 if (!autoFocusOnShow) return; 4267 queueMicrotask(() => { 4268 if (hasFocus(element)) return; 4269 if (!isFocusable(element)) return; 4270 element.focus(); 4271 }); 4272 }); 4273 const tagName = useTagName(ref); 4274 const nativeTabbable = focusable && isNativeTabbable(tagName); 4275 const supportsDisabled = focusable && supportsDisabledAttribute(tagName); 4276 const styleProp = props.style; 4277 const style = (0,external_React_.useMemo)(() => { 4278 if (trulyDisabled) { 4279 return _3YLGPPWQ_spreadValues({ pointerEvents: "none" }, styleProp); 4280 } 4281 return styleProp; 4282 }, [trulyDisabled, styleProp]); 4283 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 4284 "data-focus-visible": focusable && focusVisible || void 0, 4285 "data-autofocus": autoFocus || void 0, 4286 "aria-disabled": disabled || void 0 4287 }, props), { 4288 ref: useMergeRefs(ref, autoFocusRef, props.ref), 4289 style, 4290 tabIndex: getTabIndex( 4291 focusable, 4292 trulyDisabled, 4293 nativeTabbable, 4294 supportsDisabled, 4295 props.tabIndex 4296 ), 4297 disabled: supportsDisabled && trulyDisabled ? true : void 0, 4298 // TODO: Test Focusable contentEditable. 4299 contentEditable: disabled ? void 0 : props.contentEditable, 4300 onKeyPressCapture, 4301 onClickCapture, 4302 onMouseDownCapture, 4303 onMouseDown, 4304 onKeyDownCapture, 4305 onFocusCapture, 4306 onBlur 4307 }); 4308 return removeUndefinedValues(props); 4309 } 4310 ); 4311 var Focusable = forwardRef2(function Focusable2(props) { 4312 const htmlProps = useFocusable(props); 4313 return LMDWO4NN_createElement(TagName, htmlProps); 4314 }); 4315 4316 4317 4318 ;// ./node_modules/@ariakit/react-core/esm/__chunks/ITI7HKP4.js 4319 "use client"; 4320 4321 4322 4323 4324 4325 4326 4327 // src/composite/composite.tsx 4328 4329 4330 4331 4332 4333 4334 4335 var ITI7HKP4_TagName = "div"; 4336 function isGrid(items) { 4337 return items.some((item) => !!item.rowId); 4338 } 4339 function isPrintableKey(event) { 4340 const target = event.target; 4341 if (target && !isTextField(target)) return false; 4342 return event.key.length === 1 && !event.ctrlKey && !event.metaKey; 4343 } 4344 function isModifierKey(event) { 4345 return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta"; 4346 } 4347 function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) { 4348 return useEvent((event) => { 4349 var _a; 4350 onKeyboardEvent == null ? void 0 : onKeyboardEvent(event); 4351 if (event.defaultPrevented) return; 4352 if (event.isPropagationStopped()) return; 4353 if (!isSelfTarget(event)) return; 4354 if (isModifierKey(event)) return; 4355 if (isPrintableKey(event)) return; 4356 const state = store.getState(); 4357 const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element; 4358 if (!activeElement) return; 4359 const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]); 4360 const previousElement = previousElementRef == null ? void 0 : previousElementRef.current; 4361 if (activeElement !== previousElement) { 4362 activeElement.focus(); 4363 } 4364 if (!fireKeyboardEvent(activeElement, event.type, eventInit)) { 4365 event.preventDefault(); 4366 } 4367 if (event.currentTarget.contains(activeElement)) { 4368 event.stopPropagation(); 4369 } 4370 }); 4371 } 4372 function findFirstEnabledItemInTheLastRow(items) { 4373 return _5VQZOHHZ_findFirstEnabledItem( 4374 flatten2DArray(reverseArray(_5VQZOHHZ_groupItemsByRows(items))) 4375 ); 4376 } 4377 function useScheduleFocus(store) { 4378 const [scheduled, setScheduled] = (0,external_React_.useState)(false); 4379 const schedule = (0,external_React_.useCallback)(() => setScheduled(true), []); 4380 const activeItem = store.useState( 4381 (state) => getEnabledItem(store, state.activeId) 4382 ); 4383 (0,external_React_.useEffect)(() => { 4384 const activeElement = activeItem == null ? void 0 : activeItem.element; 4385 if (!scheduled) return; 4386 if (!activeElement) return; 4387 setScheduled(false); 4388 activeElement.focus({ preventScroll: true }); 4389 }, [activeItem, scheduled]); 4390 return schedule; 4391 } 4392 var useComposite = createHook( 4393 function useComposite2(_a) { 4394 var _b = _a, { 4395 store, 4396 composite = true, 4397 focusOnMove = composite, 4398 moveOnKeyPress = true 4399 } = _b, props = __objRest(_b, [ 4400 "store", 4401 "composite", 4402 "focusOnMove", 4403 "moveOnKeyPress" 4404 ]); 4405 const context = useCompositeProviderContext(); 4406 store = store || context; 4407 invariant( 4408 store, 4409 false && 0 4410 ); 4411 const ref = (0,external_React_.useRef)(null); 4412 const previousElementRef = (0,external_React_.useRef)(null); 4413 const scheduleFocus = useScheduleFocus(store); 4414 const moves = store.useState("moves"); 4415 const [, setBaseElement] = useTransactionState( 4416 composite ? store.setBaseElement : null 4417 ); 4418 (0,external_React_.useEffect)(() => { 4419 var _a2; 4420 if (!store) return; 4421 if (!moves) return; 4422 if (!composite) return; 4423 if (!focusOnMove) return; 4424 const { activeId: activeId2 } = store.getState(); 4425 const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element; 4426 if (!itemElement) return; 4427 focusIntoView(itemElement); 4428 }, [store, moves, composite, focusOnMove]); 4429 useSafeLayoutEffect(() => { 4430 if (!store) return; 4431 if (!moves) return; 4432 if (!composite) return; 4433 const { baseElement, activeId: activeId2 } = store.getState(); 4434 const isSelfAcive = activeId2 === null; 4435 if (!isSelfAcive) return; 4436 if (!baseElement) return; 4437 const previousElement = previousElementRef.current; 4438 previousElementRef.current = null; 4439 if (previousElement) { 4440 fireBlurEvent(previousElement, { relatedTarget: baseElement }); 4441 } 4442 if (!hasFocus(baseElement)) { 4443 baseElement.focus(); 4444 } 4445 }, [store, moves, composite]); 4446 const activeId = store.useState("activeId"); 4447 const virtualFocus = store.useState("virtualFocus"); 4448 useSafeLayoutEffect(() => { 4449 var _a2; 4450 if (!store) return; 4451 if (!composite) return; 4452 if (!virtualFocus) return; 4453 const previousElement = previousElementRef.current; 4454 previousElementRef.current = null; 4455 if (!previousElement) return; 4456 const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element; 4457 const relatedTarget = activeElement || getActiveElement(previousElement); 4458 if (relatedTarget === previousElement) return; 4459 fireBlurEvent(previousElement, { relatedTarget }); 4460 }, [store, activeId, virtualFocus, composite]); 4461 const onKeyDownCapture = useKeyboardEventProxy( 4462 store, 4463 props.onKeyDownCapture, 4464 previousElementRef 4465 ); 4466 const onKeyUpCapture = useKeyboardEventProxy( 4467 store, 4468 props.onKeyUpCapture, 4469 previousElementRef 4470 ); 4471 const onFocusCaptureProp = props.onFocusCapture; 4472 const onFocusCapture = useEvent((event) => { 4473 onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event); 4474 if (event.defaultPrevented) return; 4475 if (!store) return; 4476 const { virtualFocus: virtualFocus2 } = store.getState(); 4477 if (!virtualFocus2) return; 4478 const previousActiveElement = event.relatedTarget; 4479 const isSilentlyFocused = silentlyFocused(event.currentTarget); 4480 if (isSelfTarget(event) && isSilentlyFocused) { 4481 event.stopPropagation(); 4482 previousElementRef.current = previousActiveElement; 4483 } 4484 }); 4485 const onFocusProp = props.onFocus; 4486 const onFocus = useEvent((event) => { 4487 onFocusProp == null ? void 0 : onFocusProp(event); 4488 if (event.defaultPrevented) return; 4489 if (!composite) return; 4490 if (!store) return; 4491 const { relatedTarget } = event; 4492 const { virtualFocus: virtualFocus2 } = store.getState(); 4493 if (virtualFocus2) { 4494 if (isSelfTarget(event) && !isItem(store, relatedTarget)) { 4495 queueMicrotask(scheduleFocus); 4496 } 4497 } else if (isSelfTarget(event)) { 4498 store.setActiveId(null); 4499 } 4500 }); 4501 const onBlurCaptureProp = props.onBlurCapture; 4502 const onBlurCapture = useEvent((event) => { 4503 var _a2; 4504 onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event); 4505 if (event.defaultPrevented) return; 4506 if (!store) return; 4507 const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState(); 4508 if (!virtualFocus2) return; 4509 const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element; 4510 const nextActiveElement = event.relatedTarget; 4511 const nextActiveElementIsItem = isItem(store, nextActiveElement); 4512 const previousElement = previousElementRef.current; 4513 previousElementRef.current = null; 4514 if (isSelfTarget(event) && nextActiveElementIsItem) { 4515 if (nextActiveElement === activeElement) { 4516 if (previousElement && previousElement !== nextActiveElement) { 4517 fireBlurEvent(previousElement, event); 4518 } 4519 } else if (activeElement) { 4520 fireBlurEvent(activeElement, event); 4521 } else if (previousElement) { 4522 fireBlurEvent(previousElement, event); 4523 } 4524 event.stopPropagation(); 4525 } else { 4526 const targetIsItem = isItem(store, event.target); 4527 if (!targetIsItem && activeElement) { 4528 fireBlurEvent(activeElement, event); 4529 } 4530 } 4531 }); 4532 const onKeyDownProp = props.onKeyDown; 4533 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 4534 const onKeyDown = useEvent((event) => { 4535 var _a2; 4536 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 4537 if (event.defaultPrevented) return; 4538 if (!store) return; 4539 if (!isSelfTarget(event)) return; 4540 const { orientation, renderedItems, activeId: activeId2 } = store.getState(); 4541 const activeItem = getEnabledItem(store, activeId2); 4542 if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected) return; 4543 const isVertical = orientation !== "horizontal"; 4544 const isHorizontal = orientation !== "vertical"; 4545 const grid = isGrid(renderedItems); 4546 const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End"; 4547 if (isHorizontalKey && isTextField(event.currentTarget)) return; 4548 const up = () => { 4549 if (grid) { 4550 const item = findFirstEnabledItemInTheLastRow(renderedItems); 4551 return item == null ? void 0 : item.id; 4552 } 4553 return store == null ? void 0 : store.last(); 4554 }; 4555 const keyMap = { 4556 ArrowUp: (grid || isVertical) && up, 4557 ArrowRight: (grid || isHorizontal) && store.first, 4558 ArrowDown: (grid || isVertical) && store.first, 4559 ArrowLeft: (grid || isHorizontal) && store.last, 4560 Home: store.first, 4561 End: store.last, 4562 PageUp: store.first, 4563 PageDown: store.last 4564 }; 4565 const action = keyMap[event.key]; 4566 if (action) { 4567 const id = action(); 4568 if (id !== void 0) { 4569 if (!moveOnKeyPressProp(event)) return; 4570 event.preventDefault(); 4571 store.move(id); 4572 } 4573 } 4574 }); 4575 props = useWrapElement( 4576 props, 4577 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeContextProvider, { value: store, children: element }), 4578 [store] 4579 ); 4580 const activeDescendant = store.useState((state) => { 4581 var _a2; 4582 if (!store) return; 4583 if (!composite) return; 4584 if (!state.virtualFocus) return; 4585 return (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id; 4586 }); 4587 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 4588 "aria-activedescendant": activeDescendant 4589 }, props), { 4590 ref: useMergeRefs(ref, setBaseElement, props.ref), 4591 onKeyDownCapture, 4592 onKeyUpCapture, 4593 onFocusCapture, 4594 onFocus, 4595 onBlurCapture, 4596 onKeyDown 4597 }); 4598 const focusable = store.useState( 4599 (state) => composite && (state.virtualFocus || state.activeId === null) 4600 ); 4601 props = useFocusable(_3YLGPPWQ_spreadValues({ focusable }, props)); 4602 return props; 4603 } 4604 ); 4605 var ITI7HKP4_Composite = forwardRef2(function Composite2(props) { 4606 const htmlProps = useComposite(props); 4607 return LMDWO4NN_createElement(ITI7HKP4_TagName, htmlProps); 4608 }); 4609 4610 4611 4612 ;// ./node_modules/@wordpress/components/build-module/composite/context.js 4613 /** 4614 * WordPress dependencies 4615 */ 4616 4617 4618 /** 4619 * Internal dependencies 4620 */ 4621 4622 const CompositeContext = (0,external_wp_element_namespaceObject.createContext)({}); 4623 const context_useCompositeContext = () => (0,external_wp_element_namespaceObject.useContext)(CompositeContext); 4624 4625 ;// ./node_modules/@ariakit/react-core/esm/__chunks/7HVFURXT.js 4626 "use client"; 4627 4628 // src/group/group-label-context.tsx 4629 4630 var GroupLabelContext = (0,external_React_.createContext)(void 0); 4631 4632 4633 4634 ;// ./node_modules/@ariakit/react-core/esm/__chunks/36LIF33V.js 4635 "use client"; 4636 4637 4638 4639 4640 4641 // src/group/group.tsx 4642 4643 4644 4645 var _36LIF33V_TagName = "div"; 4646 var useGroup = createHook( 4647 function useGroup2(props) { 4648 const [labelId, setLabelId] = (0,external_React_.useState)(); 4649 props = useWrapElement( 4650 props, 4651 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(GroupLabelContext.Provider, { value: setLabelId, children: element }), 4652 [] 4653 ); 4654 props = _3YLGPPWQ_spreadValues({ 4655 role: "group", 4656 "aria-labelledby": labelId 4657 }, props); 4658 return removeUndefinedValues(props); 4659 } 4660 ); 4661 var Group = forwardRef2(function Group2(props) { 4662 const htmlProps = useGroup(props); 4663 return LMDWO4NN_createElement(_36LIF33V_TagName, htmlProps); 4664 }); 4665 4666 4667 4668 ;// ./node_modules/@ariakit/react-core/esm/__chunks/YORGHBM4.js 4669 "use client"; 4670 4671 4672 4673 4674 // src/composite/composite-group.tsx 4675 var YORGHBM4_TagName = "div"; 4676 var useCompositeGroup = createHook( 4677 function useCompositeGroup2(_a) { 4678 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 4679 props = useGroup(props); 4680 return props; 4681 } 4682 ); 4683 var YORGHBM4_CompositeGroup = forwardRef2(function CompositeGroup2(props) { 4684 const htmlProps = useCompositeGroup(props); 4685 return LMDWO4NN_createElement(YORGHBM4_TagName, htmlProps); 4686 }); 4687 4688 4689 4690 ;// ./node_modules/@wordpress/components/build-module/composite/group.js 4691 /** 4692 * External dependencies 4693 */ 4694 4695 4696 /** 4697 * WordPress dependencies 4698 */ 4699 4700 4701 /** 4702 * Internal dependencies 4703 */ 4704 4705 4706 4707 const CompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeGroup(props, ref) { 4708 var _props$store; 4709 const context = context_useCompositeContext(); 4710 4711 // @ts-expect-error The store prop is undocumented and only used by the 4712 // legacy compat layer. The `store` prop is documented, but its type is 4713 // obfuscated to discourage its use outside of the component's internals. 4714 const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store; 4715 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(YORGHBM4_CompositeGroup, { 4716 store: store, 4717 ...props, 4718 ref: ref 4719 }); 4720 }); 4721 4722 ;// ./node_modules/@ariakit/react-core/esm/__chunks/YUOJWFSO.js 4723 "use client"; 4724 4725 4726 4727 4728 4729 // src/group/group-label.tsx 4730 4731 4732 var YUOJWFSO_TagName = "div"; 4733 var useGroupLabel = createHook( 4734 function useGroupLabel2(props) { 4735 const setLabelId = (0,external_React_.useContext)(GroupLabelContext); 4736 const id = useId(props.id); 4737 useSafeLayoutEffect(() => { 4738 setLabelId == null ? void 0 : setLabelId(id); 4739 return () => setLabelId == null ? void 0 : setLabelId(void 0); 4740 }, [setLabelId, id]); 4741 props = _3YLGPPWQ_spreadValues({ 4742 id, 4743 "aria-hidden": true 4744 }, props); 4745 return removeUndefinedValues(props); 4746 } 4747 ); 4748 var GroupLabel = forwardRef2(function GroupLabel2(props) { 4749 const htmlProps = useGroupLabel(props); 4750 return LMDWO4NN_createElement(YUOJWFSO_TagName, htmlProps); 4751 }); 4752 4753 4754 4755 ;// ./node_modules/@ariakit/react-core/esm/__chunks/SWSPTQMT.js 4756 "use client"; 4757 4758 4759 4760 4761 // src/composite/composite-group-label.tsx 4762 var SWSPTQMT_TagName = "div"; 4763 var useCompositeGroupLabel = createHook(function useCompositeGroupLabel2(_a) { 4764 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 4765 props = useGroupLabel(props); 4766 return props; 4767 }); 4768 var SWSPTQMT_CompositeGroupLabel = forwardRef2(function CompositeGroupLabel2(props) { 4769 const htmlProps = useCompositeGroupLabel(props); 4770 return LMDWO4NN_createElement(SWSPTQMT_TagName, htmlProps); 4771 }); 4772 4773 4774 4775 ;// ./node_modules/@wordpress/components/build-module/composite/group-label.js 4776 /** 4777 * External dependencies 4778 */ 4779 4780 4781 /** 4782 * WordPress dependencies 4783 */ 4784 4785 4786 /** 4787 * Internal dependencies 4788 */ 4789 4790 4791 4792 const CompositeGroupLabel = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeGroupLabel(props, ref) { 4793 var _props$store; 4794 const context = context_useCompositeContext(); 4795 4796 // @ts-expect-error The store prop is undocumented and only used by the 4797 // legacy compat layer. The `store` prop is documented, but its type is 4798 // obfuscated to discourage its use outside of the component's internals. 4799 const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store; 4800 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SWSPTQMT_CompositeGroupLabel, { 4801 store: store, 4802 ...props, 4803 ref: ref 4804 }); 4805 }); 4806 4807 ;// ./node_modules/@ariakit/react-core/esm/__chunks/UQQRIHDV.js 4808 "use client"; 4809 4810 4811 4812 4813 4814 // src/composite/composite-hover.tsx 4815 4816 4817 4818 4819 var UQQRIHDV_TagName = "div"; 4820 function getMouseDestination(event) { 4821 const relatedTarget = event.relatedTarget; 4822 if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) { 4823 return relatedTarget; 4824 } 4825 return null; 4826 } 4827 function hoveringInside(event) { 4828 const nextElement = getMouseDestination(event); 4829 if (!nextElement) return false; 4830 return contains(event.currentTarget, nextElement); 4831 } 4832 var symbol = Symbol("composite-hover"); 4833 function movingToAnotherItem(event) { 4834 let dest = getMouseDestination(event); 4835 if (!dest) return false; 4836 do { 4837 if (PBFD2E7P_hasOwnProperty(dest, symbol) && dest[symbol]) return true; 4838 dest = dest.parentElement; 4839 } while (dest); 4840 return false; 4841 } 4842 var useCompositeHover = createHook( 4843 function useCompositeHover2(_a) { 4844 var _b = _a, { 4845 store, 4846 focusOnHover = true, 4847 blurOnHoverEnd = !!focusOnHover 4848 } = _b, props = __objRest(_b, [ 4849 "store", 4850 "focusOnHover", 4851 "blurOnHoverEnd" 4852 ]); 4853 const context = useCompositeContext(); 4854 store = store || context; 4855 invariant( 4856 store, 4857 false && 0 4858 ); 4859 const isMouseMoving = useIsMouseMoving(); 4860 const onMouseMoveProp = props.onMouseMove; 4861 const focusOnHoverProp = useBooleanEvent(focusOnHover); 4862 const onMouseMove = useEvent((event) => { 4863 onMouseMoveProp == null ? void 0 : onMouseMoveProp(event); 4864 if (event.defaultPrevented) return; 4865 if (!isMouseMoving()) return; 4866 if (!focusOnHoverProp(event)) return; 4867 if (!hasFocusWithin(event.currentTarget)) { 4868 const baseElement = store == null ? void 0 : store.getState().baseElement; 4869 if (baseElement && !hasFocus(baseElement)) { 4870 baseElement.focus(); 4871 } 4872 } 4873 store == null ? void 0 : store.setActiveId(event.currentTarget.id); 4874 }); 4875 const onMouseLeaveProp = props.onMouseLeave; 4876 const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd); 4877 const onMouseLeave = useEvent((event) => { 4878 var _a2; 4879 onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event); 4880 if (event.defaultPrevented) return; 4881 if (!isMouseMoving()) return; 4882 if (hoveringInside(event)) return; 4883 if (movingToAnotherItem(event)) return; 4884 if (!focusOnHoverProp(event)) return; 4885 if (!blurOnHoverEndProp(event)) return; 4886 store == null ? void 0 : store.setActiveId(null); 4887 (_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus(); 4888 }); 4889 const ref = (0,external_React_.useCallback)((element) => { 4890 if (!element) return; 4891 element[symbol] = true; 4892 }, []); 4893 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 4894 ref: useMergeRefs(ref, props.ref), 4895 onMouseMove, 4896 onMouseLeave 4897 }); 4898 return removeUndefinedValues(props); 4899 } 4900 ); 4901 var UQQRIHDV_CompositeHover = memo2( 4902 forwardRef2(function CompositeHover2(props) { 4903 const htmlProps = useCompositeHover(props); 4904 return LMDWO4NN_createElement(UQQRIHDV_TagName, htmlProps); 4905 }) 4906 ); 4907 4908 4909 4910 ;// ./node_modules/@wordpress/components/build-module/composite/hover.js 4911 /** 4912 * External dependencies 4913 */ 4914 4915 4916 /** 4917 * WordPress dependencies 4918 */ 4919 4920 4921 /** 4922 * Internal dependencies 4923 */ 4924 4925 4926 4927 const CompositeHover = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeHover(props, ref) { 4928 var _props$store; 4929 const context = context_useCompositeContext(); 4930 4931 // @ts-expect-error The store prop is undocumented and only used by the 4932 // legacy compat layer. The `store` prop is documented, but its type is 4933 // obfuscated to discourage its use outside of the component's internals. 4934 const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store; 4935 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UQQRIHDV_CompositeHover, { 4936 store: store, 4937 ...props, 4938 ref: ref 4939 }); 4940 }); 4941 4942 ;// ./node_modules/@ariakit/react-core/esm/__chunks/RZ4GPYOB.js 4943 "use client"; 4944 4945 4946 4947 4948 4949 // src/collection/collection-item.tsx 4950 4951 4952 var RZ4GPYOB_TagName = "div"; 4953 var useCollectionItem = createHook( 4954 function useCollectionItem2(_a) { 4955 var _b = _a, { 4956 store, 4957 shouldRegisterItem = true, 4958 getItem = identity, 4959 element: element 4960 } = _b, props = __objRest(_b, [ 4961 "store", 4962 "shouldRegisterItem", 4963 "getItem", 4964 // @ts-expect-error This prop may come from a collection renderer. 4965 "element" 4966 ]); 4967 const context = useCollectionContext(); 4968 store = store || context; 4969 const id = useId(props.id); 4970 const ref = (0,external_React_.useRef)(element); 4971 (0,external_React_.useEffect)(() => { 4972 const element2 = ref.current; 4973 if (!id) return; 4974 if (!element2) return; 4975 if (!shouldRegisterItem) return; 4976 const item = getItem({ id, element: element2 }); 4977 return store == null ? void 0 : store.renderItem(item); 4978 }, [id, shouldRegisterItem, getItem, store]); 4979 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 4980 ref: useMergeRefs(ref, props.ref) 4981 }); 4982 return removeUndefinedValues(props); 4983 } 4984 ); 4985 var CollectionItem = forwardRef2(function CollectionItem2(props) { 4986 const htmlProps = useCollectionItem(props); 4987 return LMDWO4NN_createElement(RZ4GPYOB_TagName, htmlProps); 4988 }); 4989 4990 4991 4992 ;// ./node_modules/@ariakit/react-core/esm/__chunks/KUU7WJ55.js 4993 "use client"; 4994 4995 4996 4997 4998 4999 // src/command/command.tsx 5000 5001 5002 5003 5004 5005 var KUU7WJ55_TagName = "button"; 5006 function isNativeClick(event) { 5007 if (!event.isTrusted) return false; 5008 const element = event.currentTarget; 5009 if (event.key === "Enter") { 5010 return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A"; 5011 } 5012 if (event.key === " ") { 5013 return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT"; 5014 } 5015 return false; 5016 } 5017 var KUU7WJ55_symbol = Symbol("command"); 5018 var useCommand = createHook( 5019 function useCommand2(_a) { 5020 var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]); 5021 const ref = (0,external_React_.useRef)(null); 5022 const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(false); 5023 (0,external_React_.useEffect)(() => { 5024 if (!ref.current) return; 5025 setIsNativeButton(isButton(ref.current)); 5026 }, []); 5027 const [active, setActive] = (0,external_React_.useState)(false); 5028 const activeRef = (0,external_React_.useRef)(false); 5029 const disabled = disabledFromProps(props); 5030 const [isDuplicate, metadataProps] = useMetadataProps(props, KUU7WJ55_symbol, true); 5031 const onKeyDownProp = props.onKeyDown; 5032 const onKeyDown = useEvent((event) => { 5033 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 5034 const element = event.currentTarget; 5035 if (event.defaultPrevented) return; 5036 if (isDuplicate) return; 5037 if (disabled) return; 5038 if (!isSelfTarget(event)) return; 5039 if (isTextField(element)) return; 5040 if (element.isContentEditable) return; 5041 const isEnter = clickOnEnter && event.key === "Enter"; 5042 const isSpace = clickOnSpace && event.key === " "; 5043 const shouldPreventEnter = event.key === "Enter" && !clickOnEnter; 5044 const shouldPreventSpace = event.key === " " && !clickOnSpace; 5045 if (shouldPreventEnter || shouldPreventSpace) { 5046 event.preventDefault(); 5047 return; 5048 } 5049 if (isEnter || isSpace) { 5050 const nativeClick = isNativeClick(event); 5051 if (isEnter) { 5052 if (!nativeClick) { 5053 event.preventDefault(); 5054 const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]); 5055 const click = () => fireClickEvent(element, eventInit); 5056 if (isFirefox()) { 5057 queueBeforeEvent(element, "keyup", click); 5058 } else { 5059 queueMicrotask(click); 5060 } 5061 } 5062 } else if (isSpace) { 5063 activeRef.current = true; 5064 if (!nativeClick) { 5065 event.preventDefault(); 5066 setActive(true); 5067 } 5068 } 5069 } 5070 }); 5071 const onKeyUpProp = props.onKeyUp; 5072 const onKeyUp = useEvent((event) => { 5073 onKeyUpProp == null ? void 0 : onKeyUpProp(event); 5074 if (event.defaultPrevented) return; 5075 if (isDuplicate) return; 5076 if (disabled) return; 5077 if (event.metaKey) return; 5078 const isSpace = clickOnSpace && event.key === " "; 5079 if (activeRef.current && isSpace) { 5080 activeRef.current = false; 5081 if (!isNativeClick(event)) { 5082 event.preventDefault(); 5083 setActive(false); 5084 const element = event.currentTarget; 5085 const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]); 5086 queueMicrotask(() => fireClickEvent(element, eventInit)); 5087 } 5088 } 5089 }); 5090 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({ 5091 "data-active": active || void 0, 5092 type: isNativeButton ? "button" : void 0 5093 }, metadataProps), props), { 5094 ref: useMergeRefs(ref, props.ref), 5095 onKeyDown, 5096 onKeyUp 5097 }); 5098 props = useFocusable(props); 5099 return props; 5100 } 5101 ); 5102 var Command = forwardRef2(function Command2(props) { 5103 const htmlProps = useCommand(props); 5104 return LMDWO4NN_createElement(KUU7WJ55_TagName, htmlProps); 5105 }); 5106 5107 5108 5109 ;// ./node_modules/@ariakit/react-core/esm/__chunks/P2CTZE2T.js 5110 "use client"; 5111 5112 5113 5114 5115 5116 5117 5118 5119 5120 // src/composite/composite-item.tsx 5121 5122 5123 5124 5125 5126 5127 var P2CTZE2T_TagName = "button"; 5128 function isEditableElement(element) { 5129 if (isTextbox(element)) return true; 5130 return element.tagName === "INPUT" && !isButton(element); 5131 } 5132 function getNextPageOffset(scrollingElement, pageUp = false) { 5133 const height = scrollingElement.clientHeight; 5134 const { top } = scrollingElement.getBoundingClientRect(); 5135 const pageSize = Math.max(height * 0.875, height - 40) * 1.5; 5136 const pageOffset = pageUp ? height - pageSize + top : pageSize + top; 5137 if (scrollingElement.tagName === "HTML") { 5138 return pageOffset + scrollingElement.scrollTop; 5139 } 5140 return pageOffset; 5141 } 5142 function getItemOffset(itemElement, pageUp = false) { 5143 const { top } = itemElement.getBoundingClientRect(); 5144 if (pageUp) { 5145 return top + itemElement.clientHeight; 5146 } 5147 return top; 5148 } 5149 function findNextPageItemId(element, store, next, pageUp = false) { 5150 var _a; 5151 if (!store) return; 5152 if (!next) return; 5153 const { renderedItems } = store.getState(); 5154 const scrollingElement = getScrollingElement(element); 5155 if (!scrollingElement) return; 5156 const nextPageOffset = getNextPageOffset(scrollingElement, pageUp); 5157 let id; 5158 let prevDifference; 5159 for (let i = 0; i < renderedItems.length; i += 1) { 5160 const previousId = id; 5161 id = next(i); 5162 if (!id) break; 5163 if (id === previousId) continue; 5164 const itemElement = (_a = getEnabledItem(store, id)) == null ? void 0 : _a.element; 5165 if (!itemElement) continue; 5166 const itemOffset = getItemOffset(itemElement, pageUp); 5167 const difference = itemOffset - nextPageOffset; 5168 const absDifference = Math.abs(difference); 5169 if (pageUp && difference <= 0 || !pageUp && difference >= 0) { 5170 if (prevDifference !== void 0 && prevDifference < absDifference) { 5171 id = previousId; 5172 } 5173 break; 5174 } 5175 prevDifference = absDifference; 5176 } 5177 return id; 5178 } 5179 function targetIsAnotherItem(event, store) { 5180 if (isSelfTarget(event)) return false; 5181 return isItem(store, event.target); 5182 } 5183 var useCompositeItem = createHook( 5184 function useCompositeItem2(_a) { 5185 var _b = _a, { 5186 store, 5187 rowId: rowIdProp, 5188 preventScrollOnKeyDown = false, 5189 moveOnKeyPress = true, 5190 tabbable = false, 5191 getItem: getItemProp, 5192 "aria-setsize": ariaSetSizeProp, 5193 "aria-posinset": ariaPosInSetProp 5194 } = _b, props = __objRest(_b, [ 5195 "store", 5196 "rowId", 5197 "preventScrollOnKeyDown", 5198 "moveOnKeyPress", 5199 "tabbable", 5200 "getItem", 5201 "aria-setsize", 5202 "aria-posinset" 5203 ]); 5204 const context = useCompositeContext(); 5205 store = store || context; 5206 const id = useId(props.id); 5207 const ref = (0,external_React_.useRef)(null); 5208 const row = (0,external_React_.useContext)(CompositeRowContext); 5209 const disabled = disabledFromProps(props); 5210 const trulyDisabled = disabled && !props.accessibleWhenDisabled; 5211 const { 5212 rowId, 5213 baseElement, 5214 isActiveItem, 5215 ariaSetSize, 5216 ariaPosInSet, 5217 isTabbable 5218 } = useStoreStateObject(store, { 5219 rowId(state) { 5220 if (rowIdProp) return rowIdProp; 5221 if (!state) return; 5222 if (!(row == null ? void 0 : row.baseElement)) return; 5223 if (row.baseElement !== state.baseElement) return; 5224 return row.id; 5225 }, 5226 baseElement(state) { 5227 return (state == null ? void 0 : state.baseElement) || void 0; 5228 }, 5229 isActiveItem(state) { 5230 return !!state && state.activeId === id; 5231 }, 5232 ariaSetSize(state) { 5233 if (ariaSetSizeProp != null) return ariaSetSizeProp; 5234 if (!state) return; 5235 if (!(row == null ? void 0 : row.ariaSetSize)) return; 5236 if (row.baseElement !== state.baseElement) return; 5237 return row.ariaSetSize; 5238 }, 5239 ariaPosInSet(state) { 5240 if (ariaPosInSetProp != null) return ariaPosInSetProp; 5241 if (!state) return; 5242 if (!(row == null ? void 0 : row.ariaPosInSet)) return; 5243 if (row.baseElement !== state.baseElement) return; 5244 const itemsInRow = state.renderedItems.filter( 5245 (item) => item.rowId === rowId 5246 ); 5247 return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id); 5248 }, 5249 isTabbable(state) { 5250 if (!(state == null ? void 0 : state.renderedItems.length)) return true; 5251 if (state.virtualFocus) return false; 5252 if (tabbable) return true; 5253 if (state.activeId === null) return false; 5254 const item = store == null ? void 0 : store.item(state.activeId); 5255 if (item == null ? void 0 : item.disabled) return true; 5256 if (!(item == null ? void 0 : item.element)) return true; 5257 return state.activeId === id; 5258 } 5259 }); 5260 const getItem = (0,external_React_.useCallback)( 5261 (item) => { 5262 var _a2; 5263 const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), { 5264 id: id || item.id, 5265 rowId, 5266 disabled: !!trulyDisabled, 5267 children: (_a2 = item.element) == null ? void 0 : _a2.textContent 5268 }); 5269 if (getItemProp) { 5270 return getItemProp(nextItem); 5271 } 5272 return nextItem; 5273 }, 5274 [id, rowId, trulyDisabled, getItemProp] 5275 ); 5276 const onFocusProp = props.onFocus; 5277 const hasFocusedComposite = (0,external_React_.useRef)(false); 5278 const onFocus = useEvent((event) => { 5279 onFocusProp == null ? void 0 : onFocusProp(event); 5280 if (event.defaultPrevented) return; 5281 if (isPortalEvent(event)) return; 5282 if (!id) return; 5283 if (!store) return; 5284 if (targetIsAnotherItem(event, store)) return; 5285 const { virtualFocus, baseElement: baseElement2 } = store.getState(); 5286 store.setActiveId(id); 5287 if (isTextbox(event.currentTarget)) { 5288 selectTextField(event.currentTarget); 5289 } 5290 if (!virtualFocus) return; 5291 if (!isSelfTarget(event)) return; 5292 if (isEditableElement(event.currentTarget)) return; 5293 if (!(baseElement2 == null ? void 0 : baseElement2.isConnected)) return; 5294 if (isSafari() && event.currentTarget.hasAttribute("data-autofocus")) { 5295 event.currentTarget.scrollIntoView({ 5296 block: "nearest", 5297 inline: "nearest" 5298 }); 5299 } 5300 hasFocusedComposite.current = true; 5301 const fromComposite = event.relatedTarget === baseElement2 || isItem(store, event.relatedTarget); 5302 if (fromComposite) { 5303 focusSilently(baseElement2); 5304 } else { 5305 baseElement2.focus(); 5306 } 5307 }); 5308 const onBlurCaptureProp = props.onBlurCapture; 5309 const onBlurCapture = useEvent((event) => { 5310 onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event); 5311 if (event.defaultPrevented) return; 5312 const state = store == null ? void 0 : store.getState(); 5313 if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) { 5314 hasFocusedComposite.current = false; 5315 event.preventDefault(); 5316 event.stopPropagation(); 5317 } 5318 }); 5319 const onKeyDownProp = props.onKeyDown; 5320 const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown); 5321 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 5322 const onKeyDown = useEvent((event) => { 5323 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 5324 if (event.defaultPrevented) return; 5325 if (!isSelfTarget(event)) return; 5326 if (!store) return; 5327 const { currentTarget } = event; 5328 const state = store.getState(); 5329 const item = store.item(id); 5330 const isGrid = !!(item == null ? void 0 : item.rowId); 5331 const isVertical = state.orientation !== "horizontal"; 5332 const isHorizontal = state.orientation !== "vertical"; 5333 const canHomeEnd = () => { 5334 if (isGrid) return true; 5335 if (isHorizontal) return true; 5336 if (!state.baseElement) return true; 5337 if (!isTextField(state.baseElement)) return true; 5338 return false; 5339 }; 5340 const keyMap = { 5341 ArrowUp: (isGrid || isVertical) && store.up, 5342 ArrowRight: (isGrid || isHorizontal) && store.next, 5343 ArrowDown: (isGrid || isVertical) && store.down, 5344 ArrowLeft: (isGrid || isHorizontal) && store.previous, 5345 Home: () => { 5346 if (!canHomeEnd()) return; 5347 if (!isGrid || event.ctrlKey) { 5348 return store == null ? void 0 : store.first(); 5349 } 5350 return store == null ? void 0 : store.previous(-1); 5351 }, 5352 End: () => { 5353 if (!canHomeEnd()) return; 5354 if (!isGrid || event.ctrlKey) { 5355 return store == null ? void 0 : store.last(); 5356 } 5357 return store == null ? void 0 : store.next(-1); 5358 }, 5359 PageUp: () => { 5360 return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.up, true); 5361 }, 5362 PageDown: () => { 5363 return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.down); 5364 } 5365 }; 5366 const action = keyMap[event.key]; 5367 if (action) { 5368 if (isTextbox(currentTarget)) { 5369 const selection = getTextboxSelection(currentTarget); 5370 const isLeft = isHorizontal && event.key === "ArrowLeft"; 5371 const isRight = isHorizontal && event.key === "ArrowRight"; 5372 const isUp = isVertical && event.key === "ArrowUp"; 5373 const isDown = isVertical && event.key === "ArrowDown"; 5374 if (isRight || isDown) { 5375 const { length: valueLength } = getTextboxValue(currentTarget); 5376 if (selection.end !== valueLength) return; 5377 } else if ((isLeft || isUp) && selection.start !== 0) return; 5378 } 5379 const nextId = action(); 5380 if (preventScrollOnKeyDownProp(event) || nextId !== void 0) { 5381 if (!moveOnKeyPressProp(event)) return; 5382 event.preventDefault(); 5383 store.move(nextId); 5384 } 5385 } 5386 }); 5387 const providerValue = (0,external_React_.useMemo)( 5388 () => ({ id, baseElement }), 5389 [id, baseElement] 5390 ); 5391 props = useWrapElement( 5392 props, 5393 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }), 5394 [providerValue] 5395 ); 5396 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 5397 id, 5398 "data-active-item": isActiveItem || void 0 5399 }, props), { 5400 ref: useMergeRefs(ref, props.ref), 5401 tabIndex: isTabbable ? props.tabIndex : -1, 5402 onFocus, 5403 onBlurCapture, 5404 onKeyDown 5405 }); 5406 props = useCommand(props); 5407 props = useCollectionItem(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 5408 store 5409 }, props), { 5410 getItem, 5411 shouldRegisterItem: id ? props.shouldRegisterItem : false 5412 })); 5413 return removeUndefinedValues(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 5414 "aria-setsize": ariaSetSize, 5415 "aria-posinset": ariaPosInSet 5416 })); 5417 } 5418 ); 5419 var P2CTZE2T_CompositeItem = memo2( 5420 forwardRef2(function CompositeItem2(props) { 5421 const htmlProps = useCompositeItem(props); 5422 return LMDWO4NN_createElement(P2CTZE2T_TagName, htmlProps); 5423 }) 5424 ); 5425 5426 5427 5428 ;// ./node_modules/@wordpress/components/build-module/composite/item.js 5429 /** 5430 * External dependencies 5431 */ 5432 5433 5434 /** 5435 * WordPress dependencies 5436 */ 5437 5438 5439 /** 5440 * Internal dependencies 5441 */ 5442 5443 5444 5445 const CompositeItem = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeItem(props, ref) { 5446 var _props$store; 5447 const context = context_useCompositeContext(); 5448 5449 // @ts-expect-error The store prop is undocumented and only used by the 5450 // legacy compat layer. The `store` prop is documented, but its type is 5451 // obfuscated to discourage its use outside of the component's internals. 5452 const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store; 5453 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(P2CTZE2T_CompositeItem, { 5454 store: store, 5455 ...props, 5456 ref: ref 5457 }); 5458 }); 5459 5460 ;// ./node_modules/@ariakit/react-core/esm/__chunks/J2LQO3EC.js 5461 "use client"; 5462 5463 5464 5465 5466 5467 // src/composite/composite-row.tsx 5468 5469 5470 5471 var J2LQO3EC_TagName = "div"; 5472 var useCompositeRow = createHook( 5473 function useCompositeRow2(_a) { 5474 var _b = _a, { 5475 store, 5476 "aria-setsize": ariaSetSize, 5477 "aria-posinset": ariaPosInSet 5478 } = _b, props = __objRest(_b, [ 5479 "store", 5480 "aria-setsize", 5481 "aria-posinset" 5482 ]); 5483 const context = useCompositeContext(); 5484 store = store || context; 5485 invariant( 5486 store, 5487 false && 0 5488 ); 5489 const id = useId(props.id); 5490 const baseElement = store.useState( 5491 (state) => state.baseElement || void 0 5492 ); 5493 const providerValue = (0,external_React_.useMemo)( 5494 () => ({ id, baseElement, ariaSetSize, ariaPosInSet }), 5495 [id, baseElement, ariaSetSize, ariaPosInSet] 5496 ); 5497 props = useWrapElement( 5498 props, 5499 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }), 5500 [providerValue] 5501 ); 5502 props = _3YLGPPWQ_spreadValues({ id }, props); 5503 return removeUndefinedValues(props); 5504 } 5505 ); 5506 var J2LQO3EC_CompositeRow = forwardRef2(function CompositeRow2(props) { 5507 const htmlProps = useCompositeRow(props); 5508 return LMDWO4NN_createElement(J2LQO3EC_TagName, htmlProps); 5509 }); 5510 5511 5512 5513 ;// ./node_modules/@wordpress/components/build-module/composite/row.js 5514 /** 5515 * External dependencies 5516 */ 5517 5518 5519 /** 5520 * WordPress dependencies 5521 */ 5522 5523 5524 /** 5525 * Internal dependencies 5526 */ 5527 5528 5529 5530 const CompositeRow = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeRow(props, ref) { 5531 var _props$store; 5532 const context = context_useCompositeContext(); 5533 5534 // @ts-expect-error The store prop is undocumented and only used by the 5535 // legacy compat layer. The `store` prop is documented, but its type is 5536 // obfuscated to discourage its use outside of the component's internals. 5537 const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store; 5538 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(J2LQO3EC_CompositeRow, { 5539 store: store, 5540 ...props, 5541 ref: ref 5542 }); 5543 }); 5544 5545 ;// ./node_modules/@ariakit/react-core/esm/__chunks/T7VMP3TM.js 5546 "use client"; 5547 5548 5549 5550 5551 5552 5553 // src/composite/composite-typeahead.tsx 5554 5555 5556 5557 5558 var T7VMP3TM_TagName = "div"; 5559 var chars = ""; 5560 function clearChars() { 5561 chars = ""; 5562 } 5563 function isValidTypeaheadEvent(event) { 5564 const target = event.target; 5565 if (target && isTextField(target)) return false; 5566 if (event.key === " " && chars.length) return true; 5567 return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key); 5568 } 5569 function isSelfTargetOrItem(event, items) { 5570 if (isSelfTarget(event)) return true; 5571 const target = event.target; 5572 if (!target) return false; 5573 const isItem = items.some((item) => item.element === target); 5574 return isItem; 5575 } 5576 function T7VMP3TM_getEnabledItems(items) { 5577 return items.filter((item) => !item.disabled); 5578 } 5579 function itemTextStartsWith(item, text) { 5580 var _a; 5581 const itemText = ((_a = item.element) == null ? void 0 : _a.textContent) || item.children || // The composite item object itself doesn't include a value property, but 5582 // other components like Select do. Since CompositeTypeahead is a generic 5583 // component that can be used with those as well, we also consider the value 5584 // property as a fallback for the typeahead text content. 5585 "value" in item && item.value; 5586 if (!itemText) return false; 5587 return normalizeString(itemText).trim().toLowerCase().startsWith(text.toLowerCase()); 5588 } 5589 function getSameInitialItems(items, char, activeId) { 5590 if (!activeId) return items; 5591 const activeItem = items.find((item) => item.id === activeId); 5592 if (!activeItem) return items; 5593 if (!itemTextStartsWith(activeItem, char)) return items; 5594 if (chars !== char && itemTextStartsWith(activeItem, chars)) return items; 5595 chars = char; 5596 return _5VQZOHHZ_flipItems( 5597 items.filter((item) => itemTextStartsWith(item, chars)), 5598 activeId 5599 ).filter((item) => item.id !== activeId); 5600 } 5601 var useCompositeTypeahead = createHook(function useCompositeTypeahead2(_a) { 5602 var _b = _a, { store, typeahead = true } = _b, props = __objRest(_b, ["store", "typeahead"]); 5603 const context = useCompositeContext(); 5604 store = store || context; 5605 invariant( 5606 store, 5607 false && 0 5608 ); 5609 const onKeyDownCaptureProp = props.onKeyDownCapture; 5610 const cleanupTimeoutRef = (0,external_React_.useRef)(0); 5611 const onKeyDownCapture = useEvent((event) => { 5612 onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event); 5613 if (event.defaultPrevented) return; 5614 if (!typeahead) return; 5615 if (!store) return; 5616 if (!isValidTypeaheadEvent(event)) { 5617 return clearChars(); 5618 } 5619 const { renderedItems, items, activeId, id } = store.getState(); 5620 let enabledItems = T7VMP3TM_getEnabledItems( 5621 items.length > renderedItems.length ? items : renderedItems 5622 ); 5623 const document = getDocument(event.currentTarget); 5624 const selector = `[data-offscreen-id="$id}"]`; 5625 const offscreenItems = document.querySelectorAll(selector); 5626 for (const element of offscreenItems) { 5627 const disabled = element.ariaDisabled === "true" || "disabled" in element && !!element.disabled; 5628 enabledItems.push({ id: element.id, element, disabled }); 5629 } 5630 if (offscreenItems.length) { 5631 enabledItems = sortBasedOnDOMPosition(enabledItems, (i) => i.element); 5632 } 5633 if (!isSelfTargetOrItem(event, enabledItems)) return clearChars(); 5634 event.preventDefault(); 5635 window.clearTimeout(cleanupTimeoutRef.current); 5636 cleanupTimeoutRef.current = window.setTimeout(() => { 5637 chars = ""; 5638 }, 500); 5639 const char = event.key.toLowerCase(); 5640 chars += char; 5641 enabledItems = getSameInitialItems(enabledItems, char, activeId); 5642 const item = enabledItems.find((item2) => itemTextStartsWith(item2, chars)); 5643 if (item) { 5644 store.move(item.id); 5645 } else { 5646 clearChars(); 5647 } 5648 }); 5649 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 5650 onKeyDownCapture 5651 }); 5652 return removeUndefinedValues(props); 5653 }); 5654 var T7VMP3TM_CompositeTypeahead = forwardRef2(function CompositeTypeahead2(props) { 5655 const htmlProps = useCompositeTypeahead(props); 5656 return LMDWO4NN_createElement(T7VMP3TM_TagName, htmlProps); 5657 }); 5658 5659 5660 5661 ;// ./node_modules/@wordpress/components/build-module/composite/typeahead.js 5662 /** 5663 * External dependencies 5664 */ 5665 5666 5667 /** 5668 * WordPress dependencies 5669 */ 5670 5671 5672 /** 5673 * Internal dependencies 5674 */ 5675 5676 5677 5678 const CompositeTypeahead = (0,external_wp_element_namespaceObject.forwardRef)(function CompositeTypeahead(props, ref) { 5679 var _props$store; 5680 const context = context_useCompositeContext(); 5681 5682 // @ts-expect-error The store prop is undocumented and only used by the 5683 // legacy compat layer. The `store` prop is documented, but its type is 5684 // obfuscated to discourage its use outside of the component's internals. 5685 const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store; 5686 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(T7VMP3TM_CompositeTypeahead, { 5687 store: store, 5688 ...props, 5689 ref: ref 5690 }); 5691 }); 5692 5693 ;// ./node_modules/@wordpress/components/build-module/composite/index.js 5694 /** 5695 * Composite is a component that may contain navigable items represented by 5696 * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements 5697 * all the keyboard navigation mechanisms to ensure that there's only one 5698 * tab stop for the whole Composite element. This means that it can behave as 5699 * a roving tabindex or aria-activedescendant container. 5700 * 5701 * @see https://ariakit.org/components/composite 5702 */ 5703 5704 /** 5705 * External dependencies 5706 */ 5707 5708 5709 /** 5710 * WordPress dependencies 5711 */ 5712 5713 5714 5715 /** 5716 * Internal dependencies 5717 */ 5718 5719 5720 5721 5722 5723 5724 5725 5726 5727 /** 5728 * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite) 5729 * role, which provides a single tab stop on the page and arrow key navigation 5730 * through the focusable descendants. 5731 * 5732 * @example 5733 * ```jsx 5734 * import { Composite } from '@wordpress/components'; 5735 * 5736 * <Composite> 5737 * <Composite.Item>Item 1</Composite.Item> 5738 * <Composite.Item>Item 2</Composite.Item> 5739 * </Composite> 5740 * ``` 5741 */ 5742 const Composite = Object.assign((0,external_wp_element_namespaceObject.forwardRef)(function Composite({ 5743 // Composite store props 5744 activeId, 5745 defaultActiveId, 5746 setActiveId, 5747 focusLoop = false, 5748 focusWrap = false, 5749 focusShift = false, 5750 virtualFocus = false, 5751 orientation = 'both', 5752 rtl = (0,external_wp_i18n_namespaceObject.isRTL)(), 5753 // Composite component props 5754 children, 5755 disabled = false, 5756 // Rest props 5757 ...props 5758 }, ref) { 5759 // @ts-expect-error The store prop is undocumented and only used by the 5760 // legacy compat layer. 5761 const storeProp = props.store; 5762 const internalStore = useCompositeStore({ 5763 activeId, 5764 defaultActiveId, 5765 setActiveId, 5766 focusLoop, 5767 focusWrap, 5768 focusShift, 5769 virtualFocus, 5770 orientation, 5771 rtl 5772 }); 5773 const store = storeProp !== null && storeProp !== void 0 ? storeProp : internalStore; 5774 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 5775 store 5776 }), [store]); 5777 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ITI7HKP4_Composite, { 5778 disabled: disabled, 5779 store: store, 5780 ...props, 5781 ref: ref, 5782 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeContext.Provider, { 5783 value: contextValue, 5784 children: children 5785 }) 5786 }); 5787 }), { 5788 /** 5789 * Renders a group element for composite items. 5790 * 5791 * @example 5792 * ```jsx 5793 * import { Composite } from '@wordpress/components'; 5794 * 5795 * <Composite> 5796 * <Composite.Group> 5797 * <Composite.GroupLabel>Label</Composite.GroupLabel> 5798 * <Composite.Item>Item 1</Composite.Item> 5799 * <Composite.Item>Item 2</Composite.Item> 5800 * </CompositeGroup> 5801 * </Composite> 5802 * ``` 5803 */ 5804 Group: Object.assign(CompositeGroup, { 5805 displayName: 'Composite.Group' 5806 }), 5807 /** 5808 * Renders a label in a composite group. This component must be wrapped with 5809 * `Composite.Group` so the `aria-labelledby` prop is properly set on the 5810 * composite group element. 5811 * 5812 * @example 5813 * ```jsx 5814 * import { Composite } from '@wordpress/components'; 5815 * 5816 * <Composite> 5817 * <Composite.Group> 5818 * <Composite.GroupLabel>Label</Composite.GroupLabel> 5819 * <Composite.Item>Item 1</Composite.Item> 5820 * <Composite.Item>Item 2</Composite.Item> 5821 * </CompositeGroup> 5822 * </Composite> 5823 * ``` 5824 */ 5825 GroupLabel: Object.assign(CompositeGroupLabel, { 5826 displayName: 'Composite.GroupLabel' 5827 }), 5828 /** 5829 * Renders a composite item. 5830 * 5831 * @example 5832 * ```jsx 5833 * import { Composite } from '@wordpress/components'; 5834 * 5835 * <Composite> 5836 * <Composite.Item>Item 1</Composite.Item> 5837 * <Composite.Item>Item 2</Composite.Item> 5838 * <Composite.Item>Item 3</Composite.Item> 5839 * </Composite> 5840 * ``` 5841 */ 5842 Item: Object.assign(CompositeItem, { 5843 displayName: 'Composite.Item' 5844 }), 5845 /** 5846 * Renders a composite row. Wrapping `Composite.Item` elements within 5847 * `Composite.Row` will create a two-dimensional composite widget, such as a 5848 * grid. 5849 * 5850 * @example 5851 * ```jsx 5852 * import { Composite } from '@wordpress/components'; 5853 * 5854 * <Composite> 5855 * <Composite.Row> 5856 * <Composite.Item>Item 1.1</Composite.Item> 5857 * <Composite.Item>Item 1.2</Composite.Item> 5858 * <Composite.Item>Item 1.3</Composite.Item> 5859 * </Composite.Row> 5860 * <Composite.Row> 5861 * <Composite.Item>Item 2.1</Composite.Item> 5862 * <Composite.Item>Item 2.2</Composite.Item> 5863 * <Composite.Item>Item 2.3</Composite.Item> 5864 * </Composite.Row> 5865 * </Composite> 5866 * ``` 5867 */ 5868 Row: Object.assign(CompositeRow, { 5869 displayName: 'Composite.Row' 5870 }), 5871 /** 5872 * Renders an element in a composite widget that receives focus on mouse move 5873 * and loses focus to the composite base element on mouse leave. This should 5874 * be combined with the `Composite.Item` component. 5875 * 5876 * @example 5877 * ```jsx 5878 * import { Composite } from '@wordpress/components'; 5879 * 5880 * <Composite> 5881 * <Composite.Hover render={ <Composite.Item /> }> 5882 * Item 1 5883 * </Composite.Hover> 5884 * <Composite.Hover render={ <Composite.Item /> }> 5885 * Item 2 5886 * </Composite.Hover> 5887 * </Composite> 5888 * ``` 5889 */ 5890 Hover: Object.assign(CompositeHover, { 5891 displayName: 'Composite.Hover' 5892 }), 5893 /** 5894 * Renders a component that adds typeahead functionality to composite 5895 * components. Hitting printable character keys will move focus to the next 5896 * composite item that begins with the input characters. 5897 * 5898 * @example 5899 * ```jsx 5900 * import { Composite } from '@wordpress/components'; 5901 * 5902 * <Composite render={ <CompositeTypeahead /> }> 5903 * <Composite.Item>Item 1</Composite.Item> 5904 * <Composite.Item>Item 2</Composite.Item> 5905 * </Composite> 5906 * ``` 5907 */ 5908 Typeahead: Object.assign(CompositeTypeahead, { 5909 displayName: 'Composite.Typeahead' 5910 }), 5911 /** 5912 * The React context used by the composite components. It can be used by 5913 * to access the composite store, and to forward the context when composite 5914 * sub-components are rendered across portals (ie. `SlotFill` components) 5915 * that would not otherwise forward the context to the `Fill` children. 5916 * 5917 * @example 5918 * ```jsx 5919 * import { Composite } from '@wordpress/components'; 5920 * import { useContext } from '@wordpress/element'; 5921 * 5922 * const compositeContext = useContext( Composite.Context ); 5923 * ``` 5924 */ 5925 Context: Object.assign(CompositeContext, { 5926 displayName: 'Composite.Context' 5927 }) 5928 }); 5929 5930 ;// ./node_modules/@ariakit/core/esm/__chunks/RCQ5P4YE.js 5931 "use client"; 5932 5933 5934 5935 5936 // src/disclosure/disclosure-store.ts 5937 function createDisclosureStore(props = {}) { 5938 const store = mergeStore( 5939 props.store, 5940 omit2(props.disclosure, ["contentElement", "disclosureElement"]) 5941 ); 5942 throwOnConflictingProps(props, store); 5943 const syncState = store == null ? void 0 : store.getState(); 5944 const open = defaultValue( 5945 props.open, 5946 syncState == null ? void 0 : syncState.open, 5947 props.defaultOpen, 5948 false 5949 ); 5950 const animated = defaultValue(props.animated, syncState == null ? void 0 : syncState.animated, false); 5951 const initialState = { 5952 open, 5953 animated, 5954 animating: !!animated && open, 5955 mounted: open, 5956 contentElement: defaultValue(syncState == null ? void 0 : syncState.contentElement, null), 5957 disclosureElement: defaultValue(syncState == null ? void 0 : syncState.disclosureElement, null) 5958 }; 5959 const disclosure = createStore(initialState, store); 5960 setup( 5961 disclosure, 5962 () => sync(disclosure, ["animated", "animating"], (state) => { 5963 if (state.animated) return; 5964 disclosure.setState("animating", false); 5965 }) 5966 ); 5967 setup( 5968 disclosure, 5969 () => subscribe(disclosure, ["open"], () => { 5970 if (!disclosure.getState().animated) return; 5971 disclosure.setState("animating", true); 5972 }) 5973 ); 5974 setup( 5975 disclosure, 5976 () => sync(disclosure, ["open", "animating"], (state) => { 5977 disclosure.setState("mounted", state.open || state.animating); 5978 }) 5979 ); 5980 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, disclosure), { 5981 disclosure: props.disclosure, 5982 setOpen: (value) => disclosure.setState("open", value), 5983 show: () => disclosure.setState("open", true), 5984 hide: () => disclosure.setState("open", false), 5985 toggle: () => disclosure.setState("open", (open2) => !open2), 5986 stopAnimation: () => disclosure.setState("animating", false), 5987 setContentElement: (value) => disclosure.setState("contentElement", value), 5988 setDisclosureElement: (value) => disclosure.setState("disclosureElement", value) 5989 }); 5990 } 5991 5992 5993 5994 ;// ./node_modules/@ariakit/react-core/esm/__chunks/WYCIER3C.js 5995 "use client"; 5996 5997 5998 5999 // src/disclosure/disclosure-store.ts 6000 6001 function useDisclosureStoreProps(store, update, props) { 6002 useUpdateEffect(update, [props.store, props.disclosure]); 6003 useStoreProps(store, props, "open", "setOpen"); 6004 useStoreProps(store, props, "mounted", "setMounted"); 6005 useStoreProps(store, props, "animated"); 6006 return Object.assign(store, { disclosure: props.disclosure }); 6007 } 6008 function useDisclosureStore(props = {}) { 6009 const [store, update] = YV4JVR4I_useStore(createDisclosureStore, props); 6010 return useDisclosureStoreProps(store, update, props); 6011 } 6012 6013 6014 6015 ;// ./node_modules/@ariakit/core/esm/__chunks/FZZ2AVHF.js 6016 "use client"; 6017 6018 6019 // src/dialog/dialog-store.ts 6020 function createDialogStore(props = {}) { 6021 return createDisclosureStore(props); 6022 } 6023 6024 6025 6026 ;// ./node_modules/@ariakit/react-core/esm/__chunks/BM6PGYQY.js 6027 "use client"; 6028 6029 6030 6031 // src/dialog/dialog-store.ts 6032 6033 function useDialogStoreProps(store, update, props) { 6034 return useDisclosureStoreProps(store, update, props); 6035 } 6036 function useDialogStore(props = {}) { 6037 const [store, update] = YV4JVR4I_useStore(createDialogStore, props); 6038 return useDialogStoreProps(store, update, props); 6039 } 6040 6041 6042 6043 ;// ./node_modules/@ariakit/react-core/esm/__chunks/O2PQ2652.js 6044 "use client"; 6045 6046 6047 6048 6049 // src/popover/popover-store.ts 6050 6051 function usePopoverStoreProps(store, update, props) { 6052 useUpdateEffect(update, [props.popover]); 6053 useStoreProps(store, props, "placement"); 6054 return useDialogStoreProps(store, update, props); 6055 } 6056 function usePopoverStore(props = {}) { 6057 const [store, update] = useStore(Core.createPopoverStore, props); 6058 return usePopoverStoreProps(store, update, props); 6059 } 6060 6061 6062 6063 ;// ./node_modules/@ariakit/react-core/esm/__chunks/FTXTWCCT.js 6064 "use client"; 6065 6066 6067 6068 // src/hovercard/hovercard-store.ts 6069 6070 function useHovercardStoreProps(store, update, props) { 6071 useStoreProps(store, props, "timeout"); 6072 useStoreProps(store, props, "showTimeout"); 6073 useStoreProps(store, props, "hideTimeout"); 6074 return usePopoverStoreProps(store, update, props); 6075 } 6076 function useHovercardStore(props = {}) { 6077 const [store, update] = useStore(Core.createHovercardStore, props); 6078 return useHovercardStoreProps(store, update, props); 6079 } 6080 6081 6082 6083 ;// ./node_modules/@ariakit/core/esm/__chunks/ME2CUF3F.js 6084 "use client"; 6085 6086 6087 6088 6089 6090 // src/popover/popover-store.ts 6091 function createPopoverStore(_a = {}) { 6092 var _b = _a, { 6093 popover: otherPopover 6094 } = _b, props = _3YLGPPWQ_objRest(_b, [ 6095 "popover" 6096 ]); 6097 const store = mergeStore( 6098 props.store, 6099 omit2(otherPopover, [ 6100 "arrowElement", 6101 "anchorElement", 6102 "contentElement", 6103 "popoverElement", 6104 "disclosureElement" 6105 ]) 6106 ); 6107 throwOnConflictingProps(props, store); 6108 const syncState = store == null ? void 0 : store.getState(); 6109 const dialog = createDialogStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { store })); 6110 const placement = defaultValue( 6111 props.placement, 6112 syncState == null ? void 0 : syncState.placement, 6113 "bottom" 6114 ); 6115 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, dialog.getState()), { 6116 placement, 6117 currentPlacement: placement, 6118 anchorElement: defaultValue(syncState == null ? void 0 : syncState.anchorElement, null), 6119 popoverElement: defaultValue(syncState == null ? void 0 : syncState.popoverElement, null), 6120 arrowElement: defaultValue(syncState == null ? void 0 : syncState.arrowElement, null), 6121 rendered: Symbol("rendered") 6122 }); 6123 const popover = createStore(initialState, dialog, store); 6124 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, dialog), popover), { 6125 setAnchorElement: (element) => popover.setState("anchorElement", element), 6126 setPopoverElement: (element) => popover.setState("popoverElement", element), 6127 setArrowElement: (element) => popover.setState("arrowElement", element), 6128 render: () => popover.setState("rendered", Symbol("rendered")) 6129 }); 6130 } 6131 6132 6133 6134 ;// ./node_modules/@ariakit/core/esm/__chunks/JTLIIJ4U.js 6135 "use client"; 6136 6137 6138 6139 6140 6141 // src/hovercard/hovercard-store.ts 6142 function createHovercardStore(props = {}) { 6143 var _a; 6144 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 6145 const popover = createPopoverStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 6146 placement: defaultValue( 6147 props.placement, 6148 syncState == null ? void 0 : syncState.placement, 6149 "bottom" 6150 ) 6151 })); 6152 const timeout = defaultValue(props.timeout, syncState == null ? void 0 : syncState.timeout, 500); 6153 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, popover.getState()), { 6154 timeout, 6155 showTimeout: defaultValue(props.showTimeout, syncState == null ? void 0 : syncState.showTimeout), 6156 hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout), 6157 autoFocusOnShow: defaultValue(syncState == null ? void 0 : syncState.autoFocusOnShow, false) 6158 }); 6159 const hovercard = createStore(initialState, popover, props.store); 6160 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, popover), hovercard), { 6161 setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value) 6162 }); 6163 } 6164 6165 6166 6167 ;// ./node_modules/@ariakit/core/esm/tooltip/tooltip-store.js 6168 "use client"; 6169 6170 6171 6172 6173 6174 6175 6176 6177 // src/tooltip/tooltip-store.ts 6178 function createTooltipStore(props = {}) { 6179 var _a; 6180 if (false) {} 6181 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 6182 const hovercard = createHovercardStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 6183 placement: defaultValue( 6184 props.placement, 6185 syncState == null ? void 0 : syncState.placement, 6186 "top" 6187 ), 6188 hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0) 6189 })); 6190 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, hovercard.getState()), { 6191 type: defaultValue(props.type, syncState == null ? void 0 : syncState.type, "description"), 6192 skipTimeout: defaultValue(props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300) 6193 }); 6194 const tooltip = createStore(initialState, hovercard, props.store); 6195 return _chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, hovercard), tooltip); 6196 } 6197 6198 6199 ;// ./node_modules/@ariakit/react-core/esm/__chunks/YTDK2NGG.js 6200 "use client"; 6201 6202 6203 6204 // src/tooltip/tooltip-store.ts 6205 6206 function useTooltipStoreProps(store, update, props) { 6207 useStoreProps(store, props, "type"); 6208 useStoreProps(store, props, "skipTimeout"); 6209 return useHovercardStoreProps(store, update, props); 6210 } 6211 function useTooltipStore(props = {}) { 6212 const [store, update] = YV4JVR4I_useStore(createTooltipStore, props); 6213 return useTooltipStoreProps(store, update, props); 6214 } 6215 6216 6217 6218 ;// ./node_modules/@ariakit/react-core/esm/__chunks/XL7CSKGW.js 6219 "use client"; 6220 6221 6222 // src/role/role.tsx 6223 var XL7CSKGW_TagName = "div"; 6224 var XL7CSKGW_elements = [ 6225 "a", 6226 "button", 6227 "details", 6228 "dialog", 6229 "div", 6230 "form", 6231 "h1", 6232 "h2", 6233 "h3", 6234 "h4", 6235 "h5", 6236 "h6", 6237 "header", 6238 "img", 6239 "input", 6240 "label", 6241 "li", 6242 "nav", 6243 "ol", 6244 "p", 6245 "section", 6246 "select", 6247 "span", 6248 "summary", 6249 "textarea", 6250 "ul", 6251 "svg" 6252 ]; 6253 var useRole = createHook( 6254 function useRole2(props) { 6255 return props; 6256 } 6257 ); 6258 var Role = forwardRef2( 6259 // @ts-expect-error 6260 function Role2(props) { 6261 return LMDWO4NN_createElement(XL7CSKGW_TagName, props); 6262 } 6263 ); 6264 Object.assign( 6265 Role, 6266 XL7CSKGW_elements.reduce((acc, element) => { 6267 acc[element] = forwardRef2(function Role3(props) { 6268 return LMDWO4NN_createElement(element, props); 6269 }); 6270 return acc; 6271 }, {}) 6272 ); 6273 6274 6275 6276 ;// ./node_modules/@ariakit/react-core/esm/__chunks/S6EF7IVO.js 6277 "use client"; 6278 6279 6280 // src/disclosure/disclosure-context.tsx 6281 var S6EF7IVO_ctx = createStoreContext(); 6282 var useDisclosureContext = S6EF7IVO_ctx.useContext; 6283 var useDisclosureScopedContext = S6EF7IVO_ctx.useScopedContext; 6284 var useDisclosureProviderContext = S6EF7IVO_ctx.useProviderContext; 6285 var DisclosureContextProvider = S6EF7IVO_ctx.ContextProvider; 6286 var DisclosureScopedContextProvider = S6EF7IVO_ctx.ScopedContextProvider; 6287 6288 6289 6290 ;// ./node_modules/@ariakit/react-core/esm/__chunks/RS7LB2H4.js 6291 "use client"; 6292 6293 6294 6295 // src/dialog/dialog-context.tsx 6296 6297 var RS7LB2H4_ctx = createStoreContext( 6298 [DisclosureContextProvider], 6299 [DisclosureScopedContextProvider] 6300 ); 6301 var useDialogContext = RS7LB2H4_ctx.useContext; 6302 var useDialogScopedContext = RS7LB2H4_ctx.useScopedContext; 6303 var useDialogProviderContext = RS7LB2H4_ctx.useProviderContext; 6304 var DialogContextProvider = RS7LB2H4_ctx.ContextProvider; 6305 var DialogScopedContextProvider = RS7LB2H4_ctx.ScopedContextProvider; 6306 var DialogHeadingContext = (0,external_React_.createContext)(void 0); 6307 var DialogDescriptionContext = (0,external_React_.createContext)(void 0); 6308 6309 6310 6311 ;// ./node_modules/@ariakit/react-core/esm/__chunks/MTZPJQMC.js 6312 "use client"; 6313 6314 6315 6316 // src/popover/popover-context.tsx 6317 var MTZPJQMC_ctx = createStoreContext( 6318 [DialogContextProvider], 6319 [DialogScopedContextProvider] 6320 ); 6321 var usePopoverContext = MTZPJQMC_ctx.useContext; 6322 var usePopoverScopedContext = MTZPJQMC_ctx.useScopedContext; 6323 var usePopoverProviderContext = MTZPJQMC_ctx.useProviderContext; 6324 var PopoverContextProvider = MTZPJQMC_ctx.ContextProvider; 6325 var PopoverScopedContextProvider = MTZPJQMC_ctx.ScopedContextProvider; 6326 6327 6328 6329 ;// ./node_modules/@ariakit/react-core/esm/__chunks/EM5CXX6A.js 6330 "use client"; 6331 6332 6333 6334 // src/hovercard/hovercard-context.tsx 6335 var EM5CXX6A_ctx = createStoreContext( 6336 [PopoverContextProvider], 6337 [PopoverScopedContextProvider] 6338 ); 6339 var useHovercardContext = EM5CXX6A_ctx.useContext; 6340 var useHovercardScopedContext = EM5CXX6A_ctx.useScopedContext; 6341 var useHovercardProviderContext = EM5CXX6A_ctx.useProviderContext; 6342 var HovercardContextProvider = EM5CXX6A_ctx.ContextProvider; 6343 var HovercardScopedContextProvider = EM5CXX6A_ctx.ScopedContextProvider; 6344 6345 6346 6347 ;// ./node_modules/@ariakit/react-core/esm/__chunks/BYC7LY2E.js 6348 "use client"; 6349 6350 6351 6352 6353 6354 6355 // src/hovercard/hovercard-anchor.tsx 6356 6357 6358 6359 var BYC7LY2E_TagName = "a"; 6360 var useHovercardAnchor = createHook( 6361 function useHovercardAnchor2(_a) { 6362 var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]); 6363 const context = useHovercardProviderContext(); 6364 store = store || context; 6365 invariant( 6366 store, 6367 false && 0 6368 ); 6369 const disabled = disabledFromProps(props); 6370 const showTimeoutRef = (0,external_React_.useRef)(0); 6371 (0,external_React_.useEffect)(() => () => window.clearTimeout(showTimeoutRef.current), []); 6372 (0,external_React_.useEffect)(() => { 6373 const onMouseLeave = (event) => { 6374 if (!store) return; 6375 const { anchorElement } = store.getState(); 6376 if (!anchorElement) return; 6377 if (event.target !== anchorElement) return; 6378 window.clearTimeout(showTimeoutRef.current); 6379 showTimeoutRef.current = 0; 6380 }; 6381 return addGlobalEventListener("mouseleave", onMouseLeave, true); 6382 }, [store]); 6383 const onMouseMoveProp = props.onMouseMove; 6384 const showOnHoverProp = useBooleanEvent(showOnHover); 6385 const isMouseMoving = useIsMouseMoving(); 6386 const onMouseMove = useEvent((event) => { 6387 onMouseMoveProp == null ? void 0 : onMouseMoveProp(event); 6388 if (disabled) return; 6389 if (!store) return; 6390 if (event.defaultPrevented) return; 6391 if (showTimeoutRef.current) return; 6392 if (!isMouseMoving()) return; 6393 if (!showOnHoverProp(event)) return; 6394 const element = event.currentTarget; 6395 store.setAnchorElement(element); 6396 store.setDisclosureElement(element); 6397 const { showTimeout, timeout } = store.getState(); 6398 const showHovercard = () => { 6399 showTimeoutRef.current = 0; 6400 if (!isMouseMoving()) return; 6401 store == null ? void 0 : store.setAnchorElement(element); 6402 store == null ? void 0 : store.show(); 6403 queueMicrotask(() => { 6404 store == null ? void 0 : store.setDisclosureElement(element); 6405 }); 6406 }; 6407 const timeoutMs = showTimeout != null ? showTimeout : timeout; 6408 if (timeoutMs === 0) { 6409 showHovercard(); 6410 } else { 6411 showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs); 6412 } 6413 }); 6414 const onClickProp = props.onClick; 6415 const onClick = useEvent((event) => { 6416 onClickProp == null ? void 0 : onClickProp(event); 6417 if (!store) return; 6418 window.clearTimeout(showTimeoutRef.current); 6419 showTimeoutRef.current = 0; 6420 }); 6421 const ref = (0,external_React_.useCallback)( 6422 (element) => { 6423 if (!store) return; 6424 const { anchorElement } = store.getState(); 6425 if (anchorElement == null ? void 0 : anchorElement.isConnected) return; 6426 store.setAnchorElement(element); 6427 }, 6428 [store] 6429 ); 6430 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 6431 ref: useMergeRefs(ref, props.ref), 6432 onMouseMove, 6433 onClick 6434 }); 6435 props = useFocusable(props); 6436 return props; 6437 } 6438 ); 6439 var HovercardAnchor = forwardRef2(function HovercardAnchor2(props) { 6440 const htmlProps = useHovercardAnchor(props); 6441 return LMDWO4NN_createElement(BYC7LY2E_TagName, htmlProps); 6442 }); 6443 6444 6445 6446 ;// ./node_modules/@ariakit/react-core/esm/__chunks/F4IYJ42G.js 6447 "use client"; 6448 6449 6450 6451 // src/tooltip/tooltip-context.tsx 6452 var F4IYJ42G_ctx = createStoreContext( 6453 [HovercardContextProvider], 6454 [HovercardScopedContextProvider] 6455 ); 6456 var useTooltipContext = F4IYJ42G_ctx.useContext; 6457 var useTooltipScopedContext = F4IYJ42G_ctx.useScopedContext; 6458 var useTooltipProviderContext = F4IYJ42G_ctx.useProviderContext; 6459 var TooltipContextProvider = F4IYJ42G_ctx.ContextProvider; 6460 var TooltipScopedContextProvider = F4IYJ42G_ctx.ScopedContextProvider; 6461 6462 6463 6464 ;// ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-anchor.js 6465 "use client"; 6466 6467 6468 6469 6470 6471 6472 6473 6474 6475 6476 6477 6478 6479 // src/tooltip/tooltip-anchor.tsx 6480 6481 6482 6483 var tooltip_anchor_TagName = "div"; 6484 var globalStore = createStore({ 6485 activeStore: null 6486 }); 6487 function createRemoveStoreCallback(store) { 6488 return () => { 6489 const { activeStore } = globalStore.getState(); 6490 if (activeStore !== store) return; 6491 globalStore.setState("activeStore", null); 6492 }; 6493 } 6494 var useTooltipAnchor = createHook( 6495 function useTooltipAnchor2(_a) { 6496 var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]); 6497 const context = useTooltipProviderContext(); 6498 store = store || context; 6499 invariant( 6500 store, 6501 false && 0 6502 ); 6503 const canShowOnHoverRef = (0,external_React_.useRef)(false); 6504 (0,external_React_.useEffect)(() => { 6505 return sync(store, ["mounted"], (state) => { 6506 if (state.mounted) return; 6507 canShowOnHoverRef.current = false; 6508 }); 6509 }, [store]); 6510 (0,external_React_.useEffect)(() => { 6511 if (!store) return; 6512 return chain( 6513 // Immediately remove the current store from the global store when 6514 // the component unmounts. This is useful, for example, to avoid 6515 // showing tooltips immediately on serial tests. 6516 createRemoveStoreCallback(store), 6517 sync(store, ["mounted", "skipTimeout"], (state) => { 6518 if (!store) return; 6519 if (state.mounted) { 6520 const { activeStore } = globalStore.getState(); 6521 if (activeStore !== store) { 6522 activeStore == null ? void 0 : activeStore.hide(); 6523 } 6524 return globalStore.setState("activeStore", store); 6525 } 6526 const id = setTimeout( 6527 createRemoveStoreCallback(store), 6528 state.skipTimeout 6529 ); 6530 return () => clearTimeout(id); 6531 }) 6532 ); 6533 }, [store]); 6534 const onMouseEnterProp = props.onMouseEnter; 6535 const onMouseEnter = useEvent((event) => { 6536 onMouseEnterProp == null ? void 0 : onMouseEnterProp(event); 6537 canShowOnHoverRef.current = true; 6538 }); 6539 const onFocusVisibleProp = props.onFocusVisible; 6540 const onFocusVisible = useEvent((event) => { 6541 onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event); 6542 if (event.defaultPrevented) return; 6543 store == null ? void 0 : store.setAnchorElement(event.currentTarget); 6544 store == null ? void 0 : store.show(); 6545 }); 6546 const onBlurProp = props.onBlur; 6547 const onBlur = useEvent((event) => { 6548 onBlurProp == null ? void 0 : onBlurProp(event); 6549 if (event.defaultPrevented) return; 6550 const { activeStore } = globalStore.getState(); 6551 canShowOnHoverRef.current = false; 6552 if (activeStore === store) { 6553 globalStore.setState("activeStore", null); 6554 } 6555 }); 6556 const type = store.useState("type"); 6557 const contentId = store.useState((state) => { 6558 var _a2; 6559 return (_a2 = state.contentElement) == null ? void 0 : _a2.id; 6560 }); 6561 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 6562 "aria-labelledby": type === "label" ? contentId : void 0 6563 }, props), { 6564 onMouseEnter, 6565 onFocusVisible, 6566 onBlur 6567 }); 6568 props = useHovercardAnchor(_3YLGPPWQ_spreadValues({ 6569 store, 6570 showOnHover(event) { 6571 if (!canShowOnHoverRef.current) return false; 6572 if (isFalsyBooleanCallback(showOnHover, event)) return false; 6573 const { activeStore } = globalStore.getState(); 6574 if (!activeStore) return true; 6575 store == null ? void 0 : store.show(); 6576 return false; 6577 } 6578 }, props)); 6579 return props; 6580 } 6581 ); 6582 var TooltipAnchor = forwardRef2(function TooltipAnchor2(props) { 6583 const htmlProps = useTooltipAnchor(props); 6584 return LMDWO4NN_createElement(tooltip_anchor_TagName, htmlProps); 6585 }); 6586 6587 6588 ;// ./node_modules/@ariakit/react-core/esm/__chunks/X7QOZUD3.js 6589 "use client"; 6590 6591 // src/hovercard/utils/polygon.ts 6592 function getEventPoint(event) { 6593 return [event.clientX, event.clientY]; 6594 } 6595 function isPointInPolygon(point, polygon) { 6596 const [x, y] = point; 6597 let inside = false; 6598 const length = polygon.length; 6599 for (let l = length, i = 0, j = l - 1; i < l; j = i++) { 6600 const [xi, yi] = polygon[i]; 6601 const [xj, yj] = polygon[j]; 6602 const [, vy] = polygon[j === 0 ? l - 1 : j - 1] || [0, 0]; 6603 const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi); 6604 if (yj < yi) { 6605 if (y >= yj && y < yi) { 6606 if (where === 0) return true; 6607 if (where > 0) { 6608 if (y === yj) { 6609 if (y > vy) { 6610 inside = !inside; 6611 } 6612 } else { 6613 inside = !inside; 6614 } 6615 } 6616 } 6617 } else if (yi < yj) { 6618 if (y > yi && y <= yj) { 6619 if (where === 0) return true; 6620 if (where < 0) { 6621 if (y === yj) { 6622 if (y < vy) { 6623 inside = !inside; 6624 } 6625 } else { 6626 inside = !inside; 6627 } 6628 } 6629 } 6630 } else if (y === yi && (x >= xj && x <= xi || x >= xi && x <= xj)) { 6631 return true; 6632 } 6633 } 6634 return inside; 6635 } 6636 function getEnterPointPlacement(enterPoint, rect) { 6637 const { top, right, bottom, left } = rect; 6638 const [x, y] = enterPoint; 6639 const placementX = x < left ? "left" : x > right ? "right" : null; 6640 const placementY = y < top ? "top" : y > bottom ? "bottom" : null; 6641 return [placementX, placementY]; 6642 } 6643 function getElementPolygon(element, enterPoint) { 6644 const rect = element.getBoundingClientRect(); 6645 const { top, right, bottom, left } = rect; 6646 const [x, y] = getEnterPointPlacement(enterPoint, rect); 6647 const polygon = [enterPoint]; 6648 if (x) { 6649 if (y !== "top") { 6650 polygon.push([x === "left" ? left : right, top]); 6651 } 6652 polygon.push([x === "left" ? right : left, top]); 6653 polygon.push([x === "left" ? right : left, bottom]); 6654 if (y !== "bottom") { 6655 polygon.push([x === "left" ? left : right, bottom]); 6656 } 6657 } else if (y === "top") { 6658 polygon.push([left, top]); 6659 polygon.push([left, bottom]); 6660 polygon.push([right, bottom]); 6661 polygon.push([right, top]); 6662 } else { 6663 polygon.push([left, bottom]); 6664 polygon.push([left, top]); 6665 polygon.push([right, top]); 6666 polygon.push([right, bottom]); 6667 } 6668 return polygon; 6669 } 6670 6671 6672 6673 ;// ./node_modules/@ariakit/react-core/esm/__chunks/63XF7ACK.js 6674 "use client"; 6675 6676 // src/dialog/utils/is-backdrop.ts 6677 function _63XF7ACK_isBackdrop(element, ...ids) { 6678 if (!element) return false; 6679 const backdrop = element.getAttribute("data-backdrop"); 6680 if (backdrop == null) return false; 6681 if (backdrop === "") return true; 6682 if (backdrop === "true") return true; 6683 if (!ids.length) return true; 6684 return ids.some((id) => backdrop === id); 6685 } 6686 6687 6688 6689 ;// ./node_modules/@ariakit/react-core/esm/__chunks/K2ZF5NU7.js 6690 "use client"; 6691 6692 // src/dialog/utils/orchestrate.ts 6693 var cleanups = /* @__PURE__ */ new WeakMap(); 6694 function orchestrate(element, key, setup) { 6695 if (!cleanups.has(element)) { 6696 cleanups.set(element, /* @__PURE__ */ new Map()); 6697 } 6698 const elementCleanups = cleanups.get(element); 6699 const prevCleanup = elementCleanups.get(key); 6700 if (!prevCleanup) { 6701 elementCleanups.set(key, setup()); 6702 return () => { 6703 var _a; 6704 (_a = elementCleanups.get(key)) == null ? void 0 : _a(); 6705 elementCleanups.delete(key); 6706 }; 6707 } 6708 const cleanup = setup(); 6709 const nextCleanup = () => { 6710 cleanup(); 6711 prevCleanup(); 6712 elementCleanups.delete(key); 6713 }; 6714 elementCleanups.set(key, nextCleanup); 6715 return () => { 6716 const isCurrent = elementCleanups.get(key) === nextCleanup; 6717 if (!isCurrent) return; 6718 cleanup(); 6719 elementCleanups.set(key, prevCleanup); 6720 }; 6721 } 6722 function setAttribute(element, attr, value) { 6723 const setup = () => { 6724 const previousValue = element.getAttribute(attr); 6725 element.setAttribute(attr, value); 6726 return () => { 6727 if (previousValue == null) { 6728 element.removeAttribute(attr); 6729 } else { 6730 element.setAttribute(attr, previousValue); 6731 } 6732 }; 6733 }; 6734 return orchestrate(element, attr, setup); 6735 } 6736 function setProperty(element, property, value) { 6737 const setup = () => { 6738 const exists = property in element; 6739 const previousValue = element[property]; 6740 element[property] = value; 6741 return () => { 6742 if (!exists) { 6743 delete element[property]; 6744 } else { 6745 element[property] = previousValue; 6746 } 6747 }; 6748 }; 6749 return orchestrate(element, property, setup); 6750 } 6751 function assignStyle(element, style) { 6752 if (!element) return () => { 6753 }; 6754 const setup = () => { 6755 const prevStyle = element.style.cssText; 6756 Object.assign(element.style, style); 6757 return () => { 6758 element.style.cssText = prevStyle; 6759 }; 6760 }; 6761 return orchestrate(element, "style", setup); 6762 } 6763 function setCSSProperty(element, property, value) { 6764 if (!element) return () => { 6765 }; 6766 const setup = () => { 6767 const previousValue = element.style.getPropertyValue(property); 6768 element.style.setProperty(property, value); 6769 return () => { 6770 if (previousValue) { 6771 element.style.setProperty(property, previousValue); 6772 } else { 6773 element.style.removeProperty(property); 6774 } 6775 }; 6776 }; 6777 return orchestrate(element, property, setup); 6778 } 6779 6780 6781 6782 ;// ./node_modules/@ariakit/react-core/esm/__chunks/AOUGVQZ3.js 6783 "use client"; 6784 6785 6786 // src/dialog/utils/walk-tree-outside.ts 6787 6788 6789 var ignoreTags = ["SCRIPT", "STYLE"]; 6790 function getSnapshotPropertyName(id) { 6791 return `__ariakit-dialog-snapshot-$id}`; 6792 } 6793 function inSnapshot(id, element) { 6794 const doc = getDocument(element); 6795 const propertyName = getSnapshotPropertyName(id); 6796 if (!doc.body[propertyName]) return true; 6797 do { 6798 if (element === doc.body) return false; 6799 if (element[propertyName]) return true; 6800 if (!element.parentElement) return false; 6801 element = element.parentElement; 6802 } while (true); 6803 } 6804 function isValidElement(id, element, ignoredElements) { 6805 if (ignoreTags.includes(element.tagName)) return false; 6806 if (!inSnapshot(id, element)) return false; 6807 return !ignoredElements.some( 6808 (enabledElement) => enabledElement && contains(element, enabledElement) 6809 ); 6810 } 6811 function AOUGVQZ3_walkTreeOutside(id, elements, callback, ancestorCallback) { 6812 for (let element of elements) { 6813 if (!(element == null ? void 0 : element.isConnected)) continue; 6814 const hasAncestorAlready = elements.some((maybeAncestor) => { 6815 if (!maybeAncestor) return false; 6816 if (maybeAncestor === element) return false; 6817 return maybeAncestor.contains(element); 6818 }); 6819 const doc = getDocument(element); 6820 const originalElement = element; 6821 while (element.parentElement && element !== doc.body) { 6822 ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement, originalElement); 6823 if (!hasAncestorAlready) { 6824 for (const child of element.parentElement.children) { 6825 if (isValidElement(id, child, elements)) { 6826 callback(child, originalElement); 6827 } 6828 } 6829 } 6830 element = element.parentElement; 6831 } 6832 } 6833 } 6834 function createWalkTreeSnapshot(id, elements) { 6835 const { body } = getDocument(elements[0]); 6836 const cleanups = []; 6837 const markElement = (element) => { 6838 cleanups.push(setProperty(element, getSnapshotPropertyName(id), true)); 6839 }; 6840 AOUGVQZ3_walkTreeOutside(id, elements, markElement); 6841 return chain(setProperty(body, getSnapshotPropertyName(id), true), () => { 6842 for (const cleanup of cleanups) { 6843 cleanup(); 6844 } 6845 }); 6846 } 6847 6848 6849 6850 ;// ./node_modules/@ariakit/react-core/esm/__chunks/2PGBN2Y4.js 6851 "use client"; 6852 6853 6854 6855 6856 // src/dialog/utils/mark-tree-outside.ts 6857 6858 function getPropertyName(id = "", ancestor = false) { 6859 return `__ariakit-dialog-$ancestor ? "ancestor" : "outside"}$id ? `-$id}` : ""}`; 6860 } 6861 function markElement(element, id = "") { 6862 return chain( 6863 setProperty(element, getPropertyName(), true), 6864 setProperty(element, getPropertyName(id), true) 6865 ); 6866 } 6867 function markAncestor(element, id = "") { 6868 return chain( 6869 setProperty(element, getPropertyName("", true), true), 6870 setProperty(element, getPropertyName(id, true), true) 6871 ); 6872 } 6873 function isElementMarked(element, id) { 6874 const ancestorProperty = getPropertyName(id, true); 6875 if (element[ancestorProperty]) return true; 6876 const elementProperty = getPropertyName(id); 6877 do { 6878 if (element[elementProperty]) return true; 6879 if (!element.parentElement) return false; 6880 element = element.parentElement; 6881 } while (true); 6882 } 6883 function markTreeOutside(id, elements) { 6884 const cleanups = []; 6885 const ids = elements.map((el) => el == null ? void 0 : el.id); 6886 AOUGVQZ3_walkTreeOutside( 6887 id, 6888 elements, 6889 (element) => { 6890 if (_63XF7ACK_isBackdrop(element, ...ids)) return; 6891 cleanups.unshift(markElement(element, id)); 6892 }, 6893 (ancestor, element) => { 6894 const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== id; 6895 if (isAnotherDialogAncestor) return; 6896 cleanups.unshift(markAncestor(ancestor, id)); 6897 } 6898 ); 6899 const restoreAccessibilityTree = () => { 6900 for (const cleanup of cleanups) { 6901 cleanup(); 6902 } 6903 }; 6904 return restoreAccessibilityTree; 6905 } 6906 6907 6908 6909 ;// external "ReactDOM" 6910 const external_ReactDOM_namespaceObject = window["ReactDOM"]; 6911 ;// ./node_modules/@ariakit/react-core/esm/__chunks/VGCJ63VH.js 6912 "use client"; 6913 6914 6915 6916 6917 6918 6919 6920 // src/disclosure/disclosure-content.tsx 6921 6922 6923 6924 6925 var VGCJ63VH_TagName = "div"; 6926 function afterTimeout(timeoutMs, cb) { 6927 const timeoutId = setTimeout(cb, timeoutMs); 6928 return () => clearTimeout(timeoutId); 6929 } 6930 function VGCJ63VH_afterPaint(cb) { 6931 let raf = requestAnimationFrame(() => { 6932 raf = requestAnimationFrame(cb); 6933 }); 6934 return () => cancelAnimationFrame(raf); 6935 } 6936 function parseCSSTime(...times) { 6937 return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => { 6938 const multiplier = currentTimeString.endsWith("ms") ? 1 : 1e3; 6939 const currentTime = Number.parseFloat(currentTimeString || "0s") * multiplier; 6940 if (currentTime > longestTime) return currentTime; 6941 return longestTime; 6942 }, 0); 6943 } 6944 function isHidden(mounted, hidden, alwaysVisible) { 6945 return !alwaysVisible && hidden !== false && (!mounted || !!hidden); 6946 } 6947 var useDisclosureContent = createHook(function useDisclosureContent2(_a) { 6948 var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]); 6949 const context = useDisclosureProviderContext(); 6950 store = store || context; 6951 invariant( 6952 store, 6953 false && 0 6954 ); 6955 const ref = (0,external_React_.useRef)(null); 6956 const id = useId(props.id); 6957 const [transition, setTransition] = (0,external_React_.useState)(null); 6958 const open = store.useState("open"); 6959 const mounted = store.useState("mounted"); 6960 const animated = store.useState("animated"); 6961 const contentElement = store.useState("contentElement"); 6962 const otherElement = useStoreState(store.disclosure, "contentElement"); 6963 useSafeLayoutEffect(() => { 6964 if (!ref.current) return; 6965 store == null ? void 0 : store.setContentElement(ref.current); 6966 }, [store]); 6967 useSafeLayoutEffect(() => { 6968 let previousAnimated; 6969 store == null ? void 0 : store.setState("animated", (animated2) => { 6970 previousAnimated = animated2; 6971 return true; 6972 }); 6973 return () => { 6974 if (previousAnimated === void 0) return; 6975 store == null ? void 0 : store.setState("animated", previousAnimated); 6976 }; 6977 }, [store]); 6978 useSafeLayoutEffect(() => { 6979 if (!animated) return; 6980 if (!(contentElement == null ? void 0 : contentElement.isConnected)) { 6981 setTransition(null); 6982 return; 6983 } 6984 return VGCJ63VH_afterPaint(() => { 6985 setTransition(open ? "enter" : mounted ? "leave" : null); 6986 }); 6987 }, [animated, contentElement, open, mounted]); 6988 useSafeLayoutEffect(() => { 6989 if (!store) return; 6990 if (!animated) return; 6991 if (!transition) return; 6992 if (!contentElement) return; 6993 const stopAnimation = () => store == null ? void 0 : store.setState("animating", false); 6994 const stopAnimationSync = () => (0,external_ReactDOM_namespaceObject.flushSync)(stopAnimation); 6995 if (transition === "leave" && open) return; 6996 if (transition === "enter" && !open) return; 6997 if (typeof animated === "number") { 6998 const timeout2 = animated; 6999 return afterTimeout(timeout2, stopAnimationSync); 7000 } 7001 const { 7002 transitionDuration, 7003 animationDuration, 7004 transitionDelay, 7005 animationDelay 7006 } = getComputedStyle(contentElement); 7007 const { 7008 transitionDuration: transitionDuration2 = "0", 7009 animationDuration: animationDuration2 = "0", 7010 transitionDelay: transitionDelay2 = "0", 7011 animationDelay: animationDelay2 = "0" 7012 } = otherElement ? getComputedStyle(otherElement) : {}; 7013 const delay = parseCSSTime( 7014 transitionDelay, 7015 animationDelay, 7016 transitionDelay2, 7017 animationDelay2 7018 ); 7019 const duration = parseCSSTime( 7020 transitionDuration, 7021 animationDuration, 7022 transitionDuration2, 7023 animationDuration2 7024 ); 7025 const timeout = delay + duration; 7026 if (!timeout) { 7027 if (transition === "enter") { 7028 store.setState("animated", false); 7029 } 7030 stopAnimation(); 7031 return; 7032 } 7033 const frameRate = 1e3 / 60; 7034 const maxTimeout = Math.max(timeout - frameRate, 0); 7035 return afterTimeout(maxTimeout, stopAnimationSync); 7036 }, [store, animated, contentElement, otherElement, open, transition]); 7037 props = useWrapElement( 7038 props, 7039 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: element }), 7040 [store] 7041 ); 7042 const hidden = isHidden(mounted, props.hidden, alwaysVisible); 7043 const styleProp = props.style; 7044 const style = (0,external_React_.useMemo)(() => { 7045 if (hidden) { 7046 return _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, styleProp), { display: "none" }); 7047 } 7048 return styleProp; 7049 }, [hidden, styleProp]); 7050 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 7051 id, 7052 "data-open": open || void 0, 7053 "data-enter": transition === "enter" || void 0, 7054 "data-leave": transition === "leave" || void 0, 7055 hidden 7056 }, props), { 7057 ref: useMergeRefs(id ? store.setContentElement : null, ref, props.ref), 7058 style 7059 }); 7060 return removeUndefinedValues(props); 7061 }); 7062 var DisclosureContentImpl = forwardRef2(function DisclosureContentImpl2(props) { 7063 const htmlProps = useDisclosureContent(props); 7064 return LMDWO4NN_createElement(VGCJ63VH_TagName, htmlProps); 7065 }); 7066 var DisclosureContent = forwardRef2(function DisclosureContent2(_a) { 7067 var _b = _a, { 7068 unmountOnHide 7069 } = _b, props = __objRest(_b, [ 7070 "unmountOnHide" 7071 ]); 7072 const context = useDisclosureProviderContext(); 7073 const store = props.store || context; 7074 const mounted = useStoreState( 7075 store, 7076 (state) => !unmountOnHide || (state == null ? void 0 : state.mounted) 7077 ); 7078 if (mounted === false) return null; 7079 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DisclosureContentImpl, _3YLGPPWQ_spreadValues({}, props)); 7080 }); 7081 7082 7083 7084 ;// ./node_modules/@ariakit/react-core/esm/__chunks/63FEHJZV.js 7085 "use client"; 7086 7087 7088 7089 7090 7091 7092 7093 7094 // src/dialog/dialog-backdrop.tsx 7095 7096 7097 function DialogBackdrop({ 7098 store, 7099 backdrop, 7100 alwaysVisible, 7101 hidden 7102 }) { 7103 const ref = (0,external_React_.useRef)(null); 7104 const disclosure = useDisclosureStore({ disclosure: store }); 7105 const contentElement = useStoreState(store, "contentElement"); 7106 (0,external_React_.useEffect)(() => { 7107 const backdrop2 = ref.current; 7108 const dialog = contentElement; 7109 if (!backdrop2) return; 7110 if (!dialog) return; 7111 backdrop2.style.zIndex = getComputedStyle(dialog).zIndex; 7112 }, [contentElement]); 7113 useSafeLayoutEffect(() => { 7114 const id = contentElement == null ? void 0 : contentElement.id; 7115 if (!id) return; 7116 const backdrop2 = ref.current; 7117 if (!backdrop2) return; 7118 return markAncestor(backdrop2, id); 7119 }, [contentElement]); 7120 const props = useDisclosureContent({ 7121 ref, 7122 store: disclosure, 7123 role: "presentation", 7124 "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "", 7125 alwaysVisible, 7126 hidden: hidden != null ? hidden : void 0, 7127 style: { 7128 position: "fixed", 7129 top: 0, 7130 right: 0, 7131 bottom: 0, 7132 left: 0 7133 } 7134 }); 7135 if (!backdrop) return null; 7136 if ((0,external_React_.isValidElement)(backdrop)) { 7137 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { render: backdrop })); 7138 } 7139 const Component = typeof backdrop !== "boolean" ? backdrop : "div"; 7140 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {}) })); 7141 } 7142 7143 7144 7145 ;// ./node_modules/@ariakit/react-core/esm/__chunks/IGR4SXG2.js 7146 "use client"; 7147 7148 // src/dialog/utils/is-focus-trap.ts 7149 function isFocusTrap(element, ...ids) { 7150 if (!element) return false; 7151 const attr = element.getAttribute("data-focus-trap"); 7152 if (attr == null) return false; 7153 if (!ids.length) return true; 7154 if (attr === "") return false; 7155 return ids.some((id) => attr === id); 7156 } 7157 7158 7159 7160 ;// ./node_modules/@ariakit/react-core/esm/__chunks/ESSM74HH.js 7161 "use client"; 7162 7163 7164 7165 7166 // src/dialog/utils/disable-accessibility-tree-outside.ts 7167 function hideElementFromAccessibilityTree(element) { 7168 return setAttribute(element, "aria-hidden", "true"); 7169 } 7170 function disableAccessibilityTreeOutside(id, elements) { 7171 const cleanups = []; 7172 const ids = elements.map((el) => el == null ? void 0 : el.id); 7173 walkTreeOutside(id, elements, (element) => { 7174 if (isBackdrop(element, ...ids)) return; 7175 cleanups.unshift(hideElementFromAccessibilityTree(element)); 7176 }); 7177 const restoreAccessibilityTree = () => { 7178 for (const cleanup of cleanups) { 7179 cleanup(); 7180 } 7181 }; 7182 return restoreAccessibilityTree; 7183 } 7184 7185 7186 7187 ;// ./node_modules/@ariakit/react-core/esm/__chunks/677M2CI3.js 7188 "use client"; 7189 7190 // src/dialog/utils/supports-inert.ts 7191 function supportsInert() { 7192 return "inert" in HTMLElement.prototype; 7193 } 7194 7195 7196 7197 ;// ./node_modules/@ariakit/react-core/esm/__chunks/KZAQFFOU.js 7198 "use client"; 7199 7200 7201 7202 7203 7204 7205 7206 // src/dialog/utils/disable-tree.ts 7207 7208 7209 7210 function disableTree(element, ignoredElements) { 7211 if (!("style" in element)) return noop; 7212 if (supportsInert()) { 7213 return setProperty(element, "inert", true); 7214 } 7215 const tabbableElements = getAllTabbableIn(element, true); 7216 const enableElements = tabbableElements.map((element2) => { 7217 if (ignoredElements == null ? void 0 : ignoredElements.some((el) => el && contains(el, element2))) return noop; 7218 const restoreFocusMethod = orchestrate(element2, "focus", () => { 7219 element2.focus = noop; 7220 return () => { 7221 delete element2.focus; 7222 }; 7223 }); 7224 return chain(setAttribute(element2, "tabindex", "-1"), restoreFocusMethod); 7225 }); 7226 return chain( 7227 ...enableElements, 7228 hideElementFromAccessibilityTree(element), 7229 assignStyle(element, { 7230 pointerEvents: "none", 7231 userSelect: "none", 7232 cursor: "default" 7233 }) 7234 ); 7235 } 7236 function disableTreeOutside(id, elements) { 7237 const cleanups = []; 7238 const ids = elements.map((el) => el == null ? void 0 : el.id); 7239 AOUGVQZ3_walkTreeOutside( 7240 id, 7241 elements, 7242 (element) => { 7243 if (_63XF7ACK_isBackdrop(element, ...ids)) return; 7244 if (isFocusTrap(element, ...ids)) return; 7245 cleanups.unshift(disableTree(element, elements)); 7246 }, 7247 (element) => { 7248 if (!element.hasAttribute("role")) return; 7249 if (elements.some((el) => el && contains(el, element))) return; 7250 cleanups.unshift(setAttribute(element, "role", "none")); 7251 } 7252 ); 7253 const restoreTreeOutside = () => { 7254 for (const cleanup of cleanups) { 7255 cleanup(); 7256 } 7257 }; 7258 return restoreTreeOutside; 7259 } 7260 7261 7262 7263 ;// ./node_modules/@ariakit/react-core/esm/__chunks/YKJECYU7.js 7264 "use client"; 7265 7266 7267 // src/dialog/utils/use-root-dialog.ts 7268 7269 7270 7271 function useRootDialog({ 7272 attribute, 7273 contentId, 7274 contentElement, 7275 enabled 7276 }) { 7277 const [updated, retry] = useForceUpdate(); 7278 const isRootDialog = (0,external_React_.useCallback)(() => { 7279 if (!enabled) return false; 7280 if (!contentElement) return false; 7281 const { body } = getDocument(contentElement); 7282 const id = body.getAttribute(attribute); 7283 return !id || id === contentId; 7284 }, [updated, enabled, contentElement, attribute, contentId]); 7285 (0,external_React_.useEffect)(() => { 7286 if (!enabled) return; 7287 if (!contentId) return; 7288 if (!contentElement) return; 7289 const { body } = getDocument(contentElement); 7290 if (isRootDialog()) { 7291 body.setAttribute(attribute, contentId); 7292 return () => body.removeAttribute(attribute); 7293 } 7294 const observer = new MutationObserver(() => (0,external_ReactDOM_namespaceObject.flushSync)(retry)); 7295 observer.observe(body, { attributeFilter: [attribute] }); 7296 return () => observer.disconnect(); 7297 }, [updated, enabled, contentId, contentElement, isRootDialog, attribute]); 7298 return isRootDialog; 7299 } 7300 7301 7302 7303 ;// ./node_modules/@ariakit/react-core/esm/__chunks/BGQ3KQ5M.js 7304 "use client"; 7305 7306 7307 7308 // src/dialog/utils/use-prevent-body-scroll.ts 7309 7310 7311 7312 7313 function getPaddingProperty(documentElement) { 7314 const documentLeft = documentElement.getBoundingClientRect().left; 7315 const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft; 7316 return scrollbarX ? "paddingLeft" : "paddingRight"; 7317 } 7318 function usePreventBodyScroll(contentElement, contentId, enabled) { 7319 const isRootDialog = useRootDialog({ 7320 attribute: "data-dialog-prevent-body-scroll", 7321 contentElement, 7322 contentId, 7323 enabled 7324 }); 7325 (0,external_React_.useEffect)(() => { 7326 if (!isRootDialog()) return; 7327 if (!contentElement) return; 7328 const doc = getDocument(contentElement); 7329 const win = getWindow(contentElement); 7330 const { documentElement, body } = doc; 7331 const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width"); 7332 const scrollbarWidth = cssScrollbarWidth ? Number.parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth; 7333 const setScrollbarWidthProperty = () => setCSSProperty( 7334 documentElement, 7335 "--scrollbar-width", 7336 `$scrollbarWidth}px` 7337 ); 7338 const paddingProperty = getPaddingProperty(documentElement); 7339 const setStyle = () => assignStyle(body, { 7340 overflow: "hidden", 7341 [paddingProperty]: `$scrollbarWidth}px` 7342 }); 7343 const setIOSStyle = () => { 7344 var _a, _b; 7345 const { scrollX, scrollY, visualViewport } = win; 7346 const offsetLeft = (_a = visualViewport == null ? void 0 : visualViewport.offsetLeft) != null ? _a : 0; 7347 const offsetTop = (_b = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _b : 0; 7348 const restoreStyle = assignStyle(body, { 7349 position: "fixed", 7350 overflow: "hidden", 7351 top: `${-(scrollY - Math.floor(offsetTop))}px`, 7352 left: `${-(scrollX - Math.floor(offsetLeft))}px`, 7353 right: "0", 7354 [paddingProperty]: `$scrollbarWidth}px` 7355 }); 7356 return () => { 7357 restoreStyle(); 7358 if (true) { 7359 win.scrollTo({ left: scrollX, top: scrollY, behavior: "instant" }); 7360 } 7361 }; 7362 }; 7363 const isIOS = isApple() && !isMac(); 7364 return chain( 7365 setScrollbarWidthProperty(), 7366 isIOS ? setIOSStyle() : setStyle() 7367 ); 7368 }, [isRootDialog, contentElement]); 7369 } 7370 7371 7372 7373 ;// ./node_modules/@ariakit/react-core/esm/__chunks/TOU75OXH.js 7374 "use client"; 7375 7376 7377 // src/dialog/utils/use-nested-dialogs.tsx 7378 7379 7380 7381 7382 var NestedDialogsContext = (0,external_React_.createContext)({}); 7383 function useNestedDialogs(store) { 7384 const context = (0,external_React_.useContext)(NestedDialogsContext); 7385 const [dialogs, setDialogs] = (0,external_React_.useState)([]); 7386 const add = (0,external_React_.useCallback)( 7387 (dialog) => { 7388 var _a; 7389 setDialogs((dialogs2) => [...dialogs2, dialog]); 7390 return chain((_a = context.add) == null ? void 0 : _a.call(context, dialog), () => { 7391 setDialogs((dialogs2) => dialogs2.filter((d) => d !== dialog)); 7392 }); 7393 }, 7394 [context] 7395 ); 7396 useSafeLayoutEffect(() => { 7397 return sync(store, ["open", "contentElement"], (state) => { 7398 var _a; 7399 if (!state.open) return; 7400 if (!state.contentElement) return; 7401 return (_a = context.add) == null ? void 0 : _a.call(context, store); 7402 }); 7403 }, [store, context]); 7404 const providerValue = (0,external_React_.useMemo)(() => ({ store, add }), [store, add]); 7405 const wrapElement = (0,external_React_.useCallback)( 7406 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(NestedDialogsContext.Provider, { value: providerValue, children: element }), 7407 [providerValue] 7408 ); 7409 return { wrapElement, nestedDialogs: dialogs }; 7410 } 7411 7412 7413 7414 ;// ./node_modules/@ariakit/react-core/esm/__chunks/HLTQOHKZ.js 7415 "use client"; 7416 7417 // src/dialog/utils/use-previous-mouse-down-ref.ts 7418 7419 7420 function usePreviousMouseDownRef(enabled) { 7421 const previousMouseDownRef = (0,external_React_.useRef)(); 7422 (0,external_React_.useEffect)(() => { 7423 if (!enabled) { 7424 previousMouseDownRef.current = null; 7425 return; 7426 } 7427 const onMouseDown = (event) => { 7428 previousMouseDownRef.current = event.target; 7429 }; 7430 return addGlobalEventListener("mousedown", onMouseDown, true); 7431 }, [enabled]); 7432 return previousMouseDownRef; 7433 } 7434 7435 7436 7437 ;// ./node_modules/@ariakit/react-core/esm/__chunks/WBDYNH73.js 7438 "use client"; 7439 7440 7441 7442 7443 7444 7445 7446 // src/dialog/utils/use-hide-on-interact-outside.ts 7447 7448 7449 7450 function isInDocument(target) { 7451 if (target.tagName === "HTML") return true; 7452 return contains(getDocument(target).body, target); 7453 } 7454 function isDisclosure(disclosure, target) { 7455 if (!disclosure) return false; 7456 if (contains(disclosure, target)) return true; 7457 const activeId = target.getAttribute("aria-activedescendant"); 7458 if (activeId) { 7459 const activeElement = getDocument(disclosure).getElementById(activeId); 7460 if (activeElement) { 7461 return contains(disclosure, activeElement); 7462 } 7463 } 7464 return false; 7465 } 7466 function isMouseEventOnDialog(event, dialog) { 7467 if (!("clientY" in event)) return false; 7468 const rect = dialog.getBoundingClientRect(); 7469 if (rect.width === 0 || rect.height === 0) return false; 7470 return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width; 7471 } 7472 function useEventOutside({ 7473 store, 7474 type, 7475 listener, 7476 capture, 7477 domReady 7478 }) { 7479 const callListener = useEvent(listener); 7480 const open = useStoreState(store, "open"); 7481 const focusedRef = (0,external_React_.useRef)(false); 7482 useSafeLayoutEffect(() => { 7483 if (!open) return; 7484 if (!domReady) return; 7485 const { contentElement } = store.getState(); 7486 if (!contentElement) return; 7487 const onFocus = () => { 7488 focusedRef.current = true; 7489 }; 7490 contentElement.addEventListener("focusin", onFocus, true); 7491 return () => contentElement.removeEventListener("focusin", onFocus, true); 7492 }, [store, open, domReady]); 7493 (0,external_React_.useEffect)(() => { 7494 if (!open) return; 7495 const onEvent = (event) => { 7496 const { contentElement, disclosureElement } = store.getState(); 7497 const target = event.target; 7498 if (!contentElement) return; 7499 if (!target) return; 7500 if (!isInDocument(target)) return; 7501 if (contains(contentElement, target)) return; 7502 if (isDisclosure(disclosureElement, target)) return; 7503 if (target.hasAttribute("data-focus-trap")) return; 7504 if (isMouseEventOnDialog(event, contentElement)) return; 7505 const focused = focusedRef.current; 7506 if (focused && !isElementMarked(target, contentElement.id)) return; 7507 if (isSafariFocusAncestor(target)) return; 7508 callListener(event); 7509 }; 7510 return addGlobalEventListener(type, onEvent, capture); 7511 }, [open, capture]); 7512 } 7513 function shouldHideOnInteractOutside(hideOnInteractOutside, event) { 7514 if (typeof hideOnInteractOutside === "function") { 7515 return hideOnInteractOutside(event); 7516 } 7517 return !!hideOnInteractOutside; 7518 } 7519 function useHideOnInteractOutside(store, hideOnInteractOutside, domReady) { 7520 const open = useStoreState(store, "open"); 7521 const previousMouseDownRef = usePreviousMouseDownRef(open); 7522 const props = { store, domReady, capture: true }; 7523 useEventOutside(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 7524 type: "click", 7525 listener: (event) => { 7526 const { contentElement } = store.getState(); 7527 const previousMouseDown = previousMouseDownRef.current; 7528 if (!previousMouseDown) return; 7529 if (!isVisible(previousMouseDown)) return; 7530 if (!isElementMarked(previousMouseDown, contentElement == null ? void 0 : contentElement.id)) return; 7531 if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return; 7532 store.hide(); 7533 } 7534 })); 7535 useEventOutside(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 7536 type: "focusin", 7537 listener: (event) => { 7538 const { contentElement } = store.getState(); 7539 if (!contentElement) return; 7540 if (event.target === getDocument(contentElement)) return; 7541 if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return; 7542 store.hide(); 7543 } 7544 })); 7545 useEventOutside(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 7546 type: "contextmenu", 7547 listener: (event) => { 7548 if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) return; 7549 store.hide(); 7550 } 7551 })); 7552 } 7553 7554 7555 7556 ;// ./node_modules/@ariakit/react-core/esm/__chunks/6GXEOXGT.js 7557 "use client"; 7558 7559 // src/dialog/utils/prepend-hidden-dismiss.ts 7560 7561 function prependHiddenDismiss(container, onClick) { 7562 const document = getDocument(container); 7563 const button = document.createElement("button"); 7564 button.type = "button"; 7565 button.tabIndex = -1; 7566 button.textContent = "Dismiss popup"; 7567 Object.assign(button.style, { 7568 border: "0px", 7569 clip: "rect(0 0 0 0)", 7570 height: "1px", 7571 margin: "-1px", 7572 overflow: "hidden", 7573 padding: "0px", 7574 position: "absolute", 7575 whiteSpace: "nowrap", 7576 width: "1px" 7577 }); 7578 button.addEventListener("click", onClick); 7579 container.prepend(button); 7580 const removeHiddenDismiss = () => { 7581 button.removeEventListener("click", onClick); 7582 button.remove(); 7583 }; 7584 return removeHiddenDismiss; 7585 } 7586 7587 7588 7589 ;// ./node_modules/@ariakit/react-core/esm/__chunks/ZWYATQFU.js 7590 "use client"; 7591 7592 7593 7594 7595 7596 // src/focusable/focusable-container.tsx 7597 7598 var ZWYATQFU_TagName = "div"; 7599 var useFocusableContainer = createHook(function useFocusableContainer2(_a) { 7600 var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]); 7601 props = useWrapElement( 7602 props, 7603 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }), 7604 [autoFocusOnShow] 7605 ); 7606 return props; 7607 }); 7608 var FocusableContainer = forwardRef2(function FocusableContainer2(props) { 7609 const htmlProps = useFocusableContainer(props); 7610 return LMDWO4NN_createElement(ZWYATQFU_TagName, htmlProps); 7611 }); 7612 7613 7614 7615 ;// ./node_modules/@ariakit/react-core/esm/__chunks/CZ4GFWYL.js 7616 "use client"; 7617 7618 // src/heading/heading-context.tsx 7619 7620 var HeadingContext = (0,external_React_.createContext)(0); 7621 7622 7623 7624 ;// ./node_modules/@ariakit/react-core/esm/__chunks/5M6RIVE2.js 7625 "use client"; 7626 7627 7628 // src/heading/heading-level.tsx 7629 7630 7631 function HeadingLevel({ level, children }) { 7632 const contextLevel = (0,external_React_.useContext)(HeadingContext); 7633 const nextLevel = Math.max( 7634 Math.min(level || contextLevel + 1, 6), 7635 1 7636 ); 7637 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingContext.Provider, { value: nextLevel, children }); 7638 } 7639 7640 7641 7642 ;// ./node_modules/@ariakit/react-core/esm/__chunks/XX67R432.js 7643 "use client"; 7644 7645 7646 7647 // src/visually-hidden/visually-hidden.tsx 7648 var XX67R432_TagName = "span"; 7649 var useVisuallyHidden = createHook( 7650 function useVisuallyHidden2(props) { 7651 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 7652 style: _3YLGPPWQ_spreadValues({ 7653 border: 0, 7654 clip: "rect(0 0 0 0)", 7655 height: "1px", 7656 margin: "-1px", 7657 overflow: "hidden", 7658 padding: 0, 7659 position: "absolute", 7660 whiteSpace: "nowrap", 7661 width: "1px" 7662 }, props.style) 7663 }); 7664 return props; 7665 } 7666 ); 7667 var VisuallyHidden = forwardRef2(function VisuallyHidden2(props) { 7668 const htmlProps = useVisuallyHidden(props); 7669 return LMDWO4NN_createElement(XX67R432_TagName, htmlProps); 7670 }); 7671 7672 7673 7674 ;// ./node_modules/@ariakit/react-core/esm/__chunks/W3VI7GFU.js 7675 "use client"; 7676 7677 7678 7679 7680 // src/focus-trap/focus-trap.tsx 7681 var W3VI7GFU_TagName = "span"; 7682 var useFocusTrap = createHook( 7683 function useFocusTrap2(props) { 7684 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 7685 "data-focus-trap": "", 7686 tabIndex: 0, 7687 "aria-hidden": true 7688 }, props), { 7689 style: _3YLGPPWQ_spreadValues({ 7690 // Prevents unintended scroll jumps. 7691 position: "fixed", 7692 top: 0, 7693 left: 0 7694 }, props.style) 7695 }); 7696 props = useVisuallyHidden(props); 7697 return props; 7698 } 7699 ); 7700 var FocusTrap = forwardRef2(function FocusTrap2(props) { 7701 const htmlProps = useFocusTrap(props); 7702 return LMDWO4NN_createElement(W3VI7GFU_TagName, htmlProps); 7703 }); 7704 7705 7706 7707 ;// ./node_modules/@ariakit/react-core/esm/__chunks/AOQQTIBO.js 7708 "use client"; 7709 7710 // src/portal/portal-context.tsx 7711 7712 var PortalContext = (0,external_React_.createContext)(null); 7713 7714 7715 7716 ;// ./node_modules/@ariakit/react-core/esm/__chunks/O37CNYMR.js 7717 "use client"; 7718 7719 7720 7721 7722 7723 7724 7725 // src/portal/portal.tsx 7726 7727 7728 7729 7730 7731 7732 var O37CNYMR_TagName = "div"; 7733 function getRootElement(element) { 7734 return getDocument(element).body; 7735 } 7736 function getPortalElement(element, portalElement) { 7737 if (!portalElement) { 7738 return getDocument(element).createElement("div"); 7739 } 7740 if (typeof portalElement === "function") { 7741 return portalElement(element); 7742 } 7743 return portalElement; 7744 } 7745 function getRandomId(prefix = "id") { 7746 return `$prefix ? `$prefix}-` : ""}$Math.random().toString(36).slice(2, 8)}`; 7747 } 7748 function queueFocus(element) { 7749 queueMicrotask(() => { 7750 element == null ? void 0 : element.focus(); 7751 }); 7752 } 7753 var usePortal = createHook(function usePortal2(_a) { 7754 var _b = _a, { 7755 preserveTabOrder, 7756 preserveTabOrderAnchor, 7757 portalElement, 7758 portalRef, 7759 portal = true 7760 } = _b, props = __objRest(_b, [ 7761 "preserveTabOrder", 7762 "preserveTabOrderAnchor", 7763 "portalElement", 7764 "portalRef", 7765 "portal" 7766 ]); 7767 const ref = (0,external_React_.useRef)(null); 7768 const refProp = useMergeRefs(ref, props.ref); 7769 const context = (0,external_React_.useContext)(PortalContext); 7770 const [portalNode, setPortalNode] = (0,external_React_.useState)(null); 7771 const [anchorPortalNode, setAnchorPortalNode] = (0,external_React_.useState)( 7772 null 7773 ); 7774 const outerBeforeRef = (0,external_React_.useRef)(null); 7775 const innerBeforeRef = (0,external_React_.useRef)(null); 7776 const innerAfterRef = (0,external_React_.useRef)(null); 7777 const outerAfterRef = (0,external_React_.useRef)(null); 7778 useSafeLayoutEffect(() => { 7779 const element = ref.current; 7780 if (!element || !portal) { 7781 setPortalNode(null); 7782 return; 7783 } 7784 const portalEl = getPortalElement(element, portalElement); 7785 if (!portalEl) { 7786 setPortalNode(null); 7787 return; 7788 } 7789 const isPortalInDocument = portalEl.isConnected; 7790 if (!isPortalInDocument) { 7791 const rootElement = context || getRootElement(element); 7792 rootElement.appendChild(portalEl); 7793 } 7794 if (!portalEl.id) { 7795 portalEl.id = element.id ? `portal/$element.id}` : getRandomId(); 7796 } 7797 setPortalNode(portalEl); 7798 setRef(portalRef, portalEl); 7799 if (isPortalInDocument) return; 7800 return () => { 7801 portalEl.remove(); 7802 setRef(portalRef, null); 7803 }; 7804 }, [portal, portalElement, context, portalRef]); 7805 useSafeLayoutEffect(() => { 7806 if (!portal) return; 7807 if (!preserveTabOrder) return; 7808 if (!preserveTabOrderAnchor) return; 7809 const doc = getDocument(preserveTabOrderAnchor); 7810 const element = doc.createElement("span"); 7811 element.style.position = "fixed"; 7812 preserveTabOrderAnchor.insertAdjacentElement("afterend", element); 7813 setAnchorPortalNode(element); 7814 return () => { 7815 element.remove(); 7816 setAnchorPortalNode(null); 7817 }; 7818 }, [portal, preserveTabOrder, preserveTabOrderAnchor]); 7819 (0,external_React_.useEffect)(() => { 7820 if (!portalNode) return; 7821 if (!preserveTabOrder) return; 7822 let raf = 0; 7823 const onFocus = (event) => { 7824 if (!isFocusEventOutside(event)) return; 7825 const focusing = event.type === "focusin"; 7826 cancelAnimationFrame(raf); 7827 if (focusing) { 7828 return restoreFocusIn(portalNode); 7829 } 7830 raf = requestAnimationFrame(() => { 7831 disableFocusIn(portalNode, true); 7832 }); 7833 }; 7834 portalNode.addEventListener("focusin", onFocus, true); 7835 portalNode.addEventListener("focusout", onFocus, true); 7836 return () => { 7837 cancelAnimationFrame(raf); 7838 portalNode.removeEventListener("focusin", onFocus, true); 7839 portalNode.removeEventListener("focusout", onFocus, true); 7840 }; 7841 }, [portalNode, preserveTabOrder]); 7842 props = useWrapElement( 7843 props, 7844 (element) => { 7845 element = // While the portal node is not in the DOM, we need to pass the 7846 // current context to the portal context, otherwise it's going to 7847 // reset to the body element on nested portals. 7848 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PortalContext.Provider, { value: portalNode || context, children: element }); 7849 if (!portal) return element; 7850 if (!portalNode) { 7851 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 7852 "span", 7853 { 7854 ref: refProp, 7855 id: props.id, 7856 style: { position: "fixed" }, 7857 hidden: true 7858 } 7859 ); 7860 } 7861 element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ 7862 preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 7863 FocusTrap, 7864 { 7865 ref: innerBeforeRef, 7866 "data-focus-trap": props.id, 7867 className: "__focus-trap-inner-before", 7868 onFocus: (event) => { 7869 if (isFocusEventOutside(event, portalNode)) { 7870 queueFocus(getNextTabbable()); 7871 } else { 7872 queueFocus(outerBeforeRef.current); 7873 } 7874 } 7875 } 7876 ), 7877 element, 7878 preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 7879 FocusTrap, 7880 { 7881 ref: innerAfterRef, 7882 "data-focus-trap": props.id, 7883 className: "__focus-trap-inner-after", 7884 onFocus: (event) => { 7885 if (isFocusEventOutside(event, portalNode)) { 7886 queueFocus(getPreviousTabbable()); 7887 } else { 7888 queueFocus(outerAfterRef.current); 7889 } 7890 } 7891 } 7892 ) 7893 ] }); 7894 if (portalNode) { 7895 element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode); 7896 } 7897 let preserveTabOrderElement = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ 7898 preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 7899 FocusTrap, 7900 { 7901 ref: outerBeforeRef, 7902 "data-focus-trap": props.id, 7903 className: "__focus-trap-outer-before", 7904 onFocus: (event) => { 7905 const fromOuter = event.relatedTarget === outerAfterRef.current; 7906 if (!fromOuter && isFocusEventOutside(event, portalNode)) { 7907 queueFocus(innerBeforeRef.current); 7908 } else { 7909 queueFocus(getPreviousTabbable()); 7910 } 7911 } 7912 } 7913 ), 7914 preserveTabOrder && // We're using position: fixed here so that the browser doesn't 7915 // add margin to the element when setting gap on a parent element. 7916 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }), 7917 preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 7918 FocusTrap, 7919 { 7920 ref: outerAfterRef, 7921 "data-focus-trap": props.id, 7922 className: "__focus-trap-outer-after", 7923 onFocus: (event) => { 7924 if (isFocusEventOutside(event, portalNode)) { 7925 queueFocus(innerAfterRef.current); 7926 } else { 7927 const nextTabbable = getNextTabbable(); 7928 if (nextTabbable === innerBeforeRef.current) { 7929 requestAnimationFrame(() => { 7930 var _a2; 7931 return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus(); 7932 }); 7933 return; 7934 } 7935 queueFocus(nextTabbable); 7936 } 7937 } 7938 } 7939 ) 7940 ] }); 7941 if (anchorPortalNode && preserveTabOrder) { 7942 preserveTabOrderElement = (0,external_ReactDOM_namespaceObject.createPortal)( 7943 preserveTabOrderElement, 7944 anchorPortalNode 7945 ); 7946 } 7947 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ 7948 preserveTabOrderElement, 7949 element 7950 ] }); 7951 }, 7952 [portalNode, context, portal, props.id, preserveTabOrder, anchorPortalNode] 7953 ); 7954 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 7955 ref: refProp 7956 }); 7957 return props; 7958 }); 7959 var Portal = forwardRef2(function Portal2(props) { 7960 const htmlProps = usePortal(props); 7961 return LMDWO4NN_createElement(O37CNYMR_TagName, htmlProps); 7962 }); 7963 7964 7965 7966 ;// ./node_modules/@ariakit/react-core/esm/__chunks/JC64G2H7.js 7967 "use client"; 7968 7969 7970 7971 7972 7973 7974 7975 7976 7977 7978 7979 7980 7981 7982 7983 7984 7985 7986 7987 7988 7989 // src/dialog/dialog.tsx 7990 7991 7992 7993 7994 7995 7996 7997 var JC64G2H7_TagName = "div"; 7998 var JC64G2H7_isSafariBrowser = isSafari(); 7999 function isAlreadyFocusingAnotherElement(dialog) { 8000 const activeElement = getActiveElement(); 8001 if (!activeElement) return false; 8002 if (dialog && contains(dialog, activeElement)) return false; 8003 if (isFocusable(activeElement)) return true; 8004 return false; 8005 } 8006 function getElementFromProp(prop, focusable = false) { 8007 if (!prop) return null; 8008 const element = "current" in prop ? prop.current : prop; 8009 if (!element) return null; 8010 if (focusable) return isFocusable(element) ? element : null; 8011 return element; 8012 } 8013 var useDialog = createHook(function useDialog2(_a) { 8014 var _b = _a, { 8015 store: storeProp, 8016 open: openProp, 8017 onClose, 8018 focusable = true, 8019 modal = true, 8020 portal = !!modal, 8021 backdrop = !!modal, 8022 hideOnEscape = true, 8023 hideOnInteractOutside = true, 8024 getPersistentElements, 8025 preventBodyScroll = !!modal, 8026 autoFocusOnShow = true, 8027 autoFocusOnHide = true, 8028 initialFocus, 8029 finalFocus, 8030 unmountOnHide, 8031 unstable_treeSnapshotKey 8032 } = _b, props = __objRest(_b, [ 8033 "store", 8034 "open", 8035 "onClose", 8036 "focusable", 8037 "modal", 8038 "portal", 8039 "backdrop", 8040 "hideOnEscape", 8041 "hideOnInteractOutside", 8042 "getPersistentElements", 8043 "preventBodyScroll", 8044 "autoFocusOnShow", 8045 "autoFocusOnHide", 8046 "initialFocus", 8047 "finalFocus", 8048 "unmountOnHide", 8049 "unstable_treeSnapshotKey" 8050 ]); 8051 const context = useDialogProviderContext(); 8052 const ref = (0,external_React_.useRef)(null); 8053 const store = useDialogStore({ 8054 store: storeProp || context, 8055 open: openProp, 8056 setOpen(open2) { 8057 if (open2) return; 8058 const dialog = ref.current; 8059 if (!dialog) return; 8060 const event = new Event("close", { bubbles: false, cancelable: true }); 8061 if (onClose) { 8062 dialog.addEventListener("close", onClose, { once: true }); 8063 } 8064 dialog.dispatchEvent(event); 8065 if (!event.defaultPrevented) return; 8066 store.setOpen(true); 8067 } 8068 }); 8069 const { portalRef, domReady } = usePortalRef(portal, props.portalRef); 8070 const preserveTabOrderProp = props.preserveTabOrder; 8071 const preserveTabOrder = useStoreState( 8072 store, 8073 (state) => preserveTabOrderProp && !modal && state.mounted 8074 ); 8075 const id = useId(props.id); 8076 const open = useStoreState(store, "open"); 8077 const mounted = useStoreState(store, "mounted"); 8078 const contentElement = useStoreState(store, "contentElement"); 8079 const hidden = isHidden(mounted, props.hidden, props.alwaysVisible); 8080 usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden); 8081 useHideOnInteractOutside(store, hideOnInteractOutside, domReady); 8082 const { wrapElement, nestedDialogs } = useNestedDialogs(store); 8083 props = useWrapElement(props, wrapElement, [wrapElement]); 8084 useSafeLayoutEffect(() => { 8085 if (!open) return; 8086 const dialog = ref.current; 8087 const activeElement = getActiveElement(dialog, true); 8088 if (!activeElement) return; 8089 if (activeElement.tagName === "BODY") return; 8090 if (dialog && contains(dialog, activeElement)) return; 8091 store.setDisclosureElement(activeElement); 8092 }, [store, open]); 8093 if (JC64G2H7_isSafariBrowser) { 8094 (0,external_React_.useEffect)(() => { 8095 if (!mounted) return; 8096 const { disclosureElement } = store.getState(); 8097 if (!disclosureElement) return; 8098 if (!isButton(disclosureElement)) return; 8099 const onMouseDown = () => { 8100 let receivedFocus = false; 8101 const onFocus = () => { 8102 receivedFocus = true; 8103 }; 8104 const options = { capture: true, once: true }; 8105 disclosureElement.addEventListener("focusin", onFocus, options); 8106 queueBeforeEvent(disclosureElement, "mouseup", () => { 8107 disclosureElement.removeEventListener("focusin", onFocus, true); 8108 if (receivedFocus) return; 8109 focusIfNeeded(disclosureElement); 8110 }); 8111 }; 8112 disclosureElement.addEventListener("mousedown", onMouseDown); 8113 return () => { 8114 disclosureElement.removeEventListener("mousedown", onMouseDown); 8115 }; 8116 }, [store, mounted]); 8117 } 8118 (0,external_React_.useEffect)(() => { 8119 if (!mounted) return; 8120 if (!domReady) return; 8121 const dialog = ref.current; 8122 if (!dialog) return; 8123 const win = getWindow(dialog); 8124 const viewport = win.visualViewport || win; 8125 const setViewportHeight = () => { 8126 var _a2, _b2; 8127 const height = (_b2 = (_a2 = win.visualViewport) == null ? void 0 : _a2.height) != null ? _b2 : win.innerHeight; 8128 dialog.style.setProperty("--dialog-viewport-height", `$height}px`); 8129 }; 8130 setViewportHeight(); 8131 viewport.addEventListener("resize", setViewportHeight); 8132 return () => { 8133 viewport.removeEventListener("resize", setViewportHeight); 8134 }; 8135 }, [mounted, domReady]); 8136 (0,external_React_.useEffect)(() => { 8137 if (!modal) return; 8138 if (!mounted) return; 8139 if (!domReady) return; 8140 const dialog = ref.current; 8141 if (!dialog) return; 8142 const existingDismiss = dialog.querySelector("[data-dialog-dismiss]"); 8143 if (existingDismiss) return; 8144 return prependHiddenDismiss(dialog, store.hide); 8145 }, [store, modal, mounted, domReady]); 8146 useSafeLayoutEffect(() => { 8147 if (!supportsInert()) return; 8148 if (open) return; 8149 if (!mounted) return; 8150 if (!domReady) return; 8151 const dialog = ref.current; 8152 if (!dialog) return; 8153 return disableTree(dialog); 8154 }, [open, mounted, domReady]); 8155 const canTakeTreeSnapshot = open && domReady; 8156 useSafeLayoutEffect(() => { 8157 if (!id) return; 8158 if (!canTakeTreeSnapshot) return; 8159 const dialog = ref.current; 8160 return createWalkTreeSnapshot(id, [dialog]); 8161 }, [id, canTakeTreeSnapshot, unstable_treeSnapshotKey]); 8162 const getPersistentElementsProp = useEvent(getPersistentElements); 8163 useSafeLayoutEffect(() => { 8164 if (!id) return; 8165 if (!canTakeTreeSnapshot) return; 8166 const { disclosureElement } = store.getState(); 8167 const dialog = ref.current; 8168 const persistentElements = getPersistentElementsProp() || []; 8169 const allElements = [ 8170 dialog, 8171 ...persistentElements, 8172 ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement) 8173 ]; 8174 if (modal) { 8175 return chain( 8176 markTreeOutside(id, allElements), 8177 disableTreeOutside(id, allElements) 8178 ); 8179 } 8180 return markTreeOutside(id, [disclosureElement, ...allElements]); 8181 }, [ 8182 id, 8183 store, 8184 canTakeTreeSnapshot, 8185 getPersistentElementsProp, 8186 nestedDialogs, 8187 modal, 8188 unstable_treeSnapshotKey 8189 ]); 8190 const mayAutoFocusOnShow = !!autoFocusOnShow; 8191 const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow); 8192 const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false); 8193 (0,external_React_.useEffect)(() => { 8194 if (!open) return; 8195 if (!mayAutoFocusOnShow) return; 8196 if (!domReady) return; 8197 if (!(contentElement == null ? void 0 : contentElement.isConnected)) return; 8198 const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element 8199 // with the autofocus attribute. If it's an Ariakit component, the 8200 // Focusable component will consume the autoFocus prop and add the 8201 // data-autofocus attribute to the element instead. 8202 contentElement.querySelector( 8203 "[data-autofocus=true],[autofocus]" 8204 ) || // We have to fallback to the first focusable element otherwise portaled 8205 // dialogs with preserveTabOrder set to true will not receive focus 8206 // properly because the elements aren't tabbable until the dialog receives 8207 // focus. 8208 getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself. 8209 contentElement; 8210 const isElementFocusable = isFocusable(element); 8211 if (!autoFocusOnShowProp(isElementFocusable ? element : null)) return; 8212 setAutoFocusEnabled(true); 8213 queueMicrotask(() => { 8214 element.focus(); 8215 if (!JC64G2H7_isSafariBrowser) return; 8216 element.scrollIntoView({ block: "nearest", inline: "nearest" }); 8217 }); 8218 }, [ 8219 open, 8220 mayAutoFocusOnShow, 8221 domReady, 8222 contentElement, 8223 initialFocus, 8224 portal, 8225 preserveTabOrder, 8226 autoFocusOnShowProp 8227 ]); 8228 const mayAutoFocusOnHide = !!autoFocusOnHide; 8229 const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide); 8230 const [hasOpened, setHasOpened] = (0,external_React_.useState)(false); 8231 (0,external_React_.useEffect)(() => { 8232 if (!open) return; 8233 setHasOpened(true); 8234 return () => setHasOpened(false); 8235 }, [open]); 8236 const focusOnHide = (0,external_React_.useCallback)( 8237 (dialog, retry = true) => { 8238 const { disclosureElement } = store.getState(); 8239 if (isAlreadyFocusingAnotherElement(dialog)) return; 8240 let element = getElementFromProp(finalFocus) || disclosureElement; 8241 if (element == null ? void 0 : element.id) { 8242 const doc = getDocument(element); 8243 const selector = `[aria-activedescendant="$element.id}"]`; 8244 const composite = doc.querySelector(selector); 8245 if (composite) { 8246 element = composite; 8247 } 8248 } 8249 if (element && !isFocusable(element)) { 8250 const maybeParentDialog = element.closest("[data-dialog]"); 8251 if (maybeParentDialog == null ? void 0 : maybeParentDialog.id) { 8252 const doc = getDocument(maybeParentDialog); 8253 const selector = `[aria-controls~="$maybeParentDialog.id}"]`; 8254 const control = doc.querySelector(selector); 8255 if (control) { 8256 element = control; 8257 } 8258 } 8259 } 8260 const isElementFocusable = element && isFocusable(element); 8261 if (!isElementFocusable && retry) { 8262 requestAnimationFrame(() => focusOnHide(dialog, false)); 8263 return; 8264 } 8265 if (!autoFocusOnHideProp(isElementFocusable ? element : null)) return; 8266 if (!isElementFocusable) return; 8267 element == null ? void 0 : element.focus(); 8268 }, 8269 [store, finalFocus, autoFocusOnHideProp] 8270 ); 8271 const focusedOnHideRef = (0,external_React_.useRef)(false); 8272 useSafeLayoutEffect(() => { 8273 if (open) return; 8274 if (!hasOpened) return; 8275 if (!mayAutoFocusOnHide) return; 8276 const dialog = ref.current; 8277 focusedOnHideRef.current = true; 8278 focusOnHide(dialog); 8279 }, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]); 8280 (0,external_React_.useEffect)(() => { 8281 if (!hasOpened) return; 8282 if (!mayAutoFocusOnHide) return; 8283 const dialog = ref.current; 8284 return () => { 8285 if (focusedOnHideRef.current) { 8286 focusedOnHideRef.current = false; 8287 return; 8288 } 8289 focusOnHide(dialog); 8290 }; 8291 }, [hasOpened, mayAutoFocusOnHide, focusOnHide]); 8292 const hideOnEscapeProp = useBooleanEvent(hideOnEscape); 8293 (0,external_React_.useEffect)(() => { 8294 if (!domReady) return; 8295 if (!mounted) return; 8296 const onKeyDown = (event) => { 8297 if (event.key !== "Escape") return; 8298 if (event.defaultPrevented) return; 8299 const dialog = ref.current; 8300 if (!dialog) return; 8301 if (isElementMarked(dialog)) return; 8302 const target = event.target; 8303 if (!target) return; 8304 const { disclosureElement } = store.getState(); 8305 const isValidTarget = () => { 8306 if (target.tagName === "BODY") return true; 8307 if (contains(dialog, target)) return true; 8308 if (!disclosureElement) return true; 8309 if (contains(disclosureElement, target)) return true; 8310 return false; 8311 }; 8312 if (!isValidTarget()) return; 8313 if (!hideOnEscapeProp(event)) return; 8314 store.hide(); 8315 }; 8316 return addGlobalEventListener("keydown", onKeyDown, true); 8317 }, [store, domReady, mounted, hideOnEscapeProp]); 8318 props = useWrapElement( 8319 props, 8320 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }), 8321 [modal] 8322 ); 8323 const hiddenProp = props.hidden; 8324 const alwaysVisible = props.alwaysVisible; 8325 props = useWrapElement( 8326 props, 8327 (element) => { 8328 if (!backdrop) return element; 8329 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ 8330 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 8331 DialogBackdrop, 8332 { 8333 store, 8334 backdrop, 8335 hidden: hiddenProp, 8336 alwaysVisible 8337 } 8338 ), 8339 element 8340 ] }); 8341 }, 8342 [store, backdrop, hiddenProp, alwaysVisible] 8343 ); 8344 const [headingId, setHeadingId] = (0,external_React_.useState)(); 8345 const [descriptionId, setDescriptionId] = (0,external_React_.useState)(); 8346 props = useWrapElement( 8347 props, 8348 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }), 8349 [store] 8350 ); 8351 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 8352 id, 8353 "data-dialog": "", 8354 role: "dialog", 8355 tabIndex: focusable ? -1 : void 0, 8356 "aria-labelledby": headingId, 8357 "aria-describedby": descriptionId 8358 }, props), { 8359 ref: useMergeRefs(ref, props.ref) 8360 }); 8361 props = useFocusableContainer(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 8362 autoFocusOnShow: autoFocusEnabled 8363 })); 8364 props = useDisclosureContent(_3YLGPPWQ_spreadValues({ store }, props)); 8365 props = useFocusable(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { focusable })); 8366 props = usePortal(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ portal }, props), { portalRef, preserveTabOrder })); 8367 return props; 8368 }); 8369 function createDialogComponent(Component, useProviderContext = useDialogProviderContext) { 8370 return forwardRef2(function DialogComponent(props) { 8371 const context = useProviderContext(); 8372 const store = props.store || context; 8373 const mounted = useStoreState( 8374 store, 8375 (state) => !props.unmountOnHide || (state == null ? void 0 : state.mounted) || !!props.open 8376 ); 8377 if (!mounted) return null; 8378 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, _3YLGPPWQ_spreadValues({}, props)); 8379 }); 8380 } 8381 var Dialog = createDialogComponent( 8382 forwardRef2(function Dialog2(props) { 8383 const htmlProps = useDialog(props); 8384 return LMDWO4NN_createElement(JC64G2H7_TagName, htmlProps); 8385 }), 8386 useDialogProviderContext 8387 ); 8388 8389 8390 8391 ;// ./node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs 8392 const floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left'])); 8393 const alignments = (/* unused pure expression or super */ null && (['start', 'end'])); 8394 const floating_ui_utils_placements = /*#__PURE__*/(/* unused pure expression or super */ null && (floating_ui_utils_sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []))); 8395 const floating_ui_utils_min = Math.min; 8396 const floating_ui_utils_max = Math.max; 8397 const round = Math.round; 8398 const floor = Math.floor; 8399 const createCoords = v => ({ 8400 x: v, 8401 y: v 8402 }); 8403 const oppositeSideMap = { 8404 left: 'right', 8405 right: 'left', 8406 bottom: 'top', 8407 top: 'bottom' 8408 }; 8409 const oppositeAlignmentMap = { 8410 start: 'end', 8411 end: 'start' 8412 }; 8413 function clamp(start, value, end) { 8414 return floating_ui_utils_max(start, floating_ui_utils_min(value, end)); 8415 } 8416 function floating_ui_utils_evaluate(value, param) { 8417 return typeof value === 'function' ? value(param) : value; 8418 } 8419 function floating_ui_utils_getSide(placement) { 8420 return placement.split('-')[0]; 8421 } 8422 function floating_ui_utils_getAlignment(placement) { 8423 return placement.split('-')[1]; 8424 } 8425 function getOppositeAxis(axis) { 8426 return axis === 'x' ? 'y' : 'x'; 8427 } 8428 function getAxisLength(axis) { 8429 return axis === 'y' ? 'height' : 'width'; 8430 } 8431 function floating_ui_utils_getSideAxis(placement) { 8432 return ['top', 'bottom'].includes(floating_ui_utils_getSide(placement)) ? 'y' : 'x'; 8433 } 8434 function getAlignmentAxis(placement) { 8435 return getOppositeAxis(floating_ui_utils_getSideAxis(placement)); 8436 } 8437 function floating_ui_utils_getAlignmentSides(placement, rects, rtl) { 8438 if (rtl === void 0) { 8439 rtl = false; 8440 } 8441 const alignment = floating_ui_utils_getAlignment(placement); 8442 const alignmentAxis = getAlignmentAxis(placement); 8443 const length = getAxisLength(alignmentAxis); 8444 let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top'; 8445 if (rects.reference[length] > rects.floating[length]) { 8446 mainAlignmentSide = getOppositePlacement(mainAlignmentSide); 8447 } 8448 return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)]; 8449 } 8450 function getExpandedPlacements(placement) { 8451 const oppositePlacement = getOppositePlacement(placement); 8452 return [floating_ui_utils_getOppositeAlignmentPlacement(placement), oppositePlacement, floating_ui_utils_getOppositeAlignmentPlacement(oppositePlacement)]; 8453 } 8454 function floating_ui_utils_getOppositeAlignmentPlacement(placement) { 8455 return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]); 8456 } 8457 function getSideList(side, isStart, rtl) { 8458 const lr = ['left', 'right']; 8459 const rl = ['right', 'left']; 8460 const tb = ['top', 'bottom']; 8461 const bt = ['bottom', 'top']; 8462 switch (side) { 8463 case 'top': 8464 case 'bottom': 8465 if (rtl) return isStart ? rl : lr; 8466 return isStart ? lr : rl; 8467 case 'left': 8468 case 'right': 8469 return isStart ? tb : bt; 8470 default: 8471 return []; 8472 } 8473 } 8474 function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) { 8475 const alignment = floating_ui_utils_getAlignment(placement); 8476 let list = getSideList(floating_ui_utils_getSide(placement), direction === 'start', rtl); 8477 if (alignment) { 8478 list = list.map(side => side + "-" + alignment); 8479 if (flipAlignment) { 8480 list = list.concat(list.map(floating_ui_utils_getOppositeAlignmentPlacement)); 8481 } 8482 } 8483 return list; 8484 } 8485 function getOppositePlacement(placement) { 8486 return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]); 8487 } 8488 function expandPaddingObject(padding) { 8489 return { 8490 top: 0, 8491 right: 0, 8492 bottom: 0, 8493 left: 0, 8494 ...padding 8495 }; 8496 } 8497 function floating_ui_utils_getPaddingObject(padding) { 8498 return typeof padding !== 'number' ? expandPaddingObject(padding) : { 8499 top: padding, 8500 right: padding, 8501 bottom: padding, 8502 left: padding 8503 }; 8504 } 8505 function floating_ui_utils_rectToClientRect(rect) { 8506 return { 8507 ...rect, 8508 top: rect.y, 8509 left: rect.x, 8510 right: rect.x + rect.width, 8511 bottom: rect.y + rect.height 8512 }; 8513 } 8514 8515 8516 8517 ;// ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs 8518 8519 8520 8521 function computeCoordsFromPlacement(_ref, placement, rtl) { 8522 let { 8523 reference, 8524 floating 8525 } = _ref; 8526 const sideAxis = floating_ui_utils_getSideAxis(placement); 8527 const alignmentAxis = getAlignmentAxis(placement); 8528 const alignLength = getAxisLength(alignmentAxis); 8529 const side = floating_ui_utils_getSide(placement); 8530 const isVertical = sideAxis === 'y'; 8531 const commonX = reference.x + reference.width / 2 - floating.width / 2; 8532 const commonY = reference.y + reference.height / 2 - floating.height / 2; 8533 const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2; 8534 let coords; 8535 switch (side) { 8536 case 'top': 8537 coords = { 8538 x: commonX, 8539 y: reference.y - floating.height 8540 }; 8541 break; 8542 case 'bottom': 8543 coords = { 8544 x: commonX, 8545 y: reference.y + reference.height 8546 }; 8547 break; 8548 case 'right': 8549 coords = { 8550 x: reference.x + reference.width, 8551 y: commonY 8552 }; 8553 break; 8554 case 'left': 8555 coords = { 8556 x: reference.x - floating.width, 8557 y: commonY 8558 }; 8559 break; 8560 default: 8561 coords = { 8562 x: reference.x, 8563 y: reference.y 8564 }; 8565 } 8566 switch (floating_ui_utils_getAlignment(placement)) { 8567 case 'start': 8568 coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1); 8569 break; 8570 case 'end': 8571 coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1); 8572 break; 8573 } 8574 return coords; 8575 } 8576 8577 /** 8578 * Computes the `x` and `y` coordinates that will place the floating element 8579 * next to a reference element when it is given a certain positioning strategy. 8580 * 8581 * This export does not have any `platform` interface logic. You will need to 8582 * write one for the platform you are using Floating UI with. 8583 */ 8584 const computePosition = async (reference, floating, config) => { 8585 const { 8586 placement = 'bottom', 8587 strategy = 'absolute', 8588 middleware = [], 8589 platform 8590 } = config; 8591 const validMiddleware = middleware.filter(Boolean); 8592 const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating)); 8593 let rects = await platform.getElementRects({ 8594 reference, 8595 floating, 8596 strategy 8597 }); 8598 let { 8599 x, 8600 y 8601 } = computeCoordsFromPlacement(rects, placement, rtl); 8602 let statefulPlacement = placement; 8603 let middlewareData = {}; 8604 let resetCount = 0; 8605 for (let i = 0; i < validMiddleware.length; i++) { 8606 const { 8607 name, 8608 fn 8609 } = validMiddleware[i]; 8610 const { 8611 x: nextX, 8612 y: nextY, 8613 data, 8614 reset 8615 } = await fn({ 8616 x, 8617 y, 8618 initialPlacement: placement, 8619 placement: statefulPlacement, 8620 strategy, 8621 middlewareData, 8622 rects, 8623 platform, 8624 elements: { 8625 reference, 8626 floating 8627 } 8628 }); 8629 x = nextX != null ? nextX : x; 8630 y = nextY != null ? nextY : y; 8631 middlewareData = { 8632 ...middlewareData, 8633 [name]: { 8634 ...middlewareData[name], 8635 ...data 8636 } 8637 }; 8638 if (reset && resetCount <= 50) { 8639 resetCount++; 8640 if (typeof reset === 'object') { 8641 if (reset.placement) { 8642 statefulPlacement = reset.placement; 8643 } 8644 if (reset.rects) { 8645 rects = reset.rects === true ? await platform.getElementRects({ 8646 reference, 8647 floating, 8648 strategy 8649 }) : reset.rects; 8650 } 8651 ({ 8652 x, 8653 y 8654 } = computeCoordsFromPlacement(rects, statefulPlacement, rtl)); 8655 } 8656 i = -1; 8657 continue; 8658 } 8659 } 8660 return { 8661 x, 8662 y, 8663 placement: statefulPlacement, 8664 strategy, 8665 middlewareData 8666 }; 8667 }; 8668 8669 /** 8670 * Resolves with an object of overflow side offsets that determine how much the 8671 * element is overflowing a given clipping boundary on each side. 8672 * - positive = overflowing the boundary by that number of pixels 8673 * - negative = how many pixels left before it will overflow 8674 * - 0 = lies flush with the boundary 8675 * @see https://floating-ui.com/docs/detectOverflow 8676 */ 8677 async function detectOverflow(state, options) { 8678 var _await$platform$isEle; 8679 if (options === void 0) { 8680 options = {}; 8681 } 8682 const { 8683 x, 8684 y, 8685 platform, 8686 rects, 8687 elements, 8688 strategy 8689 } = state; 8690 const { 8691 boundary = 'clippingAncestors', 8692 rootBoundary = 'viewport', 8693 elementContext = 'floating', 8694 altBoundary = false, 8695 padding = 0 8696 } = floating_ui_utils_evaluate(options, state); 8697 const paddingObject = floating_ui_utils_getPaddingObject(padding); 8698 const altContext = elementContext === 'floating' ? 'reference' : 'floating'; 8699 const element = elements[altBoundary ? altContext : elementContext]; 8700 const clippingClientRect = floating_ui_utils_rectToClientRect(await platform.getClippingRect({ 8701 element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))), 8702 boundary, 8703 rootBoundary, 8704 strategy 8705 })); 8706 const rect = elementContext === 'floating' ? { 8707 ...rects.floating, 8708 x, 8709 y 8710 } : rects.reference; 8711 const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)); 8712 const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || { 8713 x: 1, 8714 y: 1 8715 } : { 8716 x: 1, 8717 y: 1 8718 }; 8719 const elementClientRect = floating_ui_utils_rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({ 8720 rect, 8721 offsetParent, 8722 strategy 8723 }) : rect); 8724 return { 8725 top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y, 8726 bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y, 8727 left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x, 8728 right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x 8729 }; 8730 } 8731 8732 /** 8733 * Provides data to position an inner element of the floating element so that it 8734 * appears centered to the reference element. 8735 * @see https://floating-ui.com/docs/arrow 8736 */ 8737 const arrow = options => ({ 8738 name: 'arrow', 8739 options, 8740 async fn(state) { 8741 const { 8742 x, 8743 y, 8744 placement, 8745 rects, 8746 platform, 8747 elements, 8748 middlewareData 8749 } = state; 8750 // Since `element` is required, we don't Partial<> the type. 8751 const { 8752 element, 8753 padding = 0 8754 } = floating_ui_utils_evaluate(options, state) || {}; 8755 if (element == null) { 8756 return {}; 8757 } 8758 const paddingObject = floating_ui_utils_getPaddingObject(padding); 8759 const coords = { 8760 x, 8761 y 8762 }; 8763 const axis = getAlignmentAxis(placement); 8764 const length = getAxisLength(axis); 8765 const arrowDimensions = await platform.getDimensions(element); 8766 const isYAxis = axis === 'y'; 8767 const minProp = isYAxis ? 'top' : 'left'; 8768 const maxProp = isYAxis ? 'bottom' : 'right'; 8769 const clientProp = isYAxis ? 'clientHeight' : 'clientWidth'; 8770 const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length]; 8771 const startDiff = coords[axis] - rects.reference[axis]; 8772 const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element)); 8773 let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0; 8774 8775 // DOM platform can return `window` as the `offsetParent`. 8776 if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) { 8777 clientSize = elements.floating[clientProp] || rects.floating[length]; 8778 } 8779 const centerToReference = endDiff / 2 - startDiff / 2; 8780 8781 // If the padding is large enough that it causes the arrow to no longer be 8782 // centered, modify the padding so that it is centered. 8783 const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1; 8784 const minPadding = floating_ui_utils_min(paddingObject[minProp], largestPossiblePadding); 8785 const maxPadding = floating_ui_utils_min(paddingObject[maxProp], largestPossiblePadding); 8786 8787 // Make sure the arrow doesn't overflow the floating element if the center 8788 // point is outside the floating element's bounds. 8789 const min$1 = minPadding; 8790 const max = clientSize - arrowDimensions[length] - maxPadding; 8791 const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference; 8792 const offset = clamp(min$1, center, max); 8793 8794 // If the reference is small enough that the arrow's padding causes it to 8795 // to point to nothing for an aligned placement, adjust the offset of the 8796 // floating element itself. To ensure `shift()` continues to take action, 8797 // a single reset is performed when this is true. 8798 const shouldAddOffset = !middlewareData.arrow && floating_ui_utils_getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0; 8799 const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0; 8800 return { 8801 [axis]: coords[axis] + alignmentOffset, 8802 data: { 8803 [axis]: offset, 8804 centerOffset: center - offset - alignmentOffset, 8805 ...(shouldAddOffset && { 8806 alignmentOffset 8807 }) 8808 }, 8809 reset: shouldAddOffset 8810 }; 8811 } 8812 }); 8813 8814 function getPlacementList(alignment, autoAlignment, allowedPlacements) { 8815 const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement); 8816 return allowedPlacementsSortedByAlignment.filter(placement => { 8817 if (alignment) { 8818 return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false); 8819 } 8820 return true; 8821 }); 8822 } 8823 /** 8824 * Optimizes the visibility of the floating element by choosing the placement 8825 * that has the most space available automatically, without needing to specify a 8826 * preferred placement. Alternative to `flip`. 8827 * @see https://floating-ui.com/docs/autoPlacement 8828 */ 8829 const autoPlacement = function (options) { 8830 if (options === void 0) { 8831 options = {}; 8832 } 8833 return { 8834 name: 'autoPlacement', 8835 options, 8836 async fn(state) { 8837 var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE; 8838 const { 8839 rects, 8840 middlewareData, 8841 placement, 8842 platform, 8843 elements 8844 } = state; 8845 const { 8846 crossAxis = false, 8847 alignment, 8848 allowedPlacements = placements, 8849 autoAlignment = true, 8850 ...detectOverflowOptions 8851 } = evaluate(options, state); 8852 const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements; 8853 const overflow = await detectOverflow(state, detectOverflowOptions); 8854 const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0; 8855 const currentPlacement = placements$1[currentIndex]; 8856 if (currentPlacement == null) { 8857 return {}; 8858 } 8859 const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); 8860 8861 // Make `computeCoords` start from the right place. 8862 if (placement !== currentPlacement) { 8863 return { 8864 reset: { 8865 placement: placements$1[0] 8866 } 8867 }; 8868 } 8869 const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]]; 8870 const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), { 8871 placement: currentPlacement, 8872 overflows: currentOverflows 8873 }]; 8874 const nextPlacement = placements$1[currentIndex + 1]; 8875 8876 // There are more placements to check. 8877 if (nextPlacement) { 8878 return { 8879 data: { 8880 index: currentIndex + 1, 8881 overflows: allOverflows 8882 }, 8883 reset: { 8884 placement: nextPlacement 8885 } 8886 }; 8887 } 8888 const placementsSortedByMostSpace = allOverflows.map(d => { 8889 const alignment = getAlignment(d.placement); 8890 return [d.placement, alignment && crossAxis ? 8891 // Check along the mainAxis and main crossAxis side. 8892 d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) : 8893 // Check only the mainAxis. 8894 d.overflows[0], d.overflows]; 8895 }).sort((a, b) => a[1] - b[1]); 8896 const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0, 8897 // Aligned placements should not check their opposite crossAxis 8898 // side. 8899 getAlignment(d[0]) ? 2 : 3).every(v => v <= 0)); 8900 const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0]; 8901 if (resetPlacement !== placement) { 8902 return { 8903 data: { 8904 index: currentIndex + 1, 8905 overflows: allOverflows 8906 }, 8907 reset: { 8908 placement: resetPlacement 8909 } 8910 }; 8911 } 8912 return {}; 8913 } 8914 }; 8915 }; 8916 8917 /** 8918 * Optimizes the visibility of the floating element by flipping the `placement` 8919 * in order to keep it in view when the preferred placement(s) will overflow the 8920 * clipping boundary. Alternative to `autoPlacement`. 8921 * @see https://floating-ui.com/docs/flip 8922 */ 8923 const flip = function (options) { 8924 if (options === void 0) { 8925 options = {}; 8926 } 8927 return { 8928 name: 'flip', 8929 options, 8930 async fn(state) { 8931 var _middlewareData$arrow, _middlewareData$flip; 8932 const { 8933 placement, 8934 middlewareData, 8935 rects, 8936 initialPlacement, 8937 platform, 8938 elements 8939 } = state; 8940 const { 8941 mainAxis: checkMainAxis = true, 8942 crossAxis: checkCrossAxis = true, 8943 fallbackPlacements: specifiedFallbackPlacements, 8944 fallbackStrategy = 'bestFit', 8945 fallbackAxisSideDirection = 'none', 8946 flipAlignment = true, 8947 ...detectOverflowOptions 8948 } = floating_ui_utils_evaluate(options, state); 8949 8950 // If a reset by the arrow was caused due to an alignment offset being 8951 // added, we should skip any logic now since `flip()` has already done its 8952 // work. 8953 // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643 8954 if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) { 8955 return {}; 8956 } 8957 const side = floating_ui_utils_getSide(placement); 8958 const isBasePlacement = floating_ui_utils_getSide(initialPlacement) === initialPlacement; 8959 const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); 8960 const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement)); 8961 if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') { 8962 fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl)); 8963 } 8964 const placements = [initialPlacement, ...fallbackPlacements]; 8965 const overflow = await detectOverflow(state, detectOverflowOptions); 8966 const overflows = []; 8967 let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || []; 8968 if (checkMainAxis) { 8969 overflows.push(overflow[side]); 8970 } 8971 if (checkCrossAxis) { 8972 const sides = floating_ui_utils_getAlignmentSides(placement, rects, rtl); 8973 overflows.push(overflow[sides[0]], overflow[sides[1]]); 8974 } 8975 overflowsData = [...overflowsData, { 8976 placement, 8977 overflows 8978 }]; 8979 8980 // One or more sides is overflowing. 8981 if (!overflows.every(side => side <= 0)) { 8982 var _middlewareData$flip2, _overflowsData$filter; 8983 const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1; 8984 const nextPlacement = placements[nextIndex]; 8985 if (nextPlacement) { 8986 // Try next placement and re-run the lifecycle. 8987 return { 8988 data: { 8989 index: nextIndex, 8990 overflows: overflowsData 8991 }, 8992 reset: { 8993 placement: nextPlacement 8994 } 8995 }; 8996 } 8997 8998 // First, find the candidates that fit on the mainAxis side of overflow, 8999 // then find the placement that fits the best on the main crossAxis side. 9000 let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement; 9001 9002 // Otherwise fallback. 9003 if (!resetPlacement) { 9004 switch (fallbackStrategy) { 9005 case 'bestFit': 9006 { 9007 var _overflowsData$map$so; 9008 const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0]; 9009 if (placement) { 9010 resetPlacement = placement; 9011 } 9012 break; 9013 } 9014 case 'initialPlacement': 9015 resetPlacement = initialPlacement; 9016 break; 9017 } 9018 } 9019 if (placement !== resetPlacement) { 9020 return { 9021 reset: { 9022 placement: resetPlacement 9023 } 9024 }; 9025 } 9026 } 9027 return {}; 9028 } 9029 }; 9030 }; 9031 9032 function getSideOffsets(overflow, rect) { 9033 return { 9034 top: overflow.top - rect.height, 9035 right: overflow.right - rect.width, 9036 bottom: overflow.bottom - rect.height, 9037 left: overflow.left - rect.width 9038 }; 9039 } 9040 function isAnySideFullyClipped(overflow) { 9041 return sides.some(side => overflow[side] >= 0); 9042 } 9043 /** 9044 * Provides data to hide the floating element in applicable situations, such as 9045 * when it is not in the same clipping context as the reference element. 9046 * @see https://floating-ui.com/docs/hide 9047 */ 9048 const hide = function (options) { 9049 if (options === void 0) { 9050 options = {}; 9051 } 9052 return { 9053 name: 'hide', 9054 options, 9055 async fn(state) { 9056 const { 9057 rects 9058 } = state; 9059 const { 9060 strategy = 'referenceHidden', 9061 ...detectOverflowOptions 9062 } = evaluate(options, state); 9063 switch (strategy) { 9064 case 'referenceHidden': 9065 { 9066 const overflow = await detectOverflow(state, { 9067 ...detectOverflowOptions, 9068 elementContext: 'reference' 9069 }); 9070 const offsets = getSideOffsets(overflow, rects.reference); 9071 return { 9072 data: { 9073 referenceHiddenOffsets: offsets, 9074 referenceHidden: isAnySideFullyClipped(offsets) 9075 } 9076 }; 9077 } 9078 case 'escaped': 9079 { 9080 const overflow = await detectOverflow(state, { 9081 ...detectOverflowOptions, 9082 altBoundary: true 9083 }); 9084 const offsets = getSideOffsets(overflow, rects.floating); 9085 return { 9086 data: { 9087 escapedOffsets: offsets, 9088 escaped: isAnySideFullyClipped(offsets) 9089 } 9090 }; 9091 } 9092 default: 9093 { 9094 return {}; 9095 } 9096 } 9097 } 9098 }; 9099 }; 9100 9101 function getBoundingRect(rects) { 9102 const minX = min(...rects.map(rect => rect.left)); 9103 const minY = min(...rects.map(rect => rect.top)); 9104 const maxX = max(...rects.map(rect => rect.right)); 9105 const maxY = max(...rects.map(rect => rect.bottom)); 9106 return { 9107 x: minX, 9108 y: minY, 9109 width: maxX - minX, 9110 height: maxY - minY 9111 }; 9112 } 9113 function getRectsByLine(rects) { 9114 const sortedRects = rects.slice().sort((a, b) => a.y - b.y); 9115 const groups = []; 9116 let prevRect = null; 9117 for (let i = 0; i < sortedRects.length; i++) { 9118 const rect = sortedRects[i]; 9119 if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) { 9120 groups.push([rect]); 9121 } else { 9122 groups[groups.length - 1].push(rect); 9123 } 9124 prevRect = rect; 9125 } 9126 return groups.map(rect => rectToClientRect(getBoundingRect(rect))); 9127 } 9128 /** 9129 * Provides improved positioning for inline reference elements that can span 9130 * over multiple lines, such as hyperlinks or range selections. 9131 * @see https://floating-ui.com/docs/inline 9132 */ 9133 const inline = function (options) { 9134 if (options === void 0) { 9135 options = {}; 9136 } 9137 return { 9138 name: 'inline', 9139 options, 9140 async fn(state) { 9141 const { 9142 placement, 9143 elements, 9144 rects, 9145 platform, 9146 strategy 9147 } = state; 9148 // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a 9149 // ClientRect's bounds, despite the event listener being triggered. A 9150 // padding of 2 seems to handle this issue. 9151 const { 9152 padding = 2, 9153 x, 9154 y 9155 } = evaluate(options, state); 9156 const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []); 9157 const clientRects = getRectsByLine(nativeClientRects); 9158 const fallback = rectToClientRect(getBoundingRect(nativeClientRects)); 9159 const paddingObject = getPaddingObject(padding); 9160 function getBoundingClientRect() { 9161 // There are two rects and they are disjoined. 9162 if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) { 9163 // Find the first rect in which the point is fully inside. 9164 return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback; 9165 } 9166 9167 // There are 2 or more connected rects. 9168 if (clientRects.length >= 2) { 9169 if (getSideAxis(placement) === 'y') { 9170 const firstRect = clientRects[0]; 9171 const lastRect = clientRects[clientRects.length - 1]; 9172 const isTop = getSide(placement) === 'top'; 9173 const top = firstRect.top; 9174 const bottom = lastRect.bottom; 9175 const left = isTop ? firstRect.left : lastRect.left; 9176 const right = isTop ? firstRect.right : lastRect.right; 9177 const width = right - left; 9178 const height = bottom - top; 9179 return { 9180 top, 9181 bottom, 9182 left, 9183 right, 9184 width, 9185 height, 9186 x: left, 9187 y: top 9188 }; 9189 } 9190 const isLeftSide = getSide(placement) === 'left'; 9191 const maxRight = max(...clientRects.map(rect => rect.right)); 9192 const minLeft = min(...clientRects.map(rect => rect.left)); 9193 const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight); 9194 const top = measureRects[0].top; 9195 const bottom = measureRects[measureRects.length - 1].bottom; 9196 const left = minLeft; 9197 const right = maxRight; 9198 const width = right - left; 9199 const height = bottom - top; 9200 return { 9201 top, 9202 bottom, 9203 left, 9204 right, 9205 width, 9206 height, 9207 x: left, 9208 y: top 9209 }; 9210 } 9211 return fallback; 9212 } 9213 const resetRects = await platform.getElementRects({ 9214 reference: { 9215 getBoundingClientRect 9216 }, 9217 floating: elements.floating, 9218 strategy 9219 }); 9220 if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) { 9221 return { 9222 reset: { 9223 rects: resetRects 9224 } 9225 }; 9226 } 9227 return {}; 9228 } 9229 }; 9230 }; 9231 9232 // For type backwards-compatibility, the `OffsetOptions` type was also 9233 // Derivable. 9234 async function convertValueToCoords(state, options) { 9235 const { 9236 placement, 9237 platform, 9238 elements 9239 } = state; 9240 const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); 9241 const side = floating_ui_utils_getSide(placement); 9242 const alignment = floating_ui_utils_getAlignment(placement); 9243 const isVertical = floating_ui_utils_getSideAxis(placement) === 'y'; 9244 const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1; 9245 const crossAxisMulti = rtl && isVertical ? -1 : 1; 9246 const rawValue = floating_ui_utils_evaluate(options, state); 9247 9248 // eslint-disable-next-line prefer-const 9249 let { 9250 mainAxis, 9251 crossAxis, 9252 alignmentAxis 9253 } = typeof rawValue === 'number' ? { 9254 mainAxis: rawValue, 9255 crossAxis: 0, 9256 alignmentAxis: null 9257 } : { 9258 mainAxis: 0, 9259 crossAxis: 0, 9260 alignmentAxis: null, 9261 ...rawValue 9262 }; 9263 if (alignment && typeof alignmentAxis === 'number') { 9264 crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis; 9265 } 9266 return isVertical ? { 9267 x: crossAxis * crossAxisMulti, 9268 y: mainAxis * mainAxisMulti 9269 } : { 9270 x: mainAxis * mainAxisMulti, 9271 y: crossAxis * crossAxisMulti 9272 }; 9273 } 9274 9275 /** 9276 * Modifies the placement by translating the floating element along the 9277 * specified axes. 9278 * A number (shorthand for `mainAxis` or distance), or an axes configuration 9279 * object may be passed. 9280 * @see https://floating-ui.com/docs/offset 9281 */ 9282 const offset = function (options) { 9283 if (options === void 0) { 9284 options = 0; 9285 } 9286 return { 9287 name: 'offset', 9288 options, 9289 async fn(state) { 9290 const { 9291 x, 9292 y 9293 } = state; 9294 const diffCoords = await convertValueToCoords(state, options); 9295 return { 9296 x: x + diffCoords.x, 9297 y: y + diffCoords.y, 9298 data: diffCoords 9299 }; 9300 } 9301 }; 9302 }; 9303 9304 /** 9305 * Optimizes the visibility of the floating element by shifting it in order to 9306 * keep it in view when it will overflow the clipping boundary. 9307 * @see https://floating-ui.com/docs/shift 9308 */ 9309 const shift = function (options) { 9310 if (options === void 0) { 9311 options = {}; 9312 } 9313 return { 9314 name: 'shift', 9315 options, 9316 async fn(state) { 9317 const { 9318 x, 9319 y, 9320 placement 9321 } = state; 9322 const { 9323 mainAxis: checkMainAxis = true, 9324 crossAxis: checkCrossAxis = false, 9325 limiter = { 9326 fn: _ref => { 9327 let { 9328 x, 9329 y 9330 } = _ref; 9331 return { 9332 x, 9333 y 9334 }; 9335 } 9336 }, 9337 ...detectOverflowOptions 9338 } = floating_ui_utils_evaluate(options, state); 9339 const coords = { 9340 x, 9341 y 9342 }; 9343 const overflow = await detectOverflow(state, detectOverflowOptions); 9344 const crossAxis = floating_ui_utils_getSideAxis(floating_ui_utils_getSide(placement)); 9345 const mainAxis = getOppositeAxis(crossAxis); 9346 let mainAxisCoord = coords[mainAxis]; 9347 let crossAxisCoord = coords[crossAxis]; 9348 if (checkMainAxis) { 9349 const minSide = mainAxis === 'y' ? 'top' : 'left'; 9350 const maxSide = mainAxis === 'y' ? 'bottom' : 'right'; 9351 const min = mainAxisCoord + overflow[minSide]; 9352 const max = mainAxisCoord - overflow[maxSide]; 9353 mainAxisCoord = clamp(min, mainAxisCoord, max); 9354 } 9355 if (checkCrossAxis) { 9356 const minSide = crossAxis === 'y' ? 'top' : 'left'; 9357 const maxSide = crossAxis === 'y' ? 'bottom' : 'right'; 9358 const min = crossAxisCoord + overflow[minSide]; 9359 const max = crossAxisCoord - overflow[maxSide]; 9360 crossAxisCoord = clamp(min, crossAxisCoord, max); 9361 } 9362 const limitedCoords = limiter.fn({ 9363 ...state, 9364 [mainAxis]: mainAxisCoord, 9365 [crossAxis]: crossAxisCoord 9366 }); 9367 return { 9368 ...limitedCoords, 9369 data: { 9370 x: limitedCoords.x - x, 9371 y: limitedCoords.y - y 9372 } 9373 }; 9374 } 9375 }; 9376 }; 9377 /** 9378 * Built-in `limiter` that will stop `shift()` at a certain point. 9379 */ 9380 const limitShift = function (options) { 9381 if (options === void 0) { 9382 options = {}; 9383 } 9384 return { 9385 options, 9386 fn(state) { 9387 const { 9388 x, 9389 y, 9390 placement, 9391 rects, 9392 middlewareData 9393 } = state; 9394 const { 9395 offset = 0, 9396 mainAxis: checkMainAxis = true, 9397 crossAxis: checkCrossAxis = true 9398 } = floating_ui_utils_evaluate(options, state); 9399 const coords = { 9400 x, 9401 y 9402 }; 9403 const crossAxis = floating_ui_utils_getSideAxis(placement); 9404 const mainAxis = getOppositeAxis(crossAxis); 9405 let mainAxisCoord = coords[mainAxis]; 9406 let crossAxisCoord = coords[crossAxis]; 9407 const rawOffset = floating_ui_utils_evaluate(offset, state); 9408 const computedOffset = typeof rawOffset === 'number' ? { 9409 mainAxis: rawOffset, 9410 crossAxis: 0 9411 } : { 9412 mainAxis: 0, 9413 crossAxis: 0, 9414 ...rawOffset 9415 }; 9416 if (checkMainAxis) { 9417 const len = mainAxis === 'y' ? 'height' : 'width'; 9418 const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis; 9419 const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis; 9420 if (mainAxisCoord < limitMin) { 9421 mainAxisCoord = limitMin; 9422 } else if (mainAxisCoord > limitMax) { 9423 mainAxisCoord = limitMax; 9424 } 9425 } 9426 if (checkCrossAxis) { 9427 var _middlewareData$offse, _middlewareData$offse2; 9428 const len = mainAxis === 'y' ? 'width' : 'height'; 9429 const isOriginSide = ['top', 'left'].includes(floating_ui_utils_getSide(placement)); 9430 const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis); 9431 const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0); 9432 if (crossAxisCoord < limitMin) { 9433 crossAxisCoord = limitMin; 9434 } else if (crossAxisCoord > limitMax) { 9435 crossAxisCoord = limitMax; 9436 } 9437 } 9438 return { 9439 [mainAxis]: mainAxisCoord, 9440 [crossAxis]: crossAxisCoord 9441 }; 9442 } 9443 }; 9444 }; 9445 9446 /** 9447 * Provides data that allows you to change the size of the floating element — 9448 * for instance, prevent it from overflowing the clipping boundary or match the 9449 * width of the reference element. 9450 * @see https://floating-ui.com/docs/size 9451 */ 9452 const size = function (options) { 9453 if (options === void 0) { 9454 options = {}; 9455 } 9456 return { 9457 name: 'size', 9458 options, 9459 async fn(state) { 9460 const { 9461 placement, 9462 rects, 9463 platform, 9464 elements 9465 } = state; 9466 const { 9467 apply = () => {}, 9468 ...detectOverflowOptions 9469 } = floating_ui_utils_evaluate(options, state); 9470 const overflow = await detectOverflow(state, detectOverflowOptions); 9471 const side = floating_ui_utils_getSide(placement); 9472 const alignment = floating_ui_utils_getAlignment(placement); 9473 const isYAxis = floating_ui_utils_getSideAxis(placement) === 'y'; 9474 const { 9475 width, 9476 height 9477 } = rects.floating; 9478 let heightSide; 9479 let widthSide; 9480 if (side === 'top' || side === 'bottom') { 9481 heightSide = side; 9482 widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right'; 9483 } else { 9484 widthSide = side; 9485 heightSide = alignment === 'end' ? 'top' : 'bottom'; 9486 } 9487 const overflowAvailableHeight = height - overflow[heightSide]; 9488 const overflowAvailableWidth = width - overflow[widthSide]; 9489 const noShift = !state.middlewareData.shift; 9490 let availableHeight = overflowAvailableHeight; 9491 let availableWidth = overflowAvailableWidth; 9492 if (isYAxis) { 9493 const maximumClippingWidth = width - overflow.left - overflow.right; 9494 availableWidth = alignment || noShift ? floating_ui_utils_min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth; 9495 } else { 9496 const maximumClippingHeight = height - overflow.top - overflow.bottom; 9497 availableHeight = alignment || noShift ? floating_ui_utils_min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight; 9498 } 9499 if (noShift && !alignment) { 9500 const xMin = floating_ui_utils_max(overflow.left, 0); 9501 const xMax = floating_ui_utils_max(overflow.right, 0); 9502 const yMin = floating_ui_utils_max(overflow.top, 0); 9503 const yMax = floating_ui_utils_max(overflow.bottom, 0); 9504 if (isYAxis) { 9505 availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : floating_ui_utils_max(overflow.left, overflow.right)); 9506 } else { 9507 availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : floating_ui_utils_max(overflow.top, overflow.bottom)); 9508 } 9509 } 9510 await apply({ 9511 ...state, 9512 availableWidth, 9513 availableHeight 9514 }); 9515 const nextDimensions = await platform.getDimensions(elements.floating); 9516 if (width !== nextDimensions.width || height !== nextDimensions.height) { 9517 return { 9518 reset: { 9519 rects: true 9520 } 9521 }; 9522 } 9523 return {}; 9524 } 9525 }; 9526 }; 9527 9528 9529 9530 ;// ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs 9531 /** 9532 * Custom positioning reference element. 9533 * @see https://floating-ui.com/docs/virtual-elements 9534 */ 9535 9536 const dist_floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left'])); 9537 const floating_ui_utils_alignments = (/* unused pure expression or super */ null && (['start', 'end'])); 9538 const dist_floating_ui_utils_placements = /*#__PURE__*/(/* unused pure expression or super */ null && (dist_floating_ui_utils_sides.reduce((acc, side) => acc.concat(side, side + "-" + floating_ui_utils_alignments[0], side + "-" + floating_ui_utils_alignments[1]), []))); 9539 const dist_floating_ui_utils_min = Math.min; 9540 const dist_floating_ui_utils_max = Math.max; 9541 const floating_ui_utils_round = Math.round; 9542 const floating_ui_utils_floor = Math.floor; 9543 const floating_ui_utils_createCoords = v => ({ 9544 x: v, 9545 y: v 9546 }); 9547 const floating_ui_utils_oppositeSideMap = { 9548 left: 'right', 9549 right: 'left', 9550 bottom: 'top', 9551 top: 'bottom' 9552 }; 9553 const floating_ui_utils_oppositeAlignmentMap = { 9554 start: 'end', 9555 end: 'start' 9556 }; 9557 function floating_ui_utils_clamp(start, value, end) { 9558 return dist_floating_ui_utils_max(start, dist_floating_ui_utils_min(value, end)); 9559 } 9560 function dist_floating_ui_utils_evaluate(value, param) { 9561 return typeof value === 'function' ? value(param) : value; 9562 } 9563 function dist_floating_ui_utils_getSide(placement) { 9564 return placement.split('-')[0]; 9565 } 9566 function dist_floating_ui_utils_getAlignment(placement) { 9567 return placement.split('-')[1]; 9568 } 9569 function floating_ui_utils_getOppositeAxis(axis) { 9570 return axis === 'x' ? 'y' : 'x'; 9571 } 9572 function floating_ui_utils_getAxisLength(axis) { 9573 return axis === 'y' ? 'height' : 'width'; 9574 } 9575 function dist_floating_ui_utils_getSideAxis(placement) { 9576 return ['top', 'bottom'].includes(dist_floating_ui_utils_getSide(placement)) ? 'y' : 'x'; 9577 } 9578 function floating_ui_utils_getAlignmentAxis(placement) { 9579 return floating_ui_utils_getOppositeAxis(dist_floating_ui_utils_getSideAxis(placement)); 9580 } 9581 function dist_floating_ui_utils_getAlignmentSides(placement, rects, rtl) { 9582 if (rtl === void 0) { 9583 rtl = false; 9584 } 9585 const alignment = dist_floating_ui_utils_getAlignment(placement); 9586 const alignmentAxis = floating_ui_utils_getAlignmentAxis(placement); 9587 const length = floating_ui_utils_getAxisLength(alignmentAxis); 9588 let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top'; 9589 if (rects.reference[length] > rects.floating[length]) { 9590 mainAlignmentSide = floating_ui_utils_getOppositePlacement(mainAlignmentSide); 9591 } 9592 return [mainAlignmentSide, floating_ui_utils_getOppositePlacement(mainAlignmentSide)]; 9593 } 9594 function floating_ui_utils_getExpandedPlacements(placement) { 9595 const oppositePlacement = floating_ui_utils_getOppositePlacement(placement); 9596 return [dist_floating_ui_utils_getOppositeAlignmentPlacement(placement), oppositePlacement, dist_floating_ui_utils_getOppositeAlignmentPlacement(oppositePlacement)]; 9597 } 9598 function dist_floating_ui_utils_getOppositeAlignmentPlacement(placement) { 9599 return placement.replace(/start|end/g, alignment => floating_ui_utils_oppositeAlignmentMap[alignment]); 9600 } 9601 function floating_ui_utils_getSideList(side, isStart, rtl) { 9602 const lr = ['left', 'right']; 9603 const rl = ['right', 'left']; 9604 const tb = ['top', 'bottom']; 9605 const bt = ['bottom', 'top']; 9606 switch (side) { 9607 case 'top': 9608 case 'bottom': 9609 if (rtl) return isStart ? rl : lr; 9610 return isStart ? lr : rl; 9611 case 'left': 9612 case 'right': 9613 return isStart ? tb : bt; 9614 default: 9615 return []; 9616 } 9617 } 9618 function floating_ui_utils_getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) { 9619 const alignment = dist_floating_ui_utils_getAlignment(placement); 9620 let list = floating_ui_utils_getSideList(dist_floating_ui_utils_getSide(placement), direction === 'start', rtl); 9621 if (alignment) { 9622 list = list.map(side => side + "-" + alignment); 9623 if (flipAlignment) { 9624 list = list.concat(list.map(dist_floating_ui_utils_getOppositeAlignmentPlacement)); 9625 } 9626 } 9627 return list; 9628 } 9629 function floating_ui_utils_getOppositePlacement(placement) { 9630 return placement.replace(/left|right|bottom|top/g, side => floating_ui_utils_oppositeSideMap[side]); 9631 } 9632 function floating_ui_utils_expandPaddingObject(padding) { 9633 return { 9634 top: 0, 9635 right: 0, 9636 bottom: 0, 9637 left: 0, 9638 ...padding 9639 }; 9640 } 9641 function dist_floating_ui_utils_getPaddingObject(padding) { 9642 return typeof padding !== 'number' ? floating_ui_utils_expandPaddingObject(padding) : { 9643 top: padding, 9644 right: padding, 9645 bottom: padding, 9646 left: padding 9647 }; 9648 } 9649 function dist_floating_ui_utils_rectToClientRect(rect) { 9650 const { 9651 x, 9652 y, 9653 width, 9654 height 9655 } = rect; 9656 return { 9657 width, 9658 height, 9659 top: y, 9660 left: x, 9661 right: x + width, 9662 bottom: y + height, 9663 x, 9664 y 9665 }; 9666 } 9667 9668 9669 9670 ;// ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs 9671 function hasWindow() { 9672 return typeof window !== 'undefined'; 9673 } 9674 function getNodeName(node) { 9675 if (isNode(node)) { 9676 return (node.nodeName || '').toLowerCase(); 9677 } 9678 // Mocked nodes in testing environments may not be instances of Node. By 9679 // returning `#document` an infinite loop won't occur. 9680 // https://github.com/floating-ui/floating-ui/issues/2317 9681 return '#document'; 9682 } 9683 function floating_ui_utils_dom_getWindow(node) { 9684 var _node$ownerDocument; 9685 return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window; 9686 } 9687 function getDocumentElement(node) { 9688 var _ref; 9689 return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement; 9690 } 9691 function isNode(value) { 9692 if (!hasWindow()) { 9693 return false; 9694 } 9695 return value instanceof Node || value instanceof floating_ui_utils_dom_getWindow(value).Node; 9696 } 9697 function isElement(value) { 9698 if (!hasWindow()) { 9699 return false; 9700 } 9701 return value instanceof Element || value instanceof floating_ui_utils_dom_getWindow(value).Element; 9702 } 9703 function isHTMLElement(value) { 9704 if (!hasWindow()) { 9705 return false; 9706 } 9707 return value instanceof HTMLElement || value instanceof floating_ui_utils_dom_getWindow(value).HTMLElement; 9708 } 9709 function isShadowRoot(value) { 9710 if (!hasWindow() || typeof ShadowRoot === 'undefined') { 9711 return false; 9712 } 9713 return value instanceof ShadowRoot || value instanceof floating_ui_utils_dom_getWindow(value).ShadowRoot; 9714 } 9715 function isOverflowElement(element) { 9716 const { 9717 overflow, 9718 overflowX, 9719 overflowY, 9720 display 9721 } = floating_ui_utils_dom_getComputedStyle(element); 9722 return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); 9723 } 9724 function isTableElement(element) { 9725 return ['table', 'td', 'th'].includes(getNodeName(element)); 9726 } 9727 function isTopLayer(element) { 9728 return [':popover-open', ':modal'].some(selector => { 9729 try { 9730 return element.matches(selector); 9731 } catch (e) { 9732 return false; 9733 } 9734 }); 9735 } 9736 function isContainingBlock(elementOrCss) { 9737 const webkit = isWebKit(); 9738 const css = isElement(elementOrCss) ? floating_ui_utils_dom_getComputedStyle(elementOrCss) : elementOrCss; 9739 9740 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 9741 // https://drafts.csswg.org/css-transforms-2/#individual-transforms 9742 return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); 9743 } 9744 function getContainingBlock(element) { 9745 let currentNode = getParentNode(element); 9746 while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) { 9747 if (isContainingBlock(currentNode)) { 9748 return currentNode; 9749 } else if (isTopLayer(currentNode)) { 9750 return null; 9751 } 9752 currentNode = getParentNode(currentNode); 9753 } 9754 return null; 9755 } 9756 function isWebKit() { 9757 if (typeof CSS === 'undefined' || !CSS.supports) return false; 9758 return CSS.supports('-webkit-backdrop-filter', 'none'); 9759 } 9760 function isLastTraversableNode(node) { 9761 return ['html', 'body', '#document'].includes(getNodeName(node)); 9762 } 9763 function floating_ui_utils_dom_getComputedStyle(element) { 9764 return floating_ui_utils_dom_getWindow(element).getComputedStyle(element); 9765 } 9766 function getNodeScroll(element) { 9767 if (isElement(element)) { 9768 return { 9769 scrollLeft: element.scrollLeft, 9770 scrollTop: element.scrollTop 9771 }; 9772 } 9773 return { 9774 scrollLeft: element.scrollX, 9775 scrollTop: element.scrollY 9776 }; 9777 } 9778 function getParentNode(node) { 9779 if (getNodeName(node) === 'html') { 9780 return node; 9781 } 9782 const result = 9783 // Step into the shadow DOM of the parent of a slotted node. 9784 node.assignedSlot || 9785 // DOM Element detected. 9786 node.parentNode || 9787 // ShadowRoot detected. 9788 isShadowRoot(node) && node.host || 9789 // Fallback. 9790 getDocumentElement(node); 9791 return isShadowRoot(result) ? result.host : result; 9792 } 9793 function getNearestOverflowAncestor(node) { 9794 const parentNode = getParentNode(node); 9795 if (isLastTraversableNode(parentNode)) { 9796 return node.ownerDocument ? node.ownerDocument.body : node.body; 9797 } 9798 if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { 9799 return parentNode; 9800 } 9801 return getNearestOverflowAncestor(parentNode); 9802 } 9803 function getOverflowAncestors(node, list, traverseIframes) { 9804 var _node$ownerDocument2; 9805 if (list === void 0) { 9806 list = []; 9807 } 9808 if (traverseIframes === void 0) { 9809 traverseIframes = true; 9810 } 9811 const scrollableAncestor = getNearestOverflowAncestor(node); 9812 const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body); 9813 const win = floating_ui_utils_dom_getWindow(scrollableAncestor); 9814 if (isBody) { 9815 const frameElement = getFrameElement(win); 9816 return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []); 9817 } 9818 return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes)); 9819 } 9820 function getFrameElement(win) { 9821 return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null; 9822 } 9823 9824 9825 9826 ;// ./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs 9827 9828 9829 9830 9831 9832 9833 function getCssDimensions(element) { 9834 const css = floating_ui_utils_dom_getComputedStyle(element); 9835 // In testing environments, the `width` and `height` properties are empty 9836 // strings for SVG elements, returning NaN. Fallback to `0` in this case. 9837 let width = parseFloat(css.width) || 0; 9838 let height = parseFloat(css.height) || 0; 9839 const hasOffset = isHTMLElement(element); 9840 const offsetWidth = hasOffset ? element.offsetWidth : width; 9841 const offsetHeight = hasOffset ? element.offsetHeight : height; 9842 const shouldFallback = floating_ui_utils_round(width) !== offsetWidth || floating_ui_utils_round(height) !== offsetHeight; 9843 if (shouldFallback) { 9844 width = offsetWidth; 9845 height = offsetHeight; 9846 } 9847 return { 9848 width, 9849 height, 9850 $: shouldFallback 9851 }; 9852 } 9853 9854 function unwrapElement(element) { 9855 return !isElement(element) ? element.contextElement : element; 9856 } 9857 9858 function getScale(element) { 9859 const domElement = unwrapElement(element); 9860 if (!isHTMLElement(domElement)) { 9861 return floating_ui_utils_createCoords(1); 9862 } 9863 const rect = domElement.getBoundingClientRect(); 9864 const { 9865 width, 9866 height, 9867 $ 9868 } = getCssDimensions(domElement); 9869 let x = ($ ? floating_ui_utils_round(rect.width) : rect.width) / width; 9870 let y = ($ ? floating_ui_utils_round(rect.height) : rect.height) / height; 9871 9872 // 0, NaN, or Infinity should always fallback to 1. 9873 9874 if (!x || !Number.isFinite(x)) { 9875 x = 1; 9876 } 9877 if (!y || !Number.isFinite(y)) { 9878 y = 1; 9879 } 9880 return { 9881 x, 9882 y 9883 }; 9884 } 9885 9886 const noOffsets = /*#__PURE__*/floating_ui_utils_createCoords(0); 9887 function getVisualOffsets(element) { 9888 const win = floating_ui_utils_dom_getWindow(element); 9889 if (!isWebKit() || !win.visualViewport) { 9890 return noOffsets; 9891 } 9892 return { 9893 x: win.visualViewport.offsetLeft, 9894 y: win.visualViewport.offsetTop 9895 }; 9896 } 9897 function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) { 9898 if (isFixed === void 0) { 9899 isFixed = false; 9900 } 9901 if (!floatingOffsetParent || isFixed && floatingOffsetParent !== floating_ui_utils_dom_getWindow(element)) { 9902 return false; 9903 } 9904 return isFixed; 9905 } 9906 9907 function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) { 9908 if (includeScale === void 0) { 9909 includeScale = false; 9910 } 9911 if (isFixedStrategy === void 0) { 9912 isFixedStrategy = false; 9913 } 9914 const clientRect = element.getBoundingClientRect(); 9915 const domElement = unwrapElement(element); 9916 let scale = floating_ui_utils_createCoords(1); 9917 if (includeScale) { 9918 if (offsetParent) { 9919 if (isElement(offsetParent)) { 9920 scale = getScale(offsetParent); 9921 } 9922 } else { 9923 scale = getScale(element); 9924 } 9925 } 9926 const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : floating_ui_utils_createCoords(0); 9927 let x = (clientRect.left + visualOffsets.x) / scale.x; 9928 let y = (clientRect.top + visualOffsets.y) / scale.y; 9929 let width = clientRect.width / scale.x; 9930 let height = clientRect.height / scale.y; 9931 if (domElement) { 9932 const win = floating_ui_utils_dom_getWindow(domElement); 9933 const offsetWin = offsetParent && isElement(offsetParent) ? floating_ui_utils_dom_getWindow(offsetParent) : offsetParent; 9934 let currentWin = win; 9935 let currentIFrame = currentWin.frameElement; 9936 while (currentIFrame && offsetParent && offsetWin !== currentWin) { 9937 const iframeScale = getScale(currentIFrame); 9938 const iframeRect = currentIFrame.getBoundingClientRect(); 9939 const css = floating_ui_utils_dom_getComputedStyle(currentIFrame); 9940 const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; 9941 const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; 9942 x *= iframeScale.x; 9943 y *= iframeScale.y; 9944 width *= iframeScale.x; 9945 height *= iframeScale.y; 9946 x += left; 9947 y += top; 9948 currentWin = floating_ui_utils_dom_getWindow(currentIFrame); 9949 currentIFrame = currentWin.frameElement; 9950 } 9951 } 9952 return floating_ui_utils_rectToClientRect({ 9953 width, 9954 height, 9955 x, 9956 y 9957 }); 9958 } 9959 9960 const topLayerSelectors = [':popover-open', ':modal']; 9961 function floating_ui_dom_isTopLayer(floating) { 9962 return topLayerSelectors.some(selector => { 9963 try { 9964 return floating.matches(selector); 9965 } catch (e) { 9966 return false; 9967 } 9968 }); 9969 } 9970 9971 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) { 9972 let { 9973 elements, 9974 rect, 9975 offsetParent, 9976 strategy 9977 } = _ref; 9978 const isFixed = strategy === 'fixed'; 9979 const documentElement = getDocumentElement(offsetParent); 9980 const topLayer = elements ? floating_ui_dom_isTopLayer(elements.floating) : false; 9981 if (offsetParent === documentElement || topLayer && isFixed) { 9982 return rect; 9983 } 9984 let scroll = { 9985 scrollLeft: 0, 9986 scrollTop: 0 9987 }; 9988 let scale = floating_ui_utils_createCoords(1); 9989 const offsets = floating_ui_utils_createCoords(0); 9990 const isOffsetParentAnElement = isHTMLElement(offsetParent); 9991 if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { 9992 if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { 9993 scroll = getNodeScroll(offsetParent); 9994 } 9995 if (isHTMLElement(offsetParent)) { 9996 const offsetRect = getBoundingClientRect(offsetParent); 9997 scale = getScale(offsetParent); 9998 offsets.x = offsetRect.x + offsetParent.clientLeft; 9999 offsets.y = offsetRect.y + offsetParent.clientTop; 10000 } 10001 } 10002 return { 10003 width: rect.width * scale.x, 10004 height: rect.height * scale.y, 10005 x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x, 10006 y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y 10007 }; 10008 } 10009 10010 function getClientRects(element) { 10011 return Array.from(element.getClientRects()); 10012 } 10013 10014 function getWindowScrollBarX(element) { 10015 // If <html> has a CSS width greater than the viewport, then this will be 10016 // incorrect for RTL. 10017 return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft; 10018 } 10019 10020 // Gets the entire size of the scrollable document area, even extending outside 10021 // of the `<html>` and `<body>` rect bounds if horizontally scrollable. 10022 function getDocumentRect(element) { 10023 const html = getDocumentElement(element); 10024 const scroll = getNodeScroll(element); 10025 const body = element.ownerDocument.body; 10026 const width = dist_floating_ui_utils_max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth); 10027 const height = dist_floating_ui_utils_max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); 10028 let x = -scroll.scrollLeft + getWindowScrollBarX(element); 10029 const y = -scroll.scrollTop; 10030 if (floating_ui_utils_dom_getComputedStyle(body).direction === 'rtl') { 10031 x += dist_floating_ui_utils_max(html.clientWidth, body.clientWidth) - width; 10032 } 10033 return { 10034 width, 10035 height, 10036 x, 10037 y 10038 }; 10039 } 10040 10041 function getViewportRect(element, strategy) { 10042 const win = floating_ui_utils_dom_getWindow(element); 10043 const html = getDocumentElement(element); 10044 const visualViewport = win.visualViewport; 10045 let width = html.clientWidth; 10046 let height = html.clientHeight; 10047 let x = 0; 10048 let y = 0; 10049 if (visualViewport) { 10050 width = visualViewport.width; 10051 height = visualViewport.height; 10052 const visualViewportBased = isWebKit(); 10053 if (!visualViewportBased || visualViewportBased && strategy === 'fixed') { 10054 x = visualViewport.offsetLeft; 10055 y = visualViewport.offsetTop; 10056 } 10057 } 10058 return { 10059 width, 10060 height, 10061 x, 10062 y 10063 }; 10064 } 10065 10066 // Returns the inner client rect, subtracting scrollbars if present. 10067 function getInnerBoundingClientRect(element, strategy) { 10068 const clientRect = getBoundingClientRect(element, true, strategy === 'fixed'); 10069 const top = clientRect.top + element.clientTop; 10070 const left = clientRect.left + element.clientLeft; 10071 const scale = isHTMLElement(element) ? getScale(element) : floating_ui_utils_createCoords(1); 10072 const width = element.clientWidth * scale.x; 10073 const height = element.clientHeight * scale.y; 10074 const x = left * scale.x; 10075 const y = top * scale.y; 10076 return { 10077 width, 10078 height, 10079 x, 10080 y 10081 }; 10082 } 10083 function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) { 10084 let rect; 10085 if (clippingAncestor === 'viewport') { 10086 rect = getViewportRect(element, strategy); 10087 } else if (clippingAncestor === 'document') { 10088 rect = getDocumentRect(getDocumentElement(element)); 10089 } else if (isElement(clippingAncestor)) { 10090 rect = getInnerBoundingClientRect(clippingAncestor, strategy); 10091 } else { 10092 const visualOffsets = getVisualOffsets(element); 10093 rect = { 10094 ...clippingAncestor, 10095 x: clippingAncestor.x - visualOffsets.x, 10096 y: clippingAncestor.y - visualOffsets.y 10097 }; 10098 } 10099 return floating_ui_utils_rectToClientRect(rect); 10100 } 10101 function hasFixedPositionAncestor(element, stopNode) { 10102 const parentNode = getParentNode(element); 10103 if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { 10104 return false; 10105 } 10106 return floating_ui_utils_dom_getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); 10107 } 10108 10109 // A "clipping ancestor" is an `overflow` element with the characteristic of 10110 // clipping (or hiding) child elements. This returns all clipping ancestors 10111 // of the given element up the tree. 10112 function getClippingElementAncestors(element, cache) { 10113 const cachedResult = cache.get(element); 10114 if (cachedResult) { 10115 return cachedResult; 10116 } 10117 let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); 10118 let currentContainingBlockComputedStyle = null; 10119 const elementIsFixed = floating_ui_utils_dom_getComputedStyle(element).position === 'fixed'; 10120 let currentNode = elementIsFixed ? getParentNode(element) : element; 10121 10122 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 10123 while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { 10124 const computedStyle = floating_ui_utils_dom_getComputedStyle(currentNode); 10125 const currentNodeIsContaining = isContainingBlock(currentNode); 10126 if (!currentNodeIsContaining && computedStyle.position === 'fixed') { 10127 currentContainingBlockComputedStyle = null; 10128 } 10129 const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode); 10130 if (shouldDropCurrentNode) { 10131 // Drop non-containing blocks. 10132 result = result.filter(ancestor => ancestor !== currentNode); 10133 } else { 10134 // Record last containing block for next iteration. 10135 currentContainingBlockComputedStyle = computedStyle; 10136 } 10137 currentNode = getParentNode(currentNode); 10138 } 10139 cache.set(element, result); 10140 return result; 10141 } 10142 10143 // Gets the maximum area that the element is visible in due to any number of 10144 // clipping ancestors. 10145 function getClippingRect(_ref) { 10146 let { 10147 element, 10148 boundary, 10149 rootBoundary, 10150 strategy 10151 } = _ref; 10152 const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary); 10153 const clippingAncestors = [...elementClippingAncestors, rootBoundary]; 10154 const firstClippingAncestor = clippingAncestors[0]; 10155 const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { 10156 const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); 10157 accRect.top = dist_floating_ui_utils_max(rect.top, accRect.top); 10158 accRect.right = dist_floating_ui_utils_min(rect.right, accRect.right); 10159 accRect.bottom = dist_floating_ui_utils_min(rect.bottom, accRect.bottom); 10160 accRect.left = dist_floating_ui_utils_max(rect.left, accRect.left); 10161 return accRect; 10162 }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); 10163 return { 10164 width: clippingRect.right - clippingRect.left, 10165 height: clippingRect.bottom - clippingRect.top, 10166 x: clippingRect.left, 10167 y: clippingRect.top 10168 }; 10169 } 10170 10171 function getDimensions(element) { 10172 const { 10173 width, 10174 height 10175 } = getCssDimensions(element); 10176 return { 10177 width, 10178 height 10179 }; 10180 } 10181 10182 function getRectRelativeToOffsetParent(element, offsetParent, strategy) { 10183 const isOffsetParentAnElement = isHTMLElement(offsetParent); 10184 const documentElement = getDocumentElement(offsetParent); 10185 const isFixed = strategy === 'fixed'; 10186 const rect = getBoundingClientRect(element, true, isFixed, offsetParent); 10187 let scroll = { 10188 scrollLeft: 0, 10189 scrollTop: 0 10190 }; 10191 const offsets = floating_ui_utils_createCoords(0); 10192 if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { 10193 if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { 10194 scroll = getNodeScroll(offsetParent); 10195 } 10196 if (isOffsetParentAnElement) { 10197 const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent); 10198 offsets.x = offsetRect.x + offsetParent.clientLeft; 10199 offsets.y = offsetRect.y + offsetParent.clientTop; 10200 } else if (documentElement) { 10201 offsets.x = getWindowScrollBarX(documentElement); 10202 } 10203 } 10204 const x = rect.left + scroll.scrollLeft - offsets.x; 10205 const y = rect.top + scroll.scrollTop - offsets.y; 10206 return { 10207 x, 10208 y, 10209 width: rect.width, 10210 height: rect.height 10211 }; 10212 } 10213 10214 function getTrueOffsetParent(element, polyfill) { 10215 if (!isHTMLElement(element) || floating_ui_utils_dom_getComputedStyle(element).position === 'fixed') { 10216 return null; 10217 } 10218 if (polyfill) { 10219 return polyfill(element); 10220 } 10221 return element.offsetParent; 10222 } 10223 10224 // Gets the closest ancestor positioned element. Handles some edge cases, 10225 // such as table ancestors and cross browser bugs. 10226 function getOffsetParent(element, polyfill) { 10227 const window = floating_ui_utils_dom_getWindow(element); 10228 if (!isHTMLElement(element) || floating_ui_dom_isTopLayer(element)) { 10229 return window; 10230 } 10231 let offsetParent = getTrueOffsetParent(element, polyfill); 10232 while (offsetParent && isTableElement(offsetParent) && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static') { 10233 offsetParent = getTrueOffsetParent(offsetParent, polyfill); 10234 } 10235 if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) { 10236 return window; 10237 } 10238 return offsetParent || getContainingBlock(element) || window; 10239 } 10240 10241 const getElementRects = async function (data) { 10242 const getOffsetParentFn = this.getOffsetParent || getOffsetParent; 10243 const getDimensionsFn = this.getDimensions; 10244 return { 10245 reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy), 10246 floating: { 10247 x: 0, 10248 y: 0, 10249 ...(await getDimensionsFn(data.floating)) 10250 } 10251 }; 10252 }; 10253 10254 function isRTL(element) { 10255 return floating_ui_utils_dom_getComputedStyle(element).direction === 'rtl'; 10256 } 10257 10258 const platform = { 10259 convertOffsetParentRelativeRectToViewportRelativeRect, 10260 getDocumentElement: getDocumentElement, 10261 getClippingRect, 10262 getOffsetParent, 10263 getElementRects, 10264 getClientRects, 10265 getDimensions, 10266 getScale, 10267 isElement: isElement, 10268 isRTL 10269 }; 10270 10271 // https://samthor.au/2021/observing-dom/ 10272 function observeMove(element, onMove) { 10273 let io = null; 10274 let timeoutId; 10275 const root = getDocumentElement(element); 10276 function cleanup() { 10277 var _io; 10278 clearTimeout(timeoutId); 10279 (_io = io) == null || _io.disconnect(); 10280 io = null; 10281 } 10282 function refresh(skip, threshold) { 10283 if (skip === void 0) { 10284 skip = false; 10285 } 10286 if (threshold === void 0) { 10287 threshold = 1; 10288 } 10289 cleanup(); 10290 const { 10291 left, 10292 top, 10293 width, 10294 height 10295 } = element.getBoundingClientRect(); 10296 if (!skip) { 10297 onMove(); 10298 } 10299 if (!width || !height) { 10300 return; 10301 } 10302 const insetTop = floating_ui_utils_floor(top); 10303 const insetRight = floating_ui_utils_floor(root.clientWidth - (left + width)); 10304 const insetBottom = floating_ui_utils_floor(root.clientHeight - (top + height)); 10305 const insetLeft = floating_ui_utils_floor(left); 10306 const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px"; 10307 const options = { 10308 rootMargin, 10309 threshold: dist_floating_ui_utils_max(0, dist_floating_ui_utils_min(1, threshold)) || 1 10310 }; 10311 let isFirstUpdate = true; 10312 function handleObserve(entries) { 10313 const ratio = entries[0].intersectionRatio; 10314 if (ratio !== threshold) { 10315 if (!isFirstUpdate) { 10316 return refresh(); 10317 } 10318 if (!ratio) { 10319 timeoutId = setTimeout(() => { 10320 refresh(false, 1e-7); 10321 }, 100); 10322 } else { 10323 refresh(false, ratio); 10324 } 10325 } 10326 isFirstUpdate = false; 10327 } 10328 10329 // Older browsers don't support a `document` as the root and will throw an 10330 // error. 10331 try { 10332 io = new IntersectionObserver(handleObserve, { 10333 ...options, 10334 // Handle <iframe>s 10335 root: root.ownerDocument 10336 }); 10337 } catch (e) { 10338 io = new IntersectionObserver(handleObserve, options); 10339 } 10340 io.observe(element); 10341 } 10342 refresh(true); 10343 return cleanup; 10344 } 10345 10346 /** 10347 * Automatically updates the position of the floating element when necessary. 10348 * Should only be called when the floating element is mounted on the DOM or 10349 * visible on the screen. 10350 * @returns cleanup function that should be invoked when the floating element is 10351 * removed from the DOM or hidden from the screen. 10352 * @see https://floating-ui.com/docs/autoUpdate 10353 */ 10354 function autoUpdate(reference, floating, update, options) { 10355 if (options === void 0) { 10356 options = {}; 10357 } 10358 const { 10359 ancestorScroll = true, 10360 ancestorResize = true, 10361 elementResize = typeof ResizeObserver === 'function', 10362 layoutShift = typeof IntersectionObserver === 'function', 10363 animationFrame = false 10364 } = options; 10365 const referenceEl = unwrapElement(reference); 10366 const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : []; 10367 ancestors.forEach(ancestor => { 10368 ancestorScroll && ancestor.addEventListener('scroll', update, { 10369 passive: true 10370 }); 10371 ancestorResize && ancestor.addEventListener('resize', update); 10372 }); 10373 const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null; 10374 let reobserveFrame = -1; 10375 let resizeObserver = null; 10376 if (elementResize) { 10377 resizeObserver = new ResizeObserver(_ref => { 10378 let [firstEntry] = _ref; 10379 if (firstEntry && firstEntry.target === referenceEl && resizeObserver) { 10380 // Prevent update loops when using the `size` middleware. 10381 // https://github.com/floating-ui/floating-ui/issues/1740 10382 resizeObserver.unobserve(floating); 10383 cancelAnimationFrame(reobserveFrame); 10384 reobserveFrame = requestAnimationFrame(() => { 10385 var _resizeObserver; 10386 (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating); 10387 }); 10388 } 10389 update(); 10390 }); 10391 if (referenceEl && !animationFrame) { 10392 resizeObserver.observe(referenceEl); 10393 } 10394 resizeObserver.observe(floating); 10395 } 10396 let frameId; 10397 let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null; 10398 if (animationFrame) { 10399 frameLoop(); 10400 } 10401 function frameLoop() { 10402 const nextRefRect = getBoundingClientRect(reference); 10403 if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) { 10404 update(); 10405 } 10406 prevRefRect = nextRefRect; 10407 frameId = requestAnimationFrame(frameLoop); 10408 } 10409 update(); 10410 return () => { 10411 var _resizeObserver2; 10412 ancestors.forEach(ancestor => { 10413 ancestorScroll && ancestor.removeEventListener('scroll', update); 10414 ancestorResize && ancestor.removeEventListener('resize', update); 10415 }); 10416 cleanupIo == null || cleanupIo(); 10417 (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect(); 10418 resizeObserver = null; 10419 if (animationFrame) { 10420 cancelAnimationFrame(frameId); 10421 } 10422 }; 10423 } 10424 10425 /** 10426 * Optimizes the visibility of the floating element by choosing the placement 10427 * that has the most space available automatically, without needing to specify a 10428 * preferred placement. Alternative to `flip`. 10429 * @see https://floating-ui.com/docs/autoPlacement 10430 */ 10431 const floating_ui_dom_autoPlacement = (/* unused pure expression or super */ null && (autoPlacement$1)); 10432 10433 /** 10434 * Optimizes the visibility of the floating element by shifting it in order to 10435 * keep it in view when it will overflow the clipping boundary. 10436 * @see https://floating-ui.com/docs/shift 10437 */ 10438 const floating_ui_dom_shift = shift; 10439 10440 /** 10441 * Optimizes the visibility of the floating element by flipping the `placement` 10442 * in order to keep it in view when the preferred placement(s) will overflow the 10443 * clipping boundary. Alternative to `autoPlacement`. 10444 * @see https://floating-ui.com/docs/flip 10445 */ 10446 const floating_ui_dom_flip = flip; 10447 10448 /** 10449 * Provides data that allows you to change the size of the floating element — 10450 * for instance, prevent it from overflowing the clipping boundary or match the 10451 * width of the reference element. 10452 * @see https://floating-ui.com/docs/size 10453 */ 10454 const floating_ui_dom_size = size; 10455 10456 /** 10457 * Provides data to hide the floating element in applicable situations, such as 10458 * when it is not in the same clipping context as the reference element. 10459 * @see https://floating-ui.com/docs/hide 10460 */ 10461 const floating_ui_dom_hide = (/* unused pure expression or super */ null && (hide$1)); 10462 10463 /** 10464 * Provides data to position an inner element of the floating element so that it 10465 * appears centered to the reference element. 10466 * @see https://floating-ui.com/docs/arrow 10467 */ 10468 const floating_ui_dom_arrow = arrow; 10469 10470 /** 10471 * Provides improved positioning for inline reference elements that can span 10472 * over multiple lines, such as hyperlinks or range selections. 10473 * @see https://floating-ui.com/docs/inline 10474 */ 10475 const floating_ui_dom_inline = (/* unused pure expression or super */ null && (inline$1)); 10476 10477 /** 10478 * Built-in `limiter` that will stop `shift()` at a certain point. 10479 */ 10480 const floating_ui_dom_limitShift = limitShift; 10481 10482 /** 10483 * Computes the `x` and `y` coordinates that will place the floating element 10484 * next to a given reference element. 10485 */ 10486 const floating_ui_dom_computePosition = (reference, floating, options) => { 10487 // This caches the expensive `getClippingElementAncestors` function so that 10488 // multiple lifecycle resets re-use the same result. It only lives for a 10489 // single call. If other functions become expensive, we can add them as well. 10490 const cache = new Map(); 10491 const mergedOptions = { 10492 platform, 10493 ...options 10494 }; 10495 const platformWithCache = { 10496 ...mergedOptions.platform, 10497 _c: cache 10498 }; 10499 return computePosition(reference, floating, { 10500 ...mergedOptions, 10501 platform: platformWithCache 10502 }); 10503 }; 10504 10505 10506 10507 ;// ./node_modules/@ariakit/react-core/esm/__chunks/T6C2RYFI.js 10508 "use client"; 10509 10510 10511 10512 10513 10514 10515 // src/popover/popover.tsx 10516 10517 10518 10519 10520 var T6C2RYFI_TagName = "div"; 10521 function createDOMRect(x = 0, y = 0, width = 0, height = 0) { 10522 if (typeof DOMRect === "function") { 10523 return new DOMRect(x, y, width, height); 10524 } 10525 const rect = { 10526 x, 10527 y, 10528 width, 10529 height, 10530 top: y, 10531 right: x + width, 10532 bottom: y + height, 10533 left: x 10534 }; 10535 return _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, rect), { toJSON: () => rect }); 10536 } 10537 function getDOMRect(anchorRect) { 10538 if (!anchorRect) return createDOMRect(); 10539 const { x, y, width, height } = anchorRect; 10540 return createDOMRect(x, y, width, height); 10541 } 10542 function getAnchorElement(anchorElement, getAnchorRect) { 10543 const contextElement = anchorElement || void 0; 10544 return { 10545 contextElement, 10546 getBoundingClientRect: () => { 10547 const anchor = anchorElement; 10548 const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor); 10549 if (anchorRect || !anchor) { 10550 return getDOMRect(anchorRect); 10551 } 10552 return anchor.getBoundingClientRect(); 10553 } 10554 }; 10555 } 10556 function isValidPlacement(flip2) { 10557 return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2); 10558 } 10559 function roundByDPR(value) { 10560 const dpr = window.devicePixelRatio || 1; 10561 return Math.round(value * dpr) / dpr; 10562 } 10563 function getOffsetMiddleware(arrowElement, props) { 10564 return offset(({ placement }) => { 10565 var _a; 10566 const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2; 10567 const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset; 10568 const hasAlignment = !!placement.split("-")[1]; 10569 return { 10570 crossAxis: !hasAlignment ? props.shift : void 0, 10571 mainAxis: finalGutter, 10572 alignmentAxis: props.shift 10573 }; 10574 }); 10575 } 10576 function getFlipMiddleware(props) { 10577 if (props.flip === false) return; 10578 const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0; 10579 invariant( 10580 !fallbackPlacements || fallbackPlacements.every(isValidPlacement), 10581 false && 0 10582 ); 10583 return floating_ui_dom_flip({ 10584 padding: props.overflowPadding, 10585 fallbackPlacements 10586 }); 10587 } 10588 function getShiftMiddleware(props) { 10589 if (!props.slide && !props.overlap) return; 10590 return floating_ui_dom_shift({ 10591 mainAxis: props.slide, 10592 crossAxis: props.overlap, 10593 padding: props.overflowPadding, 10594 limiter: floating_ui_dom_limitShift() 10595 }); 10596 } 10597 function getSizeMiddleware(props) { 10598 return floating_ui_dom_size({ 10599 padding: props.overflowPadding, 10600 apply({ elements, availableWidth, availableHeight, rects }) { 10601 const wrapper = elements.floating; 10602 const referenceWidth = Math.round(rects.reference.width); 10603 availableWidth = Math.floor(availableWidth); 10604 availableHeight = Math.floor(availableHeight); 10605 wrapper.style.setProperty( 10606 "--popover-anchor-width", 10607 `$referenceWidth}px` 10608 ); 10609 wrapper.style.setProperty( 10610 "--popover-available-width", 10611 `$availableWidth}px` 10612 ); 10613 wrapper.style.setProperty( 10614 "--popover-available-height", 10615 `$availableHeight}px` 10616 ); 10617 if (props.sameWidth) { 10618 wrapper.style.width = `$referenceWidth}px`; 10619 } 10620 if (props.fitViewport) { 10621 wrapper.style.maxWidth = `$availableWidth}px`; 10622 wrapper.style.maxHeight = `$availableHeight}px`; 10623 } 10624 } 10625 }); 10626 } 10627 function getArrowMiddleware(arrowElement, props) { 10628 if (!arrowElement) return; 10629 return floating_ui_dom_arrow({ 10630 element: arrowElement, 10631 padding: props.arrowPadding 10632 }); 10633 } 10634 var usePopover = createHook( 10635 function usePopover2(_a) { 10636 var _b = _a, { 10637 store, 10638 modal = false, 10639 portal = !!modal, 10640 preserveTabOrder = true, 10641 autoFocusOnShow = true, 10642 wrapperProps, 10643 fixed = false, 10644 flip: flip2 = true, 10645 shift: shift2 = 0, 10646 slide = true, 10647 overlap = false, 10648 sameWidth = false, 10649 fitViewport = false, 10650 gutter, 10651 arrowPadding = 4, 10652 overflowPadding = 8, 10653 getAnchorRect, 10654 updatePosition 10655 } = _b, props = __objRest(_b, [ 10656 "store", 10657 "modal", 10658 "portal", 10659 "preserveTabOrder", 10660 "autoFocusOnShow", 10661 "wrapperProps", 10662 "fixed", 10663 "flip", 10664 "shift", 10665 "slide", 10666 "overlap", 10667 "sameWidth", 10668 "fitViewport", 10669 "gutter", 10670 "arrowPadding", 10671 "overflowPadding", 10672 "getAnchorRect", 10673 "updatePosition" 10674 ]); 10675 const context = usePopoverProviderContext(); 10676 store = store || context; 10677 invariant( 10678 store, 10679 false && 0 10680 ); 10681 const arrowElement = store.useState("arrowElement"); 10682 const anchorElement = store.useState("anchorElement"); 10683 const disclosureElement = store.useState("disclosureElement"); 10684 const popoverElement = store.useState("popoverElement"); 10685 const contentElement = store.useState("contentElement"); 10686 const placement = store.useState("placement"); 10687 const mounted = store.useState("mounted"); 10688 const rendered = store.useState("rendered"); 10689 const defaultArrowElementRef = (0,external_React_.useRef)(null); 10690 const [positioned, setPositioned] = (0,external_React_.useState)(false); 10691 const { portalRef, domReady } = usePortalRef(portal, props.portalRef); 10692 const getAnchorRectProp = useEvent(getAnchorRect); 10693 const updatePositionProp = useEvent(updatePosition); 10694 const hasCustomUpdatePosition = !!updatePosition; 10695 useSafeLayoutEffect(() => { 10696 if (!(popoverElement == null ? void 0 : popoverElement.isConnected)) return; 10697 popoverElement.style.setProperty( 10698 "--popover-overflow-padding", 10699 `$overflowPadding}px` 10700 ); 10701 const anchor = getAnchorElement(anchorElement, getAnchorRectProp); 10702 const updatePosition2 = async () => { 10703 if (!mounted) return; 10704 if (!arrowElement) { 10705 defaultArrowElementRef.current = defaultArrowElementRef.current || document.createElement("div"); 10706 } 10707 const arrow2 = arrowElement || defaultArrowElementRef.current; 10708 const middleware = [ 10709 getOffsetMiddleware(arrow2, { gutter, shift: shift2 }), 10710 getFlipMiddleware({ flip: flip2, overflowPadding }), 10711 getShiftMiddleware({ slide, shift: shift2, overlap, overflowPadding }), 10712 getArrowMiddleware(arrow2, { arrowPadding }), 10713 getSizeMiddleware({ 10714 sameWidth, 10715 fitViewport, 10716 overflowPadding 10717 }) 10718 ]; 10719 const pos = await floating_ui_dom_computePosition(anchor, popoverElement, { 10720 placement, 10721 strategy: fixed ? "fixed" : "absolute", 10722 middleware 10723 }); 10724 store == null ? void 0 : store.setState("currentPlacement", pos.placement); 10725 setPositioned(true); 10726 const x = roundByDPR(pos.x); 10727 const y = roundByDPR(pos.y); 10728 Object.assign(popoverElement.style, { 10729 top: "0", 10730 left: "0", 10731 transform: `translate3d($x}px,$y}px,0)` 10732 }); 10733 if (arrow2 && pos.middlewareData.arrow) { 10734 const { x: arrowX, y: arrowY } = pos.middlewareData.arrow; 10735 const side = pos.placement.split("-")[0]; 10736 const centerX = arrow2.clientWidth / 2; 10737 const centerY = arrow2.clientHeight / 2; 10738 const originX = arrowX != null ? arrowX + centerX : -centerX; 10739 const originY = arrowY != null ? arrowY + centerY : -centerY; 10740 popoverElement.style.setProperty( 10741 "--popover-transform-origin", 10742 { 10743 top: `$originX}px calc(100% + $centerY}px)`, 10744 bottom: `$originX}px ${-centerY}px`, 10745 left: `calc(100% + $centerX}px) $originY}px`, 10746 right: `${-centerX}px $originY}px` 10747 }[side] 10748 ); 10749 Object.assign(arrow2.style, { 10750 left: arrowX != null ? `$arrowX}px` : "", 10751 top: arrowY != null ? `$arrowY}px` : "", 10752 [side]: "100%" 10753 }); 10754 } 10755 }; 10756 const update = async () => { 10757 if (hasCustomUpdatePosition) { 10758 await updatePositionProp({ updatePosition: updatePosition2 }); 10759 setPositioned(true); 10760 } else { 10761 await updatePosition2(); 10762 } 10763 }; 10764 const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, { 10765 // JSDOM doesn't support ResizeObserver 10766 elementResize: typeof ResizeObserver === "function" 10767 }); 10768 return () => { 10769 setPositioned(false); 10770 cancelAutoUpdate(); 10771 }; 10772 }, [ 10773 store, 10774 rendered, 10775 popoverElement, 10776 arrowElement, 10777 anchorElement, 10778 popoverElement, 10779 placement, 10780 mounted, 10781 domReady, 10782 fixed, 10783 flip2, 10784 shift2, 10785 slide, 10786 overlap, 10787 sameWidth, 10788 fitViewport, 10789 gutter, 10790 arrowPadding, 10791 overflowPadding, 10792 getAnchorRectProp, 10793 hasCustomUpdatePosition, 10794 updatePositionProp 10795 ]); 10796 useSafeLayoutEffect(() => { 10797 if (!mounted) return; 10798 if (!domReady) return; 10799 if (!(popoverElement == null ? void 0 : popoverElement.isConnected)) return; 10800 if (!(contentElement == null ? void 0 : contentElement.isConnected)) return; 10801 const applyZIndex = () => { 10802 popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex; 10803 }; 10804 applyZIndex(); 10805 let raf = requestAnimationFrame(() => { 10806 raf = requestAnimationFrame(applyZIndex); 10807 }); 10808 return () => cancelAnimationFrame(raf); 10809 }, [mounted, domReady, popoverElement, contentElement]); 10810 const position = fixed ? "fixed" : "absolute"; 10811 props = useWrapElement( 10812 props, 10813 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 10814 "div", 10815 _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, wrapperProps), { 10816 style: _3YLGPPWQ_spreadValues({ 10817 // https://floating-ui.com/docs/computeposition#initial-layout 10818 position, 10819 top: 0, 10820 left: 0, 10821 width: "max-content" 10822 }, wrapperProps == null ? void 0 : wrapperProps.style), 10823 ref: store == null ? void 0 : store.setPopoverElement, 10824 children: element 10825 }) 10826 ), 10827 [store, position, wrapperProps] 10828 ); 10829 props = useWrapElement( 10830 props, 10831 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }), 10832 [store] 10833 ); 10834 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 10835 // data-placing is not part of the public API. We're setting this here so 10836 // we can wait for the popover to be positioned before other components 10837 // move focus into it. For example, this attribute is observed by the 10838 // Combobox component with the autoSelect behavior. 10839 "data-placing": !positioned || void 0 10840 }, props), { 10841 style: _3YLGPPWQ_spreadValues({ 10842 position: "relative" 10843 }, props.style) 10844 }); 10845 props = useDialog(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 10846 store, 10847 modal, 10848 portal, 10849 preserveTabOrder, 10850 preserveTabOrderAnchor: disclosureElement || anchorElement, 10851 autoFocusOnShow: positioned && autoFocusOnShow 10852 }, props), { 10853 portalRef 10854 })); 10855 return props; 10856 } 10857 ); 10858 var Popover = createDialogComponent( 10859 forwardRef2(function Popover2(props) { 10860 const htmlProps = usePopover(props); 10861 return LMDWO4NN_createElement(T6C2RYFI_TagName, htmlProps); 10862 }), 10863 usePopoverProviderContext 10864 ); 10865 10866 10867 10868 ;// ./node_modules/@ariakit/react-core/esm/__chunks/KQKDTOT4.js 10869 "use client"; 10870 10871 10872 10873 10874 10875 10876 10877 10878 // src/hovercard/hovercard.tsx 10879 10880 10881 10882 10883 10884 10885 10886 var KQKDTOT4_TagName = "div"; 10887 function isMovingOnHovercard(target, card, anchor, nested) { 10888 if (hasFocusWithin(card)) return true; 10889 if (!target) return false; 10890 if (contains(card, target)) return true; 10891 if (anchor && contains(anchor, target)) return true; 10892 if (nested == null ? void 0 : nested.some((card2) => isMovingOnHovercard(target, card2, anchor))) { 10893 return true; 10894 } 10895 return false; 10896 } 10897 function useAutoFocusOnHide(_a) { 10898 var _b = _a, { 10899 store 10900 } = _b, props = __objRest(_b, [ 10901 "store" 10902 ]); 10903 const [autoFocusOnHide, setAutoFocusOnHide] = (0,external_React_.useState)(false); 10904 const mounted = store.useState("mounted"); 10905 (0,external_React_.useEffect)(() => { 10906 if (!mounted) { 10907 setAutoFocusOnHide(false); 10908 } 10909 }, [mounted]); 10910 const onFocusProp = props.onFocus; 10911 const onFocus = useEvent((event) => { 10912 onFocusProp == null ? void 0 : onFocusProp(event); 10913 if (event.defaultPrevented) return; 10914 setAutoFocusOnHide(true); 10915 }); 10916 const finalFocusRef = (0,external_React_.useRef)(null); 10917 (0,external_React_.useEffect)(() => { 10918 return sync(store, ["anchorElement"], (state) => { 10919 finalFocusRef.current = state.anchorElement; 10920 }); 10921 }, []); 10922 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 10923 autoFocusOnHide, 10924 finalFocus: finalFocusRef 10925 }, props), { 10926 onFocus 10927 }); 10928 return props; 10929 } 10930 var NestedHovercardContext = (0,external_React_.createContext)(null); 10931 var useHovercard = createHook( 10932 function useHovercard2(_a) { 10933 var _b = _a, { 10934 store, 10935 modal = false, 10936 portal = !!modal, 10937 hideOnEscape = true, 10938 hideOnHoverOutside = true, 10939 disablePointerEventsOnApproach = !!hideOnHoverOutside 10940 } = _b, props = __objRest(_b, [ 10941 "store", 10942 "modal", 10943 "portal", 10944 "hideOnEscape", 10945 "hideOnHoverOutside", 10946 "disablePointerEventsOnApproach" 10947 ]); 10948 const context = useHovercardProviderContext(); 10949 store = store || context; 10950 invariant( 10951 store, 10952 false && 0 10953 ); 10954 const ref = (0,external_React_.useRef)(null); 10955 const [nestedHovercards, setNestedHovercards] = (0,external_React_.useState)([]); 10956 const hideTimeoutRef = (0,external_React_.useRef)(0); 10957 const enterPointRef = (0,external_React_.useRef)(null); 10958 const { portalRef, domReady } = usePortalRef(portal, props.portalRef); 10959 const isMouseMoving = useIsMouseMoving(); 10960 const mayHideOnHoverOutside = !!hideOnHoverOutside; 10961 const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside); 10962 const mayDisablePointerEvents = !!disablePointerEventsOnApproach; 10963 const disablePointerEventsProp = useBooleanEvent( 10964 disablePointerEventsOnApproach 10965 ); 10966 const open = store.useState("open"); 10967 const mounted = store.useState("mounted"); 10968 (0,external_React_.useEffect)(() => { 10969 if (!domReady) return; 10970 if (!mounted) return; 10971 if (!mayHideOnHoverOutside && !mayDisablePointerEvents) return; 10972 const element = ref.current; 10973 if (!element) return; 10974 const onMouseMove = (event) => { 10975 if (!store) return; 10976 if (!isMouseMoving()) return; 10977 const { anchorElement, hideTimeout, timeout } = store.getState(); 10978 const enterPoint = enterPointRef.current; 10979 const [target] = event.composedPath(); 10980 const anchor = anchorElement; 10981 if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) { 10982 enterPointRef.current = target && anchor && contains(anchor, target) ? getEventPoint(event) : null; 10983 window.clearTimeout(hideTimeoutRef.current); 10984 hideTimeoutRef.current = 0; 10985 return; 10986 } 10987 if (hideTimeoutRef.current) return; 10988 if (enterPoint) { 10989 const currentPoint = getEventPoint(event); 10990 const polygon = getElementPolygon(element, enterPoint); 10991 if (isPointInPolygon(currentPoint, polygon)) { 10992 enterPointRef.current = currentPoint; 10993 if (!disablePointerEventsProp(event)) return; 10994 event.preventDefault(); 10995 event.stopPropagation(); 10996 return; 10997 } 10998 } 10999 if (!hideOnHoverOutsideProp(event)) return; 11000 hideTimeoutRef.current = window.setTimeout(() => { 11001 hideTimeoutRef.current = 0; 11002 store == null ? void 0 : store.hide(); 11003 }, hideTimeout != null ? hideTimeout : timeout); 11004 }; 11005 return chain( 11006 addGlobalEventListener("mousemove", onMouseMove, true), 11007 () => clearTimeout(hideTimeoutRef.current) 11008 ); 11009 }, [ 11010 store, 11011 isMouseMoving, 11012 domReady, 11013 mounted, 11014 mayHideOnHoverOutside, 11015 mayDisablePointerEvents, 11016 nestedHovercards, 11017 disablePointerEventsProp, 11018 hideOnHoverOutsideProp 11019 ]); 11020 (0,external_React_.useEffect)(() => { 11021 if (!domReady) return; 11022 if (!mounted) return; 11023 if (!mayDisablePointerEvents) return; 11024 const disableEvent = (event) => { 11025 const element = ref.current; 11026 if (!element) return; 11027 const enterPoint = enterPointRef.current; 11028 if (!enterPoint) return; 11029 const polygon = getElementPolygon(element, enterPoint); 11030 if (isPointInPolygon(getEventPoint(event), polygon)) { 11031 if (!disablePointerEventsProp(event)) return; 11032 event.preventDefault(); 11033 event.stopPropagation(); 11034 } 11035 }; 11036 return chain( 11037 // Note: we may need to add pointer events here in the future. 11038 addGlobalEventListener("mouseenter", disableEvent, true), 11039 addGlobalEventListener("mouseover", disableEvent, true), 11040 addGlobalEventListener("mouseout", disableEvent, true), 11041 addGlobalEventListener("mouseleave", disableEvent, true) 11042 ); 11043 }, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]); 11044 (0,external_React_.useEffect)(() => { 11045 if (!domReady) return; 11046 if (open) return; 11047 store == null ? void 0 : store.setAutoFocusOnShow(false); 11048 }, [store, domReady, open]); 11049 const openRef = useLiveRef(open); 11050 (0,external_React_.useEffect)(() => { 11051 if (!domReady) return; 11052 return () => { 11053 if (!openRef.current) { 11054 store == null ? void 0 : store.setAutoFocusOnShow(false); 11055 } 11056 }; 11057 }, [store, domReady]); 11058 const registerOnParent = (0,external_React_.useContext)(NestedHovercardContext); 11059 useSafeLayoutEffect(() => { 11060 if (modal) return; 11061 if (!portal) return; 11062 if (!mounted) return; 11063 if (!domReady) return; 11064 const element = ref.current; 11065 if (!element) return; 11066 return registerOnParent == null ? void 0 : registerOnParent(element); 11067 }, [modal, portal, mounted, domReady]); 11068 const registerNestedHovercard = (0,external_React_.useCallback)( 11069 (element) => { 11070 setNestedHovercards((prevElements) => [...prevElements, element]); 11071 const parentUnregister = registerOnParent == null ? void 0 : registerOnParent(element); 11072 return () => { 11073 setNestedHovercards( 11074 (prevElements) => prevElements.filter((item) => item !== element) 11075 ); 11076 parentUnregister == null ? void 0 : parentUnregister(); 11077 }; 11078 }, 11079 [registerOnParent] 11080 ); 11081 props = useWrapElement( 11082 props, 11083 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }), 11084 [store, registerNestedHovercard] 11085 ); 11086 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 11087 ref: useMergeRefs(ref, props.ref) 11088 }); 11089 props = useAutoFocusOnHide(_3YLGPPWQ_spreadValues({ store }, props)); 11090 const autoFocusOnShow = store.useState( 11091 (state) => modal || state.autoFocusOnShow 11092 ); 11093 props = usePopover(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 11094 store, 11095 modal, 11096 portal, 11097 autoFocusOnShow 11098 }, props), { 11099 portalRef, 11100 hideOnEscape(event) { 11101 if (isFalsyBooleanCallback(hideOnEscape, event)) return false; 11102 requestAnimationFrame(() => { 11103 requestAnimationFrame(() => { 11104 store == null ? void 0 : store.hide(); 11105 }); 11106 }); 11107 return true; 11108 } 11109 })); 11110 return props; 11111 } 11112 ); 11113 var Hovercard = createDialogComponent( 11114 forwardRef2(function Hovercard2(props) { 11115 const htmlProps = useHovercard(props); 11116 return LMDWO4NN_createElement(KQKDTOT4_TagName, htmlProps); 11117 }), 11118 useHovercardProviderContext 11119 ); 11120 11121 11122 11123 ;// ./node_modules/@ariakit/react-core/esm/tooltip/tooltip.js 11124 "use client"; 11125 11126 11127 11128 11129 11130 11131 11132 11133 11134 11135 11136 11137 11138 11139 11140 11141 11142 11143 11144 11145 11146 11147 11148 11149 11150 11151 11152 11153 11154 11155 11156 11157 11158 11159 11160 11161 11162 11163 11164 11165 11166 11167 11168 // src/tooltip/tooltip.tsx 11169 11170 11171 11172 var tooltip_TagName = "div"; 11173 var useTooltip = createHook( 11174 function useTooltip2(_a) { 11175 var _b = _a, { 11176 store, 11177 portal = true, 11178 gutter = 8, 11179 preserveTabOrder = false, 11180 hideOnHoverOutside = true, 11181 hideOnInteractOutside = true 11182 } = _b, props = __objRest(_b, [ 11183 "store", 11184 "portal", 11185 "gutter", 11186 "preserveTabOrder", 11187 "hideOnHoverOutside", 11188 "hideOnInteractOutside" 11189 ]); 11190 const context = useTooltipProviderContext(); 11191 store = store || context; 11192 invariant( 11193 store, 11194 false && 0 11195 ); 11196 props = useWrapElement( 11197 props, 11198 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipScopedContextProvider, { value: store, children: element }), 11199 [store] 11200 ); 11201 const role = store.useState( 11202 (state) => state.type === "description" ? "tooltip" : "none" 11203 ); 11204 props = _3YLGPPWQ_spreadValues({ role }, props); 11205 props = useHovercard(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 11206 store, 11207 portal, 11208 gutter, 11209 preserveTabOrder, 11210 hideOnHoverOutside(event) { 11211 if (isFalsyBooleanCallback(hideOnHoverOutside, event)) return false; 11212 const anchorElement = store == null ? void 0 : store.getState().anchorElement; 11213 if (!anchorElement) return true; 11214 if ("focusVisible" in anchorElement.dataset) return false; 11215 return true; 11216 }, 11217 hideOnInteractOutside: (event) => { 11218 if (isFalsyBooleanCallback(hideOnInteractOutside, event)) return false; 11219 const anchorElement = store == null ? void 0 : store.getState().anchorElement; 11220 if (!anchorElement) return true; 11221 if (contains(anchorElement, event.target)) return false; 11222 return true; 11223 } 11224 })); 11225 return props; 11226 } 11227 ); 11228 var Tooltip = createDialogComponent( 11229 forwardRef2(function Tooltip2(props) { 11230 const htmlProps = useTooltip(props); 11231 return LMDWO4NN_createElement(tooltip_TagName, htmlProps); 11232 }), 11233 useTooltipProviderContext 11234 ); 11235 11236 11237 ;// external ["wp","deprecated"] 11238 const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"]; 11239 var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject); 11240 ;// ./node_modules/@wordpress/components/build-module/shortcut/index.js 11241 11242 /** 11243 * Internal dependencies 11244 */ 11245 11246 /** 11247 * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed. 11248 * 11249 * ```jsx 11250 * import { Shortcut } from '@wordpress/components'; 11251 * 11252 * const MyShortcut = () => { 11253 * return ( 11254 * <Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} /> 11255 * ); 11256 * }; 11257 * ``` 11258 */ 11259 function Shortcut(props) { 11260 const { 11261 shortcut, 11262 className 11263 } = props; 11264 if (!shortcut) { 11265 return null; 11266 } 11267 let displayText; 11268 let ariaLabel; 11269 if (typeof shortcut === 'string') { 11270 displayText = shortcut; 11271 } 11272 if (shortcut !== null && typeof shortcut === 'object') { 11273 displayText = shortcut.display; 11274 ariaLabel = shortcut.ariaLabel; 11275 } 11276 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 11277 className: className, 11278 "aria-label": ariaLabel, 11279 children: displayText 11280 }); 11281 } 11282 /* harmony default export */ const build_module_shortcut = (Shortcut); 11283 11284 ;// ./node_modules/@wordpress/components/build-module/popover/utils.js 11285 /** 11286 * External dependencies 11287 */ 11288 11289 /** 11290 * Internal dependencies 11291 */ 11292 11293 const POSITION_TO_PLACEMENT = { 11294 bottom: 'bottom', 11295 top: 'top', 11296 'middle left': 'left', 11297 'middle right': 'right', 11298 'bottom left': 'bottom-end', 11299 'bottom center': 'bottom', 11300 'bottom right': 'bottom-start', 11301 'top left': 'top-end', 11302 'top center': 'top', 11303 'top right': 'top-start', 11304 'middle left left': 'left', 11305 'middle left right': 'left', 11306 'middle left bottom': 'left-end', 11307 'middle left top': 'left-start', 11308 'middle right left': 'right', 11309 'middle right right': 'right', 11310 'middle right bottom': 'right-end', 11311 'middle right top': 'right-start', 11312 'bottom left left': 'bottom-end', 11313 'bottom left right': 'bottom-end', 11314 'bottom left bottom': 'bottom-end', 11315 'bottom left top': 'bottom-end', 11316 'bottom center left': 'bottom', 11317 'bottom center right': 'bottom', 11318 'bottom center bottom': 'bottom', 11319 'bottom center top': 'bottom', 11320 'bottom right left': 'bottom-start', 11321 'bottom right right': 'bottom-start', 11322 'bottom right bottom': 'bottom-start', 11323 'bottom right top': 'bottom-start', 11324 'top left left': 'top-end', 11325 'top left right': 'top-end', 11326 'top left bottom': 'top-end', 11327 'top left top': 'top-end', 11328 'top center left': 'top', 11329 'top center right': 'top', 11330 'top center bottom': 'top', 11331 'top center top': 'top', 11332 'top right left': 'top-start', 11333 'top right right': 'top-start', 11334 'top right bottom': 'top-start', 11335 'top right top': 'top-start', 11336 // `middle`/`middle center [corner?]` positions are associated to a fallback 11337 // `bottom` placement because there aren't any corresponding placement values. 11338 middle: 'bottom', 11339 'middle center': 'bottom', 11340 'middle center bottom': 'bottom', 11341 'middle center left': 'bottom', 11342 'middle center right': 'bottom', 11343 'middle center top': 'bottom' 11344 }; 11345 11346 /** 11347 * Converts the `Popover`'s legacy "position" prop to the new "placement" prop 11348 * (used by `floating-ui`). 11349 * 11350 * @param position The legacy position 11351 * @return The corresponding placement 11352 */ 11353 const positionToPlacement = position => { 11354 var _POSITION_TO_PLACEMEN; 11355 return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : 'bottom'; 11356 }; 11357 11358 /** 11359 * @typedef AnimationOrigin 11360 * @type {Object} 11361 * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end") 11362 * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom) 11363 */ 11364 11365 const PLACEMENT_TO_ANIMATION_ORIGIN = { 11366 top: { 11367 originX: 0.5, 11368 originY: 1 11369 }, 11370 // open from bottom, center 11371 'top-start': { 11372 originX: 0, 11373 originY: 1 11374 }, 11375 // open from bottom, left 11376 'top-end': { 11377 originX: 1, 11378 originY: 1 11379 }, 11380 // open from bottom, right 11381 right: { 11382 originX: 0, 11383 originY: 0.5 11384 }, 11385 // open from middle, left 11386 'right-start': { 11387 originX: 0, 11388 originY: 0 11389 }, 11390 // open from top, left 11391 'right-end': { 11392 originX: 0, 11393 originY: 1 11394 }, 11395 // open from bottom, left 11396 bottom: { 11397 originX: 0.5, 11398 originY: 0 11399 }, 11400 // open from top, center 11401 'bottom-start': { 11402 originX: 0, 11403 originY: 0 11404 }, 11405 // open from top, left 11406 'bottom-end': { 11407 originX: 1, 11408 originY: 0 11409 }, 11410 // open from top, right 11411 left: { 11412 originX: 1, 11413 originY: 0.5 11414 }, 11415 // open from middle, right 11416 'left-start': { 11417 originX: 1, 11418 originY: 0 11419 }, 11420 // open from top, right 11421 'left-end': { 11422 originX: 1, 11423 originY: 1 11424 }, 11425 // open from bottom, right 11426 overlay: { 11427 originX: 0.5, 11428 originY: 0.5 11429 } // open from center, center 11430 }; 11431 11432 /** 11433 * Given the floating-ui `placement`, compute the framer-motion props for the 11434 * popover's entry animation. 11435 * 11436 * @param placement A placement string from floating ui 11437 * @return The object containing the motion props 11438 */ 11439 const placementToMotionAnimationProps = placement => { 11440 const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX'; 11441 const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1; 11442 return { 11443 style: PLACEMENT_TO_ANIMATION_ORIGIN[placement], 11444 initial: { 11445 opacity: 0, 11446 scale: 0, 11447 [translateProp]: `$2 * translateDirection}em` 11448 }, 11449 animate: { 11450 opacity: 1, 11451 scale: 1, 11452 [translateProp]: 0 11453 }, 11454 transition: { 11455 duration: 0.1, 11456 ease: [0, 0, 0.2, 1] 11457 } 11458 }; 11459 }; 11460 function isTopBottom(anchorRef) { 11461 return !!anchorRef?.top; 11462 } 11463 function isRef(anchorRef) { 11464 return !!anchorRef?.current; 11465 } 11466 const getReferenceElement = ({ 11467 anchor, 11468 anchorRef, 11469 anchorRect, 11470 getAnchorRect, 11471 fallbackReferenceElement 11472 }) => { 11473 var _referenceElement; 11474 let referenceElement = null; 11475 if (anchor) { 11476 referenceElement = anchor; 11477 } else if (isTopBottom(anchorRef)) { 11478 // Create a virtual element for the ref. The expectation is that 11479 // if anchorRef.top is defined, then anchorRef.bottom is defined too. 11480 // Seems to be used by the block toolbar, when multiple blocks are selected 11481 // (top and bottom blocks are used to calculate the resulting rect). 11482 referenceElement = { 11483 getBoundingClientRect() { 11484 const topRect = anchorRef.top.getBoundingClientRect(); 11485 const bottomRect = anchorRef.bottom.getBoundingClientRect(); 11486 return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top); 11487 } 11488 }; 11489 } else if (isRef(anchorRef)) { 11490 // Standard React ref. 11491 referenceElement = anchorRef.current; 11492 } else if (anchorRef) { 11493 // If `anchorRef` holds directly the element's value (no `current` key) 11494 // This is a weird scenario and should be deprecated. 11495 referenceElement = anchorRef; 11496 } else if (anchorRect) { 11497 // Create a virtual element for the ref. 11498 referenceElement = { 11499 getBoundingClientRect() { 11500 return anchorRect; 11501 } 11502 }; 11503 } else if (getAnchorRect) { 11504 // Create a virtual element for the ref. 11505 referenceElement = { 11506 getBoundingClientRect() { 11507 var _rect$x, _rect$y, _rect$width, _rect$height; 11508 const rect = getAnchorRect(fallbackReferenceElement); 11509 return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top); 11510 } 11511 }; 11512 } else if (fallbackReferenceElement) { 11513 // If no explicit ref is passed via props, fall back to 11514 // anchoring to the popover's parent node. 11515 referenceElement = fallbackReferenceElement.parentElement; 11516 } 11517 11518 // Convert any `undefined` value to `null`. 11519 return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null; 11520 }; 11521 11522 /** 11523 * Computes the final coordinate that needs to be applied to the floating 11524 * element when applying transform inline styles, defaulting to `undefined` 11525 * if the provided value is `null` or `NaN`. 11526 * 11527 * @param c input coordinate (usually as returned from floating-ui) 11528 * @return The coordinate's value to be used for inline styles. An `undefined` 11529 * return value means "no style set" for this coordinate. 11530 */ 11531 const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c); 11532 11533 ;// ./node_modules/@wordpress/components/build-module/tooltip/index.js 11534 /** 11535 * External dependencies 11536 */ 11537 11538 11539 11540 /** 11541 * WordPress dependencies 11542 */ 11543 11544 11545 11546 11547 /** 11548 * Internal dependencies 11549 */ 11550 11551 11552 11553 11554 const TooltipInternalContext = (0,external_wp_element_namespaceObject.createContext)({ 11555 isNestedInTooltip: false 11556 }); 11557 11558 /** 11559 * Time over anchor to wait before showing tooltip 11560 */ 11561 const TOOLTIP_DELAY = 700; 11562 const CONTEXT_VALUE = { 11563 isNestedInTooltip: true 11564 }; 11565 function UnforwardedTooltip(props, ref) { 11566 const { 11567 children, 11568 className, 11569 delay = TOOLTIP_DELAY, 11570 hideOnClick = true, 11571 placement, 11572 position, 11573 shortcut, 11574 text, 11575 ...restProps 11576 } = props; 11577 const { 11578 isNestedInTooltip 11579 } = (0,external_wp_element_namespaceObject.useContext)(TooltipInternalContext); 11580 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(tooltip_Tooltip, 'tooltip'); 11581 const describedById = text || shortcut ? baseId : undefined; 11582 const isOnlyChild = external_wp_element_namespaceObject.Children.count(children) === 1; 11583 // console error if more than one child element is added 11584 if (!isOnlyChild) { 11585 if (false) {} 11586 } 11587 11588 // Compute tooltip's placement: 11589 // - give priority to `placement` prop, if defined 11590 // - otherwise, compute it from the legacy `position` prop (if defined) 11591 // - finally, fallback to the default placement: 'bottom' 11592 let computedPlacement; 11593 if (placement !== undefined) { 11594 computedPlacement = placement; 11595 } else if (position !== undefined) { 11596 computedPlacement = positionToPlacement(position); 11597 external_wp_deprecated_default()('`position` prop in wp.components.tooltip', { 11598 since: '6.4', 11599 alternative: '`placement` prop' 11600 }); 11601 } 11602 computedPlacement = computedPlacement || 'bottom'; 11603 const tooltipStore = useTooltipStore({ 11604 placement: computedPlacement, 11605 showTimeout: delay 11606 }); 11607 const mounted = useStoreState(tooltipStore, 'mounted'); 11608 if (isNestedInTooltip) { 11609 return isOnlyChild ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, { 11610 ...restProps, 11611 render: children 11612 }) : children; 11613 } 11614 11615 // TODO: this is a temporary workaround to minimize the effects of the 11616 // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to 11617 // the tooltip anchor anymore since 0.4.0, so we need to add it manually. 11618 // The `aria-describedby` attribute is added only if the anchor doesn't have 11619 // one already, and if the tooltip text is not the same as the anchor's 11620 // `aria-label` 11621 // See: https://github.com/WordPress/gutenberg/pull/64066 11622 // See: https://github.com/WordPress/gutenberg/pull/65989 11623 function addDescribedById(element) { 11624 return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? (0,external_wp_element_namespaceObject.cloneElement)(element, { 11625 'aria-describedby': describedById 11626 }) : element; 11627 } 11628 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TooltipInternalContext.Provider, { 11629 value: CONTEXT_VALUE, 11630 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipAnchor, { 11631 onClick: hideOnClick ? tooltipStore.hide : undefined, 11632 store: tooltipStore, 11633 render: isOnlyChild ? addDescribedById(children) : undefined, 11634 ref: ref, 11635 children: isOnlyChild ? undefined : children 11636 }), isOnlyChild && (text || shortcut) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tooltip, { 11637 ...restProps, 11638 className: dist_clsx('components-tooltip', className), 11639 unmountOnHide: true, 11640 gutter: 4, 11641 id: describedById, 11642 overflowPadding: 0.5, 11643 store: tooltipStore, 11644 children: [text, shortcut && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_shortcut, { 11645 className: text ? 'components-tooltip__shortcut' : '', 11646 shortcut: shortcut 11647 })] 11648 })] 11649 }); 11650 } 11651 const tooltip_Tooltip = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTooltip); 11652 /* harmony default export */ const tooltip = (tooltip_Tooltip); 11653 11654 ;// external ["wp","warning"] 11655 const external_wp_warning_namespaceObject = window["wp"]["warning"]; 11656 var external_wp_warning_default = /*#__PURE__*/__webpack_require__.n(external_wp_warning_namespaceObject); 11657 // EXTERNAL MODULE: ./node_modules/deepmerge/dist/cjs.js 11658 var cjs = __webpack_require__(66); 11659 var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs); 11660 // EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js 11661 var es6 = __webpack_require__(7734); 11662 var es6_default = /*#__PURE__*/__webpack_require__.n(es6); 11663 ;// ./node_modules/is-plain-object/dist/is-plain-object.mjs 11664 /*! 11665 * is-plain-object <https://github.com/jonschlinkert/is-plain-object> 11666 * 11667 * Copyright (c) 2014-2017, Jon Schlinkert. 11668 * Released under the MIT License. 11669 */ 11670 11671 function is_plain_object_isObject(o) { 11672 return Object.prototype.toString.call(o) === '[object Object]'; 11673 } 11674 11675 function isPlainObject(o) { 11676 var ctor,prot; 11677 11678 if (is_plain_object_isObject(o) === false) return false; 11679 11680 // If has modified constructor 11681 ctor = o.constructor; 11682 if (ctor === undefined) return true; 11683 11684 // If has modified prototype 11685 prot = ctor.prototype; 11686 if (is_plain_object_isObject(prot) === false) return false; 11687 11688 // If constructor does not have an Object-specific method 11689 if (prot.hasOwnProperty('isPrototypeOf') === false) { 11690 return false; 11691 } 11692 11693 // Most likely a plain Object 11694 return true; 11695 } 11696 11697 11698 11699 ;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.js 11700 /** 11701 * WordPress dependencies 11702 */ 11703 11704 11705 /** 11706 * A `React.useEffect` that will not run on the first render. 11707 * Source: 11708 * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts 11709 * 11710 * @param {import('react').EffectCallback} effect 11711 * @param {import('react').DependencyList} deps 11712 */ 11713 function use_update_effect_useUpdateEffect(effect, deps) { 11714 const mountedRef = (0,external_wp_element_namespaceObject.useRef)(false); 11715 (0,external_wp_element_namespaceObject.useEffect)(() => { 11716 if (mountedRef.current) { 11717 return effect(); 11718 } 11719 mountedRef.current = true; 11720 return undefined; 11721 // 1. This hook needs to pass a dep list that isn't an array literal 11722 // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings 11723 // see https://github.com/WordPress/gutenberg/pull/41166 11724 }, deps); 11725 (0,external_wp_element_namespaceObject.useEffect)(() => () => { 11726 mountedRef.current = false; 11727 }, []); 11728 } 11729 /* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect); 11730 11731 ;// ./node_modules/@wordpress/components/build-module/context/context-system-provider.js 11732 /** 11733 * External dependencies 11734 */ 11735 11736 11737 11738 11739 /** 11740 * WordPress dependencies 11741 */ 11742 11743 11744 11745 /** 11746 * Internal dependencies 11747 */ 11748 11749 11750 const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)(/** @type {Record<string, any>} */{}); 11751 const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext); 11752 11753 /** 11754 * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value. 11755 * 11756 * Note: This function will warn if it detects an un-memoized `value` 11757 * 11758 * @param {Object} props 11759 * @param {Record<string, any>} props.value 11760 * @return {Record<string, any>} The consolidated value. 11761 */ 11762 function useContextSystemBridge({ 11763 value 11764 }) { 11765 const parentContext = useComponentsContext(); 11766 const valueRef = (0,external_wp_element_namespaceObject.useRef)(value); 11767 use_update_effect(() => { 11768 if ( 11769 // Objects are equivalent. 11770 es6_default()(valueRef.current, value) && 11771 // But not the same reference. 11772 valueRef.current !== value) { 11773 true ? external_wp_warning_default()(`Please memoize your context: $JSON.stringify(value)}`) : 0; 11774 } 11775 }, [value]); 11776 11777 // `parentContext` will always be memoized (i.e., the result of this hook itself) 11778 // or the default value from when the `ComponentsContext` was originally 11779 // initialized (which will never change, it's a static variable) 11780 // so this memoization will prevent `deepmerge()` from rerunning unless 11781 // the references to `value` change OR the `parentContext` has an actual material change 11782 // (because again, it's guaranteed to be memoized or a static reference to the empty object 11783 // so we know that the only changes for `parentContext` are material ones... i.e., why we 11784 // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only 11785 // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are 11786 // correctly warning when the `value` isn't being properly memoized. All of that to say 11787 // that this should be super safe to assume that `useMemo` will only run on actual 11788 // changes to the two dependencies, therefore saving us calls to `deepmerge()`! 11789 const config = (0,external_wp_element_namespaceObject.useMemo)(() => { 11790 // Deep clone `parentContext` to avoid mutating it later. 11791 return cjs_default()(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, { 11792 isMergeableObject: isPlainObject 11793 }); 11794 }, [parentContext, value]); 11795 return config; 11796 } 11797 11798 /** 11799 * A Provider component that can modify props for connected components within 11800 * the Context system. 11801 * 11802 * @example 11803 * ```jsx 11804 * <ContextSystemProvider value={{ Button: { size: 'small' }}}> 11805 * <Button>...</Button> 11806 * </ContextSystemProvider> 11807 * ``` 11808 * 11809 * @template {Record<string, any>} T 11810 * @param {Object} options 11811 * @param {import('react').ReactNode} options.children Children to render. 11812 * @param {T} options.value Props to render into connected components. 11813 * @return {JSX.Element} A Provider wrapped component. 11814 */ 11815 const BaseContextSystemProvider = ({ 11816 children, 11817 value 11818 }) => { 11819 const contextValue = useContextSystemBridge({ 11820 value 11821 }); 11822 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ComponentsContext.Provider, { 11823 value: contextValue, 11824 children: children 11825 }); 11826 }; 11827 const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider); 11828 11829 ;// ./node_modules/@wordpress/components/build-module/context/constants.js 11830 const COMPONENT_NAMESPACE = 'data-wp-component'; 11831 const CONNECTED_NAMESPACE = 'data-wp-c16t'; 11832 11833 /** 11834 * Special key where the connected namespaces are stored. 11835 * This is attached to Context connected components as a static property. 11836 */ 11837 const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__'; 11838 11839 ;// ./node_modules/@wordpress/components/build-module/context/utils.js 11840 /** 11841 * Internal dependencies 11842 */ 11843 11844 11845 /** 11846 * Creates a dedicated context namespace HTML attribute for components. 11847 * ns is short for "namespace" 11848 * 11849 * @example 11850 * ```jsx 11851 * <div {...ns('Container')} /> 11852 * ``` 11853 * 11854 * @param {string} componentName The name for the component. 11855 * @return {Record<string, any>} A props object with the namespaced HTML attribute. 11856 */ 11857 function getNamespace(componentName) { 11858 return { 11859 [COMPONENT_NAMESPACE]: componentName 11860 }; 11861 } 11862 11863 /** 11864 * Creates a dedicated connected context namespace HTML attribute for components. 11865 * ns is short for "namespace" 11866 * 11867 * @example 11868 * ```jsx 11869 * <div {...cns()} /> 11870 * ``` 11871 * 11872 * @return {Record<string, any>} A props object with the namespaced HTML attribute. 11873 */ 11874 function getConnectedNamespace() { 11875 return { 11876 [CONNECTED_NAMESPACE]: true 11877 }; 11878 } 11879 11880 ;// ./node_modules/tslib/tslib.es6.mjs 11881 /****************************************************************************** 11882 Copyright (c) Microsoft Corporation. 11883 11884 Permission to use, copy, modify, and/or distribute this software for any 11885 purpose with or without fee is hereby granted. 11886 11887 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 11888 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 11889 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11890 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 11891 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 11892 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 11893 PERFORMANCE OF THIS SOFTWARE. 11894 ***************************************************************************** */ 11895 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */ 11896 11897 var extendStatics = function(d, b) { 11898 extendStatics = Object.setPrototypeOf || 11899 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 11900 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 11901 return extendStatics(d, b); 11902 }; 11903 11904 function __extends(d, b) { 11905 if (typeof b !== "function" && b !== null) 11906 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); 11907 extendStatics(d, b); 11908 function __() { this.constructor = d; } 11909 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 11910 } 11911 11912 var __assign = function() { 11913 __assign = Object.assign || function __assign(t) { 11914 for (var s, i = 1, n = arguments.length; i < n; i++) { 11915 s = arguments[i]; 11916 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 11917 } 11918 return t; 11919 } 11920 return __assign.apply(this, arguments); 11921 } 11922 11923 function __rest(s, e) { 11924 var t = {}; 11925 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 11926 t[p] = s[p]; 11927 if (s != null && typeof Object.getOwnPropertySymbols === "function") 11928 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 11929 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 11930 t[p[i]] = s[p[i]]; 11931 } 11932 return t; 11933 } 11934 11935 function __decorate(decorators, target, key, desc) { 11936 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 11937 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 11938 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 11939 return c > 3 && r && Object.defineProperty(target, key, r), r; 11940 } 11941 11942 function __param(paramIndex, decorator) { 11943 return function (target, key) { decorator(target, key, paramIndex); } 11944 } 11945 11946 function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) { 11947 function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; } 11948 var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value"; 11949 var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null; 11950 var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {}); 11951 var _, done = false; 11952 for (var i = decorators.length - 1; i >= 0; i--) { 11953 var context = {}; 11954 for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p]; 11955 for (var p in contextIn.access) context.access[p] = contextIn.access[p]; 11956 context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); }; 11957 var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); 11958 if (kind === "accessor") { 11959 if (result === void 0) continue; 11960 if (result === null || typeof result !== "object") throw new TypeError("Object expected"); 11961 if (_ = accept(result.get)) descriptor.get = _; 11962 if (_ = accept(result.set)) descriptor.set = _; 11963 if (_ = accept(result.init)) initializers.unshift(_); 11964 } 11965 else if (_ = accept(result)) { 11966 if (kind === "field") initializers.unshift(_); 11967 else descriptor[key] = _; 11968 } 11969 } 11970 if (target) Object.defineProperty(target, contextIn.name, descriptor); 11971 done = true; 11972 }; 11973 11974 function __runInitializers(thisArg, initializers, value) { 11975 var useValue = arguments.length > 2; 11976 for (var i = 0; i < initializers.length; i++) { 11977 value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); 11978 } 11979 return useValue ? value : void 0; 11980 }; 11981 11982 function __propKey(x) { 11983 return typeof x === "symbol" ? x : "".concat(x); 11984 }; 11985 11986 function __setFunctionName(f, name, prefix) { 11987 if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : ""; 11988 return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name }); 11989 }; 11990 11991 function __metadata(metadataKey, metadataValue) { 11992 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); 11993 } 11994 11995 function __awaiter(thisArg, _arguments, P, generator) { 11996 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 11997 return new (P || (P = Promise))(function (resolve, reject) { 11998 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 11999 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 12000 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 12001 step((generator = generator.apply(thisArg, _arguments || [])).next()); 12002 }); 12003 } 12004 12005 function __generator(thisArg, body) { 12006 var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); 12007 return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; 12008 function verb(n) { return function (v) { return step([n, v]); }; } 12009 function step(op) { 12010 if (f) throw new TypeError("Generator is already executing."); 12011 while (g && (g = 0, op[0] && (_ = 0)), _) try { 12012 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; 12013 if (y = 0, t) op = [op[0] & 2, t.value]; 12014 switch (op[0]) { 12015 case 0: case 1: t = op; break; 12016 case 4: _.label++; return { value: op[1], done: false }; 12017 case 5: _.label++; y = op[1]; op = [0]; continue; 12018 case 7: op = _.ops.pop(); _.trys.pop(); continue; 12019 default: 12020 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } 12021 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } 12022 if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } 12023 if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } 12024 if (t[2]) _.ops.pop(); 12025 _.trys.pop(); continue; 12026 } 12027 op = body.call(thisArg, _); 12028 } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } 12029 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; 12030 } 12031 } 12032 12033 var __createBinding = Object.create ? (function(o, m, k, k2) { 12034 if (k2 === undefined) k2 = k; 12035 var desc = Object.getOwnPropertyDescriptor(m, k); 12036 if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { 12037 desc = { enumerable: true, get: function() { return m[k]; } }; 12038 } 12039 Object.defineProperty(o, k2, desc); 12040 }) : (function(o, m, k, k2) { 12041 if (k2 === undefined) k2 = k; 12042 o[k2] = m[k]; 12043 }); 12044 12045 function __exportStar(m, o) { 12046 for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p); 12047 } 12048 12049 function __values(o) { 12050 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; 12051 if (m) return m.call(o); 12052 if (o && typeof o.length === "number") return { 12053 next: function () { 12054 if (o && i >= o.length) o = void 0; 12055 return { value: o && o[i++], done: !o }; 12056 } 12057 }; 12058 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); 12059 } 12060 12061 function __read(o, n) { 12062 var m = typeof Symbol === "function" && o[Symbol.iterator]; 12063 if (!m) return o; 12064 var i = m.call(o), r, ar = [], e; 12065 try { 12066 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); 12067 } 12068 catch (error) { e = { error: error }; } 12069 finally { 12070 try { 12071 if (r && !r.done && (m = i["return"])) m.call(i); 12072 } 12073 finally { if (e) throw e.error; } 12074 } 12075 return ar; 12076 } 12077 12078 /** @deprecated */ 12079 function __spread() { 12080 for (var ar = [], i = 0; i < arguments.length; i++) 12081 ar = ar.concat(__read(arguments[i])); 12082 return ar; 12083 } 12084 12085 /** @deprecated */ 12086 function __spreadArrays() { 12087 for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 12088 for (var r = Array(s), k = 0, i = 0; i < il; i++) 12089 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) 12090 r[k] = a[j]; 12091 return r; 12092 } 12093 12094 function __spreadArray(to, from, pack) { 12095 if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { 12096 if (ar || !(i in from)) { 12097 if (!ar) ar = Array.prototype.slice.call(from, 0, i); 12098 ar[i] = from[i]; 12099 } 12100 } 12101 return to.concat(ar || Array.prototype.slice.call(from)); 12102 } 12103 12104 function __await(v) { 12105 return this instanceof __await ? (this.v = v, this) : new __await(v); 12106 } 12107 12108 function __asyncGenerator(thisArg, _arguments, generator) { 12109 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); 12110 var g = generator.apply(thisArg, _arguments || []), i, q = []; 12111 return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i; 12112 function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; } 12113 function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } } 12114 function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } 12115 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } 12116 function fulfill(value) { resume("next", value); } 12117 function reject(value) { resume("throw", value); } 12118 function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } 12119 } 12120 12121 function __asyncDelegator(o) { 12122 var i, p; 12123 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i; 12124 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; } 12125 } 12126 12127 function __asyncValues(o) { 12128 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); 12129 var m = o[Symbol.asyncIterator], i; 12130 return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i); 12131 function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; } 12132 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); } 12133 } 12134 12135 function __makeTemplateObject(cooked, raw) { 12136 if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 12137 return cooked; 12138 }; 12139 12140 var __setModuleDefault = Object.create ? (function(o, v) { 12141 Object.defineProperty(o, "default", { enumerable: true, value: v }); 12142 }) : function(o, v) { 12143 o["default"] = v; 12144 }; 12145 12146 var ownKeys = function(o) { 12147 ownKeys = Object.getOwnPropertyNames || function (o) { 12148 var ar = []; 12149 for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k; 12150 return ar; 12151 }; 12152 return ownKeys(o); 12153 }; 12154 12155 function __importStar(mod) { 12156 if (mod && mod.__esModule) return mod; 12157 var result = {}; 12158 if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]); 12159 __setModuleDefault(result, mod); 12160 return result; 12161 } 12162 12163 function __importDefault(mod) { 12164 return (mod && mod.__esModule) ? mod : { default: mod }; 12165 } 12166 12167 function __classPrivateFieldGet(receiver, state, kind, f) { 12168 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); 12169 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); 12170 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); 12171 } 12172 12173 function __classPrivateFieldSet(receiver, state, value, kind, f) { 12174 if (kind === "m") throw new TypeError("Private method is not writable"); 12175 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); 12176 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); 12177 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; 12178 } 12179 12180 function __classPrivateFieldIn(state, receiver) { 12181 if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object"); 12182 return typeof state === "function" ? receiver === state : state.has(receiver); 12183 } 12184 12185 function __addDisposableResource(env, value, async) { 12186 if (value !== null && value !== void 0) { 12187 if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected."); 12188 var dispose, inner; 12189 if (async) { 12190 if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined."); 12191 dispose = value[Symbol.asyncDispose]; 12192 } 12193 if (dispose === void 0) { 12194 if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined."); 12195 dispose = value[Symbol.dispose]; 12196 if (async) inner = dispose; 12197 } 12198 if (typeof dispose !== "function") throw new TypeError("Object not disposable."); 12199 if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } }; 12200 env.stack.push({ value: value, dispose: dispose, async: async }); 12201 } 12202 else if (async) { 12203 env.stack.push({ async: true }); 12204 } 12205 return value; 12206 } 12207 12208 var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { 12209 var e = new Error(message); 12210 return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; 12211 }; 12212 12213 function __disposeResources(env) { 12214 function fail(e) { 12215 env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e; 12216 env.hasError = true; 12217 } 12218 var r, s = 0; 12219 function next() { 12220 while (r = env.stack.pop()) { 12221 try { 12222 if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next); 12223 if (r.dispose) { 12224 var result = r.dispose.call(r.value); 12225 if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); }); 12226 } 12227 else s |= 1; 12228 } 12229 catch (e) { 12230 fail(e); 12231 } 12232 } 12233 if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve(); 12234 if (env.hasError) throw env.error; 12235 } 12236 return next(); 12237 } 12238 12239 function __rewriteRelativeImportExtension(path, preserveJsx) { 12240 if (typeof path === "string" && /^\.\.?\//.test(path)) { 12241 return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) { 12242 return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js"); 12243 }); 12244 } 12245 return path; 12246 } 12247 12248 /* harmony default export */ const tslib_es6 = ({ 12249 __extends, 12250 __assign, 12251 __rest, 12252 __decorate, 12253 __param, 12254 __esDecorate, 12255 __runInitializers, 12256 __propKey, 12257 __setFunctionName, 12258 __metadata, 12259 __awaiter, 12260 __generator, 12261 __createBinding, 12262 __exportStar, 12263 __values, 12264 __read, 12265 __spread, 12266 __spreadArrays, 12267 __spreadArray, 12268 __await, 12269 __asyncGenerator, 12270 __asyncDelegator, 12271 __asyncValues, 12272 __makeTemplateObject, 12273 __importStar, 12274 __importDefault, 12275 __classPrivateFieldGet, 12276 __classPrivateFieldSet, 12277 __classPrivateFieldIn, 12278 __addDisposableResource, 12279 __disposeResources, 12280 __rewriteRelativeImportExtension, 12281 }); 12282 12283 ;// ./node_modules/lower-case/dist.es2015/index.js 12284 /** 12285 * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt 12286 */ 12287 var SUPPORTED_LOCALE = { 12288 tr: { 12289 regexp: /\u0130|\u0049|\u0049\u0307/g, 12290 map: { 12291 İ: "\u0069", 12292 I: "\u0131", 12293 İ: "\u0069", 12294 }, 12295 }, 12296 az: { 12297 regexp: /\u0130/g, 12298 map: { 12299 İ: "\u0069", 12300 I: "\u0131", 12301 İ: "\u0069", 12302 }, 12303 }, 12304 lt: { 12305 regexp: /\u0049|\u004A|\u012E|\u00CC|\u00CD|\u0128/g, 12306 map: { 12307 I: "\u0069\u0307", 12308 J: "\u006A\u0307", 12309 Į: "\u012F\u0307", 12310 Ì: "\u0069\u0307\u0300", 12311 Í: "\u0069\u0307\u0301", 12312 Ĩ: "\u0069\u0307\u0303", 12313 }, 12314 }, 12315 }; 12316 /** 12317 * Localized lower case. 12318 */ 12319 function localeLowerCase(str, locale) { 12320 var lang = SUPPORTED_LOCALE[locale.toLowerCase()]; 12321 if (lang) 12322 return lowerCase(str.replace(lang.regexp, function (m) { return lang.map[m]; })); 12323 return lowerCase(str); 12324 } 12325 /** 12326 * Lower case as a function. 12327 */ 12328 function lowerCase(str) { 12329 return str.toLowerCase(); 12330 } 12331 12332 ;// ./node_modules/no-case/dist.es2015/index.js 12333 12334 // Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case"). 12335 var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g]; 12336 // Remove all non-word characters. 12337 var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi; 12338 /** 12339 * Normalize the string into something other libraries can manipulate easier. 12340 */ 12341 function noCase(input, options) { 12342 if (options === void 0) { options = {}; } 12343 var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d; 12344 var result = dist_es2015_replace(dist_es2015_replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0"); 12345 var start = 0; 12346 var end = result.length; 12347 // Trim the delimiter from around the output string. 12348 while (result.charAt(start) === "\0") 12349 start++; 12350 while (result.charAt(end - 1) === "\0") 12351 end--; 12352 // Transform each token independently. 12353 return result.slice(start, end).split("\0").map(transform).join(delimiter); 12354 } 12355 /** 12356 * Replace `re` in the input string with the replacement value. 12357 */ 12358 function dist_es2015_replace(input, re, value) { 12359 if (re instanceof RegExp) 12360 return input.replace(re, value); 12361 return re.reduce(function (input, re) { return input.replace(re, value); }, input); 12362 } 12363 12364 ;// ./node_modules/dot-case/dist.es2015/index.js 12365 12366 12367 function dotCase(input, options) { 12368 if (options === void 0) { options = {}; } 12369 return noCase(input, __assign({ delimiter: "." }, options)); 12370 } 12371 12372 ;// ./node_modules/param-case/dist.es2015/index.js 12373 12374 12375 function paramCase(input, options) { 12376 if (options === void 0) { options = {}; } 12377 return dotCase(input, __assign({ delimiter: "-" }, options)); 12378 } 12379 12380 ;// ./node_modules/memize/dist/index.js 12381 /** 12382 * Memize options object. 12383 * 12384 * @typedef MemizeOptions 12385 * 12386 * @property {number} [maxSize] Maximum size of the cache. 12387 */ 12388 12389 /** 12390 * Internal cache entry. 12391 * 12392 * @typedef MemizeCacheNode 12393 * 12394 * @property {?MemizeCacheNode|undefined} [prev] Previous node. 12395 * @property {?MemizeCacheNode|undefined} [next] Next node. 12396 * @property {Array<*>} args Function arguments for cache 12397 * entry. 12398 * @property {*} val Function result. 12399 */ 12400 12401 /** 12402 * Properties of the enhanced function for controlling cache. 12403 * 12404 * @typedef MemizeMemoizedFunction 12405 * 12406 * @property {()=>void} clear Clear the cache. 12407 */ 12408 12409 /** 12410 * Accepts a function to be memoized, and returns a new memoized function, with 12411 * optional options. 12412 * 12413 * @template {(...args: any[]) => any} F 12414 * 12415 * @param {F} fn Function to memoize. 12416 * @param {MemizeOptions} [options] Options object. 12417 * 12418 * @return {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function. 12419 */ 12420 function memize(fn, options) { 12421 var size = 0; 12422 12423 /** @type {?MemizeCacheNode|undefined} */ 12424 var head; 12425 12426 /** @type {?MemizeCacheNode|undefined} */ 12427 var tail; 12428 12429 options = options || {}; 12430 12431 function memoized(/* ...args */) { 12432 var node = head, 12433 len = arguments.length, 12434 args, 12435 i; 12436 12437 searchCache: while (node) { 12438 // Perform a shallow equality test to confirm that whether the node 12439 // under test is a candidate for the arguments passed. Two arrays 12440 // are shallowly equal if their length matches and each entry is 12441 // strictly equal between the two sets. Avoid abstracting to a 12442 // function which could incur an arguments leaking deoptimization. 12443 12444 // Check whether node arguments match arguments length 12445 if (node.args.length !== arguments.length) { 12446 node = node.next; 12447 continue; 12448 } 12449 12450 // Check whether node arguments match arguments values 12451 for (i = 0; i < len; i++) { 12452 if (node.args[i] !== arguments[i]) { 12453 node = node.next; 12454 continue searchCache; 12455 } 12456 } 12457 12458 // At this point we can assume we've found a match 12459 12460 // Surface matched node to head if not already 12461 if (node !== head) { 12462 // As tail, shift to previous. Must only shift if not also 12463 // head, since if both head and tail, there is no previous. 12464 if (node === tail) { 12465 tail = node.prev; 12466 } 12467 12468 // Adjust siblings to point to each other. If node was tail, 12469 // this also handles new tail's empty `next` assignment. 12470 /** @type {MemizeCacheNode} */ (node.prev).next = node.next; 12471 if (node.next) { 12472 node.next.prev = node.prev; 12473 } 12474 12475 node.next = head; 12476 node.prev = null; 12477 /** @type {MemizeCacheNode} */ (head).prev = node; 12478 head = node; 12479 } 12480 12481 // Return immediately 12482 return node.val; 12483 } 12484 12485 // No cached value found. Continue to insertion phase: 12486 12487 // Create a copy of arguments (avoid leaking deoptimization) 12488 args = new Array(len); 12489 for (i = 0; i < len; i++) { 12490 args[i] = arguments[i]; 12491 } 12492 12493 node = { 12494 args: args, 12495 12496 // Generate the result from original function 12497 val: fn.apply(null, args), 12498 }; 12499 12500 // Don't need to check whether node is already head, since it would 12501 // have been returned above already if it was 12502 12503 // Shift existing head down list 12504 if (head) { 12505 head.prev = node; 12506 node.next = head; 12507 } else { 12508 // If no head, follows that there's no tail (at initial or reset) 12509 tail = node; 12510 } 12511 12512 // Trim tail if we're reached max size and are pending cache insertion 12513 if (size === /** @type {MemizeOptions} */ (options).maxSize) { 12514 tail = /** @type {MemizeCacheNode} */ (tail).prev; 12515 /** @type {MemizeCacheNode} */ (tail).next = null; 12516 } else { 12517 size++; 12518 } 12519 12520 head = node; 12521 12522 return node.val; 12523 } 12524 12525 memoized.clear = function () { 12526 head = null; 12527 tail = null; 12528 size = 0; 12529 }; 12530 12531 // Ignore reason: There's not a clear solution to create an intersection of 12532 // the function with additional properties, where the goal is to retain the 12533 // function signature of the incoming argument and add control properties 12534 // on the return value. 12535 12536 // @ts-ignore 12537 return memoized; 12538 } 12539 12540 12541 12542 ;// ./node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.js 12543 /** 12544 * External dependencies 12545 */ 12546 12547 12548 12549 /** 12550 * Generates the connected component CSS className based on the namespace. 12551 * 12552 * @param namespace The name of the connected component. 12553 * @return The generated CSS className. 12554 */ 12555 function getStyledClassName(namespace) { 12556 const kebab = paramCase(namespace); 12557 return `components-$kebab}`; 12558 } 12559 const getStyledClassNameFromKey = memize(getStyledClassName); 12560 12561 ;// ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js 12562 /* 12563 12564 Based off glamor's StyleSheet, thanks Sunil ❤️ 12565 12566 high performance StyleSheet for css-in-js systems 12567 12568 - uses multiple style tags behind the scenes for millions of rules 12569 - uses `insertRule` for appending in production for *much* faster performance 12570 12571 // usage 12572 12573 import { StyleSheet } from '@emotion/sheet' 12574 12575 let styleSheet = new StyleSheet({ key: '', container: document.head }) 12576 12577 styleSheet.insert('#box { border: 1px solid red; }') 12578 - appends a css rule into the stylesheet 12579 12580 styleSheet.flush() 12581 - empties the stylesheet of all its contents 12582 12583 */ 12584 // $FlowFixMe 12585 function sheetForTag(tag) { 12586 if (tag.sheet) { 12587 // $FlowFixMe 12588 return tag.sheet; 12589 } // this weirdness brought to you by firefox 12590 12591 /* istanbul ignore next */ 12592 12593 12594 for (var i = 0; i < document.styleSheets.length; i++) { 12595 if (document.styleSheets[i].ownerNode === tag) { 12596 // $FlowFixMe 12597 return document.styleSheets[i]; 12598 } 12599 } 12600 } 12601 12602 function createStyleElement(options) { 12603 var tag = document.createElement('style'); 12604 tag.setAttribute('data-emotion', options.key); 12605 12606 if (options.nonce !== undefined) { 12607 tag.setAttribute('nonce', options.nonce); 12608 } 12609 12610 tag.appendChild(document.createTextNode('')); 12611 tag.setAttribute('data-s', ''); 12612 return tag; 12613 } 12614 12615 var StyleSheet = /*#__PURE__*/function () { 12616 // Using Node instead of HTMLElement since container may be a ShadowRoot 12617 function StyleSheet(options) { 12618 var _this = this; 12619 12620 this._insertTag = function (tag) { 12621 var before; 12622 12623 if (_this.tags.length === 0) { 12624 if (_this.insertionPoint) { 12625 before = _this.insertionPoint.nextSibling; 12626 } else if (_this.prepend) { 12627 before = _this.container.firstChild; 12628 } else { 12629 before = _this.before; 12630 } 12631 } else { 12632 before = _this.tags[_this.tags.length - 1].nextSibling; 12633 } 12634 12635 _this.container.insertBefore(tag, before); 12636 12637 _this.tags.push(tag); 12638 }; 12639 12640 this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy; 12641 this.tags = []; 12642 this.ctr = 0; 12643 this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets 12644 12645 this.key = options.key; 12646 this.container = options.container; 12647 this.prepend = options.prepend; 12648 this.insertionPoint = options.insertionPoint; 12649 this.before = null; 12650 } 12651 12652 var _proto = StyleSheet.prototype; 12653 12654 _proto.hydrate = function hydrate(nodes) { 12655 nodes.forEach(this._insertTag); 12656 }; 12657 12658 _proto.insert = function insert(rule) { 12659 // the max length is how many rules we have per style tag, it's 65000 in speedy mode 12660 // it's 1 in dev because we insert source maps that map a single rule to a location 12661 // and you can only have one source map per style tag 12662 if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { 12663 this._insertTag(createStyleElement(this)); 12664 } 12665 12666 var tag = this.tags[this.tags.length - 1]; 12667 12668 if (false) { var isImportRule; } 12669 12670 if (this.isSpeedy) { 12671 var sheet = sheetForTag(tag); 12672 12673 try { 12674 // this is the ultrafast version, works across browsers 12675 // the big drawback is that the css won't be editable in devtools 12676 sheet.insertRule(rule, sheet.cssRules.length); 12677 } catch (e) { 12678 if (false) {} 12679 } 12680 } else { 12681 tag.appendChild(document.createTextNode(rule)); 12682 } 12683 12684 this.ctr++; 12685 }; 12686 12687 _proto.flush = function flush() { 12688 // $FlowFixMe 12689 this.tags.forEach(function (tag) { 12690 return tag.parentNode && tag.parentNode.removeChild(tag); 12691 }); 12692 this.tags = []; 12693 this.ctr = 0; 12694 12695 if (false) {} 12696 }; 12697 12698 return StyleSheet; 12699 }(); 12700 12701 12702 12703 ;// ./node_modules/stylis/src/Utility.js 12704 /** 12705 * @param {number} 12706 * @return {number} 12707 */ 12708 var abs = Math.abs 12709 12710 /** 12711 * @param {number} 12712 * @return {string} 12713 */ 12714 var Utility_from = String.fromCharCode 12715 12716 /** 12717 * @param {object} 12718 * @return {object} 12719 */ 12720 var Utility_assign = Object.assign 12721 12722 /** 12723 * @param {string} value 12724 * @param {number} length 12725 * @return {number} 12726 */ 12727 function hash (value, length) { 12728 return Utility_charat(value, 0) ^ 45 ? (((((((length << 2) ^ Utility_charat(value, 0)) << 2) ^ Utility_charat(value, 1)) << 2) ^ Utility_charat(value, 2)) << 2) ^ Utility_charat(value, 3) : 0 12729 } 12730 12731 /** 12732 * @param {string} value 12733 * @return {string} 12734 */ 12735 function trim (value) { 12736 return value.trim() 12737 } 12738 12739 /** 12740 * @param {string} value 12741 * @param {RegExp} pattern 12742 * @return {string?} 12743 */ 12744 function Utility_match (value, pattern) { 12745 return (value = pattern.exec(value)) ? value[0] : value 12746 } 12747 12748 /** 12749 * @param {string} value 12750 * @param {(string|RegExp)} pattern 12751 * @param {string} replacement 12752 * @return {string} 12753 */ 12754 function Utility_replace (value, pattern, replacement) { 12755 return value.replace(pattern, replacement) 12756 } 12757 12758 /** 12759 * @param {string} value 12760 * @param {string} search 12761 * @return {number} 12762 */ 12763 function indexof (value, search) { 12764 return value.indexOf(search) 12765 } 12766 12767 /** 12768 * @param {string} value 12769 * @param {number} index 12770 * @return {number} 12771 */ 12772 function Utility_charat (value, index) { 12773 return value.charCodeAt(index) | 0 12774 } 12775 12776 /** 12777 * @param {string} value 12778 * @param {number} begin 12779 * @param {number} end 12780 * @return {string} 12781 */ 12782 function Utility_substr (value, begin, end) { 12783 return value.slice(begin, end) 12784 } 12785 12786 /** 12787 * @param {string} value 12788 * @return {number} 12789 */ 12790 function Utility_strlen (value) { 12791 return value.length 12792 } 12793 12794 /** 12795 * @param {any[]} value 12796 * @return {number} 12797 */ 12798 function Utility_sizeof (value) { 12799 return value.length 12800 } 12801 12802 /** 12803 * @param {any} value 12804 * @param {any[]} array 12805 * @return {any} 12806 */ 12807 function Utility_append (value, array) { 12808 return array.push(value), value 12809 } 12810 12811 /** 12812 * @param {string[]} array 12813 * @param {function} callback 12814 * @return {string} 12815 */ 12816 function Utility_combine (array, callback) { 12817 return array.map(callback).join('') 12818 } 12819 12820 ;// ./node_modules/stylis/src/Tokenizer.js 12821 12822 12823 var line = 1 12824 var column = 1 12825 var Tokenizer_length = 0 12826 var position = 0 12827 var character = 0 12828 var characters = '' 12829 12830 /** 12831 * @param {string} value 12832 * @param {object | null} root 12833 * @param {object | null} parent 12834 * @param {string} type 12835 * @param {string[] | string} props 12836 * @param {object[] | string} children 12837 * @param {number} length 12838 */ 12839 function node (value, root, parent, type, props, children, length) { 12840 return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''} 12841 } 12842 12843 /** 12844 * @param {object} root 12845 * @param {object} props 12846 * @return {object} 12847 */ 12848 function Tokenizer_copy (root, props) { 12849 return Utility_assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props) 12850 } 12851 12852 /** 12853 * @return {number} 12854 */ 12855 function Tokenizer_char () { 12856 return character 12857 } 12858 12859 /** 12860 * @return {number} 12861 */ 12862 function prev () { 12863 character = position > 0 ? Utility_charat(characters, --position) : 0 12864 12865 if (column--, character === 10) 12866 column = 1, line-- 12867 12868 return character 12869 } 12870 12871 /** 12872 * @return {number} 12873 */ 12874 function next () { 12875 character = position < Tokenizer_length ? Utility_charat(characters, position++) : 0 12876 12877 if (column++, character === 10) 12878 column = 1, line++ 12879 12880 return character 12881 } 12882 12883 /** 12884 * @return {number} 12885 */ 12886 function peek () { 12887 return Utility_charat(characters, position) 12888 } 12889 12890 /** 12891 * @return {number} 12892 */ 12893 function caret () { 12894 return position 12895 } 12896 12897 /** 12898 * @param {number} begin 12899 * @param {number} end 12900 * @return {string} 12901 */ 12902 function slice (begin, end) { 12903 return Utility_substr(characters, begin, end) 12904 } 12905 12906 /** 12907 * @param {number} type 12908 * @return {number} 12909 */ 12910 function token (type) { 12911 switch (type) { 12912 // \0 \t \n \r \s whitespace token 12913 case 0: case 9: case 10: case 13: case 32: 12914 return 5 12915 // ! + , / > @ ~ isolate token 12916 case 33: case 43: case 44: case 47: case 62: case 64: case 126: 12917 // ; { } breakpoint token 12918 case 59: case 123: case 125: 12919 return 4 12920 // : accompanied token 12921 case 58: 12922 return 3 12923 // " ' ( [ opening delimit token 12924 case 34: case 39: case 40: case 91: 12925 return 2 12926 // ) ] closing delimit token 12927 case 41: case 93: 12928 return 1 12929 } 12930 12931 return 0 12932 } 12933 12934 /** 12935 * @param {string} value 12936 * @return {any[]} 12937 */ 12938 function alloc (value) { 12939 return line = column = 1, Tokenizer_length = Utility_strlen(characters = value), position = 0, [] 12940 } 12941 12942 /** 12943 * @param {any} value 12944 * @return {any} 12945 */ 12946 function dealloc (value) { 12947 return characters = '', value 12948 } 12949 12950 /** 12951 * @param {number} type 12952 * @return {string} 12953 */ 12954 function delimit (type) { 12955 return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type))) 12956 } 12957 12958 /** 12959 * @param {string} value 12960 * @return {string[]} 12961 */ 12962 function Tokenizer_tokenize (value) { 12963 return dealloc(tokenizer(alloc(value))) 12964 } 12965 12966 /** 12967 * @param {number} type 12968 * @return {string} 12969 */ 12970 function whitespace (type) { 12971 while (character = peek()) 12972 if (character < 33) 12973 next() 12974 else 12975 break 12976 12977 return token(type) > 2 || token(character) > 3 ? '' : ' ' 12978 } 12979 12980 /** 12981 * @param {string[]} children 12982 * @return {string[]} 12983 */ 12984 function tokenizer (children) { 12985 while (next()) 12986 switch (token(character)) { 12987 case 0: append(identifier(position - 1), children) 12988 break 12989 case 2: append(delimit(character), children) 12990 break 12991 default: append(from(character), children) 12992 } 12993 12994 return children 12995 } 12996 12997 /** 12998 * @param {number} index 12999 * @param {number} count 13000 * @return {string} 13001 */ 13002 function escaping (index, count) { 13003 while (--count && next()) 13004 // not 0-9 A-F a-f 13005 if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97)) 13006 break 13007 13008 return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32)) 13009 } 13010 13011 /** 13012 * @param {number} type 13013 * @return {number} 13014 */ 13015 function delimiter (type) { 13016 while (next()) 13017 switch (character) { 13018 // ] ) " ' 13019 case type: 13020 return position 13021 // " ' 13022 case 34: case 39: 13023 if (type !== 34 && type !== 39) 13024 delimiter(character) 13025 break 13026 // ( 13027 case 40: 13028 if (type === 41) 13029 delimiter(type) 13030 break 13031 // \ 13032 case 92: 13033 next() 13034 break 13035 } 13036 13037 return position 13038 } 13039 13040 /** 13041 * @param {number} type 13042 * @param {number} index 13043 * @return {number} 13044 */ 13045 function commenter (type, index) { 13046 while (next()) 13047 // // 13048 if (type + character === 47 + 10) 13049 break 13050 // /* 13051 else if (type + character === 42 + 42 && peek() === 47) 13052 break 13053 13054 return '/*' + slice(index, position - 1) + '*' + Utility_from(type === 47 ? type : next()) 13055 } 13056 13057 /** 13058 * @param {number} index 13059 * @return {string} 13060 */ 13061 function identifier (index) { 13062 while (!token(peek())) 13063 next() 13064 13065 return slice(index, position) 13066 } 13067 13068 ;// ./node_modules/stylis/src/Enum.js 13069 var Enum_MS = '-ms-' 13070 var Enum_MOZ = '-moz-' 13071 var Enum_WEBKIT = '-webkit-' 13072 13073 var COMMENT = 'comm' 13074 var Enum_RULESET = 'rule' 13075 var Enum_DECLARATION = 'decl' 13076 13077 var PAGE = '@page' 13078 var MEDIA = '@media' 13079 var IMPORT = '@import' 13080 var CHARSET = '@charset' 13081 var VIEWPORT = '@viewport' 13082 var SUPPORTS = '@supports' 13083 var DOCUMENT = '@document' 13084 var NAMESPACE = '@namespace' 13085 var Enum_KEYFRAMES = '@keyframes' 13086 var FONT_FACE = '@font-face' 13087 var COUNTER_STYLE = '@counter-style' 13088 var FONT_FEATURE_VALUES = '@font-feature-values' 13089 13090 ;// ./node_modules/stylis/src/Serializer.js 13091 13092 13093 13094 /** 13095 * @param {object[]} children 13096 * @param {function} callback 13097 * @return {string} 13098 */ 13099 function Serializer_serialize (children, callback) { 13100 var output = '' 13101 var length = Utility_sizeof(children) 13102 13103 for (var i = 0; i < length; i++) 13104 output += callback(children[i], i, children, callback) || '' 13105 13106 return output 13107 } 13108 13109 /** 13110 * @param {object} element 13111 * @param {number} index 13112 * @param {object[]} children 13113 * @param {function} callback 13114 * @return {string} 13115 */ 13116 function stringify (element, index, children, callback) { 13117 switch (element.type) { 13118 case IMPORT: case Enum_DECLARATION: return element.return = element.return || element.value 13119 case COMMENT: return '' 13120 case Enum_KEYFRAMES: return element.return = element.value + '{' + Serializer_serialize(element.children, callback) + '}' 13121 case Enum_RULESET: element.value = element.props.join(',') 13122 } 13123 13124 return Utility_strlen(children = Serializer_serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : '' 13125 } 13126 13127 ;// ./node_modules/stylis/src/Middleware.js 13128 13129 13130 13131 13132 13133 13134 /** 13135 * @param {function[]} collection 13136 * @return {function} 13137 */ 13138 function middleware (collection) { 13139 var length = Utility_sizeof(collection) 13140 13141 return function (element, index, children, callback) { 13142 var output = '' 13143 13144 for (var i = 0; i < length; i++) 13145 output += collection[i](element, index, children, callback) || '' 13146 13147 return output 13148 } 13149 } 13150 13151 /** 13152 * @param {function} callback 13153 * @return {function} 13154 */ 13155 function rulesheet (callback) { 13156 return function (element) { 13157 if (!element.root) 13158 if (element = element.return) 13159 callback(element) 13160 } 13161 } 13162 13163 /** 13164 * @param {object} element 13165 * @param {number} index 13166 * @param {object[]} children 13167 * @param {function} callback 13168 */ 13169 function prefixer (element, index, children, callback) { 13170 if (element.length > -1) 13171 if (!element.return) 13172 switch (element.type) { 13173 case DECLARATION: element.return = prefix(element.value, element.length, children) 13174 return 13175 case KEYFRAMES: 13176 return serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback) 13177 case RULESET: 13178 if (element.length) 13179 return combine(element.props, function (value) { 13180 switch (match(value, /(::plac\w+|:read-\w+)/)) { 13181 // :read-(only|write) 13182 case ':read-only': case ':read-write': 13183 return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback) 13184 // :placeholder 13185 case '::placeholder': 13186 return serialize([ 13187 copy(element, {props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}), 13188 copy(element, {props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}), 13189 copy(element, {props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]}) 13190 ], callback) 13191 } 13192 13193 return '' 13194 }) 13195 } 13196 } 13197 13198 /** 13199 * @param {object} element 13200 * @param {number} index 13201 * @param {object[]} children 13202 */ 13203 function namespace (element) { 13204 switch (element.type) { 13205 case RULESET: 13206 element.props = element.props.map(function (value) { 13207 return combine(tokenize(value), function (value, index, children) { 13208 switch (charat(value, 0)) { 13209 // \f 13210 case 12: 13211 return substr(value, 1, strlen(value)) 13212 // \0 ( + > ~ 13213 case 0: case 40: case 43: case 62: case 126: 13214 return value 13215 // : 13216 case 58: 13217 if (children[++index] === 'global') 13218 children[index] = '', children[++index] = '\f' + substr(children[index], index = 1, -1) 13219 // \s 13220 case 32: 13221 return index === 1 ? '' : value 13222 default: 13223 switch (index) { 13224 case 0: element = value 13225 return sizeof(children) > 1 ? '' : value 13226 case index = sizeof(children) - 1: case 2: 13227 return index === 2 ? value + element + element : value + element 13228 default: 13229 return value 13230 } 13231 } 13232 }) 13233 }) 13234 } 13235 } 13236 13237 ;// ./node_modules/stylis/src/Parser.js 13238 13239 13240 13241 13242 /** 13243 * @param {string} value 13244 * @return {object[]} 13245 */ 13246 function compile (value) { 13247 return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value)) 13248 } 13249 13250 /** 13251 * @param {string} value 13252 * @param {object} root 13253 * @param {object?} parent 13254 * @param {string[]} rule 13255 * @param {string[]} rules 13256 * @param {string[]} rulesets 13257 * @param {number[]} pseudo 13258 * @param {number[]} points 13259 * @param {string[]} declarations 13260 * @return {object} 13261 */ 13262 function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) { 13263 var index = 0 13264 var offset = 0 13265 var length = pseudo 13266 var atrule = 0 13267 var property = 0 13268 var previous = 0 13269 var variable = 1 13270 var scanning = 1 13271 var ampersand = 1 13272 var character = 0 13273 var type = '' 13274 var props = rules 13275 var children = rulesets 13276 var reference = rule 13277 var characters = type 13278 13279 while (scanning) 13280 switch (previous = character, character = next()) { 13281 // ( 13282 case 40: 13283 if (previous != 108 && Utility_charat(characters, length - 1) == 58) { 13284 if (indexof(characters += Utility_replace(delimit(character), '&', '&\f'), '&\f') != -1) 13285 ampersand = -1 13286 break 13287 } 13288 // " ' [ 13289 case 34: case 39: case 91: 13290 characters += delimit(character) 13291 break 13292 // \t \n \r \s 13293 case 9: case 10: case 13: case 32: 13294 characters += whitespace(previous) 13295 break 13296 // \ 13297 case 92: 13298 characters += escaping(caret() - 1, 7) 13299 continue 13300 // / 13301 case 47: 13302 switch (peek()) { 13303 case 42: case 47: 13304 Utility_append(comment(commenter(next(), caret()), root, parent), declarations) 13305 break 13306 default: 13307 characters += '/' 13308 } 13309 break 13310 // { 13311 case 123 * variable: 13312 points[index++] = Utility_strlen(characters) * ampersand 13313 // } ; \0 13314 case 125 * variable: case 59: case 0: 13315 switch (character) { 13316 // \0 } 13317 case 0: case 125: scanning = 0 13318 // ; 13319 case 59 + offset: 13320 if (property > 0 && (Utility_strlen(characters) - length)) 13321 Utility_append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(Utility_replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations) 13322 break 13323 // @ ; 13324 case 59: characters += ';' 13325 // { rule/at-rule 13326 default: 13327 Utility_append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets) 13328 13329 if (character === 123) 13330 if (offset === 0) 13331 parse(characters, root, reference, reference, props, rulesets, length, points, children) 13332 else 13333 switch (atrule === 99 && Utility_charat(characters, 3) === 110 ? 100 : atrule) { 13334 // d m s 13335 case 100: case 109: case 115: 13336 parse(value, reference, reference, rule && Utility_append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children) 13337 break 13338 default: 13339 parse(characters, reference, reference, reference, [''], children, 0, points, children) 13340 } 13341 } 13342 13343 index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo 13344 break 13345 // : 13346 case 58: 13347 length = 1 + Utility_strlen(characters), property = previous 13348 default: 13349 if (variable < 1) 13350 if (character == 123) 13351 --variable 13352 else if (character == 125 && variable++ == 0 && prev() == 125) 13353 continue 13354 13355 switch (characters += Utility_from(character), character * variable) { 13356 // & 13357 case 38: 13358 ampersand = offset > 0 ? 1 : (characters += '\f', -1) 13359 break 13360 // , 13361 case 44: 13362 points[index++] = (Utility_strlen(characters) - 1) * ampersand, ampersand = 1 13363 break 13364 // @ 13365 case 64: 13366 // - 13367 if (peek() === 45) 13368 characters += delimit(next()) 13369 13370 atrule = peek(), offset = length = Utility_strlen(type = characters += identifier(caret())), character++ 13371 break 13372 // - 13373 case 45: 13374 if (previous === 45 && Utility_strlen(characters) == 2) 13375 variable = 0 13376 } 13377 } 13378 13379 return rulesets 13380 } 13381 13382 /** 13383 * @param {string} value 13384 * @param {object} root 13385 * @param {object?} parent 13386 * @param {number} index 13387 * @param {number} offset 13388 * @param {string[]} rules 13389 * @param {number[]} points 13390 * @param {string} type 13391 * @param {string[]} props 13392 * @param {string[]} children 13393 * @param {number} length 13394 * @return {object} 13395 */ 13396 function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) { 13397 var post = offset - 1 13398 var rule = offset === 0 ? rules : [''] 13399 var size = Utility_sizeof(rule) 13400 13401 for (var i = 0, j = 0, k = 0; i < index; ++i) 13402 for (var x = 0, y = Utility_substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) 13403 if (z = trim(j > 0 ? rule[x] + ' ' + y : Utility_replace(y, /&\f/g, rule[x]))) 13404 props[k++] = z 13405 13406 return node(value, root, parent, offset === 0 ? Enum_RULESET : type, props, children, length) 13407 } 13408 13409 /** 13410 * @param {number} value 13411 * @param {object} root 13412 * @param {object?} parent 13413 * @return {object} 13414 */ 13415 function comment (value, root, parent) { 13416 return node(value, root, parent, COMMENT, Utility_from(Tokenizer_char()), Utility_substr(value, 2, -2), 0) 13417 } 13418 13419 /** 13420 * @param {string} value 13421 * @param {object} root 13422 * @param {object?} parent 13423 * @param {number} length 13424 * @return {object} 13425 */ 13426 function declaration (value, root, parent, length) { 13427 return node(value, root, parent, Enum_DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length) 13428 } 13429 13430 ;// ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 13431 13432 13433 13434 13435 13436 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) { 13437 var previous = 0; 13438 var character = 0; 13439 13440 while (true) { 13441 previous = character; 13442 character = peek(); // &\f 13443 13444 if (previous === 38 && character === 12) { 13445 points[index] = 1; 13446 } 13447 13448 if (token(character)) { 13449 break; 13450 } 13451 13452 next(); 13453 } 13454 13455 return slice(begin, position); 13456 }; 13457 13458 var toRules = function toRules(parsed, points) { 13459 // pretend we've started with a comma 13460 var index = -1; 13461 var character = 44; 13462 13463 do { 13464 switch (token(character)) { 13465 case 0: 13466 // &\f 13467 if (character === 38 && peek() === 12) { 13468 // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings 13469 // stylis inserts \f after & to know when & where it should replace this sequence with the context selector 13470 // and when it should just concatenate the outer and inner selectors 13471 // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here 13472 points[index] = 1; 13473 } 13474 13475 parsed[index] += identifierWithPointTracking(position - 1, points, index); 13476 break; 13477 13478 case 2: 13479 parsed[index] += delimit(character); 13480 break; 13481 13482 case 4: 13483 // comma 13484 if (character === 44) { 13485 // colon 13486 parsed[++index] = peek() === 58 ? '&\f' : ''; 13487 points[index] = parsed[index].length; 13488 break; 13489 } 13490 13491 // fallthrough 13492 13493 default: 13494 parsed[index] += Utility_from(character); 13495 } 13496 } while (character = next()); 13497 13498 return parsed; 13499 }; 13500 13501 var getRules = function getRules(value, points) { 13502 return dealloc(toRules(alloc(value), points)); 13503 }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11 13504 13505 13506 var fixedElements = /* #__PURE__ */new WeakMap(); 13507 var compat = function compat(element) { 13508 if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo 13509 // negative .length indicates that this rule has been already prefixed 13510 element.length < 1) { 13511 return; 13512 } 13513 13514 var value = element.value, 13515 parent = element.parent; 13516 var isImplicitRule = element.column === parent.column && element.line === parent.line; 13517 13518 while (parent.type !== 'rule') { 13519 parent = parent.parent; 13520 if (!parent) return; 13521 } // short-circuit for the simplest case 13522 13523 13524 if (element.props.length === 1 && value.charCodeAt(0) !== 58 13525 /* colon */ 13526 && !fixedElements.get(parent)) { 13527 return; 13528 } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level) 13529 // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent" 13530 13531 13532 if (isImplicitRule) { 13533 return; 13534 } 13535 13536 fixedElements.set(element, true); 13537 var points = []; 13538 var rules = getRules(value, points); 13539 var parentRules = parent.props; 13540 13541 for (var i = 0, k = 0; i < rules.length; i++) { 13542 for (var j = 0; j < parentRules.length; j++, k++) { 13543 element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i]; 13544 } 13545 } 13546 }; 13547 var removeLabel = function removeLabel(element) { 13548 if (element.type === 'decl') { 13549 var value = element.value; 13550 13551 if ( // charcode for l 13552 value.charCodeAt(0) === 108 && // charcode for b 13553 value.charCodeAt(2) === 98) { 13554 // this ignores label 13555 element["return"] = ''; 13556 element.value = ''; 13557 } 13558 } 13559 }; 13560 var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'; 13561 13562 var isIgnoringComment = function isIgnoringComment(element) { 13563 return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1; 13564 }; 13565 13566 var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) { 13567 return function (element, index, children) { 13568 if (element.type !== 'rule' || cache.compat) return; 13569 var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g); 13570 13571 if (unsafePseudoClasses) { 13572 var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule 13573 // 13574 // considering this input: 13575 // .a { 13576 // .b /* comm */ {} 13577 // color: hotpink; 13578 // } 13579 // we get output corresponding to this: 13580 // .a { 13581 // & { 13582 // /* comm */ 13583 // color: hotpink; 13584 // } 13585 // .b {} 13586 // } 13587 13588 var commentContainer = isNested ? children[0].children : // global rule at the root level 13589 children; 13590 13591 for (var i = commentContainer.length - 1; i >= 0; i--) { 13592 var node = commentContainer[i]; 13593 13594 if (node.line < element.line) { 13595 break; 13596 } // it is quite weird but comments are *usually* put at `column: element.column - 1` 13597 // so we seek *from the end* for the node that is earlier than the rule's `element` and check that 13598 // this will also match inputs like this: 13599 // .a { 13600 // /* comm */ 13601 // .b {} 13602 // } 13603 // 13604 // but that is fine 13605 // 13606 // it would be the easiest to change the placement of the comment to be the first child of the rule: 13607 // .a { 13608 // .b { /* comm */ } 13609 // } 13610 // with such inputs we wouldn't have to search for the comment at all 13611 // TODO: consider changing this comment placement in the next major version 13612 13613 13614 if (node.column < element.column) { 13615 if (isIgnoringComment(node)) { 13616 return; 13617 } 13618 13619 break; 13620 } 13621 } 13622 13623 unsafePseudoClasses.forEach(function (unsafePseudoClass) { 13624 console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\"."); 13625 }); 13626 } 13627 }; 13628 }; 13629 13630 var isImportRule = function isImportRule(element) { 13631 return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64; 13632 }; 13633 13634 var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) { 13635 for (var i = index - 1; i >= 0; i--) { 13636 if (!isImportRule(children[i])) { 13637 return true; 13638 } 13639 } 13640 13641 return false; 13642 }; // use this to remove incorrect elements from further processing 13643 // so they don't get handed to the `sheet` (or anything else) 13644 // as that could potentially lead to additional logs which in turn could be overhelming to the user 13645 13646 13647 var nullifyElement = function nullifyElement(element) { 13648 element.type = ''; 13649 element.value = ''; 13650 element["return"] = ''; 13651 element.children = ''; 13652 element.props = ''; 13653 }; 13654 13655 var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) { 13656 if (!isImportRule(element)) { 13657 return; 13658 } 13659 13660 if (element.parent) { 13661 console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."); 13662 nullifyElement(element); 13663 } else if (isPrependedWithRegularRules(index, children)) { 13664 console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."); 13665 nullifyElement(element); 13666 } 13667 }; 13668 13669 /* eslint-disable no-fallthrough */ 13670 13671 function emotion_cache_browser_esm_prefix(value, length) { 13672 switch (hash(value, length)) { 13673 // color-adjust 13674 case 5103: 13675 return Enum_WEBKIT + 'print-' + value + value; 13676 // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function) 13677 13678 case 5737: 13679 case 4201: 13680 case 3177: 13681 case 3433: 13682 case 1641: 13683 case 4457: 13684 case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break 13685 13686 case 5572: 13687 case 6356: 13688 case 5844: 13689 case 3191: 13690 case 6645: 13691 case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite, 13692 13693 case 6391: 13694 case 5879: 13695 case 5623: 13696 case 6135: 13697 case 4599: 13698 case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width) 13699 13700 case 4215: 13701 case 6389: 13702 case 5109: 13703 case 5365: 13704 case 5621: 13705 case 3829: 13706 return Enum_WEBKIT + value + value; 13707 // appearance, user-select, transform, hyphens, text-size-adjust 13708 13709 case 5349: 13710 case 4246: 13711 case 4810: 13712 case 6968: 13713 case 2756: 13714 return Enum_WEBKIT + value + Enum_MOZ + value + Enum_MS + value + value; 13715 // flex, flex-direction 13716 13717 case 6828: 13718 case 4268: 13719 return Enum_WEBKIT + value + Enum_MS + value + value; 13720 // order 13721 13722 case 6165: 13723 return Enum_WEBKIT + value + Enum_MS + 'flex-' + value + value; 13724 // align-items 13725 13726 case 5187: 13727 return Enum_WEBKIT + value + Utility_replace(value, /(\w+).+(:[^]+)/, Enum_WEBKIT + 'box-$1$2' + Enum_MS + 'flex-$1$2') + value; 13728 // align-self 13729 13730 case 5443: 13731 return Enum_WEBKIT + value + Enum_MS + 'flex-item-' + Utility_replace(value, /flex-|-self/, '') + value; 13732 // align-content 13733 13734 case 4675: 13735 return Enum_WEBKIT + value + Enum_MS + 'flex-line-pack' + Utility_replace(value, /align-content|flex-|-self/, '') + value; 13736 // flex-shrink 13737 13738 case 5548: 13739 return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'shrink', 'negative') + value; 13740 // flex-basis 13741 13742 case 5292: 13743 return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'basis', 'preferred-size') + value; 13744 // flex-grow 13745 13746 case 6060: 13747 return Enum_WEBKIT + 'box-' + Utility_replace(value, '-grow', '') + Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'grow', 'positive') + value; 13748 // transition 13749 13750 case 4554: 13751 return Enum_WEBKIT + Utility_replace(value, /([^-])(transform)/g, '$1' + Enum_WEBKIT + '$2') + value; 13752 // cursor 13753 13754 case 6187: 13755 return Utility_replace(Utility_replace(Utility_replace(value, /(zoom-|grab)/, Enum_WEBKIT + '$1'), /(image-set)/, Enum_WEBKIT + '$1'), value, '') + value; 13756 // background, background-image 13757 13758 case 5495: 13759 case 3959: 13760 return Utility_replace(value, /(image-set\([^]*)/, Enum_WEBKIT + '$1' + '$`$1'); 13761 // justify-content 13762 13763 case 4968: 13764 return Utility_replace(Utility_replace(value, /(.+:)(flex-)?(.*)/, Enum_WEBKIT + 'box-pack:$3' + Enum_MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + Enum_WEBKIT + value + value; 13765 // (margin|padding)-inline-(start|end) 13766 13767 case 4095: 13768 case 3583: 13769 case 4068: 13770 case 2532: 13771 return Utility_replace(value, /(.+)-inline(.+)/, Enum_WEBKIT + '$1$2') + value; 13772 // (min|max)?(width|height|inline-size|block-size) 13773 13774 case 8116: 13775 case 7059: 13776 case 5753: 13777 case 5535: 13778 case 5445: 13779 case 5701: 13780 case 4933: 13781 case 4677: 13782 case 5533: 13783 case 5789: 13784 case 5021: 13785 case 4765: 13786 // stretch, max-content, min-content, fill-available 13787 if (Utility_strlen(value) - 1 - length > 6) switch (Utility_charat(value, length + 1)) { 13788 // (m)ax-content, (m)in-content 13789 case 109: 13790 // - 13791 if (Utility_charat(value, length + 4) !== 45) break; 13792 // (f)ill-available, (f)it-content 13793 13794 case 102: 13795 return Utility_replace(value, /(.+:)(.+)-([^]+)/, '$1' + Enum_WEBKIT + '$2-$3' + '$1' + Enum_MOZ + (Utility_charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value; 13796 // (s)tretch 13797 13798 case 115: 13799 return ~indexof(value, 'stretch') ? emotion_cache_browser_esm_prefix(Utility_replace(value, 'stretch', 'fill-available'), length) + value : value; 13800 } 13801 break; 13802 // position: sticky 13803 13804 case 4949: 13805 // (s)ticky? 13806 if (Utility_charat(value, length + 1) !== 115) break; 13807 // display: (flex|inline-flex) 13808 13809 case 6444: 13810 switch (Utility_charat(value, Utility_strlen(value) - 3 - (~indexof(value, '!important') && 10))) { 13811 // stic(k)y 13812 case 107: 13813 return Utility_replace(value, ':', ':' + Enum_WEBKIT) + value; 13814 // (inline-)?fl(e)x 13815 13816 case 101: 13817 return Utility_replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + Enum_WEBKIT + (Utility_charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + Enum_WEBKIT + '$2$3' + '$1' + Enum_MS + '$2box$3') + value; 13818 } 13819 13820 break; 13821 // writing-mode 13822 13823 case 5936: 13824 switch (Utility_charat(value, length + 11)) { 13825 // vertical-l(r) 13826 case 114: 13827 return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value; 13828 // vertical-r(l) 13829 13830 case 108: 13831 return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value; 13832 // horizontal(-)tb 13833 13834 case 45: 13835 return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value; 13836 } 13837 13838 return Enum_WEBKIT + value + Enum_MS + value + value; 13839 } 13840 13841 return value; 13842 } 13843 13844 var emotion_cache_browser_esm_prefixer = function prefixer(element, index, children, callback) { 13845 if (element.length > -1) if (!element["return"]) switch (element.type) { 13846 case Enum_DECLARATION: 13847 element["return"] = emotion_cache_browser_esm_prefix(element.value, element.length); 13848 break; 13849 13850 case Enum_KEYFRAMES: 13851 return Serializer_serialize([Tokenizer_copy(element, { 13852 value: Utility_replace(element.value, '@', '@' + Enum_WEBKIT) 13853 })], callback); 13854 13855 case Enum_RULESET: 13856 if (element.length) return Utility_combine(element.props, function (value) { 13857 switch (Utility_match(value, /(::plac\w+|:read-\w+)/)) { 13858 // :read-(only|write) 13859 case ':read-only': 13860 case ':read-write': 13861 return Serializer_serialize([Tokenizer_copy(element, { 13862 props: [Utility_replace(value, /:(read-\w+)/, ':' + Enum_MOZ + '$1')] 13863 })], callback); 13864 // :placeholder 13865 13866 case '::placeholder': 13867 return Serializer_serialize([Tokenizer_copy(element, { 13868 props: [Utility_replace(value, /:(plac\w+)/, ':' + Enum_WEBKIT + 'input-$1')] 13869 }), Tokenizer_copy(element, { 13870 props: [Utility_replace(value, /:(plac\w+)/, ':' + Enum_MOZ + '$1')] 13871 }), Tokenizer_copy(element, { 13872 props: [Utility_replace(value, /:(plac\w+)/, Enum_MS + 'input-$1')] 13873 })], callback); 13874 } 13875 13876 return ''; 13877 }); 13878 } 13879 }; 13880 13881 var defaultStylisPlugins = [emotion_cache_browser_esm_prefixer]; 13882 13883 var createCache = function createCache(options) { 13884 var key = options.key; 13885 13886 if (false) {} 13887 13888 if ( key === 'css') { 13889 var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration 13890 // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be) 13891 // note this very very intentionally targets all style elements regardless of the key to ensure 13892 // that creating a cache works inside of render of a React component 13893 13894 Array.prototype.forEach.call(ssrStyles, function (node) { 13895 // we want to only move elements which have a space in the data-emotion attribute value 13896 // because that indicates that it is an Emotion 11 server-side rendered style elements 13897 // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector 13898 // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes) 13899 // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles 13900 // will not result in the Emotion 10 styles being destroyed 13901 var dataEmotionAttribute = node.getAttribute('data-emotion'); 13902 13903 if (dataEmotionAttribute.indexOf(' ') === -1) { 13904 return; 13905 } 13906 document.head.appendChild(node); 13907 node.setAttribute('data-s', ''); 13908 }); 13909 } 13910 13911 var stylisPlugins = options.stylisPlugins || defaultStylisPlugins; 13912 13913 if (false) {} 13914 13915 var inserted = {}; 13916 var container; 13917 var nodesToHydrate = []; 13918 13919 { 13920 container = options.container || document.head; 13921 Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which 13922 // means that the style elements we're looking at are only Emotion 11 server-rendered style elements 13923 document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) { 13924 var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe 13925 13926 for (var i = 1; i < attrib.length; i++) { 13927 inserted[attrib[i]] = true; 13928 } 13929 13930 nodesToHydrate.push(node); 13931 }); 13932 } 13933 13934 var _insert; 13935 13936 var omnipresentPlugins = [compat, removeLabel]; 13937 13938 if (false) {} 13939 13940 { 13941 var currentSheet; 13942 var finalizingPlugins = [stringify, false ? 0 : rulesheet(function (rule) { 13943 currentSheet.insert(rule); 13944 })]; 13945 var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)); 13946 13947 var stylis = function stylis(styles) { 13948 return Serializer_serialize(compile(styles), serializer); 13949 }; 13950 13951 _insert = function insert(selector, serialized, sheet, shouldCache) { 13952 currentSheet = sheet; 13953 13954 if (false) {} 13955 13956 stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles); 13957 13958 if (shouldCache) { 13959 cache.inserted[serialized.name] = true; 13960 } 13961 }; 13962 } 13963 13964 var cache = { 13965 key: key, 13966 sheet: new StyleSheet({ 13967 key: key, 13968 container: container, 13969 nonce: options.nonce, 13970 speedy: options.speedy, 13971 prepend: options.prepend, 13972 insertionPoint: options.insertionPoint 13973 }), 13974 nonce: options.nonce, 13975 inserted: inserted, 13976 registered: {}, 13977 insert: _insert 13978 }; 13979 cache.sheet.hydrate(nodesToHydrate); 13980 return cache; 13981 }; 13982 13983 /* harmony default export */ const emotion_cache_browser_esm = (createCache); 13984 13985 ;// ./node_modules/@emotion/hash/dist/emotion-hash.esm.js 13986 /* eslint-disable */ 13987 // Inspired by https://github.com/garycourt/murmurhash-js 13988 // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86 13989 function murmur2(str) { 13990 // 'm' and 'r' are mixing constants generated offline. 13991 // They're not really 'magic', they just happen to work well. 13992 // const m = 0x5bd1e995; 13993 // const r = 24; 13994 // Initialize the hash 13995 var h = 0; // Mix 4 bytes at a time into the hash 13996 13997 var k, 13998 i = 0, 13999 len = str.length; 14000 14001 for (; len >= 4; ++i, len -= 4) { 14002 k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24; 14003 k = 14004 /* Math.imul(k, m): */ 14005 (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16); 14006 k ^= 14007 /* k >>> r: */ 14008 k >>> 24; 14009 h = 14010 /* Math.imul(k, m): */ 14011 (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ 14012 /* Math.imul(h, m): */ 14013 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 14014 } // Handle the last few bytes of the input array 14015 14016 14017 switch (len) { 14018 case 3: 14019 h ^= (str.charCodeAt(i + 2) & 0xff) << 16; 14020 14021 case 2: 14022 h ^= (str.charCodeAt(i + 1) & 0xff) << 8; 14023 14024 case 1: 14025 h ^= str.charCodeAt(i) & 0xff; 14026 h = 14027 /* Math.imul(h, m): */ 14028 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 14029 } // Do a few final mixes of the hash to ensure the last few 14030 // bytes are well-incorporated. 14031 14032 14033 h ^= h >>> 13; 14034 h = 14035 /* Math.imul(h, m): */ 14036 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 14037 return ((h ^ h >>> 15) >>> 0).toString(36); 14038 } 14039 14040 /* harmony default export */ const emotion_hash_esm = (murmur2); 14041 14042 ;// ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js 14043 var unitlessKeys = { 14044 animationIterationCount: 1, 14045 borderImageOutset: 1, 14046 borderImageSlice: 1, 14047 borderImageWidth: 1, 14048 boxFlex: 1, 14049 boxFlexGroup: 1, 14050 boxOrdinalGroup: 1, 14051 columnCount: 1, 14052 columns: 1, 14053 flex: 1, 14054 flexGrow: 1, 14055 flexPositive: 1, 14056 flexShrink: 1, 14057 flexNegative: 1, 14058 flexOrder: 1, 14059 gridRow: 1, 14060 gridRowEnd: 1, 14061 gridRowSpan: 1, 14062 gridRowStart: 1, 14063 gridColumn: 1, 14064 gridColumnEnd: 1, 14065 gridColumnSpan: 1, 14066 gridColumnStart: 1, 14067 msGridRow: 1, 14068 msGridRowSpan: 1, 14069 msGridColumn: 1, 14070 msGridColumnSpan: 1, 14071 fontWeight: 1, 14072 lineHeight: 1, 14073 opacity: 1, 14074 order: 1, 14075 orphans: 1, 14076 tabSize: 1, 14077 widows: 1, 14078 zIndex: 1, 14079 zoom: 1, 14080 WebkitLineClamp: 1, 14081 // SVG-related properties 14082 fillOpacity: 1, 14083 floodOpacity: 1, 14084 stopOpacity: 1, 14085 strokeDasharray: 1, 14086 strokeDashoffset: 1, 14087 strokeMiterlimit: 1, 14088 strokeOpacity: 1, 14089 strokeWidth: 1 14090 }; 14091 14092 /* harmony default export */ const emotion_unitless_esm = (unitlessKeys); 14093 14094 ;// ./node_modules/@emotion/memoize/dist/emotion-memoize.esm.js 14095 function memoize(fn) { 14096 var cache = Object.create(null); 14097 return function (arg) { 14098 if (cache[arg] === undefined) cache[arg] = fn(arg); 14099 return cache[arg]; 14100 }; 14101 } 14102 14103 14104 14105 ;// ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js 14106 14107 14108 14109 14110 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences"; 14111 var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key)."; 14112 var hyphenateRegex = /[A-Z]|^ms/g; 14113 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g; 14114 14115 var isCustomProperty = function isCustomProperty(property) { 14116 return property.charCodeAt(1) === 45; 14117 }; 14118 14119 var isProcessableValue = function isProcessableValue(value) { 14120 return value != null && typeof value !== 'boolean'; 14121 }; 14122 14123 var processStyleName = /* #__PURE__ */memoize(function (styleName) { 14124 return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase(); 14125 }); 14126 14127 var processStyleValue = function processStyleValue(key, value) { 14128 switch (key) { 14129 case 'animation': 14130 case 'animationName': 14131 { 14132 if (typeof value === 'string') { 14133 return value.replace(animationRegex, function (match, p1, p2) { 14134 cursor = { 14135 name: p1, 14136 styles: p2, 14137 next: cursor 14138 }; 14139 return p1; 14140 }); 14141 } 14142 } 14143 } 14144 14145 if (emotion_unitless_esm[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) { 14146 return value + 'px'; 14147 } 14148 14149 return value; 14150 }; 14151 14152 if (false) { var hyphenatedCache, hyphenPattern, msPattern, oldProcessStyleValue, contentValues, contentValuePattern; } 14153 14154 var noComponentSelectorMessage = (/* unused pure expression or super */ null && ('Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.')); 14155 14156 function handleInterpolation(mergedProps, registered, interpolation) { 14157 if (interpolation == null) { 14158 return ''; 14159 } 14160 14161 if (interpolation.__emotion_styles !== undefined) { 14162 if (false) {} 14163 14164 return interpolation; 14165 } 14166 14167 switch (typeof interpolation) { 14168 case 'boolean': 14169 { 14170 return ''; 14171 } 14172 14173 case 'object': 14174 { 14175 if (interpolation.anim === 1) { 14176 cursor = { 14177 name: interpolation.name, 14178 styles: interpolation.styles, 14179 next: cursor 14180 }; 14181 return interpolation.name; 14182 } 14183 14184 if (interpolation.styles !== undefined) { 14185 var next = interpolation.next; 14186 14187 if (next !== undefined) { 14188 // not the most efficient thing ever but this is a pretty rare case 14189 // and there will be very few iterations of this generally 14190 while (next !== undefined) { 14191 cursor = { 14192 name: next.name, 14193 styles: next.styles, 14194 next: cursor 14195 }; 14196 next = next.next; 14197 } 14198 } 14199 14200 var styles = interpolation.styles + ";"; 14201 14202 if (false) {} 14203 14204 return styles; 14205 } 14206 14207 return createStringFromObject(mergedProps, registered, interpolation); 14208 } 14209 14210 case 'function': 14211 { 14212 if (mergedProps !== undefined) { 14213 var previousCursor = cursor; 14214 var result = interpolation(mergedProps); 14215 cursor = previousCursor; 14216 return handleInterpolation(mergedProps, registered, result); 14217 } else if (false) {} 14218 14219 break; 14220 } 14221 14222 case 'string': 14223 if (false) { var replaced, matched; } 14224 14225 break; 14226 } // finalize string values (regular strings and functions interpolated into css calls) 14227 14228 14229 if (registered == null) { 14230 return interpolation; 14231 } 14232 14233 var cached = registered[interpolation]; 14234 return cached !== undefined ? cached : interpolation; 14235 } 14236 14237 function createStringFromObject(mergedProps, registered, obj) { 14238 var string = ''; 14239 14240 if (Array.isArray(obj)) { 14241 for (var i = 0; i < obj.length; i++) { 14242 string += handleInterpolation(mergedProps, registered, obj[i]) + ";"; 14243 } 14244 } else { 14245 for (var _key in obj) { 14246 var value = obj[_key]; 14247 14248 if (typeof value !== 'object') { 14249 if (registered != null && registered[value] !== undefined) { 14250 string += _key + "{" + registered[value] + "}"; 14251 } else if (isProcessableValue(value)) { 14252 string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"; 14253 } 14254 } else { 14255 if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {} 14256 14257 if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) { 14258 for (var _i = 0; _i < value.length; _i++) { 14259 if (isProcessableValue(value[_i])) { 14260 string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";"; 14261 } 14262 } 14263 } else { 14264 var interpolated = handleInterpolation(mergedProps, registered, value); 14265 14266 switch (_key) { 14267 case 'animation': 14268 case 'animationName': 14269 { 14270 string += processStyleName(_key) + ":" + interpolated + ";"; 14271 break; 14272 } 14273 14274 default: 14275 { 14276 if (false) {} 14277 14278 string += _key + "{" + interpolated + "}"; 14279 } 14280 } 14281 } 14282 } 14283 } 14284 } 14285 14286 return string; 14287 } 14288 14289 var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g; 14290 var sourceMapPattern; 14291 14292 if (false) {} // this is the cursor for keyframes 14293 // keyframes are stored on the SerializedStyles object as a linked list 14294 14295 14296 var cursor; 14297 var emotion_serialize_browser_esm_serializeStyles = function serializeStyles(args, registered, mergedProps) { 14298 if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) { 14299 return args[0]; 14300 } 14301 14302 var stringMode = true; 14303 var styles = ''; 14304 cursor = undefined; 14305 var strings = args[0]; 14306 14307 if (strings == null || strings.raw === undefined) { 14308 stringMode = false; 14309 styles += handleInterpolation(mergedProps, registered, strings); 14310 } else { 14311 if (false) {} 14312 14313 styles += strings[0]; 14314 } // we start at 1 since we've already handled the first arg 14315 14316 14317 for (var i = 1; i < args.length; i++) { 14318 styles += handleInterpolation(mergedProps, registered, args[i]); 14319 14320 if (stringMode) { 14321 if (false) {} 14322 14323 styles += strings[i]; 14324 } 14325 } 14326 14327 var sourceMap; 14328 14329 if (false) {} // using a global regex with .exec is stateful so lastIndex has to be reset each time 14330 14331 14332 labelPattern.lastIndex = 0; 14333 var identifierName = ''; 14334 var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5 14335 14336 while ((match = labelPattern.exec(styles)) !== null) { 14337 identifierName += '-' + // $FlowFixMe we know it's not null 14338 match[1]; 14339 } 14340 14341 var name = emotion_hash_esm(styles) + identifierName; 14342 14343 if (false) {} 14344 14345 return { 14346 name: name, 14347 styles: styles, 14348 next: cursor 14349 }; 14350 }; 14351 14352 14353 14354 ;// ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js 14355 14356 14357 14358 var syncFallback = function syncFallback(create) { 14359 return create(); 14360 }; 14361 14362 var useInsertionEffect = external_React_['useInsertion' + 'Effect'] ? external_React_['useInsertion' + 'Effect'] : false; 14363 var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback; 14364 var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectWithLayoutFallback = (/* unused pure expression or super */ null && (useInsertionEffect || useLayoutEffect)); 14365 14366 14367 14368 ;// ./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js 14369 14370 14371 14372 14373 14374 14375 14376 14377 14378 var emotion_element_6a883da9_browser_esm_hasOwnProperty = {}.hasOwnProperty; 14379 14380 var EmotionCacheContext = /* #__PURE__ */(0,external_React_.createContext)( // we're doing this to avoid preconstruct's dead code elimination in this one case 14381 // because this module is primarily intended for the browser and node 14382 // but it's also required in react native and similar environments sometimes 14383 // and we could have a special build just for that 14384 // but this is much easier and the native packages 14385 // might use a different theme context in the future anyway 14386 typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm({ 14387 key: 'css' 14388 }) : null); 14389 14390 if (false) {} 14391 14392 var CacheProvider = EmotionCacheContext.Provider; 14393 var __unsafe_useEmotionCache = function useEmotionCache() { 14394 return (0,external_React_.useContext)(EmotionCacheContext); 14395 }; 14396 14397 var emotion_element_6a883da9_browser_esm_withEmotionCache = function withEmotionCache(func) { 14398 // $FlowFixMe 14399 return /*#__PURE__*/(0,external_React_.forwardRef)(function (props, ref) { 14400 // the cache will never be null in the browser 14401 var cache = (0,external_React_.useContext)(EmotionCacheContext); 14402 return func(props, cache, ref); 14403 }); 14404 }; 14405 14406 var emotion_element_6a883da9_browser_esm_ThemeContext = /* #__PURE__ */(0,external_React_.createContext)({}); 14407 14408 if (false) {} 14409 14410 var useTheme = function useTheme() { 14411 return useContext(emotion_element_6a883da9_browser_esm_ThemeContext); 14412 }; 14413 14414 var getTheme = function getTheme(outerTheme, theme) { 14415 if (typeof theme === 'function') { 14416 var mergedTheme = theme(outerTheme); 14417 14418 if (false) {} 14419 14420 return mergedTheme; 14421 } 14422 14423 if (false) {} 14424 14425 return _extends({}, outerTheme, theme); 14426 }; 14427 14428 var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */ null && (weakMemoize(function (outerTheme) { 14429 return weakMemoize(function (theme) { 14430 return getTheme(outerTheme, theme); 14431 }); 14432 }))); 14433 var ThemeProvider = function ThemeProvider(props) { 14434 var theme = useContext(emotion_element_6a883da9_browser_esm_ThemeContext); 14435 14436 if (props.theme !== theme) { 14437 theme = createCacheWithTheme(theme)(props.theme); 14438 } 14439 14440 return /*#__PURE__*/createElement(emotion_element_6a883da9_browser_esm_ThemeContext.Provider, { 14441 value: theme 14442 }, props.children); 14443 }; 14444 function withTheme(Component) { 14445 var componentName = Component.displayName || Component.name || 'Component'; 14446 14447 var render = function render(props, ref) { 14448 var theme = useContext(emotion_element_6a883da9_browser_esm_ThemeContext); 14449 return /*#__PURE__*/createElement(Component, _extends({ 14450 theme: theme, 14451 ref: ref 14452 }, props)); 14453 }; // $FlowFixMe 14454 14455 14456 var WithTheme = /*#__PURE__*/forwardRef(render); 14457 WithTheme.displayName = "WithTheme(" + componentName + ")"; 14458 return hoistNonReactStatics(WithTheme, Component); 14459 } 14460 14461 var getLastPart = function getLastPart(functionName) { 14462 // The match may be something like 'Object.createEmotionProps' or 14463 // 'Loader.prototype.render' 14464 var parts = functionName.split('.'); 14465 return parts[parts.length - 1]; 14466 }; 14467 14468 var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) { 14469 // V8 14470 var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line); 14471 if (match) return getLastPart(match[1]); // Safari / Firefox 14472 14473 match = /^([A-Za-z0-9$.]+)@/.exec(line); 14474 if (match) return getLastPart(match[1]); 14475 return undefined; 14476 }; 14477 14478 var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS 14479 // identifiers, thus we only need to replace what is a valid character for JS, 14480 // but not for CSS. 14481 14482 var sanitizeIdentifier = function sanitizeIdentifier(identifier) { 14483 return identifier.replace(/\$/g, '-'); 14484 }; 14485 14486 var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) { 14487 if (!stackTrace) return undefined; 14488 var lines = stackTrace.split('\n'); 14489 14490 for (var i = 0; i < lines.length; i++) { 14491 var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error" 14492 14493 if (!functionName) continue; // If we reach one of these, we have gone too far and should quit 14494 14495 if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an 14496 // uppercase letter 14497 14498 if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName); 14499 } 14500 14501 return undefined; 14502 }; 14503 14504 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'; 14505 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__'; 14506 var emotion_element_6a883da9_browser_esm_createEmotionProps = function createEmotionProps(type, props) { 14507 if (false) {} 14508 14509 var newProps = {}; 14510 14511 for (var key in props) { 14512 if (emotion_element_6a883da9_browser_esm_hasOwnProperty.call(props, key)) { 14513 newProps[key] = props[key]; 14514 } 14515 } 14516 14517 newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when 14518 // the label hasn't already been computed 14519 14520 if (false) { var label; } 14521 14522 return newProps; 14523 }; 14524 14525 var Insertion = function Insertion(_ref) { 14526 var cache = _ref.cache, 14527 serialized = _ref.serialized, 14528 isStringTag = _ref.isStringTag; 14529 registerStyles(cache, serialized, isStringTag); 14530 var rules = useInsertionEffectAlwaysWithSyncFallback(function () { 14531 return insertStyles(cache, serialized, isStringTag); 14532 }); 14533 14534 return null; 14535 }; 14536 14537 var emotion_element_6a883da9_browser_esm_Emotion = /* #__PURE__ */(/* unused pure expression or super */ null && (emotion_element_6a883da9_browser_esm_withEmotionCache(function (props, cache, ref) { 14538 var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works 14539 // not passing the registered cache to serializeStyles because it would 14540 // make certain babel optimisations not possible 14541 14542 if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) { 14543 cssProp = cache.registered[cssProp]; 14544 } 14545 14546 var WrappedComponent = props[typePropName]; 14547 var registeredStyles = [cssProp]; 14548 var className = ''; 14549 14550 if (typeof props.className === 'string') { 14551 className = getRegisteredStyles(cache.registered, registeredStyles, props.className); 14552 } else if (props.className != null) { 14553 className = props.className + " "; 14554 } 14555 14556 var serialized = serializeStyles(registeredStyles, undefined, useContext(emotion_element_6a883da9_browser_esm_ThemeContext)); 14557 14558 if (false) { var labelFromStack; } 14559 14560 className += cache.key + "-" + serialized.name; 14561 var newProps = {}; 14562 14563 for (var key in props) { 14564 if (emotion_element_6a883da9_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) { 14565 newProps[key] = props[key]; 14566 } 14567 } 14568 14569 newProps.ref = ref; 14570 newProps.className = className; 14571 return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, { 14572 cache: cache, 14573 serialized: serialized, 14574 isStringTag: typeof WrappedComponent === 'string' 14575 }), /*#__PURE__*/createElement(WrappedComponent, newProps)); 14576 }))); 14577 14578 if (false) {} 14579 14580 14581 14582 ;// ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js 14583 var isBrowser = "object" !== 'undefined'; 14584 function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) { 14585 var rawClassName = ''; 14586 classNames.split(' ').forEach(function (className) { 14587 if (registered[className] !== undefined) { 14588 registeredStyles.push(registered[className] + ";"); 14589 } else { 14590 rawClassName += className + " "; 14591 } 14592 }); 14593 return rawClassName; 14594 } 14595 var emotion_utils_browser_esm_registerStyles = function registerStyles(cache, serialized, isStringTag) { 14596 var className = cache.key + "-" + serialized.name; 14597 14598 if ( // we only need to add the styles to the registered cache if the 14599 // class name could be used further down 14600 // the tree but if it's a string tag, we know it won't 14601 // so we don't have to add it to registered cache. 14602 // this improves memory usage since we can avoid storing the whole style string 14603 (isStringTag === false || // we need to always store it if we're in compat mode and 14604 // in node since emotion-server relies on whether a style is in 14605 // the registered cache to know whether a style is global or not 14606 // also, note that this check will be dead code eliminated in the browser 14607 isBrowser === false ) && cache.registered[className] === undefined) { 14608 cache.registered[className] = serialized.styles; 14609 } 14610 }; 14611 var emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) { 14612 emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag); 14613 var className = cache.key + "-" + serialized.name; 14614 14615 if (cache.inserted[serialized.name] === undefined) { 14616 var current = serialized; 14617 14618 do { 14619 var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true); 14620 14621 current = current.next; 14622 } while (current !== undefined); 14623 } 14624 }; 14625 14626 14627 14628 ;// ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js 14629 14630 14631 14632 14633 function insertWithoutScoping(cache, serialized) { 14634 if (cache.inserted[serialized.name] === undefined) { 14635 return cache.insert('', serialized, cache.sheet, true); 14636 } 14637 } 14638 14639 function merge(registered, css, className) { 14640 var registeredStyles = []; 14641 var rawClassName = emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, className); 14642 14643 if (registeredStyles.length < 2) { 14644 return className; 14645 } 14646 14647 return rawClassName + css(registeredStyles); 14648 } 14649 14650 var createEmotion = function createEmotion(options) { 14651 var cache = emotion_cache_browser_esm(options); // $FlowFixMe 14652 14653 cache.sheet.speedy = function (value) { 14654 if (false) {} 14655 14656 this.isSpeedy = value; 14657 }; 14658 14659 cache.compat = true; 14660 14661 var css = function css() { 14662 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 14663 args[_key] = arguments[_key]; 14664 } 14665 14666 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered, undefined); 14667 emotion_utils_browser_esm_insertStyles(cache, serialized, false); 14668 return cache.key + "-" + serialized.name; 14669 }; 14670 14671 var keyframes = function keyframes() { 14672 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 14673 args[_key2] = arguments[_key2]; 14674 } 14675 14676 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered); 14677 var animation = "animation-" + serialized.name; 14678 insertWithoutScoping(cache, { 14679 name: serialized.name, 14680 styles: "@keyframes " + animation + "{" + serialized.styles + "}" 14681 }); 14682 return animation; 14683 }; 14684 14685 var injectGlobal = function injectGlobal() { 14686 for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { 14687 args[_key3] = arguments[_key3]; 14688 } 14689 14690 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered); 14691 insertWithoutScoping(cache, serialized); 14692 }; 14693 14694 var cx = function cx() { 14695 for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { 14696 args[_key4] = arguments[_key4]; 14697 } 14698 14699 return merge(cache.registered, css, classnames(args)); 14700 }; 14701 14702 return { 14703 css: css, 14704 cx: cx, 14705 injectGlobal: injectGlobal, 14706 keyframes: keyframes, 14707 hydrate: function hydrate(ids) { 14708 ids.forEach(function (key) { 14709 cache.inserted[key] = true; 14710 }); 14711 }, 14712 flush: function flush() { 14713 cache.registered = {}; 14714 cache.inserted = {}; 14715 cache.sheet.flush(); 14716 }, 14717 // $FlowFixMe 14718 sheet: cache.sheet, 14719 cache: cache, 14720 getRegisteredStyles: emotion_utils_browser_esm_getRegisteredStyles.bind(null, cache.registered), 14721 merge: merge.bind(null, cache.registered, css) 14722 }; 14723 }; 14724 14725 var classnames = function classnames(args) { 14726 var cls = ''; 14727 14728 for (var i = 0; i < args.length; i++) { 14729 var arg = args[i]; 14730 if (arg == null) continue; 14731 var toAdd = void 0; 14732 14733 switch (typeof arg) { 14734 case 'boolean': 14735 break; 14736 14737 case 'object': 14738 { 14739 if (Array.isArray(arg)) { 14740 toAdd = classnames(arg); 14741 } else { 14742 toAdd = ''; 14743 14744 for (var k in arg) { 14745 if (arg[k] && k) { 14746 toAdd && (toAdd += ' '); 14747 toAdd += k; 14748 } 14749 } 14750 } 14751 14752 break; 14753 } 14754 14755 default: 14756 { 14757 toAdd = arg; 14758 } 14759 } 14760 14761 if (toAdd) { 14762 cls && (cls += ' '); 14763 cls += toAdd; 14764 } 14765 } 14766 14767 return cls; 14768 }; 14769 14770 /* harmony default export */ const emotion_css_create_instance_esm = (createEmotion); 14771 14772 ;// ./node_modules/@emotion/css/dist/emotion-css.esm.js 14773 14774 14775 14776 14777 14778 var _createEmotion = emotion_css_create_instance_esm({ 14779 key: 'css' 14780 }), 14781 flush = _createEmotion.flush, 14782 hydrate = _createEmotion.hydrate, 14783 emotion_css_esm_cx = _createEmotion.cx, 14784 emotion_css_esm_merge = _createEmotion.merge, 14785 emotion_css_esm_getRegisteredStyles = _createEmotion.getRegisteredStyles, 14786 injectGlobal = _createEmotion.injectGlobal, 14787 keyframes = _createEmotion.keyframes, 14788 css = _createEmotion.css, 14789 sheet = _createEmotion.sheet, 14790 cache = _createEmotion.cache; 14791 14792 14793 14794 ;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-cx.js 14795 /** 14796 * External dependencies 14797 */ 14798 14799 14800 // eslint-disable-next-line no-restricted-imports 14801 14802 // eslint-disable-next-line no-restricted-imports 14803 14804 14805 /** 14806 * WordPress dependencies 14807 */ 14808 14809 const isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined'); 14810 14811 /** 14812 * Retrieve a `cx` function that knows how to handle `SerializedStyles` 14813 * returned by the `@emotion/react` `css` function in addition to what 14814 * `cx` normally knows how to handle. It also hooks into the Emotion 14815 * Cache, allowing `css` calls to work inside iframes. 14816 * 14817 * ```jsx 14818 * import { css } from '@emotion/react'; 14819 * 14820 * const styles = css` 14821 * color: red 14822 * `; 14823 * 14824 * function RedText( { className, ...props } ) { 14825 * const cx = useCx(); 14826 * 14827 * const classes = cx(styles, className); 14828 * 14829 * return <span className={classes} {...props} />; 14830 * } 14831 * ``` 14832 */ 14833 const useCx = () => { 14834 const cache = __unsafe_useEmotionCache(); 14835 const cx = (0,external_wp_element_namespaceObject.useCallback)((...classNames) => { 14836 if (cache === null) { 14837 throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context'); 14838 } 14839 return emotion_css_esm_cx(...classNames.map(arg => { 14840 if (isSerializedStyles(arg)) { 14841 emotion_utils_browser_esm_insertStyles(cache, arg, false); 14842 return `$cache.key}-$arg.name}`; 14843 } 14844 return arg; 14845 })); 14846 }, [cache]); 14847 return cx; 14848 }; 14849 14850 ;// ./node_modules/@wordpress/components/build-module/context/use-context-system.js 14851 /** 14852 * WordPress dependencies 14853 */ 14854 14855 14856 /** 14857 * Internal dependencies 14858 */ 14859 14860 14861 14862 14863 14864 /** 14865 * @template TProps 14866 * @typedef {TProps & { className: string }} ConnectedProps 14867 */ 14868 14869 /** 14870 * Custom hook that derives registered props from the Context system. 14871 * These derived props are then consolidated with incoming component props. 14872 * 14873 * @template {{ className?: string }} P 14874 * @param {P} props Incoming props from the component. 14875 * @param {string} namespace The namespace to register and to derive context props from. 14876 * @return {ConnectedProps<P>} The connected props. 14877 */ 14878 function useContextSystem(props, namespace) { 14879 const contextSystemProps = useComponentsContext(); 14880 if (typeof namespace === 'undefined') { 14881 true ? external_wp_warning_default()('useContextSystem: Please provide a namespace') : 0; 14882 } 14883 const contextProps = contextSystemProps?.[namespace] || {}; 14884 14885 /* eslint-disable jsdoc/no-undefined-types */ 14886 /** @type {ConnectedProps<P>} */ 14887 // @ts-ignore We fill in the missing properties below 14888 const finalComponentProps = { 14889 ...getConnectedNamespace(), 14890 ...getNamespace(namespace) 14891 }; 14892 /* eslint-enable jsdoc/no-undefined-types */ 14893 14894 const { 14895 _overrides: overrideProps, 14896 ...otherContextProps 14897 } = contextProps; 14898 const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props; 14899 const cx = useCx(); 14900 const classes = cx(getStyledClassNameFromKey(namespace), props.className); 14901 14902 // Provides the ability to customize the render of the component. 14903 const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children; 14904 for (const key in initialMergedProps) { 14905 // @ts-ignore filling in missing props 14906 finalComponentProps[key] = initialMergedProps[key]; 14907 } 14908 for (const key in overrideProps) { 14909 // @ts-ignore filling in missing props 14910 finalComponentProps[key] = overrideProps[key]; 14911 } 14912 14913 // Setting an `undefined` explicitly can cause unintended overwrites 14914 // when a `cloneElement()` is involved. 14915 if (rendered !== undefined) { 14916 // @ts-ignore 14917 finalComponentProps.children = rendered; 14918 } 14919 finalComponentProps.className = classes; 14920 return finalComponentProps; 14921 } 14922 14923 ;// ./node_modules/@wordpress/components/build-module/context/context-connect.js 14924 /** 14925 * External dependencies 14926 */ 14927 14928 /** 14929 * WordPress dependencies 14930 */ 14931 14932 14933 14934 /** 14935 * Internal dependencies 14936 */ 14937 14938 14939 /** 14940 * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component 14941 * within the Context system under a specified namespace. 14942 * 14943 * @param Component The component to register into the Context system. 14944 * @param namespace The namespace to register the component under. 14945 * @return The connected WordPressComponent 14946 */ 14947 function contextConnect(Component, namespace) { 14948 return _contextConnect(Component, namespace, { 14949 forwardsRef: true 14950 }); 14951 } 14952 14953 /** 14954 * "Connects" (or registers) a component within the Context system under a specified namespace. 14955 * Does not forward a ref. 14956 * 14957 * @param Component The component to register into the Context system. 14958 * @param namespace The namespace to register the component under. 14959 * @return The connected WordPressComponent 14960 */ 14961 function contextConnectWithoutRef(Component, namespace) { 14962 return _contextConnect(Component, namespace); 14963 } 14964 14965 // This is an (experimental) evolution of the initial connect() HOC. 14966 // The hope is that we can improve render performance by removing functional 14967 // component wrappers. 14968 function _contextConnect(Component, namespace, options) { 14969 const WrappedComponent = options?.forwardsRef ? (0,external_wp_element_namespaceObject.forwardRef)(Component) : Component; 14970 if (typeof namespace === 'undefined') { 14971 true ? external_wp_warning_default()('contextConnect: Please provide a namespace') : 0; 14972 } 14973 14974 // @ts-expect-error internal property 14975 let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace]; 14976 14977 /** 14978 * Consolidate (merge) namespaces before attaching it to the WrappedComponent. 14979 */ 14980 if (Array.isArray(namespace)) { 14981 mergedNamespace = [...mergedNamespace, ...namespace]; 14982 } 14983 if (typeof namespace === 'string') { 14984 mergedNamespace = [...mergedNamespace, namespace]; 14985 } 14986 14987 // @ts-expect-error We can't rely on inferred types here because of the 14988 // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33 14989 return Object.assign(WrappedComponent, { 14990 [CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)], 14991 displayName: namespace, 14992 selector: `.$getStyledClassNameFromKey(namespace)}` 14993 }); 14994 } 14995 14996 /** 14997 * Attempts to retrieve the connected namespace from a component. 14998 * 14999 * @param Component The component to retrieve a namespace from. 15000 * @return The connected namespaces. 15001 */ 15002 function getConnectNamespace(Component) { 15003 if (!Component) { 15004 return []; 15005 } 15006 let namespaces = []; 15007 15008 // @ts-ignore internal property 15009 if (Component[CONNECT_STATIC_NAMESPACE]) { 15010 // @ts-ignore internal property 15011 namespaces = Component[CONNECT_STATIC_NAMESPACE]; 15012 } 15013 15014 // @ts-ignore 15015 if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) { 15016 // @ts-ignore 15017 namespaces = Component.type[CONNECT_STATIC_NAMESPACE]; 15018 } 15019 return namespaces; 15020 } 15021 15022 /** 15023 * Checks to see if a component is connected within the Context system. 15024 * 15025 * @param Component The component to retrieve a namespace from. 15026 * @param match The namespace to check. 15027 */ 15028 function hasConnectNamespace(Component, match) { 15029 if (!Component) { 15030 return false; 15031 } 15032 if (typeof match === 'string') { 15033 return getConnectNamespace(Component).includes(match); 15034 } 15035 if (Array.isArray(match)) { 15036 return match.some(result => getConnectNamespace(Component).includes(result)); 15037 } 15038 return false; 15039 } 15040 15041 ;// ./node_modules/@wordpress/components/build-module/visually-hidden/styles.js 15042 /** 15043 * External dependencies 15044 */ 15045 15046 const visuallyHidden = { 15047 border: 0, 15048 clip: 'rect(1px, 1px, 1px, 1px)', 15049 WebkitClipPath: 'inset( 50% )', 15050 clipPath: 'inset( 50% )', 15051 height: '1px', 15052 margin: '-1px', 15053 overflow: 'hidden', 15054 padding: 0, 15055 position: 'absolute', 15056 width: '1px', 15057 wordWrap: 'normal' 15058 }; 15059 15060 ;// ./node_modules/@babel/runtime/helpers/esm/extends.js 15061 function extends_extends() { 15062 return extends_extends = Object.assign ? Object.assign.bind() : function (n) { 15063 for (var e = 1; e < arguments.length; e++) { 15064 var t = arguments[e]; 15065 for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); 15066 } 15067 return n; 15068 }, extends_extends.apply(null, arguments); 15069 } 15070 15071 ;// ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js 15072 15073 15074 var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23 15075 15076 var isPropValid = /* #__PURE__ */memoize(function (prop) { 15077 return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 15078 /* o */ 15079 && prop.charCodeAt(1) === 110 15080 /* n */ 15081 && prop.charCodeAt(2) < 91; 15082 } 15083 /* Z+1 */ 15084 ); 15085 15086 15087 15088 ;// ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js 15089 15090 15091 15092 15093 15094 15095 15096 15097 var testOmitPropsOnStringTag = isPropValid; 15098 15099 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) { 15100 return key !== 'theme'; 15101 }; 15102 15103 var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) { 15104 return typeof tag === 'string' && // 96 is one less than the char code 15105 // for "a" so this is checking that 15106 // it's a lowercase character 15107 tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent; 15108 }; 15109 var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) { 15110 var shouldForwardProp; 15111 15112 if (options) { 15113 var optionsShouldForwardProp = options.shouldForwardProp; 15114 shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) { 15115 return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName); 15116 } : optionsShouldForwardProp; 15117 } 15118 15119 if (typeof shouldForwardProp !== 'function' && isReal) { 15120 shouldForwardProp = tag.__emotion_forwardProp; 15121 } 15122 15123 return shouldForwardProp; 15124 }; 15125 15126 var emotion_styled_base_browser_esm_ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences"; 15127 15128 var emotion_styled_base_browser_esm_Insertion = function Insertion(_ref) { 15129 var cache = _ref.cache, 15130 serialized = _ref.serialized, 15131 isStringTag = _ref.isStringTag; 15132 emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag); 15133 var rules = emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback(function () { 15134 return emotion_utils_browser_esm_insertStyles(cache, serialized, isStringTag); 15135 }); 15136 15137 return null; 15138 }; 15139 15140 var createStyled = function createStyled(tag, options) { 15141 if (false) {} 15142 15143 var isReal = tag.__emotion_real === tag; 15144 var baseTag = isReal && tag.__emotion_base || tag; 15145 var identifierName; 15146 var targetClassName; 15147 15148 if (options !== undefined) { 15149 identifierName = options.label; 15150 targetClassName = options.target; 15151 } 15152 15153 var shouldForwardProp = composeShouldForwardProps(tag, options, isReal); 15154 var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag); 15155 var shouldUseAs = !defaultShouldForwardProp('as'); 15156 return function () { 15157 var args = arguments; 15158 var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; 15159 15160 if (identifierName !== undefined) { 15161 styles.push("label:" + identifierName + ";"); 15162 } 15163 15164 if (args[0] == null || args[0].raw === undefined) { 15165 styles.push.apply(styles, args); 15166 } else { 15167 if (false) {} 15168 15169 styles.push(args[0][0]); 15170 var len = args.length; 15171 var i = 1; 15172 15173 for (; i < len; i++) { 15174 if (false) {} 15175 15176 styles.push(args[i], args[0][i]); 15177 } 15178 } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class 15179 15180 15181 var Styled = emotion_element_6a883da9_browser_esm_withEmotionCache(function (props, cache, ref) { 15182 var FinalTag = shouldUseAs && props.as || baseTag; 15183 var className = ''; 15184 var classInterpolations = []; 15185 var mergedProps = props; 15186 15187 if (props.theme == null) { 15188 mergedProps = {}; 15189 15190 for (var key in props) { 15191 mergedProps[key] = props[key]; 15192 } 15193 15194 mergedProps.theme = (0,external_React_.useContext)(emotion_element_6a883da9_browser_esm_ThemeContext); 15195 } 15196 15197 if (typeof props.className === 'string') { 15198 className = emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className); 15199 } else if (props.className != null) { 15200 className = props.className + " "; 15201 } 15202 15203 var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps); 15204 className += cache.key + "-" + serialized.name; 15205 15206 if (targetClassName !== undefined) { 15207 className += " " + targetClassName; 15208 } 15209 15210 var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp; 15211 var newProps = {}; 15212 15213 for (var _key in props) { 15214 if (shouldUseAs && _key === 'as') continue; 15215 15216 if ( // $FlowFixMe 15217 finalShouldForwardProp(_key)) { 15218 newProps[_key] = props[_key]; 15219 } 15220 } 15221 15222 newProps.className = className; 15223 newProps.ref = ref; 15224 return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Insertion, { 15225 cache: cache, 15226 serialized: serialized, 15227 isStringTag: typeof FinalTag === 'string' 15228 }), /*#__PURE__*/(0,external_React_.createElement)(FinalTag, newProps)); 15229 }); 15230 Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; 15231 Styled.defaultProps = tag.defaultProps; 15232 Styled.__emotion_real = Styled; 15233 Styled.__emotion_base = baseTag; 15234 Styled.__emotion_styles = styles; 15235 Styled.__emotion_forwardProp = shouldForwardProp; 15236 Object.defineProperty(Styled, 'toString', { 15237 value: function value() { 15238 if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string 15239 15240 15241 return "." + targetClassName; 15242 } 15243 }); 15244 15245 Styled.withComponent = function (nextTag, nextOptions) { 15246 return createStyled(nextTag, extends_extends({}, options, nextOptions, { 15247 shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true) 15248 })).apply(void 0, styles); 15249 }; 15250 15251 return Styled; 15252 }; 15253 }; 15254 15255 /* harmony default export */ const emotion_styled_base_browser_esm = (createStyled); 15256 15257 ;// ./node_modules/@wordpress/components/build-module/view/component.js 15258 15259 /** 15260 * External dependencies 15261 */ 15262 15263 /** 15264 * WordPress dependencies 15265 */ 15266 15267 15268 /** 15269 * Internal dependencies 15270 */ 15271 15272 const PolymorphicDiv = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 15273 target: "e19lxcc00" 15274 } : 0)( true ? "" : 0); 15275 function UnforwardedView({ 15276 as, 15277 ...restProps 15278 }, ref) { 15279 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PolymorphicDiv, { 15280 as: as, 15281 ref: ref, 15282 ...restProps 15283 }); 15284 } 15285 15286 /** 15287 * `View` is a core component that renders everything in the library. 15288 * It is the principle component in the entire library. 15289 * 15290 * ```jsx 15291 * import { View } from `@wordpress/components`; 15292 * 15293 * function Example() { 15294 * return ( 15295 * <View> 15296 * Code is Poetry 15297 * </View> 15298 * ); 15299 * } 15300 * ``` 15301 */ 15302 const View = Object.assign((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedView), { 15303 selector: '.components-view' 15304 }); 15305 /* harmony default export */ const component = (View); 15306 15307 ;// ./node_modules/@wordpress/components/build-module/visually-hidden/component.js 15308 /** 15309 * External dependencies 15310 */ 15311 15312 /** 15313 * Internal dependencies 15314 */ 15315 15316 15317 15318 15319 15320 function UnconnectedVisuallyHidden(props, forwardedRef) { 15321 const { 15322 style: styleProp, 15323 ...contextProps 15324 } = useContextSystem(props, 'VisuallyHidden'); 15325 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 15326 ref: forwardedRef, 15327 ...contextProps, 15328 style: { 15329 ...visuallyHidden, 15330 ...(styleProp || {}) 15331 } 15332 }); 15333 } 15334 15335 /** 15336 * `VisuallyHidden` is a component used to render text intended to be visually 15337 * hidden, but will show for alternate devices, for example a screen reader. 15338 * 15339 * ```jsx 15340 * import { VisuallyHidden } from `@wordpress/components`; 15341 * 15342 * function Example() { 15343 * return ( 15344 * <VisuallyHidden> 15345 * <label>Code is Poetry</label> 15346 * </VisuallyHidden> 15347 * ); 15348 * } 15349 * ``` 15350 */ 15351 const component_VisuallyHidden = contextConnect(UnconnectedVisuallyHidden, 'VisuallyHidden'); 15352 /* harmony default export */ const visually_hidden_component = (component_VisuallyHidden); 15353 15354 ;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/utils.js 15355 /** 15356 * WordPress dependencies 15357 */ 15358 15359 15360 /** 15361 * Internal dependencies 15362 */ 15363 15364 const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']]; 15365 15366 // Stored as map as i18n __() only accepts strings (not variables) 15367 const ALIGNMENT_LABEL = { 15368 'top left': (0,external_wp_i18n_namespaceObject.__)('Top Left'), 15369 'top center': (0,external_wp_i18n_namespaceObject.__)('Top Center'), 15370 'top right': (0,external_wp_i18n_namespaceObject.__)('Top Right'), 15371 'center left': (0,external_wp_i18n_namespaceObject.__)('Center Left'), 15372 'center center': (0,external_wp_i18n_namespaceObject.__)('Center'), 15373 center: (0,external_wp_i18n_namespaceObject.__)('Center'), 15374 'center right': (0,external_wp_i18n_namespaceObject.__)('Center Right'), 15375 'bottom left': (0,external_wp_i18n_namespaceObject.__)('Bottom Left'), 15376 'bottom center': (0,external_wp_i18n_namespaceObject.__)('Bottom Center'), 15377 'bottom right': (0,external_wp_i18n_namespaceObject.__)('Bottom Right') 15378 }; 15379 15380 // Transforms GRID into a flat Array of values. 15381 const ALIGNMENTS = GRID.flat(); 15382 15383 /** 15384 * Normalizes and transforms an incoming value to better match the alignment values 15385 * 15386 * @param value An alignment value to parse. 15387 * 15388 * @return The parsed value. 15389 */ 15390 function normalize(value) { 15391 const normalized = value === 'center' ? 'center center' : value; 15392 15393 // Strictly speaking, this could be `string | null | undefined`, 15394 // but will be validated shortly, so we're typecasting to an 15395 // `AlignmentMatrixControlValue` to keep TypeScript happy. 15396 const transformed = normalized?.replace('-', ' '); 15397 return ALIGNMENTS.includes(transformed) ? transformed : undefined; 15398 } 15399 15400 /** 15401 * Creates an item ID based on a prefix ID and an alignment value. 15402 * 15403 * @param prefixId An ID to prefix. 15404 * @param value An alignment value. 15405 * 15406 * @return The item id. 15407 */ 15408 function getItemId(prefixId, value) { 15409 const normalized = normalize(value); 15410 if (!normalized) { 15411 return; 15412 } 15413 const id = normalized.replace(' ', '-'); 15414 return `$prefixId}-$id}`; 15415 } 15416 15417 /** 15418 * Extracts an item value from its ID 15419 * 15420 * @param prefixId An ID prefix to remove 15421 * @param id An item ID 15422 * @return The item value 15423 */ 15424 function getItemValue(prefixId, id) { 15425 const value = id?.replace(prefixId + '-', ''); 15426 return normalize(value); 15427 } 15428 15429 /** 15430 * Retrieves the alignment index from a value. 15431 * 15432 * @param alignment Value to check. 15433 * 15434 * @return The index of a matching alignment. 15435 */ 15436 function getAlignmentIndex(alignment = 'center') { 15437 const normalized = normalize(alignment); 15438 if (!normalized) { 15439 return undefined; 15440 } 15441 const index = ALIGNMENTS.indexOf(normalized); 15442 return index > -1 ? index : undefined; 15443 } 15444 15445 // EXTERNAL MODULE: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js 15446 var hoist_non_react_statics_cjs = __webpack_require__(1880); 15447 ;// ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 15448 15449 15450 15451 15452 15453 15454 15455 15456 15457 15458 15459 15460 var pkg = { 15461 name: "@emotion/react", 15462 version: "11.10.6", 15463 main: "dist/emotion-react.cjs.js", 15464 module: "dist/emotion-react.esm.js", 15465 browser: { 15466 "./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js" 15467 }, 15468 exports: { 15469 ".": { 15470 module: { 15471 worker: "./dist/emotion-react.worker.esm.js", 15472 browser: "./dist/emotion-react.browser.esm.js", 15473 "default": "./dist/emotion-react.esm.js" 15474 }, 15475 "default": "./dist/emotion-react.cjs.js" 15476 }, 15477 "./jsx-runtime": { 15478 module: { 15479 worker: "./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js", 15480 browser: "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js", 15481 "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js" 15482 }, 15483 "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js" 15484 }, 15485 "./_isolated-hnrs": { 15486 module: { 15487 worker: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js", 15488 browser: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js", 15489 "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js" 15490 }, 15491 "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js" 15492 }, 15493 "./jsx-dev-runtime": { 15494 module: { 15495 worker: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js", 15496 browser: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js", 15497 "default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js" 15498 }, 15499 "default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js" 15500 }, 15501 "./package.json": "./package.json", 15502 "./types/css-prop": "./types/css-prop.d.ts", 15503 "./macro": "./macro.js" 15504 }, 15505 types: "types/index.d.ts", 15506 files: [ 15507 "src", 15508 "dist", 15509 "jsx-runtime", 15510 "jsx-dev-runtime", 15511 "_isolated-hnrs", 15512 "types/*.d.ts", 15513 "macro.js", 15514 "macro.d.ts", 15515 "macro.js.flow" 15516 ], 15517 sideEffects: false, 15518 author: "Emotion Contributors", 15519 license: "MIT", 15520 scripts: { 15521 "test:typescript": "dtslint types" 15522 }, 15523 dependencies: { 15524 "@babel/runtime": "^7.18.3", 15525 "@emotion/babel-plugin": "^11.10.6", 15526 "@emotion/cache": "^11.10.5", 15527 "@emotion/serialize": "^1.1.1", 15528 "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", 15529 "@emotion/utils": "^1.2.0", 15530 "@emotion/weak-memoize": "^0.3.0", 15531 "hoist-non-react-statics": "^3.3.1" 15532 }, 15533 peerDependencies: { 15534 react: ">=16.8.0" 15535 }, 15536 peerDependenciesMeta: { 15537 "@types/react": { 15538 optional: true 15539 } 15540 }, 15541 devDependencies: { 15542 "@definitelytyped/dtslint": "0.0.112", 15543 "@emotion/css": "11.10.6", 15544 "@emotion/css-prettifier": "1.1.1", 15545 "@emotion/server": "11.10.0", 15546 "@emotion/styled": "11.10.6", 15547 "html-tag-names": "^1.1.2", 15548 react: "16.14.0", 15549 "svg-tag-names": "^1.1.1", 15550 typescript: "^4.5.5" 15551 }, 15552 repository: "https://github.com/emotion-js/emotion/tree/main/packages/react", 15553 publishConfig: { 15554 access: "public" 15555 }, 15556 "umd:main": "dist/emotion-react.umd.min.js", 15557 preconstruct: { 15558 entrypoints: [ 15559 "./index.js", 15560 "./jsx-runtime.js", 15561 "./jsx-dev-runtime.js", 15562 "./_isolated-hnrs.js" 15563 ], 15564 umdName: "emotionReact", 15565 exports: { 15566 envConditions: [ 15567 "browser", 15568 "worker" 15569 ], 15570 extra: { 15571 "./types/css-prop": "./types/css-prop.d.ts", 15572 "./macro": "./macro.js" 15573 } 15574 } 15575 } 15576 }; 15577 15578 var jsx = function jsx(type, props) { 15579 var args = arguments; 15580 15581 if (props == null || !hasOwnProperty.call(props, 'css')) { 15582 // $FlowFixMe 15583 return createElement.apply(undefined, args); 15584 } 15585 15586 var argsLength = args.length; 15587 var createElementArgArray = new Array(argsLength); 15588 createElementArgArray[0] = Emotion; 15589 createElementArgArray[1] = createEmotionProps(type, props); 15590 15591 for (var i = 2; i < argsLength; i++) { 15592 createElementArgArray[i] = args[i]; 15593 } // $FlowFixMe 15594 15595 15596 return createElement.apply(null, createElementArgArray); 15597 }; 15598 15599 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders. 15600 // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild 15601 // initial client-side render from SSR, use place of hydrating tag 15602 15603 var Global = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) { 15604 if (false) {} 15605 15606 var styles = props.styles; 15607 var serialized = serializeStyles([styles], undefined, useContext(ThemeContext)); 15608 // but it is based on a constant that will never change at runtime 15609 // it's effectively like having two implementations and switching them out 15610 // so it's not actually breaking anything 15611 15612 15613 var sheetRef = useRef(); 15614 useInsertionEffectWithLayoutFallback(function () { 15615 var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675 15616 15617 var sheet = new cache.sheet.constructor({ 15618 key: key, 15619 nonce: cache.sheet.nonce, 15620 container: cache.sheet.container, 15621 speedy: cache.sheet.isSpeedy 15622 }); 15623 var rehydrating = false; // $FlowFixMe 15624 15625 var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]"); 15626 15627 if (cache.sheet.tags.length) { 15628 sheet.before = cache.sheet.tags[0]; 15629 } 15630 15631 if (node !== null) { 15632 rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s 15633 15634 node.setAttribute('data-emotion', key); 15635 sheet.hydrate([node]); 15636 } 15637 15638 sheetRef.current = [sheet, rehydrating]; 15639 return function () { 15640 sheet.flush(); 15641 }; 15642 }, [cache]); 15643 useInsertionEffectWithLayoutFallback(function () { 15644 var sheetRefCurrent = sheetRef.current; 15645 var sheet = sheetRefCurrent[0], 15646 rehydrating = sheetRefCurrent[1]; 15647 15648 if (rehydrating) { 15649 sheetRefCurrent[1] = false; 15650 return; 15651 } 15652 15653 if (serialized.next !== undefined) { 15654 // insert keyframes 15655 insertStyles(cache, serialized.next, true); 15656 } 15657 15658 if (sheet.tags.length) { 15659 // if this doesn't exist then it will be null so the style element will be appended 15660 var element = sheet.tags[sheet.tags.length - 1].nextElementSibling; 15661 sheet.before = element; 15662 sheet.flush(); 15663 } 15664 15665 cache.insert("", serialized, sheet, false); 15666 }, [cache, serialized.name]); 15667 return null; 15668 }))); 15669 15670 if (false) {} 15671 15672 function emotion_react_browser_esm_css() { 15673 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 15674 args[_key] = arguments[_key]; 15675 } 15676 15677 return emotion_serialize_browser_esm_serializeStyles(args); 15678 } 15679 15680 var emotion_react_browser_esm_keyframes = function keyframes() { 15681 var insertable = emotion_react_browser_esm_css.apply(void 0, arguments); 15682 var name = "animation-" + insertable.name; // $FlowFixMe 15683 15684 return { 15685 name: name, 15686 styles: "@keyframes " + name + "{" + insertable.styles + "}", 15687 anim: 1, 15688 toString: function toString() { 15689 return "_EMO_" + this.name + "_" + this.styles + "_EMO_"; 15690 } 15691 }; 15692 }; 15693 15694 var emotion_react_browser_esm_classnames = function classnames(args) { 15695 var len = args.length; 15696 var i = 0; 15697 var cls = ''; 15698 15699 for (; i < len; i++) { 15700 var arg = args[i]; 15701 if (arg == null) continue; 15702 var toAdd = void 0; 15703 15704 switch (typeof arg) { 15705 case 'boolean': 15706 break; 15707 15708 case 'object': 15709 { 15710 if (Array.isArray(arg)) { 15711 toAdd = classnames(arg); 15712 } else { 15713 if (false) {} 15714 15715 toAdd = ''; 15716 15717 for (var k in arg) { 15718 if (arg[k] && k) { 15719 toAdd && (toAdd += ' '); 15720 toAdd += k; 15721 } 15722 } 15723 } 15724 15725 break; 15726 } 15727 15728 default: 15729 { 15730 toAdd = arg; 15731 } 15732 } 15733 15734 if (toAdd) { 15735 cls && (cls += ' '); 15736 cls += toAdd; 15737 } 15738 } 15739 15740 return cls; 15741 }; 15742 15743 function emotion_react_browser_esm_merge(registered, css, className) { 15744 var registeredStyles = []; 15745 var rawClassName = getRegisteredStyles(registered, registeredStyles, className); 15746 15747 if (registeredStyles.length < 2) { 15748 return className; 15749 } 15750 15751 return rawClassName + css(registeredStyles); 15752 } 15753 15754 var emotion_react_browser_esm_Insertion = function Insertion(_ref) { 15755 var cache = _ref.cache, 15756 serializedArr = _ref.serializedArr; 15757 var rules = useInsertionEffectAlwaysWithSyncFallback(function () { 15758 15759 for (var i = 0; i < serializedArr.length; i++) { 15760 var res = insertStyles(cache, serializedArr[i], false); 15761 } 15762 }); 15763 15764 return null; 15765 }; 15766 15767 var ClassNames = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) { 15768 var hasRendered = false; 15769 var serializedArr = []; 15770 15771 var css = function css() { 15772 if (hasRendered && "production" !== 'production') {} 15773 15774 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 15775 args[_key] = arguments[_key]; 15776 } 15777 15778 var serialized = serializeStyles(args, cache.registered); 15779 serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx` 15780 15781 registerStyles(cache, serialized, false); 15782 return cache.key + "-" + serialized.name; 15783 }; 15784 15785 var cx = function cx() { 15786 if (hasRendered && "production" !== 'production') {} 15787 15788 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 15789 args[_key2] = arguments[_key2]; 15790 } 15791 15792 return emotion_react_browser_esm_merge(cache.registered, css, emotion_react_browser_esm_classnames(args)); 15793 }; 15794 15795 var content = { 15796 css: css, 15797 cx: cx, 15798 theme: useContext(ThemeContext) 15799 }; 15800 var ele = props.children(content); 15801 hasRendered = true; 15802 return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(emotion_react_browser_esm_Insertion, { 15803 cache: cache, 15804 serializedArr: serializedArr 15805 }), ele); 15806 }))); 15807 15808 if (false) {} 15809 15810 if (false) { var globalKey, globalContext, isTestEnv, emotion_react_browser_esm_isBrowser; } 15811 15812 15813 15814 ;// ./node_modules/@wordpress/components/build-module/utils/space.js 15815 /** 15816 * The argument value for the `space()` utility function. 15817 * 15818 * When this is a number or a numeric string, it will be interpreted as a 15819 * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px. 15820 * 15821 * Otherwise, it will be interpreted as a literal CSS length value. For example, 15822 * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px. 15823 */ 15824 15825 const GRID_BASE = '4px'; 15826 15827 /** 15828 * A function that handles numbers, numeric strings, and unit values. 15829 * 15830 * When given a number or a numeric string, it will return the grid-based 15831 * value as a factor of GRID_BASE, defined above. 15832 * 15833 * When given a unit value or one of the named CSS values like `auto`, 15834 * it will simply return the value back. 15835 * 15836 * @param value A number, numeric string, or a unit value. 15837 */ 15838 function space(value) { 15839 if (typeof value === 'undefined') { 15840 return undefined; 15841 } 15842 15843 // Handle empty strings, if it's the number 0 this still works. 15844 if (!value) { 15845 return '0'; 15846 } 15847 const asInt = typeof value === 'number' ? value : Number(value); 15848 15849 // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value. 15850 if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) { 15851 return value.toString(); 15852 } 15853 return `calc($GRID_BASE} * $value})`; 15854 } 15855 15856 ;// ./node_modules/@wordpress/components/build-module/utils/colors-values.js 15857 /** 15858 * Internal dependencies 15859 */ 15860 const white = '#fff'; 15861 15862 // Matches the grays in @wordpress/base-styles 15863 const GRAY = { 15864 900: '#1e1e1e', 15865 800: '#2f2f2f', 15866 /** Meets 4.6:1 text contrast against white. */ 15867 700: '#757575', 15868 /** Meets 3:1 UI or large text contrast against white. */ 15869 600: '#949494', 15870 400: '#ccc', 15871 /** Used for most borders. */ 15872 300: '#ddd', 15873 /** Used sparingly for light borders. */ 15874 200: '#e0e0e0', 15875 /** Used for light gray backgrounds. */ 15876 100: '#f0f0f0' 15877 }; 15878 15879 // Matches @wordpress/base-styles 15880 const ALERT = { 15881 yellow: '#f0b849', 15882 red: '#d94f4f', 15883 green: '#4ab866' 15884 }; 15885 15886 // Should match packages/components/src/utils/theme-variables.scss 15887 const THEME = { 15888 accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`, 15889 accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`, 15890 accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`, 15891 /** Used when placing text on the accent color. */ 15892 accentInverted: `var(--wp-components-color-accent-inverted, $white})`, 15893 background: `var(--wp-components-color-background, $white})`, 15894 foreground: `var(--wp-components-color-foreground, $GRAY[900]})`, 15895 /** Used when placing text on the foreground color. */ 15896 foregroundInverted: `var(--wp-components-color-foreground-inverted, $white})`, 15897 gray: { 15898 /** @deprecated Use `COLORS.theme.foreground` instead. */ 15899 900: `var(--wp-components-color-foreground, $GRAY[900]})`, 15900 800: `var(--wp-components-color-gray-800, $GRAY[800]})`, 15901 700: `var(--wp-components-color-gray-700, $GRAY[700]})`, 15902 600: `var(--wp-components-color-gray-600, $GRAY[600]})`, 15903 400: `var(--wp-components-color-gray-400, $GRAY[400]})`, 15904 300: `var(--wp-components-color-gray-300, $GRAY[300]})`, 15905 200: `var(--wp-components-color-gray-200, $GRAY[200]})`, 15906 100: `var(--wp-components-color-gray-100, $GRAY[100]})` 15907 } 15908 }; 15909 const UI = { 15910 background: THEME.background, 15911 backgroundDisabled: THEME.gray[100], 15912 border: THEME.gray[600], 15913 borderHover: THEME.gray[700], 15914 borderFocus: THEME.accent, 15915 borderDisabled: THEME.gray[400], 15916 textDisabled: THEME.gray[600], 15917 // Matches @wordpress/base-styles 15918 darkGrayPlaceholder: `color-mix(in srgb, $THEME.foreground}, transparent 38%)`, 15919 lightGrayPlaceholder: `color-mix(in srgb, $THEME.background}, transparent 35%)` 15920 }; 15921 const COLORS = Object.freeze({ 15922 /** 15923 * The main gray color object. 15924 * 15925 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`. 15926 */ 15927 gray: GRAY, 15928 // TODO: Stop exporting this when everything is migrated to `theme` or `ui` 15929 /** 15930 * @deprecated Prefer theme-ready variables in `COLORS.theme`. 15931 */ 15932 white, 15933 alert: ALERT, 15934 /** 15935 * Theme-ready variables with fallbacks. 15936 * 15937 * Prefer semantic aliases in `COLORS.ui` when applicable. 15938 */ 15939 theme: THEME, 15940 /** 15941 * Semantic aliases (prefer these over raw variables when applicable). 15942 */ 15943 ui: UI 15944 }); 15945 /* harmony default export */ const colors_values = ((/* unused pure expression or super */ null && (COLORS))); 15946 15947 ;// ./node_modules/@wordpress/components/build-module/utils/config-values.js 15948 /** 15949 * Internal dependencies 15950 */ 15951 15952 15953 const CONTROL_HEIGHT = '36px'; 15954 const CONTROL_PROPS = { 15955 // These values should be shared with TextControl. 15956 controlPaddingX: 12, 15957 controlPaddingXSmall: 8, 15958 controlPaddingXLarge: 12 * 1.3334, 15959 // TODO: Deprecate 15960 15961 controlBoxShadowFocus: `0 0 0 0.5px $COLORS.theme.accent}`, 15962 controlHeight: CONTROL_HEIGHT, 15963 controlHeightXSmall: `calc( $CONTROL_HEIGHT} * 0.6 )`, 15964 controlHeightSmall: `calc( $CONTROL_HEIGHT} * 0.8 )`, 15965 controlHeightLarge: `calc( $CONTROL_HEIGHT} * 1.2 )`, 15966 controlHeightXLarge: `calc( $CONTROL_HEIGHT} * 1.4 )` 15967 }; 15968 15969 // Using Object.assign to avoid creating circular references when emitting 15970 // TypeScript type declarations. 15971 /* harmony default export */ const config_values = (Object.assign({}, CONTROL_PROPS, { 15972 colorDivider: 'rgba(0, 0, 0, 0.1)', 15973 colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)', 15974 colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)', 15975 colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)', 15976 elevationIntensity: 1, 15977 radiusXSmall: '1px', 15978 radiusSmall: '2px', 15979 radiusMedium: '4px', 15980 radiusLarge: '8px', 15981 radiusFull: '9999px', 15982 radiusRound: '50%', 15983 borderWidth: '1px', 15984 borderWidthFocus: '1.5px', 15985 borderWidthTab: '4px', 15986 spinnerSize: 16, 15987 fontSize: '13px', 15988 fontSizeH1: 'calc(2.44 * 13px)', 15989 fontSizeH2: 'calc(1.95 * 13px)', 15990 fontSizeH3: 'calc(1.56 * 13px)', 15991 fontSizeH4: 'calc(1.25 * 13px)', 15992 fontSizeH5: '13px', 15993 fontSizeH6: 'calc(0.8 * 13px)', 15994 fontSizeInputMobile: '16px', 15995 fontSizeMobile: '15px', 15996 fontSizeSmall: 'calc(0.92 * 13px)', 15997 fontSizeXSmall: 'calc(0.75 * 13px)', 15998 fontLineHeightBase: '1.4', 15999 fontWeight: 'normal', 16000 fontWeightHeading: '600', 16001 gridBase: '4px', 16002 cardPaddingXSmall: `$space(2)}`, 16003 cardPaddingSmall: `$space(4)}`, 16004 cardPaddingMedium: `$space(4)} $space(6)}`, 16005 cardPaddingLarge: `$space(6)} $space(8)}`, 16006 elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`, 16007 elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`, 16008 elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`, 16009 elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`, 16010 surfaceBackgroundColor: COLORS.white, 16011 surfaceBackgroundSubtleColor: '#F3F3F3', 16012 surfaceBackgroundTintColor: '#F5F5F5', 16013 surfaceBorderColor: 'rgba(0, 0, 0, 0.1)', 16014 surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)', 16015 surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)', 16016 surfaceBackgroundTertiaryColor: COLORS.white, 16017 surfaceColor: COLORS.white, 16018 transitionDuration: '200ms', 16019 transitionDurationFast: '160ms', 16020 transitionDurationFaster: '120ms', 16021 transitionDurationFastest: '100ms', 16022 transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)', 16023 transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)' 16024 })); 16025 16026 ;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles.js 16027 16028 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 16029 /** 16030 * External dependencies 16031 */ 16032 16033 16034 16035 /** 16036 * Internal dependencies 16037 */ 16038 16039 // Grid structure 16040 16041 const rootBase = ({ 16042 size = 92 16043 }) => /*#__PURE__*/emotion_react_browser_esm_css("direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );grid-template-rows:repeat( 3, 1fr );box-sizing:border-box;width:", size, "px;aspect-ratio:1;border-radius:", config_values.radiusMedium, ";outline:none;" + ( true ? "" : 0), true ? "" : 0); 16044 var _ref = true ? { 16045 name: "e0dnmk", 16046 styles: "cursor:pointer" 16047 } : 0; 16048 const GridContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 16049 target: "e1r95csn3" 16050 } : 0)(rootBase, " border:1px solid transparent;", props => props.disablePointerEvents ? /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0) : _ref, ";" + ( true ? "" : 0)); 16051 const GridRow = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 16052 target: "e1r95csn2" 16053 } : 0)( true ? { 16054 name: "1fbxn64", 16055 styles: "grid-column:1/-1;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )" 16056 } : 0); 16057 16058 // Cell 16059 const Cell = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 16060 target: "e1r95csn1" 16061 } : 0)( true ? { 16062 name: "e2kws5", 16063 styles: "position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;appearance:none;border:none;outline:none" 16064 } : 0); 16065 const POINT_SIZE = 6; 16066 const Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 16067 target: "e1r95csn0" 16068 } : 0)("display:block;contain:strict;box-sizing:border-box;width:", POINT_SIZE, "px;aspect-ratio:1;margin:auto;color:", COLORS.theme.gray[400], ";border:", POINT_SIZE / 2, "px solid currentColor;", Cell, "[data-active-item] &{color:", COLORS.gray[900], ";transform:scale( calc( 5 / 3 ) );}", Cell, ":not([data-active-item]):hover &{color:", COLORS.theme.accent, ";}", Cell, "[data-focus-visible] &{outline:1px solid ", COLORS.theme.accent, ";outline-offset:1px;}@media not ( prefers-reduced-motion ){transition-property:color,transform;transition-duration:120ms;transition-timing-function:linear;}" + ( true ? "" : 0)); 16069 16070 ;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js 16071 /** 16072 * Internal dependencies 16073 */ 16074 16075 16076 16077 16078 /** 16079 * Internal dependencies 16080 */ 16081 16082 16083 16084 function cell_Cell({ 16085 id, 16086 value, 16087 ...props 16088 }) { 16089 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { 16090 text: ALIGNMENT_LABEL[value], 16091 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Composite.Item, { 16092 id: id, 16093 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Cell, { 16094 ...props, 16095 role: "gridcell" 16096 }), 16097 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 16098 children: value 16099 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Point, { 16100 role: "presentation" 16101 })] 16102 }) 16103 }); 16104 } 16105 16106 ;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js 16107 /** 16108 * External dependencies 16109 */ 16110 16111 16112 /** 16113 * WordPress dependencies 16114 */ 16115 16116 16117 /** 16118 * Internal dependencies 16119 */ 16120 16121 16122 const BASE_SIZE = 24; 16123 const GRID_CELL_SIZE = 7; 16124 const GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2; 16125 const DOT_SIZE = 2; 16126 const DOT_SIZE_SELECTED = 4; 16127 function AlignmentMatrixControlIcon({ 16128 className, 16129 disablePointerEvents = true, 16130 size, 16131 width, 16132 height, 16133 style = {}, 16134 value = 'center', 16135 ...props 16136 }) { 16137 var _ref, _ref2; 16138 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 16139 xmlns: "http://www.w3.org/2000/svg", 16140 viewBox: `0 0 $BASE_SIZE} $BASE_SIZE}`, 16141 width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE, 16142 height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE, 16143 role: "presentation", 16144 className: dist_clsx('component-alignment-matrix-control-icon', className), 16145 style: { 16146 pointerEvents: disablePointerEvents ? 'none' : undefined, 16147 ...style 16148 }, 16149 ...props, 16150 children: ALIGNMENTS.map((align, index) => { 16151 const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE; 16152 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Rect, { 16153 x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2, 16154 y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2, 16155 width: dotSize, 16156 height: dotSize, 16157 fill: "currentColor" 16158 }, align); 16159 }) 16160 }); 16161 } 16162 /* harmony default export */ const icon = (AlignmentMatrixControlIcon); 16163 16164 ;// ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js 16165 /** 16166 * External dependencies 16167 */ 16168 16169 16170 /** 16171 * WordPress dependencies 16172 */ 16173 16174 16175 16176 16177 /** 16178 * Internal dependencies 16179 */ 16180 16181 16182 16183 16184 16185 16186 function UnforwardedAlignmentMatrixControl({ 16187 className, 16188 id, 16189 label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'), 16190 defaultValue = 'center center', 16191 value, 16192 onChange, 16193 width = 92, 16194 ...props 16195 }) { 16196 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id); 16197 const setActiveId = (0,external_wp_element_namespaceObject.useCallback)(nextActiveId => { 16198 const nextValue = getItemValue(baseId, nextActiveId); 16199 if (nextValue) { 16200 onChange?.(nextValue); 16201 } 16202 }, [baseId, onChange]); 16203 const classes = dist_clsx('component-alignment-matrix-control', className); 16204 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, { 16205 defaultActiveId: getItemId(baseId, defaultValue), 16206 activeId: getItemId(baseId, value), 16207 setActiveId: setActiveId, 16208 rtl: (0,external_wp_i18n_namespaceObject.isRTL)(), 16209 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridContainer, { 16210 ...props, 16211 "aria-label": label, 16212 className: classes, 16213 id: baseId, 16214 role: "grid", 16215 size: width 16216 }), 16217 children: GRID.map((cells, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite.Row, { 16218 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridRow, { 16219 role: "row" 16220 }), 16221 children: cells.map(cell => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cell_Cell, { 16222 id: getItemId(baseId, cell), 16223 value: cell 16224 }, cell)) 16225 }, index)) 16226 }); 16227 } 16228 16229 /** 16230 * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI. 16231 * 16232 * ```jsx 16233 * import { AlignmentMatrixControl } from '@wordpress/components'; 16234 * import { useState } from '@wordpress/element'; 16235 * 16236 * const Example = () => { 16237 * const [ alignment, setAlignment ] = useState( 'center center' ); 16238 * 16239 * return ( 16240 * <AlignmentMatrixControl 16241 * value={ alignment } 16242 * onChange={ setAlignment } 16243 * /> 16244 * ); 16245 * }; 16246 * ``` 16247 */ 16248 const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, { 16249 /** 16250 * Render an alignment matrix as an icon. 16251 * 16252 * ```jsx 16253 * import { AlignmentMatrixControl } from '@wordpress/components'; 16254 * 16255 * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} /> 16256 * ``` 16257 */ 16258 Icon: Object.assign(icon, { 16259 displayName: 'AlignmentMatrixControl.Icon' 16260 }) 16261 }); 16262 /* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl); 16263 16264 ;// ./node_modules/@wordpress/components/build-module/animate/index.js 16265 /** 16266 * External dependencies 16267 */ 16268 16269 16270 /** 16271 * Internal dependencies 16272 */ 16273 16274 /** 16275 * @param type The animation type 16276 * @return Default origin 16277 */ 16278 function getDefaultOrigin(type) { 16279 return type === 'appear' ? 'top' : 'left'; 16280 } 16281 16282 /** 16283 * @param options 16284 * 16285 * @return ClassName that applies the animations 16286 */ 16287 function getAnimateClassName(options) { 16288 if (options.type === 'loading') { 16289 return 'components-animate__loading'; 16290 } 16291 const { 16292 type, 16293 origin = getDefaultOrigin(type) 16294 } = options; 16295 if (type === 'appear') { 16296 const [yAxis, xAxis = 'center'] = origin.split(' '); 16297 return dist_clsx('components-animate__appear', { 16298 ['is-from-' + xAxis]: xAxis !== 'center', 16299 ['is-from-' + yAxis]: yAxis !== 'middle' 16300 }); 16301 } 16302 if (type === 'slide-in') { 16303 return dist_clsx('components-animate__slide-in', 'is-from-' + origin); 16304 } 16305 return undefined; 16306 } 16307 16308 /** 16309 * Simple interface to introduce animations to components. 16310 * 16311 * ```jsx 16312 * import { Animate, Notice } from '@wordpress/components'; 16313 * 16314 * const MyAnimatedNotice = () => ( 16315 * <Animate type="slide-in" options={ { origin: 'top' } }> 16316 * { ( { className } ) => ( 16317 * <Notice className={ className } status="success"> 16318 * <p>Animation finished.</p> 16319 * </Notice> 16320 * ) } 16321 * </Animate> 16322 * ); 16323 * ``` 16324 */ 16325 function Animate({ 16326 type, 16327 options = {}, 16328 children 16329 }) { 16330 return children({ 16331 className: getAnimateClassName({ 16332 type, 16333 ...options 16334 }) 16335 }); 16336 } 16337 /* harmony default export */ const animate = (Animate); 16338 16339 ;// ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs 16340 16341 16342 /** 16343 * @public 16344 */ 16345 const MotionConfigContext = (0,external_React_.createContext)({ 16346 transformPagePoint: (p) => p, 16347 isStatic: false, 16348 reducedMotion: "never", 16349 }); 16350 16351 16352 16353 ;// ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs 16354 16355 16356 const MotionContext = (0,external_React_.createContext)({}); 16357 16358 16359 16360 ;// ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs 16361 16362 16363 /** 16364 * @public 16365 */ 16366 const PresenceContext_PresenceContext = (0,external_React_.createContext)(null); 16367 16368 16369 16370 ;// ./node_modules/framer-motion/dist/es/utils/is-browser.mjs 16371 const is_browser_isBrowser = typeof document !== "undefined"; 16372 16373 16374 16375 ;// ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs 16376 16377 16378 16379 const useIsomorphicLayoutEffect = is_browser_isBrowser ? external_React_.useLayoutEffect : external_React_.useEffect; 16380 16381 16382 16383 ;// ./node_modules/framer-motion/dist/es/context/LazyContext.mjs 16384 16385 16386 const LazyContext = (0,external_React_.createContext)({ strict: false }); 16387 16388 16389 16390 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs 16391 /** 16392 * Convert camelCase to dash-case properties. 16393 */ 16394 const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(); 16395 16396 16397 16398 ;// ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs 16399 16400 16401 const optimizedAppearDataId = "framerAppearId"; 16402 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId); 16403 16404 16405 16406 ;// ./node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs 16407 const MotionGlobalConfig = { 16408 skipAnimations: false, 16409 useManualTiming: false, 16410 }; 16411 16412 16413 16414 ;// ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs 16415 class Queue { 16416 constructor() { 16417 this.order = []; 16418 this.scheduled = new Set(); 16419 } 16420 add(process) { 16421 if (!this.scheduled.has(process)) { 16422 this.scheduled.add(process); 16423 this.order.push(process); 16424 return true; 16425 } 16426 } 16427 remove(process) { 16428 const index = this.order.indexOf(process); 16429 if (index !== -1) { 16430 this.order.splice(index, 1); 16431 this.scheduled.delete(process); 16432 } 16433 } 16434 clear() { 16435 this.order.length = 0; 16436 this.scheduled.clear(); 16437 } 16438 } 16439 function createRenderStep(runNextFrame) { 16440 /** 16441 * We create and reuse two queues, one to queue jobs for the current frame 16442 * and one for the next. We reuse to avoid triggering GC after x frames. 16443 */ 16444 let thisFrame = new Queue(); 16445 let nextFrame = new Queue(); 16446 let numToRun = 0; 16447 /** 16448 * Track whether we're currently processing jobs in this step. This way 16449 * we can decide whether to schedule new jobs for this frame or next. 16450 */ 16451 let isProcessing = false; 16452 let flushNextFrame = false; 16453 /** 16454 * A set of processes which were marked keepAlive when scheduled. 16455 */ 16456 const toKeepAlive = new WeakSet(); 16457 const step = { 16458 /** 16459 * Schedule a process to run on the next frame. 16460 */ 16461 schedule: (callback, keepAlive = false, immediate = false) => { 16462 const addToCurrentFrame = immediate && isProcessing; 16463 const queue = addToCurrentFrame ? thisFrame : nextFrame; 16464 if (keepAlive) 16465 toKeepAlive.add(callback); 16466 if (queue.add(callback) && addToCurrentFrame && isProcessing) { 16467 // If we're adding it to the currently running queue, update its measured size 16468 numToRun = thisFrame.order.length; 16469 } 16470 return callback; 16471 }, 16472 /** 16473 * Cancel the provided callback from running on the next frame. 16474 */ 16475 cancel: (callback) => { 16476 nextFrame.remove(callback); 16477 toKeepAlive.delete(callback); 16478 }, 16479 /** 16480 * Execute all schedule callbacks. 16481 */ 16482 process: (frameData) => { 16483 /** 16484 * If we're already processing we've probably been triggered by a flushSync 16485 * inside an existing process. Instead of executing, mark flushNextFrame 16486 * as true and ensure we flush the following frame at the end of this one. 16487 */ 16488 if (isProcessing) { 16489 flushNextFrame = true; 16490 return; 16491 } 16492 isProcessing = true; 16493 [thisFrame, nextFrame] = [nextFrame, thisFrame]; 16494 // Clear the next frame queue 16495 nextFrame.clear(); 16496 // Execute this frame 16497 numToRun = thisFrame.order.length; 16498 if (numToRun) { 16499 for (let i = 0; i < numToRun; i++) { 16500 const callback = thisFrame.order[i]; 16501 if (toKeepAlive.has(callback)) { 16502 step.schedule(callback); 16503 runNextFrame(); 16504 } 16505 callback(frameData); 16506 } 16507 } 16508 isProcessing = false; 16509 if (flushNextFrame) { 16510 flushNextFrame = false; 16511 step.process(frameData); 16512 } 16513 }, 16514 }; 16515 return step; 16516 } 16517 16518 16519 16520 ;// ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs 16521 16522 16523 16524 const stepsOrder = [ 16525 "read", // Read 16526 "resolveKeyframes", // Write/Read/Write/Read 16527 "update", // Compute 16528 "preRender", // Compute 16529 "render", // Write 16530 "postRender", // Compute 16531 ]; 16532 const maxElapsed = 40; 16533 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) { 16534 let runNextFrame = false; 16535 let useDefaultElapsed = true; 16536 const state = { 16537 delta: 0, 16538 timestamp: 0, 16539 isProcessing: false, 16540 }; 16541 const steps = stepsOrder.reduce((acc, key) => { 16542 acc[key] = createRenderStep(() => (runNextFrame = true)); 16543 return acc; 16544 }, {}); 16545 const processStep = (stepId) => { 16546 steps[stepId].process(state); 16547 }; 16548 const processBatch = () => { 16549 const timestamp = MotionGlobalConfig.useManualTiming 16550 ? state.timestamp 16551 : performance.now(); 16552 runNextFrame = false; 16553 state.delta = useDefaultElapsed 16554 ? 1000 / 60 16555 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1); 16556 state.timestamp = timestamp; 16557 state.isProcessing = true; 16558 stepsOrder.forEach(processStep); 16559 state.isProcessing = false; 16560 if (runNextFrame && allowKeepAlive) { 16561 useDefaultElapsed = false; 16562 scheduleNextBatch(processBatch); 16563 } 16564 }; 16565 const wake = () => { 16566 runNextFrame = true; 16567 useDefaultElapsed = true; 16568 if (!state.isProcessing) { 16569 scheduleNextBatch(processBatch); 16570 } 16571 }; 16572 const schedule = stepsOrder.reduce((acc, key) => { 16573 const step = steps[key]; 16574 acc[key] = (process, keepAlive = false, immediate = false) => { 16575 if (!runNextFrame) 16576 wake(); 16577 return step.schedule(process, keepAlive, immediate); 16578 }; 16579 return acc; 16580 }, {}); 16581 const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process)); 16582 return { schedule, cancel, state, steps }; 16583 } 16584 16585 16586 16587 ;// ./node_modules/framer-motion/dist/es/frameloop/microtask.mjs 16588 16589 16590 const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false); 16591 16592 16593 16594 ;// ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs 16595 16596 16597 16598 16599 16600 16601 16602 16603 16604 function useVisualElement(Component, visualState, props, createVisualElement) { 16605 const { visualElement: parent } = (0,external_React_.useContext)(MotionContext); 16606 const lazyContext = (0,external_React_.useContext)(LazyContext); 16607 const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 16608 const reducedMotionConfig = (0,external_React_.useContext)(MotionConfigContext).reducedMotion; 16609 const visualElementRef = (0,external_React_.useRef)(); 16610 /** 16611 * If we haven't preloaded a renderer, check to see if we have one lazy-loaded 16612 */ 16613 createVisualElement = createVisualElement || lazyContext.renderer; 16614 if (!visualElementRef.current && createVisualElement) { 16615 visualElementRef.current = createVisualElement(Component, { 16616 visualState, 16617 parent, 16618 props, 16619 presenceContext, 16620 blockInitialAnimation: presenceContext 16621 ? presenceContext.initial === false 16622 : false, 16623 reducedMotionConfig, 16624 }); 16625 } 16626 const visualElement = visualElementRef.current; 16627 (0,external_React_.useInsertionEffect)(() => { 16628 visualElement && visualElement.update(props, presenceContext); 16629 }); 16630 /** 16631 * Cache this value as we want to know whether HandoffAppearAnimations 16632 * was present on initial render - it will be deleted after this. 16633 */ 16634 const wantsHandoff = (0,external_React_.useRef)(Boolean(props[optimizedAppearDataAttribute] && 16635 !window.HandoffComplete)); 16636 useIsomorphicLayoutEffect(() => { 16637 if (!visualElement) 16638 return; 16639 microtask.render(visualElement.render); 16640 /** 16641 * Ideally this function would always run in a useEffect. 16642 * 16643 * However, if we have optimised appear animations to handoff from, 16644 * it needs to happen synchronously to ensure there's no flash of 16645 * incorrect styles in the event of a hydration error. 16646 * 16647 * So if we detect a situtation where optimised appear animations 16648 * are running, we use useLayoutEffect to trigger animations. 16649 */ 16650 if (wantsHandoff.current && visualElement.animationState) { 16651 visualElement.animationState.animateChanges(); 16652 } 16653 }); 16654 (0,external_React_.useEffect)(() => { 16655 if (!visualElement) 16656 return; 16657 visualElement.updateFeatures(); 16658 if (!wantsHandoff.current && visualElement.animationState) { 16659 visualElement.animationState.animateChanges(); 16660 } 16661 if (wantsHandoff.current) { 16662 wantsHandoff.current = false; 16663 // This ensures all future calls to animateChanges() will run in useEffect 16664 window.HandoffComplete = true; 16665 } 16666 }); 16667 return visualElement; 16668 } 16669 16670 16671 16672 ;// ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs 16673 function isRefObject(ref) { 16674 return (ref && 16675 typeof ref === "object" && 16676 Object.prototype.hasOwnProperty.call(ref, "current")); 16677 } 16678 16679 16680 16681 ;// ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs 16682 16683 16684 16685 /** 16686 * Creates a ref function that, when called, hydrates the provided 16687 * external ref and VisualElement. 16688 */ 16689 function useMotionRef(visualState, visualElement, externalRef) { 16690 return (0,external_React_.useCallback)((instance) => { 16691 instance && visualState.mount && visualState.mount(instance); 16692 if (visualElement) { 16693 instance 16694 ? visualElement.mount(instance) 16695 : visualElement.unmount(); 16696 } 16697 if (externalRef) { 16698 if (typeof externalRef === "function") { 16699 externalRef(instance); 16700 } 16701 else if (isRefObject(externalRef)) { 16702 externalRef.current = instance; 16703 } 16704 } 16705 }, 16706 /** 16707 * Only pass a new ref callback to React if we've received a visual element 16708 * factory. Otherwise we'll be mounting/remounting every time externalRef 16709 * or other dependencies change. 16710 */ 16711 [visualElement]); 16712 } 16713 16714 16715 16716 ;// ./node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs 16717 /** 16718 * Decides if the supplied variable is variant label 16719 */ 16720 function isVariantLabel(v) { 16721 return typeof v === "string" || Array.isArray(v); 16722 } 16723 16724 16725 16726 ;// ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs 16727 function isAnimationControls(v) { 16728 return (v !== null && 16729 typeof v === "object" && 16730 typeof v.start === "function"); 16731 } 16732 16733 16734 16735 ;// ./node_modules/framer-motion/dist/es/render/utils/variant-props.mjs 16736 const variantPriorityOrder = [ 16737 "animate", 16738 "whileInView", 16739 "whileFocus", 16740 "whileHover", 16741 "whileTap", 16742 "whileDrag", 16743 "exit", 16744 ]; 16745 const variantProps = ["initial", ...variantPriorityOrder]; 16746 16747 16748 16749 ;// ./node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs 16750 16751 16752 16753 16754 function isControllingVariants(props) { 16755 return (isAnimationControls(props.animate) || 16756 variantProps.some((name) => isVariantLabel(props[name]))); 16757 } 16758 function isVariantNode(props) { 16759 return Boolean(isControllingVariants(props) || props.variants); 16760 } 16761 16762 16763 16764 ;// ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs 16765 16766 16767 16768 function getCurrentTreeVariants(props, context) { 16769 if (isControllingVariants(props)) { 16770 const { initial, animate } = props; 16771 return { 16772 initial: initial === false || isVariantLabel(initial) 16773 ? initial 16774 : undefined, 16775 animate: isVariantLabel(animate) ? animate : undefined, 16776 }; 16777 } 16778 return props.inherit !== false ? context : {}; 16779 } 16780 16781 16782 16783 ;// ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs 16784 16785 16786 16787 16788 function useCreateMotionContext(props) { 16789 const { initial, animate } = getCurrentTreeVariants(props, (0,external_React_.useContext)(MotionContext)); 16790 return (0,external_React_.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]); 16791 } 16792 function variantLabelsAsDependency(prop) { 16793 return Array.isArray(prop) ? prop.join(" ") : prop; 16794 } 16795 16796 16797 16798 ;// ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs 16799 const featureProps = { 16800 animation: [ 16801 "animate", 16802 "variants", 16803 "whileHover", 16804 "whileTap", 16805 "exit", 16806 "whileInView", 16807 "whileFocus", 16808 "whileDrag", 16809 ], 16810 exit: ["exit"], 16811 drag: ["drag", "dragControls"], 16812 focus: ["whileFocus"], 16813 hover: ["whileHover", "onHoverStart", "onHoverEnd"], 16814 tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"], 16815 pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"], 16816 inView: ["whileInView", "onViewportEnter", "onViewportLeave"], 16817 layout: ["layout", "layoutId"], 16818 }; 16819 const featureDefinitions = {}; 16820 for (const key in featureProps) { 16821 featureDefinitions[key] = { 16822 isEnabled: (props) => featureProps[key].some((name) => !!props[name]), 16823 }; 16824 } 16825 16826 16827 16828 ;// ./node_modules/framer-motion/dist/es/motion/features/load-features.mjs 16829 16830 16831 function loadFeatures(features) { 16832 for (const key in features) { 16833 featureDefinitions[key] = { 16834 ...featureDefinitions[key], 16835 ...features[key], 16836 }; 16837 } 16838 } 16839 16840 16841 16842 ;// ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs 16843 16844 16845 const LayoutGroupContext = (0,external_React_.createContext)({}); 16846 16847 16848 16849 ;// ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs 16850 16851 16852 /** 16853 * Internal, exported only for usage in Framer 16854 */ 16855 const SwitchLayoutGroupContext = (0,external_React_.createContext)({}); 16856 16857 16858 16859 ;// ./node_modules/framer-motion/dist/es/motion/utils/symbol.mjs 16860 const motionComponentSymbol = Symbol.for("motionComponentSymbol"); 16861 16862 16863 16864 ;// ./node_modules/framer-motion/dist/es/motion/index.mjs 16865 16866 16867 16868 16869 16870 16871 16872 16873 16874 16875 16876 16877 16878 16879 /** 16880 * Create a `motion` component. 16881 * 16882 * This function accepts a Component argument, which can be either a string (ie "div" 16883 * for `motion.div`), or an actual React component. 16884 * 16885 * Alongside this is a config option which provides a way of rendering the provided 16886 * component "offline", or outside the React render cycle. 16887 */ 16888 function motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) { 16889 preloadedFeatures && loadFeatures(preloadedFeatures); 16890 function MotionComponent(props, externalRef) { 16891 /** 16892 * If we need to measure the element we load this functionality in a 16893 * separate class component in order to gain access to getSnapshotBeforeUpdate. 16894 */ 16895 let MeasureLayout; 16896 const configAndProps = { 16897 ...(0,external_React_.useContext)(MotionConfigContext), 16898 ...props, 16899 layoutId: useLayoutId(props), 16900 }; 16901 const { isStatic } = configAndProps; 16902 const context = useCreateMotionContext(props); 16903 const visualState = useVisualState(props, isStatic); 16904 if (!isStatic && is_browser_isBrowser) { 16905 /** 16906 * Create a VisualElement for this component. A VisualElement provides a common 16907 * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as 16908 * providing a way of rendering to these APIs outside of the React render loop 16909 * for more performant animations and interactions 16910 */ 16911 context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement); 16912 /** 16913 * Load Motion gesture and animation features. These are rendered as renderless 16914 * components so each feature can optionally make use of React lifecycle methods. 16915 */ 16916 const initialLayoutGroupConfig = (0,external_React_.useContext)(SwitchLayoutGroupContext); 16917 const isStrict = (0,external_React_.useContext)(LazyContext).strict; 16918 if (context.visualElement) { 16919 MeasureLayout = context.visualElement.loadFeatures( 16920 // Note: Pass the full new combined props to correctly re-render dynamic feature components. 16921 configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig); 16922 } 16923 } 16924 /** 16925 * The mount order and hierarchy is specific to ensure our element ref 16926 * is hydrated by the time features fire their effects. 16927 */ 16928 return ((0,external_ReactJSXRuntime_namespaceObject.jsxs)(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? ((0,external_ReactJSXRuntime_namespaceObject.jsx)(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] })); 16929 } 16930 const ForwardRefComponent = (0,external_React_.forwardRef)(MotionComponent); 16931 ForwardRefComponent[motionComponentSymbol] = Component; 16932 return ForwardRefComponent; 16933 } 16934 function useLayoutId({ layoutId }) { 16935 const layoutGroupId = (0,external_React_.useContext)(LayoutGroupContext).id; 16936 return layoutGroupId && layoutId !== undefined 16937 ? layoutGroupId + "-" + layoutId 16938 : layoutId; 16939 } 16940 16941 16942 16943 ;// ./node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs 16944 16945 16946 /** 16947 * Convert any React component into a `motion` component. The provided component 16948 * **must** use `React.forwardRef` to the underlying DOM component you want to animate. 16949 * 16950 * ```jsx 16951 * const Component = React.forwardRef((props, ref) => { 16952 * return <div ref={ref} /> 16953 * }) 16954 * 16955 * const MotionComponent = motion(Component) 16956 * ``` 16957 * 16958 * @public 16959 */ 16960 function createMotionProxy(createConfig) { 16961 function custom(Component, customMotionComponentConfig = {}) { 16962 return motion_createMotionComponent(createConfig(Component, customMotionComponentConfig)); 16963 } 16964 if (typeof Proxy === "undefined") { 16965 return custom; 16966 } 16967 /** 16968 * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc. 16969 * Rather than generating them anew every render. 16970 */ 16971 const componentCache = new Map(); 16972 return new Proxy(custom, { 16973 /** 16974 * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc. 16975 * The prop name is passed through as `key` and we can use that to generate a `motion` 16976 * DOM component with that name. 16977 */ 16978 get: (_target, key) => { 16979 /** 16980 * If this element doesn't exist in the component cache, create it and cache. 16981 */ 16982 if (!componentCache.has(key)) { 16983 componentCache.set(key, custom(key)); 16984 } 16985 return componentCache.get(key); 16986 }, 16987 }); 16988 } 16989 16990 16991 16992 ;// ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs 16993 /** 16994 * We keep these listed seperately as we use the lowercase tag names as part 16995 * of the runtime bundle to detect SVG components 16996 */ 16997 const lowercaseSVGElements = [ 16998 "animate", 16999 "circle", 17000 "defs", 17001 "desc", 17002 "ellipse", 17003 "g", 17004 "image", 17005 "line", 17006 "filter", 17007 "marker", 17008 "mask", 17009 "metadata", 17010 "path", 17011 "pattern", 17012 "polygon", 17013 "polyline", 17014 "rect", 17015 "stop", 17016 "switch", 17017 "symbol", 17018 "svg", 17019 "text", 17020 "tspan", 17021 "use", 17022 "view", 17023 ]; 17024 17025 17026 17027 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs 17028 17029 17030 function isSVGComponent(Component) { 17031 if ( 17032 /** 17033 * If it's not a string, it's a custom React component. Currently we only support 17034 * HTML custom React components. 17035 */ 17036 typeof Component !== "string" || 17037 /** 17038 * If it contains a dash, the element is a custom HTML webcomponent. 17039 */ 17040 Component.includes("-")) { 17041 return false; 17042 } 17043 else if ( 17044 /** 17045 * If it's in our list of lowercase SVG tags, it's an SVG component 17046 */ 17047 lowercaseSVGElements.indexOf(Component) > -1 || 17048 /** 17049 * If it contains a capital letter, it's an SVG component 17050 */ 17051 /[A-Z]/u.test(Component)) { 17052 return true; 17053 } 17054 return false; 17055 } 17056 17057 17058 17059 ;// ./node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs 17060 const scaleCorrectors = {}; 17061 function addScaleCorrector(correctors) { 17062 Object.assign(scaleCorrectors, correctors); 17063 } 17064 17065 17066 17067 ;// ./node_modules/framer-motion/dist/es/render/html/utils/transform.mjs 17068 /** 17069 * Generate a list of every possible transform key. 17070 */ 17071 const transformPropOrder = [ 17072 "transformPerspective", 17073 "x", 17074 "y", 17075 "z", 17076 "translateX", 17077 "translateY", 17078 "translateZ", 17079 "scale", 17080 "scaleX", 17081 "scaleY", 17082 "rotate", 17083 "rotateX", 17084 "rotateY", 17085 "rotateZ", 17086 "skew", 17087 "skewX", 17088 "skewY", 17089 ]; 17090 /** 17091 * A quick lookup for transform props. 17092 */ 17093 const transformProps = new Set(transformPropOrder); 17094 17095 17096 17097 ;// ./node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs 17098 17099 17100 17101 function isForcedMotionValue(key, { layout, layoutId }) { 17102 return (transformProps.has(key) || 17103 key.startsWith("origin") || 17104 ((layout || layoutId !== undefined) && 17105 (!!scaleCorrectors[key] || key === "opacity"))); 17106 } 17107 17108 17109 17110 ;// ./node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs 17111 const isMotionValue = (value) => Boolean(value && value.getVelocity); 17112 17113 17114 17115 ;// ./node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs 17116 17117 17118 const translateAlias = { 17119 x: "translateX", 17120 y: "translateY", 17121 z: "translateZ", 17122 transformPerspective: "perspective", 17123 }; 17124 const numTransforms = transformPropOrder.length; 17125 /** 17126 * Build a CSS transform style from individual x/y/scale etc properties. 17127 * 17128 * This outputs with a default order of transforms/scales/rotations, this can be customised by 17129 * providing a transformTemplate function. 17130 */ 17131 function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) { 17132 // The transform string we're going to build into. 17133 let transformString = ""; 17134 /** 17135 * Loop over all possible transforms in order, adding the ones that 17136 * are present to the transform string. 17137 */ 17138 for (let i = 0; i < numTransforms; i++) { 17139 const key = transformPropOrder[i]; 17140 if (transform[key] !== undefined) { 17141 const transformName = translateAlias[key] || key; 17142 transformString += `$transformName}($transform[key]}) `; 17143 } 17144 } 17145 if (enableHardwareAcceleration && !transform.z) { 17146 transformString += "translateZ(0)"; 17147 } 17148 transformString = transformString.trim(); 17149 // If we have a custom `transform` template, pass our transform values and 17150 // generated transformString to that before returning 17151 if (transformTemplate) { 17152 transformString = transformTemplate(transform, transformIsDefault ? "" : transformString); 17153 } 17154 else if (allowTransformNone && transformIsDefault) { 17155 transformString = "none"; 17156 } 17157 return transformString; 17158 } 17159 17160 17161 17162 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs 17163 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token); 17164 const isCSSVariableName = checkStringStartsWith("--"); 17165 const startsAsVariableToken = checkStringStartsWith("var(--"); 17166 const isCSSVariableToken = (value) => { 17167 const startsWithToken = startsAsVariableToken(value); 17168 if (!startsWithToken) 17169 return false; 17170 // Ensure any comments are stripped from the value as this can harm performance of the regex. 17171 return singleCssVariableRegex.test(value.split("/*")[0].trim()); 17172 }; 17173 const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu; 17174 17175 17176 17177 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs 17178 /** 17179 * Provided a value and a ValueType, returns the value as that value type. 17180 */ 17181 const getValueAsType = (value, type) => { 17182 return type && typeof value === "number" 17183 ? type.transform(value) 17184 : value; 17185 }; 17186 17187 17188 17189 ;// ./node_modules/framer-motion/dist/es/utils/clamp.mjs 17190 const clamp_clamp = (min, max, v) => { 17191 if (v > max) 17192 return max; 17193 if (v < min) 17194 return min; 17195 return v; 17196 }; 17197 17198 17199 17200 ;// ./node_modules/framer-motion/dist/es/value/types/numbers/index.mjs 17201 17202 17203 const number = { 17204 test: (v) => typeof v === "number", 17205 parse: parseFloat, 17206 transform: (v) => v, 17207 }; 17208 const alpha = { 17209 ...number, 17210 transform: (v) => clamp_clamp(0, 1, v), 17211 }; 17212 const scale = { 17213 ...number, 17214 default: 1, 17215 }; 17216 17217 17218 17219 ;// ./node_modules/framer-motion/dist/es/value/types/utils.mjs 17220 /** 17221 * TODO: When we move from string as a source of truth to data models 17222 * everything in this folder should probably be referred to as models vs types 17223 */ 17224 // If this number is a decimal, make it just five decimal places 17225 // to avoid exponents 17226 const sanitize = (v) => Math.round(v * 100000) / 100000; 17227 const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu; 17228 const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu; 17229 const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu; 17230 function isString(v) { 17231 return typeof v === "string"; 17232 } 17233 17234 17235 17236 ;// ./node_modules/framer-motion/dist/es/value/types/numbers/units.mjs 17237 17238 17239 const createUnitType = (unit) => ({ 17240 test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1, 17241 parse: parseFloat, 17242 transform: (v) => `$v}$unit}`, 17243 }); 17244 const degrees = createUnitType("deg"); 17245 const percent = createUnitType("%"); 17246 const px = createUnitType("px"); 17247 const vh = createUnitType("vh"); 17248 const vw = createUnitType("vw"); 17249 const progressPercentage = { 17250 ...percent, 17251 parse: (v) => percent.parse(v) / 100, 17252 transform: (v) => percent.transform(v * 100), 17253 }; 17254 17255 17256 17257 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs 17258 17259 17260 const type_int_int = { 17261 ...number, 17262 transform: Math.round, 17263 }; 17264 17265 17266 17267 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs 17268 17269 17270 17271 17272 const numberValueTypes = { 17273 // Border props 17274 borderWidth: px, 17275 borderTopWidth: px, 17276 borderRightWidth: px, 17277 borderBottomWidth: px, 17278 borderLeftWidth: px, 17279 borderRadius: px, 17280 radius: px, 17281 borderTopLeftRadius: px, 17282 borderTopRightRadius: px, 17283 borderBottomRightRadius: px, 17284 borderBottomLeftRadius: px, 17285 // Positioning props 17286 width: px, 17287 maxWidth: px, 17288 height: px, 17289 maxHeight: px, 17290 size: px, 17291 top: px, 17292 right: px, 17293 bottom: px, 17294 left: px, 17295 // Spacing props 17296 padding: px, 17297 paddingTop: px, 17298 paddingRight: px, 17299 paddingBottom: px, 17300 paddingLeft: px, 17301 margin: px, 17302 marginTop: px, 17303 marginRight: px, 17304 marginBottom: px, 17305 marginLeft: px, 17306 // Transform props 17307 rotate: degrees, 17308 rotateX: degrees, 17309 rotateY: degrees, 17310 rotateZ: degrees, 17311 scale: scale, 17312 scaleX: scale, 17313 scaleY: scale, 17314 scaleZ: scale, 17315 skew: degrees, 17316 skewX: degrees, 17317 skewY: degrees, 17318 distance: px, 17319 translateX: px, 17320 translateY: px, 17321 translateZ: px, 17322 x: px, 17323 y: px, 17324 z: px, 17325 perspective: px, 17326 transformPerspective: px, 17327 opacity: alpha, 17328 originX: progressPercentage, 17329 originY: progressPercentage, 17330 originZ: px, 17331 // Misc 17332 zIndex: type_int_int, 17333 backgroundPositionX: px, 17334 backgroundPositionY: px, 17335 // SVG 17336 fillOpacity: alpha, 17337 strokeOpacity: alpha, 17338 numOctaves: type_int_int, 17339 }; 17340 17341 17342 17343 ;// ./node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs 17344 17345 17346 17347 17348 17349 17350 function buildHTMLStyles(state, latestValues, options, transformTemplate) { 17351 const { style, vars, transform, transformOrigin } = state; 17352 // Track whether we encounter any transform or transformOrigin values. 17353 let hasTransform = false; 17354 let hasTransformOrigin = false; 17355 // Does the calculated transform essentially equal "none"? 17356 let transformIsNone = true; 17357 /** 17358 * Loop over all our latest animated values and decide whether to handle them 17359 * as a style or CSS variable. 17360 * 17361 * Transforms and transform origins are kept seperately for further processing. 17362 */ 17363 for (const key in latestValues) { 17364 const value = latestValues[key]; 17365 /** 17366 * If this is a CSS variable we don't do any further processing. 17367 */ 17368 if (isCSSVariableName(key)) { 17369 vars[key] = value; 17370 continue; 17371 } 17372 // Convert the value to its default value type, ie 0 -> "0px" 17373 const valueType = numberValueTypes[key]; 17374 const valueAsType = getValueAsType(value, valueType); 17375 if (transformProps.has(key)) { 17376 // If this is a transform, flag to enable further transform processing 17377 hasTransform = true; 17378 transform[key] = valueAsType; 17379 // If we already know we have a non-default transform, early return 17380 if (!transformIsNone) 17381 continue; 17382 // Otherwise check to see if this is a default transform 17383 if (value !== (valueType.default || 0)) 17384 transformIsNone = false; 17385 } 17386 else if (key.startsWith("origin")) { 17387 // If this is a transform origin, flag and enable further transform-origin processing 17388 hasTransformOrigin = true; 17389 transformOrigin[key] = valueAsType; 17390 } 17391 else { 17392 style[key] = valueAsType; 17393 } 17394 } 17395 if (!latestValues.transform) { 17396 if (hasTransform || transformTemplate) { 17397 style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate); 17398 } 17399 else if (style.transform) { 17400 /** 17401 * If we have previously created a transform but currently don't have any, 17402 * reset transform style to none. 17403 */ 17404 style.transform = "none"; 17405 } 17406 } 17407 /** 17408 * Build a transformOrigin style. Uses the same defaults as the browser for 17409 * undefined origins. 17410 */ 17411 if (hasTransformOrigin) { 17412 const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin; 17413 style.transformOrigin = `$originX} $originY} $originZ}`; 17414 } 17415 } 17416 17417 17418 17419 ;// ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs 17420 const createHtmlRenderState = () => ({ 17421 style: {}, 17422 transform: {}, 17423 transformOrigin: {}, 17424 vars: {}, 17425 }); 17426 17427 17428 17429 ;// ./node_modules/framer-motion/dist/es/render/html/use-props.mjs 17430 17431 17432 17433 17434 17435 17436 function copyRawValuesOnly(target, source, props) { 17437 for (const key in source) { 17438 if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) { 17439 target[key] = source[key]; 17440 } 17441 } 17442 } 17443 function useInitialMotionValues({ transformTemplate }, visualState, isStatic) { 17444 return (0,external_React_.useMemo)(() => { 17445 const state = createHtmlRenderState(); 17446 buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate); 17447 return Object.assign({}, state.vars, state.style); 17448 }, [visualState]); 17449 } 17450 function useStyle(props, visualState, isStatic) { 17451 const styleProp = props.style || {}; 17452 const style = {}; 17453 /** 17454 * Copy non-Motion Values straight into style 17455 */ 17456 copyRawValuesOnly(style, styleProp, props); 17457 Object.assign(style, useInitialMotionValues(props, visualState, isStatic)); 17458 return style; 17459 } 17460 function useHTMLProps(props, visualState, isStatic) { 17461 // The `any` isn't ideal but it is the type of createElement props argument 17462 const htmlProps = {}; 17463 const style = useStyle(props, visualState, isStatic); 17464 if (props.drag && props.dragListener !== false) { 17465 // Disable the ghost element when a user drags 17466 htmlProps.draggable = false; 17467 // Disable text selection 17468 style.userSelect = 17469 style.WebkitUserSelect = 17470 style.WebkitTouchCallout = 17471 "none"; 17472 // Disable scrolling on the draggable direction 17473 style.touchAction = 17474 props.drag === true 17475 ? "none" 17476 : `pan-$props.drag === "x" ? "y" : "x"}`; 17477 } 17478 if (props.tabIndex === undefined && 17479 (props.onTap || props.onTapStart || props.whileTap)) { 17480 htmlProps.tabIndex = 0; 17481 } 17482 htmlProps.style = style; 17483 return htmlProps; 17484 } 17485 17486 17487 17488 ;// ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs 17489 /** 17490 * A list of all valid MotionProps. 17491 * 17492 * @privateRemarks 17493 * This doesn't throw if a `MotionProp` name is missing - it should. 17494 */ 17495 const validMotionProps = new Set([ 17496 "animate", 17497 "exit", 17498 "variants", 17499 "initial", 17500 "style", 17501 "values", 17502 "variants", 17503 "transition", 17504 "transformTemplate", 17505 "custom", 17506 "inherit", 17507 "onBeforeLayoutMeasure", 17508 "onAnimationStart", 17509 "onAnimationComplete", 17510 "onUpdate", 17511 "onDragStart", 17512 "onDrag", 17513 "onDragEnd", 17514 "onMeasureDragConstraints", 17515 "onDirectionLock", 17516 "onDragTransitionEnd", 17517 "_dragX", 17518 "_dragY", 17519 "onHoverStart", 17520 "onHoverEnd", 17521 "onViewportEnter", 17522 "onViewportLeave", 17523 "globalTapTarget", 17524 "ignoreStrict", 17525 "viewport", 17526 ]); 17527 /** 17528 * Check whether a prop name is a valid `MotionProp` key. 17529 * 17530 * @param key - Name of the property to check 17531 * @returns `true` is key is a valid `MotionProp`. 17532 * 17533 * @public 17534 */ 17535 function isValidMotionProp(key) { 17536 return (key.startsWith("while") || 17537 (key.startsWith("drag") && key !== "draggable") || 17538 key.startsWith("layout") || 17539 key.startsWith("onTap") || 17540 key.startsWith("onPan") || 17541 key.startsWith("onLayout") || 17542 validMotionProps.has(key)); 17543 } 17544 17545 17546 17547 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs 17548 17549 17550 let shouldForward = (key) => !isValidMotionProp(key); 17551 function loadExternalIsValidProp(isValidProp) { 17552 if (!isValidProp) 17553 return; 17554 // Explicitly filter our events 17555 shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key); 17556 } 17557 /** 17558 * Emotion and Styled Components both allow users to pass through arbitrary props to their components 17559 * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which 17560 * of these should be passed to the underlying DOM node. 17561 * 17562 * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props 17563 * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props 17564 * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of 17565 * `@emotion/is-prop-valid`, however to fix this problem we need to use it. 17566 * 17567 * By making it an optionalDependency we can offer this functionality only in the situations where it's 17568 * actually required. 17569 */ 17570 try { 17571 /** 17572 * We attempt to import this package but require won't be defined in esm environments, in that case 17573 * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed 17574 * in favour of explicit injection. 17575 */ 17576 loadExternalIsValidProp(require("@emotion/is-prop-valid").default); 17577 } 17578 catch (_a) { 17579 // We don't need to actually do anything here - the fallback is the existing `isPropValid`. 17580 } 17581 function filterProps(props, isDom, forwardMotionProps) { 17582 const filteredProps = {}; 17583 for (const key in props) { 17584 /** 17585 * values is considered a valid prop by Emotion, so if it's present 17586 * this will be rendered out to the DOM unless explicitly filtered. 17587 * 17588 * We check the type as it could be used with the `feColorMatrix` 17589 * element, which we support. 17590 */ 17591 if (key === "values" && typeof props.values === "object") 17592 continue; 17593 if (shouldForward(key) || 17594 (forwardMotionProps === true && isValidMotionProp(key)) || 17595 (!isDom && !isValidMotionProp(key)) || 17596 // If trying to use native HTML drag events, forward drag listeners 17597 (props["draggable"] && 17598 key.startsWith("onDrag"))) { 17599 filteredProps[key] = 17600 props[key]; 17601 } 17602 } 17603 return filteredProps; 17604 } 17605 17606 17607 17608 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs 17609 17610 17611 function calcOrigin(origin, offset, size) { 17612 return typeof origin === "string" 17613 ? origin 17614 : px.transform(offset + size * origin); 17615 } 17616 /** 17617 * The SVG transform origin defaults are different to CSS and is less intuitive, 17618 * so we use the measured dimensions of the SVG to reconcile these. 17619 */ 17620 function calcSVGTransformOrigin(dimensions, originX, originY) { 17621 const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width); 17622 const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height); 17623 return `$pxOriginX} $pxOriginY}`; 17624 } 17625 17626 17627 17628 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/path.mjs 17629 17630 17631 const dashKeys = { 17632 offset: "stroke-dashoffset", 17633 array: "stroke-dasharray", 17634 }; 17635 const camelKeys = { 17636 offset: "strokeDashoffset", 17637 array: "strokeDasharray", 17638 }; 17639 /** 17640 * Build SVG path properties. Uses the path's measured length to convert 17641 * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset 17642 * and stroke-dasharray attributes. 17643 * 17644 * This function is mutative to reduce per-frame GC. 17645 */ 17646 function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) { 17647 // Normalise path length by setting SVG attribute pathLength to 1 17648 attrs.pathLength = 1; 17649 // We use dash case when setting attributes directly to the DOM node and camel case 17650 // when defining props on a React component. 17651 const keys = useDashCase ? dashKeys : camelKeys; 17652 // Build the dash offset 17653 attrs[keys.offset] = px.transform(-offset); 17654 // Build the dash array 17655 const pathLength = px.transform(length); 17656 const pathSpacing = px.transform(spacing); 17657 attrs[keys.array] = `$pathLength} $pathSpacing}`; 17658 } 17659 17660 17661 17662 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs 17663 17664 17665 17666 17667 /** 17668 * Build SVG visual attrbutes, like cx and style.transform 17669 */ 17670 function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 17671 // This is object creation, which we try to avoid per-frame. 17672 ...latest }, options, isSVGTag, transformTemplate) { 17673 buildHTMLStyles(state, latest, options, transformTemplate); 17674 /** 17675 * For svg tags we just want to make sure viewBox is animatable and treat all the styles 17676 * as normal HTML tags. 17677 */ 17678 if (isSVGTag) { 17679 if (state.style.viewBox) { 17680 state.attrs.viewBox = state.style.viewBox; 17681 } 17682 return; 17683 } 17684 state.attrs = state.style; 17685 state.style = {}; 17686 const { attrs, style, dimensions } = state; 17687 /** 17688 * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs 17689 * and copy it into style. 17690 */ 17691 if (attrs.transform) { 17692 if (dimensions) 17693 style.transform = attrs.transform; 17694 delete attrs.transform; 17695 } 17696 // Parse transformOrigin 17697 if (dimensions && 17698 (originX !== undefined || originY !== undefined || style.transform)) { 17699 style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5); 17700 } 17701 // Render attrX/attrY/attrScale as attributes 17702 if (attrX !== undefined) 17703 attrs.x = attrX; 17704 if (attrY !== undefined) 17705 attrs.y = attrY; 17706 if (attrScale !== undefined) 17707 attrs.scale = attrScale; 17708 // Build SVG path if one has been defined 17709 if (pathLength !== undefined) { 17710 buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false); 17711 } 17712 } 17713 17714 17715 17716 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs 17717 17718 17719 const createSvgRenderState = () => ({ 17720 ...createHtmlRenderState(), 17721 attrs: {}, 17722 }); 17723 17724 17725 17726 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs 17727 const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg"; 17728 17729 17730 17731 ;// ./node_modules/framer-motion/dist/es/render/svg/use-props.mjs 17732 17733 17734 17735 17736 17737 17738 function useSVGProps(props, visualState, _isStatic, Component) { 17739 const visualProps = (0,external_React_.useMemo)(() => { 17740 const state = createSvgRenderState(); 17741 buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate); 17742 return { 17743 ...state.attrs, 17744 style: { ...state.style }, 17745 }; 17746 }, [visualState]); 17747 if (props.style) { 17748 const rawStyles = {}; 17749 copyRawValuesOnly(rawStyles, props.style, props); 17750 visualProps.style = { ...rawStyles, ...visualProps.style }; 17751 } 17752 return visualProps; 17753 } 17754 17755 17756 17757 ;// ./node_modules/framer-motion/dist/es/render/dom/use-render.mjs 17758 17759 17760 17761 17762 17763 17764 17765 function createUseRender(forwardMotionProps = false) { 17766 const useRender = (Component, props, ref, { latestValues }, isStatic) => { 17767 const useVisualProps = isSVGComponent(Component) 17768 ? useSVGProps 17769 : useHTMLProps; 17770 const visualProps = useVisualProps(props, latestValues, isStatic, Component); 17771 const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps); 17772 const elementProps = Component !== external_React_.Fragment 17773 ? { ...filteredProps, ...visualProps, ref } 17774 : {}; 17775 /** 17776 * If component has been handed a motion value as its child, 17777 * memoise its initial value and render that. Subsequent updates 17778 * will be handled by the onChange handler 17779 */ 17780 const { children } = props; 17781 const renderedChildren = (0,external_React_.useMemo)(() => (isMotionValue(children) ? children.get() : children), [children]); 17782 return (0,external_React_.createElement)(Component, { 17783 ...elementProps, 17784 children: renderedChildren, 17785 }); 17786 }; 17787 return useRender; 17788 } 17789 17790 17791 17792 ;// ./node_modules/framer-motion/dist/es/render/html/utils/render.mjs 17793 function renderHTML(element, { style, vars }, styleProp, projection) { 17794 Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp)); 17795 // Loop over any CSS variables and assign those. 17796 for (const key in vars) { 17797 element.style.setProperty(key, vars[key]); 17798 } 17799 } 17800 17801 17802 17803 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs 17804 /** 17805 * A set of attribute names that are always read/written as camel case. 17806 */ 17807 const camelCaseAttributes = new Set([ 17808 "baseFrequency", 17809 "diffuseConstant", 17810 "kernelMatrix", 17811 "kernelUnitLength", 17812 "keySplines", 17813 "keyTimes", 17814 "limitingConeAngle", 17815 "markerHeight", 17816 "markerWidth", 17817 "numOctaves", 17818 "targetX", 17819 "targetY", 17820 "surfaceScale", 17821 "specularConstant", 17822 "specularExponent", 17823 "stdDeviation", 17824 "tableValues", 17825 "viewBox", 17826 "gradientTransform", 17827 "pathLength", 17828 "startOffset", 17829 "textLength", 17830 "lengthAdjust", 17831 ]); 17832 17833 17834 17835 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/render.mjs 17836 17837 17838 17839 17840 function renderSVG(element, renderState, _styleProp, projection) { 17841 renderHTML(element, renderState, undefined, projection); 17842 for (const key in renderState.attrs) { 17843 element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]); 17844 } 17845 } 17846 17847 17848 17849 ;// ./node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs 17850 17851 17852 17853 function scrapeMotionValuesFromProps(props, prevProps, visualElement) { 17854 var _a; 17855 const { style } = props; 17856 const newValues = {}; 17857 for (const key in style) { 17858 if (isMotionValue(style[key]) || 17859 (prevProps.style && 17860 isMotionValue(prevProps.style[key])) || 17861 isForcedMotionValue(key, props) || 17862 ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) { 17863 newValues[key] = style[key]; 17864 } 17865 } 17866 return newValues; 17867 } 17868 17869 17870 17871 ;// ./node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs 17872 17873 17874 17875 17876 function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement) { 17877 const newValues = scrapeMotionValuesFromProps(props, prevProps, visualElement); 17878 for (const key in props) { 17879 if (isMotionValue(props[key]) || 17880 isMotionValue(prevProps[key])) { 17881 const targetKey = transformPropOrder.indexOf(key) !== -1 17882 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) 17883 : key; 17884 newValues[targetKey] = props[key]; 17885 } 17886 } 17887 return newValues; 17888 } 17889 17890 17891 17892 ;// ./node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs 17893 function getValueState(visualElement) { 17894 const state = [{}, {}]; 17895 visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => { 17896 state[0][key] = value.get(); 17897 state[1][key] = value.getVelocity(); 17898 }); 17899 return state; 17900 } 17901 function resolveVariantFromProps(props, definition, custom, visualElement) { 17902 /** 17903 * If the variant definition is a function, resolve. 17904 */ 17905 if (typeof definition === "function") { 17906 const [current, velocity] = getValueState(visualElement); 17907 definition = definition(custom !== undefined ? custom : props.custom, current, velocity); 17908 } 17909 /** 17910 * If the variant definition is a variant label, or 17911 * the function returned a variant label, resolve. 17912 */ 17913 if (typeof definition === "string") { 17914 definition = props.variants && props.variants[definition]; 17915 } 17916 /** 17917 * At this point we've resolved both functions and variant labels, 17918 * but the resolved variant label might itself have been a function. 17919 * If so, resolve. This can only have returned a valid target object. 17920 */ 17921 if (typeof definition === "function") { 17922 const [current, velocity] = getValueState(visualElement); 17923 definition = definition(custom !== undefined ? custom : props.custom, current, velocity); 17924 } 17925 return definition; 17926 } 17927 17928 17929 17930 ;// ./node_modules/framer-motion/dist/es/utils/use-constant.mjs 17931 17932 17933 /** 17934 * Creates a constant value over the lifecycle of a component. 17935 * 17936 * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer 17937 * a guarantee that it won't re-run for performance reasons later on. By using `useConstant` 17938 * you can ensure that initialisers don't execute twice or more. 17939 */ 17940 function useConstant(init) { 17941 const ref = (0,external_React_.useRef)(null); 17942 if (ref.current === null) { 17943 ref.current = init(); 17944 } 17945 return ref.current; 17946 } 17947 17948 17949 17950 ;// ./node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs 17951 const isKeyframesTarget = (v) => { 17952 return Array.isArray(v); 17953 }; 17954 17955 17956 17957 ;// ./node_modules/framer-motion/dist/es/utils/resolve-value.mjs 17958 17959 17960 const isCustomValue = (v) => { 17961 return Boolean(v && typeof v === "object" && v.mix && v.toValue); 17962 }; 17963 const resolveFinalValueInKeyframes = (v) => { 17964 // TODO maybe throw if v.length - 1 is placeholder token? 17965 return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v; 17966 }; 17967 17968 17969 17970 ;// ./node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs 17971 17972 17973 17974 /** 17975 * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself 17976 * 17977 * TODO: Remove and move to library 17978 */ 17979 function resolveMotionValue(value) { 17980 const unwrappedValue = isMotionValue(value) ? value.get() : value; 17981 return isCustomValue(unwrappedValue) 17982 ? unwrappedValue.toValue() 17983 : unwrappedValue; 17984 } 17985 17986 17987 17988 ;// ./node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs 17989 17990 17991 17992 17993 17994 17995 17996 17997 17998 function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) { 17999 const state = { 18000 latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps), 18001 renderState: createRenderState(), 18002 }; 18003 if (onMount) { 18004 state.mount = (instance) => onMount(props, instance, state); 18005 } 18006 return state; 18007 } 18008 const makeUseVisualState = (config) => (props, isStatic) => { 18009 const context = (0,external_React_.useContext)(MotionContext); 18010 const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 18011 const make = () => makeState(config, props, context, presenceContext); 18012 return isStatic ? make() : useConstant(make); 18013 }; 18014 function makeLatestValues(props, context, presenceContext, scrapeMotionValues) { 18015 const values = {}; 18016 const motionValues = scrapeMotionValues(props, {}); 18017 for (const key in motionValues) { 18018 values[key] = resolveMotionValue(motionValues[key]); 18019 } 18020 let { initial, animate } = props; 18021 const isControllingVariants$1 = isControllingVariants(props); 18022 const isVariantNode$1 = isVariantNode(props); 18023 if (context && 18024 isVariantNode$1 && 18025 !isControllingVariants$1 && 18026 props.inherit !== false) { 18027 if (initial === undefined) 18028 initial = context.initial; 18029 if (animate === undefined) 18030 animate = context.animate; 18031 } 18032 let isInitialAnimationBlocked = presenceContext 18033 ? presenceContext.initial === false 18034 : false; 18035 isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false; 18036 const variantToSet = isInitialAnimationBlocked ? animate : initial; 18037 if (variantToSet && 18038 typeof variantToSet !== "boolean" && 18039 !isAnimationControls(variantToSet)) { 18040 const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet]; 18041 list.forEach((definition) => { 18042 const resolved = resolveVariantFromProps(props, definition); 18043 if (!resolved) 18044 return; 18045 const { transitionEnd, transition, ...target } = resolved; 18046 for (const key in target) { 18047 let valueTarget = target[key]; 18048 if (Array.isArray(valueTarget)) { 18049 /** 18050 * Take final keyframe if the initial animation is blocked because 18051 * we want to initialise at the end of that blocked animation. 18052 */ 18053 const index = isInitialAnimationBlocked 18054 ? valueTarget.length - 1 18055 : 0; 18056 valueTarget = valueTarget[index]; 18057 } 18058 if (valueTarget !== null) { 18059 values[key] = valueTarget; 18060 } 18061 } 18062 for (const key in transitionEnd) 18063 values[key] = transitionEnd[key]; 18064 }); 18065 } 18066 return values; 18067 } 18068 18069 18070 18071 ;// ./node_modules/framer-motion/dist/es/utils/noop.mjs 18072 const noop_noop = (any) => any; 18073 18074 18075 18076 ;// ./node_modules/framer-motion/dist/es/frameloop/frame.mjs 18077 18078 18079 18080 const { schedule: frame_frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop_noop, true); 18081 18082 18083 18084 ;// ./node_modules/framer-motion/dist/es/render/svg/config-motion.mjs 18085 18086 18087 18088 18089 18090 18091 18092 18093 const svgMotionConfig = { 18094 useVisualState: makeUseVisualState({ 18095 scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps, 18096 createRenderState: createSvgRenderState, 18097 onMount: (props, instance, { renderState, latestValues }) => { 18098 frame_frame.read(() => { 18099 try { 18100 renderState.dimensions = 18101 typeof instance.getBBox === 18102 "function" 18103 ? instance.getBBox() 18104 : instance.getBoundingClientRect(); 18105 } 18106 catch (e) { 18107 // Most likely trying to measure an unrendered element under Firefox 18108 renderState.dimensions = { 18109 x: 0, 18110 y: 0, 18111 width: 0, 18112 height: 0, 18113 }; 18114 } 18115 }); 18116 frame_frame.render(() => { 18117 buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate); 18118 renderSVG(instance, renderState); 18119 }); 18120 }, 18121 }), 18122 }; 18123 18124 18125 18126 ;// ./node_modules/framer-motion/dist/es/render/html/config-motion.mjs 18127 18128 18129 18130 18131 const htmlMotionConfig = { 18132 useVisualState: makeUseVisualState({ 18133 scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, 18134 createRenderState: createHtmlRenderState, 18135 }), 18136 }; 18137 18138 18139 18140 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs 18141 18142 18143 18144 18145 18146 function create_config_createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) { 18147 const baseConfig = isSVGComponent(Component) 18148 ? svgMotionConfig 18149 : htmlMotionConfig; 18150 return { 18151 ...baseConfig, 18152 preloadedFeatures, 18153 useRender: createUseRender(forwardMotionProps), 18154 createVisualElement, 18155 Component, 18156 }; 18157 } 18158 18159 18160 18161 ;// ./node_modules/framer-motion/dist/es/events/add-dom-event.mjs 18162 function addDomEvent(target, eventName, handler, options = { passive: true }) { 18163 target.addEventListener(eventName, handler, options); 18164 return () => target.removeEventListener(eventName, handler); 18165 } 18166 18167 18168 18169 ;// ./node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs 18170 const isPrimaryPointer = (event) => { 18171 if (event.pointerType === "mouse") { 18172 return typeof event.button !== "number" || event.button <= 0; 18173 } 18174 else { 18175 /** 18176 * isPrimary is true for all mice buttons, whereas every touch point 18177 * is regarded as its own input. So subsequent concurrent touch points 18178 * will be false. 18179 * 18180 * Specifically match against false here as incomplete versions of 18181 * PointerEvents in very old browser might have it set as undefined. 18182 */ 18183 return event.isPrimary !== false; 18184 } 18185 }; 18186 18187 18188 18189 ;// ./node_modules/framer-motion/dist/es/events/event-info.mjs 18190 18191 18192 function extractEventInfo(event, pointType = "page") { 18193 return { 18194 point: { 18195 x: event[`$pointType}X`], 18196 y: event[`$pointType}Y`], 18197 }, 18198 }; 18199 } 18200 const addPointerInfo = (handler) => { 18201 return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event)); 18202 }; 18203 18204 18205 18206 ;// ./node_modules/framer-motion/dist/es/events/add-pointer-event.mjs 18207 18208 18209 18210 function addPointerEvent(target, eventName, handler, options) { 18211 return addDomEvent(target, eventName, addPointerInfo(handler), options); 18212 } 18213 18214 18215 18216 ;// ./node_modules/framer-motion/dist/es/utils/pipe.mjs 18217 /** 18218 * Pipe 18219 * Compose other transformers to run linearily 18220 * pipe(min(20), max(40)) 18221 * @param {...functions} transformers 18222 * @return {function} 18223 */ 18224 const combineFunctions = (a, b) => (v) => b(a(v)); 18225 const pipe = (...transformers) => transformers.reduce(combineFunctions); 18226 18227 18228 18229 ;// ./node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs 18230 function createLock(name) { 18231 let lock = null; 18232 return () => { 18233 const openLock = () => { 18234 lock = null; 18235 }; 18236 if (lock === null) { 18237 lock = name; 18238 return openLock; 18239 } 18240 return false; 18241 }; 18242 } 18243 const globalHorizontalLock = createLock("dragHorizontal"); 18244 const globalVerticalLock = createLock("dragVertical"); 18245 function getGlobalLock(drag) { 18246 let lock = false; 18247 if (drag === "y") { 18248 lock = globalVerticalLock(); 18249 } 18250 else if (drag === "x") { 18251 lock = globalHorizontalLock(); 18252 } 18253 else { 18254 const openHorizontal = globalHorizontalLock(); 18255 const openVertical = globalVerticalLock(); 18256 if (openHorizontal && openVertical) { 18257 lock = () => { 18258 openHorizontal(); 18259 openVertical(); 18260 }; 18261 } 18262 else { 18263 // Release the locks because we don't use them 18264 if (openHorizontal) 18265 openHorizontal(); 18266 if (openVertical) 18267 openVertical(); 18268 } 18269 } 18270 return lock; 18271 } 18272 function isDragActive() { 18273 // Check the gesture lock - if we get it, it means no drag gesture is active 18274 // and we can safely fire the tap gesture. 18275 const openGestureLock = getGlobalLock(true); 18276 if (!openGestureLock) 18277 return true; 18278 openGestureLock(); 18279 return false; 18280 } 18281 18282 18283 18284 ;// ./node_modules/framer-motion/dist/es/motion/features/Feature.mjs 18285 class Feature { 18286 constructor(node) { 18287 this.isMounted = false; 18288 this.node = node; 18289 } 18290 update() { } 18291 } 18292 18293 18294 18295 ;// ./node_modules/framer-motion/dist/es/gestures/hover.mjs 18296 18297 18298 18299 18300 18301 18302 function addHoverEvent(node, isActive) { 18303 const eventName = isActive ? "pointerenter" : "pointerleave"; 18304 const callbackName = isActive ? "onHoverStart" : "onHoverEnd"; 18305 const handleEvent = (event, info) => { 18306 if (event.pointerType === "touch" || isDragActive()) 18307 return; 18308 const props = node.getProps(); 18309 if (node.animationState && props.whileHover) { 18310 node.animationState.setActive("whileHover", isActive); 18311 } 18312 const callback = props[callbackName]; 18313 if (callback) { 18314 frame_frame.postRender(() => callback(event, info)); 18315 } 18316 }; 18317 return addPointerEvent(node.current, eventName, handleEvent, { 18318 passive: !node.getProps()[callbackName], 18319 }); 18320 } 18321 class HoverGesture extends Feature { 18322 mount() { 18323 this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false)); 18324 } 18325 unmount() { } 18326 } 18327 18328 18329 18330 ;// ./node_modules/framer-motion/dist/es/gestures/focus.mjs 18331 18332 18333 18334 18335 class FocusGesture extends Feature { 18336 constructor() { 18337 super(...arguments); 18338 this.isActive = false; 18339 } 18340 onFocus() { 18341 let isFocusVisible = false; 18342 /** 18343 * If this element doesn't match focus-visible then don't 18344 * apply whileHover. But, if matches throws that focus-visible 18345 * is not a valid selector then in that browser outline styles will be applied 18346 * to the element by default and we want to match that behaviour with whileFocus. 18347 */ 18348 try { 18349 isFocusVisible = this.node.current.matches(":focus-visible"); 18350 } 18351 catch (e) { 18352 isFocusVisible = true; 18353 } 18354 if (!isFocusVisible || !this.node.animationState) 18355 return; 18356 this.node.animationState.setActive("whileFocus", true); 18357 this.isActive = true; 18358 } 18359 onBlur() { 18360 if (!this.isActive || !this.node.animationState) 18361 return; 18362 this.node.animationState.setActive("whileFocus", false); 18363 this.isActive = false; 18364 } 18365 mount() { 18366 this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur())); 18367 } 18368 unmount() { } 18369 } 18370 18371 18372 18373 ;// ./node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs 18374 /** 18375 * Recursively traverse up the tree to check whether the provided child node 18376 * is the parent or a descendant of it. 18377 * 18378 * @param parent - Element to find 18379 * @param child - Element to test against parent 18380 */ 18381 const isNodeOrChild = (parent, child) => { 18382 if (!child) { 18383 return false; 18384 } 18385 else if (parent === child) { 18386 return true; 18387 } 18388 else { 18389 return isNodeOrChild(parent, child.parentElement); 18390 } 18391 }; 18392 18393 18394 18395 ;// ./node_modules/framer-motion/dist/es/gestures/press.mjs 18396 18397 18398 18399 18400 18401 18402 18403 18404 18405 18406 function fireSyntheticPointerEvent(name, handler) { 18407 if (!handler) 18408 return; 18409 const syntheticPointerEvent = new PointerEvent("pointer" + name); 18410 handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent)); 18411 } 18412 class PressGesture extends Feature { 18413 constructor() { 18414 super(...arguments); 18415 this.removeStartListeners = noop_noop; 18416 this.removeEndListeners = noop_noop; 18417 this.removeAccessibleListeners = noop_noop; 18418 this.startPointerPress = (startEvent, startInfo) => { 18419 if (this.isPressing) 18420 return; 18421 this.removeEndListeners(); 18422 const props = this.node.getProps(); 18423 const endPointerPress = (endEvent, endInfo) => { 18424 if (!this.checkPressEnd()) 18425 return; 18426 const { onTap, onTapCancel, globalTapTarget } = this.node.getProps(); 18427 /** 18428 * We only count this as a tap gesture if the event.target is the same 18429 * as, or a child of, this component's element 18430 */ 18431 const handler = !globalTapTarget && 18432 !isNodeOrChild(this.node.current, endEvent.target) 18433 ? onTapCancel 18434 : onTap; 18435 if (handler) { 18436 frame_frame.update(() => handler(endEvent, endInfo)); 18437 } 18438 }; 18439 const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { 18440 passive: !(props.onTap || props["onPointerUp"]), 18441 }); 18442 const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { 18443 passive: !(props.onTapCancel || 18444 props["onPointerCancel"]), 18445 }); 18446 this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener); 18447 this.startPress(startEvent, startInfo); 18448 }; 18449 this.startAccessiblePress = () => { 18450 const handleKeydown = (keydownEvent) => { 18451 if (keydownEvent.key !== "Enter" || this.isPressing) 18452 return; 18453 const handleKeyup = (keyupEvent) => { 18454 if (keyupEvent.key !== "Enter" || !this.checkPressEnd()) 18455 return; 18456 fireSyntheticPointerEvent("up", (event, info) => { 18457 const { onTap } = this.node.getProps(); 18458 if (onTap) { 18459 frame_frame.postRender(() => onTap(event, info)); 18460 } 18461 }); 18462 }; 18463 this.removeEndListeners(); 18464 this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup); 18465 fireSyntheticPointerEvent("down", (event, info) => { 18466 this.startPress(event, info); 18467 }); 18468 }; 18469 const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown); 18470 const handleBlur = () => { 18471 if (!this.isPressing) 18472 return; 18473 fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo)); 18474 }; 18475 const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur); 18476 this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener); 18477 }; 18478 } 18479 startPress(event, info) { 18480 this.isPressing = true; 18481 const { onTapStart, whileTap } = this.node.getProps(); 18482 /** 18483 * Ensure we trigger animations before firing event callback 18484 */ 18485 if (whileTap && this.node.animationState) { 18486 this.node.animationState.setActive("whileTap", true); 18487 } 18488 if (onTapStart) { 18489 frame_frame.postRender(() => onTapStart(event, info)); 18490 } 18491 } 18492 checkPressEnd() { 18493 this.removeEndListeners(); 18494 this.isPressing = false; 18495 const props = this.node.getProps(); 18496 if (props.whileTap && this.node.animationState) { 18497 this.node.animationState.setActive("whileTap", false); 18498 } 18499 return !isDragActive(); 18500 } 18501 cancelPress(event, info) { 18502 if (!this.checkPressEnd()) 18503 return; 18504 const { onTapCancel } = this.node.getProps(); 18505 if (onTapCancel) { 18506 frame_frame.postRender(() => onTapCancel(event, info)); 18507 } 18508 } 18509 mount() { 18510 const props = this.node.getProps(); 18511 const removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, "pointerdown", this.startPointerPress, { 18512 passive: !(props.onTapStart || 18513 props["onPointerStart"]), 18514 }); 18515 const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress); 18516 this.removeStartListeners = pipe(removePointerListener, removeFocusListener); 18517 } 18518 unmount() { 18519 this.removeStartListeners(); 18520 this.removeEndListeners(); 18521 this.removeAccessibleListeners(); 18522 } 18523 } 18524 18525 18526 18527 ;// ./node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs 18528 /** 18529 * Map an IntersectionHandler callback to an element. We only ever make one handler for one 18530 * element, so even though these handlers might all be triggered by different 18531 * observers, we can keep them in the same map. 18532 */ 18533 const observerCallbacks = new WeakMap(); 18534 /** 18535 * Multiple observers can be created for multiple element/document roots. Each with 18536 * different settings. So here we store dictionaries of observers to each root, 18537 * using serialised settings (threshold/margin) as lookup keys. 18538 */ 18539 const observers = new WeakMap(); 18540 const fireObserverCallback = (entry) => { 18541 const callback = observerCallbacks.get(entry.target); 18542 callback && callback(entry); 18543 }; 18544 const fireAllObserverCallbacks = (entries) => { 18545 entries.forEach(fireObserverCallback); 18546 }; 18547 function initIntersectionObserver({ root, ...options }) { 18548 const lookupRoot = root || document; 18549 /** 18550 * If we don't have an observer lookup map for this root, create one. 18551 */ 18552 if (!observers.has(lookupRoot)) { 18553 observers.set(lookupRoot, {}); 18554 } 18555 const rootObservers = observers.get(lookupRoot); 18556 const key = JSON.stringify(options); 18557 /** 18558 * If we don't have an observer for this combination of root and settings, 18559 * create one. 18560 */ 18561 if (!rootObservers[key]) { 18562 rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options }); 18563 } 18564 return rootObservers[key]; 18565 } 18566 function observeIntersection(element, options, callback) { 18567 const rootInteresectionObserver = initIntersectionObserver(options); 18568 observerCallbacks.set(element, callback); 18569 rootInteresectionObserver.observe(element); 18570 return () => { 18571 observerCallbacks.delete(element); 18572 rootInteresectionObserver.unobserve(element); 18573 }; 18574 } 18575 18576 18577 18578 ;// ./node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs 18579 18580 18581 18582 const thresholdNames = { 18583 some: 0, 18584 all: 1, 18585 }; 18586 class InViewFeature extends Feature { 18587 constructor() { 18588 super(...arguments); 18589 this.hasEnteredView = false; 18590 this.isInView = false; 18591 } 18592 startObserver() { 18593 this.unmount(); 18594 const { viewport = {} } = this.node.getProps(); 18595 const { root, margin: rootMargin, amount = "some", once } = viewport; 18596 const options = { 18597 root: root ? root.current : undefined, 18598 rootMargin, 18599 threshold: typeof amount === "number" ? amount : thresholdNames[amount], 18600 }; 18601 const onIntersectionUpdate = (entry) => { 18602 const { isIntersecting } = entry; 18603 /** 18604 * If there's been no change in the viewport state, early return. 18605 */ 18606 if (this.isInView === isIntersecting) 18607 return; 18608 this.isInView = isIntersecting; 18609 /** 18610 * Handle hasEnteredView. If this is only meant to run once, and 18611 * element isn't visible, early return. Otherwise set hasEnteredView to true. 18612 */ 18613 if (once && !isIntersecting && this.hasEnteredView) { 18614 return; 18615 } 18616 else if (isIntersecting) { 18617 this.hasEnteredView = true; 18618 } 18619 if (this.node.animationState) { 18620 this.node.animationState.setActive("whileInView", isIntersecting); 18621 } 18622 /** 18623 * Use the latest committed props rather than the ones in scope 18624 * when this observer is created 18625 */ 18626 const { onViewportEnter, onViewportLeave } = this.node.getProps(); 18627 const callback = isIntersecting ? onViewportEnter : onViewportLeave; 18628 callback && callback(entry); 18629 }; 18630 return observeIntersection(this.node.current, options, onIntersectionUpdate); 18631 } 18632 mount() { 18633 this.startObserver(); 18634 } 18635 update() { 18636 if (typeof IntersectionObserver === "undefined") 18637 return; 18638 const { props, prevProps } = this.node; 18639 const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps)); 18640 if (hasOptionsChanged) { 18641 this.startObserver(); 18642 } 18643 } 18644 unmount() { } 18645 } 18646 function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) { 18647 return (name) => viewport[name] !== prevViewport[name]; 18648 } 18649 18650 18651 18652 ;// ./node_modules/framer-motion/dist/es/motion/features/gestures.mjs 18653 18654 18655 18656 18657 18658 const gestureAnimations = { 18659 inView: { 18660 Feature: InViewFeature, 18661 }, 18662 tap: { 18663 Feature: PressGesture, 18664 }, 18665 focus: { 18666 Feature: FocusGesture, 18667 }, 18668 hover: { 18669 Feature: HoverGesture, 18670 }, 18671 }; 18672 18673 18674 18675 ;// ./node_modules/framer-motion/dist/es/utils/shallow-compare.mjs 18676 function shallowCompare(next, prev) { 18677 if (!Array.isArray(prev)) 18678 return false; 18679 const prevLength = prev.length; 18680 if (prevLength !== next.length) 18681 return false; 18682 for (let i = 0; i < prevLength; i++) { 18683 if (prev[i] !== next[i]) 18684 return false; 18685 } 18686 return true; 18687 } 18688 18689 18690 18691 ;// ./node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs 18692 18693 18694 function resolveVariant(visualElement, definition, custom) { 18695 const props = visualElement.getProps(); 18696 return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement); 18697 } 18698 18699 18700 18701 ;// ./node_modules/framer-motion/dist/es/utils/time-conversion.mjs 18702 /** 18703 * Converts seconds to milliseconds 18704 * 18705 * @param seconds - Time in seconds. 18706 * @return milliseconds - Converted time in milliseconds. 18707 */ 18708 const secondsToMilliseconds = (seconds) => seconds * 1000; 18709 const millisecondsToSeconds = (milliseconds) => milliseconds / 1000; 18710 18711 18712 18713 ;// ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs 18714 18715 18716 const underDampedSpring = { 18717 type: "spring", 18718 stiffness: 500, 18719 damping: 25, 18720 restSpeed: 10, 18721 }; 18722 const criticallyDampedSpring = (target) => ({ 18723 type: "spring", 18724 stiffness: 550, 18725 damping: target === 0 ? 2 * Math.sqrt(550) : 30, 18726 restSpeed: 10, 18727 }); 18728 const keyframesTransition = { 18729 type: "keyframes", 18730 duration: 0.8, 18731 }; 18732 /** 18733 * Default easing curve is a slightly shallower version of 18734 * the default browser easing curve. 18735 */ 18736 const ease = { 18737 type: "keyframes", 18738 ease: [0.25, 0.1, 0.35, 1], 18739 duration: 0.3, 18740 }; 18741 const getDefaultTransition = (valueKey, { keyframes }) => { 18742 if (keyframes.length > 2) { 18743 return keyframesTransition; 18744 } 18745 else if (transformProps.has(valueKey)) { 18746 return valueKey.startsWith("scale") 18747 ? criticallyDampedSpring(keyframes[1]) 18748 : underDampedSpring; 18749 } 18750 return ease; 18751 }; 18752 18753 18754 18755 ;// ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs 18756 /** 18757 * Decide whether a transition is defined on a given Transition. 18758 * This filters out orchestration options and returns true 18759 * if any options are left. 18760 */ 18761 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) { 18762 return !!Object.keys(transition).length; 18763 } 18764 function getValueTransition(transition, key) { 18765 return (transition[key] || 18766 transition["default"] || 18767 transition); 18768 } 18769 18770 18771 18772 ;// ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs 18773 const instantAnimationState = { 18774 current: false, 18775 }; 18776 18777 18778 18779 ;// ./node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs 18780 const isNotNull = (value) => value !== null; 18781 function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) { 18782 const resolvedKeyframes = keyframes.filter(isNotNull); 18783 const index = repeat && repeatType !== "loop" && repeat % 2 === 1 18784 ? 0 18785 : resolvedKeyframes.length - 1; 18786 return !index || finalKeyframe === undefined 18787 ? resolvedKeyframes[index] 18788 : finalKeyframe; 18789 } 18790 18791 18792 18793 ;// ./node_modules/framer-motion/dist/es/frameloop/sync-time.mjs 18794 18795 18796 18797 let now; 18798 function clearTime() { 18799 now = undefined; 18800 } 18801 /** 18802 * An eventloop-synchronous alternative to performance.now(). 18803 * 18804 * Ensures that time measurements remain consistent within a synchronous context. 18805 * Usually calling performance.now() twice within the same synchronous context 18806 * will return different values which isn't useful for animations when we're usually 18807 * trying to sync animations to the same frame. 18808 */ 18809 const time = { 18810 now: () => { 18811 if (now === undefined) { 18812 time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming 18813 ? frameData.timestamp 18814 : performance.now()); 18815 } 18816 return now; 18817 }, 18818 set: (newTime) => { 18819 now = newTime; 18820 queueMicrotask(clearTime); 18821 }, 18822 }; 18823 18824 18825 18826 ;// ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs 18827 /** 18828 * Check if the value is a zero value string like "0px" or "0%" 18829 */ 18830 const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v); 18831 18832 18833 18834 ;// ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs 18835 18836 18837 function isNone(value) { 18838 if (typeof value === "number") { 18839 return value === 0; 18840 } 18841 else if (value !== null) { 18842 return value === "none" || value === "0" || isZeroValueString(value); 18843 } 18844 else { 18845 return true; 18846 } 18847 } 18848 18849 18850 18851 ;// ./node_modules/framer-motion/dist/es/utils/errors.mjs 18852 18853 18854 let warning = noop_noop; 18855 let errors_invariant = noop_noop; 18856 if (false) {} 18857 18858 18859 18860 ;// ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs 18861 /** 18862 * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" 18863 */ 18864 const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v); 18865 18866 18867 18868 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs 18869 18870 18871 18872 18873 /** 18874 * Parse Framer's special CSS variable format into a CSS token and a fallback. 18875 * 18876 * ``` 18877 * `var(--foo, #fff)` => [`--foo`, '#fff'] 18878 * ``` 18879 * 18880 * @param current 18881 */ 18882 const splitCSSVariableRegex = 18883 // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words 18884 /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u; 18885 function parseCSSVariable(current) { 18886 const match = splitCSSVariableRegex.exec(current); 18887 if (!match) 18888 return [,]; 18889 const [, token1, token2, fallback] = match; 18890 return [`--$token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback]; 18891 } 18892 const maxDepth = 4; 18893 function getVariableValue(current, element, depth = 1) { 18894 errors_invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "$current}". This may indicate a circular fallback dependency.`); 18895 const [token, fallback] = parseCSSVariable(current); 18896 // No CSS variable detected 18897 if (!token) 18898 return; 18899 // Attempt to read this CSS variable off the element 18900 const resolved = window.getComputedStyle(element).getPropertyValue(token); 18901 if (resolved) { 18902 const trimmed = resolved.trim(); 18903 return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed; 18904 } 18905 return isCSSVariableToken(fallback) 18906 ? getVariableValue(fallback, element, depth + 1) 18907 : fallback; 18908 } 18909 18910 18911 18912 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs 18913 18914 18915 18916 18917 const positionalKeys = new Set([ 18918 "width", 18919 "height", 18920 "top", 18921 "left", 18922 "right", 18923 "bottom", 18924 "x", 18925 "y", 18926 "translateX", 18927 "translateY", 18928 ]); 18929 const isNumOrPxType = (v) => v === number || v === px; 18930 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]); 18931 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => { 18932 if (transform === "none" || !transform) 18933 return 0; 18934 const matrix3d = transform.match(/^matrix3d\((.+)\)$/u); 18935 if (matrix3d) { 18936 return getPosFromMatrix(matrix3d[1], pos3); 18937 } 18938 else { 18939 const matrix = transform.match(/^matrix\((.+)\)$/u); 18940 if (matrix) { 18941 return getPosFromMatrix(matrix[1], pos2); 18942 } 18943 else { 18944 return 0; 18945 } 18946 } 18947 }; 18948 const transformKeys = new Set(["x", "y", "z"]); 18949 const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key)); 18950 function removeNonTranslationalTransform(visualElement) { 18951 const removedTransforms = []; 18952 nonTranslationalTransformKeys.forEach((key) => { 18953 const value = visualElement.getValue(key); 18954 if (value !== undefined) { 18955 removedTransforms.push([key, value.get()]); 18956 value.set(key.startsWith("scale") ? 1 : 0); 18957 } 18958 }); 18959 return removedTransforms; 18960 } 18961 const positionalValues = { 18962 // Dimensions 18963 width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight), 18964 height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom), 18965 top: (_bbox, { top }) => parseFloat(top), 18966 left: (_bbox, { left }) => parseFloat(left), 18967 bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min), 18968 right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min), 18969 // Transform 18970 x: getTranslateFromMatrix(4, 13), 18971 y: getTranslateFromMatrix(5, 14), 18972 }; 18973 // Alias translate longform names 18974 positionalValues.translateX = positionalValues.x; 18975 positionalValues.translateY = positionalValues.y; 18976 18977 18978 18979 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs 18980 /** 18981 * Tests a provided value against a ValueType 18982 */ 18983 const testValueType = (v) => (type) => type.test(v); 18984 18985 18986 18987 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs 18988 /** 18989 * ValueType for "auto" 18990 */ 18991 const auto = { 18992 test: (v) => v === "auto", 18993 parse: (v) => v, 18994 }; 18995 18996 18997 18998 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs 18999 19000 19001 19002 19003 19004 /** 19005 * A list of value types commonly used for dimensions 19006 */ 19007 const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto]; 19008 /** 19009 * Tests a dimensional value against the list of dimension ValueTypes 19010 */ 19011 const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v)); 19012 19013 19014 19015 ;// ./node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs 19016 19017 19018 19019 const toResolve = new Set(); 19020 let isScheduled = false; 19021 let anyNeedsMeasurement = false; 19022 function measureAllKeyframes() { 19023 if (anyNeedsMeasurement) { 19024 const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement); 19025 const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element)); 19026 const transformsToRestore = new Map(); 19027 /** 19028 * Write pass 19029 * If we're measuring elements we want to remove bounding box-changing transforms. 19030 */ 19031 elementsToMeasure.forEach((element) => { 19032 const removedTransforms = removeNonTranslationalTransform(element); 19033 if (!removedTransforms.length) 19034 return; 19035 transformsToRestore.set(element, removedTransforms); 19036 element.render(); 19037 }); 19038 // Read 19039 resolversToMeasure.forEach((resolver) => resolver.measureInitialState()); 19040 // Write 19041 elementsToMeasure.forEach((element) => { 19042 element.render(); 19043 const restore = transformsToRestore.get(element); 19044 if (restore) { 19045 restore.forEach(([key, value]) => { 19046 var _a; 19047 (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value); 19048 }); 19049 } 19050 }); 19051 // Read 19052 resolversToMeasure.forEach((resolver) => resolver.measureEndState()); 19053 // Write 19054 resolversToMeasure.forEach((resolver) => { 19055 if (resolver.suspendedScrollY !== undefined) { 19056 window.scrollTo(0, resolver.suspendedScrollY); 19057 } 19058 }); 19059 } 19060 anyNeedsMeasurement = false; 19061 isScheduled = false; 19062 toResolve.forEach((resolver) => resolver.complete()); 19063 toResolve.clear(); 19064 } 19065 function readAllKeyframes() { 19066 toResolve.forEach((resolver) => { 19067 resolver.readKeyframes(); 19068 if (resolver.needsMeasurement) { 19069 anyNeedsMeasurement = true; 19070 } 19071 }); 19072 } 19073 function flushKeyframeResolvers() { 19074 readAllKeyframes(); 19075 measureAllKeyframes(); 19076 } 19077 class KeyframeResolver { 19078 constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) { 19079 /** 19080 * Track whether this resolver has completed. Once complete, it never 19081 * needs to attempt keyframe resolution again. 19082 */ 19083 this.isComplete = false; 19084 /** 19085 * Track whether this resolver is async. If it is, it'll be added to the 19086 * resolver queue and flushed in the next frame. Resolvers that aren't going 19087 * to trigger read/write thrashing don't need to be async. 19088 */ 19089 this.isAsync = false; 19090 /** 19091 * Track whether this resolver needs to perform a measurement 19092 * to resolve its keyframes. 19093 */ 19094 this.needsMeasurement = false; 19095 /** 19096 * Track whether this resolver is currently scheduled to resolve 19097 * to allow it to be cancelled and resumed externally. 19098 */ 19099 this.isScheduled = false; 19100 this.unresolvedKeyframes = [...unresolvedKeyframes]; 19101 this.onComplete = onComplete; 19102 this.name = name; 19103 this.motionValue = motionValue; 19104 this.element = element; 19105 this.isAsync = isAsync; 19106 } 19107 scheduleResolve() { 19108 this.isScheduled = true; 19109 if (this.isAsync) { 19110 toResolve.add(this); 19111 if (!isScheduled) { 19112 isScheduled = true; 19113 frame_frame.read(readAllKeyframes); 19114 frame_frame.resolveKeyframes(measureAllKeyframes); 19115 } 19116 } 19117 else { 19118 this.readKeyframes(); 19119 this.complete(); 19120 } 19121 } 19122 readKeyframes() { 19123 const { unresolvedKeyframes, name, element, motionValue } = this; 19124 /** 19125 * If a keyframe is null, we hydrate it either by reading it from 19126 * the instance, or propagating from previous keyframes. 19127 */ 19128 for (let i = 0; i < unresolvedKeyframes.length; i++) { 19129 if (unresolvedKeyframes[i] === null) { 19130 /** 19131 * If the first keyframe is null, we need to find its value by sampling the element 19132 */ 19133 if (i === 0) { 19134 const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get(); 19135 const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1]; 19136 if (currentValue !== undefined) { 19137 unresolvedKeyframes[0] = currentValue; 19138 } 19139 else if (element && name) { 19140 const valueAsRead = element.readValue(name, finalKeyframe); 19141 if (valueAsRead !== undefined && valueAsRead !== null) { 19142 unresolvedKeyframes[0] = valueAsRead; 19143 } 19144 } 19145 if (unresolvedKeyframes[0] === undefined) { 19146 unresolvedKeyframes[0] = finalKeyframe; 19147 } 19148 if (motionValue && currentValue === undefined) { 19149 motionValue.set(unresolvedKeyframes[0]); 19150 } 19151 } 19152 else { 19153 unresolvedKeyframes[i] = unresolvedKeyframes[i - 1]; 19154 } 19155 } 19156 } 19157 } 19158 setFinalKeyframe() { } 19159 measureInitialState() { } 19160 renderEndStyles() { } 19161 measureEndState() { } 19162 complete() { 19163 this.isComplete = true; 19164 this.onComplete(this.unresolvedKeyframes, this.finalKeyframe); 19165 toResolve.delete(this); 19166 } 19167 cancel() { 19168 if (!this.isComplete) { 19169 this.isScheduled = false; 19170 toResolve.delete(this); 19171 } 19172 } 19173 resume() { 19174 if (!this.isComplete) 19175 this.scheduleResolve(); 19176 } 19177 } 19178 19179 19180 19181 ;// ./node_modules/framer-motion/dist/es/value/types/color/utils.mjs 19182 19183 19184 /** 19185 * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000, 19186 * but false if a number or multiple colors 19187 */ 19188 const isColorString = (type, testProp) => (v) => { 19189 return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) || 19190 (testProp && Object.prototype.hasOwnProperty.call(v, testProp))); 19191 }; 19192 const splitColor = (aName, bName, cName) => (v) => { 19193 if (!isString(v)) 19194 return v; 19195 const [a, b, c, alpha] = v.match(floatRegex); 19196 return { 19197 [aName]: parseFloat(a), 19198 [bName]: parseFloat(b), 19199 [cName]: parseFloat(c), 19200 alpha: alpha !== undefined ? parseFloat(alpha) : 1, 19201 }; 19202 }; 19203 19204 19205 19206 ;// ./node_modules/framer-motion/dist/es/value/types/color/rgba.mjs 19207 19208 19209 19210 19211 19212 const clampRgbUnit = (v) => clamp_clamp(0, 255, v); 19213 const rgbUnit = { 19214 ...number, 19215 transform: (v) => Math.round(clampRgbUnit(v)), 19216 }; 19217 const rgba = { 19218 test: isColorString("rgb", "red"), 19219 parse: splitColor("red", "green", "blue"), 19220 transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + 19221 rgbUnit.transform(red) + 19222 ", " + 19223 rgbUnit.transform(green) + 19224 ", " + 19225 rgbUnit.transform(blue) + 19226 ", " + 19227 sanitize(alpha.transform(alpha$1)) + 19228 ")", 19229 }; 19230 19231 19232 19233 ;// ./node_modules/framer-motion/dist/es/value/types/color/hex.mjs 19234 19235 19236 19237 function parseHex(v) { 19238 let r = ""; 19239 let g = ""; 19240 let b = ""; 19241 let a = ""; 19242 // If we have 6 characters, ie #FF0000 19243 if (v.length > 5) { 19244 r = v.substring(1, 3); 19245 g = v.substring(3, 5); 19246 b = v.substring(5, 7); 19247 a = v.substring(7, 9); 19248 // Or we have 3 characters, ie #F00 19249 } 19250 else { 19251 r = v.substring(1, 2); 19252 g = v.substring(2, 3); 19253 b = v.substring(3, 4); 19254 a = v.substring(4, 5); 19255 r += r; 19256 g += g; 19257 b += b; 19258 a += a; 19259 } 19260 return { 19261 red: parseInt(r, 16), 19262 green: parseInt(g, 16), 19263 blue: parseInt(b, 16), 19264 alpha: a ? parseInt(a, 16) / 255 : 1, 19265 }; 19266 } 19267 const hex = { 19268 test: isColorString("#"), 19269 parse: parseHex, 19270 transform: rgba.transform, 19271 }; 19272 19273 19274 19275 ;// ./node_modules/framer-motion/dist/es/value/types/color/hsla.mjs 19276 19277 19278 19279 19280 19281 const hsla = { 19282 test: isColorString("hsl", "hue"), 19283 parse: splitColor("hue", "saturation", "lightness"), 19284 transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => { 19285 return ("hsla(" + 19286 Math.round(hue) + 19287 ", " + 19288 percent.transform(sanitize(saturation)) + 19289 ", " + 19290 percent.transform(sanitize(lightness)) + 19291 ", " + 19292 sanitize(alpha.transform(alpha$1)) + 19293 ")"); 19294 }, 19295 }; 19296 19297 19298 19299 ;// ./node_modules/framer-motion/dist/es/value/types/color/index.mjs 19300 19301 19302 19303 19304 19305 const color = { 19306 test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v), 19307 parse: (v) => { 19308 if (rgba.test(v)) { 19309 return rgba.parse(v); 19310 } 19311 else if (hsla.test(v)) { 19312 return hsla.parse(v); 19313 } 19314 else { 19315 return hex.parse(v); 19316 } 19317 }, 19318 transform: (v) => { 19319 return isString(v) 19320 ? v 19321 : v.hasOwnProperty("red") 19322 ? rgba.transform(v) 19323 : hsla.transform(v); 19324 }, 19325 }; 19326 19327 19328 19329 ;// ./node_modules/framer-motion/dist/es/value/types/complex/index.mjs 19330 19331 19332 19333 function test(v) { 19334 var _a, _b; 19335 return (isNaN(v) && 19336 isString(v) && 19337 (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + 19338 (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 19339 0); 19340 } 19341 const NUMBER_TOKEN = "number"; 19342 const COLOR_TOKEN = "color"; 19343 const VAR_TOKEN = "var"; 19344 const VAR_FUNCTION_TOKEN = "var("; 19345 const SPLIT_TOKEN = "${}"; 19346 // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex` 19347 const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu; 19348 function analyseComplexValue(value) { 19349 const originalValue = value.toString(); 19350 const values = []; 19351 const indexes = { 19352 color: [], 19353 number: [], 19354 var: [], 19355 }; 19356 const types = []; 19357 let i = 0; 19358 const tokenised = originalValue.replace(complexRegex, (parsedValue) => { 19359 if (color.test(parsedValue)) { 19360 indexes.color.push(i); 19361 types.push(COLOR_TOKEN); 19362 values.push(color.parse(parsedValue)); 19363 } 19364 else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) { 19365 indexes.var.push(i); 19366 types.push(VAR_TOKEN); 19367 values.push(parsedValue); 19368 } 19369 else { 19370 indexes.number.push(i); 19371 types.push(NUMBER_TOKEN); 19372 values.push(parseFloat(parsedValue)); 19373 } 19374 ++i; 19375 return SPLIT_TOKEN; 19376 }); 19377 const split = tokenised.split(SPLIT_TOKEN); 19378 return { values, split, indexes, types }; 19379 } 19380 function parseComplexValue(v) { 19381 return analyseComplexValue(v).values; 19382 } 19383 function createTransformer(source) { 19384 const { split, types } = analyseComplexValue(source); 19385 const numSections = split.length; 19386 return (v) => { 19387 let output = ""; 19388 for (let i = 0; i < numSections; i++) { 19389 output += split[i]; 19390 if (v[i] !== undefined) { 19391 const type = types[i]; 19392 if (type === NUMBER_TOKEN) { 19393 output += sanitize(v[i]); 19394 } 19395 else if (type === COLOR_TOKEN) { 19396 output += color.transform(v[i]); 19397 } 19398 else { 19399 output += v[i]; 19400 } 19401 } 19402 } 19403 return output; 19404 }; 19405 } 19406 const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v; 19407 function getAnimatableNone(v) { 19408 const parsed = parseComplexValue(v); 19409 const transformer = createTransformer(v); 19410 return transformer(parsed.map(convertNumbersToZero)); 19411 } 19412 const complex = { 19413 test, 19414 parse: parseComplexValue, 19415 createTransformer, 19416 getAnimatableNone, 19417 }; 19418 19419 19420 19421 ;// ./node_modules/framer-motion/dist/es/value/types/complex/filter.mjs 19422 19423 19424 19425 /** 19426 * Properties that should default to 1 or 100% 19427 */ 19428 const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]); 19429 function applyDefaultFilter(v) { 19430 const [name, value] = v.slice(0, -1).split("("); 19431 if (name === "drop-shadow") 19432 return v; 19433 const [number] = value.match(floatRegex) || []; 19434 if (!number) 19435 return v; 19436 const unit = value.replace(number, ""); 19437 let defaultValue = maxDefaults.has(name) ? 1 : 0; 19438 if (number !== value) 19439 defaultValue *= 100; 19440 return name + "(" + defaultValue + unit + ")"; 19441 } 19442 const functionRegex = /\b([a-z-]*)\(.*?\)/gu; 19443 const filter = { 19444 ...complex, 19445 getAnimatableNone: (v) => { 19446 const functions = v.match(functionRegex); 19447 return functions ? functions.map(applyDefaultFilter).join(" ") : v; 19448 }, 19449 }; 19450 19451 19452 19453 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs 19454 19455 19456 19457 19458 /** 19459 * A map of default value types for common values 19460 */ 19461 const defaultValueTypes = { 19462 ...numberValueTypes, 19463 // Color props 19464 color: color, 19465 backgroundColor: color, 19466 outlineColor: color, 19467 fill: color, 19468 stroke: color, 19469 // Border props 19470 borderColor: color, 19471 borderTopColor: color, 19472 borderRightColor: color, 19473 borderBottomColor: color, 19474 borderLeftColor: color, 19475 filter: filter, 19476 WebkitFilter: filter, 19477 }; 19478 /** 19479 * Gets the default ValueType for the provided value key 19480 */ 19481 const getDefaultValueType = (key) => defaultValueTypes[key]; 19482 19483 19484 19485 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs 19486 19487 19488 19489 19490 function animatable_none_getAnimatableNone(key, value) { 19491 let defaultValueType = getDefaultValueType(key); 19492 if (defaultValueType !== filter) 19493 defaultValueType = complex; 19494 // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target 19495 return defaultValueType.getAnimatableNone 19496 ? defaultValueType.getAnimatableNone(value) 19497 : undefined; 19498 } 19499 19500 19501 19502 ;// ./node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs 19503 19504 19505 19506 /** 19507 * If we encounter keyframes like "none" or "0" and we also have keyframes like 19508 * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for 19509 * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into 19510 * zero equivalents, i.e. "#fff0" or "0px 0px". 19511 */ 19512 const invalidTemplates = new Set(["auto", "none", "0"]); 19513 function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) { 19514 let i = 0; 19515 let animatableTemplate = undefined; 19516 while (i < unresolvedKeyframes.length && !animatableTemplate) { 19517 const keyframe = unresolvedKeyframes[i]; 19518 if (typeof keyframe === "string" && 19519 !invalidTemplates.has(keyframe) && 19520 analyseComplexValue(keyframe).values.length) { 19521 animatableTemplate = unresolvedKeyframes[i]; 19522 } 19523 i++; 19524 } 19525 if (animatableTemplate && name) { 19526 for (const noneIndex of noneKeyframeIndexes) { 19527 unresolvedKeyframes[noneIndex] = animatable_none_getAnimatableNone(name, animatableTemplate); 19528 } 19529 } 19530 } 19531 19532 19533 19534 ;// ./node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs 19535 19536 19537 19538 19539 19540 19541 19542 19543 class DOMKeyframesResolver extends KeyframeResolver { 19544 constructor(unresolvedKeyframes, onComplete, name, motionValue) { 19545 super(unresolvedKeyframes, onComplete, name, motionValue, motionValue === null || motionValue === void 0 ? void 0 : motionValue.owner, true); 19546 } 19547 readKeyframes() { 19548 const { unresolvedKeyframes, element, name } = this; 19549 if (!element.current) 19550 return; 19551 super.readKeyframes(); 19552 /** 19553 * If any keyframe is a CSS variable, we need to find its value by sampling the element 19554 */ 19555 for (let i = 0; i < unresolvedKeyframes.length; i++) { 19556 const keyframe = unresolvedKeyframes[i]; 19557 if (typeof keyframe === "string" && isCSSVariableToken(keyframe)) { 19558 const resolved = getVariableValue(keyframe, element.current); 19559 if (resolved !== undefined) { 19560 unresolvedKeyframes[i] = resolved; 19561 } 19562 if (i === unresolvedKeyframes.length - 1) { 19563 this.finalKeyframe = keyframe; 19564 } 19565 } 19566 } 19567 /** 19568 * Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes. 19569 * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which 19570 * have a far bigger performance impact. 19571 */ 19572 this.resolveNoneKeyframes(); 19573 /** 19574 * Check to see if unit type has changed. If so schedule jobs that will 19575 * temporarily set styles to the destination keyframes. 19576 * Skip if we have more than two keyframes or this isn't a positional value. 19577 * TODO: We can throw if there are multiple keyframes and the value type changes. 19578 */ 19579 if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) { 19580 return; 19581 } 19582 const [origin, target] = unresolvedKeyframes; 19583 const originType = findDimensionValueType(origin); 19584 const targetType = findDimensionValueType(target); 19585 /** 19586 * Either we don't recognise these value types or we can animate between them. 19587 */ 19588 if (originType === targetType) 19589 return; 19590 /** 19591 * If both values are numbers or pixels, we can animate between them by 19592 * converting them to numbers. 19593 */ 19594 if (isNumOrPxType(originType) && isNumOrPxType(targetType)) { 19595 for (let i = 0; i < unresolvedKeyframes.length; i++) { 19596 const value = unresolvedKeyframes[i]; 19597 if (typeof value === "string") { 19598 unresolvedKeyframes[i] = parseFloat(value); 19599 } 19600 } 19601 } 19602 else { 19603 /** 19604 * Else, the only way to resolve this is by measuring the element. 19605 */ 19606 this.needsMeasurement = true; 19607 } 19608 } 19609 resolveNoneKeyframes() { 19610 const { unresolvedKeyframes, name } = this; 19611 const noneKeyframeIndexes = []; 19612 for (let i = 0; i < unresolvedKeyframes.length; i++) { 19613 if (isNone(unresolvedKeyframes[i])) { 19614 noneKeyframeIndexes.push(i); 19615 } 19616 } 19617 if (noneKeyframeIndexes.length) { 19618 makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name); 19619 } 19620 } 19621 measureInitialState() { 19622 const { element, unresolvedKeyframes, name } = this; 19623 if (!element.current) 19624 return; 19625 if (name === "height") { 19626 this.suspendedScrollY = window.pageYOffset; 19627 } 19628 this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)); 19629 unresolvedKeyframes[0] = this.measuredOrigin; 19630 // Set final key frame to measure after next render 19631 const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1]; 19632 if (measureKeyframe !== undefined) { 19633 element.getValue(name, measureKeyframe).jump(measureKeyframe, false); 19634 } 19635 } 19636 measureEndState() { 19637 var _a; 19638 const { element, name, unresolvedKeyframes } = this; 19639 if (!element.current) 19640 return; 19641 const value = element.getValue(name); 19642 value && value.jump(this.measuredOrigin, false); 19643 const finalKeyframeIndex = unresolvedKeyframes.length - 1; 19644 const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex]; 19645 unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)); 19646 if (finalKeyframe !== null && this.finalKeyframe === undefined) { 19647 this.finalKeyframe = finalKeyframe; 19648 } 19649 // If we removed transform values, reapply them before the next render 19650 if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) { 19651 this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => { 19652 element 19653 .getValue(unsetTransformName) 19654 .set(unsetTransformValue); 19655 }); 19656 } 19657 this.resolveNoneKeyframes(); 19658 } 19659 } 19660 19661 19662 19663 ;// ./node_modules/framer-motion/dist/es/utils/memo.mjs 19664 function memo(callback) { 19665 let result; 19666 return () => { 19667 if (result === undefined) 19668 result = callback(); 19669 return result; 19670 }; 19671 } 19672 19673 19674 19675 ;// ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs 19676 19677 19678 /** 19679 * Check if a value is animatable. Examples: 19680 * 19681 * ✅: 100, "100px", "#fff" 19682 * ❌: "block", "url(2.jpg)" 19683 * @param value 19684 * 19685 * @internal 19686 */ 19687 const isAnimatable = (value, name) => { 19688 // If the list of keys tat might be non-animatable grows, replace with Set 19689 if (name === "zIndex") 19690 return false; 19691 // If it's a number or a keyframes array, we can animate it. We might at some point 19692 // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, 19693 // but for now lets leave it like this for performance reasons 19694 if (typeof value === "number" || Array.isArray(value)) 19695 return true; 19696 if (typeof value === "string" && // It's animatable if we have a string 19697 (complex.test(value) || value === "0") && // And it contains numbers and/or colors 19698 !value.startsWith("url(") // Unless it starts with "url(" 19699 ) { 19700 return true; 19701 } 19702 return false; 19703 }; 19704 19705 19706 19707 ;// ./node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs 19708 19709 19710 19711 function hasKeyframesChanged(keyframes) { 19712 const current = keyframes[0]; 19713 if (keyframes.length === 1) 19714 return true; 19715 for (let i = 0; i < keyframes.length; i++) { 19716 if (keyframes[i] !== current) 19717 return true; 19718 } 19719 } 19720 function canAnimate(keyframes, name, type, velocity) { 19721 /** 19722 * Check if we're able to animate between the start and end keyframes, 19723 * and throw a warning if we're attempting to animate between one that's 19724 * animatable and another that isn't. 19725 */ 19726 const originKeyframe = keyframes[0]; 19727 if (originKeyframe === null) 19728 return false; 19729 /** 19730 * These aren't traditionally animatable but we do support them. 19731 * In future we could look into making this more generic or replacing 19732 * this function with mix() === mixImmediate 19733 */ 19734 if (name === "display" || name === "visibility") 19735 return true; 19736 const targetKeyframe = keyframes[keyframes.length - 1]; 19737 const isOriginAnimatable = isAnimatable(originKeyframe, name); 19738 const isTargetAnimatable = isAnimatable(targetKeyframe, name); 19739 warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate $name} from "$originKeyframe}" to "$targetKeyframe}". $originKeyframe} is not an animatable value - to enable this animation set $originKeyframe} to a value animatable to $targetKeyframe} via the \`style\` property.`); 19740 // Always skip if any of these are true 19741 if (!isOriginAnimatable || !isTargetAnimatable) { 19742 return false; 19743 } 19744 return hasKeyframesChanged(keyframes) || (type === "spring" && velocity); 19745 } 19746 19747 19748 19749 ;// ./node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs 19750 19751 19752 19753 19754 19755 class BaseAnimation { 19756 constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) { 19757 // Track whether the animation has been stopped. Stopped animations won't restart. 19758 this.isStopped = false; 19759 this.hasAttemptedResolve = false; 19760 this.options = { 19761 autoplay, 19762 delay, 19763 type, 19764 repeat, 19765 repeatDelay, 19766 repeatType, 19767 ...options, 19768 }; 19769 this.updateFinishedPromise(); 19770 } 19771 /** 19772 * A getter for resolved data. If keyframes are not yet resolved, accessing 19773 * this.resolved will synchronously flush all pending keyframe resolvers. 19774 * This is a deoptimisation, but at its worst still batches read/writes. 19775 */ 19776 get resolved() { 19777 if (!this._resolved && !this.hasAttemptedResolve) { 19778 flushKeyframeResolvers(); 19779 } 19780 return this._resolved; 19781 } 19782 /** 19783 * A method to be called when the keyframes resolver completes. This method 19784 * will check if its possible to run the animation and, if not, skip it. 19785 * Otherwise, it will call initPlayback on the implementing class. 19786 */ 19787 onKeyframesResolved(keyframes, finalKeyframe) { 19788 this.hasAttemptedResolve = true; 19789 const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options; 19790 /** 19791 * If we can't animate this value with the resolved keyframes 19792 * then we should complete it immediately. 19793 */ 19794 if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) { 19795 // Finish immediately 19796 if (instantAnimationState.current || !delay) { 19797 onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe)); 19798 onComplete === null || onComplete === void 0 ? void 0 : onComplete(); 19799 this.resolveFinishedPromise(); 19800 return; 19801 } 19802 // Finish after a delay 19803 else { 19804 this.options.duration = 0; 19805 } 19806 } 19807 const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe); 19808 if (resolvedAnimation === false) 19809 return; 19810 this._resolved = { 19811 keyframes, 19812 finalKeyframe, 19813 ...resolvedAnimation, 19814 }; 19815 this.onPostResolved(); 19816 } 19817 onPostResolved() { } 19818 /** 19819 * Allows the returned animation to be awaited or promise-chained. Currently 19820 * resolves when the animation finishes at all but in a future update could/should 19821 * reject if its cancels. 19822 */ 19823 then(resolve, reject) { 19824 return this.currentFinishedPromise.then(resolve, reject); 19825 } 19826 updateFinishedPromise() { 19827 this.currentFinishedPromise = new Promise((resolve) => { 19828 this.resolveFinishedPromise = resolve; 19829 }); 19830 } 19831 } 19832 19833 19834 19835 ;// ./node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs 19836 /* 19837 Convert velocity into velocity per second 19838 19839 @param [number]: Unit per frame 19840 @param [number]: Frame duration in ms 19841 */ 19842 function velocityPerSecond(velocity, frameDuration) { 19843 return frameDuration ? velocity * (1000 / frameDuration) : 0; 19844 } 19845 19846 19847 19848 ;// ./node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs 19849 19850 19851 const velocitySampleDuration = 5; // ms 19852 function calcGeneratorVelocity(resolveValue, t, current) { 19853 const prevT = Math.max(t - velocitySampleDuration, 0); 19854 return velocityPerSecond(current - resolveValue(prevT), t - prevT); 19855 } 19856 19857 19858 19859 ;// ./node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs 19860 19861 19862 19863 19864 const safeMin = 0.001; 19865 const minDuration = 0.01; 19866 const maxDuration = 10.0; 19867 const minDamping = 0.05; 19868 const maxDamping = 1; 19869 function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) { 19870 let envelope; 19871 let derivative; 19872 warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less"); 19873 let dampingRatio = 1 - bounce; 19874 /** 19875 * Restrict dampingRatio and duration to within acceptable ranges. 19876 */ 19877 dampingRatio = clamp_clamp(minDamping, maxDamping, dampingRatio); 19878 duration = clamp_clamp(minDuration, maxDuration, millisecondsToSeconds(duration)); 19879 if (dampingRatio < 1) { 19880 /** 19881 * Underdamped spring 19882 */ 19883 envelope = (undampedFreq) => { 19884 const exponentialDecay = undampedFreq * dampingRatio; 19885 const delta = exponentialDecay * duration; 19886 const a = exponentialDecay - velocity; 19887 const b = calcAngularFreq(undampedFreq, dampingRatio); 19888 const c = Math.exp(-delta); 19889 return safeMin - (a / b) * c; 19890 }; 19891 derivative = (undampedFreq) => { 19892 const exponentialDecay = undampedFreq * dampingRatio; 19893 const delta = exponentialDecay * duration; 19894 const d = delta * velocity + velocity; 19895 const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration; 19896 const f = Math.exp(-delta); 19897 const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio); 19898 const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1; 19899 return (factor * ((d - e) * f)) / g; 19900 }; 19901 } 19902 else { 19903 /** 19904 * Critically-damped spring 19905 */ 19906 envelope = (undampedFreq) => { 19907 const a = Math.exp(-undampedFreq * duration); 19908 const b = (undampedFreq - velocity) * duration + 1; 19909 return -safeMin + a * b; 19910 }; 19911 derivative = (undampedFreq) => { 19912 const a = Math.exp(-undampedFreq * duration); 19913 const b = (velocity - undampedFreq) * (duration * duration); 19914 return a * b; 19915 }; 19916 } 19917 const initialGuess = 5 / duration; 19918 const undampedFreq = approximateRoot(envelope, derivative, initialGuess); 19919 duration = secondsToMilliseconds(duration); 19920 if (isNaN(undampedFreq)) { 19921 return { 19922 stiffness: 100, 19923 damping: 10, 19924 duration, 19925 }; 19926 } 19927 else { 19928 const stiffness = Math.pow(undampedFreq, 2) * mass; 19929 return { 19930 stiffness, 19931 damping: dampingRatio * 2 * Math.sqrt(mass * stiffness), 19932 duration, 19933 }; 19934 } 19935 } 19936 const rootIterations = 12; 19937 function approximateRoot(envelope, derivative, initialGuess) { 19938 let result = initialGuess; 19939 for (let i = 1; i < rootIterations; i++) { 19940 result = result - envelope(result) / derivative(result); 19941 } 19942 return result; 19943 } 19944 function calcAngularFreq(undampedFreq, dampingRatio) { 19945 return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio); 19946 } 19947 19948 19949 19950 ;// ./node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs 19951 19952 19953 19954 19955 const durationKeys = ["duration", "bounce"]; 19956 const physicsKeys = ["stiffness", "damping", "mass"]; 19957 function isSpringType(options, keys) { 19958 return keys.some((key) => options[key] !== undefined); 19959 } 19960 function getSpringOptions(options) { 19961 let springOptions = { 19962 velocity: 0.0, 19963 stiffness: 100, 19964 damping: 10, 19965 mass: 1.0, 19966 isResolvedFromDuration: false, 19967 ...options, 19968 }; 19969 // stiffness/damping/mass overrides duration/bounce 19970 if (!isSpringType(options, physicsKeys) && 19971 isSpringType(options, durationKeys)) { 19972 const derived = findSpring(options); 19973 springOptions = { 19974 ...springOptions, 19975 ...derived, 19976 mass: 1.0, 19977 }; 19978 springOptions.isResolvedFromDuration = true; 19979 } 19980 return springOptions; 19981 } 19982 function spring({ keyframes, restDelta, restSpeed, ...options }) { 19983 const origin = keyframes[0]; 19984 const target = keyframes[keyframes.length - 1]; 19985 /** 19986 * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator 19987 * to reduce GC during animation. 19988 */ 19989 const state = { done: false, value: origin }; 19990 const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({ 19991 ...options, 19992 velocity: -millisecondsToSeconds(options.velocity || 0), 19993 }); 19994 const initialVelocity = velocity || 0.0; 19995 const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass)); 19996 const initialDelta = target - origin; 19997 const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass)); 19998 /** 19999 * If we're working on a granular scale, use smaller defaults for determining 20000 * when the spring is finished. 20001 * 20002 * These defaults have been selected emprically based on what strikes a good 20003 * ratio between feeling good and finishing as soon as changes are imperceptible. 20004 */ 20005 const isGranularScale = Math.abs(initialDelta) < 5; 20006 restSpeed || (restSpeed = isGranularScale ? 0.01 : 2); 20007 restDelta || (restDelta = isGranularScale ? 0.005 : 0.5); 20008 let resolveSpring; 20009 if (dampingRatio < 1) { 20010 const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio); 20011 // Underdamped spring 20012 resolveSpring = (t) => { 20013 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 20014 return (target - 20015 envelope * 20016 (((initialVelocity + 20017 dampingRatio * undampedAngularFreq * initialDelta) / 20018 angularFreq) * 20019 Math.sin(angularFreq * t) + 20020 initialDelta * Math.cos(angularFreq * t))); 20021 }; 20022 } 20023 else if (dampingRatio === 1) { 20024 // Critically damped spring 20025 resolveSpring = (t) => target - 20026 Math.exp(-undampedAngularFreq * t) * 20027 (initialDelta + 20028 (initialVelocity + undampedAngularFreq * initialDelta) * t); 20029 } 20030 else { 20031 // Overdamped spring 20032 const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1); 20033 resolveSpring = (t) => { 20034 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 20035 // When performing sinh or cosh values can hit Infinity so we cap them here 20036 const freqForT = Math.min(dampedAngularFreq * t, 300); 20037 return (target - 20038 (envelope * 20039 ((initialVelocity + 20040 dampingRatio * undampedAngularFreq * initialDelta) * 20041 Math.sinh(freqForT) + 20042 dampedAngularFreq * 20043 initialDelta * 20044 Math.cosh(freqForT))) / 20045 dampedAngularFreq); 20046 }; 20047 } 20048 return { 20049 calculatedDuration: isResolvedFromDuration ? duration || null : null, 20050 next: (t) => { 20051 const current = resolveSpring(t); 20052 if (!isResolvedFromDuration) { 20053 let currentVelocity = initialVelocity; 20054 if (t !== 0) { 20055 /** 20056 * We only need to calculate velocity for under-damped springs 20057 * as over- and critically-damped springs can't overshoot, so 20058 * checking only for displacement is enough. 20059 */ 20060 if (dampingRatio < 1) { 20061 currentVelocity = calcGeneratorVelocity(resolveSpring, t, current); 20062 } 20063 else { 20064 currentVelocity = 0; 20065 } 20066 } 20067 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed; 20068 const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta; 20069 state.done = 20070 isBelowVelocityThreshold && isBelowDisplacementThreshold; 20071 } 20072 else { 20073 state.done = t >= duration; 20074 } 20075 state.value = state.done ? target : current; 20076 return state; 20077 }, 20078 }; 20079 } 20080 20081 20082 20083 ;// ./node_modules/framer-motion/dist/es/animation/generators/inertia.mjs 20084 20085 20086 20087 function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) { 20088 const origin = keyframes[0]; 20089 const state = { 20090 done: false, 20091 value: origin, 20092 }; 20093 const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max); 20094 const nearestBoundary = (v) => { 20095 if (min === undefined) 20096 return max; 20097 if (max === undefined) 20098 return min; 20099 return Math.abs(min - v) < Math.abs(max - v) ? min : max; 20100 }; 20101 let amplitude = power * velocity; 20102 const ideal = origin + amplitude; 20103 const target = modifyTarget === undefined ? ideal : modifyTarget(ideal); 20104 /** 20105 * If the target has changed we need to re-calculate the amplitude, otherwise 20106 * the animation will start from the wrong position. 20107 */ 20108 if (target !== ideal) 20109 amplitude = target - origin; 20110 const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant); 20111 const calcLatest = (t) => target + calcDelta(t); 20112 const applyFriction = (t) => { 20113 const delta = calcDelta(t); 20114 const latest = calcLatest(t); 20115 state.done = Math.abs(delta) <= restDelta; 20116 state.value = state.done ? target : latest; 20117 }; 20118 /** 20119 * Ideally this would resolve for t in a stateless way, we could 20120 * do that by always precalculating the animation but as we know 20121 * this will be done anyway we can assume that spring will 20122 * be discovered during that. 20123 */ 20124 let timeReachedBoundary; 20125 let spring$1; 20126 const checkCatchBoundary = (t) => { 20127 if (!isOutOfBounds(state.value)) 20128 return; 20129 timeReachedBoundary = t; 20130 spring$1 = spring({ 20131 keyframes: [state.value, nearestBoundary(state.value)], 20132 velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000 20133 damping: bounceDamping, 20134 stiffness: bounceStiffness, 20135 restDelta, 20136 restSpeed, 20137 }); 20138 }; 20139 checkCatchBoundary(0); 20140 return { 20141 calculatedDuration: null, 20142 next: (t) => { 20143 /** 20144 * We need to resolve the friction to figure out if we need a 20145 * spring but we don't want to do this twice per frame. So here 20146 * we flag if we updated for this frame and later if we did 20147 * we can skip doing it again. 20148 */ 20149 let hasUpdatedFrame = false; 20150 if (!spring$1 && timeReachedBoundary === undefined) { 20151 hasUpdatedFrame = true; 20152 applyFriction(t); 20153 checkCatchBoundary(t); 20154 } 20155 /** 20156 * If we have a spring and the provided t is beyond the moment the friction 20157 * animation crossed the min/max boundary, use the spring. 20158 */ 20159 if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) { 20160 return spring$1.next(t - timeReachedBoundary); 20161 } 20162 else { 20163 !hasUpdatedFrame && applyFriction(t); 20164 return state; 20165 } 20166 }, 20167 }; 20168 } 20169 20170 20171 20172 ;// ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs 20173 20174 20175 /* 20176 Bezier function generator 20177 This has been modified from Gaëtan Renaudeau's BezierEasing 20178 https://github.com/gre/bezier-easing/blob/master/src/index.js 20179 https://github.com/gre/bezier-easing/blob/master/LICENSE 20180 20181 I've removed the newtonRaphsonIterate algo because in benchmarking it 20182 wasn't noticiably faster than binarySubdivision, indeed removing it 20183 usually improved times, depending on the curve. 20184 I also removed the lookup table, as for the added bundle size and loop we're 20185 only cutting ~4 or so subdivision iterations. I bumped the max iterations up 20186 to 12 to compensate and this still tended to be faster for no perceivable 20187 loss in accuracy. 20188 Usage 20189 const easeOut = cubicBezier(.17,.67,.83,.67); 20190 const x = easeOut(0.5); // returns 0.627... 20191 */ 20192 // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. 20193 const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * 20194 t; 20195 const subdivisionPrecision = 0.0000001; 20196 const subdivisionMaxIterations = 12; 20197 function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) { 20198 let currentX; 20199 let currentT; 20200 let i = 0; 20201 do { 20202 currentT = lowerBound + (upperBound - lowerBound) / 2.0; 20203 currentX = calcBezier(currentT, mX1, mX2) - x; 20204 if (currentX > 0.0) { 20205 upperBound = currentT; 20206 } 20207 else { 20208 lowerBound = currentT; 20209 } 20210 } while (Math.abs(currentX) > subdivisionPrecision && 20211 ++i < subdivisionMaxIterations); 20212 return currentT; 20213 } 20214 function cubicBezier(mX1, mY1, mX2, mY2) { 20215 // If this is a linear gradient, return linear easing 20216 if (mX1 === mY1 && mX2 === mY2) 20217 return noop_noop; 20218 const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2); 20219 // If animation is at start/end, return t without easing 20220 return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2); 20221 } 20222 20223 20224 20225 ;// ./node_modules/framer-motion/dist/es/easing/ease.mjs 20226 20227 20228 const easeIn = cubicBezier(0.42, 0, 1, 1); 20229 const easeOut = cubicBezier(0, 0, 0.58, 1); 20230 const easeInOut = cubicBezier(0.42, 0, 0.58, 1); 20231 20232 20233 20234 ;// ./node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs 20235 const isEasingArray = (ease) => { 20236 return Array.isArray(ease) && typeof ease[0] !== "number"; 20237 }; 20238 20239 20240 20241 ;// ./node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs 20242 // Accepts an easing function and returns a new one that outputs mirrored values for 20243 // the second half of the animation. Turns easeIn into easeInOut. 20244 const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2; 20245 20246 20247 20248 ;// ./node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs 20249 // Accepts an easing function and returns a new one that outputs reversed values. 20250 // Turns easeIn into easeOut. 20251 const reverseEasing = (easing) => (p) => 1 - easing(1 - p); 20252 20253 20254 20255 ;// ./node_modules/framer-motion/dist/es/easing/circ.mjs 20256 20257 20258 20259 const circIn = (p) => 1 - Math.sin(Math.acos(p)); 20260 const circOut = reverseEasing(circIn); 20261 const circInOut = mirrorEasing(circIn); 20262 20263 20264 20265 ;// ./node_modules/framer-motion/dist/es/easing/back.mjs 20266 20267 20268 20269 20270 const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99); 20271 const backIn = reverseEasing(backOut); 20272 const backInOut = mirrorEasing(backIn); 20273 20274 20275 20276 ;// ./node_modules/framer-motion/dist/es/easing/anticipate.mjs 20277 20278 20279 const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); 20280 20281 20282 20283 ;// ./node_modules/framer-motion/dist/es/easing/utils/map.mjs 20284 20285 20286 20287 20288 20289 20290 20291 20292 const easingLookup = { 20293 linear: noop_noop, 20294 easeIn: easeIn, 20295 easeInOut: easeInOut, 20296 easeOut: easeOut, 20297 circIn: circIn, 20298 circInOut: circInOut, 20299 circOut: circOut, 20300 backIn: backIn, 20301 backInOut: backInOut, 20302 backOut: backOut, 20303 anticipate: anticipate, 20304 }; 20305 const easingDefinitionToFunction = (definition) => { 20306 if (Array.isArray(definition)) { 20307 // If cubic bezier definition, create bezier curve 20308 errors_invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`); 20309 const [x1, y1, x2, y2] = definition; 20310 return cubicBezier(x1, y1, x2, y2); 20311 } 20312 else if (typeof definition === "string") { 20313 // Else lookup from table 20314 errors_invariant(easingLookup[definition] !== undefined, `Invalid easing type '$definition}'`); 20315 return easingLookup[definition]; 20316 } 20317 return definition; 20318 }; 20319 20320 20321 20322 ;// ./node_modules/framer-motion/dist/es/utils/progress.mjs 20323 /* 20324 Progress within given range 20325 20326 Given a lower limit and an upper limit, we return the progress 20327 (expressed as a number 0-1) represented by the given value, and 20328 limit that progress to within 0-1. 20329 20330 @param [number]: Lower limit 20331 @param [number]: Upper limit 20332 @param [number]: Value to find progress within given range 20333 @return [number]: Progress of value within range as expressed 0-1 20334 */ 20335 const progress = (from, to, value) => { 20336 const toFromDifference = to - from; 20337 return toFromDifference === 0 ? 1 : (value - from) / toFromDifference; 20338 }; 20339 20340 20341 20342 ;// ./node_modules/framer-motion/dist/es/utils/mix/number.mjs 20343 /* 20344 Value in range from progress 20345 20346 Given a lower limit and an upper limit, we return the value within 20347 that range as expressed by progress (usually a number from 0 to 1) 20348 20349 So progress = 0.5 would change 20350 20351 from -------- to 20352 20353 to 20354 20355 from ---- to 20356 20357 E.g. from = 10, to = 20, progress = 0.5 => 15 20358 20359 @param [number]: Lower limit of range 20360 @param [number]: Upper limit of range 20361 @param [number]: The progress between lower and upper limits expressed 0-1 20362 @return [number]: Value as calculated from progress within range (not limited within range) 20363 */ 20364 const mixNumber = (from, to, progress) => { 20365 return from + (to - from) * progress; 20366 }; 20367 20368 20369 20370 ;// ./node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs 20371 // Adapted from https://gist.github.com/mjackson/5311256 20372 function hueToRgb(p, q, t) { 20373 if (t < 0) 20374 t += 1; 20375 if (t > 1) 20376 t -= 1; 20377 if (t < 1 / 6) 20378 return p + (q - p) * 6 * t; 20379 if (t < 1 / 2) 20380 return q; 20381 if (t < 2 / 3) 20382 return p + (q - p) * (2 / 3 - t) * 6; 20383 return p; 20384 } 20385 function hslaToRgba({ hue, saturation, lightness, alpha }) { 20386 hue /= 360; 20387 saturation /= 100; 20388 lightness /= 100; 20389 let red = 0; 20390 let green = 0; 20391 let blue = 0; 20392 if (!saturation) { 20393 red = green = blue = lightness; 20394 } 20395 else { 20396 const q = lightness < 0.5 20397 ? lightness * (1 + saturation) 20398 : lightness + saturation - lightness * saturation; 20399 const p = 2 * lightness - q; 20400 red = hueToRgb(p, q, hue + 1 / 3); 20401 green = hueToRgb(p, q, hue); 20402 blue = hueToRgb(p, q, hue - 1 / 3); 20403 } 20404 return { 20405 red: Math.round(red * 255), 20406 green: Math.round(green * 255), 20407 blue: Math.round(blue * 255), 20408 alpha, 20409 }; 20410 } 20411 20412 20413 20414 ;// ./node_modules/framer-motion/dist/es/utils/mix/color.mjs 20415 20416 20417 20418 20419 20420 20421 20422 // Linear color space blending 20423 // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw 20424 // Demonstrated http://codepen.io/osublake/pen/xGVVaN 20425 const mixLinearColor = (from, to, v) => { 20426 const fromExpo = from * from; 20427 const expo = v * (to * to - fromExpo) + fromExpo; 20428 return expo < 0 ? 0 : Math.sqrt(expo); 20429 }; 20430 const colorTypes = [hex, rgba, hsla]; 20431 const getColorType = (v) => colorTypes.find((type) => type.test(v)); 20432 function asRGBA(color) { 20433 const type = getColorType(color); 20434 errors_invariant(Boolean(type), `'$color}' is not an animatable color. Use the equivalent color code instead.`); 20435 let model = type.parse(color); 20436 if (type === hsla) { 20437 // TODO Remove this cast - needed since Framer Motion's stricter typing 20438 model = hslaToRgba(model); 20439 } 20440 return model; 20441 } 20442 const mixColor = (from, to) => { 20443 const fromRGBA = asRGBA(from); 20444 const toRGBA = asRGBA(to); 20445 const blended = { ...fromRGBA }; 20446 return (v) => { 20447 blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v); 20448 blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v); 20449 blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v); 20450 blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v); 20451 return rgba.transform(blended); 20452 }; 20453 }; 20454 20455 20456 20457 ;// ./node_modules/framer-motion/dist/es/utils/mix/visibility.mjs 20458 const invisibleValues = new Set(["none", "hidden"]); 20459 /** 20460 * Returns a function that, when provided a progress value between 0 and 1, 20461 * will return the "none" or "hidden" string only when the progress is that of 20462 * the origin or target. 20463 */ 20464 function mixVisibility(origin, target) { 20465 if (invisibleValues.has(origin)) { 20466 return (p) => (p <= 0 ? origin : target); 20467 } 20468 else { 20469 return (p) => (p >= 1 ? target : origin); 20470 } 20471 } 20472 20473 20474 20475 ;// ./node_modules/framer-motion/dist/es/utils/mix/complex.mjs 20476 20477 20478 20479 20480 20481 20482 20483 20484 20485 function mixImmediate(a, b) { 20486 return (p) => (p > 0 ? b : a); 20487 } 20488 function complex_mixNumber(a, b) { 20489 return (p) => mixNumber(a, b, p); 20490 } 20491 function getMixer(a) { 20492 if (typeof a === "number") { 20493 return complex_mixNumber; 20494 } 20495 else if (typeof a === "string") { 20496 return isCSSVariableToken(a) 20497 ? mixImmediate 20498 : color.test(a) 20499 ? mixColor 20500 : mixComplex; 20501 } 20502 else if (Array.isArray(a)) { 20503 return mixArray; 20504 } 20505 else if (typeof a === "object") { 20506 return color.test(a) ? mixColor : mixObject; 20507 } 20508 return mixImmediate; 20509 } 20510 function mixArray(a, b) { 20511 const output = [...a]; 20512 const numValues = output.length; 20513 const blendValue = a.map((v, i) => getMixer(v)(v, b[i])); 20514 return (p) => { 20515 for (let i = 0; i < numValues; i++) { 20516 output[i] = blendValue[i](p); 20517 } 20518 return output; 20519 }; 20520 } 20521 function mixObject(a, b) { 20522 const output = { ...a, ...b }; 20523 const blendValue = {}; 20524 for (const key in output) { 20525 if (a[key] !== undefined && b[key] !== undefined) { 20526 blendValue[key] = getMixer(a[key])(a[key], b[key]); 20527 } 20528 } 20529 return (v) => { 20530 for (const key in blendValue) { 20531 output[key] = blendValue[key](v); 20532 } 20533 return output; 20534 }; 20535 } 20536 function matchOrder(origin, target) { 20537 var _a; 20538 const orderedOrigin = []; 20539 const pointers = { color: 0, var: 0, number: 0 }; 20540 for (let i = 0; i < target.values.length; i++) { 20541 const type = target.types[i]; 20542 const originIndex = origin.indexes[type][pointers[type]]; 20543 const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0; 20544 orderedOrigin[i] = originValue; 20545 pointers[type]++; 20546 } 20547 return orderedOrigin; 20548 } 20549 const mixComplex = (origin, target) => { 20550 const template = complex.createTransformer(target); 20551 const originStats = analyseComplexValue(origin); 20552 const targetStats = analyseComplexValue(target); 20553 const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && 20554 originStats.indexes.color.length === targetStats.indexes.color.length && 20555 originStats.indexes.number.length >= targetStats.indexes.number.length; 20556 if (canInterpolate) { 20557 if ((invisibleValues.has(origin) && 20558 !targetStats.values.length) || 20559 (invisibleValues.has(target) && 20560 !originStats.values.length)) { 20561 return mixVisibility(origin, target); 20562 } 20563 return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template); 20564 } 20565 else { 20566 warning(true, `Complex values '$origin}' and '$target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`); 20567 return mixImmediate(origin, target); 20568 } 20569 }; 20570 20571 20572 20573 ;// ./node_modules/framer-motion/dist/es/utils/mix/index.mjs 20574 20575 20576 20577 function mix(from, to, p) { 20578 if (typeof from === "number" && 20579 typeof to === "number" && 20580 typeof p === "number") { 20581 return mixNumber(from, to, p); 20582 } 20583 const mixer = getMixer(from); 20584 return mixer(from, to); 20585 } 20586 20587 20588 20589 ;// ./node_modules/framer-motion/dist/es/utils/interpolate.mjs 20590 20591 20592 20593 20594 20595 20596 20597 function createMixers(output, ease, customMixer) { 20598 const mixers = []; 20599 const mixerFactory = customMixer || mix; 20600 const numMixers = output.length - 1; 20601 for (let i = 0; i < numMixers; i++) { 20602 let mixer = mixerFactory(output[i], output[i + 1]); 20603 if (ease) { 20604 const easingFunction = Array.isArray(ease) ? ease[i] || noop_noop : ease; 20605 mixer = pipe(easingFunction, mixer); 20606 } 20607 mixers.push(mixer); 20608 } 20609 return mixers; 20610 } 20611 /** 20612 * Create a function that maps from a numerical input array to a generic output array. 20613 * 20614 * Accepts: 20615 * - Numbers 20616 * - Colors (hex, hsl, hsla, rgb, rgba) 20617 * - Complex (combinations of one or more numbers or strings) 20618 * 20619 * ```jsx 20620 * const mixColor = interpolate([0, 1], ['#fff', '#000']) 20621 * 20622 * mixColor(0.5) // 'rgba(128, 128, 128, 1)' 20623 * ``` 20624 * 20625 * TODO Revist this approach once we've moved to data models for values, 20626 * probably not needed to pregenerate mixer functions. 20627 * 20628 * @public 20629 */ 20630 function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) { 20631 const inputLength = input.length; 20632 errors_invariant(inputLength === output.length, "Both input and output ranges must be the same length"); 20633 /** 20634 * If we're only provided a single input, we can just make a function 20635 * that returns the output. 20636 */ 20637 if (inputLength === 1) 20638 return () => output[0]; 20639 if (inputLength === 2 && input[0] === input[1]) 20640 return () => output[1]; 20641 // If input runs highest -> lowest, reverse both arrays 20642 if (input[0] > input[inputLength - 1]) { 20643 input = [...input].reverse(); 20644 output = [...output].reverse(); 20645 } 20646 const mixers = createMixers(output, ease, mixer); 20647 const numMixers = mixers.length; 20648 const interpolator = (v) => { 20649 let i = 0; 20650 if (numMixers > 1) { 20651 for (; i < input.length - 2; i++) { 20652 if (v < input[i + 1]) 20653 break; 20654 } 20655 } 20656 const progressInRange = progress(input[i], input[i + 1], v); 20657 return mixers[i](progressInRange); 20658 }; 20659 return isClamp 20660 ? (v) => interpolator(clamp_clamp(input[0], input[inputLength - 1], v)) 20661 : interpolator; 20662 } 20663 20664 20665 20666 ;// ./node_modules/framer-motion/dist/es/utils/offsets/fill.mjs 20667 20668 20669 20670 function fillOffset(offset, remaining) { 20671 const min = offset[offset.length - 1]; 20672 for (let i = 1; i <= remaining; i++) { 20673 const offsetProgress = progress(0, remaining, i); 20674 offset.push(mixNumber(min, 1, offsetProgress)); 20675 } 20676 } 20677 20678 20679 20680 ;// ./node_modules/framer-motion/dist/es/utils/offsets/default.mjs 20681 20682 20683 function defaultOffset(arr) { 20684 const offset = [0]; 20685 fillOffset(offset, arr.length - 1); 20686 return offset; 20687 } 20688 20689 20690 20691 ;// ./node_modules/framer-motion/dist/es/utils/offsets/time.mjs 20692 function convertOffsetToTimes(offset, duration) { 20693 return offset.map((o) => o * duration); 20694 } 20695 20696 20697 20698 ;// ./node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs 20699 20700 20701 20702 20703 20704 20705 20706 function defaultEasing(values, easing) { 20707 return values.map(() => easing || easeInOut).splice(0, values.length - 1); 20708 } 20709 function keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) { 20710 /** 20711 * Easing functions can be externally defined as strings. Here we convert them 20712 * into actual functions. 20713 */ 20714 const easingFunctions = isEasingArray(ease) 20715 ? ease.map(easingDefinitionToFunction) 20716 : easingDefinitionToFunction(ease); 20717 /** 20718 * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator 20719 * to reduce GC during animation. 20720 */ 20721 const state = { 20722 done: false, 20723 value: keyframeValues[0], 20724 }; 20725 /** 20726 * Create a times array based on the provided 0-1 offsets 20727 */ 20728 const absoluteTimes = convertOffsetToTimes( 20729 // Only use the provided offsets if they're the correct length 20730 // TODO Maybe we should warn here if there's a length mismatch 20731 times && times.length === keyframeValues.length 20732 ? times 20733 : defaultOffset(keyframeValues), duration); 20734 const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, { 20735 ease: Array.isArray(easingFunctions) 20736 ? easingFunctions 20737 : defaultEasing(keyframeValues, easingFunctions), 20738 }); 20739 return { 20740 calculatedDuration: duration, 20741 next: (t) => { 20742 state.value = mapTimeToKeyframe(t); 20743 state.done = t >= duration; 20744 return state; 20745 }, 20746 }; 20747 } 20748 20749 20750 20751 ;// ./node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs 20752 /** 20753 * Implement a practical max duration for keyframe generation 20754 * to prevent infinite loops 20755 */ 20756 const maxGeneratorDuration = 20000; 20757 function calcGeneratorDuration(generator) { 20758 let duration = 0; 20759 const timeStep = 50; 20760 let state = generator.next(duration); 20761 while (!state.done && duration < maxGeneratorDuration) { 20762 duration += timeStep; 20763 state = generator.next(duration); 20764 } 20765 return duration >= maxGeneratorDuration ? Infinity : duration; 20766 } 20767 20768 20769 20770 ;// ./node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs 20771 20772 20773 20774 const frameloopDriver = (update) => { 20775 const passTimestamp = ({ timestamp }) => update(timestamp); 20776 return { 20777 start: () => frame_frame.update(passTimestamp, true), 20778 stop: () => cancelFrame(passTimestamp), 20779 /** 20780 * If we're processing this frame we can use the 20781 * framelocked timestamp to keep things in sync. 20782 */ 20783 now: () => (frameData.isProcessing ? frameData.timestamp : time.now()), 20784 }; 20785 }; 20786 20787 20788 20789 ;// ./node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs 20790 20791 20792 20793 20794 20795 20796 20797 20798 20799 20800 20801 20802 20803 20804 const generators = { 20805 decay: inertia, 20806 inertia: inertia, 20807 tween: keyframes_keyframes, 20808 keyframes: keyframes_keyframes, 20809 spring: spring, 20810 }; 20811 const percentToProgress = (percent) => percent / 100; 20812 /** 20813 * Animation that runs on the main thread. Designed to be WAAPI-spec in the subset of 20814 * features we expose publically. Mostly the compatibility is to ensure visual identity 20815 * between both WAAPI and main thread animations. 20816 */ 20817 class MainThreadAnimation extends BaseAnimation { 20818 constructor({ KeyframeResolver: KeyframeResolver$1 = KeyframeResolver, ...options }) { 20819 super(options); 20820 /** 20821 * The time at which the animation was paused. 20822 */ 20823 this.holdTime = null; 20824 /** 20825 * The time at which the animation was started. 20826 */ 20827 this.startTime = null; 20828 /** 20829 * The time at which the animation was cancelled. 20830 */ 20831 this.cancelTime = null; 20832 /** 20833 * The current time of the animation. 20834 */ 20835 this.currentTime = 0; 20836 /** 20837 * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed. 20838 */ 20839 this.playbackSpeed = 1; 20840 /** 20841 * The state of the animation to apply when the animation is resolved. This 20842 * allows calls to the public API to control the animation before it is resolved, 20843 * without us having to resolve it first. 20844 */ 20845 this.pendingPlayState = "running"; 20846 this.state = "idle"; 20847 /** 20848 * This method is bound to the instance to fix a pattern where 20849 * animation.stop is returned as a reference from a useEffect. 20850 */ 20851 this.stop = () => { 20852 this.resolver.cancel(); 20853 this.isStopped = true; 20854 if (this.state === "idle") 20855 return; 20856 this.teardown(); 20857 const { onStop } = this.options; 20858 onStop && onStop(); 20859 }; 20860 const { name, motionValue, keyframes } = this.options; 20861 const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe); 20862 if (name && motionValue && motionValue.owner) { 20863 this.resolver = motionValue.owner.resolveKeyframes(keyframes, onResolved, name, motionValue); 20864 } 20865 else { 20866 this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue); 20867 } 20868 this.resolver.scheduleResolve(); 20869 } 20870 initPlayback(keyframes$1) { 20871 const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options; 20872 const generatorFactory = generators[type] || keyframes_keyframes; 20873 /** 20874 * If our generator doesn't support mixing numbers, we need to replace keyframes with 20875 * [0, 100] and then make a function that maps that to the actual keyframes. 20876 * 20877 * 100 is chosen instead of 1 as it works nicer with spring animations. 20878 */ 20879 let mapPercentToKeyframes; 20880 let mirroredGenerator; 20881 if (generatorFactory !== keyframes_keyframes && 20882 typeof keyframes$1[0] !== "number") { 20883 if (false) {} 20884 mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1])); 20885 keyframes$1 = [0, 100]; 20886 } 20887 const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 }); 20888 /** 20889 * If we have a mirror repeat type we need to create a second generator that outputs the 20890 * mirrored (not reversed) animation and later ping pong between the two generators. 20891 */ 20892 if (repeatType === "mirror") { 20893 mirroredGenerator = generatorFactory({ 20894 ...this.options, 20895 keyframes: [...keyframes$1].reverse(), 20896 velocity: -velocity, 20897 }); 20898 } 20899 /** 20900 * If duration is undefined and we have repeat options, 20901 * we need to calculate a duration from the generator. 20902 * 20903 * We set it to the generator itself to cache the duration. 20904 * Any timeline resolver will need to have already precalculated 20905 * the duration by this step. 20906 */ 20907 if (generator.calculatedDuration === null) { 20908 generator.calculatedDuration = calcGeneratorDuration(generator); 20909 } 20910 const { calculatedDuration } = generator; 20911 const resolvedDuration = calculatedDuration + repeatDelay; 20912 const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay; 20913 return { 20914 generator, 20915 mirroredGenerator, 20916 mapPercentToKeyframes, 20917 calculatedDuration, 20918 resolvedDuration, 20919 totalDuration, 20920 }; 20921 } 20922 onPostResolved() { 20923 const { autoplay = true } = this.options; 20924 this.play(); 20925 if (this.pendingPlayState === "paused" || !autoplay) { 20926 this.pause(); 20927 } 20928 else { 20929 this.state = this.pendingPlayState; 20930 } 20931 } 20932 tick(timestamp, sample = false) { 20933 const { resolved } = this; 20934 // If the animations has failed to resolve, return the final keyframe. 20935 if (!resolved) { 20936 const { keyframes } = this.options; 20937 return { done: true, value: keyframes[keyframes.length - 1] }; 20938 } 20939 const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved; 20940 if (this.startTime === null) 20941 return generator.next(0); 20942 const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options; 20943 /** 20944 * requestAnimationFrame timestamps can come through as lower than 20945 * the startTime as set by performance.now(). Here we prevent this, 20946 * though in the future it could be possible to make setting startTime 20947 * a pending operation that gets resolved here. 20948 */ 20949 if (this.speed > 0) { 20950 this.startTime = Math.min(this.startTime, timestamp); 20951 } 20952 else if (this.speed < 0) { 20953 this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime); 20954 } 20955 // Update currentTime 20956 if (sample) { 20957 this.currentTime = timestamp; 20958 } 20959 else if (this.holdTime !== null) { 20960 this.currentTime = this.holdTime; 20961 } 20962 else { 20963 // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 = 20964 // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for 20965 // example. 20966 this.currentTime = 20967 Math.round(timestamp - this.startTime) * this.speed; 20968 } 20969 // Rebase on delay 20970 const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1); 20971 const isInDelayPhase = this.speed >= 0 20972 ? timeWithoutDelay < 0 20973 : timeWithoutDelay > totalDuration; 20974 this.currentTime = Math.max(timeWithoutDelay, 0); 20975 // If this animation has finished, set the current time to the total duration. 20976 if (this.state === "finished" && this.holdTime === null) { 20977 this.currentTime = totalDuration; 20978 } 20979 let elapsed = this.currentTime; 20980 let frameGenerator = generator; 20981 if (repeat) { 20982 /** 20983 * Get the current progress (0-1) of the animation. If t is > 20984 * than duration we'll get values like 2.5 (midway through the 20985 * third iteration) 20986 */ 20987 const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration; 20988 /** 20989 * Get the current iteration (0 indexed). For instance the floor of 20990 * 2.5 is 2. 20991 */ 20992 let currentIteration = Math.floor(progress); 20993 /** 20994 * Get the current progress of the iteration by taking the remainder 20995 * so 2.5 is 0.5 through iteration 2 20996 */ 20997 let iterationProgress = progress % 1.0; 20998 /** 20999 * If iteration progress is 1 we count that as the end 21000 * of the previous iteration. 21001 */ 21002 if (!iterationProgress && progress >= 1) { 21003 iterationProgress = 1; 21004 } 21005 iterationProgress === 1 && currentIteration--; 21006 currentIteration = Math.min(currentIteration, repeat + 1); 21007 /** 21008 * Reverse progress if we're not running in "normal" direction 21009 */ 21010 const isOddIteration = Boolean(currentIteration % 2); 21011 if (isOddIteration) { 21012 if (repeatType === "reverse") { 21013 iterationProgress = 1 - iterationProgress; 21014 if (repeatDelay) { 21015 iterationProgress -= repeatDelay / resolvedDuration; 21016 } 21017 } 21018 else if (repeatType === "mirror") { 21019 frameGenerator = mirroredGenerator; 21020 } 21021 } 21022 elapsed = clamp_clamp(0, 1, iterationProgress) * resolvedDuration; 21023 } 21024 /** 21025 * If we're in negative time, set state as the initial keyframe. 21026 * This prevents delay: x, duration: 0 animations from finishing 21027 * instantly. 21028 */ 21029 const state = isInDelayPhase 21030 ? { done: false, value: keyframes[0] } 21031 : frameGenerator.next(elapsed); 21032 if (mapPercentToKeyframes) { 21033 state.value = mapPercentToKeyframes(state.value); 21034 } 21035 let { done } = state; 21036 if (!isInDelayPhase && calculatedDuration !== null) { 21037 done = 21038 this.speed >= 0 21039 ? this.currentTime >= totalDuration 21040 : this.currentTime <= 0; 21041 } 21042 const isAnimationFinished = this.holdTime === null && 21043 (this.state === "finished" || (this.state === "running" && done)); 21044 if (isAnimationFinished && finalKeyframe !== undefined) { 21045 state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe); 21046 } 21047 if (onUpdate) { 21048 onUpdate(state.value); 21049 } 21050 if (isAnimationFinished) { 21051 this.finish(); 21052 } 21053 return state; 21054 } 21055 get duration() { 21056 const { resolved } = this; 21057 return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0; 21058 } 21059 get time() { 21060 return millisecondsToSeconds(this.currentTime); 21061 } 21062 set time(newTime) { 21063 newTime = secondsToMilliseconds(newTime); 21064 this.currentTime = newTime; 21065 if (this.holdTime !== null || this.speed === 0) { 21066 this.holdTime = newTime; 21067 } 21068 else if (this.driver) { 21069 this.startTime = this.driver.now() - newTime / this.speed; 21070 } 21071 } 21072 get speed() { 21073 return this.playbackSpeed; 21074 } 21075 set speed(newSpeed) { 21076 const hasChanged = this.playbackSpeed !== newSpeed; 21077 this.playbackSpeed = newSpeed; 21078 if (hasChanged) { 21079 this.time = millisecondsToSeconds(this.currentTime); 21080 } 21081 } 21082 play() { 21083 if (!this.resolver.isScheduled) { 21084 this.resolver.resume(); 21085 } 21086 if (!this._resolved) { 21087 this.pendingPlayState = "running"; 21088 return; 21089 } 21090 if (this.isStopped) 21091 return; 21092 const { driver = frameloopDriver, onPlay } = this.options; 21093 if (!this.driver) { 21094 this.driver = driver((timestamp) => this.tick(timestamp)); 21095 } 21096 onPlay && onPlay(); 21097 const now = this.driver.now(); 21098 if (this.holdTime !== null) { 21099 this.startTime = now - this.holdTime; 21100 } 21101 else if (!this.startTime || this.state === "finished") { 21102 this.startTime = now; 21103 } 21104 if (this.state === "finished") { 21105 this.updateFinishedPromise(); 21106 } 21107 this.cancelTime = this.startTime; 21108 this.holdTime = null; 21109 /** 21110 * Set playState to running only after we've used it in 21111 * the previous logic. 21112 */ 21113 this.state = "running"; 21114 this.driver.start(); 21115 } 21116 pause() { 21117 var _a; 21118 if (!this._resolved) { 21119 this.pendingPlayState = "paused"; 21120 return; 21121 } 21122 this.state = "paused"; 21123 this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0; 21124 } 21125 complete() { 21126 if (this.state !== "running") { 21127 this.play(); 21128 } 21129 this.pendingPlayState = this.state = "finished"; 21130 this.holdTime = null; 21131 } 21132 finish() { 21133 this.teardown(); 21134 this.state = "finished"; 21135 const { onComplete } = this.options; 21136 onComplete && onComplete(); 21137 } 21138 cancel() { 21139 if (this.cancelTime !== null) { 21140 this.tick(this.cancelTime); 21141 } 21142 this.teardown(); 21143 this.updateFinishedPromise(); 21144 } 21145 teardown() { 21146 this.state = "idle"; 21147 this.stopDriver(); 21148 this.resolveFinishedPromise(); 21149 this.updateFinishedPromise(); 21150 this.startTime = this.cancelTime = null; 21151 this.resolver.cancel(); 21152 } 21153 stopDriver() { 21154 if (!this.driver) 21155 return; 21156 this.driver.stop(); 21157 this.driver = undefined; 21158 } 21159 sample(time) { 21160 this.startTime = 0; 21161 return this.tick(time, true); 21162 } 21163 } 21164 // Legacy interface 21165 function animateValue(options) { 21166 return new MainThreadAnimation(options); 21167 } 21168 21169 21170 21171 ;// ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs 21172 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number"; 21173 21174 21175 21176 ;// ./node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs 21177 21178 21179 function isWaapiSupportedEasing(easing) { 21180 return Boolean(!easing || 21181 (typeof easing === "string" && easing in supportedWaapiEasing) || 21182 isBezierDefinition(easing) || 21183 (Array.isArray(easing) && easing.every(isWaapiSupportedEasing))); 21184 } 21185 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier($a}, $b}, $c}, $d})`; 21186 const supportedWaapiEasing = { 21187 linear: "linear", 21188 ease: "ease", 21189 easeIn: "ease-in", 21190 easeOut: "ease-out", 21191 easeInOut: "ease-in-out", 21192 circIn: cubicBezierAsString([0, 0.65, 0.55, 1]), 21193 circOut: cubicBezierAsString([0.55, 0, 1, 0.45]), 21194 backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]), 21195 backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]), 21196 }; 21197 function mapEasingToNativeEasingWithDefault(easing) { 21198 return (mapEasingToNativeEasing(easing) || 21199 supportedWaapiEasing.easeOut); 21200 } 21201 function mapEasingToNativeEasing(easing) { 21202 if (!easing) { 21203 return undefined; 21204 } 21205 else if (isBezierDefinition(easing)) { 21206 return cubicBezierAsString(easing); 21207 } 21208 else if (Array.isArray(easing)) { 21209 return easing.map(mapEasingToNativeEasingWithDefault); 21210 } 21211 else { 21212 return supportedWaapiEasing[easing]; 21213 } 21214 } 21215 21216 21217 21218 ;// ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs 21219 21220 21221 function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) { 21222 const keyframeOptions = { [valueName]: keyframes }; 21223 if (times) 21224 keyframeOptions.offset = times; 21225 const easing = mapEasingToNativeEasing(ease); 21226 /** 21227 * If this is an easing array, apply to keyframes, not animation as a whole 21228 */ 21229 if (Array.isArray(easing)) 21230 keyframeOptions.easing = easing; 21231 return element.animate(keyframeOptions, { 21232 delay, 21233 duration, 21234 easing: !Array.isArray(easing) ? easing : "linear", 21235 fill: "both", 21236 iterations: repeat + 1, 21237 direction: repeatType === "reverse" ? "alternate" : "normal", 21238 }); 21239 } 21240 21241 21242 21243 ;// ./node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs 21244 21245 21246 21247 21248 21249 21250 21251 21252 21253 21254 21255 const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")); 21256 /** 21257 * A list of values that can be hardware-accelerated. 21258 */ 21259 const acceleratedValues = new Set([ 21260 "opacity", 21261 "clipPath", 21262 "filter", 21263 "transform", 21264 // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved 21265 // or until we implement support for linear() easing. 21266 // "background-color" 21267 ]); 21268 /** 21269 * 10ms is chosen here as it strikes a balance between smooth 21270 * results (more than one keyframe per frame at 60fps) and 21271 * keyframe quantity. 21272 */ 21273 const sampleDelta = 10; //ms 21274 /** 21275 * Implement a practical max duration for keyframe generation 21276 * to prevent infinite loops 21277 */ 21278 const AcceleratedAnimation_maxDuration = 20000; 21279 /** 21280 * Check if an animation can run natively via WAAPI or requires pregenerated keyframes. 21281 * WAAPI doesn't support spring or function easings so we run these as JS animation before 21282 * handing off. 21283 */ 21284 function requiresPregeneratedKeyframes(options) { 21285 return (options.type === "spring" || 21286 options.name === "backgroundColor" || 21287 !isWaapiSupportedEasing(options.ease)); 21288 } 21289 function pregenerateKeyframes(keyframes, options) { 21290 /** 21291 * Create a main-thread animation to pregenerate keyframes. 21292 * We sample this at regular intervals to generate keyframes that we then 21293 * linearly interpolate between. 21294 */ 21295 const sampleAnimation = new MainThreadAnimation({ 21296 ...options, 21297 keyframes, 21298 repeat: 0, 21299 delay: 0, 21300 isGenerator: true, 21301 }); 21302 let state = { done: false, value: keyframes[0] }; 21303 const pregeneratedKeyframes = []; 21304 /** 21305 * Bail after 20 seconds of pre-generated keyframes as it's likely 21306 * we're heading for an infinite loop. 21307 */ 21308 let t = 0; 21309 while (!state.done && t < AcceleratedAnimation_maxDuration) { 21310 state = sampleAnimation.sample(t); 21311 pregeneratedKeyframes.push(state.value); 21312 t += sampleDelta; 21313 } 21314 return { 21315 times: undefined, 21316 keyframes: pregeneratedKeyframes, 21317 duration: t - sampleDelta, 21318 ease: "linear", 21319 }; 21320 } 21321 class AcceleratedAnimation extends BaseAnimation { 21322 constructor(options) { 21323 super(options); 21324 const { name, motionValue, keyframes } = this.options; 21325 this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue); 21326 this.resolver.scheduleResolve(); 21327 } 21328 initPlayback(keyframes, finalKeyframe) { 21329 var _a; 21330 let { duration = 300, times, ease, type, motionValue, name, } = this.options; 21331 /** 21332 * If element has since been unmounted, return false to indicate 21333 * the animation failed to initialised. 21334 */ 21335 if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) { 21336 return false; 21337 } 21338 /** 21339 * If this animation needs pre-generated keyframes then generate. 21340 */ 21341 if (requiresPregeneratedKeyframes(this.options)) { 21342 const { onComplete, onUpdate, motionValue, ...options } = this.options; 21343 const pregeneratedAnimation = pregenerateKeyframes(keyframes, options); 21344 keyframes = pregeneratedAnimation.keyframes; 21345 // If this is a very short animation, ensure we have 21346 // at least two keyframes to animate between as older browsers 21347 // can't animate between a single keyframe. 21348 if (keyframes.length === 1) { 21349 keyframes[1] = keyframes[0]; 21350 } 21351 duration = pregeneratedAnimation.duration; 21352 times = pregeneratedAnimation.times; 21353 ease = pregeneratedAnimation.ease; 21354 type = "keyframes"; 21355 } 21356 const animation = animateStyle(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease }); 21357 // Override the browser calculated startTime with one synchronised to other JS 21358 // and WAAPI animations starting this event loop. 21359 animation.startTime = time.now(); 21360 if (this.pendingTimeline) { 21361 animation.timeline = this.pendingTimeline; 21362 this.pendingTimeline = undefined; 21363 } 21364 else { 21365 /** 21366 * Prefer the `onfinish` prop as it's more widely supported than 21367 * the `finished` promise. 21368 * 21369 * Here, we synchronously set the provided MotionValue to the end 21370 * keyframe. If we didn't, when the WAAPI animation is finished it would 21371 * be removed from the element which would then revert to its old styles. 21372 */ 21373 animation.onfinish = () => { 21374 const { onComplete } = this.options; 21375 motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe)); 21376 onComplete && onComplete(); 21377 this.cancel(); 21378 this.resolveFinishedPromise(); 21379 }; 21380 } 21381 return { 21382 animation, 21383 duration, 21384 times, 21385 type, 21386 ease, 21387 keyframes: keyframes, 21388 }; 21389 } 21390 get duration() { 21391 const { resolved } = this; 21392 if (!resolved) 21393 return 0; 21394 const { duration } = resolved; 21395 return millisecondsToSeconds(duration); 21396 } 21397 get time() { 21398 const { resolved } = this; 21399 if (!resolved) 21400 return 0; 21401 const { animation } = resolved; 21402 return millisecondsToSeconds(animation.currentTime || 0); 21403 } 21404 set time(newTime) { 21405 const { resolved } = this; 21406 if (!resolved) 21407 return; 21408 const { animation } = resolved; 21409 animation.currentTime = secondsToMilliseconds(newTime); 21410 } 21411 get speed() { 21412 const { resolved } = this; 21413 if (!resolved) 21414 return 1; 21415 const { animation } = resolved; 21416 return animation.playbackRate; 21417 } 21418 set speed(newSpeed) { 21419 const { resolved } = this; 21420 if (!resolved) 21421 return; 21422 const { animation } = resolved; 21423 animation.playbackRate = newSpeed; 21424 } 21425 get state() { 21426 const { resolved } = this; 21427 if (!resolved) 21428 return "idle"; 21429 const { animation } = resolved; 21430 return animation.playState; 21431 } 21432 /** 21433 * Replace the default DocumentTimeline with another AnimationTimeline. 21434 * Currently used for scroll animations. 21435 */ 21436 attachTimeline(timeline) { 21437 if (!this._resolved) { 21438 this.pendingTimeline = timeline; 21439 } 21440 else { 21441 const { resolved } = this; 21442 if (!resolved) 21443 return noop_noop; 21444 const { animation } = resolved; 21445 animation.timeline = timeline; 21446 animation.onfinish = null; 21447 } 21448 return noop_noop; 21449 } 21450 play() { 21451 if (this.isStopped) 21452 return; 21453 const { resolved } = this; 21454 if (!resolved) 21455 return; 21456 const { animation } = resolved; 21457 if (animation.playState === "finished") { 21458 this.updateFinishedPromise(); 21459 } 21460 animation.play(); 21461 } 21462 pause() { 21463 const { resolved } = this; 21464 if (!resolved) 21465 return; 21466 const { animation } = resolved; 21467 animation.pause(); 21468 } 21469 stop() { 21470 this.resolver.cancel(); 21471 this.isStopped = true; 21472 if (this.state === "idle") 21473 return; 21474 const { resolved } = this; 21475 if (!resolved) 21476 return; 21477 const { animation, keyframes, duration, type, ease, times } = resolved; 21478 if (animation.playState === "idle" || 21479 animation.playState === "finished") { 21480 return; 21481 } 21482 /** 21483 * WAAPI doesn't natively have any interruption capabilities. 21484 * 21485 * Rather than read commited styles back out of the DOM, we can 21486 * create a renderless JS animation and sample it twice to calculate 21487 * its current value, "previous" value, and therefore allow 21488 * Motion to calculate velocity for any subsequent animation. 21489 */ 21490 if (this.time) { 21491 const { motionValue, onUpdate, onComplete, ...options } = this.options; 21492 const sampleAnimation = new MainThreadAnimation({ 21493 ...options, 21494 keyframes, 21495 duration, 21496 type, 21497 ease, 21498 times, 21499 isGenerator: true, 21500 }); 21501 const sampleTime = secondsToMilliseconds(this.time); 21502 motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta); 21503 } 21504 this.cancel(); 21505 } 21506 complete() { 21507 const { resolved } = this; 21508 if (!resolved) 21509 return; 21510 resolved.animation.finish(); 21511 } 21512 cancel() { 21513 const { resolved } = this; 21514 if (!resolved) 21515 return; 21516 resolved.animation.cancel(); 21517 } 21518 static supports(options) { 21519 const { motionValue, name, repeatDelay, repeatType, damping, type } = options; 21520 return (supportsWaapi() && 21521 name && 21522 acceleratedValues.has(name) && 21523 motionValue && 21524 motionValue.owner && 21525 motionValue.owner.current instanceof HTMLElement && 21526 /** 21527 * If we're outputting values to onUpdate then we can't use WAAPI as there's 21528 * no way to read the value from WAAPI every frame. 21529 */ 21530 !motionValue.owner.getProps().onUpdate && 21531 !repeatDelay && 21532 repeatType !== "mirror" && 21533 damping !== 0 && 21534 type !== "inertia"); 21535 } 21536 } 21537 21538 21539 21540 ;// ./node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs 21541 21542 21543 21544 21545 21546 21547 21548 21549 21550 21551 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => { 21552 const valueTransition = getValueTransition(transition, name) || {}; 21553 /** 21554 * Most transition values are currently completely overwritten by value-specific 21555 * transitions. In the future it'd be nicer to blend these transitions. But for now 21556 * delay actually does inherit from the root transition if not value-specific. 21557 */ 21558 const delay = valueTransition.delay || transition.delay || 0; 21559 /** 21560 * Elapsed isn't a public transition option but can be passed through from 21561 * optimized appear effects in milliseconds. 21562 */ 21563 let { elapsed = 0 } = transition; 21564 elapsed = elapsed - secondsToMilliseconds(delay); 21565 let options = { 21566 keyframes: Array.isArray(target) ? target : [null, target], 21567 ease: "easeOut", 21568 velocity: value.getVelocity(), 21569 ...valueTransition, 21570 delay: -elapsed, 21571 onUpdate: (v) => { 21572 value.set(v); 21573 valueTransition.onUpdate && valueTransition.onUpdate(v); 21574 }, 21575 onComplete: () => { 21576 onComplete(); 21577 valueTransition.onComplete && valueTransition.onComplete(); 21578 }, 21579 name, 21580 motionValue: value, 21581 element: isHandoff ? undefined : element, 21582 }; 21583 /** 21584 * If there's no transition defined for this value, we can generate 21585 * unqiue transition settings for this value. 21586 */ 21587 if (!isTransitionDefined(valueTransition)) { 21588 options = { 21589 ...options, 21590 ...getDefaultTransition(name, options), 21591 }; 21592 } 21593 /** 21594 * Both WAAPI and our internal animation functions use durations 21595 * as defined by milliseconds, while our external API defines them 21596 * as seconds. 21597 */ 21598 if (options.duration) { 21599 options.duration = secondsToMilliseconds(options.duration); 21600 } 21601 if (options.repeatDelay) { 21602 options.repeatDelay = secondsToMilliseconds(options.repeatDelay); 21603 } 21604 if (options.from !== undefined) { 21605 options.keyframes[0] = options.from; 21606 } 21607 let shouldSkip = false; 21608 if (options.type === false || 21609 (options.duration === 0 && !options.repeatDelay)) { 21610 options.duration = 0; 21611 if (options.delay === 0) { 21612 shouldSkip = true; 21613 } 21614 } 21615 if (instantAnimationState.current || 21616 MotionGlobalConfig.skipAnimations) { 21617 shouldSkip = true; 21618 options.duration = 0; 21619 options.delay = 0; 21620 } 21621 /** 21622 * If we can or must skip creating the animation, and apply only 21623 * the final keyframe, do so. We also check once keyframes are resolved but 21624 * this early check prevents the need to create an animation at all. 21625 */ 21626 if (shouldSkip && !isHandoff && value.get() !== undefined) { 21627 const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition); 21628 if (finalKeyframe !== undefined) { 21629 frame_frame.update(() => { 21630 options.onUpdate(finalKeyframe); 21631 options.onComplete(); 21632 }); 21633 return; 21634 } 21635 } 21636 /** 21637 * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via 21638 * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the 21639 * optimised animation. 21640 */ 21641 if (!isHandoff && AcceleratedAnimation.supports(options)) { 21642 return new AcceleratedAnimation(options); 21643 } 21644 else { 21645 return new MainThreadAnimation(options); 21646 } 21647 }; 21648 21649 21650 21651 ;// ./node_modules/framer-motion/dist/es/value/use-will-change/is.mjs 21652 21653 21654 function isWillChangeMotionValue(value) { 21655 return Boolean(isMotionValue(value) && value.add); 21656 } 21657 21658 21659 21660 ;// ./node_modules/framer-motion/dist/es/utils/array.mjs 21661 function addUniqueItem(arr, item) { 21662 if (arr.indexOf(item) === -1) 21663 arr.push(item); 21664 } 21665 function removeItem(arr, item) { 21666 const index = arr.indexOf(item); 21667 if (index > -1) 21668 arr.splice(index, 1); 21669 } 21670 // Adapted from array-move 21671 function moveItem([...arr], fromIndex, toIndex) { 21672 const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex; 21673 if (startIndex >= 0 && startIndex < arr.length) { 21674 const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex; 21675 const [item] = arr.splice(fromIndex, 1); 21676 arr.splice(endIndex, 0, item); 21677 } 21678 return arr; 21679 } 21680 21681 21682 21683 ;// ./node_modules/framer-motion/dist/es/utils/subscription-manager.mjs 21684 21685 21686 class SubscriptionManager { 21687 constructor() { 21688 this.subscriptions = []; 21689 } 21690 add(handler) { 21691 addUniqueItem(this.subscriptions, handler); 21692 return () => removeItem(this.subscriptions, handler); 21693 } 21694 notify(a, b, c) { 21695 const numSubscriptions = this.subscriptions.length; 21696 if (!numSubscriptions) 21697 return; 21698 if (numSubscriptions === 1) { 21699 /** 21700 * If there's only a single handler we can just call it without invoking a loop. 21701 */ 21702 this.subscriptions[0](a, b, c); 21703 } 21704 else { 21705 for (let i = 0; i < numSubscriptions; i++) { 21706 /** 21707 * Check whether the handler exists before firing as it's possible 21708 * the subscriptions were modified during this loop running. 21709 */ 21710 const handler = this.subscriptions[i]; 21711 handler && handler(a, b, c); 21712 } 21713 } 21714 } 21715 getSize() { 21716 return this.subscriptions.length; 21717 } 21718 clear() { 21719 this.subscriptions.length = 0; 21720 } 21721 } 21722 21723 21724 21725 ;// ./node_modules/framer-motion/dist/es/value/index.mjs 21726 21727 21728 21729 21730 21731 21732 /** 21733 * Maximum time between the value of two frames, beyond which we 21734 * assume the velocity has since been 0. 21735 */ 21736 const MAX_VELOCITY_DELTA = 30; 21737 const isFloat = (value) => { 21738 return !isNaN(parseFloat(value)); 21739 }; 21740 const collectMotionValues = { 21741 current: undefined, 21742 }; 21743 /** 21744 * `MotionValue` is used to track the state and velocity of motion values. 21745 * 21746 * @public 21747 */ 21748 class MotionValue { 21749 /** 21750 * @param init - The initiating value 21751 * @param config - Optional configuration options 21752 * 21753 * - `transformer`: A function to transform incoming values with. 21754 * 21755 * @internal 21756 */ 21757 constructor(init, options = {}) { 21758 /** 21759 * This will be replaced by the build step with the latest version number. 21760 * When MotionValues are provided to motion components, warn if versions are mixed. 21761 */ 21762 this.version = "11.2.6"; 21763 /** 21764 * Tracks whether this value can output a velocity. Currently this is only true 21765 * if the value is numerical, but we might be able to widen the scope here and support 21766 * other value types. 21767 * 21768 * @internal 21769 */ 21770 this.canTrackVelocity = null; 21771 /** 21772 * An object containing a SubscriptionManager for each active event. 21773 */ 21774 this.events = {}; 21775 this.updateAndNotify = (v, render = true) => { 21776 const currentTime = time.now(); 21777 /** 21778 * If we're updating the value during another frame or eventloop 21779 * than the previous frame, then the we set the previous frame value 21780 * to current. 21781 */ 21782 if (this.updatedAt !== currentTime) { 21783 this.setPrevFrameValue(); 21784 } 21785 this.prev = this.current; 21786 this.setCurrent(v); 21787 // Update update subscribers 21788 if (this.current !== this.prev && this.events.change) { 21789 this.events.change.notify(this.current); 21790 } 21791 // Update render subscribers 21792 if (render && this.events.renderRequest) { 21793 this.events.renderRequest.notify(this.current); 21794 } 21795 }; 21796 this.hasAnimated = false; 21797 this.setCurrent(init); 21798 this.owner = options.owner; 21799 } 21800 setCurrent(current) { 21801 this.current = current; 21802 this.updatedAt = time.now(); 21803 if (this.canTrackVelocity === null && current !== undefined) { 21804 this.canTrackVelocity = isFloat(this.current); 21805 } 21806 } 21807 setPrevFrameValue(prevFrameValue = this.current) { 21808 this.prevFrameValue = prevFrameValue; 21809 this.prevUpdatedAt = this.updatedAt; 21810 } 21811 /** 21812 * Adds a function that will be notified when the `MotionValue` is updated. 21813 * 21814 * It returns a function that, when called, will cancel the subscription. 21815 * 21816 * When calling `onChange` inside a React component, it should be wrapped with the 21817 * `useEffect` hook. As it returns an unsubscribe function, this should be returned 21818 * from the `useEffect` function to ensure you don't add duplicate subscribers.. 21819 * 21820 * ```jsx 21821 * export const MyComponent = () => { 21822 * const x = useMotionValue(0) 21823 * const y = useMotionValue(0) 21824 * const opacity = useMotionValue(1) 21825 * 21826 * useEffect(() => { 21827 * function updateOpacity() { 21828 * const maxXY = Math.max(x.get(), y.get()) 21829 * const newOpacity = transform(maxXY, [0, 100], [1, 0]) 21830 * opacity.set(newOpacity) 21831 * } 21832 * 21833 * const unsubscribeX = x.on("change", updateOpacity) 21834 * const unsubscribeY = y.on("change", updateOpacity) 21835 * 21836 * return () => { 21837 * unsubscribeX() 21838 * unsubscribeY() 21839 * } 21840 * }, []) 21841 * 21842 * return <motion.div style={{ x }} /> 21843 * } 21844 * ``` 21845 * 21846 * @param subscriber - A function that receives the latest value. 21847 * @returns A function that, when called, will cancel this subscription. 21848 * 21849 * @deprecated 21850 */ 21851 onChange(subscription) { 21852 if (false) {} 21853 return this.on("change", subscription); 21854 } 21855 on(eventName, callback) { 21856 if (!this.events[eventName]) { 21857 this.events[eventName] = new SubscriptionManager(); 21858 } 21859 const unsubscribe = this.events[eventName].add(callback); 21860 if (eventName === "change") { 21861 return () => { 21862 unsubscribe(); 21863 /** 21864 * If we have no more change listeners by the start 21865 * of the next frame, stop active animations. 21866 */ 21867 frame_frame.read(() => { 21868 if (!this.events.change.getSize()) { 21869 this.stop(); 21870 } 21871 }); 21872 }; 21873 } 21874 return unsubscribe; 21875 } 21876 clearListeners() { 21877 for (const eventManagers in this.events) { 21878 this.events[eventManagers].clear(); 21879 } 21880 } 21881 /** 21882 * Attaches a passive effect to the `MotionValue`. 21883 * 21884 * @internal 21885 */ 21886 attach(passiveEffect, stopPassiveEffect) { 21887 this.passiveEffect = passiveEffect; 21888 this.stopPassiveEffect = stopPassiveEffect; 21889 } 21890 /** 21891 * Sets the state of the `MotionValue`. 21892 * 21893 * @remarks 21894 * 21895 * ```jsx 21896 * const x = useMotionValue(0) 21897 * x.set(10) 21898 * ``` 21899 * 21900 * @param latest - Latest value to set. 21901 * @param render - Whether to notify render subscribers. Defaults to `true` 21902 * 21903 * @public 21904 */ 21905 set(v, render = true) { 21906 if (!render || !this.passiveEffect) { 21907 this.updateAndNotify(v, render); 21908 } 21909 else { 21910 this.passiveEffect(v, this.updateAndNotify); 21911 } 21912 } 21913 setWithVelocity(prev, current, delta) { 21914 this.set(current); 21915 this.prev = undefined; 21916 this.prevFrameValue = prev; 21917 this.prevUpdatedAt = this.updatedAt - delta; 21918 } 21919 /** 21920 * Set the state of the `MotionValue`, stopping any active animations, 21921 * effects, and resets velocity to `0`. 21922 */ 21923 jump(v, endAnimation = true) { 21924 this.updateAndNotify(v); 21925 this.prev = v; 21926 this.prevUpdatedAt = this.prevFrameValue = undefined; 21927 endAnimation && this.stop(); 21928 if (this.stopPassiveEffect) 21929 this.stopPassiveEffect(); 21930 } 21931 /** 21932 * Returns the latest state of `MotionValue` 21933 * 21934 * @returns - The latest state of `MotionValue` 21935 * 21936 * @public 21937 */ 21938 get() { 21939 if (collectMotionValues.current) { 21940 collectMotionValues.current.push(this); 21941 } 21942 return this.current; 21943 } 21944 /** 21945 * @public 21946 */ 21947 getPrevious() { 21948 return this.prev; 21949 } 21950 /** 21951 * Returns the latest velocity of `MotionValue` 21952 * 21953 * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical. 21954 * 21955 * @public 21956 */ 21957 getVelocity() { 21958 const currentTime = time.now(); 21959 if (!this.canTrackVelocity || 21960 this.prevFrameValue === undefined || 21961 currentTime - this.updatedAt > MAX_VELOCITY_DELTA) { 21962 return 0; 21963 } 21964 const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA); 21965 // Casts because of parseFloat's poor typing 21966 return velocityPerSecond(parseFloat(this.current) - 21967 parseFloat(this.prevFrameValue), delta); 21968 } 21969 /** 21970 * Registers a new animation to control this `MotionValue`. Only one 21971 * animation can drive a `MotionValue` at one time. 21972 * 21973 * ```jsx 21974 * value.start() 21975 * ``` 21976 * 21977 * @param animation - A function that starts the provided animation 21978 * 21979 * @internal 21980 */ 21981 start(startAnimation) { 21982 this.stop(); 21983 return new Promise((resolve) => { 21984 this.hasAnimated = true; 21985 this.animation = startAnimation(resolve); 21986 if (this.events.animationStart) { 21987 this.events.animationStart.notify(); 21988 } 21989 }).then(() => { 21990 if (this.events.animationComplete) { 21991 this.events.animationComplete.notify(); 21992 } 21993 this.clearAnimation(); 21994 }); 21995 } 21996 /** 21997 * Stop the currently active animation. 21998 * 21999 * @public 22000 */ 22001 stop() { 22002 if (this.animation) { 22003 this.animation.stop(); 22004 if (this.events.animationCancel) { 22005 this.events.animationCancel.notify(); 22006 } 22007 } 22008 this.clearAnimation(); 22009 } 22010 /** 22011 * Returns `true` if this value is currently animating. 22012 * 22013 * @public 22014 */ 22015 isAnimating() { 22016 return !!this.animation; 22017 } 22018 clearAnimation() { 22019 delete this.animation; 22020 } 22021 /** 22022 * Destroy and clean up subscribers to this `MotionValue`. 22023 * 22024 * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically 22025 * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually 22026 * created a `MotionValue` via the `motionValue` function. 22027 * 22028 * @public 22029 */ 22030 destroy() { 22031 this.clearListeners(); 22032 this.stop(); 22033 if (this.stopPassiveEffect) { 22034 this.stopPassiveEffect(); 22035 } 22036 } 22037 } 22038 function motionValue(init, options) { 22039 return new MotionValue(init, options); 22040 } 22041 22042 22043 22044 ;// ./node_modules/framer-motion/dist/es/render/utils/setters.mjs 22045 22046 22047 22048 22049 /** 22050 * Set VisualElement's MotionValue, creating a new MotionValue for it if 22051 * it doesn't exist. 22052 */ 22053 function setMotionValue(visualElement, key, value) { 22054 if (visualElement.hasValue(key)) { 22055 visualElement.getValue(key).set(value); 22056 } 22057 else { 22058 visualElement.addValue(key, motionValue(value)); 22059 } 22060 } 22061 function setTarget(visualElement, definition) { 22062 const resolved = resolveVariant(visualElement, definition); 22063 let { transitionEnd = {}, transition = {}, ...target } = resolved || {}; 22064 target = { ...target, ...transitionEnd }; 22065 for (const key in target) { 22066 const value = resolveFinalValueInKeyframes(target[key]); 22067 setMotionValue(visualElement, key, value); 22068 } 22069 } 22070 22071 22072 22073 ;// ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs 22074 22075 22076 22077 22078 22079 22080 22081 22082 /** 22083 * Decide whether we should block this animation. Previously, we achieved this 22084 * just by checking whether the key was listed in protectedKeys, but this 22085 * posed problems if an animation was triggered by afterChildren and protectedKeys 22086 * had been set to true in the meantime. 22087 */ 22088 function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) { 22089 const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true; 22090 needsAnimating[key] = false; 22091 return shouldBlock; 22092 } 22093 function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) { 22094 var _a; 22095 let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition; 22096 const willChange = visualElement.getValue("willChange"); 22097 if (transitionOverride) 22098 transition = transitionOverride; 22099 const animations = []; 22100 const animationTypeState = type && 22101 visualElement.animationState && 22102 visualElement.animationState.getState()[type]; 22103 for (const key in target) { 22104 const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null); 22105 const valueTarget = target[key]; 22106 if (valueTarget === undefined || 22107 (animationTypeState && 22108 shouldBlockAnimation(animationTypeState, key))) { 22109 continue; 22110 } 22111 const valueTransition = { 22112 delay, 22113 elapsed: 0, 22114 ...getValueTransition(transition || {}, key), 22115 }; 22116 /** 22117 * If this is the first time a value is being animated, check 22118 * to see if we're handling off from an existing animation. 22119 */ 22120 let isHandoff = false; 22121 if (window.HandoffAppearAnimations) { 22122 const props = visualElement.getProps(); 22123 const appearId = props[optimizedAppearDataAttribute]; 22124 if (appearId) { 22125 const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame_frame); 22126 if (elapsed !== null) { 22127 valueTransition.elapsed = elapsed; 22128 isHandoff = true; 22129 } 22130 } 22131 } 22132 value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) 22133 ? { type: false } 22134 : valueTransition, visualElement, isHandoff)); 22135 const animation = value.animation; 22136 if (animation) { 22137 if (isWillChangeMotionValue(willChange)) { 22138 willChange.add(key); 22139 animation.then(() => willChange.remove(key)); 22140 } 22141 animations.push(animation); 22142 } 22143 } 22144 if (transitionEnd) { 22145 Promise.all(animations).then(() => { 22146 frame_frame.update(() => { 22147 transitionEnd && setTarget(visualElement, transitionEnd); 22148 }); 22149 }); 22150 } 22151 return animations; 22152 } 22153 22154 22155 22156 ;// ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs 22157 22158 22159 22160 function animateVariant(visualElement, variant, options = {}) { 22161 var _a; 22162 const resolved = resolveVariant(visualElement, variant, options.type === "exit" 22163 ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom 22164 : undefined); 22165 let { transition = visualElement.getDefaultTransition() || {} } = resolved || {}; 22166 if (options.transitionOverride) { 22167 transition = options.transitionOverride; 22168 } 22169 /** 22170 * If we have a variant, create a callback that runs it as an animation. 22171 * Otherwise, we resolve a Promise immediately for a composable no-op. 22172 */ 22173 const getAnimation = resolved 22174 ? () => Promise.all(animateTarget(visualElement, resolved, options)) 22175 : () => Promise.resolve(); 22176 /** 22177 * If we have children, create a callback that runs all their animations. 22178 * Otherwise, we resolve a Promise immediately for a composable no-op. 22179 */ 22180 const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size 22181 ? (forwardDelay = 0) => { 22182 const { delayChildren = 0, staggerChildren, staggerDirection, } = transition; 22183 return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options); 22184 } 22185 : () => Promise.resolve(); 22186 /** 22187 * If the transition explicitly defines a "when" option, we need to resolve either 22188 * this animation or all children animations before playing the other. 22189 */ 22190 const { when } = transition; 22191 if (when) { 22192 const [first, last] = when === "beforeChildren" 22193 ? [getAnimation, getChildAnimations] 22194 : [getChildAnimations, getAnimation]; 22195 return first().then(() => last()); 22196 } 22197 else { 22198 return Promise.all([getAnimation(), getChildAnimations(options.delay)]); 22199 } 22200 } 22201 function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) { 22202 const animations = []; 22203 const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren; 22204 const generateStaggerDuration = staggerDirection === 1 22205 ? (i = 0) => i * staggerChildren 22206 : (i = 0) => maxStaggerDuration - i * staggerChildren; 22207 Array.from(visualElement.variantChildren) 22208 .sort(sortByTreeOrder) 22209 .forEach((child, i) => { 22210 child.notify("AnimationStart", variant); 22211 animations.push(animateVariant(child, variant, { 22212 ...options, 22213 delay: delayChildren + generateStaggerDuration(i), 22214 }).then(() => child.notify("AnimationComplete", variant))); 22215 }); 22216 return Promise.all(animations); 22217 } 22218 function sortByTreeOrder(a, b) { 22219 return a.sortNodePosition(b); 22220 } 22221 22222 22223 22224 ;// ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs 22225 22226 22227 22228 22229 22230 function animateVisualElement(visualElement, definition, options = {}) { 22231 visualElement.notify("AnimationStart", definition); 22232 let animation; 22233 if (Array.isArray(definition)) { 22234 const animations = definition.map((variant) => animateVariant(visualElement, variant, options)); 22235 animation = Promise.all(animations); 22236 } 22237 else if (typeof definition === "string") { 22238 animation = animateVariant(visualElement, definition, options); 22239 } 22240 else { 22241 const resolvedDefinition = typeof definition === "function" 22242 ? resolveVariant(visualElement, definition, options.custom) 22243 : definition; 22244 animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options)); 22245 } 22246 return animation.then(() => { 22247 frame_frame.postRender(() => { 22248 visualElement.notify("AnimationComplete", definition); 22249 }); 22250 }); 22251 } 22252 22253 22254 22255 ;// ./node_modules/framer-motion/dist/es/render/utils/animation-state.mjs 22256 22257 22258 22259 22260 22261 22262 22263 22264 const reversePriorityOrder = [...variantPriorityOrder].reverse(); 22265 const numAnimationTypes = variantPriorityOrder.length; 22266 function animateList(visualElement) { 22267 return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options))); 22268 } 22269 function createAnimationState(visualElement) { 22270 let animate = animateList(visualElement); 22271 const state = createState(); 22272 let isInitialRender = true; 22273 /** 22274 * This function will be used to reduce the animation definitions for 22275 * each active animation type into an object of resolved values for it. 22276 */ 22277 const buildResolvedTypeValues = (type) => (acc, definition) => { 22278 var _a; 22279 const resolved = resolveVariant(visualElement, definition, type === "exit" 22280 ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom 22281 : undefined); 22282 if (resolved) { 22283 const { transition, transitionEnd, ...target } = resolved; 22284 acc = { ...acc, ...target, ...transitionEnd }; 22285 } 22286 return acc; 22287 }; 22288 /** 22289 * This just allows us to inject mocked animation functions 22290 * @internal 22291 */ 22292 function setAnimateFunction(makeAnimator) { 22293 animate = makeAnimator(visualElement); 22294 } 22295 /** 22296 * When we receive new props, we need to: 22297 * 1. Create a list of protected keys for each type. This is a directory of 22298 * value keys that are currently being "handled" by types of a higher priority 22299 * so that whenever an animation is played of a given type, these values are 22300 * protected from being animated. 22301 * 2. Determine if an animation type needs animating. 22302 * 3. Determine if any values have been removed from a type and figure out 22303 * what to animate those to. 22304 */ 22305 function animateChanges(changedActiveType) { 22306 const props = visualElement.getProps(); 22307 const context = visualElement.getVariantContext(true) || {}; 22308 /** 22309 * A list of animations that we'll build into as we iterate through the animation 22310 * types. This will get executed at the end of the function. 22311 */ 22312 const animations = []; 22313 /** 22314 * Keep track of which values have been removed. Then, as we hit lower priority 22315 * animation types, we can check if they contain removed values and animate to that. 22316 */ 22317 const removedKeys = new Set(); 22318 /** 22319 * A dictionary of all encountered keys. This is an object to let us build into and 22320 * copy it without iteration. Each time we hit an animation type we set its protected 22321 * keys - the keys its not allowed to animate - to the latest version of this object. 22322 */ 22323 let encounteredKeys = {}; 22324 /** 22325 * If a variant has been removed at a given index, and this component is controlling 22326 * variant animations, we want to ensure lower-priority variants are forced to animate. 22327 */ 22328 let removedVariantIndex = Infinity; 22329 /** 22330 * Iterate through all animation types in reverse priority order. For each, we want to 22331 * detect which values it's handling and whether or not they've changed (and therefore 22332 * need to be animated). If any values have been removed, we want to detect those in 22333 * lower priority props and flag for animation. 22334 */ 22335 for (let i = 0; i < numAnimationTypes; i++) { 22336 const type = reversePriorityOrder[i]; 22337 const typeState = state[type]; 22338 const prop = props[type] !== undefined 22339 ? props[type] 22340 : context[type]; 22341 const propIsVariant = isVariantLabel(prop); 22342 /** 22343 * If this type has *just* changed isActive status, set activeDelta 22344 * to that status. Otherwise set to null. 22345 */ 22346 const activeDelta = type === changedActiveType ? typeState.isActive : null; 22347 if (activeDelta === false) 22348 removedVariantIndex = i; 22349 /** 22350 * If this prop is an inherited variant, rather than been set directly on the 22351 * component itself, we want to make sure we allow the parent to trigger animations. 22352 * 22353 * TODO: Can probably change this to a !isControllingVariants check 22354 */ 22355 let isInherited = prop === context[type] && 22356 prop !== props[type] && 22357 propIsVariant; 22358 /** 22359 * 22360 */ 22361 if (isInherited && 22362 isInitialRender && 22363 visualElement.manuallyAnimateOnMount) { 22364 isInherited = false; 22365 } 22366 /** 22367 * Set all encountered keys so far as the protected keys for this type. This will 22368 * be any key that has been animated or otherwise handled by active, higher-priortiy types. 22369 */ 22370 typeState.protectedKeys = { ...encounteredKeys }; 22371 // Check if we can skip analysing this prop early 22372 if ( 22373 // If it isn't active and hasn't *just* been set as inactive 22374 (!typeState.isActive && activeDelta === null) || 22375 // If we didn't and don't have any defined prop for this animation type 22376 (!prop && !typeState.prevProp) || 22377 // Or if the prop doesn't define an animation 22378 isAnimationControls(prop) || 22379 typeof prop === "boolean") { 22380 continue; 22381 } 22382 /** 22383 * As we go look through the values defined on this type, if we detect 22384 * a changed value or a value that was removed in a higher priority, we set 22385 * this to true and add this prop to the animation list. 22386 */ 22387 const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop); 22388 let shouldAnimateType = variantDidChange || 22389 // If we're making this variant active, we want to always make it active 22390 (type === changedActiveType && 22391 typeState.isActive && 22392 !isInherited && 22393 propIsVariant) || 22394 // If we removed a higher-priority variant (i is in reverse order) 22395 (i > removedVariantIndex && propIsVariant); 22396 let handledRemovedValues = false; 22397 /** 22398 * As animations can be set as variant lists, variants or target objects, we 22399 * coerce everything to an array if it isn't one already 22400 */ 22401 const definitionList = Array.isArray(prop) ? prop : [prop]; 22402 /** 22403 * Build an object of all the resolved values. We'll use this in the subsequent 22404 * animateChanges calls to determine whether a value has changed. 22405 */ 22406 let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {}); 22407 if (activeDelta === false) 22408 resolvedValues = {}; 22409 /** 22410 * Now we need to loop through all the keys in the prev prop and this prop, 22411 * and decide: 22412 * 1. If the value has changed, and needs animating 22413 * 2. If it has been removed, and needs adding to the removedKeys set 22414 * 3. If it has been removed in a higher priority type and needs animating 22415 * 4. If it hasn't been removed in a higher priority but hasn't changed, and 22416 * needs adding to the type's protectedKeys list. 22417 */ 22418 const { prevResolvedValues = {} } = typeState; 22419 const allKeys = { 22420 ...prevResolvedValues, 22421 ...resolvedValues, 22422 }; 22423 const markToAnimate = (key) => { 22424 shouldAnimateType = true; 22425 if (removedKeys.has(key)) { 22426 handledRemovedValues = true; 22427 removedKeys.delete(key); 22428 } 22429 typeState.needsAnimating[key] = true; 22430 const motionValue = visualElement.getValue(key); 22431 if (motionValue) 22432 motionValue.liveStyle = false; 22433 }; 22434 for (const key in allKeys) { 22435 const next = resolvedValues[key]; 22436 const prev = prevResolvedValues[key]; 22437 // If we've already handled this we can just skip ahead 22438 if (encounteredKeys.hasOwnProperty(key)) 22439 continue; 22440 /** 22441 * If the value has changed, we probably want to animate it. 22442 */ 22443 let valueHasChanged = false; 22444 if (isKeyframesTarget(next) && isKeyframesTarget(prev)) { 22445 valueHasChanged = !shallowCompare(next, prev); 22446 } 22447 else { 22448 valueHasChanged = next !== prev; 22449 } 22450 if (valueHasChanged) { 22451 if (next !== undefined && next !== null) { 22452 // If next is defined and doesn't equal prev, it needs animating 22453 markToAnimate(key); 22454 } 22455 else { 22456 // If it's undefined, it's been removed. 22457 removedKeys.add(key); 22458 } 22459 } 22460 else if (next !== undefined && removedKeys.has(key)) { 22461 /** 22462 * If next hasn't changed and it isn't undefined, we want to check if it's 22463 * been removed by a higher priority 22464 */ 22465 markToAnimate(key); 22466 } 22467 else { 22468 /** 22469 * If it hasn't changed, we add it to the list of protected values 22470 * to ensure it doesn't get animated. 22471 */ 22472 typeState.protectedKeys[key] = true; 22473 } 22474 } 22475 /** 22476 * Update the typeState so next time animateChanges is called we can compare the 22477 * latest prop and resolvedValues to these. 22478 */ 22479 typeState.prevProp = prop; 22480 typeState.prevResolvedValues = resolvedValues; 22481 /** 22482 * 22483 */ 22484 if (typeState.isActive) { 22485 encounteredKeys = { ...encounteredKeys, ...resolvedValues }; 22486 } 22487 if (isInitialRender && visualElement.blockInitialAnimation) { 22488 shouldAnimateType = false; 22489 } 22490 /** 22491 * If this is an inherited prop we want to hard-block animations 22492 */ 22493 if (shouldAnimateType && (!isInherited || handledRemovedValues)) { 22494 animations.push(...definitionList.map((animation) => ({ 22495 animation: animation, 22496 options: { type }, 22497 }))); 22498 } 22499 } 22500 /** 22501 * If there are some removed value that haven't been dealt with, 22502 * we need to create a new animation that falls back either to the value 22503 * defined in the style prop, or the last read value. 22504 */ 22505 if (removedKeys.size) { 22506 const fallbackAnimation = {}; 22507 removedKeys.forEach((key) => { 22508 const fallbackTarget = visualElement.getBaseTarget(key); 22509 const motionValue = visualElement.getValue(key); 22510 if (motionValue) 22511 motionValue.liveStyle = true; 22512 // @ts-expect-error - @mattgperry to figure if we should do something here 22513 fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null; 22514 }); 22515 animations.push({ animation: fallbackAnimation }); 22516 } 22517 let shouldAnimate = Boolean(animations.length); 22518 if (isInitialRender && 22519 (props.initial === false || props.initial === props.animate) && 22520 !visualElement.manuallyAnimateOnMount) { 22521 shouldAnimate = false; 22522 } 22523 isInitialRender = false; 22524 return shouldAnimate ? animate(animations) : Promise.resolve(); 22525 } 22526 /** 22527 * Change whether a certain animation type is active. 22528 */ 22529 function setActive(type, isActive) { 22530 var _a; 22531 // If the active state hasn't changed, we can safely do nothing here 22532 if (state[type].isActive === isActive) 22533 return Promise.resolve(); 22534 // Propagate active change to children 22535 (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); }); 22536 state[type].isActive = isActive; 22537 const animations = animateChanges(type); 22538 for (const key in state) { 22539 state[key].protectedKeys = {}; 22540 } 22541 return animations; 22542 } 22543 return { 22544 animateChanges, 22545 setActive, 22546 setAnimateFunction, 22547 getState: () => state, 22548 }; 22549 } 22550 function checkVariantsDidChange(prev, next) { 22551 if (typeof next === "string") { 22552 return next !== prev; 22553 } 22554 else if (Array.isArray(next)) { 22555 return !shallowCompare(next, prev); 22556 } 22557 return false; 22558 } 22559 function createTypeState(isActive = false) { 22560 return { 22561 isActive, 22562 protectedKeys: {}, 22563 needsAnimating: {}, 22564 prevResolvedValues: {}, 22565 }; 22566 } 22567 function createState() { 22568 return { 22569 animate: createTypeState(true), 22570 whileInView: createTypeState(), 22571 whileHover: createTypeState(), 22572 whileTap: createTypeState(), 22573 whileDrag: createTypeState(), 22574 whileFocus: createTypeState(), 22575 exit: createTypeState(), 22576 }; 22577 } 22578 22579 22580 22581 ;// ./node_modules/framer-motion/dist/es/motion/features/animation/index.mjs 22582 22583 22584 22585 22586 class AnimationFeature extends Feature { 22587 /** 22588 * We dynamically generate the AnimationState manager as it contains a reference 22589 * to the underlying animation library. We only want to load that if we load this, 22590 * so people can optionally code split it out using the `m` component. 22591 */ 22592 constructor(node) { 22593 super(node); 22594 node.animationState || (node.animationState = createAnimationState(node)); 22595 } 22596 updateAnimationControlsSubscription() { 22597 const { animate } = this.node.getProps(); 22598 this.unmount(); 22599 if (isAnimationControls(animate)) { 22600 this.unmount = animate.subscribe(this.node); 22601 } 22602 } 22603 /** 22604 * Subscribe any provided AnimationControls to the component's VisualElement 22605 */ 22606 mount() { 22607 this.updateAnimationControlsSubscription(); 22608 } 22609 update() { 22610 const { animate } = this.node.getProps(); 22611 const { animate: prevAnimate } = this.node.prevProps || {}; 22612 if (animate !== prevAnimate) { 22613 this.updateAnimationControlsSubscription(); 22614 } 22615 } 22616 unmount() { } 22617 } 22618 22619 22620 22621 ;// ./node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs 22622 22623 22624 let id = 0; 22625 class ExitAnimationFeature extends Feature { 22626 constructor() { 22627 super(...arguments); 22628 this.id = id++; 22629 } 22630 update() { 22631 if (!this.node.presenceContext) 22632 return; 22633 const { isPresent, onExitComplete } = this.node.presenceContext; 22634 const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {}; 22635 if (!this.node.animationState || isPresent === prevIsPresent) { 22636 return; 22637 } 22638 const exitAnimation = this.node.animationState.setActive("exit", !isPresent); 22639 if (onExitComplete && !isPresent) { 22640 exitAnimation.then(() => onExitComplete(this.id)); 22641 } 22642 } 22643 mount() { 22644 const { register } = this.node.presenceContext || {}; 22645 if (register) { 22646 this.unmount = register(this.id); 22647 } 22648 } 22649 unmount() { } 22650 } 22651 22652 22653 22654 ;// ./node_modules/framer-motion/dist/es/motion/features/animations.mjs 22655 22656 22657 22658 const animations = { 22659 animation: { 22660 Feature: AnimationFeature, 22661 }, 22662 exit: { 22663 Feature: ExitAnimationFeature, 22664 }, 22665 }; 22666 22667 22668 22669 ;// ./node_modules/framer-motion/dist/es/utils/distance.mjs 22670 const distance = (a, b) => Math.abs(a - b); 22671 function distance2D(a, b) { 22672 // Multi-dimensional 22673 const xDelta = distance(a.x, b.x); 22674 const yDelta = distance(a.y, b.y); 22675 return Math.sqrt(xDelta ** 2 + yDelta ** 2); 22676 } 22677 22678 22679 22680 ;// ./node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs 22681 22682 22683 22684 22685 22686 22687 22688 22689 /** 22690 * @internal 22691 */ 22692 class PanSession { 22693 constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) { 22694 /** 22695 * @internal 22696 */ 22697 this.startEvent = null; 22698 /** 22699 * @internal 22700 */ 22701 this.lastMoveEvent = null; 22702 /** 22703 * @internal 22704 */ 22705 this.lastMoveEventInfo = null; 22706 /** 22707 * @internal 22708 */ 22709 this.handlers = {}; 22710 /** 22711 * @internal 22712 */ 22713 this.contextWindow = window; 22714 this.updatePoint = () => { 22715 if (!(this.lastMoveEvent && this.lastMoveEventInfo)) 22716 return; 22717 const info = getPanInfo(this.lastMoveEventInfo, this.history); 22718 const isPanStarted = this.startEvent !== null; 22719 // Only start panning if the offset is larger than 3 pixels. If we make it 22720 // any larger than this we'll want to reset the pointer history 22721 // on the first update to avoid visual snapping to the cursoe. 22722 const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3; 22723 if (!isPanStarted && !isDistancePastThreshold) 22724 return; 22725 const { point } = info; 22726 const { timestamp } = frameData; 22727 this.history.push({ ...point, timestamp }); 22728 const { onStart, onMove } = this.handlers; 22729 if (!isPanStarted) { 22730 onStart && onStart(this.lastMoveEvent, info); 22731 this.startEvent = this.lastMoveEvent; 22732 } 22733 onMove && onMove(this.lastMoveEvent, info); 22734 }; 22735 this.handlePointerMove = (event, info) => { 22736 this.lastMoveEvent = event; 22737 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint); 22738 // Throttle mouse move event to once per frame 22739 frame_frame.update(this.updatePoint, true); 22740 }; 22741 this.handlePointerUp = (event, info) => { 22742 this.end(); 22743 const { onEnd, onSessionEnd, resumeAnimation } = this.handlers; 22744 if (this.dragSnapToOrigin) 22745 resumeAnimation && resumeAnimation(); 22746 if (!(this.lastMoveEvent && this.lastMoveEventInfo)) 22747 return; 22748 const panInfo = getPanInfo(event.type === "pointercancel" 22749 ? this.lastMoveEventInfo 22750 : transformPoint(info, this.transformPagePoint), this.history); 22751 if (this.startEvent && onEnd) { 22752 onEnd(event, panInfo); 22753 } 22754 onSessionEnd && onSessionEnd(event, panInfo); 22755 }; 22756 // If we have more than one touch, don't start detecting this gesture 22757 if (!isPrimaryPointer(event)) 22758 return; 22759 this.dragSnapToOrigin = dragSnapToOrigin; 22760 this.handlers = handlers; 22761 this.transformPagePoint = transformPagePoint; 22762 this.contextWindow = contextWindow || window; 22763 const info = extractEventInfo(event); 22764 const initialInfo = transformPoint(info, this.transformPagePoint); 22765 const { point } = initialInfo; 22766 const { timestamp } = frameData; 22767 this.history = [{ ...point, timestamp }]; 22768 const { onSessionStart } = handlers; 22769 onSessionStart && 22770 onSessionStart(event, getPanInfo(initialInfo, this.history)); 22771 this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp)); 22772 } 22773 updateHandlers(handlers) { 22774 this.handlers = handlers; 22775 } 22776 end() { 22777 this.removeListeners && this.removeListeners(); 22778 cancelFrame(this.updatePoint); 22779 } 22780 } 22781 function transformPoint(info, transformPagePoint) { 22782 return transformPagePoint ? { point: transformPagePoint(info.point) } : info; 22783 } 22784 function subtractPoint(a, b) { 22785 return { x: a.x - b.x, y: a.y - b.y }; 22786 } 22787 function getPanInfo({ point }, history) { 22788 return { 22789 point, 22790 delta: subtractPoint(point, lastDevicePoint(history)), 22791 offset: subtractPoint(point, startDevicePoint(history)), 22792 velocity: getVelocity(history, 0.1), 22793 }; 22794 } 22795 function startDevicePoint(history) { 22796 return history[0]; 22797 } 22798 function lastDevicePoint(history) { 22799 return history[history.length - 1]; 22800 } 22801 function getVelocity(history, timeDelta) { 22802 if (history.length < 2) { 22803 return { x: 0, y: 0 }; 22804 } 22805 let i = history.length - 1; 22806 let timestampedPoint = null; 22807 const lastPoint = lastDevicePoint(history); 22808 while (i >= 0) { 22809 timestampedPoint = history[i]; 22810 if (lastPoint.timestamp - timestampedPoint.timestamp > 22811 secondsToMilliseconds(timeDelta)) { 22812 break; 22813 } 22814 i--; 22815 } 22816 if (!timestampedPoint) { 22817 return { x: 0, y: 0 }; 22818 } 22819 const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp); 22820 if (time === 0) { 22821 return { x: 0, y: 0 }; 22822 } 22823 const currentVelocity = { 22824 x: (lastPoint.x - timestampedPoint.x) / time, 22825 y: (lastPoint.y - timestampedPoint.y) / time, 22826 }; 22827 if (currentVelocity.x === Infinity) { 22828 currentVelocity.x = 0; 22829 } 22830 if (currentVelocity.y === Infinity) { 22831 currentVelocity.y = 0; 22832 } 22833 return currentVelocity; 22834 } 22835 22836 22837 22838 ;// ./node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs 22839 22840 22841 function calcLength(axis) { 22842 return axis.max - axis.min; 22843 } 22844 function isNear(value, target = 0, maxDistance = 0.01) { 22845 return Math.abs(value - target) <= maxDistance; 22846 } 22847 function calcAxisDelta(delta, source, target, origin = 0.5) { 22848 delta.origin = origin; 22849 delta.originPoint = mixNumber(source.min, source.max, delta.origin); 22850 delta.scale = calcLength(target) / calcLength(source); 22851 if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale)) 22852 delta.scale = 1; 22853 delta.translate = 22854 mixNumber(target.min, target.max, delta.origin) - delta.originPoint; 22855 if (isNear(delta.translate) || isNaN(delta.translate)) 22856 delta.translate = 0; 22857 } 22858 function calcBoxDelta(delta, source, target, origin) { 22859 calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined); 22860 calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined); 22861 } 22862 function calcRelativeAxis(target, relative, parent) { 22863 target.min = parent.min + relative.min; 22864 target.max = target.min + calcLength(relative); 22865 } 22866 function calcRelativeBox(target, relative, parent) { 22867 calcRelativeAxis(target.x, relative.x, parent.x); 22868 calcRelativeAxis(target.y, relative.y, parent.y); 22869 } 22870 function calcRelativeAxisPosition(target, layout, parent) { 22871 target.min = layout.min - parent.min; 22872 target.max = target.min + calcLength(layout); 22873 } 22874 function calcRelativePosition(target, layout, parent) { 22875 calcRelativeAxisPosition(target.x, layout.x, parent.x); 22876 calcRelativeAxisPosition(target.y, layout.y, parent.y); 22877 } 22878 22879 22880 22881 ;// ./node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs 22882 22883 22884 22885 22886 22887 /** 22888 * Apply constraints to a point. These constraints are both physical along an 22889 * axis, and an elastic factor that determines how much to constrain the point 22890 * by if it does lie outside the defined parameters. 22891 */ 22892 function applyConstraints(point, { min, max }, elastic) { 22893 if (min !== undefined && point < min) { 22894 // If we have a min point defined, and this is outside of that, constrain 22895 point = elastic 22896 ? mixNumber(min, point, elastic.min) 22897 : Math.max(point, min); 22898 } 22899 else if (max !== undefined && point > max) { 22900 // If we have a max point defined, and this is outside of that, constrain 22901 point = elastic 22902 ? mixNumber(max, point, elastic.max) 22903 : Math.min(point, max); 22904 } 22905 return point; 22906 } 22907 /** 22908 * Calculate constraints in terms of the viewport when defined relatively to the 22909 * measured axis. This is measured from the nearest edge, so a max constraint of 200 22910 * on an axis with a max value of 300 would return a constraint of 500 - axis length 22911 */ 22912 function calcRelativeAxisConstraints(axis, min, max) { 22913 return { 22914 min: min !== undefined ? axis.min + min : undefined, 22915 max: max !== undefined 22916 ? axis.max + max - (axis.max - axis.min) 22917 : undefined, 22918 }; 22919 } 22920 /** 22921 * Calculate constraints in terms of the viewport when 22922 * defined relatively to the measured bounding box. 22923 */ 22924 function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) { 22925 return { 22926 x: calcRelativeAxisConstraints(layoutBox.x, left, right), 22927 y: calcRelativeAxisConstraints(layoutBox.y, top, bottom), 22928 }; 22929 } 22930 /** 22931 * Calculate viewport constraints when defined as another viewport-relative axis 22932 */ 22933 function calcViewportAxisConstraints(layoutAxis, constraintsAxis) { 22934 let min = constraintsAxis.min - layoutAxis.min; 22935 let max = constraintsAxis.max - layoutAxis.max; 22936 // If the constraints axis is actually smaller than the layout axis then we can 22937 // flip the constraints 22938 if (constraintsAxis.max - constraintsAxis.min < 22939 layoutAxis.max - layoutAxis.min) { 22940 [min, max] = [max, min]; 22941 } 22942 return { min, max }; 22943 } 22944 /** 22945 * Calculate viewport constraints when defined as another viewport-relative box 22946 */ 22947 function calcViewportConstraints(layoutBox, constraintsBox) { 22948 return { 22949 x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x), 22950 y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y), 22951 }; 22952 } 22953 /** 22954 * Calculate a transform origin relative to the source axis, between 0-1, that results 22955 * in an asthetically pleasing scale/transform needed to project from source to target. 22956 */ 22957 function constraints_calcOrigin(source, target) { 22958 let origin = 0.5; 22959 const sourceLength = calcLength(source); 22960 const targetLength = calcLength(target); 22961 if (targetLength > sourceLength) { 22962 origin = progress(target.min, target.max - sourceLength, source.min); 22963 } 22964 else if (sourceLength > targetLength) { 22965 origin = progress(source.min, source.max - targetLength, target.min); 22966 } 22967 return clamp_clamp(0, 1, origin); 22968 } 22969 /** 22970 * Rebase the calculated viewport constraints relative to the layout.min point. 22971 */ 22972 function rebaseAxisConstraints(layout, constraints) { 22973 const relativeConstraints = {}; 22974 if (constraints.min !== undefined) { 22975 relativeConstraints.min = constraints.min - layout.min; 22976 } 22977 if (constraints.max !== undefined) { 22978 relativeConstraints.max = constraints.max - layout.min; 22979 } 22980 return relativeConstraints; 22981 } 22982 const defaultElastic = 0.35; 22983 /** 22984 * Accepts a dragElastic prop and returns resolved elastic values for each axis. 22985 */ 22986 function resolveDragElastic(dragElastic = defaultElastic) { 22987 if (dragElastic === false) { 22988 dragElastic = 0; 22989 } 22990 else if (dragElastic === true) { 22991 dragElastic = defaultElastic; 22992 } 22993 return { 22994 x: resolveAxisElastic(dragElastic, "left", "right"), 22995 y: resolveAxisElastic(dragElastic, "top", "bottom"), 22996 }; 22997 } 22998 function resolveAxisElastic(dragElastic, minLabel, maxLabel) { 22999 return { 23000 min: resolvePointElastic(dragElastic, minLabel), 23001 max: resolvePointElastic(dragElastic, maxLabel), 23002 }; 23003 } 23004 function resolvePointElastic(dragElastic, label) { 23005 return typeof dragElastic === "number" 23006 ? dragElastic 23007 : dragElastic[label] || 0; 23008 } 23009 23010 23011 23012 ;// ./node_modules/framer-motion/dist/es/projection/geometry/models.mjs 23013 const createAxisDelta = () => ({ 23014 translate: 0, 23015 scale: 1, 23016 origin: 0, 23017 originPoint: 0, 23018 }); 23019 const createDelta = () => ({ 23020 x: createAxisDelta(), 23021 y: createAxisDelta(), 23022 }); 23023 const createAxis = () => ({ min: 0, max: 0 }); 23024 const createBox = () => ({ 23025 x: createAxis(), 23026 y: createAxis(), 23027 }); 23028 23029 23030 23031 ;// ./node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs 23032 function eachAxis(callback) { 23033 return [callback("x"), callback("y")]; 23034 } 23035 23036 23037 23038 ;// ./node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs 23039 /** 23040 * Bounding boxes tend to be defined as top, left, right, bottom. For various operations 23041 * it's easier to consider each axis individually. This function returns a bounding box 23042 * as a map of single-axis min/max values. 23043 */ 23044 function convertBoundingBoxToBox({ top, left, right, bottom, }) { 23045 return { 23046 x: { min: left, max: right }, 23047 y: { min: top, max: bottom }, 23048 }; 23049 } 23050 function convertBoxToBoundingBox({ x, y }) { 23051 return { top: y.min, right: x.max, bottom: y.max, left: x.min }; 23052 } 23053 /** 23054 * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function 23055 * provided by Framer to allow measured points to be corrected for device scaling. This is used 23056 * when measuring DOM elements and DOM event points. 23057 */ 23058 function transformBoxPoints(point, transformPoint) { 23059 if (!transformPoint) 23060 return point; 23061 const topLeft = transformPoint({ x: point.left, y: point.top }); 23062 const bottomRight = transformPoint({ x: point.right, y: point.bottom }); 23063 return { 23064 top: topLeft.y, 23065 left: topLeft.x, 23066 bottom: bottomRight.y, 23067 right: bottomRight.x, 23068 }; 23069 } 23070 23071 23072 23073 ;// ./node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs 23074 function isIdentityScale(scale) { 23075 return scale === undefined || scale === 1; 23076 } 23077 function hasScale({ scale, scaleX, scaleY }) { 23078 return (!isIdentityScale(scale) || 23079 !isIdentityScale(scaleX) || 23080 !isIdentityScale(scaleY)); 23081 } 23082 function hasTransform(values) { 23083 return (hasScale(values) || 23084 has2DTranslate(values) || 23085 values.z || 23086 values.rotate || 23087 values.rotateX || 23088 values.rotateY || 23089 values.skewX || 23090 values.skewY); 23091 } 23092 function has2DTranslate(values) { 23093 return is2DTranslate(values.x) || is2DTranslate(values.y); 23094 } 23095 function is2DTranslate(value) { 23096 return value && value !== "0%"; 23097 } 23098 23099 23100 23101 ;// ./node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs 23102 23103 23104 23105 /** 23106 * Scales a point based on a factor and an originPoint 23107 */ 23108 function scalePoint(point, scale, originPoint) { 23109 const distanceFromOrigin = point - originPoint; 23110 const scaled = scale * distanceFromOrigin; 23111 return originPoint + scaled; 23112 } 23113 /** 23114 * Applies a translate/scale delta to a point 23115 */ 23116 function applyPointDelta(point, translate, scale, originPoint, boxScale) { 23117 if (boxScale !== undefined) { 23118 point = scalePoint(point, boxScale, originPoint); 23119 } 23120 return scalePoint(point, scale, originPoint) + translate; 23121 } 23122 /** 23123 * Applies a translate/scale delta to an axis 23124 */ 23125 function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) { 23126 axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale); 23127 axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale); 23128 } 23129 /** 23130 * Applies a translate/scale delta to a box 23131 */ 23132 function applyBoxDelta(box, { x, y }) { 23133 applyAxisDelta(box.x, x.translate, x.scale, x.originPoint); 23134 applyAxisDelta(box.y, y.translate, y.scale, y.originPoint); 23135 } 23136 /** 23137 * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms 23138 * in a tree upon our box before then calculating how to project it into our desired viewport-relative box 23139 * 23140 * This is the final nested loop within updateLayoutDelta for future refactoring 23141 */ 23142 function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) { 23143 const treeLength = treePath.length; 23144 if (!treeLength) 23145 return; 23146 // Reset the treeScale 23147 treeScale.x = treeScale.y = 1; 23148 let node; 23149 let delta; 23150 for (let i = 0; i < treeLength; i++) { 23151 node = treePath[i]; 23152 delta = node.projectionDelta; 23153 /** 23154 * TODO: Prefer to remove this, but currently we have motion components with 23155 * display: contents in Framer. 23156 */ 23157 const instance = node.instance; 23158 if (instance && 23159 instance.style && 23160 instance.style.display === "contents") { 23161 continue; 23162 } 23163 if (isSharedTransition && 23164 node.options.layoutScroll && 23165 node.scroll && 23166 node !== node.root) { 23167 transformBox(box, { 23168 x: -node.scroll.offset.x, 23169 y: -node.scroll.offset.y, 23170 }); 23171 } 23172 if (delta) { 23173 // Incoporate each ancestor's scale into a culmulative treeScale for this component 23174 treeScale.x *= delta.x.scale; 23175 treeScale.y *= delta.y.scale; 23176 // Apply each ancestor's calculated delta into this component's recorded layout box 23177 applyBoxDelta(box, delta); 23178 } 23179 if (isSharedTransition && hasTransform(node.latestValues)) { 23180 transformBox(box, node.latestValues); 23181 } 23182 } 23183 /** 23184 * Snap tree scale back to 1 if it's within a non-perceivable threshold. 23185 * This will help reduce useless scales getting rendered. 23186 */ 23187 treeScale.x = snapToDefault(treeScale.x); 23188 treeScale.y = snapToDefault(treeScale.y); 23189 } 23190 function snapToDefault(scale) { 23191 if (Number.isInteger(scale)) 23192 return scale; 23193 return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1; 23194 } 23195 function translateAxis(axis, distance) { 23196 axis.min = axis.min + distance; 23197 axis.max = axis.max + distance; 23198 } 23199 /** 23200 * Apply a transform to an axis from the latest resolved motion values. 23201 * This function basically acts as a bridge between a flat motion value map 23202 * and applyAxisDelta 23203 */ 23204 function transformAxis(axis, transforms, [key, scaleKey, originKey]) { 23205 const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5; 23206 const originPoint = mixNumber(axis.min, axis.max, axisOrigin); 23207 // Apply the axis delta to the final axis 23208 applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale); 23209 } 23210 /** 23211 * The names of the motion values we want to apply as translation, scale and origin. 23212 */ 23213 const xKeys = ["x", "scaleX", "originX"]; 23214 const yKeys = ["y", "scaleY", "originY"]; 23215 /** 23216 * Apply a transform to a box from the latest resolved motion values. 23217 */ 23218 function transformBox(box, transform) { 23219 transformAxis(box.x, transform, xKeys); 23220 transformAxis(box.y, transform, yKeys); 23221 } 23222 23223 23224 23225 ;// ./node_modules/framer-motion/dist/es/projection/utils/measure.mjs 23226 23227 23228 23229 function measureViewportBox(instance, transformPoint) { 23230 return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint)); 23231 } 23232 function measurePageBox(element, rootProjectionNode, transformPagePoint) { 23233 const viewportBox = measureViewportBox(element, transformPagePoint); 23234 const { scroll } = rootProjectionNode; 23235 if (scroll) { 23236 translateAxis(viewportBox.x, scroll.offset.x); 23237 translateAxis(viewportBox.y, scroll.offset.y); 23238 } 23239 return viewportBox; 23240 } 23241 23242 23243 23244 ;// ./node_modules/framer-motion/dist/es/utils/get-context-window.mjs 23245 // Fixes https://github.com/framer/motion/issues/2270 23246 const getContextWindow = ({ current }) => { 23247 return current ? current.ownerDocument.defaultView : null; 23248 }; 23249 23250 23251 23252 ;// ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs 23253 23254 23255 23256 23257 23258 23259 23260 23261 23262 23263 23264 23265 23266 23267 23268 23269 23270 23271 23272 const elementDragControls = new WeakMap(); 23273 /** 23274 * 23275 */ 23276 // let latestPointerEvent: PointerEvent 23277 class VisualElementDragControls { 23278 constructor(visualElement) { 23279 // This is a reference to the global drag gesture lock, ensuring only one component 23280 // can "capture" the drag of one or both axes. 23281 // TODO: Look into moving this into pansession? 23282 this.openGlobalLock = null; 23283 this.isDragging = false; 23284 this.currentDirection = null; 23285 this.originPoint = { x: 0, y: 0 }; 23286 /** 23287 * The permitted boundaries of travel, in pixels. 23288 */ 23289 this.constraints = false; 23290 this.hasMutatedConstraints = false; 23291 /** 23292 * The per-axis resolved elastic values. 23293 */ 23294 this.elastic = createBox(); 23295 this.visualElement = visualElement; 23296 } 23297 start(originEvent, { snapToCursor = false } = {}) { 23298 /** 23299 * Don't start dragging if this component is exiting 23300 */ 23301 const { presenceContext } = this.visualElement; 23302 if (presenceContext && presenceContext.isPresent === false) 23303 return; 23304 const onSessionStart = (event) => { 23305 const { dragSnapToOrigin } = this.getProps(); 23306 // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch 23307 // the component. 23308 dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation(); 23309 if (snapToCursor) { 23310 this.snapToCursor(extractEventInfo(event, "page").point); 23311 } 23312 }; 23313 const onStart = (event, info) => { 23314 // Attempt to grab the global drag gesture lock - maybe make this part of PanSession 23315 const { drag, dragPropagation, onDragStart } = this.getProps(); 23316 if (drag && !dragPropagation) { 23317 if (this.openGlobalLock) 23318 this.openGlobalLock(); 23319 this.openGlobalLock = getGlobalLock(drag); 23320 // If we don 't have the lock, don't start dragging 23321 if (!this.openGlobalLock) 23322 return; 23323 } 23324 this.isDragging = true; 23325 this.currentDirection = null; 23326 this.resolveConstraints(); 23327 if (this.visualElement.projection) { 23328 this.visualElement.projection.isAnimationBlocked = true; 23329 this.visualElement.projection.target = undefined; 23330 } 23331 /** 23332 * Record gesture origin 23333 */ 23334 eachAxis((axis) => { 23335 let current = this.getAxisMotionValue(axis).get() || 0; 23336 /** 23337 * If the MotionValue is a percentage value convert to px 23338 */ 23339 if (percent.test(current)) { 23340 const { projection } = this.visualElement; 23341 if (projection && projection.layout) { 23342 const measuredAxis = projection.layout.layoutBox[axis]; 23343 if (measuredAxis) { 23344 const length = calcLength(measuredAxis); 23345 current = length * (parseFloat(current) / 100); 23346 } 23347 } 23348 } 23349 this.originPoint[axis] = current; 23350 }); 23351 // Fire onDragStart event 23352 if (onDragStart) { 23353 frame_frame.postRender(() => onDragStart(event, info)); 23354 } 23355 const { animationState } = this.visualElement; 23356 animationState && animationState.setActive("whileDrag", true); 23357 }; 23358 const onMove = (event, info) => { 23359 // latestPointerEvent = event 23360 const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps(); 23361 // If we didn't successfully receive the gesture lock, early return. 23362 if (!dragPropagation && !this.openGlobalLock) 23363 return; 23364 const { offset } = info; 23365 // Attempt to detect drag direction if directionLock is true 23366 if (dragDirectionLock && this.currentDirection === null) { 23367 this.currentDirection = getCurrentDirection(offset); 23368 // If we've successfully set a direction, notify listener 23369 if (this.currentDirection !== null) { 23370 onDirectionLock && onDirectionLock(this.currentDirection); 23371 } 23372 return; 23373 } 23374 // Update each point with the latest position 23375 this.updateAxis("x", info.point, offset); 23376 this.updateAxis("y", info.point, offset); 23377 /** 23378 * Ideally we would leave the renderer to fire naturally at the end of 23379 * this frame but if the element is about to change layout as the result 23380 * of a re-render we want to ensure the browser can read the latest 23381 * bounding box to ensure the pointer and element don't fall out of sync. 23382 */ 23383 this.visualElement.render(); 23384 /** 23385 * This must fire after the render call as it might trigger a state 23386 * change which itself might trigger a layout update. 23387 */ 23388 onDrag && onDrag(event, info); 23389 }; 23390 const onSessionEnd = (event, info) => this.stop(event, info); 23391 const resumeAnimation = () => eachAxis((axis) => { 23392 var _a; 23393 return this.getAnimationState(axis) === "paused" && 23394 ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play()); 23395 }); 23396 const { dragSnapToOrigin } = this.getProps(); 23397 this.panSession = new PanSession(originEvent, { 23398 onSessionStart, 23399 onStart, 23400 onMove, 23401 onSessionEnd, 23402 resumeAnimation, 23403 }, { 23404 transformPagePoint: this.visualElement.getTransformPagePoint(), 23405 dragSnapToOrigin, 23406 contextWindow: getContextWindow(this.visualElement), 23407 }); 23408 } 23409 stop(event, info) { 23410 const isDragging = this.isDragging; 23411 this.cancel(); 23412 if (!isDragging) 23413 return; 23414 const { velocity } = info; 23415 this.startAnimation(velocity); 23416 const { onDragEnd } = this.getProps(); 23417 if (onDragEnd) { 23418 frame_frame.postRender(() => onDragEnd(event, info)); 23419 } 23420 } 23421 cancel() { 23422 this.isDragging = false; 23423 const { projection, animationState } = this.visualElement; 23424 if (projection) { 23425 projection.isAnimationBlocked = false; 23426 } 23427 this.panSession && this.panSession.end(); 23428 this.panSession = undefined; 23429 const { dragPropagation } = this.getProps(); 23430 if (!dragPropagation && this.openGlobalLock) { 23431 this.openGlobalLock(); 23432 this.openGlobalLock = null; 23433 } 23434 animationState && animationState.setActive("whileDrag", false); 23435 } 23436 updateAxis(axis, _point, offset) { 23437 const { drag } = this.getProps(); 23438 // If we're not dragging this axis, do an early return. 23439 if (!offset || !shouldDrag(axis, drag, this.currentDirection)) 23440 return; 23441 const axisValue = this.getAxisMotionValue(axis); 23442 let next = this.originPoint[axis] + offset[axis]; 23443 // Apply constraints 23444 if (this.constraints && this.constraints[axis]) { 23445 next = applyConstraints(next, this.constraints[axis], this.elastic[axis]); 23446 } 23447 axisValue.set(next); 23448 } 23449 resolveConstraints() { 23450 var _a; 23451 const { dragConstraints, dragElastic } = this.getProps(); 23452 const layout = this.visualElement.projection && 23453 !this.visualElement.projection.layout 23454 ? this.visualElement.projection.measure(false) 23455 : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout; 23456 const prevConstraints = this.constraints; 23457 if (dragConstraints && isRefObject(dragConstraints)) { 23458 if (!this.constraints) { 23459 this.constraints = this.resolveRefConstraints(); 23460 } 23461 } 23462 else { 23463 if (dragConstraints && layout) { 23464 this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints); 23465 } 23466 else { 23467 this.constraints = false; 23468 } 23469 } 23470 this.elastic = resolveDragElastic(dragElastic); 23471 /** 23472 * If we're outputting to external MotionValues, we want to rebase the measured constraints 23473 * from viewport-relative to component-relative. 23474 */ 23475 if (prevConstraints !== this.constraints && 23476 layout && 23477 this.constraints && 23478 !this.hasMutatedConstraints) { 23479 eachAxis((axis) => { 23480 if (this.constraints !== false && 23481 this.getAxisMotionValue(axis)) { 23482 this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]); 23483 } 23484 }); 23485 } 23486 } 23487 resolveRefConstraints() { 23488 const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps(); 23489 if (!constraints || !isRefObject(constraints)) 23490 return false; 23491 const constraintsElement = constraints.current; 23492 errors_invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop."); 23493 const { projection } = this.visualElement; 23494 // TODO 23495 if (!projection || !projection.layout) 23496 return false; 23497 const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint()); 23498 let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox); 23499 /** 23500 * If there's an onMeasureDragConstraints listener we call it and 23501 * if different constraints are returned, set constraints to that 23502 */ 23503 if (onMeasureDragConstraints) { 23504 const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints)); 23505 this.hasMutatedConstraints = !!userConstraints; 23506 if (userConstraints) { 23507 measuredConstraints = convertBoundingBoxToBox(userConstraints); 23508 } 23509 } 23510 return measuredConstraints; 23511 } 23512 startAnimation(velocity) { 23513 const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps(); 23514 const constraints = this.constraints || {}; 23515 const momentumAnimations = eachAxis((axis) => { 23516 if (!shouldDrag(axis, drag, this.currentDirection)) { 23517 return; 23518 } 23519 let transition = (constraints && constraints[axis]) || {}; 23520 if (dragSnapToOrigin) 23521 transition = { min: 0, max: 0 }; 23522 /** 23523 * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame 23524 * of spring animations so we should look into adding a disable spring option to `inertia`. 23525 * We could do something here where we affect the `bounceStiffness` and `bounceDamping` 23526 * using the value of `dragElastic`. 23527 */ 23528 const bounceStiffness = dragElastic ? 200 : 1000000; 23529 const bounceDamping = dragElastic ? 40 : 10000000; 23530 const inertia = { 23531 type: "inertia", 23532 velocity: dragMomentum ? velocity[axis] : 0, 23533 bounceStiffness, 23534 bounceDamping, 23535 timeConstant: 750, 23536 restDelta: 1, 23537 restSpeed: 10, 23538 ...dragTransition, 23539 ...transition, 23540 }; 23541 // If we're not animating on an externally-provided `MotionValue` we can use the 23542 // component's animation controls which will handle interactions with whileHover (etc), 23543 // otherwise we just have to animate the `MotionValue` itself. 23544 return this.startAxisValueAnimation(axis, inertia); 23545 }); 23546 // Run all animations and then resolve the new drag constraints. 23547 return Promise.all(momentumAnimations).then(onDragTransitionEnd); 23548 } 23549 startAxisValueAnimation(axis, transition) { 23550 const axisValue = this.getAxisMotionValue(axis); 23551 return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement)); 23552 } 23553 stopAnimation() { 23554 eachAxis((axis) => this.getAxisMotionValue(axis).stop()); 23555 } 23556 pauseAnimation() { 23557 eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); }); 23558 } 23559 getAnimationState(axis) { 23560 var _a; 23561 return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state; 23562 } 23563 /** 23564 * Drag works differently depending on which props are provided. 23565 * 23566 * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values. 23567 * - Otherwise, we apply the delta to the x/y motion values. 23568 */ 23569 getAxisMotionValue(axis) { 23570 const dragKey = `_drag$axis.toUpperCase()}`; 23571 const props = this.visualElement.getProps(); 23572 const externalMotionValue = props[dragKey]; 23573 return externalMotionValue 23574 ? externalMotionValue 23575 : this.visualElement.getValue(axis, (props.initial 23576 ? props.initial[axis] 23577 : undefined) || 0); 23578 } 23579 snapToCursor(point) { 23580 eachAxis((axis) => { 23581 const { drag } = this.getProps(); 23582 // If we're not dragging this axis, do an early return. 23583 if (!shouldDrag(axis, drag, this.currentDirection)) 23584 return; 23585 const { projection } = this.visualElement; 23586 const axisValue = this.getAxisMotionValue(axis); 23587 if (projection && projection.layout) { 23588 const { min, max } = projection.layout.layoutBox[axis]; 23589 axisValue.set(point[axis] - mixNumber(min, max, 0.5)); 23590 } 23591 }); 23592 } 23593 /** 23594 * When the viewport resizes we want to check if the measured constraints 23595 * have changed and, if so, reposition the element within those new constraints 23596 * relative to where it was before the resize. 23597 */ 23598 scalePositionWithinConstraints() { 23599 if (!this.visualElement.current) 23600 return; 23601 const { drag, dragConstraints } = this.getProps(); 23602 const { projection } = this.visualElement; 23603 if (!isRefObject(dragConstraints) || !projection || !this.constraints) 23604 return; 23605 /** 23606 * Stop current animations as there can be visual glitching if we try to do 23607 * this mid-animation 23608 */ 23609 this.stopAnimation(); 23610 /** 23611 * Record the relative position of the dragged element relative to the 23612 * constraints box and save as a progress value. 23613 */ 23614 const boxProgress = { x: 0, y: 0 }; 23615 eachAxis((axis) => { 23616 const axisValue = this.getAxisMotionValue(axis); 23617 if (axisValue && this.constraints !== false) { 23618 const latest = axisValue.get(); 23619 boxProgress[axis] = constraints_calcOrigin({ min: latest, max: latest }, this.constraints[axis]); 23620 } 23621 }); 23622 /** 23623 * Update the layout of this element and resolve the latest drag constraints 23624 */ 23625 const { transformTemplate } = this.visualElement.getProps(); 23626 this.visualElement.current.style.transform = transformTemplate 23627 ? transformTemplate({}, "") 23628 : "none"; 23629 projection.root && projection.root.updateScroll(); 23630 projection.updateLayout(); 23631 this.resolveConstraints(); 23632 /** 23633 * For each axis, calculate the current progress of the layout axis 23634 * within the new constraints. 23635 */ 23636 eachAxis((axis) => { 23637 if (!shouldDrag(axis, drag, null)) 23638 return; 23639 /** 23640 * Calculate a new transform based on the previous box progress 23641 */ 23642 const axisValue = this.getAxisMotionValue(axis); 23643 const { min, max } = this.constraints[axis]; 23644 axisValue.set(mixNumber(min, max, boxProgress[axis])); 23645 }); 23646 } 23647 addListeners() { 23648 if (!this.visualElement.current) 23649 return; 23650 elementDragControls.set(this.visualElement, this); 23651 const element = this.visualElement.current; 23652 /** 23653 * Attach a pointerdown event listener on this DOM element to initiate drag tracking. 23654 */ 23655 const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => { 23656 const { drag, dragListener = true } = this.getProps(); 23657 drag && dragListener && this.start(event); 23658 }); 23659 const measureDragConstraints = () => { 23660 const { dragConstraints } = this.getProps(); 23661 if (isRefObject(dragConstraints)) { 23662 this.constraints = this.resolveRefConstraints(); 23663 } 23664 }; 23665 const { projection } = this.visualElement; 23666 const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints); 23667 if (projection && !projection.layout) { 23668 projection.root && projection.root.updateScroll(); 23669 projection.updateLayout(); 23670 } 23671 measureDragConstraints(); 23672 /** 23673 * Attach a window resize listener to scale the draggable target within its defined 23674 * constraints as the window resizes. 23675 */ 23676 const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints()); 23677 /** 23678 * If the element's layout changes, calculate the delta and apply that to 23679 * the drag gesture's origin point. 23680 */ 23681 const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => { 23682 if (this.isDragging && hasLayoutChanged) { 23683 eachAxis((axis) => { 23684 const motionValue = this.getAxisMotionValue(axis); 23685 if (!motionValue) 23686 return; 23687 this.originPoint[axis] += delta[axis].translate; 23688 motionValue.set(motionValue.get() + delta[axis].translate); 23689 }); 23690 this.visualElement.render(); 23691 } 23692 })); 23693 return () => { 23694 stopResizeListener(); 23695 stopPointerListener(); 23696 stopMeasureLayoutListener(); 23697 stopLayoutUpdateListener && stopLayoutUpdateListener(); 23698 }; 23699 } 23700 getProps() { 23701 const props = this.visualElement.getProps(); 23702 const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props; 23703 return { 23704 ...props, 23705 drag, 23706 dragDirectionLock, 23707 dragPropagation, 23708 dragConstraints, 23709 dragElastic, 23710 dragMomentum, 23711 }; 23712 } 23713 } 23714 function shouldDrag(direction, drag, currentDirection) { 23715 return ((drag === true || drag === direction) && 23716 (currentDirection === null || currentDirection === direction)); 23717 } 23718 /** 23719 * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower 23720 * than the provided threshold, return `null`. 23721 * 23722 * @param offset - The x/y offset from origin. 23723 * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction. 23724 */ 23725 function getCurrentDirection(offset, lockThreshold = 10) { 23726 let direction = null; 23727 if (Math.abs(offset.y) > lockThreshold) { 23728 direction = "y"; 23729 } 23730 else if (Math.abs(offset.x) > lockThreshold) { 23731 direction = "x"; 23732 } 23733 return direction; 23734 } 23735 23736 23737 23738 ;// ./node_modules/framer-motion/dist/es/gestures/drag/index.mjs 23739 23740 23741 23742 23743 class DragGesture extends Feature { 23744 constructor(node) { 23745 super(node); 23746 this.removeGroupControls = noop_noop; 23747 this.removeListeners = noop_noop; 23748 this.controls = new VisualElementDragControls(node); 23749 } 23750 mount() { 23751 // If we've been provided a DragControls for manual control over the drag gesture, 23752 // subscribe this component to it on mount. 23753 const { dragControls } = this.node.getProps(); 23754 if (dragControls) { 23755 this.removeGroupControls = dragControls.subscribe(this.controls); 23756 } 23757 this.removeListeners = this.controls.addListeners() || noop_noop; 23758 } 23759 unmount() { 23760 this.removeGroupControls(); 23761 this.removeListeners(); 23762 } 23763 } 23764 23765 23766 23767 ;// ./node_modules/framer-motion/dist/es/gestures/pan/index.mjs 23768 23769 23770 23771 23772 23773 23774 23775 const asyncHandler = (handler) => (event, info) => { 23776 if (handler) { 23777 frame_frame.postRender(() => handler(event, info)); 23778 } 23779 }; 23780 class PanGesture extends Feature { 23781 constructor() { 23782 super(...arguments); 23783 this.removePointerDownListener = noop_noop; 23784 } 23785 onPointerDown(pointerDownEvent) { 23786 this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { 23787 transformPagePoint: this.node.getTransformPagePoint(), 23788 contextWindow: getContextWindow(this.node), 23789 }); 23790 } 23791 createPanHandlers() { 23792 const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps(); 23793 return { 23794 onSessionStart: asyncHandler(onPanSessionStart), 23795 onStart: asyncHandler(onPanStart), 23796 onMove: onPan, 23797 onEnd: (event, info) => { 23798 delete this.session; 23799 if (onPanEnd) { 23800 frame_frame.postRender(() => onPanEnd(event, info)); 23801 } 23802 }, 23803 }; 23804 } 23805 mount() { 23806 this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event)); 23807 } 23808 update() { 23809 this.session && this.session.updateHandlers(this.createPanHandlers()); 23810 } 23811 unmount() { 23812 this.removePointerDownListener(); 23813 this.session && this.session.end(); 23814 } 23815 } 23816 23817 23818 23819 ;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 23820 23821 23822 23823 /** 23824 * When a component is the child of `AnimatePresence`, it can use `usePresence` 23825 * to access information about whether it's still present in the React tree. 23826 * 23827 * ```jsx 23828 * import { usePresence } from "framer-motion" 23829 * 23830 * export const Component = () => { 23831 * const [isPresent, safeToRemove] = usePresence() 23832 * 23833 * useEffect(() => { 23834 * !isPresent && setTimeout(safeToRemove, 1000) 23835 * }, [isPresent]) 23836 * 23837 * return <div /> 23838 * } 23839 * ``` 23840 * 23841 * If `isPresent` is `false`, it means that a component has been removed the tree, but 23842 * `AnimatePresence` won't really remove it until `safeToRemove` has been called. 23843 * 23844 * @public 23845 */ 23846 function usePresence() { 23847 const context = (0,external_React_.useContext)(PresenceContext_PresenceContext); 23848 if (context === null) 23849 return [true, null]; 23850 const { isPresent, onExitComplete, register } = context; 23851 // It's safe to call the following hooks conditionally (after an early return) because the context will always 23852 // either be null or non-null for the lifespan of the component. 23853 const id = (0,external_React_.useId)(); 23854 (0,external_React_.useEffect)(() => register(id), []); 23855 const safeToRemove = () => onExitComplete && onExitComplete(id); 23856 return !isPresent && onExitComplete ? [false, safeToRemove] : [true]; 23857 } 23858 /** 23859 * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present. 23860 * There is no `safeToRemove` function. 23861 * 23862 * ```jsx 23863 * import { useIsPresent } from "framer-motion" 23864 * 23865 * export const Component = () => { 23866 * const isPresent = useIsPresent() 23867 * 23868 * useEffect(() => { 23869 * !isPresent && console.log("I've been removed!") 23870 * }, [isPresent]) 23871 * 23872 * return <div /> 23873 * } 23874 * ``` 23875 * 23876 * @public 23877 */ 23878 function useIsPresent() { 23879 return isPresent(useContext(PresenceContext)); 23880 } 23881 function isPresent(context) { 23882 return context === null ? true : context.isPresent; 23883 } 23884 23885 23886 23887 ;// ./node_modules/framer-motion/dist/es/projection/node/state.mjs 23888 /** 23889 * This should only ever be modified on the client otherwise it'll 23890 * persist through server requests. If we need instanced states we 23891 * could lazy-init via root. 23892 */ 23893 const globalProjectionState = { 23894 /** 23895 * Global flag as to whether the tree has animated since the last time 23896 * we resized the window 23897 */ 23898 hasAnimatedSinceResize: true, 23899 /** 23900 * We set this to true once, on the first update. Any nodes added to the tree beyond that 23901 * update will be given a `data-projection-id` attribute. 23902 */ 23903 hasEverUpdated: false, 23904 }; 23905 23906 23907 23908 ;// ./node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs 23909 23910 23911 function pixelsToPercent(pixels, axis) { 23912 if (axis.max === axis.min) 23913 return 0; 23914 return (pixels / (axis.max - axis.min)) * 100; 23915 } 23916 /** 23917 * We always correct borderRadius as a percentage rather than pixels to reduce paints. 23918 * For example, if you are projecting a box that is 100px wide with a 10px borderRadius 23919 * into a box that is 200px wide with a 20px borderRadius, that is actually a 10% 23920 * borderRadius in both states. If we animate between the two in pixels that will trigger 23921 * a paint each time. If we animate between the two in percentage we'll avoid a paint. 23922 */ 23923 const correctBorderRadius = { 23924 correct: (latest, node) => { 23925 if (!node.target) 23926 return latest; 23927 /** 23928 * If latest is a string, if it's a percentage we can return immediately as it's 23929 * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number. 23930 */ 23931 if (typeof latest === "string") { 23932 if (px.test(latest)) { 23933 latest = parseFloat(latest); 23934 } 23935 else { 23936 return latest; 23937 } 23938 } 23939 /** 23940 * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that 23941 * pixel value as a percentage of each axis 23942 */ 23943 const x = pixelsToPercent(latest, node.target.x); 23944 const y = pixelsToPercent(latest, node.target.y); 23945 return `$x}% $y}%`; 23946 }, 23947 }; 23948 23949 23950 23951 ;// ./node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs 23952 23953 23954 23955 const correctBoxShadow = { 23956 correct: (latest, { treeScale, projectionDelta }) => { 23957 const original = latest; 23958 const shadow = complex.parse(latest); 23959 // TODO: Doesn't support multiple shadows 23960 if (shadow.length > 5) 23961 return original; 23962 const template = complex.createTransformer(latest); 23963 const offset = typeof shadow[0] !== "number" ? 1 : 0; 23964 // Calculate the overall context scale 23965 const xScale = projectionDelta.x.scale * treeScale.x; 23966 const yScale = projectionDelta.y.scale * treeScale.y; 23967 shadow[0 + offset] /= xScale; 23968 shadow[1 + offset] /= yScale; 23969 /** 23970 * Ideally we'd correct x and y scales individually, but because blur and 23971 * spread apply to both we have to take a scale average and apply that instead. 23972 * We could potentially improve the outcome of this by incorporating the ratio between 23973 * the two scales. 23974 */ 23975 const averageScale = mixNumber(xScale, yScale, 0.5); 23976 // Blur 23977 if (typeof shadow[2 + offset] === "number") 23978 shadow[2 + offset] /= averageScale; 23979 // Spread 23980 if (typeof shadow[3 + offset] === "number") 23981 shadow[3 + offset] /= averageScale; 23982 return template(shadow); 23983 }, 23984 }; 23985 23986 23987 23988 ;// ./node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs 23989 23990 23991 23992 23993 23994 23995 23996 23997 23998 23999 24000 24001 class MeasureLayoutWithContext extends external_React_.Component { 24002 /** 24003 * This only mounts projection nodes for components that 24004 * need measuring, we might want to do it for all components 24005 * in order to incorporate transforms 24006 */ 24007 componentDidMount() { 24008 const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props; 24009 const { projection } = visualElement; 24010 addScaleCorrector(defaultScaleCorrectors); 24011 if (projection) { 24012 if (layoutGroup.group) 24013 layoutGroup.group.add(projection); 24014 if (switchLayoutGroup && switchLayoutGroup.register && layoutId) { 24015 switchLayoutGroup.register(projection); 24016 } 24017 projection.root.didUpdate(); 24018 projection.addEventListener("animationComplete", () => { 24019 this.safeToRemove(); 24020 }); 24021 projection.setOptions({ 24022 ...projection.options, 24023 onExitComplete: () => this.safeToRemove(), 24024 }); 24025 } 24026 globalProjectionState.hasEverUpdated = true; 24027 } 24028 getSnapshotBeforeUpdate(prevProps) { 24029 const { layoutDependency, visualElement, drag, isPresent } = this.props; 24030 const projection = visualElement.projection; 24031 if (!projection) 24032 return null; 24033 /** 24034 * TODO: We use this data in relegate to determine whether to 24035 * promote a previous element. There's no guarantee its presence data 24036 * will have updated by this point - if a bug like this arises it will 24037 * have to be that we markForRelegation and then find a new lead some other way, 24038 * perhaps in didUpdate 24039 */ 24040 projection.isPresent = isPresent; 24041 if (drag || 24042 prevProps.layoutDependency !== layoutDependency || 24043 layoutDependency === undefined) { 24044 projection.willUpdate(); 24045 } 24046 else { 24047 this.safeToRemove(); 24048 } 24049 if (prevProps.isPresent !== isPresent) { 24050 if (isPresent) { 24051 projection.promote(); 24052 } 24053 else if (!projection.relegate()) { 24054 /** 24055 * If there's another stack member taking over from this one, 24056 * it's in charge of the exit animation and therefore should 24057 * be in charge of the safe to remove. Otherwise we call it here. 24058 */ 24059 frame_frame.postRender(() => { 24060 const stack = projection.getStack(); 24061 if (!stack || !stack.members.length) { 24062 this.safeToRemove(); 24063 } 24064 }); 24065 } 24066 } 24067 return null; 24068 } 24069 componentDidUpdate() { 24070 const { projection } = this.props.visualElement; 24071 if (projection) { 24072 projection.root.didUpdate(); 24073 microtask.postRender(() => { 24074 if (!projection.currentAnimation && projection.isLead()) { 24075 this.safeToRemove(); 24076 } 24077 }); 24078 } 24079 } 24080 componentWillUnmount() { 24081 const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props; 24082 const { projection } = visualElement; 24083 if (projection) { 24084 projection.scheduleCheckAfterUnmount(); 24085 if (layoutGroup && layoutGroup.group) 24086 layoutGroup.group.remove(projection); 24087 if (promoteContext && promoteContext.deregister) 24088 promoteContext.deregister(projection); 24089 } 24090 } 24091 safeToRemove() { 24092 const { safeToRemove } = this.props; 24093 safeToRemove && safeToRemove(); 24094 } 24095 render() { 24096 return null; 24097 } 24098 } 24099 function MeasureLayout(props) { 24100 const [isPresent, safeToRemove] = usePresence(); 24101 const layoutGroup = (0,external_React_.useContext)(LayoutGroupContext); 24102 return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })); 24103 } 24104 const defaultScaleCorrectors = { 24105 borderRadius: { 24106 ...correctBorderRadius, 24107 applyTo: [ 24108 "borderTopLeftRadius", 24109 "borderTopRightRadius", 24110 "borderBottomLeftRadius", 24111 "borderBottomRightRadius", 24112 ], 24113 }, 24114 borderTopLeftRadius: correctBorderRadius, 24115 borderTopRightRadius: correctBorderRadius, 24116 borderBottomLeftRadius: correctBorderRadius, 24117 borderBottomRightRadius: correctBorderRadius, 24118 boxShadow: correctBoxShadow, 24119 }; 24120 24121 24122 24123 ;// ./node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs 24124 24125 24126 24127 24128 24129 24130 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"]; 24131 const numBorders = borders.length; 24132 const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value; 24133 const isPx = (value) => typeof value === "number" || px.test(value); 24134 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) { 24135 if (shouldCrossfadeOpacity) { 24136 target.opacity = mixNumber(0, 24137 // TODO Reinstate this if only child 24138 lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress)); 24139 target.opacityExit = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress)); 24140 } 24141 else if (isOnlyMember) { 24142 target.opacity = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress); 24143 } 24144 /** 24145 * Mix border radius 24146 */ 24147 for (let i = 0; i < numBorders; i++) { 24148 const borderLabel = `border$borders[i]}Radius`; 24149 let followRadius = getRadius(follow, borderLabel); 24150 let leadRadius = getRadius(lead, borderLabel); 24151 if (followRadius === undefined && leadRadius === undefined) 24152 continue; 24153 followRadius || (followRadius = 0); 24154 leadRadius || (leadRadius = 0); 24155 const canMix = followRadius === 0 || 24156 leadRadius === 0 || 24157 isPx(followRadius) === isPx(leadRadius); 24158 if (canMix) { 24159 target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress), 0); 24160 if (percent.test(leadRadius) || percent.test(followRadius)) { 24161 target[borderLabel] += "%"; 24162 } 24163 } 24164 else { 24165 target[borderLabel] = leadRadius; 24166 } 24167 } 24168 /** 24169 * Mix rotation 24170 */ 24171 if (follow.rotate || lead.rotate) { 24172 target.rotate = mixNumber(follow.rotate || 0, lead.rotate || 0, progress); 24173 } 24174 } 24175 function getRadius(values, radiusName) { 24176 return values[radiusName] !== undefined 24177 ? values[radiusName] 24178 : values.borderRadius; 24179 } 24180 // /** 24181 // * We only want to mix the background color if there's a follow element 24182 // * that we're not crossfading opacity between. For instance with switch 24183 // * AnimateSharedLayout animations, this helps the illusion of a continuous 24184 // * element being animated but also cuts down on the number of paints triggered 24185 // * for elements where opacity is doing that work for us. 24186 // */ 24187 // if ( 24188 // !hasFollowElement && 24189 // latestLeadValues.backgroundColor && 24190 // latestFollowValues.backgroundColor 24191 // ) { 24192 // /** 24193 // * This isn't ideal performance-wise as mixColor is creating a new function every frame. 24194 // * We could probably create a mixer that runs at the start of the animation but 24195 // * the idea behind the crossfader is that it runs dynamically between two potentially 24196 // * changing targets (ie opacity or borderRadius may be animating independently via variants) 24197 // */ 24198 // leadState.backgroundColor = followState.backgroundColor = mixColor( 24199 // latestFollowValues.backgroundColor as string, 24200 // latestLeadValues.backgroundColor as string 24201 // )(p) 24202 // } 24203 const easeCrossfadeIn = compress(0, 0.5, circOut); 24204 const easeCrossfadeOut = compress(0.5, 0.95, noop_noop); 24205 function compress(min, max, easing) { 24206 return (p) => { 24207 // Could replace ifs with clamp 24208 if (p < min) 24209 return 0; 24210 if (p > max) 24211 return 1; 24212 return easing(progress(min, max, p)); 24213 }; 24214 } 24215 24216 24217 24218 ;// ./node_modules/framer-motion/dist/es/projection/geometry/copy.mjs 24219 /** 24220 * Reset an axis to the provided origin box. 24221 * 24222 * This is a mutative operation. 24223 */ 24224 function copyAxisInto(axis, originAxis) { 24225 axis.min = originAxis.min; 24226 axis.max = originAxis.max; 24227 } 24228 /** 24229 * Reset a box to the provided origin box. 24230 * 24231 * This is a mutative operation. 24232 */ 24233 function copyBoxInto(box, originBox) { 24234 copyAxisInto(box.x, originBox.x); 24235 copyAxisInto(box.y, originBox.y); 24236 } 24237 24238 24239 24240 ;// ./node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs 24241 24242 24243 24244 24245 /** 24246 * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse 24247 */ 24248 function removePointDelta(point, translate, scale, originPoint, boxScale) { 24249 point -= translate; 24250 point = scalePoint(point, 1 / scale, originPoint); 24251 if (boxScale !== undefined) { 24252 point = scalePoint(point, 1 / boxScale, originPoint); 24253 } 24254 return point; 24255 } 24256 /** 24257 * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse 24258 */ 24259 function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) { 24260 if (percent.test(translate)) { 24261 translate = parseFloat(translate); 24262 const relativeProgress = mixNumber(sourceAxis.min, sourceAxis.max, translate / 100); 24263 translate = relativeProgress - sourceAxis.min; 24264 } 24265 if (typeof translate !== "number") 24266 return; 24267 let originPoint = mixNumber(originAxis.min, originAxis.max, origin); 24268 if (axis === originAxis) 24269 originPoint -= translate; 24270 axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale); 24271 axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale); 24272 } 24273 /** 24274 * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse 24275 * and acts as a bridge between motion values and removeAxisDelta 24276 */ 24277 function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) { 24278 removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis); 24279 } 24280 /** 24281 * The names of the motion values we want to apply as translation, scale and origin. 24282 */ 24283 const delta_remove_xKeys = ["x", "scaleX", "originX"]; 24284 const delta_remove_yKeys = ["y", "scaleY", "originY"]; 24285 /** 24286 * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse 24287 * and acts as a bridge between motion values and removeAxisDelta 24288 */ 24289 function removeBoxTransforms(box, transforms, originBox, sourceBox) { 24290 removeAxisTransforms(box.x, transforms, delta_remove_xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined); 24291 removeAxisTransforms(box.y, transforms, delta_remove_yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined); 24292 } 24293 24294 24295 24296 ;// ./node_modules/framer-motion/dist/es/projection/geometry/utils.mjs 24297 24298 24299 function isAxisDeltaZero(delta) { 24300 return delta.translate === 0 && delta.scale === 1; 24301 } 24302 function isDeltaZero(delta) { 24303 return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y); 24304 } 24305 function boxEquals(a, b) { 24306 return (a.x.min === b.x.min && 24307 a.x.max === b.x.max && 24308 a.y.min === b.y.min && 24309 a.y.max === b.y.max); 24310 } 24311 function boxEqualsRounded(a, b) { 24312 return (Math.round(a.x.min) === Math.round(b.x.min) && 24313 Math.round(a.x.max) === Math.round(b.x.max) && 24314 Math.round(a.y.min) === Math.round(b.y.min) && 24315 Math.round(a.y.max) === Math.round(b.y.max)); 24316 } 24317 function aspectRatio(box) { 24318 return calcLength(box.x) / calcLength(box.y); 24319 } 24320 24321 24322 24323 ;// ./node_modules/framer-motion/dist/es/projection/shared/stack.mjs 24324 24325 24326 class NodeStack { 24327 constructor() { 24328 this.members = []; 24329 } 24330 add(node) { 24331 addUniqueItem(this.members, node); 24332 node.scheduleRender(); 24333 } 24334 remove(node) { 24335 removeItem(this.members, node); 24336 if (node === this.prevLead) { 24337 this.prevLead = undefined; 24338 } 24339 if (node === this.lead) { 24340 const prevLead = this.members[this.members.length - 1]; 24341 if (prevLead) { 24342 this.promote(prevLead); 24343 } 24344 } 24345 } 24346 relegate(node) { 24347 const indexOfNode = this.members.findIndex((member) => node === member); 24348 if (indexOfNode === 0) 24349 return false; 24350 /** 24351 * Find the next projection node that is present 24352 */ 24353 let prevLead; 24354 for (let i = indexOfNode; i >= 0; i--) { 24355 const member = this.members[i]; 24356 if (member.isPresent !== false) { 24357 prevLead = member; 24358 break; 24359 } 24360 } 24361 if (prevLead) { 24362 this.promote(prevLead); 24363 return true; 24364 } 24365 else { 24366 return false; 24367 } 24368 } 24369 promote(node, preserveFollowOpacity) { 24370 const prevLead = this.lead; 24371 if (node === prevLead) 24372 return; 24373 this.prevLead = prevLead; 24374 this.lead = node; 24375 node.show(); 24376 if (prevLead) { 24377 prevLead.instance && prevLead.scheduleRender(); 24378 node.scheduleRender(); 24379 node.resumeFrom = prevLead; 24380 if (preserveFollowOpacity) { 24381 node.resumeFrom.preserveOpacity = true; 24382 } 24383 if (prevLead.snapshot) { 24384 node.snapshot = prevLead.snapshot; 24385 node.snapshot.latestValues = 24386 prevLead.animationValues || prevLead.latestValues; 24387 } 24388 if (node.root && node.root.isUpdating) { 24389 node.isLayoutDirty = true; 24390 } 24391 const { crossfade } = node.options; 24392 if (crossfade === false) { 24393 prevLead.hide(); 24394 } 24395 /** 24396 * TODO: 24397 * - Test border radius when previous node was deleted 24398 * - boxShadow mixing 24399 * - Shared between element A in scrolled container and element B (scroll stays the same or changes) 24400 * - Shared between element A in transformed container and element B (transform stays the same or changes) 24401 * - Shared between element A in scrolled page and element B (scroll stays the same or changes) 24402 * --- 24403 * - Crossfade opacity of root nodes 24404 * - layoutId changes after animation 24405 * - layoutId changes mid animation 24406 */ 24407 } 24408 } 24409 exitAnimationComplete() { 24410 this.members.forEach((node) => { 24411 const { options, resumingFrom } = node; 24412 options.onExitComplete && options.onExitComplete(); 24413 if (resumingFrom) { 24414 resumingFrom.options.onExitComplete && 24415 resumingFrom.options.onExitComplete(); 24416 } 24417 }); 24418 } 24419 scheduleRender() { 24420 this.members.forEach((node) => { 24421 node.instance && node.scheduleRender(false); 24422 }); 24423 } 24424 /** 24425 * Clear any leads that have been removed this render to prevent them from being 24426 * used in future animations and to prevent memory leaks 24427 */ 24428 removeLeadSnapshot() { 24429 if (this.lead && this.lead.snapshot) { 24430 this.lead.snapshot = undefined; 24431 } 24432 } 24433 } 24434 24435 24436 24437 ;// ./node_modules/framer-motion/dist/es/projection/styles/transform.mjs 24438 function buildProjectionTransform(delta, treeScale, latestTransform) { 24439 let transform = ""; 24440 /** 24441 * The translations we use to calculate are always relative to the viewport coordinate space. 24442 * But when we apply scales, we also scale the coordinate space of an element and its children. 24443 * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need 24444 * to move an element 100 pixels, we actually need to move it 200 in within that scaled space. 24445 */ 24446 const xTranslate = delta.x.translate / treeScale.x; 24447 const yTranslate = delta.y.translate / treeScale.y; 24448 const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0; 24449 if (xTranslate || yTranslate || zTranslate) { 24450 transform = `translate3d($xTranslate}px, $yTranslate}px, $zTranslate}px) `; 24451 } 24452 /** 24453 * Apply scale correction for the tree transform. 24454 * This will apply scale to the screen-orientated axes. 24455 */ 24456 if (treeScale.x !== 1 || treeScale.y !== 1) { 24457 transform += `scale($1 / treeScale.x}, $1 / treeScale.y}) `; 24458 } 24459 if (latestTransform) { 24460 const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform; 24461 if (transformPerspective) 24462 transform = `perspective($transformPerspective}px) $transform}`; 24463 if (rotate) 24464 transform += `rotate($rotate}deg) `; 24465 if (rotateX) 24466 transform += `rotateX($rotateX}deg) `; 24467 if (rotateY) 24468 transform += `rotateY($rotateY}deg) `; 24469 if (skewX) 24470 transform += `skewX($skewX}deg) `; 24471 if (skewY) 24472 transform += `skewY($skewY}deg) `; 24473 } 24474 /** 24475 * Apply scale to match the size of the element to the size we want it. 24476 * This will apply scale to the element-orientated axes. 24477 */ 24478 const elementScaleX = delta.x.scale * treeScale.x; 24479 const elementScaleY = delta.y.scale * treeScale.y; 24480 if (elementScaleX !== 1 || elementScaleY !== 1) { 24481 transform += `scale($elementScaleX}, $elementScaleY})`; 24482 } 24483 return transform || "none"; 24484 } 24485 24486 24487 24488 ;// ./node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs 24489 const compareByDepth = (a, b) => a.depth - b.depth; 24490 24491 24492 24493 ;// ./node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs 24494 24495 24496 24497 class FlatTree { 24498 constructor() { 24499 this.children = []; 24500 this.isDirty = false; 24501 } 24502 add(child) { 24503 addUniqueItem(this.children, child); 24504 this.isDirty = true; 24505 } 24506 remove(child) { 24507 removeItem(this.children, child); 24508 this.isDirty = true; 24509 } 24510 forEach(callback) { 24511 this.isDirty && this.children.sort(compareByDepth); 24512 this.isDirty = false; 24513 this.children.forEach(callback); 24514 } 24515 } 24516 24517 24518 24519 ;// ./node_modules/framer-motion/dist/es/utils/delay.mjs 24520 24521 24522 24523 /** 24524 * Timeout defined in ms 24525 */ 24526 function delay(callback, timeout) { 24527 const start = time.now(); 24528 const checkElapsed = ({ timestamp }) => { 24529 const elapsed = timestamp - start; 24530 if (elapsed >= timeout) { 24531 cancelFrame(checkElapsed); 24532 callback(elapsed - timeout); 24533 } 24534 }; 24535 frame_frame.read(checkElapsed, true); 24536 return () => cancelFrame(checkElapsed); 24537 } 24538 24539 24540 24541 ;// ./node_modules/framer-motion/dist/es/debug/record.mjs 24542 function record(data) { 24543 if (window.MotionDebug) { 24544 window.MotionDebug.record(data); 24545 } 24546 } 24547 24548 24549 24550 ;// ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs 24551 function isSVGElement(element) { 24552 return element instanceof SVGElement && element.tagName !== "svg"; 24553 } 24554 24555 24556 24557 ;// ./node_modules/framer-motion/dist/es/animation/interfaces/single-value.mjs 24558 24559 24560 24561 24562 function animateSingleValue(value, keyframes, options) { 24563 const motionValue$1 = isMotionValue(value) ? value : motionValue(value); 24564 motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options)); 24565 return motionValue$1.animation; 24566 } 24567 24568 24569 24570 ;// ./node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs 24571 24572 24573 24574 24575 24576 24577 24578 24579 24580 24581 24582 24583 24584 24585 24586 24587 24588 24589 24590 24591 24592 24593 24594 24595 24596 24597 24598 24599 const transformAxes = ["", "X", "Y", "Z"]; 24600 const hiddenVisibility = { visibility: "hidden" }; 24601 /** 24602 * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1 24603 * which has a noticeable difference in spring animations 24604 */ 24605 const animationTarget = 1000; 24606 let create_projection_node_id = 0; 24607 /** 24608 * Use a mutable data object for debug data so as to not create a new 24609 * object every frame. 24610 */ 24611 const projectionFrameData = { 24612 type: "projectionFrame", 24613 totalNodes: 0, 24614 resolvedTargetDeltas: 0, 24615 recalculatedProjection: 0, 24616 }; 24617 function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) { 24618 const { latestValues } = visualElement; 24619 // Record the distorting transform and then temporarily set it to 0 24620 if (latestValues[key]) { 24621 values[key] = latestValues[key]; 24622 visualElement.setStaticValue(key, 0); 24623 if (sharedAnimationValues) { 24624 sharedAnimationValues[key] = 0; 24625 } 24626 } 24627 } 24628 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) { 24629 return class ProjectionNode { 24630 constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) { 24631 /** 24632 * A unique ID generated for every projection node. 24633 */ 24634 this.id = create_projection_node_id++; 24635 /** 24636 * An id that represents a unique session instigated by startUpdate. 24637 */ 24638 this.animationId = 0; 24639 /** 24640 * A Set containing all this component's children. This is used to iterate 24641 * through the children. 24642 * 24643 * TODO: This could be faster to iterate as a flat array stored on the root node. 24644 */ 24645 this.children = new Set(); 24646 /** 24647 * Options for the node. We use this to configure what kind of layout animations 24648 * we should perform (if any). 24649 */ 24650 this.options = {}; 24651 /** 24652 * We use this to detect when its safe to shut down part of a projection tree. 24653 * We have to keep projecting children for scale correction and relative projection 24654 * until all their parents stop performing layout animations. 24655 */ 24656 this.isTreeAnimating = false; 24657 this.isAnimationBlocked = false; 24658 /** 24659 * Flag to true if we think this layout has been changed. We can't always know this, 24660 * currently we set it to true every time a component renders, or if it has a layoutDependency 24661 * if that has changed between renders. Additionally, components can be grouped by LayoutGroup 24662 * and if one node is dirtied, they all are. 24663 */ 24664 this.isLayoutDirty = false; 24665 /** 24666 * Flag to true if we think the projection calculations for this node needs 24667 * recalculating as a result of an updated transform or layout animation. 24668 */ 24669 this.isProjectionDirty = false; 24670 /** 24671 * Flag to true if the layout *or* transform has changed. This then gets propagated 24672 * throughout the projection tree, forcing any element below to recalculate on the next frame. 24673 */ 24674 this.isSharedProjectionDirty = false; 24675 /** 24676 * Flag transform dirty. This gets propagated throughout the whole tree but is only 24677 * respected by shared nodes. 24678 */ 24679 this.isTransformDirty = false; 24680 /** 24681 * Block layout updates for instant layout transitions throughout the tree. 24682 */ 24683 this.updateManuallyBlocked = false; 24684 this.updateBlockedByResize = false; 24685 /** 24686 * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate` 24687 * call. 24688 */ 24689 this.isUpdating = false; 24690 /** 24691 * If this is an SVG element we currently disable projection transforms 24692 */ 24693 this.isSVG = false; 24694 /** 24695 * Flag to true (during promotion) if a node doing an instant layout transition needs to reset 24696 * its projection styles. 24697 */ 24698 this.needsReset = false; 24699 /** 24700 * Flags whether this node should have its transform reset prior to measuring. 24701 */ 24702 this.shouldResetTransform = false; 24703 /** 24704 * An object representing the calculated contextual/accumulated/tree scale. 24705 * This will be used to scale calculcated projection transforms, as these are 24706 * calculated in screen-space but need to be scaled for elements to layoutly 24707 * make it to their calculated destinations. 24708 * 24709 * TODO: Lazy-init 24710 */ 24711 this.treeScale = { x: 1, y: 1 }; 24712 /** 24713 * 24714 */ 24715 this.eventHandlers = new Map(); 24716 this.hasTreeAnimated = false; 24717 // Note: Currently only running on root node 24718 this.updateScheduled = false; 24719 this.projectionUpdateScheduled = false; 24720 this.checkUpdateFailed = () => { 24721 if (this.isUpdating) { 24722 this.isUpdating = false; 24723 this.clearAllSnapshots(); 24724 } 24725 }; 24726 /** 24727 * This is a multi-step process as shared nodes might be of different depths. Nodes 24728 * are sorted by depth order, so we need to resolve the entire tree before moving to 24729 * the next step. 24730 */ 24731 this.updateProjection = () => { 24732 this.projectionUpdateScheduled = false; 24733 /** 24734 * Reset debug counts. Manually resetting rather than creating a new 24735 * object each frame. 24736 */ 24737 projectionFrameData.totalNodes = 24738 projectionFrameData.resolvedTargetDeltas = 24739 projectionFrameData.recalculatedProjection = 24740 0; 24741 this.nodes.forEach(propagateDirtyNodes); 24742 this.nodes.forEach(resolveTargetDelta); 24743 this.nodes.forEach(calcProjection); 24744 this.nodes.forEach(cleanDirtyNodes); 24745 record(projectionFrameData); 24746 }; 24747 this.hasProjected = false; 24748 this.isVisible = true; 24749 this.animationProgress = 0; 24750 /** 24751 * Shared layout 24752 */ 24753 // TODO Only running on root node 24754 this.sharedNodes = new Map(); 24755 this.latestValues = latestValues; 24756 this.root = parent ? parent.root || parent : this; 24757 this.path = parent ? [...parent.path, parent] : []; 24758 this.parent = parent; 24759 this.depth = parent ? parent.depth + 1 : 0; 24760 for (let i = 0; i < this.path.length; i++) { 24761 this.path[i].shouldResetTransform = true; 24762 } 24763 if (this.root === this) 24764 this.nodes = new FlatTree(); 24765 } 24766 addEventListener(name, handler) { 24767 if (!this.eventHandlers.has(name)) { 24768 this.eventHandlers.set(name, new SubscriptionManager()); 24769 } 24770 return this.eventHandlers.get(name).add(handler); 24771 } 24772 notifyListeners(name, ...args) { 24773 const subscriptionManager = this.eventHandlers.get(name); 24774 subscriptionManager && subscriptionManager.notify(...args); 24775 } 24776 hasListeners(name) { 24777 return this.eventHandlers.has(name); 24778 } 24779 /** 24780 * Lifecycles 24781 */ 24782 mount(instance, isLayoutDirty = this.root.hasTreeAnimated) { 24783 if (this.instance) 24784 return; 24785 this.isSVG = isSVGElement(instance); 24786 this.instance = instance; 24787 const { layoutId, layout, visualElement } = this.options; 24788 if (visualElement && !visualElement.current) { 24789 visualElement.mount(instance); 24790 } 24791 this.root.nodes.add(this); 24792 this.parent && this.parent.children.add(this); 24793 if (isLayoutDirty && (layout || layoutId)) { 24794 this.isLayoutDirty = true; 24795 } 24796 if (attachResizeListener) { 24797 let cancelDelay; 24798 const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false); 24799 attachResizeListener(instance, () => { 24800 this.root.updateBlockedByResize = true; 24801 cancelDelay && cancelDelay(); 24802 cancelDelay = delay(resizeUnblockUpdate, 250); 24803 if (globalProjectionState.hasAnimatedSinceResize) { 24804 globalProjectionState.hasAnimatedSinceResize = false; 24805 this.nodes.forEach(finishAnimation); 24806 } 24807 }); 24808 } 24809 if (layoutId) { 24810 this.root.registerSharedNode(layoutId, this); 24811 } 24812 // Only register the handler if it requires layout animation 24813 if (this.options.animate !== false && 24814 visualElement && 24815 (layoutId || layout)) { 24816 this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => { 24817 if (this.isTreeAnimationBlocked()) { 24818 this.target = undefined; 24819 this.relativeTarget = undefined; 24820 return; 24821 } 24822 // TODO: Check here if an animation exists 24823 const layoutTransition = this.options.transition || 24824 visualElement.getDefaultTransition() || 24825 defaultLayoutTransition; 24826 const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps(); 24827 /** 24828 * The target layout of the element might stay the same, 24829 * but its position relative to its parent has changed. 24830 */ 24831 const targetChanged = !this.targetLayout || 24832 !boxEqualsRounded(this.targetLayout, newLayout) || 24833 hasRelativeTargetChanged; 24834 /** 24835 * If the layout hasn't seemed to have changed, it might be that the 24836 * element is visually in the same place in the document but its position 24837 * relative to its parent has indeed changed. So here we check for that. 24838 */ 24839 const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged; 24840 if (this.options.layoutRoot || 24841 (this.resumeFrom && this.resumeFrom.instance) || 24842 hasOnlyRelativeTargetChanged || 24843 (hasLayoutChanged && 24844 (targetChanged || !this.currentAnimation))) { 24845 if (this.resumeFrom) { 24846 this.resumingFrom = this.resumeFrom; 24847 this.resumingFrom.resumingFrom = undefined; 24848 } 24849 this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged); 24850 const animationOptions = { 24851 ...getValueTransition(layoutTransition, "layout"), 24852 onPlay: onLayoutAnimationStart, 24853 onComplete: onLayoutAnimationComplete, 24854 }; 24855 if (visualElement.shouldReduceMotion || 24856 this.options.layoutRoot) { 24857 animationOptions.delay = 0; 24858 animationOptions.type = false; 24859 } 24860 this.startAnimation(animationOptions); 24861 } 24862 else { 24863 /** 24864 * If the layout hasn't changed and we have an animation that hasn't started yet, 24865 * finish it immediately. Otherwise it will be animating from a location 24866 * that was probably never commited to screen and look like a jumpy box. 24867 */ 24868 if (!hasLayoutChanged) { 24869 finishAnimation(this); 24870 } 24871 if (this.isLead() && this.options.onExitComplete) { 24872 this.options.onExitComplete(); 24873 } 24874 } 24875 this.targetLayout = newLayout; 24876 }); 24877 } 24878 } 24879 unmount() { 24880 this.options.layoutId && this.willUpdate(); 24881 this.root.nodes.remove(this); 24882 const stack = this.getStack(); 24883 stack && stack.remove(this); 24884 this.parent && this.parent.children.delete(this); 24885 this.instance = undefined; 24886 cancelFrame(this.updateProjection); 24887 } 24888 // only on the root 24889 blockUpdate() { 24890 this.updateManuallyBlocked = true; 24891 } 24892 unblockUpdate() { 24893 this.updateManuallyBlocked = false; 24894 } 24895 isUpdateBlocked() { 24896 return this.updateManuallyBlocked || this.updateBlockedByResize; 24897 } 24898 isTreeAnimationBlocked() { 24899 return (this.isAnimationBlocked || 24900 (this.parent && this.parent.isTreeAnimationBlocked()) || 24901 false); 24902 } 24903 // Note: currently only running on root node 24904 startUpdate() { 24905 if (this.isUpdateBlocked()) 24906 return; 24907 this.isUpdating = true; 24908 /** 24909 * If we're running optimised appear animations then these must be 24910 * cancelled before measuring the DOM. This is so we can measure 24911 * the true layout of the element rather than the WAAPI animation 24912 * which will be unaffected by the resetSkewAndRotate step. 24913 */ 24914 if (window.HandoffCancelAllAnimations) { 24915 window.HandoffCancelAllAnimations(); 24916 } 24917 this.nodes && this.nodes.forEach(resetSkewAndRotation); 24918 this.animationId++; 24919 } 24920 getTransformTemplate() { 24921 const { visualElement } = this.options; 24922 return visualElement && visualElement.getProps().transformTemplate; 24923 } 24924 willUpdate(shouldNotifyListeners = true) { 24925 this.root.hasTreeAnimated = true; 24926 if (this.root.isUpdateBlocked()) { 24927 this.options.onExitComplete && this.options.onExitComplete(); 24928 return; 24929 } 24930 !this.root.isUpdating && this.root.startUpdate(); 24931 if (this.isLayoutDirty) 24932 return; 24933 this.isLayoutDirty = true; 24934 for (let i = 0; i < this.path.length; i++) { 24935 const node = this.path[i]; 24936 node.shouldResetTransform = true; 24937 node.updateScroll("snapshot"); 24938 if (node.options.layoutRoot) { 24939 node.willUpdate(false); 24940 } 24941 } 24942 const { layoutId, layout } = this.options; 24943 if (layoutId === undefined && !layout) 24944 return; 24945 const transformTemplate = this.getTransformTemplate(); 24946 this.prevTransformTemplateValue = transformTemplate 24947 ? transformTemplate(this.latestValues, "") 24948 : undefined; 24949 this.updateSnapshot(); 24950 shouldNotifyListeners && this.notifyListeners("willUpdate"); 24951 } 24952 update() { 24953 this.updateScheduled = false; 24954 const updateWasBlocked = this.isUpdateBlocked(); 24955 // When doing an instant transition, we skip the layout update, 24956 // but should still clean up the measurements so that the next 24957 // snapshot could be taken correctly. 24958 if (updateWasBlocked) { 24959 this.unblockUpdate(); 24960 this.clearAllSnapshots(); 24961 this.nodes.forEach(clearMeasurements); 24962 return; 24963 } 24964 if (!this.isUpdating) { 24965 this.nodes.forEach(clearIsLayoutDirty); 24966 } 24967 this.isUpdating = false; 24968 /** 24969 * Write 24970 */ 24971 this.nodes.forEach(resetTransformStyle); 24972 /** 24973 * Read ================== 24974 */ 24975 // Update layout measurements of updated children 24976 this.nodes.forEach(updateLayout); 24977 /** 24978 * Write 24979 */ 24980 // Notify listeners that the layout is updated 24981 this.nodes.forEach(notifyLayoutUpdate); 24982 this.clearAllSnapshots(); 24983 /** 24984 * Manually flush any pending updates. Ideally 24985 * we could leave this to the following requestAnimationFrame but this seems 24986 * to leave a flash of incorrectly styled content. 24987 */ 24988 const now = time.now(); 24989 frameData.delta = clamp_clamp(0, 1000 / 60, now - frameData.timestamp); 24990 frameData.timestamp = now; 24991 frameData.isProcessing = true; 24992 steps.update.process(frameData); 24993 steps.preRender.process(frameData); 24994 steps.render.process(frameData); 24995 frameData.isProcessing = false; 24996 } 24997 didUpdate() { 24998 if (!this.updateScheduled) { 24999 this.updateScheduled = true; 25000 microtask.read(() => this.update()); 25001 } 25002 } 25003 clearAllSnapshots() { 25004 this.nodes.forEach(clearSnapshot); 25005 this.sharedNodes.forEach(removeLeadSnapshots); 25006 } 25007 scheduleUpdateProjection() { 25008 if (!this.projectionUpdateScheduled) { 25009 this.projectionUpdateScheduled = true; 25010 frame_frame.preRender(this.updateProjection, false, true); 25011 } 25012 } 25013 scheduleCheckAfterUnmount() { 25014 /** 25015 * If the unmounting node is in a layoutGroup and did trigger a willUpdate, 25016 * we manually call didUpdate to give a chance to the siblings to animate. 25017 * Otherwise, cleanup all snapshots to prevents future nodes from reusing them. 25018 */ 25019 frame_frame.postRender(() => { 25020 if (this.isLayoutDirty) { 25021 this.root.didUpdate(); 25022 } 25023 else { 25024 this.root.checkUpdateFailed(); 25025 } 25026 }); 25027 } 25028 /** 25029 * Update measurements 25030 */ 25031 updateSnapshot() { 25032 if (this.snapshot || !this.instance) 25033 return; 25034 this.snapshot = this.measure(); 25035 } 25036 updateLayout() { 25037 if (!this.instance) 25038 return; 25039 // TODO: Incorporate into a forwarded scroll offset 25040 this.updateScroll(); 25041 if (!(this.options.alwaysMeasureLayout && this.isLead()) && 25042 !this.isLayoutDirty) { 25043 return; 25044 } 25045 /** 25046 * When a node is mounted, it simply resumes from the prevLead's 25047 * snapshot instead of taking a new one, but the ancestors scroll 25048 * might have updated while the prevLead is unmounted. We need to 25049 * update the scroll again to make sure the layout we measure is 25050 * up to date. 25051 */ 25052 if (this.resumeFrom && !this.resumeFrom.instance) { 25053 for (let i = 0; i < this.path.length; i++) { 25054 const node = this.path[i]; 25055 node.updateScroll(); 25056 } 25057 } 25058 const prevLayout = this.layout; 25059 this.layout = this.measure(false); 25060 this.layoutCorrected = createBox(); 25061 this.isLayoutDirty = false; 25062 this.projectionDelta = undefined; 25063 this.notifyListeners("measure", this.layout.layoutBox); 25064 const { visualElement } = this.options; 25065 visualElement && 25066 visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined); 25067 } 25068 updateScroll(phase = "measure") { 25069 let needsMeasurement = Boolean(this.options.layoutScroll && this.instance); 25070 if (this.scroll && 25071 this.scroll.animationId === this.root.animationId && 25072 this.scroll.phase === phase) { 25073 needsMeasurement = false; 25074 } 25075 if (needsMeasurement) { 25076 this.scroll = { 25077 animationId: this.root.animationId, 25078 phase, 25079 isRoot: checkIsScrollRoot(this.instance), 25080 offset: measureScroll(this.instance), 25081 }; 25082 } 25083 } 25084 resetTransform() { 25085 if (!resetTransform) 25086 return; 25087 const isResetRequested = this.isLayoutDirty || this.shouldResetTransform; 25088 const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta); 25089 const transformTemplate = this.getTransformTemplate(); 25090 const transformTemplateValue = transformTemplate 25091 ? transformTemplate(this.latestValues, "") 25092 : undefined; 25093 const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue; 25094 if (isResetRequested && 25095 (hasProjection || 25096 hasTransform(this.latestValues) || 25097 transformTemplateHasChanged)) { 25098 resetTransform(this.instance, transformTemplateValue); 25099 this.shouldResetTransform = false; 25100 this.scheduleRender(); 25101 } 25102 } 25103 measure(removeTransform = true) { 25104 const pageBox = this.measurePageBox(); 25105 let layoutBox = this.removeElementScroll(pageBox); 25106 /** 25107 * Measurements taken during the pre-render stage 25108 * still have transforms applied so we remove them 25109 * via calculation. 25110 */ 25111 if (removeTransform) { 25112 layoutBox = this.removeTransform(layoutBox); 25113 } 25114 roundBox(layoutBox); 25115 return { 25116 animationId: this.root.animationId, 25117 measuredBox: pageBox, 25118 layoutBox, 25119 latestValues: {}, 25120 source: this.id, 25121 }; 25122 } 25123 measurePageBox() { 25124 const { visualElement } = this.options; 25125 if (!visualElement) 25126 return createBox(); 25127 const box = visualElement.measureViewportBox(); 25128 // Remove viewport scroll to give page-relative coordinates 25129 const { scroll } = this.root; 25130 if (scroll) { 25131 translateAxis(box.x, scroll.offset.x); 25132 translateAxis(box.y, scroll.offset.y); 25133 } 25134 return box; 25135 } 25136 removeElementScroll(box) { 25137 const boxWithoutScroll = createBox(); 25138 copyBoxInto(boxWithoutScroll, box); 25139 /** 25140 * Performance TODO: Keep a cumulative scroll offset down the tree 25141 * rather than loop back up the path. 25142 */ 25143 for (let i = 0; i < this.path.length; i++) { 25144 const node = this.path[i]; 25145 const { scroll, options } = node; 25146 if (node !== this.root && scroll && options.layoutScroll) { 25147 /** 25148 * If this is a new scroll root, we want to remove all previous scrolls 25149 * from the viewport box. 25150 */ 25151 if (scroll.isRoot) { 25152 copyBoxInto(boxWithoutScroll, box); 25153 const { scroll: rootScroll } = this.root; 25154 /** 25155 * Undo the application of page scroll that was originally added 25156 * to the measured bounding box. 25157 */ 25158 if (rootScroll) { 25159 translateAxis(boxWithoutScroll.x, -rootScroll.offset.x); 25160 translateAxis(boxWithoutScroll.y, -rootScroll.offset.y); 25161 } 25162 } 25163 translateAxis(boxWithoutScroll.x, scroll.offset.x); 25164 translateAxis(boxWithoutScroll.y, scroll.offset.y); 25165 } 25166 } 25167 return boxWithoutScroll; 25168 } 25169 applyTransform(box, transformOnly = false) { 25170 const withTransforms = createBox(); 25171 copyBoxInto(withTransforms, box); 25172 for (let i = 0; i < this.path.length; i++) { 25173 const node = this.path[i]; 25174 if (!transformOnly && 25175 node.options.layoutScroll && 25176 node.scroll && 25177 node !== node.root) { 25178 transformBox(withTransforms, { 25179 x: -node.scroll.offset.x, 25180 y: -node.scroll.offset.y, 25181 }); 25182 } 25183 if (!hasTransform(node.latestValues)) 25184 continue; 25185 transformBox(withTransforms, node.latestValues); 25186 } 25187 if (hasTransform(this.latestValues)) { 25188 transformBox(withTransforms, this.latestValues); 25189 } 25190 return withTransforms; 25191 } 25192 removeTransform(box) { 25193 const boxWithoutTransform = createBox(); 25194 copyBoxInto(boxWithoutTransform, box); 25195 for (let i = 0; i < this.path.length; i++) { 25196 const node = this.path[i]; 25197 if (!node.instance) 25198 continue; 25199 if (!hasTransform(node.latestValues)) 25200 continue; 25201 hasScale(node.latestValues) && node.updateSnapshot(); 25202 const sourceBox = createBox(); 25203 const nodeBox = node.measurePageBox(); 25204 copyBoxInto(sourceBox, nodeBox); 25205 removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox); 25206 } 25207 if (hasTransform(this.latestValues)) { 25208 removeBoxTransforms(boxWithoutTransform, this.latestValues); 25209 } 25210 return boxWithoutTransform; 25211 } 25212 setTargetDelta(delta) { 25213 this.targetDelta = delta; 25214 this.root.scheduleUpdateProjection(); 25215 this.isProjectionDirty = true; 25216 } 25217 setOptions(options) { 25218 this.options = { 25219 ...this.options, 25220 ...options, 25221 crossfade: options.crossfade !== undefined ? options.crossfade : true, 25222 }; 25223 } 25224 clearMeasurements() { 25225 this.scroll = undefined; 25226 this.layout = undefined; 25227 this.snapshot = undefined; 25228 this.prevTransformTemplateValue = undefined; 25229 this.targetDelta = undefined; 25230 this.target = undefined; 25231 this.isLayoutDirty = false; 25232 } 25233 forceRelativeParentToResolveTarget() { 25234 if (!this.relativeParent) 25235 return; 25236 /** 25237 * If the parent target isn't up-to-date, force it to update. 25238 * This is an unfortunate de-optimisation as it means any updating relative 25239 * projection will cause all the relative parents to recalculate back 25240 * up the tree. 25241 */ 25242 if (this.relativeParent.resolvedRelativeTargetAt !== 25243 frameData.timestamp) { 25244 this.relativeParent.resolveTargetDelta(true); 25245 } 25246 } 25247 resolveTargetDelta(forceRecalculation = false) { 25248 var _a; 25249 /** 25250 * Once the dirty status of nodes has been spread through the tree, we also 25251 * need to check if we have a shared node of a different depth that has itself 25252 * been dirtied. 25253 */ 25254 const lead = this.getLead(); 25255 this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty); 25256 this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty); 25257 this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty); 25258 const isShared = Boolean(this.resumingFrom) || this !== lead; 25259 /** 25260 * We don't use transform for this step of processing so we don't 25261 * need to check whether any nodes have changed transform. 25262 */ 25263 const canSkip = !(forceRecalculation || 25264 (isShared && this.isSharedProjectionDirty) || 25265 this.isProjectionDirty || 25266 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) || 25267 this.attemptToResolveRelativeTarget); 25268 if (canSkip) 25269 return; 25270 const { layout, layoutId } = this.options; 25271 /** 25272 * If we have no layout, we can't perform projection, so early return 25273 */ 25274 if (!this.layout || !(layout || layoutId)) 25275 return; 25276 this.resolvedRelativeTargetAt = frameData.timestamp; 25277 /** 25278 * If we don't have a targetDelta but do have a layout, we can attempt to resolve 25279 * a relativeParent. This will allow a component to perform scale correction 25280 * even if no animation has started. 25281 */ 25282 if (!this.targetDelta && !this.relativeTarget) { 25283 const relativeParent = this.getClosestProjectingParent(); 25284 if (relativeParent && 25285 relativeParent.layout && 25286 this.animationProgress !== 1) { 25287 this.relativeParent = relativeParent; 25288 this.forceRelativeParentToResolveTarget(); 25289 this.relativeTarget = createBox(); 25290 this.relativeTargetOrigin = createBox(); 25291 calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox); 25292 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 25293 } 25294 else { 25295 this.relativeParent = this.relativeTarget = undefined; 25296 } 25297 } 25298 /** 25299 * If we have no relative target or no target delta our target isn't valid 25300 * for this frame. 25301 */ 25302 if (!this.relativeTarget && !this.targetDelta) 25303 return; 25304 /** 25305 * Lazy-init target data structure 25306 */ 25307 if (!this.target) { 25308 this.target = createBox(); 25309 this.targetWithTransforms = createBox(); 25310 } 25311 /** 25312 * If we've got a relative box for this component, resolve it into a target relative to the parent. 25313 */ 25314 if (this.relativeTarget && 25315 this.relativeTargetOrigin && 25316 this.relativeParent && 25317 this.relativeParent.target) { 25318 this.forceRelativeParentToResolveTarget(); 25319 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target); 25320 /** 25321 * If we've only got a targetDelta, resolve it into a target 25322 */ 25323 } 25324 else if (this.targetDelta) { 25325 if (Boolean(this.resumingFrom)) { 25326 // TODO: This is creating a new object every frame 25327 this.target = this.applyTransform(this.layout.layoutBox); 25328 } 25329 else { 25330 copyBoxInto(this.target, this.layout.layoutBox); 25331 } 25332 applyBoxDelta(this.target, this.targetDelta); 25333 } 25334 else { 25335 /** 25336 * If no target, use own layout as target 25337 */ 25338 copyBoxInto(this.target, this.layout.layoutBox); 25339 } 25340 /** 25341 * If we've been told to attempt to resolve a relative target, do so. 25342 */ 25343 if (this.attemptToResolveRelativeTarget) { 25344 this.attemptToResolveRelativeTarget = false; 25345 const relativeParent = this.getClosestProjectingParent(); 25346 if (relativeParent && 25347 Boolean(relativeParent.resumingFrom) === 25348 Boolean(this.resumingFrom) && 25349 !relativeParent.options.layoutScroll && 25350 relativeParent.target && 25351 this.animationProgress !== 1) { 25352 this.relativeParent = relativeParent; 25353 this.forceRelativeParentToResolveTarget(); 25354 this.relativeTarget = createBox(); 25355 this.relativeTargetOrigin = createBox(); 25356 calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target); 25357 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 25358 } 25359 else { 25360 this.relativeParent = this.relativeTarget = undefined; 25361 } 25362 } 25363 /** 25364 * Increase debug counter for resolved target deltas 25365 */ 25366 projectionFrameData.resolvedTargetDeltas++; 25367 } 25368 getClosestProjectingParent() { 25369 if (!this.parent || 25370 hasScale(this.parent.latestValues) || 25371 has2DTranslate(this.parent.latestValues)) { 25372 return undefined; 25373 } 25374 if (this.parent.isProjecting()) { 25375 return this.parent; 25376 } 25377 else { 25378 return this.parent.getClosestProjectingParent(); 25379 } 25380 } 25381 isProjecting() { 25382 return Boolean((this.relativeTarget || 25383 this.targetDelta || 25384 this.options.layoutRoot) && 25385 this.layout); 25386 } 25387 calcProjection() { 25388 var _a; 25389 const lead = this.getLead(); 25390 const isShared = Boolean(this.resumingFrom) || this !== lead; 25391 let canSkip = true; 25392 /** 25393 * If this is a normal layout animation and neither this node nor its nearest projecting 25394 * is dirty then we can't skip. 25395 */ 25396 if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) { 25397 canSkip = false; 25398 } 25399 /** 25400 * If this is a shared layout animation and this node's shared projection is dirty then 25401 * we can't skip. 25402 */ 25403 if (isShared && 25404 (this.isSharedProjectionDirty || this.isTransformDirty)) { 25405 canSkip = false; 25406 } 25407 /** 25408 * If we have resolved the target this frame we must recalculate the 25409 * projection to ensure it visually represents the internal calculations. 25410 */ 25411 if (this.resolvedRelativeTargetAt === frameData.timestamp) { 25412 canSkip = false; 25413 } 25414 if (canSkip) 25415 return; 25416 const { layout, layoutId } = this.options; 25417 /** 25418 * If this section of the tree isn't animating we can 25419 * delete our target sources for the following frame. 25420 */ 25421 this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) || 25422 this.currentAnimation || 25423 this.pendingAnimation); 25424 if (!this.isTreeAnimating) { 25425 this.targetDelta = this.relativeTarget = undefined; 25426 } 25427 if (!this.layout || !(layout || layoutId)) 25428 return; 25429 /** 25430 * Reset the corrected box with the latest values from box, as we're then going 25431 * to perform mutative operations on it. 25432 */ 25433 copyBoxInto(this.layoutCorrected, this.layout.layoutBox); 25434 /** 25435 * Record previous tree scales before updating. 25436 */ 25437 const prevTreeScaleX = this.treeScale.x; 25438 const prevTreeScaleY = this.treeScale.y; 25439 /** 25440 * Apply all the parent deltas to this box to produce the corrected box. This 25441 * is the layout box, as it will appear on screen as a result of the transforms of its parents. 25442 */ 25443 applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared); 25444 /** 25445 * If this layer needs to perform scale correction but doesn't have a target, 25446 * use the layout as the target. 25447 */ 25448 if (lead.layout && 25449 !lead.target && 25450 (this.treeScale.x !== 1 || this.treeScale.y !== 1)) { 25451 lead.target = lead.layout.layoutBox; 25452 lead.targetWithTransforms = createBox(); 25453 } 25454 const { target } = lead; 25455 if (!target) { 25456 /** 25457 * If we don't have a target to project into, but we were previously 25458 * projecting, we want to remove the stored transform and schedule 25459 * a render to ensure the elements reflect the removed transform. 25460 */ 25461 if (this.projectionTransform) { 25462 this.projectionDelta = createDelta(); 25463 this.projectionTransform = "none"; 25464 this.scheduleRender(); 25465 } 25466 return; 25467 } 25468 if (!this.projectionDelta) { 25469 this.projectionDelta = createDelta(); 25470 this.projectionDeltaWithTransform = createDelta(); 25471 } 25472 const prevProjectionTransform = this.projectionTransform; 25473 /** 25474 * Update the delta between the corrected box and the target box before user-set transforms were applied. 25475 * This will allow us to calculate the corrected borderRadius and boxShadow to compensate 25476 * for our layout reprojection, but still allow them to be scaled correctly by the user. 25477 * It might be that to simplify this we may want to accept that user-set scale is also corrected 25478 * and we wouldn't have to keep and calc both deltas, OR we could support a user setting 25479 * to allow people to choose whether these styles are corrected based on just the 25480 * layout reprojection or the final bounding box. 25481 */ 25482 calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues); 25483 this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale); 25484 if (this.projectionTransform !== prevProjectionTransform || 25485 this.treeScale.x !== prevTreeScaleX || 25486 this.treeScale.y !== prevTreeScaleY) { 25487 this.hasProjected = true; 25488 this.scheduleRender(); 25489 this.notifyListeners("projectionUpdate", target); 25490 } 25491 /** 25492 * Increase debug counter for recalculated projections 25493 */ 25494 projectionFrameData.recalculatedProjection++; 25495 } 25496 hide() { 25497 this.isVisible = false; 25498 // TODO: Schedule render 25499 } 25500 show() { 25501 this.isVisible = true; 25502 // TODO: Schedule render 25503 } 25504 scheduleRender(notifyAll = true) { 25505 this.options.scheduleRender && this.options.scheduleRender(); 25506 if (notifyAll) { 25507 const stack = this.getStack(); 25508 stack && stack.scheduleRender(); 25509 } 25510 if (this.resumingFrom && !this.resumingFrom.instance) { 25511 this.resumingFrom = undefined; 25512 } 25513 } 25514 setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) { 25515 const snapshot = this.snapshot; 25516 const snapshotLatestValues = snapshot 25517 ? snapshot.latestValues 25518 : {}; 25519 const mixedValues = { ...this.latestValues }; 25520 const targetDelta = createDelta(); 25521 if (!this.relativeParent || 25522 !this.relativeParent.options.layoutRoot) { 25523 this.relativeTarget = this.relativeTargetOrigin = undefined; 25524 } 25525 this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged; 25526 const relativeLayout = createBox(); 25527 const snapshotSource = snapshot ? snapshot.source : undefined; 25528 const layoutSource = this.layout ? this.layout.source : undefined; 25529 const isSharedLayoutAnimation = snapshotSource !== layoutSource; 25530 const stack = this.getStack(); 25531 const isOnlyMember = !stack || stack.members.length <= 1; 25532 const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation && 25533 !isOnlyMember && 25534 this.options.crossfade === true && 25535 !this.path.some(hasOpacityCrossfade)); 25536 this.animationProgress = 0; 25537 let prevRelativeTarget; 25538 this.mixTargetDelta = (latest) => { 25539 const progress = latest / 1000; 25540 mixAxisDelta(targetDelta.x, delta.x, progress); 25541 mixAxisDelta(targetDelta.y, delta.y, progress); 25542 this.setTargetDelta(targetDelta); 25543 if (this.relativeTarget && 25544 this.relativeTargetOrigin && 25545 this.layout && 25546 this.relativeParent && 25547 this.relativeParent.layout) { 25548 calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox); 25549 mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress); 25550 /** 25551 * If this is an unchanged relative target we can consider the 25552 * projection not dirty. 25553 */ 25554 if (prevRelativeTarget && 25555 boxEquals(this.relativeTarget, prevRelativeTarget)) { 25556 this.isProjectionDirty = false; 25557 } 25558 if (!prevRelativeTarget) 25559 prevRelativeTarget = createBox(); 25560 copyBoxInto(prevRelativeTarget, this.relativeTarget); 25561 } 25562 if (isSharedLayoutAnimation) { 25563 this.animationValues = mixedValues; 25564 mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember); 25565 } 25566 this.root.scheduleUpdateProjection(); 25567 this.scheduleRender(); 25568 this.animationProgress = progress; 25569 }; 25570 this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0); 25571 } 25572 startAnimation(options) { 25573 this.notifyListeners("animationStart"); 25574 this.currentAnimation && this.currentAnimation.stop(); 25575 if (this.resumingFrom && this.resumingFrom.currentAnimation) { 25576 this.resumingFrom.currentAnimation.stop(); 25577 } 25578 if (this.pendingAnimation) { 25579 cancelFrame(this.pendingAnimation); 25580 this.pendingAnimation = undefined; 25581 } 25582 /** 25583 * Start the animation in the next frame to have a frame with progress 0, 25584 * where the target is the same as when the animation started, so we can 25585 * calculate the relative positions correctly for instant transitions. 25586 */ 25587 this.pendingAnimation = frame_frame.update(() => { 25588 globalProjectionState.hasAnimatedSinceResize = true; 25589 this.currentAnimation = animateSingleValue(0, animationTarget, { 25590 ...options, 25591 onUpdate: (latest) => { 25592 this.mixTargetDelta(latest); 25593 options.onUpdate && options.onUpdate(latest); 25594 }, 25595 onComplete: () => { 25596 options.onComplete && options.onComplete(); 25597 this.completeAnimation(); 25598 }, 25599 }); 25600 if (this.resumingFrom) { 25601 this.resumingFrom.currentAnimation = this.currentAnimation; 25602 } 25603 this.pendingAnimation = undefined; 25604 }); 25605 } 25606 completeAnimation() { 25607 if (this.resumingFrom) { 25608 this.resumingFrom.currentAnimation = undefined; 25609 this.resumingFrom.preserveOpacity = undefined; 25610 } 25611 const stack = this.getStack(); 25612 stack && stack.exitAnimationComplete(); 25613 this.resumingFrom = 25614 this.currentAnimation = 25615 this.animationValues = 25616 undefined; 25617 this.notifyListeners("animationComplete"); 25618 } 25619 finishAnimation() { 25620 if (this.currentAnimation) { 25621 this.mixTargetDelta && this.mixTargetDelta(animationTarget); 25622 this.currentAnimation.stop(); 25623 } 25624 this.completeAnimation(); 25625 } 25626 applyTransformsToTarget() { 25627 const lead = this.getLead(); 25628 let { targetWithTransforms, target, layout, latestValues } = lead; 25629 if (!targetWithTransforms || !target || !layout) 25630 return; 25631 /** 25632 * If we're only animating position, and this element isn't the lead element, 25633 * then instead of projecting into the lead box we instead want to calculate 25634 * a new target that aligns the two boxes but maintains the layout shape. 25635 */ 25636 if (this !== lead && 25637 this.layout && 25638 layout && 25639 shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) { 25640 target = this.target || createBox(); 25641 const xLength = calcLength(this.layout.layoutBox.x); 25642 target.x.min = lead.target.x.min; 25643 target.x.max = target.x.min + xLength; 25644 const yLength = calcLength(this.layout.layoutBox.y); 25645 target.y.min = lead.target.y.min; 25646 target.y.max = target.y.min + yLength; 25647 } 25648 copyBoxInto(targetWithTransforms, target); 25649 /** 25650 * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal. 25651 * This is the final box that we will then project into by calculating a transform delta and 25652 * applying it to the corrected box. 25653 */ 25654 transformBox(targetWithTransforms, latestValues); 25655 /** 25656 * Update the delta between the corrected box and the final target box, after 25657 * user-set transforms are applied to it. This will be used by the renderer to 25658 * create a transform style that will reproject the element from its layout layout 25659 * into the desired bounding box. 25660 */ 25661 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues); 25662 } 25663 registerSharedNode(layoutId, node) { 25664 if (!this.sharedNodes.has(layoutId)) { 25665 this.sharedNodes.set(layoutId, new NodeStack()); 25666 } 25667 const stack = this.sharedNodes.get(layoutId); 25668 stack.add(node); 25669 const config = node.options.initialPromotionConfig; 25670 node.promote({ 25671 transition: config ? config.transition : undefined, 25672 preserveFollowOpacity: config && config.shouldPreserveFollowOpacity 25673 ? config.shouldPreserveFollowOpacity(node) 25674 : undefined, 25675 }); 25676 } 25677 isLead() { 25678 const stack = this.getStack(); 25679 return stack ? stack.lead === this : true; 25680 } 25681 getLead() { 25682 var _a; 25683 const { layoutId } = this.options; 25684 return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this; 25685 } 25686 getPrevLead() { 25687 var _a; 25688 const { layoutId } = this.options; 25689 return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined; 25690 } 25691 getStack() { 25692 const { layoutId } = this.options; 25693 if (layoutId) 25694 return this.root.sharedNodes.get(layoutId); 25695 } 25696 promote({ needsReset, transition, preserveFollowOpacity, } = {}) { 25697 const stack = this.getStack(); 25698 if (stack) 25699 stack.promote(this, preserveFollowOpacity); 25700 if (needsReset) { 25701 this.projectionDelta = undefined; 25702 this.needsReset = true; 25703 } 25704 if (transition) 25705 this.setOptions({ transition }); 25706 } 25707 relegate() { 25708 const stack = this.getStack(); 25709 if (stack) { 25710 return stack.relegate(this); 25711 } 25712 else { 25713 return false; 25714 } 25715 } 25716 resetSkewAndRotation() { 25717 const { visualElement } = this.options; 25718 if (!visualElement) 25719 return; 25720 // If there's no detected skew or rotation values, we can early return without a forced render. 25721 let hasDistortingTransform = false; 25722 /** 25723 * An unrolled check for rotation values. Most elements don't have any rotation and 25724 * skipping the nested loop and new object creation is 50% faster. 25725 */ 25726 const { latestValues } = visualElement; 25727 if (latestValues.z || 25728 latestValues.rotate || 25729 latestValues.rotateX || 25730 latestValues.rotateY || 25731 latestValues.rotateZ || 25732 latestValues.skewX || 25733 latestValues.skewY) { 25734 hasDistortingTransform = true; 25735 } 25736 // If there's no distorting values, we don't need to do any more. 25737 if (!hasDistortingTransform) 25738 return; 25739 const resetValues = {}; 25740 if (latestValues.z) { 25741 resetDistortingTransform("z", visualElement, resetValues, this.animationValues); 25742 } 25743 // Check the skew and rotate value of all axes and reset to 0 25744 for (let i = 0; i < transformAxes.length; i++) { 25745 resetDistortingTransform(`rotate$transformAxes[i]}`, visualElement, resetValues, this.animationValues); 25746 resetDistortingTransform(`skew$transformAxes[i]}`, visualElement, resetValues, this.animationValues); 25747 } 25748 // Force a render of this element to apply the transform with all skews and rotations 25749 // set to 0. 25750 visualElement.render(); 25751 // Put back all the values we reset 25752 for (const key in resetValues) { 25753 visualElement.setStaticValue(key, resetValues[key]); 25754 if (this.animationValues) { 25755 this.animationValues[key] = resetValues[key]; 25756 } 25757 } 25758 // Schedule a render for the next frame. This ensures we won't visually 25759 // see the element with the reset rotate value applied. 25760 visualElement.scheduleRender(); 25761 } 25762 getProjectionStyles(styleProp) { 25763 var _a, _b; 25764 if (!this.instance || this.isSVG) 25765 return undefined; 25766 if (!this.isVisible) { 25767 return hiddenVisibility; 25768 } 25769 const styles = { 25770 visibility: "", 25771 }; 25772 const transformTemplate = this.getTransformTemplate(); 25773 if (this.needsReset) { 25774 this.needsReset = false; 25775 styles.opacity = ""; 25776 styles.pointerEvents = 25777 resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""; 25778 styles.transform = transformTemplate 25779 ? transformTemplate(this.latestValues, "") 25780 : "none"; 25781 return styles; 25782 } 25783 const lead = this.getLead(); 25784 if (!this.projectionDelta || !this.layout || !lead.target) { 25785 const emptyStyles = {}; 25786 if (this.options.layoutId) { 25787 emptyStyles.opacity = 25788 this.latestValues.opacity !== undefined 25789 ? this.latestValues.opacity 25790 : 1; 25791 emptyStyles.pointerEvents = 25792 resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""; 25793 } 25794 if (this.hasProjected && !hasTransform(this.latestValues)) { 25795 emptyStyles.transform = transformTemplate 25796 ? transformTemplate({}, "") 25797 : "none"; 25798 this.hasProjected = false; 25799 } 25800 return emptyStyles; 25801 } 25802 const valuesToRender = lead.animationValues || lead.latestValues; 25803 this.applyTransformsToTarget(); 25804 styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender); 25805 if (transformTemplate) { 25806 styles.transform = transformTemplate(valuesToRender, styles.transform); 25807 } 25808 const { x, y } = this.projectionDelta; 25809 styles.transformOrigin = `$x.origin * 100}% $y.origin * 100}% 0`; 25810 if (lead.animationValues) { 25811 /** 25812 * If the lead component is animating, assign this either the entering/leaving 25813 * opacity 25814 */ 25815 styles.opacity = 25816 lead === this 25817 ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 25818 : this.preserveOpacity 25819 ? this.latestValues.opacity 25820 : valuesToRender.opacityExit; 25821 } 25822 else { 25823 /** 25824 * Or we're not animating at all, set the lead component to its layout 25825 * opacity and other components to hidden. 25826 */ 25827 styles.opacity = 25828 lead === this 25829 ? valuesToRender.opacity !== undefined 25830 ? valuesToRender.opacity 25831 : "" 25832 : valuesToRender.opacityExit !== undefined 25833 ? valuesToRender.opacityExit 25834 : 0; 25835 } 25836 /** 25837 * Apply scale correction 25838 */ 25839 for (const key in scaleCorrectors) { 25840 if (valuesToRender[key] === undefined) 25841 continue; 25842 const { correct, applyTo } = scaleCorrectors[key]; 25843 /** 25844 * Only apply scale correction to the value if we have an 25845 * active projection transform. Otherwise these values become 25846 * vulnerable to distortion if the element changes size without 25847 * a corresponding layout animation. 25848 */ 25849 const corrected = styles.transform === "none" 25850 ? valuesToRender[key] 25851 : correct(valuesToRender[key], lead); 25852 if (applyTo) { 25853 const num = applyTo.length; 25854 for (let i = 0; i < num; i++) { 25855 styles[applyTo[i]] = corrected; 25856 } 25857 } 25858 else { 25859 styles[key] = corrected; 25860 } 25861 } 25862 /** 25863 * Disable pointer events on follow components. This is to ensure 25864 * that if a follow component covers a lead component it doesn't block 25865 * pointer events on the lead. 25866 */ 25867 if (this.options.layoutId) { 25868 styles.pointerEvents = 25869 lead === this 25870 ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" 25871 : "none"; 25872 } 25873 return styles; 25874 } 25875 clearSnapshot() { 25876 this.resumeFrom = this.snapshot = undefined; 25877 } 25878 // Only run on root 25879 resetTree() { 25880 this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); }); 25881 this.root.nodes.forEach(clearMeasurements); 25882 this.root.sharedNodes.clear(); 25883 } 25884 }; 25885 } 25886 function updateLayout(node) { 25887 node.updateLayout(); 25888 } 25889 function notifyLayoutUpdate(node) { 25890 var _a; 25891 const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot; 25892 if (node.isLead() && 25893 node.layout && 25894 snapshot && 25895 node.hasListeners("didUpdate")) { 25896 const { layoutBox: layout, measuredBox: measuredLayout } = node.layout; 25897 const { animationType } = node.options; 25898 const isShared = snapshot.source !== node.layout.source; 25899 // TODO Maybe we want to also resize the layout snapshot so we don't trigger 25900 // animations for instance if layout="size" and an element has only changed position 25901 if (animationType === "size") { 25902 eachAxis((axis) => { 25903 const axisSnapshot = isShared 25904 ? snapshot.measuredBox[axis] 25905 : snapshot.layoutBox[axis]; 25906 const length = calcLength(axisSnapshot); 25907 axisSnapshot.min = layout[axis].min; 25908 axisSnapshot.max = axisSnapshot.min + length; 25909 }); 25910 } 25911 else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) { 25912 eachAxis((axis) => { 25913 const axisSnapshot = isShared 25914 ? snapshot.measuredBox[axis] 25915 : snapshot.layoutBox[axis]; 25916 const length = calcLength(layout[axis]); 25917 axisSnapshot.max = axisSnapshot.min + length; 25918 /** 25919 * Ensure relative target gets resized and rerendererd 25920 */ 25921 if (node.relativeTarget && !node.currentAnimation) { 25922 node.isProjectionDirty = true; 25923 node.relativeTarget[axis].max = 25924 node.relativeTarget[axis].min + length; 25925 } 25926 }); 25927 } 25928 const layoutDelta = createDelta(); 25929 calcBoxDelta(layoutDelta, layout, snapshot.layoutBox); 25930 const visualDelta = createDelta(); 25931 if (isShared) { 25932 calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox); 25933 } 25934 else { 25935 calcBoxDelta(visualDelta, layout, snapshot.layoutBox); 25936 } 25937 const hasLayoutChanged = !isDeltaZero(layoutDelta); 25938 let hasRelativeTargetChanged = false; 25939 if (!node.resumeFrom) { 25940 const relativeParent = node.getClosestProjectingParent(); 25941 /** 25942 * If the relativeParent is itself resuming from a different element then 25943 * the relative snapshot is not relavent 25944 */ 25945 if (relativeParent && !relativeParent.resumeFrom) { 25946 const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent; 25947 if (parentSnapshot && parentLayout) { 25948 const relativeSnapshot = createBox(); 25949 calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox); 25950 const relativeLayout = createBox(); 25951 calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox); 25952 if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) { 25953 hasRelativeTargetChanged = true; 25954 } 25955 if (relativeParent.options.layoutRoot) { 25956 node.relativeTarget = relativeLayout; 25957 node.relativeTargetOrigin = relativeSnapshot; 25958 node.relativeParent = relativeParent; 25959 } 25960 } 25961 } 25962 } 25963 node.notifyListeners("didUpdate", { 25964 layout, 25965 snapshot, 25966 delta: visualDelta, 25967 layoutDelta, 25968 hasLayoutChanged, 25969 hasRelativeTargetChanged, 25970 }); 25971 } 25972 else if (node.isLead()) { 25973 const { onExitComplete } = node.options; 25974 onExitComplete && onExitComplete(); 25975 } 25976 /** 25977 * Clearing transition 25978 * TODO: Investigate why this transition is being passed in as {type: false } from Framer 25979 * and why we need it at all 25980 */ 25981 node.options.transition = undefined; 25982 } 25983 function propagateDirtyNodes(node) { 25984 /** 25985 * Increase debug counter for nodes encountered this frame 25986 */ 25987 projectionFrameData.totalNodes++; 25988 if (!node.parent) 25989 return; 25990 /** 25991 * If this node isn't projecting, propagate isProjectionDirty. It will have 25992 * no performance impact but it will allow the next child that *is* projecting 25993 * but *isn't* dirty to just check its parent to see if *any* ancestor needs 25994 * correcting. 25995 */ 25996 if (!node.isProjecting()) { 25997 node.isProjectionDirty = node.parent.isProjectionDirty; 25998 } 25999 /** 26000 * Propagate isSharedProjectionDirty and isTransformDirty 26001 * throughout the whole tree. A future revision can take another look at 26002 * this but for safety we still recalcualte shared nodes. 26003 */ 26004 node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty || 26005 node.parent.isProjectionDirty || 26006 node.parent.isSharedProjectionDirty)); 26007 node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty); 26008 } 26009 function cleanDirtyNodes(node) { 26010 node.isProjectionDirty = 26011 node.isSharedProjectionDirty = 26012 node.isTransformDirty = 26013 false; 26014 } 26015 function clearSnapshot(node) { 26016 node.clearSnapshot(); 26017 } 26018 function clearMeasurements(node) { 26019 node.clearMeasurements(); 26020 } 26021 function clearIsLayoutDirty(node) { 26022 node.isLayoutDirty = false; 26023 } 26024 function resetTransformStyle(node) { 26025 const { visualElement } = node.options; 26026 if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) { 26027 visualElement.notify("BeforeLayoutMeasure"); 26028 } 26029 node.resetTransform(); 26030 } 26031 function finishAnimation(node) { 26032 node.finishAnimation(); 26033 node.targetDelta = node.relativeTarget = node.target = undefined; 26034 node.isProjectionDirty = true; 26035 } 26036 function resolveTargetDelta(node) { 26037 node.resolveTargetDelta(); 26038 } 26039 function calcProjection(node) { 26040 node.calcProjection(); 26041 } 26042 function resetSkewAndRotation(node) { 26043 node.resetSkewAndRotation(); 26044 } 26045 function removeLeadSnapshots(stack) { 26046 stack.removeLeadSnapshot(); 26047 } 26048 function mixAxisDelta(output, delta, p) { 26049 output.translate = mixNumber(delta.translate, 0, p); 26050 output.scale = mixNumber(delta.scale, 1, p); 26051 output.origin = delta.origin; 26052 output.originPoint = delta.originPoint; 26053 } 26054 function mixAxis(output, from, to, p) { 26055 output.min = mixNumber(from.min, to.min, p); 26056 output.max = mixNumber(from.max, to.max, p); 26057 } 26058 function mixBox(output, from, to, p) { 26059 mixAxis(output.x, from.x, to.x, p); 26060 mixAxis(output.y, from.y, to.y, p); 26061 } 26062 function hasOpacityCrossfade(node) { 26063 return (node.animationValues && node.animationValues.opacityExit !== undefined); 26064 } 26065 const defaultLayoutTransition = { 26066 duration: 0.45, 26067 ease: [0.4, 0, 0.1, 1], 26068 }; 26069 const userAgentContains = (string) => typeof navigator !== "undefined" && 26070 navigator.userAgent && 26071 navigator.userAgent.toLowerCase().includes(string); 26072 /** 26073 * Measured bounding boxes must be rounded in Safari and 26074 * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements 26075 * can appear to jump. 26076 */ 26077 const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") 26078 ? Math.round 26079 : noop_noop; 26080 function roundAxis(axis) { 26081 // Round to the nearest .5 pixels to support subpixel layouts 26082 axis.min = roundPoint(axis.min); 26083 axis.max = roundPoint(axis.max); 26084 } 26085 function roundBox(box) { 26086 roundAxis(box.x); 26087 roundAxis(box.y); 26088 } 26089 function shouldAnimatePositionOnly(animationType, snapshot, layout) { 26090 return (animationType === "position" || 26091 (animationType === "preserve-aspect" && 26092 !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2))); 26093 } 26094 26095 26096 26097 ;// ./node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs 26098 26099 26100 26101 const DocumentProjectionNode = createProjectionNode({ 26102 attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify), 26103 measureScroll: () => ({ 26104 x: document.documentElement.scrollLeft || document.body.scrollLeft, 26105 y: document.documentElement.scrollTop || document.body.scrollTop, 26106 }), 26107 checkIsScrollRoot: () => true, 26108 }); 26109 26110 26111 26112 ;// ./node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs 26113 26114 26115 26116 const rootProjectionNode = { 26117 current: undefined, 26118 }; 26119 const HTMLProjectionNode = createProjectionNode({ 26120 measureScroll: (instance) => ({ 26121 x: instance.scrollLeft, 26122 y: instance.scrollTop, 26123 }), 26124 defaultParent: () => { 26125 if (!rootProjectionNode.current) { 26126 const documentNode = new DocumentProjectionNode({}); 26127 documentNode.mount(window); 26128 documentNode.setOptions({ layoutScroll: true }); 26129 rootProjectionNode.current = documentNode; 26130 } 26131 return rootProjectionNode.current; 26132 }, 26133 resetTransform: (instance, value) => { 26134 instance.style.transform = value !== undefined ? value : "none"; 26135 }, 26136 checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"), 26137 }); 26138 26139 26140 26141 ;// ./node_modules/framer-motion/dist/es/motion/features/drag.mjs 26142 26143 26144 26145 26146 26147 const drag = { 26148 pan: { 26149 Feature: PanGesture, 26150 }, 26151 drag: { 26152 Feature: DragGesture, 26153 ProjectionNode: HTMLProjectionNode, 26154 MeasureLayout: MeasureLayout, 26155 }, 26156 }; 26157 26158 26159 26160 ;// ./node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs 26161 // Does this device prefer reduced motion? Returns `null` server-side. 26162 const prefersReducedMotion = { current: null }; 26163 const hasReducedMotionListener = { current: false }; 26164 26165 26166 26167 ;// ./node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs 26168 26169 26170 26171 function initPrefersReducedMotion() { 26172 hasReducedMotionListener.current = true; 26173 if (!is_browser_isBrowser) 26174 return; 26175 if (window.matchMedia) { 26176 const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)"); 26177 const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches); 26178 motionMediaQuery.addListener(setReducedMotionPreferences); 26179 setReducedMotionPreferences(); 26180 } 26181 else { 26182 prefersReducedMotion.current = false; 26183 } 26184 } 26185 26186 26187 26188 ;// ./node_modules/framer-motion/dist/es/render/utils/motion-values.mjs 26189 26190 26191 26192 26193 26194 function updateMotionValuesFromProps(element, next, prev) { 26195 const { willChange } = next; 26196 for (const key in next) { 26197 const nextValue = next[key]; 26198 const prevValue = prev[key]; 26199 if (isMotionValue(nextValue)) { 26200 /** 26201 * If this is a motion value found in props or style, we want to add it 26202 * to our visual element's motion value map. 26203 */ 26204 element.addValue(key, nextValue); 26205 if (isWillChangeMotionValue(willChange)) { 26206 willChange.add(key); 26207 } 26208 /** 26209 * Check the version of the incoming motion value with this version 26210 * and warn against mismatches. 26211 */ 26212 if (false) {} 26213 } 26214 else if (isMotionValue(prevValue)) { 26215 /** 26216 * If we're swapping from a motion value to a static value, 26217 * create a new motion value from that 26218 */ 26219 element.addValue(key, motionValue(nextValue, { owner: element })); 26220 if (isWillChangeMotionValue(willChange)) { 26221 willChange.remove(key); 26222 } 26223 } 26224 else if (prevValue !== nextValue) { 26225 /** 26226 * If this is a flat value that has changed, update the motion value 26227 * or create one if it doesn't exist. We only want to do this if we're 26228 * not handling the value with our animation state. 26229 */ 26230 if (element.hasValue(key)) { 26231 const existingValue = element.getValue(key); 26232 if (existingValue.liveStyle === true) { 26233 existingValue.jump(nextValue); 26234 } 26235 else if (!existingValue.hasAnimated) { 26236 existingValue.set(nextValue); 26237 } 26238 } 26239 else { 26240 const latestValue = element.getStaticValue(key); 26241 element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element })); 26242 } 26243 } 26244 } 26245 // Handle removed values 26246 for (const key in prev) { 26247 if (next[key] === undefined) 26248 element.removeValue(key); 26249 } 26250 return next; 26251 } 26252 26253 26254 26255 ;// ./node_modules/framer-motion/dist/es/render/store.mjs 26256 const visualElementStore = new WeakMap(); 26257 26258 26259 26260 ;// ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs 26261 26262 26263 26264 26265 26266 /** 26267 * A list of all ValueTypes 26268 */ 26269 const valueTypes = [...dimensionValueTypes, color, complex]; 26270 /** 26271 * Tests a value against the list of ValueTypes 26272 */ 26273 const findValueType = (v) => valueTypes.find(testValueType(v)); 26274 26275 26276 26277 ;// ./node_modules/framer-motion/dist/es/render/VisualElement.mjs 26278 26279 26280 26281 26282 26283 26284 26285 26286 26287 26288 26289 26290 26291 26292 26293 26294 26295 26296 26297 26298 26299 26300 26301 26302 26303 26304 const featureNames = Object.keys(featureDefinitions); 26305 const numFeatures = featureNames.length; 26306 const propEventHandlers = [ 26307 "AnimationStart", 26308 "AnimationComplete", 26309 "Update", 26310 "BeforeLayoutMeasure", 26311 "LayoutMeasure", 26312 "LayoutAnimationStart", 26313 "LayoutAnimationComplete", 26314 ]; 26315 const numVariantProps = variantProps.length; 26316 function getClosestProjectingNode(visualElement) { 26317 if (!visualElement) 26318 return undefined; 26319 return visualElement.options.allowProjection !== false 26320 ? visualElement.projection 26321 : getClosestProjectingNode(visualElement.parent); 26322 } 26323 /** 26324 * A VisualElement is an imperative abstraction around UI elements such as 26325 * HTMLElement, SVGElement, Three.Object3D etc. 26326 */ 26327 class VisualElement { 26328 /** 26329 * This method takes React props and returns found MotionValues. For example, HTML 26330 * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays. 26331 * 26332 * This isn't an abstract method as it needs calling in the constructor, but it is 26333 * intended to be one. 26334 */ 26335 scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) { 26336 return {}; 26337 } 26338 constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) { 26339 this.resolveKeyframes = (keyframes, 26340 // We use an onComplete callback here rather than a Promise as a Promise 26341 // resolution is a microtask and we want to retain the ability to force 26342 // the resolution of keyframes synchronously. 26343 onComplete, name, value) => { 26344 return new this.KeyframeResolver(keyframes, onComplete, name, value, this); 26345 }; 26346 /** 26347 * A reference to the current underlying Instance, e.g. a HTMLElement 26348 * or Three.Mesh etc. 26349 */ 26350 this.current = null; 26351 /** 26352 * A set containing references to this VisualElement's children. 26353 */ 26354 this.children = new Set(); 26355 /** 26356 * Determine what role this visual element should take in the variant tree. 26357 */ 26358 this.isVariantNode = false; 26359 this.isControllingVariants = false; 26360 /** 26361 * Decides whether this VisualElement should animate in reduced motion 26362 * mode. 26363 * 26364 * TODO: This is currently set on every individual VisualElement but feels 26365 * like it could be set globally. 26366 */ 26367 this.shouldReduceMotion = null; 26368 /** 26369 * A map of all motion values attached to this visual element. Motion 26370 * values are source of truth for any given animated value. A motion 26371 * value might be provided externally by the component via props. 26372 */ 26373 this.values = new Map(); 26374 this.KeyframeResolver = KeyframeResolver; 26375 /** 26376 * Cleanup functions for active features (hover/tap/exit etc) 26377 */ 26378 this.features = {}; 26379 /** 26380 * A map of every subscription that binds the provided or generated 26381 * motion values onChange listeners to this visual element. 26382 */ 26383 this.valueSubscriptions = new Map(); 26384 /** 26385 * A reference to the previously-provided motion values as returned 26386 * from scrapeMotionValuesFromProps. We use the keys in here to determine 26387 * if any motion values need to be removed after props are updated. 26388 */ 26389 this.prevMotionValues = {}; 26390 /** 26391 * An object containing a SubscriptionManager for each active event. 26392 */ 26393 this.events = {}; 26394 /** 26395 * An object containing an unsubscribe function for each prop event subscription. 26396 * For example, every "Update" event can have multiple subscribers via 26397 * VisualElement.on(), but only one of those can be defined via the onUpdate prop. 26398 */ 26399 this.propEventSubscriptions = {}; 26400 this.notifyUpdate = () => this.notify("Update", this.latestValues); 26401 this.render = () => { 26402 if (!this.current) 26403 return; 26404 this.triggerBuild(); 26405 this.renderInstance(this.current, this.renderState, this.props.style, this.projection); 26406 }; 26407 this.scheduleRender = () => frame_frame.render(this.render, false, true); 26408 const { latestValues, renderState } = visualState; 26409 this.latestValues = latestValues; 26410 this.baseTarget = { ...latestValues }; 26411 this.initialValues = props.initial ? { ...latestValues } : {}; 26412 this.renderState = renderState; 26413 this.parent = parent; 26414 this.props = props; 26415 this.presenceContext = presenceContext; 26416 this.depth = parent ? parent.depth + 1 : 0; 26417 this.reducedMotionConfig = reducedMotionConfig; 26418 this.options = options; 26419 this.blockInitialAnimation = Boolean(blockInitialAnimation); 26420 this.isControllingVariants = isControllingVariants(props); 26421 this.isVariantNode = isVariantNode(props); 26422 if (this.isVariantNode) { 26423 this.variantChildren = new Set(); 26424 } 26425 this.manuallyAnimateOnMount = Boolean(parent && parent.current); 26426 /** 26427 * Any motion values that are provided to the element when created 26428 * aren't yet bound to the element, as this would technically be impure. 26429 * However, we iterate through the motion values and set them to the 26430 * initial values for this component. 26431 * 26432 * TODO: This is impure and we should look at changing this to run on mount. 26433 * Doing so will break some tests but this isn't neccessarily a breaking change, 26434 * more a reflection of the test. 26435 */ 26436 const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this); 26437 for (const key in initialMotionValues) { 26438 const value = initialMotionValues[key]; 26439 if (latestValues[key] !== undefined && isMotionValue(value)) { 26440 value.set(latestValues[key], false); 26441 if (isWillChangeMotionValue(willChange)) { 26442 willChange.add(key); 26443 } 26444 } 26445 } 26446 } 26447 mount(instance) { 26448 this.current = instance; 26449 visualElementStore.set(instance, this); 26450 if (this.projection && !this.projection.instance) { 26451 this.projection.mount(instance); 26452 } 26453 if (this.parent && this.isVariantNode && !this.isControllingVariants) { 26454 this.removeFromVariantTree = this.parent.addVariantChild(this); 26455 } 26456 this.values.forEach((value, key) => this.bindToMotionValue(key, value)); 26457 if (!hasReducedMotionListener.current) { 26458 initPrefersReducedMotion(); 26459 } 26460 this.shouldReduceMotion = 26461 this.reducedMotionConfig === "never" 26462 ? false 26463 : this.reducedMotionConfig === "always" 26464 ? true 26465 : prefersReducedMotion.current; 26466 if (false) {} 26467 if (this.parent) 26468 this.parent.children.add(this); 26469 this.update(this.props, this.presenceContext); 26470 } 26471 unmount() { 26472 var _a; 26473 visualElementStore.delete(this.current); 26474 this.projection && this.projection.unmount(); 26475 cancelFrame(this.notifyUpdate); 26476 cancelFrame(this.render); 26477 this.valueSubscriptions.forEach((remove) => remove()); 26478 this.removeFromVariantTree && this.removeFromVariantTree(); 26479 this.parent && this.parent.children.delete(this); 26480 for (const key in this.events) { 26481 this.events[key].clear(); 26482 } 26483 for (const key in this.features) { 26484 (_a = this.features[key]) === null || _a === void 0 ? void 0 : _a.unmount(); 26485 } 26486 this.current = null; 26487 } 26488 bindToMotionValue(key, value) { 26489 const valueIsTransform = transformProps.has(key); 26490 const removeOnChange = value.on("change", (latestValue) => { 26491 this.latestValues[key] = latestValue; 26492 this.props.onUpdate && frame_frame.preRender(this.notifyUpdate); 26493 if (valueIsTransform && this.projection) { 26494 this.projection.isTransformDirty = true; 26495 } 26496 }); 26497 const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender); 26498 this.valueSubscriptions.set(key, () => { 26499 removeOnChange(); 26500 removeOnRenderRequest(); 26501 if (value.owner) 26502 value.stop(); 26503 }); 26504 } 26505 sortNodePosition(other) { 26506 /** 26507 * If these nodes aren't even of the same type we can't compare their depth. 26508 */ 26509 if (!this.current || 26510 !this.sortInstanceNodePosition || 26511 this.type !== other.type) { 26512 return 0; 26513 } 26514 return this.sortInstanceNodePosition(this.current, other.current); 26515 } 26516 loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) { 26517 let ProjectionNodeConstructor; 26518 let MeasureLayout; 26519 /** 26520 * If we're in development mode, check to make sure we're not rendering a motion component 26521 * as a child of LazyMotion, as this will break the file-size benefits of using it. 26522 */ 26523 if (false) {} 26524 for (let i = 0; i < numFeatures; i++) { 26525 const name = featureNames[i]; 26526 const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name]; 26527 if (ProjectionNode) 26528 ProjectionNodeConstructor = ProjectionNode; 26529 if (isEnabled(renderedProps)) { 26530 if (!this.features[name] && FeatureConstructor) { 26531 this.features[name] = new FeatureConstructor(this); 26532 } 26533 if (MeasureLayoutComponent) { 26534 MeasureLayout = MeasureLayoutComponent; 26535 } 26536 } 26537 } 26538 if ((this.type === "html" || this.type === "svg") && 26539 !this.projection && 26540 ProjectionNodeConstructor) { 26541 const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps; 26542 this.projection = new ProjectionNodeConstructor(this.latestValues, renderedProps["data-framer-portal-id"] 26543 ? undefined 26544 : getClosestProjectingNode(this.parent)); 26545 this.projection.setOptions({ 26546 layoutId, 26547 layout, 26548 alwaysMeasureLayout: Boolean(drag) || 26549 (dragConstraints && isRefObject(dragConstraints)), 26550 visualElement: this, 26551 scheduleRender: () => this.scheduleRender(), 26552 /** 26553 * TODO: Update options in an effect. This could be tricky as it'll be too late 26554 * to update by the time layout animations run. 26555 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence, 26556 * ensuring it gets called if there's no potential layout animations. 26557 * 26558 */ 26559 animationType: typeof layout === "string" ? layout : "both", 26560 initialPromotionConfig: initialLayoutGroupConfig, 26561 layoutScroll, 26562 layoutRoot, 26563 }); 26564 } 26565 return MeasureLayout; 26566 } 26567 updateFeatures() { 26568 for (const key in this.features) { 26569 const feature = this.features[key]; 26570 if (feature.isMounted) { 26571 feature.update(); 26572 } 26573 else { 26574 feature.mount(); 26575 feature.isMounted = true; 26576 } 26577 } 26578 } 26579 triggerBuild() { 26580 this.build(this.renderState, this.latestValues, this.options, this.props); 26581 } 26582 /** 26583 * Measure the current viewport box with or without transforms. 26584 * Only measures axis-aligned boxes, rotate and skew must be manually 26585 * removed with a re-render to work. 26586 */ 26587 measureViewportBox() { 26588 return this.current 26589 ? this.measureInstanceViewportBox(this.current, this.props) 26590 : createBox(); 26591 } 26592 getStaticValue(key) { 26593 return this.latestValues[key]; 26594 } 26595 setStaticValue(key, value) { 26596 this.latestValues[key] = value; 26597 } 26598 /** 26599 * Update the provided props. Ensure any newly-added motion values are 26600 * added to our map, old ones removed, and listeners updated. 26601 */ 26602 update(props, presenceContext) { 26603 if (props.transformTemplate || this.props.transformTemplate) { 26604 this.scheduleRender(); 26605 } 26606 this.prevProps = this.props; 26607 this.props = props; 26608 this.prevPresenceContext = this.presenceContext; 26609 this.presenceContext = presenceContext; 26610 /** 26611 * Update prop event handlers ie onAnimationStart, onAnimationComplete 26612 */ 26613 for (let i = 0; i < propEventHandlers.length; i++) { 26614 const key = propEventHandlers[i]; 26615 if (this.propEventSubscriptions[key]) { 26616 this.propEventSubscriptions[key](); 26617 delete this.propEventSubscriptions[key]; 26618 } 26619 const listenerName = ("on" + key); 26620 const listener = props[listenerName]; 26621 if (listener) { 26622 this.propEventSubscriptions[key] = this.on(key, listener); 26623 } 26624 } 26625 this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues); 26626 if (this.handleChildMotionValue) { 26627 this.handleChildMotionValue(); 26628 } 26629 } 26630 getProps() { 26631 return this.props; 26632 } 26633 /** 26634 * Returns the variant definition with a given name. 26635 */ 26636 getVariant(name) { 26637 return this.props.variants ? this.props.variants[name] : undefined; 26638 } 26639 /** 26640 * Returns the defined default transition on this component. 26641 */ 26642 getDefaultTransition() { 26643 return this.props.transition; 26644 } 26645 getTransformPagePoint() { 26646 return this.props.transformPagePoint; 26647 } 26648 getClosestVariantNode() { 26649 return this.isVariantNode 26650 ? this 26651 : this.parent 26652 ? this.parent.getClosestVariantNode() 26653 : undefined; 26654 } 26655 getVariantContext(startAtParent = false) { 26656 if (startAtParent) { 26657 return this.parent ? this.parent.getVariantContext() : undefined; 26658 } 26659 if (!this.isControllingVariants) { 26660 const context = this.parent 26661 ? this.parent.getVariantContext() || {} 26662 : {}; 26663 if (this.props.initial !== undefined) { 26664 context.initial = this.props.initial; 26665 } 26666 return context; 26667 } 26668 const context = {}; 26669 for (let i = 0; i < numVariantProps; i++) { 26670 const name = variantProps[i]; 26671 const prop = this.props[name]; 26672 if (isVariantLabel(prop) || prop === false) { 26673 context[name] = prop; 26674 } 26675 } 26676 return context; 26677 } 26678 /** 26679 * Add a child visual element to our set of children. 26680 */ 26681 addVariantChild(child) { 26682 const closestVariantNode = this.getClosestVariantNode(); 26683 if (closestVariantNode) { 26684 closestVariantNode.variantChildren && 26685 closestVariantNode.variantChildren.add(child); 26686 return () => closestVariantNode.variantChildren.delete(child); 26687 } 26688 } 26689 /** 26690 * Add a motion value and bind it to this visual element. 26691 */ 26692 addValue(key, value) { 26693 // Remove existing value if it exists 26694 const existingValue = this.values.get(key); 26695 if (value !== existingValue) { 26696 if (existingValue) 26697 this.removeValue(key); 26698 this.bindToMotionValue(key, value); 26699 this.values.set(key, value); 26700 this.latestValues[key] = value.get(); 26701 } 26702 } 26703 /** 26704 * Remove a motion value and unbind any active subscriptions. 26705 */ 26706 removeValue(key) { 26707 this.values.delete(key); 26708 const unsubscribe = this.valueSubscriptions.get(key); 26709 if (unsubscribe) { 26710 unsubscribe(); 26711 this.valueSubscriptions.delete(key); 26712 } 26713 delete this.latestValues[key]; 26714 this.removeValueFromRenderState(key, this.renderState); 26715 } 26716 /** 26717 * Check whether we have a motion value for this key 26718 */ 26719 hasValue(key) { 26720 return this.values.has(key); 26721 } 26722 getValue(key, defaultValue) { 26723 if (this.props.values && this.props.values[key]) { 26724 return this.props.values[key]; 26725 } 26726 let value = this.values.get(key); 26727 if (value === undefined && defaultValue !== undefined) { 26728 value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this }); 26729 this.addValue(key, value); 26730 } 26731 return value; 26732 } 26733 /** 26734 * If we're trying to animate to a previously unencountered value, 26735 * we need to check for it in our state and as a last resort read it 26736 * directly from the instance (which might have performance implications). 26737 */ 26738 readValue(key, target) { 26739 var _a; 26740 let value = this.latestValues[key] !== undefined || !this.current 26741 ? this.latestValues[key] 26742 : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options); 26743 if (value !== undefined && value !== null) { 26744 if (typeof value === "string" && 26745 (isNumericalString(value) || isZeroValueString(value))) { 26746 // If this is a number read as a string, ie "0" or "200", convert it to a number 26747 value = parseFloat(value); 26748 } 26749 else if (!findValueType(value) && complex.test(target)) { 26750 value = animatable_none_getAnimatableNone(key, target); 26751 } 26752 this.setBaseTarget(key, isMotionValue(value) ? value.get() : value); 26753 } 26754 return isMotionValue(value) ? value.get() : value; 26755 } 26756 /** 26757 * Set the base target to later animate back to. This is currently 26758 * only hydrated on creation and when we first read a value. 26759 */ 26760 setBaseTarget(key, value) { 26761 this.baseTarget[key] = value; 26762 } 26763 /** 26764 * Find the base target for a value thats been removed from all animation 26765 * props. 26766 */ 26767 getBaseTarget(key) { 26768 var _a; 26769 const { initial } = this.props; 26770 let valueFromInitial; 26771 if (typeof initial === "string" || typeof initial === "object") { 26772 const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom); 26773 if (variant) { 26774 valueFromInitial = variant[key]; 26775 } 26776 } 26777 /** 26778 * If this value still exists in the current initial variant, read that. 26779 */ 26780 if (initial && valueFromInitial !== undefined) { 26781 return valueFromInitial; 26782 } 26783 /** 26784 * Alternatively, if this VisualElement config has defined a getBaseTarget 26785 * so we can read the value from an alternative source, try that. 26786 */ 26787 const target = this.getBaseTargetFromProps(this.props, key); 26788 if (target !== undefined && !isMotionValue(target)) 26789 return target; 26790 /** 26791 * If the value was initially defined on initial, but it doesn't any more, 26792 * return undefined. Otherwise return the value as initially read from the DOM. 26793 */ 26794 return this.initialValues[key] !== undefined && 26795 valueFromInitial === undefined 26796 ? undefined 26797 : this.baseTarget[key]; 26798 } 26799 on(eventName, callback) { 26800 if (!this.events[eventName]) { 26801 this.events[eventName] = new SubscriptionManager(); 26802 } 26803 return this.events[eventName].add(callback); 26804 } 26805 notify(eventName, ...args) { 26806 if (this.events[eventName]) { 26807 this.events[eventName].notify(...args); 26808 } 26809 } 26810 } 26811 26812 26813 26814 ;// ./node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs 26815 26816 26817 26818 class DOMVisualElement extends VisualElement { 26819 constructor() { 26820 super(...arguments); 26821 this.KeyframeResolver = DOMKeyframesResolver; 26822 } 26823 sortInstanceNodePosition(a, b) { 26824 /** 26825 * compareDocumentPosition returns a bitmask, by using the bitwise & 26826 * we're returning true if 2 in that bitmask is set to true. 2 is set 26827 * to true if b preceeds a. 26828 */ 26829 return a.compareDocumentPosition(b) & 2 ? 1 : -1; 26830 } 26831 getBaseTargetFromProps(props, key) { 26832 return props.style 26833 ? props.style[key] 26834 : undefined; 26835 } 26836 removeValueFromRenderState(key, { vars, style }) { 26837 delete vars[key]; 26838 delete style[key]; 26839 } 26840 } 26841 26842 26843 26844 ;// ./node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs 26845 26846 26847 26848 26849 26850 26851 26852 26853 26854 26855 function HTMLVisualElement_getComputedStyle(element) { 26856 return window.getComputedStyle(element); 26857 } 26858 class HTMLVisualElement extends DOMVisualElement { 26859 constructor() { 26860 super(...arguments); 26861 this.type = "html"; 26862 } 26863 readValueFromInstance(instance, key) { 26864 if (transformProps.has(key)) { 26865 const defaultType = getDefaultValueType(key); 26866 return defaultType ? defaultType.default || 0 : 0; 26867 } 26868 else { 26869 const computedStyle = HTMLVisualElement_getComputedStyle(instance); 26870 const value = (isCSSVariableName(key) 26871 ? computedStyle.getPropertyValue(key) 26872 : computedStyle[key]) || 0; 26873 return typeof value === "string" ? value.trim() : value; 26874 } 26875 } 26876 measureInstanceViewportBox(instance, { transformPagePoint }) { 26877 return measureViewportBox(instance, transformPagePoint); 26878 } 26879 build(renderState, latestValues, options, props) { 26880 buildHTMLStyles(renderState, latestValues, options, props.transformTemplate); 26881 } 26882 scrapeMotionValuesFromProps(props, prevProps, visualElement) { 26883 return scrapeMotionValuesFromProps(props, prevProps, visualElement); 26884 } 26885 handleChildMotionValue() { 26886 if (this.childSubscription) { 26887 this.childSubscription(); 26888 delete this.childSubscription; 26889 } 26890 const { children } = this.props; 26891 if (isMotionValue(children)) { 26892 this.childSubscription = children.on("change", (latest) => { 26893 if (this.current) 26894 this.current.textContent = `$latest}`; 26895 }); 26896 } 26897 } 26898 renderInstance(instance, renderState, styleProp, projection) { 26899 renderHTML(instance, renderState, styleProp, projection); 26900 } 26901 } 26902 26903 26904 26905 ;// ./node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs 26906 26907 26908 26909 26910 26911 26912 26913 26914 26915 26916 26917 class SVGVisualElement extends DOMVisualElement { 26918 constructor() { 26919 super(...arguments); 26920 this.type = "svg"; 26921 this.isSVGTag = false; 26922 } 26923 getBaseTargetFromProps(props, key) { 26924 return props[key]; 26925 } 26926 readValueFromInstance(instance, key) { 26927 if (transformProps.has(key)) { 26928 const defaultType = getDefaultValueType(key); 26929 return defaultType ? defaultType.default || 0 : 0; 26930 } 26931 key = !camelCaseAttributes.has(key) ? camelToDash(key) : key; 26932 return instance.getAttribute(key); 26933 } 26934 measureInstanceViewportBox() { 26935 return createBox(); 26936 } 26937 scrapeMotionValuesFromProps(props, prevProps, visualElement) { 26938 return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement); 26939 } 26940 build(renderState, latestValues, options, props) { 26941 buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate); 26942 } 26943 renderInstance(instance, renderState, styleProp, projection) { 26944 renderSVG(instance, renderState, styleProp, projection); 26945 } 26946 mount(instance) { 26947 this.isSVGTag = isSVGTag(instance.tagName); 26948 super.mount(instance); 26949 } 26950 } 26951 26952 26953 26954 ;// ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs 26955 26956 26957 26958 26959 26960 const create_visual_element_createDomVisualElement = (Component, options) => { 26961 return isSVGComponent(Component) 26962 ? new SVGVisualElement(options, { enableHardwareAcceleration: false }) 26963 : new HTMLVisualElement(options, { 26964 allowProjection: Component !== external_React_.Fragment, 26965 enableHardwareAcceleration: true, 26966 }); 26967 }; 26968 26969 26970 26971 ;// ./node_modules/framer-motion/dist/es/motion/features/layout.mjs 26972 26973 26974 26975 const layout = { 26976 layout: { 26977 ProjectionNode: HTMLProjectionNode, 26978 MeasureLayout: MeasureLayout, 26979 }, 26980 }; 26981 26982 26983 26984 ;// ./node_modules/framer-motion/dist/es/render/dom/motion.mjs 26985 26986 26987 26988 26989 26990 26991 26992 26993 26994 const preloadedFeatures = { 26995 ...animations, 26996 ...gestureAnimations, 26997 ...drag, 26998 ...layout, 26999 }; 27000 /** 27001 * HTML & SVG components, optimised for use with gestures and animation. These can be used as 27002 * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported. 27003 * 27004 * @public 27005 */ 27006 const motion = /*@__PURE__*/ createMotionProxy((Component, config) => create_config_createDomMotionConfig(Component, config, preloadedFeatures, create_visual_element_createDomVisualElement)); 27007 /** 27008 * Create a DOM `motion` component with the provided string. This is primarily intended 27009 * as a full alternative to `motion` for consumers who have to support environments that don't 27010 * support `Proxy`. 27011 * 27012 * ```javascript 27013 * import { createDomMotionComponent } from "framer-motion" 27014 * 27015 * const motion = { 27016 * div: createDomMotionComponent('div') 27017 * } 27018 * ``` 27019 * 27020 * @public 27021 */ 27022 function createDomMotionComponent(key) { 27023 return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement)); 27024 } 27025 27026 27027 27028 ;// ./node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs 27029 27030 27031 27032 function useIsMounted() { 27033 const isMounted = (0,external_React_.useRef)(false); 27034 useIsomorphicLayoutEffect(() => { 27035 isMounted.current = true; 27036 return () => { 27037 isMounted.current = false; 27038 }; 27039 }, []); 27040 return isMounted; 27041 } 27042 27043 27044 27045 ;// ./node_modules/framer-motion/dist/es/utils/use-force-update.mjs 27046 27047 27048 27049 27050 function use_force_update_useForceUpdate() { 27051 const isMounted = useIsMounted(); 27052 const [forcedRenderCount, setForcedRenderCount] = (0,external_React_.useState)(0); 27053 const forceRender = (0,external_React_.useCallback)(() => { 27054 isMounted.current && setForcedRenderCount(forcedRenderCount + 1); 27055 }, [forcedRenderCount]); 27056 /** 27057 * Defer this to the end of the next animation frame in case there are multiple 27058 * synchronous calls. 27059 */ 27060 const deferredForceRender = (0,external_React_.useCallback)(() => frame_frame.postRender(forceRender), [forceRender]); 27061 return [deferredForceRender, forcedRenderCount]; 27062 } 27063 27064 27065 27066 ;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 27067 27068 27069 27070 27071 27072 /** 27073 * Measurement functionality has to be within a separate component 27074 * to leverage snapshot lifecycle. 27075 */ 27076 class PopChildMeasure extends external_React_.Component { 27077 getSnapshotBeforeUpdate(prevProps) { 27078 const element = this.props.childRef.current; 27079 if (element && prevProps.isPresent && !this.props.isPresent) { 27080 const size = this.props.sizeRef.current; 27081 size.height = element.offsetHeight || 0; 27082 size.width = element.offsetWidth || 0; 27083 size.top = element.offsetTop; 27084 size.left = element.offsetLeft; 27085 } 27086 return null; 27087 } 27088 /** 27089 * Required with getSnapshotBeforeUpdate to stop React complaining. 27090 */ 27091 componentDidUpdate() { } 27092 render() { 27093 return this.props.children; 27094 } 27095 } 27096 function PopChild({ children, isPresent }) { 27097 const id = (0,external_React_.useId)(); 27098 const ref = (0,external_React_.useRef)(null); 27099 const size = (0,external_React_.useRef)({ 27100 width: 0, 27101 height: 0, 27102 top: 0, 27103 left: 0, 27104 }); 27105 const { nonce } = (0,external_React_.useContext)(MotionConfigContext); 27106 /** 27107 * We create and inject a style block so we can apply this explicit 27108 * sizing in a non-destructive manner by just deleting the style block. 27109 * 27110 * We can't apply size via render as the measurement happens 27111 * in getSnapshotBeforeUpdate (post-render), likewise if we apply the 27112 * styles directly on the DOM node, we might be overwriting 27113 * styles set via the style prop. 27114 */ 27115 (0,external_React_.useInsertionEffect)(() => { 27116 const { width, height, top, left } = size.current; 27117 if (isPresent || !ref.current || !width || !height) 27118 return; 27119 ref.current.dataset.motionPopId = id; 27120 const style = document.createElement("style"); 27121 if (nonce) 27122 style.nonce = nonce; 27123 document.head.appendChild(style); 27124 if (style.sheet) { 27125 style.sheet.insertRule(` 27126 [data-motion-pop-id="$id}"] { 27127 position: absolute !important; 27128 width: $width}px !important; 27129 height: $height}px !important; 27130 top: $top}px !important; 27131 left: $left}px !important; 27132 } 27133 `); 27134 } 27135 return () => { 27136 document.head.removeChild(style); 27137 }; 27138 }, [isPresent]); 27139 return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: external_React_.cloneElement(children, { ref }) })); 27140 } 27141 27142 27143 27144 ;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 27145 27146 27147 27148 27149 27150 27151 27152 const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => { 27153 const presenceChildren = useConstant(newChildrenMap); 27154 const id = (0,external_React_.useId)(); 27155 const context = (0,external_React_.useMemo)(() => ({ 27156 id, 27157 initial, 27158 isPresent, 27159 custom, 27160 onExitComplete: (childId) => { 27161 presenceChildren.set(childId, true); 27162 for (const isComplete of presenceChildren.values()) { 27163 if (!isComplete) 27164 return; // can stop searching when any is incomplete 27165 } 27166 onExitComplete && onExitComplete(); 27167 }, 27168 register: (childId) => { 27169 presenceChildren.set(childId, false); 27170 return () => presenceChildren.delete(childId); 27171 }, 27172 }), 27173 /** 27174 * If the presence of a child affects the layout of the components around it, 27175 * we want to make a new context value to ensure they get re-rendered 27176 * so they can detect that layout change. 27177 */ 27178 presenceAffectsLayout ? [Math.random()] : [isPresent]); 27179 (0,external_React_.useMemo)(() => { 27180 presenceChildren.forEach((_, key) => presenceChildren.set(key, false)); 27181 }, [isPresent]); 27182 /** 27183 * If there's no `motion` components to fire exit animations, we want to remove this 27184 * component immediately. 27185 */ 27186 external_React_.useEffect(() => { 27187 !isPresent && 27188 !presenceChildren.size && 27189 onExitComplete && 27190 onExitComplete(); 27191 }, [isPresent]); 27192 if (mode === "popLayout") { 27193 children = (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopChild, { isPresent: isPresent, children: children }); 27194 } 27195 return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceContext_PresenceContext.Provider, { value: context, children: children })); 27196 }; 27197 function newChildrenMap() { 27198 return new Map(); 27199 } 27200 27201 27202 27203 ;// ./node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs 27204 27205 27206 function useUnmountEffect(callback) { 27207 return (0,external_React_.useEffect)(() => () => callback(), []); 27208 } 27209 27210 27211 27212 ;// ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 27213 27214 27215 27216 27217 27218 27219 27220 27221 27222 27223 const getChildKey = (child) => child.key || ""; 27224 function updateChildLookup(children, allChildren) { 27225 children.forEach((child) => { 27226 const key = getChildKey(child); 27227 allChildren.set(key, child); 27228 }); 27229 } 27230 function onlyElements(children) { 27231 const filtered = []; 27232 // We use forEach here instead of map as map mutates the component key by preprending `.$` 27233 external_React_.Children.forEach(children, (child) => { 27234 if ((0,external_React_.isValidElement)(child)) 27235 filtered.push(child); 27236 }); 27237 return filtered; 27238 } 27239 /** 27240 * `AnimatePresence` enables the animation of components that have been removed from the tree. 27241 * 27242 * When adding/removing more than a single child, every child **must** be given a unique `key` prop. 27243 * 27244 * Any `motion` components that have an `exit` property defined will animate out when removed from 27245 * the tree. 27246 * 27247 * ```jsx 27248 * import { motion, AnimatePresence } from 'framer-motion' 27249 * 27250 * export const Items = ({ items }) => ( 27251 * <AnimatePresence> 27252 * {items.map(item => ( 27253 * <motion.div 27254 * key={item.id} 27255 * initial={{ opacity: 0 }} 27256 * animate={{ opacity: 1 }} 27257 * exit={{ opacity: 0 }} 27258 * /> 27259 * ))} 27260 * </AnimatePresence> 27261 * ) 27262 * ``` 27263 * 27264 * You can sequence exit animations throughout a tree using variants. 27265 * 27266 * If a child contains multiple `motion` components with `exit` props, it will only unmount the child 27267 * once all `motion` components have finished animating out. Likewise, any components using 27268 * `usePresence` all need to call `safeToRemove`. 27269 * 27270 * @public 27271 */ 27272 const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => { 27273 errors_invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'"); 27274 // We want to force a re-render once all exiting animations have finished. We 27275 // either use a local forceRender function, or one from a parent context if it exists. 27276 const forceRender = (0,external_React_.useContext)(LayoutGroupContext).forceRender || use_force_update_useForceUpdate()[0]; 27277 const isMounted = useIsMounted(); 27278 // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key 27279 const filteredChildren = onlyElements(children); 27280 let childrenToRender = filteredChildren; 27281 const exitingChildren = (0,external_React_.useRef)(new Map()).current; 27282 // Keep a living record of the children we're actually rendering so we 27283 // can diff to figure out which are entering and exiting 27284 const presentChildren = (0,external_React_.useRef)(childrenToRender); 27285 // A lookup table to quickly reference components by key 27286 const allChildren = (0,external_React_.useRef)(new Map()).current; 27287 // If this is the initial component render, just deal with logic surrounding whether 27288 // we play onMount animations or not. 27289 const isInitialRender = (0,external_React_.useRef)(true); 27290 useIsomorphicLayoutEffect(() => { 27291 isInitialRender.current = false; 27292 updateChildLookup(filteredChildren, allChildren); 27293 presentChildren.current = childrenToRender; 27294 }); 27295 useUnmountEffect(() => { 27296 isInitialRender.current = true; 27297 allChildren.clear(); 27298 exitingChildren.clear(); 27299 }); 27300 if (isInitialRender.current) { 27301 return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: childrenToRender.map((child) => ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceChild, { isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child)))) })); 27302 } 27303 // If this is a subsequent render, deal with entering and exiting children 27304 childrenToRender = [...childrenToRender]; 27305 // Diff the keys of the currently-present and target children to update our 27306 // exiting list. 27307 const presentKeys = presentChildren.current.map(getChildKey); 27308 const targetKeys = filteredChildren.map(getChildKey); 27309 // Diff the present children with our target children and mark those that are exiting 27310 const numPresent = presentKeys.length; 27311 for (let i = 0; i < numPresent; i++) { 27312 const key = presentKeys[i]; 27313 if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) { 27314 exitingChildren.set(key, undefined); 27315 } 27316 } 27317 // If we currently have exiting children, and we're deferring rendering incoming children 27318 // until after all current children have exiting, empty the childrenToRender array 27319 if (mode === "wait" && exitingChildren.size) { 27320 childrenToRender = []; 27321 } 27322 // Loop through all currently exiting components and clone them to overwrite `animate` 27323 // with any `exit` prop they might have defined. 27324 exitingChildren.forEach((component, key) => { 27325 // If this component is actually entering again, early return 27326 if (targetKeys.indexOf(key) !== -1) 27327 return; 27328 const child = allChildren.get(key); 27329 if (!child) 27330 return; 27331 const insertionIndex = presentKeys.indexOf(key); 27332 let exitingComponent = component; 27333 if (!exitingComponent) { 27334 const onExit = () => { 27335 // clean up the exiting children map 27336 exitingChildren.delete(key); 27337 // compute the keys of children that were rendered once but are no longer present 27338 // this could happen in case of too many fast consequent renderings 27339 // @link https://github.com/framer/motion/issues/2023 27340 const leftOverKeys = Array.from(allChildren.keys()).filter((childKey) => !targetKeys.includes(childKey)); 27341 // clean up the all children map 27342 leftOverKeys.forEach((leftOverKey) => allChildren.delete(leftOverKey)); 27343 // make sure to render only the children that are actually visible 27344 presentChildren.current = filteredChildren.filter((presentChild) => { 27345 const presentChildKey = getChildKey(presentChild); 27346 return ( 27347 // filter out the node exiting 27348 presentChildKey === key || 27349 // filter out the leftover children 27350 leftOverKeys.includes(presentChildKey)); 27351 }); 27352 // Defer re-rendering until all exiting children have indeed left 27353 if (!exitingChildren.size) { 27354 if (isMounted.current === false) 27355 return; 27356 forceRender(); 27357 onExitComplete && onExitComplete(); 27358 } 27359 }; 27360 exitingComponent = ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceChild, { isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child))); 27361 exitingChildren.set(key, exitingComponent); 27362 } 27363 childrenToRender.splice(insertionIndex, 0, exitingComponent); 27364 }); 27365 // Add `MotionContext` even to children that don't need it to ensure we're rendering 27366 // the same tree between renders 27367 childrenToRender = childrenToRender.map((child) => { 27368 const key = child.key; 27369 return exitingChildren.has(key) ? (child) : ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceChild, { isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child))); 27370 }); 27371 if (false) {} 27372 return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: exitingChildren.size 27373 ? childrenToRender 27374 : childrenToRender.map((child) => (0,external_React_.cloneElement)(child)) })); 27375 }; 27376 27377 27378 27379 ;// ./node_modules/@wordpress/components/build-module/utils/use-responsive-value.js 27380 /** 27381 * WordPress dependencies 27382 */ 27383 27384 const breakpoints = ['40em', '52em', '64em']; 27385 const useBreakpointIndex = (options = {}) => { 27386 const { 27387 defaultIndex = 0 27388 } = options; 27389 if (typeof defaultIndex !== 'number') { 27390 throw new TypeError(`Default breakpoint index should be a number. Got: $defaultIndex}, $typeof defaultIndex}`); 27391 } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) { 27392 throw new RangeError(`Default breakpoint index out of range. Theme has $breakpoints.length} breakpoints, got index $defaultIndex}`); 27393 } 27394 const [value, setValue] = (0,external_wp_element_namespaceObject.useState)(defaultIndex); 27395 (0,external_wp_element_namespaceObject.useEffect)(() => { 27396 const getIndex = () => breakpoints.filter(bp => { 27397 return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: $bp})`).matches : false; 27398 }).length; 27399 const onResize = () => { 27400 const newValue = getIndex(); 27401 if (value !== newValue) { 27402 setValue(newValue); 27403 } 27404 }; 27405 onResize(); 27406 if (typeof window !== 'undefined') { 27407 window.addEventListener('resize', onResize); 27408 } 27409 return () => { 27410 if (typeof window !== 'undefined') { 27411 window.removeEventListener('resize', onResize); 27412 } 27413 }; 27414 }, [value]); 27415 return value; 27416 }; 27417 function useResponsiveValue(values, options = {}) { 27418 const index = useBreakpointIndex(options); 27419 27420 // Allow calling the function with a "normal" value without having to check on the outside. 27421 if (!Array.isArray(values) && typeof values !== 'function') { 27422 return values; 27423 } 27424 const array = values || []; 27425 27426 /* eslint-disable jsdoc/no-undefined-types */ 27427 return /** @type {T[]} */array[/* eslint-enable jsdoc/no-undefined-types */ 27428 index >= array.length ? array.length - 1 : index]; 27429 } 27430 27431 ;// ./node_modules/@wordpress/components/build-module/flex/styles.js 27432 function styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 27433 /** 27434 * External dependencies 27435 */ 27436 27437 const Flex = true ? { 27438 name: "zjik7", 27439 styles: "display:flex" 27440 } : 0; 27441 const Item = true ? { 27442 name: "qgaee5", 27443 styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0" 27444 } : 0; 27445 const block = true ? { 27446 name: "82a6rk", 27447 styles: "flex:1" 27448 } : 0; 27449 27450 /** 27451 * Workaround to optimize DOM rendering. 27452 * We'll enhance alignment with naive parent flex assumptions. 27453 * 27454 * Trade-off: 27455 * Far less DOM less. However, UI rendering is not as reliable. 27456 */ 27457 27458 /** 27459 * Improves stability of width/height rendering. 27460 * https://github.com/ItsJonQ/g2/pull/149 27461 */ 27462 const ItemsColumn = true ? { 27463 name: "13nosa1", 27464 styles: ">*{min-height:0;}" 27465 } : 0; 27466 const ItemsRow = true ? { 27467 name: "1pwxzk4", 27468 styles: ">*{min-width:0;}" 27469 } : 0; 27470 27471 ;// ./node_modules/@wordpress/components/build-module/flex/flex/hook.js 27472 /** 27473 * External dependencies 27474 */ 27475 27476 27477 /** 27478 * WordPress dependencies 27479 */ 27480 27481 27482 27483 /** 27484 * Internal dependencies 27485 */ 27486 27487 27488 27489 27490 27491 27492 function useDeprecatedProps(props) { 27493 const { 27494 isReversed, 27495 ...otherProps 27496 } = props; 27497 if (typeof isReversed !== 'undefined') { 27498 external_wp_deprecated_default()('Flex isReversed', { 27499 alternative: 'Flex direction="row-reverse" or "column-reverse"', 27500 since: '5.9' 27501 }); 27502 return { 27503 ...otherProps, 27504 direction: isReversed ? 'row-reverse' : 'row' 27505 }; 27506 } 27507 return otherProps; 27508 } 27509 function useFlex(props) { 27510 const { 27511 align, 27512 className, 27513 direction: directionProp = 'row', 27514 expanded = true, 27515 gap = 2, 27516 justify = 'space-between', 27517 wrap = false, 27518 ...otherProps 27519 } = useContextSystem(useDeprecatedProps(props), 'Flex'); 27520 const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp]; 27521 const direction = useResponsiveValue(directionAsArray); 27522 const isColumn = typeof direction === 'string' && !!direction.includes('column'); 27523 const cx = useCx(); 27524 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 27525 const base = /*#__PURE__*/emotion_react_browser_esm_css({ 27526 alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center', 27527 flexDirection: direction, 27528 flexWrap: wrap ? 'wrap' : undefined, 27529 gap: space(gap), 27530 justifyContent: justify, 27531 height: isColumn && expanded ? '100%' : undefined, 27532 width: !isColumn && expanded ? '100%' : undefined 27533 }, true ? "" : 0, true ? "" : 0); 27534 return cx(Flex, base, isColumn ? ItemsColumn : ItemsRow, className); 27535 }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]); 27536 return { 27537 ...otherProps, 27538 className: classes, 27539 isColumn 27540 }; 27541 } 27542 27543 ;// ./node_modules/@wordpress/components/build-module/flex/context.js 27544 /** 27545 * WordPress dependencies 27546 */ 27547 27548 const FlexContext = (0,external_wp_element_namespaceObject.createContext)({ 27549 flexItemDisplay: undefined 27550 }); 27551 const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext); 27552 27553 ;// ./node_modules/@wordpress/components/build-module/flex/flex/component.js 27554 /** 27555 * External dependencies 27556 */ 27557 27558 /** 27559 * Internal dependencies 27560 */ 27561 27562 27563 27564 27565 27566 27567 function UnconnectedFlex(props, forwardedRef) { 27568 const { 27569 children, 27570 isColumn, 27571 ...otherProps 27572 } = useFlex(props); 27573 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexContext.Provider, { 27574 value: { 27575 flexItemDisplay: isColumn ? 'block' : undefined 27576 }, 27577 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 27578 ...otherProps, 27579 ref: forwardedRef, 27580 children: children 27581 }) 27582 }); 27583 } 27584 27585 /** 27586 * `Flex` is a primitive layout component that adaptively aligns child content 27587 * horizontally or vertically. `Flex` powers components like `HStack` and 27588 * `VStack`. 27589 * 27590 * `Flex` is used with any of its two sub-components, `FlexItem` and 27591 * `FlexBlock`. 27592 * 27593 * ```jsx 27594 * import { Flex, FlexBlock, FlexItem } from '@wordpress/components'; 27595 * 27596 * function Example() { 27597 * return ( 27598 * <Flex> 27599 * <FlexItem> 27600 * <p>Code</p> 27601 * </FlexItem> 27602 * <FlexBlock> 27603 * <p>Poetry</p> 27604 * </FlexBlock> 27605 * </Flex> 27606 * ); 27607 * } 27608 * ``` 27609 */ 27610 const component_Flex = contextConnect(UnconnectedFlex, 'Flex'); 27611 /* harmony default export */ const flex_component = (component_Flex); 27612 27613 ;// ./node_modules/@wordpress/components/build-module/flex/flex-item/hook.js 27614 /** 27615 * External dependencies 27616 */ 27617 27618 27619 27620 /** 27621 * Internal dependencies 27622 */ 27623 27624 27625 27626 27627 27628 function useFlexItem(props) { 27629 const { 27630 className, 27631 display: displayProp, 27632 isBlock = false, 27633 ...otherProps 27634 } = useContextSystem(props, 'FlexItem'); 27635 const sx = {}; 27636 const contextDisplay = useFlexContext().flexItemDisplay; 27637 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 27638 display: displayProp || contextDisplay 27639 }, true ? "" : 0, true ? "" : 0); 27640 const cx = useCx(); 27641 const classes = cx(Item, sx.Base, isBlock && block, className); 27642 return { 27643 ...otherProps, 27644 className: classes 27645 }; 27646 } 27647 27648 ;// ./node_modules/@wordpress/components/build-module/flex/flex-block/hook.js 27649 /** 27650 * Internal dependencies 27651 */ 27652 27653 27654 27655 function useFlexBlock(props) { 27656 const otherProps = useContextSystem(props, 'FlexBlock'); 27657 const flexItemProps = useFlexItem({ 27658 isBlock: true, 27659 ...otherProps 27660 }); 27661 return flexItemProps; 27662 } 27663 27664 ;// ./node_modules/@wordpress/components/build-module/flex/flex-block/component.js 27665 /** 27666 * External dependencies 27667 */ 27668 27669 /** 27670 * Internal dependencies 27671 */ 27672 27673 27674 27675 27676 27677 function UnconnectedFlexBlock(props, forwardedRef) { 27678 const flexBlockProps = useFlexBlock(props); 27679 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 27680 ...flexBlockProps, 27681 ref: forwardedRef 27682 }); 27683 } 27684 27685 /** 27686 * `FlexBlock` is a primitive layout component that adaptively resizes content 27687 * within layout containers like `Flex`. 27688 * 27689 * ```jsx 27690 * import { Flex, FlexBlock } from '@wordpress/components'; 27691 * 27692 * function Example() { 27693 * return ( 27694 * <Flex> 27695 * <FlexBlock>...</FlexBlock> 27696 * </Flex> 27697 * ); 27698 * } 27699 * ``` 27700 */ 27701 const FlexBlock = contextConnect(UnconnectedFlexBlock, 'FlexBlock'); 27702 /* harmony default export */ const flex_block_component = (FlexBlock); 27703 27704 ;// ./node_modules/@wordpress/components/build-module/utils/rtl.js 27705 /** 27706 * External dependencies 27707 */ 27708 27709 27710 /** 27711 * WordPress dependencies 27712 */ 27713 27714 const LOWER_LEFT_REGEXP = new RegExp(/-left/g); 27715 const LOWER_RIGHT_REGEXP = new RegExp(/-right/g); 27716 const UPPER_LEFT_REGEXP = new RegExp(/Left/g); 27717 const UPPER_RIGHT_REGEXP = new RegExp(/Right/g); 27718 27719 /** 27720 * Flips a CSS property from left <-> right. 27721 * 27722 * @param {string} key The CSS property name. 27723 * 27724 * @return {string} The flipped CSS property name, if applicable. 27725 */ 27726 function getConvertedKey(key) { 27727 if (key === 'left') { 27728 return 'right'; 27729 } 27730 if (key === 'right') { 27731 return 'left'; 27732 } 27733 if (LOWER_LEFT_REGEXP.test(key)) { 27734 return key.replace(LOWER_LEFT_REGEXP, '-right'); 27735 } 27736 if (LOWER_RIGHT_REGEXP.test(key)) { 27737 return key.replace(LOWER_RIGHT_REGEXP, '-left'); 27738 } 27739 if (UPPER_LEFT_REGEXP.test(key)) { 27740 return key.replace(UPPER_LEFT_REGEXP, 'Right'); 27741 } 27742 if (UPPER_RIGHT_REGEXP.test(key)) { 27743 return key.replace(UPPER_RIGHT_REGEXP, 'Left'); 27744 } 27745 return key; 27746 } 27747 27748 /** 27749 * An incredibly basic ltr -> rtl converter for style properties 27750 * 27751 * @param {import('react').CSSProperties} ltrStyles 27752 * 27753 * @return {import('react').CSSProperties} Converted ltr -> rtl styles 27754 */ 27755 const convertLTRToRTL = (ltrStyles = {}) => { 27756 return Object.fromEntries(Object.entries(ltrStyles).map(([key, value]) => [getConvertedKey(key), value])); 27757 }; 27758 27759 /** 27760 * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects. 27761 * 27762 * @param {import('react').CSSProperties} ltrStyles Ltr styles. Converts and renders from ltr -> rtl styles, if applicable. 27763 * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided. 27764 * 27765 * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer 27766 */ 27767 function rtl(ltrStyles = {}, rtlStyles) { 27768 return () => { 27769 if (rtlStyles) { 27770 // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css 27771 return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(rtlStyles, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0, true ? "" : 0); 27772 } 27773 27774 // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css 27775 return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(convertLTRToRTL(ltrStyles), true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0, true ? "" : 0); 27776 }; 27777 } 27778 27779 /** 27780 * Call this in the `useMemo` dependency array to ensure that subsequent renders will 27781 * cause rtl styles to update based on the `isRTL` return value even if all other dependencies 27782 * remain the same. 27783 * 27784 * @example 27785 * const styles = useMemo( () => { 27786 * return css` 27787 * ${ rtl( { marginRight: '10px' } ) } 27788 * `; 27789 * }, [ rtl.watch() ] ); 27790 */ 27791 rtl.watch = () => (0,external_wp_i18n_namespaceObject.isRTL)(); 27792 27793 ;// ./node_modules/@wordpress/components/build-module/spacer/hook.js 27794 /** 27795 * External dependencies 27796 */ 27797 27798 27799 /** 27800 * Internal dependencies 27801 */ 27802 27803 27804 27805 27806 function isDefined(o) { 27807 return typeof o !== 'undefined' && o !== null; 27808 } 27809 function useSpacer(props) { 27810 const { 27811 className, 27812 margin, 27813 marginBottom = 2, 27814 marginLeft, 27815 marginRight, 27816 marginTop, 27817 marginX, 27818 marginY, 27819 padding, 27820 paddingBottom, 27821 paddingLeft, 27822 paddingRight, 27823 paddingTop, 27824 paddingX, 27825 paddingY, 27826 ...otherProps 27827 } = useContextSystem(props, 'Spacer'); 27828 const cx = useCx(); 27829 const classes = cx(isDefined(margin) && /*#__PURE__*/emotion_react_browser_esm_css("margin:", space(margin), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginY) && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(marginY), ";margin-top:", space(marginY), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginX) && /*#__PURE__*/emotion_react_browser_esm_css("margin-left:", space(marginX), ";margin-right:", space(marginX), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginTop) && /*#__PURE__*/emotion_react_browser_esm_css("margin-top:", space(marginTop), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginBottom) && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(marginBottom), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginLeft) && rtl({ 27830 marginLeft: space(marginLeft) 27831 })(), isDefined(marginRight) && rtl({ 27832 marginRight: space(marginRight) 27833 })(), isDefined(padding) && /*#__PURE__*/emotion_react_browser_esm_css("padding:", space(padding), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingY) && /*#__PURE__*/emotion_react_browser_esm_css("padding-bottom:", space(paddingY), ";padding-top:", space(paddingY), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingX) && /*#__PURE__*/emotion_react_browser_esm_css("padding-left:", space(paddingX), ";padding-right:", space(paddingX), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingTop) && /*#__PURE__*/emotion_react_browser_esm_css("padding-top:", space(paddingTop), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingBottom) && /*#__PURE__*/emotion_react_browser_esm_css("padding-bottom:", space(paddingBottom), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingLeft) && rtl({ 27834 paddingLeft: space(paddingLeft) 27835 })(), isDefined(paddingRight) && rtl({ 27836 paddingRight: space(paddingRight) 27837 })(), className); 27838 return { 27839 ...otherProps, 27840 className: classes 27841 }; 27842 } 27843 27844 ;// ./node_modules/@wordpress/components/build-module/spacer/component.js 27845 /** 27846 * External dependencies 27847 */ 27848 27849 /** 27850 * Internal dependencies 27851 */ 27852 27853 27854 27855 27856 27857 function UnconnectedSpacer(props, forwardedRef) { 27858 const spacerProps = useSpacer(props); 27859 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 27860 ...spacerProps, 27861 ref: forwardedRef 27862 }); 27863 } 27864 27865 /** 27866 * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`. 27867 * 27868 * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props 27869 * can either be a number (which will act as a multiplier to the library's grid system base of 4px), 27870 * or a literal CSS value string. 27871 * 27872 * ```jsx 27873 * import { Spacer } from `@wordpress/components` 27874 * 27875 * function Example() { 27876 * return ( 27877 * <View> 27878 * <Spacer> 27879 * <Heading>WordPress.org</Heading> 27880 * </Spacer> 27881 * <Text> 27882 * Code is Poetry 27883 * </Text> 27884 * </View> 27885 * ); 27886 * } 27887 * ``` 27888 */ 27889 const Spacer = contextConnect(UnconnectedSpacer, 'Spacer'); 27890 /* harmony default export */ const spacer_component = (Spacer); 27891 27892 ;// ./node_modules/@wordpress/icons/build-module/library/plus.js 27893 /** 27894 * WordPress dependencies 27895 */ 27896 27897 27898 const plus = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 27899 xmlns: "http://www.w3.org/2000/svg", 27900 viewBox: "0 0 24 24", 27901 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 27902 d: "M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" 27903 }) 27904 }); 27905 /* harmony default export */ const library_plus = (plus); 27906 27907 ;// ./node_modules/@wordpress/icons/build-module/library/reset.js 27908 /** 27909 * WordPress dependencies 27910 */ 27911 27912 27913 const reset_reset = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 27914 xmlns: "http://www.w3.org/2000/svg", 27915 viewBox: "0 0 24 24", 27916 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 27917 d: "M7 11.5h10V13H7z" 27918 }) 27919 }); 27920 /* harmony default export */ const library_reset = (reset_reset); 27921 27922 ;// ./node_modules/@wordpress/components/build-module/flex/flex-item/component.js 27923 /** 27924 * External dependencies 27925 */ 27926 27927 /** 27928 * Internal dependencies 27929 */ 27930 27931 27932 27933 27934 27935 function UnconnectedFlexItem(props, forwardedRef) { 27936 const flexItemProps = useFlexItem(props); 27937 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 27938 ...flexItemProps, 27939 ref: forwardedRef 27940 }); 27941 } 27942 27943 /** 27944 * `FlexItem` is a primitive layout component that aligns content within layout 27945 * containers like `Flex`. 27946 * 27947 * ```jsx 27948 * import { Flex, FlexItem } from '@wordpress/components'; 27949 * 27950 * function Example() { 27951 * return ( 27952 * <Flex> 27953 * <FlexItem>...</FlexItem> 27954 * </Flex> 27955 * ); 27956 * } 27957 * ``` 27958 */ 27959 const FlexItem = contextConnect(UnconnectedFlexItem, 'FlexItem'); 27960 /* harmony default export */ const flex_item_component = (FlexItem); 27961 27962 ;// ./node_modules/@wordpress/components/build-module/truncate/styles.js 27963 function truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 27964 /** 27965 * External dependencies 27966 */ 27967 27968 const Truncate = true ? { 27969 name: "hdknak", 27970 styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" 27971 } : 0; 27972 27973 ;// ./node_modules/@wordpress/components/build-module/utils/values.js 27974 /* eslint-disable jsdoc/valid-types */ 27975 /** 27976 * Determines if a value is null or undefined. 27977 * 27978 * @template T 27979 * 27980 * @param {T} value The value to check. 27981 * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined. 27982 */ 27983 function isValueDefined(value) { 27984 return value !== undefined && value !== null; 27985 } 27986 /* eslint-enable jsdoc/valid-types */ 27987 27988 /* eslint-disable jsdoc/valid-types */ 27989 /** 27990 * Determines if a value is empty, null, or undefined. 27991 * 27992 * @param {string | number | null | undefined} value The value to check. 27993 * @return {value is ("" | null | undefined)} Whether value is empty. 27994 */ 27995 function isValueEmpty(value) { 27996 const isEmptyString = value === ''; 27997 return !isValueDefined(value) || isEmptyString; 27998 } 27999 /* eslint-enable jsdoc/valid-types */ 28000 28001 /** 28002 * Get the first defined/non-null value from an array. 28003 * 28004 * @template T 28005 * 28006 * @param {Array<T | null | undefined>} values Values to derive from. 28007 * @param {T} fallbackValue Fallback value if there are no defined values. 28008 * @return {T} A defined value or the fallback value. 28009 */ 28010 function getDefinedValue(values = [], fallbackValue) { 28011 var _values$find; 28012 return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue; 28013 } 28014 28015 /** 28016 * Converts a string to a number. 28017 * 28018 * @param {string} value 28019 * @return {number} String as a number. 28020 */ 28021 const stringToNumber = value => { 28022 return parseFloat(value); 28023 }; 28024 28025 /** 28026 * Regardless of the input being a string or a number, returns a number. 28027 * 28028 * Returns `undefined` in case the string is `undefined` or not a valid numeric value. 28029 * 28030 * @param {string | number} value 28031 * @return {number} The parsed number. 28032 */ 28033 const ensureNumber = value => { 28034 return typeof value === 'string' ? stringToNumber(value) : value; 28035 }; 28036 28037 ;// ./node_modules/@wordpress/components/build-module/truncate/utils.js 28038 /** 28039 * Internal dependencies 28040 */ 28041 28042 const TRUNCATE_ELLIPSIS = '…'; 28043 const TRUNCATE_TYPE = { 28044 auto: 'auto', 28045 head: 'head', 28046 middle: 'middle', 28047 tail: 'tail', 28048 none: 'none' 28049 }; 28050 const TRUNCATE_DEFAULT_PROPS = { 28051 ellipsis: TRUNCATE_ELLIPSIS, 28052 ellipsizeMode: TRUNCATE_TYPE.auto, 28053 limit: 0, 28054 numberOfLines: 0 28055 }; 28056 28057 // Source 28058 // https://github.com/kahwee/truncate-middle 28059 function truncateMiddle(word, headLength, tailLength, ellipsis) { 28060 if (typeof word !== 'string') { 28061 return ''; 28062 } 28063 const wordLength = word.length; 28064 // Setting default values 28065 // eslint-disable-next-line no-bitwise 28066 const frontLength = ~~headLength; // Will cast to integer 28067 // eslint-disable-next-line no-bitwise 28068 const backLength = ~~tailLength; 28069 /* istanbul ignore next */ 28070 const truncateStr = isValueDefined(ellipsis) ? ellipsis : TRUNCATE_ELLIPSIS; 28071 if (frontLength === 0 && backLength === 0 || frontLength >= wordLength || backLength >= wordLength || frontLength + backLength >= wordLength) { 28072 return word; 28073 } else if (backLength === 0) { 28074 return word.slice(0, frontLength) + truncateStr; 28075 } 28076 return word.slice(0, frontLength) + truncateStr + word.slice(wordLength - backLength); 28077 } 28078 function truncateContent(words = '', props) { 28079 const mergedProps = { 28080 ...TRUNCATE_DEFAULT_PROPS, 28081 ...props 28082 }; 28083 const { 28084 ellipsis, 28085 ellipsizeMode, 28086 limit 28087 } = mergedProps; 28088 if (ellipsizeMode === TRUNCATE_TYPE.none) { 28089 return words; 28090 } 28091 let truncateHead; 28092 let truncateTail; 28093 switch (ellipsizeMode) { 28094 case TRUNCATE_TYPE.head: 28095 truncateHead = 0; 28096 truncateTail = limit; 28097 break; 28098 case TRUNCATE_TYPE.middle: 28099 truncateHead = Math.floor(limit / 2); 28100 truncateTail = Math.floor(limit / 2); 28101 break; 28102 default: 28103 truncateHead = limit; 28104 truncateTail = 0; 28105 } 28106 const truncatedContent = ellipsizeMode !== TRUNCATE_TYPE.auto ? truncateMiddle(words, truncateHead, truncateTail, ellipsis) : words; 28107 return truncatedContent; 28108 } 28109 28110 ;// ./node_modules/@wordpress/components/build-module/truncate/hook.js 28111 /** 28112 * External dependencies 28113 */ 28114 28115 28116 /** 28117 * WordPress dependencies 28118 */ 28119 28120 28121 /** 28122 * Internal dependencies 28123 */ 28124 28125 28126 28127 28128 28129 function useTruncate(props) { 28130 const { 28131 className, 28132 children, 28133 ellipsis = TRUNCATE_ELLIPSIS, 28134 ellipsizeMode = TRUNCATE_TYPE.auto, 28135 limit = 0, 28136 numberOfLines = 0, 28137 ...otherProps 28138 } = useContextSystem(props, 'Truncate'); 28139 const cx = useCx(); 28140 let childrenAsText; 28141 if (typeof children === 'string') { 28142 childrenAsText = children; 28143 } else if (typeof children === 'number') { 28144 childrenAsText = children.toString(); 28145 } 28146 const truncatedContent = childrenAsText ? truncateContent(childrenAsText, { 28147 ellipsis, 28148 ellipsizeMode, 28149 limit, 28150 numberOfLines 28151 }) : children; 28152 const shouldTruncate = !!childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto; 28153 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 28154 // The `word-break: break-all` property first makes sure a text line 28155 // breaks even when it contains 'unbreakable' content such as long URLs. 28156 // See https://github.com/WordPress/gutenberg/issues/60860. 28157 const truncateLines = /*#__PURE__*/emotion_react_browser_esm_css(numberOfLines === 1 ? 'word-break: break-all;' : '', " -webkit-box-orient:vertical;-webkit-line-clamp:", numberOfLines, ";display:-webkit-box;overflow:hidden;" + ( true ? "" : 0), true ? "" : 0); 28158 return cx(shouldTruncate && !numberOfLines && Truncate, shouldTruncate && !!numberOfLines && truncateLines, className); 28159 }, [className, cx, numberOfLines, shouldTruncate]); 28160 return { 28161 ...otherProps, 28162 className: classes, 28163 children: truncatedContent 28164 }; 28165 } 28166 28167 ;// ./node_modules/colord/index.mjs 28168 var colord_r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},colord_n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},colord_e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},colord_a=function(r){return{r:colord_e(r.r,0,255),g:colord_e(r.g,0,255),b:colord_e(r.b,0,255),a:colord_e(r.a)}},colord_o=function(r){return{r:colord_n(r.r),g:colord_n(r.g),b:colord_n(r.b),a:colord_n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),l:colord_e(r.l,0,100),a:colord_e(r.a)}},d=function(r){return{h:colord_n(r.h),s:colord_n(r.s),l:colord_n(r.l),a:colord_n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(colord_r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})}; 28169 28170 ;// ./node_modules/colord/plugins/names.mjs 28171 /* harmony default export */ function names(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])} 28172 28173 ;// ./node_modules/@wordpress/components/build-module/utils/colors.js 28174 /** 28175 * External dependencies 28176 */ 28177 28178 28179 28180 28181 /** @type {HTMLDivElement} */ 28182 let colorComputationNode; 28183 k([names]); 28184 28185 /** 28186 * Generating a CSS compliant rgba() color value. 28187 * 28188 * @param {string} hexValue The hex value to convert to rgba(). 28189 * @param {number} alpha The alpha value for opacity. 28190 * @return {string} The converted rgba() color value. 28191 * 28192 * @example 28193 * rgba( '#000000', 0.5 ) 28194 * // rgba(0, 0, 0, 0.5) 28195 */ 28196 function colors_rgba(hexValue = '', alpha = 1) { 28197 return colord(hexValue).alpha(alpha).toRgbString(); 28198 } 28199 28200 /** 28201 * @return {HTMLDivElement | undefined} The HTML element for color computation. 28202 */ 28203 function getColorComputationNode() { 28204 if (typeof document === 'undefined') { 28205 return; 28206 } 28207 if (!colorComputationNode) { 28208 // Create a temporary element for style computation. 28209 const el = document.createElement('div'); 28210 el.setAttribute('data-g2-color-computation-node', ''); 28211 // Inject for window computed style. 28212 document.body.appendChild(el); 28213 colorComputationNode = el; 28214 } 28215 return colorComputationNode; 28216 } 28217 28218 /** 28219 * @param {string | unknown} value 28220 * 28221 * @return {boolean} Whether the value is a valid color. 28222 */ 28223 function isColor(value) { 28224 if (typeof value !== 'string') { 28225 return false; 28226 } 28227 const test = w(value); 28228 return test.isValid(); 28229 } 28230 28231 /** 28232 * Retrieves the computed background color. This is useful for getting the 28233 * value of a CSS variable color. 28234 * 28235 * @param {string | unknown} backgroundColor The background color to compute. 28236 * 28237 * @return {string} The computed background color. 28238 */ 28239 function _getComputedBackgroundColor(backgroundColor) { 28240 if (typeof backgroundColor !== 'string') { 28241 return ''; 28242 } 28243 if (isColor(backgroundColor)) { 28244 return backgroundColor; 28245 } 28246 if (!backgroundColor.includes('var(')) { 28247 return ''; 28248 } 28249 if (typeof document === 'undefined') { 28250 return ''; 28251 } 28252 28253 // Attempts to gracefully handle CSS variables color values. 28254 const el = getColorComputationNode(); 28255 if (!el) { 28256 return ''; 28257 } 28258 el.style.background = backgroundColor; 28259 // Grab the style. 28260 const computedColor = window?.getComputedStyle(el).background; 28261 // Reset. 28262 el.style.background = ''; 28263 return computedColor || ''; 28264 } 28265 const getComputedBackgroundColor = memize(_getComputedBackgroundColor); 28266 28267 /** 28268 * Get the text shade optimized for readability, based on a background color. 28269 * 28270 * @param {string | unknown} backgroundColor The background color. 28271 * 28272 * @return {string} The optimized text color (black or white). 28273 */ 28274 function getOptimalTextColor(backgroundColor) { 28275 const background = getComputedBackgroundColor(backgroundColor); 28276 return w(background).isLight() ? '#000000' : '#ffffff'; 28277 } 28278 28279 /** 28280 * Get the text shade optimized for readability, based on a background color. 28281 * 28282 * @param {string | unknown} backgroundColor The background color. 28283 * 28284 * @return {string} The optimized text shade (dark or light). 28285 */ 28286 function getOptimalTextShade(backgroundColor) { 28287 const result = getOptimalTextColor(backgroundColor); 28288 return result === '#000000' ? 'dark' : 'light'; 28289 } 28290 28291 ;// ./node_modules/@wordpress/components/build-module/text/styles.js 28292 function text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 28293 /** 28294 * External dependencies 28295 */ 28296 28297 28298 /** 28299 * Internal dependencies 28300 */ 28301 28302 const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foreground, ";line-height:", config_values.fontLineHeightBase, ";margin:0;text-wrap:balance;text-wrap:pretty;" + ( true ? "" : 0), true ? "" : 0); 28303 const styles_block = true ? { 28304 name: "4zleql", 28305 styles: "display:block" 28306 } : 0; 28307 const positive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.green, ";" + ( true ? "" : 0), true ? "" : 0); 28308 const destructive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.red, ";" + ( true ? "" : 0), true ? "" : 0); 28309 const muted = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[700], ";" + ( true ? "" : 0), true ? "" : 0); 28310 const highlighterText = /*#__PURE__*/emotion_react_browser_esm_css("mark{background:", COLORS.alert.yellow, ";border-radius:", config_values.radiusSmall, ";box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + ( true ? "" : 0), true ? "" : 0); 28311 const upperCase = true ? { 28312 name: "50zrmy", 28313 styles: "text-transform:uppercase" 28314 } : 0; 28315 28316 // EXTERNAL MODULE: ./node_modules/highlight-words-core/dist/index.js 28317 var dist = __webpack_require__(9664); 28318 ;// ./node_modules/@wordpress/components/build-module/text/utils.js 28319 /** 28320 * External dependencies 28321 */ 28322 28323 28324 28325 /** 28326 * WordPress dependencies 28327 */ 28328 28329 28330 /** 28331 * Source: 28332 * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js 28333 */ 28334 28335 /** 28336 * @typedef Options 28337 * @property {string} [activeClassName=''] Classname for active highlighted areas. 28338 * @property {number} [activeIndex=-1] The index of the active highlighted area. 28339 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle] Styles to apply to the active highlighted area. 28340 * @property {boolean} [autoEscape] Whether to automatically escape text. 28341 * @property {boolean} [caseSensitive=false] Whether to highlight in a case-sensitive manner. 28342 * @property {string} children Children to highlight. 28343 * @property {import('highlight-words-core').FindAllArgs['findChunks']} [findChunks] Custom `findChunks` function to pass to `highlight-words-core`. 28344 * @property {string | Record<string, unknown>} [highlightClassName=''] Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key). 28345 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text. 28346 * @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text. 28347 * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `sanitize` function to pass to `highlight-words-core`. 28348 * @property {string[]} [searchWords=[]] Words to search for and highlight. 28349 * @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text. 28350 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text. 28351 */ 28352 28353 /** 28354 * Maps props to lowercase names. 28355 * 28356 * @param object Props to map. 28357 * @return The mapped props. 28358 */ 28359 const lowercaseProps = object => { 28360 const mapped = {}; 28361 for (const key in object) { 28362 mapped[key.toLowerCase()] = object[key]; 28363 } 28364 return mapped; 28365 }; 28366 const memoizedLowercaseProps = memize(lowercaseProps); 28367 28368 /** 28369 * @param options 28370 * @param options.activeClassName 28371 * @param options.activeIndex 28372 * @param options.activeStyle 28373 * @param options.autoEscape 28374 * @param options.caseSensitive 28375 * @param options.children 28376 * @param options.findChunks 28377 * @param options.highlightClassName 28378 * @param options.highlightStyle 28379 * @param options.highlightTag 28380 * @param options.sanitize 28381 * @param options.searchWords 28382 * @param options.unhighlightClassName 28383 * @param options.unhighlightStyle 28384 */ 28385 function createHighlighterText({ 28386 activeClassName = '', 28387 activeIndex = -1, 28388 activeStyle, 28389 autoEscape, 28390 caseSensitive = false, 28391 children, 28392 findChunks, 28393 highlightClassName = '', 28394 highlightStyle = {}, 28395 highlightTag = 'mark', 28396 sanitize, 28397 searchWords = [], 28398 unhighlightClassName = '', 28399 unhighlightStyle 28400 }) { 28401 if (!children) { 28402 return null; 28403 } 28404 if (typeof children !== 'string') { 28405 return children; 28406 } 28407 const textToHighlight = children; 28408 const chunks = (0,dist.findAll)({ 28409 autoEscape, 28410 caseSensitive, 28411 findChunks, 28412 sanitize, 28413 searchWords, 28414 textToHighlight 28415 }); 28416 const HighlightTag = highlightTag; 28417 let highlightIndex = -1; 28418 let highlightClassNames = ''; 28419 let highlightStyles; 28420 const textContent = chunks.map((chunk, index) => { 28421 const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); 28422 if (chunk.highlight) { 28423 highlightIndex++; 28424 let highlightClass; 28425 if (typeof highlightClassName === 'object') { 28426 if (!caseSensitive) { 28427 highlightClassName = memoizedLowercaseProps(highlightClassName); 28428 highlightClass = highlightClassName[text.toLowerCase()]; 28429 } else { 28430 highlightClass = highlightClassName[text]; 28431 } 28432 } else { 28433 highlightClass = highlightClassName; 28434 } 28435 const isActive = highlightIndex === +activeIndex; 28436 highlightClassNames = `$highlightClass} $isActive ? activeClassName : ''}`; 28437 highlightStyles = isActive === true && activeStyle !== null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle; 28438 const props = { 28439 children: text, 28440 className: highlightClassNames, 28441 key: index, 28442 style: highlightStyles 28443 }; 28444 28445 // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop) 28446 // Only pass through the highlightIndex attribute for custom components. 28447 if (typeof HighlightTag !== 'string') { 28448 props.highlightIndex = highlightIndex; 28449 } 28450 return (0,external_wp_element_namespaceObject.createElement)(HighlightTag, props); 28451 } 28452 return (0,external_wp_element_namespaceObject.createElement)('span', { 28453 children: text, 28454 className: unhighlightClassName, 28455 key: index, 28456 style: unhighlightStyle 28457 }); 28458 }); 28459 return textContent; 28460 } 28461 28462 ;// ./node_modules/@wordpress/components/build-module/utils/font-size.js 28463 /** 28464 * External dependencies 28465 */ 28466 28467 /** 28468 * Internal dependencies 28469 */ 28470 28471 const BASE_FONT_SIZE = 13; 28472 const PRESET_FONT_SIZES = { 28473 body: BASE_FONT_SIZE, 28474 caption: 10, 28475 footnote: 11, 28476 largeTitle: 28, 28477 subheadline: 12, 28478 title: 20 28479 }; 28480 const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]); 28481 function getFontSize(size = BASE_FONT_SIZE) { 28482 if (size in PRESET_FONT_SIZES) { 28483 return getFontSize(PRESET_FONT_SIZES[size]); 28484 } 28485 if (typeof size !== 'number') { 28486 const parsed = parseFloat(size); 28487 if (Number.isNaN(parsed)) { 28488 return size; 28489 } 28490 size = parsed; 28491 } 28492 const ratio = `($size} / $BASE_FONT_SIZE})`; 28493 return `calc($ratio} * $config_values.fontSize})`; 28494 } 28495 function getHeadingFontSize(size = 3) { 28496 if (!HEADING_FONT_SIZES.includes(size)) { 28497 return getFontSize(size); 28498 } 28499 const headingSize = `fontSizeH$size}`; 28500 return config_values[headingSize]; 28501 } 28502 28503 ;// ./node_modules/@wordpress/components/build-module/text/get-line-height.js 28504 /** 28505 * External dependencies 28506 */ 28507 28508 /** 28509 * Internal dependencies 28510 */ 28511 28512 28513 28514 function getLineHeight(adjustLineHeightForInnerControls, lineHeight) { 28515 if (lineHeight) { 28516 return lineHeight; 28517 } 28518 if (!adjustLineHeightForInnerControls) { 28519 return; 28520 } 28521 let value = `calc($config_values.controlHeight} + $space(2)})`; 28522 switch (adjustLineHeightForInnerControls) { 28523 case 'large': 28524 value = `calc($config_values.controlHeightLarge} + $space(2)})`; 28525 break; 28526 case 'small': 28527 value = `calc($config_values.controlHeightSmall} + $space(2)})`; 28528 break; 28529 case 'xSmall': 28530 value = `calc($config_values.controlHeightXSmall} + $space(2)})`; 28531 break; 28532 default: 28533 break; 28534 } 28535 return value; 28536 } 28537 28538 ;// ./node_modules/@wordpress/components/build-module/text/hook.js 28539 function hook_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 28540 /** 28541 * External dependencies 28542 */ 28543 28544 28545 28546 /** 28547 * WordPress dependencies 28548 */ 28549 28550 28551 /** 28552 * Internal dependencies 28553 */ 28554 28555 28556 28557 28558 28559 28560 28561 28562 28563 28564 var hook_ref = true ? { 28565 name: "50zrmy", 28566 styles: "text-transform:uppercase" 28567 } : 0; 28568 /** 28569 * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props 28570 */ 28571 function useText(props) { 28572 const { 28573 adjustLineHeightForInnerControls, 28574 align, 28575 children, 28576 className, 28577 color, 28578 ellipsizeMode, 28579 isDestructive = false, 28580 display, 28581 highlightEscape = false, 28582 highlightCaseSensitive = false, 28583 highlightWords, 28584 highlightSanitize, 28585 isBlock = false, 28586 letterSpacing, 28587 lineHeight: lineHeightProp, 28588 optimizeReadabilityFor, 28589 size, 28590 truncate = false, 28591 upperCase = false, 28592 variant, 28593 weight = config_values.fontWeight, 28594 ...otherProps 28595 } = useContextSystem(props, 'Text'); 28596 let content = children; 28597 const isHighlighter = Array.isArray(highlightWords); 28598 const isCaption = size === 'caption'; 28599 if (isHighlighter) { 28600 if (typeof children !== 'string') { 28601 throw new TypeError('`children` of `Text` must only be `string` types when `highlightWords` is defined'); 28602 } 28603 content = createHighlighterText({ 28604 autoEscape: highlightEscape, 28605 children, 28606 caseSensitive: highlightCaseSensitive, 28607 searchWords: highlightWords, 28608 sanitize: highlightSanitize 28609 }); 28610 } 28611 const cx = useCx(); 28612 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 28613 const sx = {}; 28614 const lineHeight = getLineHeight(adjustLineHeightForInnerControls, lineHeightProp); 28615 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 28616 color, 28617 display, 28618 fontSize: getFontSize(size), 28619 fontWeight: weight, 28620 lineHeight, 28621 letterSpacing, 28622 textAlign: align 28623 }, true ? "" : 0, true ? "" : 0); 28624 sx.upperCase = hook_ref; 28625 sx.optimalTextColor = null; 28626 if (optimizeReadabilityFor) { 28627 const isOptimalTextColorDark = getOptimalTextShade(optimizeReadabilityFor) === 'dark'; 28628 28629 // Should not use theme colors 28630 sx.optimalTextColor = isOptimalTextColorDark ? /*#__PURE__*/emotion_react_browser_esm_css({ 28631 color: COLORS.gray[900] 28632 }, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({ 28633 color: COLORS.white 28634 }, true ? "" : 0, true ? "" : 0); 28635 } 28636 return cx(Text, sx.Base, sx.optimalTextColor, isDestructive && destructive, !!isHighlighter && highlighterText, isBlock && styles_block, isCaption && muted, variant && text_styles_namespaceObject[variant], upperCase && sx.upperCase, className); 28637 }, [adjustLineHeightForInnerControls, align, className, color, cx, display, isBlock, isCaption, isDestructive, isHighlighter, letterSpacing, lineHeightProp, optimizeReadabilityFor, size, upperCase, variant, weight]); 28638 let finalEllipsizeMode; 28639 if (truncate === true) { 28640 finalEllipsizeMode = 'auto'; 28641 } 28642 if (truncate === false) { 28643 finalEllipsizeMode = 'none'; 28644 } 28645 const finalComponentProps = { 28646 ...otherProps, 28647 className: classes, 28648 children, 28649 ellipsizeMode: ellipsizeMode || finalEllipsizeMode 28650 }; 28651 const truncateProps = useTruncate(finalComponentProps); 28652 28653 /** 28654 * Enhance child `<Link />` components to inherit font size. 28655 */ 28656 if (!truncate && Array.isArray(children)) { 28657 content = external_wp_element_namespaceObject.Children.map(children, child => { 28658 if (typeof child !== 'object' || child === null || !('props' in child)) { 28659 return child; 28660 } 28661 const isLink = hasConnectNamespace(child, ['Link']); 28662 if (isLink) { 28663 return (0,external_wp_element_namespaceObject.cloneElement)(child, { 28664 size: child.props.size || 'inherit' 28665 }); 28666 } 28667 return child; 28668 }); 28669 } 28670 return { 28671 ...truncateProps, 28672 children: truncate ? truncateProps.children : content 28673 }; 28674 } 28675 28676 ;// ./node_modules/@wordpress/components/build-module/text/component.js 28677 /** 28678 * Internal dependencies 28679 */ 28680 28681 28682 28683 28684 28685 /** 28686 * @param props 28687 * @param forwardedRef 28688 */ 28689 function UnconnectedText(props, forwardedRef) { 28690 const textProps = useText(props); 28691 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 28692 as: "span", 28693 ...textProps, 28694 ref: forwardedRef 28695 }); 28696 } 28697 28698 /** 28699 * `Text` is a core component that renders text in the library, using the 28700 * library's typography system. 28701 * 28702 * `Text` can be used to render any text-content, like an HTML `p` or `span`. 28703 * 28704 * @example 28705 * 28706 * ```jsx 28707 * import { __experimentalText as Text } from `@wordpress/components`; 28708 * 28709 * function Example() { 28710 * return <Text>Code is Poetry</Text>; 28711 * } 28712 * ``` 28713 */ 28714 const component_Text = contextConnect(UnconnectedText, 'Text'); 28715 /* harmony default export */ const text_component = (component_Text); 28716 28717 ;// ./node_modules/@wordpress/components/build-module/utils/base-label.js 28718 function base_label_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 28719 /** 28720 * External dependencies 28721 */ 28722 28723 28724 // This is a very low-level mixin which you shouldn't have to use directly. 28725 // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can. 28726 const baseLabelTypography = true ? { 28727 name: "9amh4a", 28728 styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase" 28729 } : 0; 28730 28731 ;// ./node_modules/@wordpress/components/build-module/input-control/styles/input-control-styles.js 28732 28733 function input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 28734 /** 28735 * External dependencies 28736 */ 28737 28738 28739 /** 28740 * Internal dependencies 28741 */ 28742 28743 28744 28745 28746 28747 const Prefix = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 28748 target: "em5sgkm8" 28749 } : 0)( true ? { 28750 name: "pvvbxf", 28751 styles: "box-sizing:border-box;display:block" 28752 } : 0); 28753 const Suffix = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 28754 target: "em5sgkm7" 28755 } : 0)( true ? { 28756 name: "jgf79h", 28757 styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex" 28758 } : 0); 28759 const backdropBorderColor = ({ 28760 disabled, 28761 isBorderless 28762 }) => { 28763 if (isBorderless) { 28764 return 'transparent'; 28765 } 28766 if (disabled) { 28767 return COLORS.ui.borderDisabled; 28768 } 28769 return COLORS.ui.border; 28770 }; 28771 const BackdropUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 28772 target: "em5sgkm6" 28773 } : 0)("&&&{box-sizing:border-box;border-color:", backdropBorderColor, ";border-radius:inherit;border-style:solid;border-width:1px;bottom:0;left:0;margin:0;padding:0;pointer-events:none;position:absolute;right:0;top:0;", rtl({ 28774 paddingLeft: 2 28775 }), ";}" + ( true ? "" : 0)); 28776 const Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 28777 target: "em5sgkm5" 28778 } : 0)("box-sizing:border-box;position:relative;border-radius:", config_values.radiusSmall, ";padding-top:0;&:focus-within:not( :has( :is( ", Prefix, ", ", Suffix, " ):focus-within ) ){", BackdropUI, "{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";outline:2px solid transparent;outline-offset:-2px;}}" + ( true ? "" : 0)); 28779 const containerDisabledStyles = ({ 28780 disabled 28781 }) => { 28782 const backgroundColor = disabled ? COLORS.ui.backgroundDisabled : COLORS.ui.background; 28783 return /*#__PURE__*/emotion_react_browser_esm_css({ 28784 backgroundColor 28785 }, true ? "" : 0, true ? "" : 0); 28786 }; 28787 var input_control_styles_ref = true ? { 28788 name: "1d3w5wq", 28789 styles: "width:100%" 28790 } : 0; 28791 const containerWidthStyles = ({ 28792 __unstableInputWidth, 28793 labelPosition 28794 }) => { 28795 if (!__unstableInputWidth) { 28796 return input_control_styles_ref; 28797 } 28798 if (labelPosition === 'side') { 28799 return ''; 28800 } 28801 if (labelPosition === 'edge') { 28802 return /*#__PURE__*/emotion_react_browser_esm_css({ 28803 flex: `0 0 $__unstableInputWidth}` 28804 }, true ? "" : 0, true ? "" : 0); 28805 } 28806 return /*#__PURE__*/emotion_react_browser_esm_css({ 28807 width: __unstableInputWidth 28808 }, true ? "" : 0, true ? "" : 0); 28809 }; 28810 const Container = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 28811 target: "em5sgkm4" 28812 } : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0)); 28813 const disabledStyles = ({ 28814 disabled 28815 }) => { 28816 if (!disabled) { 28817 return ''; 28818 } 28819 return /*#__PURE__*/emotion_react_browser_esm_css({ 28820 color: COLORS.ui.textDisabled 28821 }, true ? "" : 0, true ? "" : 0); 28822 }; 28823 const fontSizeStyles = ({ 28824 inputSize: size 28825 }) => { 28826 const sizes = { 28827 default: '13px', 28828 small: '11px', 28829 compact: '13px', 28830 '__unstable-large': '13px' 28831 }; 28832 const fontSize = sizes[size] || sizes.default; 28833 const fontSizeMobile = '16px'; 28834 if (!fontSize) { 28835 return ''; 28836 } 28837 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0), true ? "" : 0); 28838 }; 28839 const getSizeConfig = ({ 28840 inputSize: size, 28841 __next40pxDefaultSize 28842 }) => { 28843 // Paddings may be overridden by the custom paddings props. 28844 const sizes = { 28845 default: { 28846 height: 40, 28847 lineHeight: 1, 28848 minHeight: 40, 28849 paddingLeft: config_values.controlPaddingX, 28850 paddingRight: config_values.controlPaddingX 28851 }, 28852 small: { 28853 height: 24, 28854 lineHeight: 1, 28855 minHeight: 24, 28856 paddingLeft: config_values.controlPaddingXSmall, 28857 paddingRight: config_values.controlPaddingXSmall 28858 }, 28859 compact: { 28860 height: 32, 28861 lineHeight: 1, 28862 minHeight: 32, 28863 paddingLeft: config_values.controlPaddingXSmall, 28864 paddingRight: config_values.controlPaddingXSmall 28865 }, 28866 '__unstable-large': { 28867 height: 40, 28868 lineHeight: 1, 28869 minHeight: 40, 28870 paddingLeft: config_values.controlPaddingX, 28871 paddingRight: config_values.controlPaddingX 28872 } 28873 }; 28874 if (!__next40pxDefaultSize) { 28875 sizes.default = sizes.compact; 28876 } 28877 return sizes[size] || sizes.default; 28878 }; 28879 const sizeStyles = props => { 28880 return /*#__PURE__*/emotion_react_browser_esm_css(getSizeConfig(props), true ? "" : 0, true ? "" : 0); 28881 }; 28882 const customPaddings = ({ 28883 paddingInlineStart, 28884 paddingInlineEnd 28885 }) => { 28886 return /*#__PURE__*/emotion_react_browser_esm_css({ 28887 paddingInlineStart, 28888 paddingInlineEnd 28889 }, true ? "" : 0, true ? "" : 0); 28890 }; 28891 const dragStyles = ({ 28892 isDragging, 28893 dragCursor 28894 }) => { 28895 let defaultArrowStyles; 28896 let activeDragCursorStyles; 28897 if (isDragging) { 28898 defaultArrowStyles = /*#__PURE__*/emotion_react_browser_esm_css("cursor:", dragCursor, ";user-select:none;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}" + ( true ? "" : 0), true ? "" : 0); 28899 } 28900 if (isDragging && dragCursor) { 28901 activeDragCursorStyles = /*#__PURE__*/emotion_react_browser_esm_css("&:active{cursor:", dragCursor, ";}" + ( true ? "" : 0), true ? "" : 0); 28902 } 28903 return /*#__PURE__*/emotion_react_browser_esm_css(defaultArrowStyles, " ", activeDragCursorStyles, ";" + ( true ? "" : 0), true ? "" : 0); 28904 }; 28905 28906 // TODO: Resolve need to use &&& to increase specificity 28907 // https://github.com/WordPress/gutenberg/issues/18483 28908 28909 const Input = /*#__PURE__*/emotion_styled_base_browser_esm("input", true ? { 28910 target: "em5sgkm3" 28911 } : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.theme.foreground, ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&[type='email'],&[type='url']{direction:ltr;}}" + ( true ? "" : 0)); 28912 const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 28913 target: "em5sgkm2" 28914 } : 0)("&&&{", baseLabelTypography, ";box-sizing:border-box;display:block;padding-top:0;padding-bottom:0;max-width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" + ( true ? "" : 0)); 28915 const Label = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseLabel, { 28916 ...props, 28917 as: "label" 28918 }); 28919 const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component, true ? { 28920 target: "em5sgkm1" 28921 } : 0)( true ? { 28922 name: "1b6uupn", 28923 styles: "max-width:calc( 100% - 10px )" 28924 } : 0); 28925 const prefixSuffixWrapperStyles = ({ 28926 variant = 'default', 28927 size, 28928 __next40pxDefaultSize, 28929 isPrefix 28930 }) => { 28931 const { 28932 paddingLeft: padding 28933 } = getSizeConfig({ 28934 inputSize: size, 28935 __next40pxDefaultSize 28936 }); 28937 const paddingProperty = isPrefix ? 'paddingInlineStart' : 'paddingInlineEnd'; 28938 if (variant === 'default') { 28939 return /*#__PURE__*/emotion_react_browser_esm_css({ 28940 [paddingProperty]: padding 28941 }, true ? "" : 0, true ? "" : 0); 28942 } 28943 28944 // If variant is 'icon' or 'control' 28945 return /*#__PURE__*/emotion_react_browser_esm_css({ 28946 display: 'flex', 28947 [paddingProperty]: padding - 4 28948 }, true ? "" : 0, true ? "" : 0); 28949 }; 28950 const PrefixSuffixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 28951 target: "em5sgkm0" 28952 } : 0)(prefixSuffixWrapperStyles, ";" + ( true ? "" : 0)); 28953 28954 ;// ./node_modules/@wordpress/components/build-module/input-control/backdrop.js 28955 /** 28956 * WordPress dependencies 28957 */ 28958 28959 /** 28960 * Internal dependencies 28961 */ 28962 28963 28964 function Backdrop({ 28965 disabled = false, 28966 isBorderless = false 28967 }) { 28968 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackdropUI, { 28969 "aria-hidden": "true", 28970 className: "components-input-control__backdrop", 28971 disabled: disabled, 28972 isBorderless: isBorderless 28973 }); 28974 } 28975 const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop); 28976 /* harmony default export */ const backdrop = (MemoizedBackdrop); 28977 28978 ;// ./node_modules/@wordpress/components/build-module/input-control/label.js 28979 /** 28980 * Internal dependencies 28981 */ 28982 28983 28984 28985 function label_Label({ 28986 children, 28987 hideLabelFromVision, 28988 htmlFor, 28989 ...props 28990 }) { 28991 if (!children) { 28992 return null; 28993 } 28994 if (hideLabelFromVision) { 28995 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 28996 as: "label", 28997 htmlFor: htmlFor, 28998 children: children 28999 }); 29000 } 29001 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LabelWrapper, { 29002 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Label, { 29003 htmlFor: htmlFor, 29004 ...props, 29005 children: children 29006 }) 29007 }); 29008 } 29009 29010 ;// ./node_modules/@wordpress/components/build-module/utils/use-deprecated-props.js 29011 function useDeprecated36pxDefaultSizeProp(props) { 29012 const { 29013 __next36pxDefaultSize, 29014 __next40pxDefaultSize, 29015 ...otherProps 29016 } = props; 29017 return { 29018 ...otherProps, 29019 __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize 29020 }; 29021 } 29022 29023 ;// ./node_modules/@wordpress/components/build-module/input-control/input-base.js 29024 /** 29025 * External dependencies 29026 */ 29027 29028 /** 29029 * WordPress dependencies 29030 */ 29031 29032 29033 29034 /** 29035 * Internal dependencies 29036 */ 29037 29038 29039 29040 29041 29042 29043 function useUniqueId(idProp) { 29044 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputBase); 29045 const id = `input-base-control-$instanceId}`; 29046 return idProp || id; 29047 } 29048 29049 // Adapter to map props for the new ui/flex component. 29050 function getUIFlexProps(labelPosition) { 29051 const props = {}; 29052 switch (labelPosition) { 29053 case 'top': 29054 props.direction = 'column'; 29055 props.expanded = false; 29056 props.gap = 0; 29057 break; 29058 case 'bottom': 29059 props.direction = 'column-reverse'; 29060 props.expanded = false; 29061 props.gap = 0; 29062 break; 29063 case 'edge': 29064 props.justify = 'space-between'; 29065 break; 29066 } 29067 return props; 29068 } 29069 function InputBase(props, ref) { 29070 const { 29071 __next40pxDefaultSize, 29072 __unstableInputWidth, 29073 children, 29074 className, 29075 disabled = false, 29076 hideLabelFromVision = false, 29077 labelPosition, 29078 id: idProp, 29079 isBorderless = false, 29080 label, 29081 prefix, 29082 size = 'default', 29083 suffix, 29084 ...restProps 29085 } = useDeprecated36pxDefaultSizeProp(useContextSystem(props, 'InputBase')); 29086 const id = useUniqueId(idProp); 29087 const hideLabel = hideLabelFromVision || !label; 29088 const prefixSuffixContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 29089 return { 29090 InputControlPrefixWrapper: { 29091 __next40pxDefaultSize, 29092 size 29093 }, 29094 InputControlSuffixWrapper: { 29095 __next40pxDefaultSize, 29096 size 29097 } 29098 }; 29099 }, [__next40pxDefaultSize, size]); 29100 return ( 29101 /*#__PURE__*/ 29102 // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions. 29103 (0,external_ReactJSXRuntime_namespaceObject.jsxs)(Root, { 29104 ...restProps, 29105 ...getUIFlexProps(labelPosition), 29106 className: className, 29107 gap: 2, 29108 ref: ref, 29109 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(label_Label, { 29110 className: "components-input-control__label", 29111 hideLabelFromVision: hideLabelFromVision, 29112 labelPosition: labelPosition, 29113 htmlFor: id, 29114 children: label 29115 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Container, { 29116 __unstableInputWidth: __unstableInputWidth, 29117 className: "components-input-control__container", 29118 disabled: disabled, 29119 hideLabel: hideLabel, 29120 labelPosition: labelPosition, 29121 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ContextSystemProvider, { 29122 value: prefixSuffixContextValue, 29123 children: [prefix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Prefix, { 29124 className: "components-input-control__prefix", 29125 children: prefix 29126 }), children, suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Suffix, { 29127 className: "components-input-control__suffix", 29128 children: suffix 29129 })] 29130 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(backdrop, { 29131 disabled: disabled, 29132 isBorderless: isBorderless 29133 })] 29134 })] 29135 }) 29136 ); 29137 } 29138 29139 /** 29140 * `InputBase` is an internal component used to style the standard borders for an input, 29141 * as well as handle the layout for prefix/suffix elements. 29142 */ 29143 /* harmony default export */ const input_base = (contextConnect(InputBase, 'InputBase')); 29144 29145 ;// ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js 29146 function maths_0ab39ae9_esm_clamp(v, min, max) { 29147 return Math.max(min, Math.min(v, max)); 29148 } 29149 const V = { 29150 toVector(v, fallback) { 29151 if (v === undefined) v = fallback; 29152 return Array.isArray(v) ? v : [v, v]; 29153 }, 29154 add(v1, v2) { 29155 return [v1[0] + v2[0], v1[1] + v2[1]]; 29156 }, 29157 sub(v1, v2) { 29158 return [v1[0] - v2[0], v1[1] - v2[1]]; 29159 }, 29160 addTo(v1, v2) { 29161 v1[0] += v2[0]; 29162 v1[1] += v2[1]; 29163 }, 29164 subTo(v1, v2) { 29165 v1[0] -= v2[0]; 29166 v1[1] -= v2[1]; 29167 } 29168 }; 29169 function rubberband(distance, dimension, constant) { 29170 if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5); 29171 return distance * dimension * constant / (dimension + constant * distance); 29172 } 29173 function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) { 29174 if (constant === 0) return maths_0ab39ae9_esm_clamp(position, min, max); 29175 if (position < min) return -rubberband(min - position, max - min, constant) + min; 29176 if (position > max) return +rubberband(position - max, max - min, constant) + max; 29177 return position; 29178 } 29179 function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) { 29180 const [[X0, X1], [Y0, Y1]] = bounds; 29181 return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)]; 29182 } 29183 29184 29185 29186 ;// ./node_modules/@use-gesture/core/dist/actions-fe213e88.esm.js 29187 29188 29189 function _toPrimitive(input, hint) { 29190 if (typeof input !== "object" || input === null) return input; 29191 var prim = input[Symbol.toPrimitive]; 29192 if (prim !== undefined) { 29193 var res = prim.call(input, hint || "default"); 29194 if (typeof res !== "object") return res; 29195 throw new TypeError("@@toPrimitive must return a primitive value."); 29196 } 29197 return (hint === "string" ? String : Number)(input); 29198 } 29199 29200 function _toPropertyKey(arg) { 29201 var key = _toPrimitive(arg, "string"); 29202 return typeof key === "symbol" ? key : String(key); 29203 } 29204 29205 function _defineProperty(obj, key, value) { 29206 key = _toPropertyKey(key); 29207 if (key in obj) { 29208 Object.defineProperty(obj, key, { 29209 value: value, 29210 enumerable: true, 29211 configurable: true, 29212 writable: true 29213 }); 29214 } else { 29215 obj[key] = value; 29216 } 29217 return obj; 29218 } 29219 29220 function actions_fe213e88_esm_ownKeys(e, r) { 29221 var t = Object.keys(e); 29222 if (Object.getOwnPropertySymbols) { 29223 var o = Object.getOwnPropertySymbols(e); 29224 r && (o = o.filter(function (r) { 29225 return Object.getOwnPropertyDescriptor(e, r).enumerable; 29226 })), t.push.apply(t, o); 29227 } 29228 return t; 29229 } 29230 function _objectSpread2(e) { 29231 for (var r = 1; r < arguments.length; r++) { 29232 var t = null != arguments[r] ? arguments[r] : {}; 29233 r % 2 ? actions_fe213e88_esm_ownKeys(Object(t), !0).forEach(function (r) { 29234 _defineProperty(e, r, t[r]); 29235 }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : actions_fe213e88_esm_ownKeys(Object(t)).forEach(function (r) { 29236 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); 29237 }); 29238 } 29239 return e; 29240 } 29241 29242 const EVENT_TYPE_MAP = { 29243 pointer: { 29244 start: 'down', 29245 change: 'move', 29246 end: 'up' 29247 }, 29248 mouse: { 29249 start: 'down', 29250 change: 'move', 29251 end: 'up' 29252 }, 29253 touch: { 29254 start: 'start', 29255 change: 'move', 29256 end: 'end' 29257 }, 29258 gesture: { 29259 start: 'start', 29260 change: 'change', 29261 end: 'end' 29262 } 29263 }; 29264 function capitalize(string) { 29265 if (!string) return ''; 29266 return string[0].toUpperCase() + string.slice(1); 29267 } 29268 const actionsWithoutCaptureSupported = ['enter', 'leave']; 29269 function hasCapture(capture = false, actionKey) { 29270 return capture && !actionsWithoutCaptureSupported.includes(actionKey); 29271 } 29272 function toHandlerProp(device, action = '', capture = false) { 29273 const deviceProps = EVENT_TYPE_MAP[device]; 29274 const actionKey = deviceProps ? deviceProps[action] || action : action; 29275 return 'on' + capitalize(device) + capitalize(actionKey) + (hasCapture(capture, actionKey) ? 'Capture' : ''); 29276 } 29277 const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture']; 29278 function parseProp(prop) { 29279 let eventKey = prop.substring(2).toLowerCase(); 29280 const passive = !!~eventKey.indexOf('passive'); 29281 if (passive) eventKey = eventKey.replace('passive', ''); 29282 const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture'; 29283 const capture = !!~eventKey.indexOf(captureKey); 29284 if (capture) eventKey = eventKey.replace('capture', ''); 29285 return { 29286 device: eventKey, 29287 capture, 29288 passive 29289 }; 29290 } 29291 function toDomEventType(device, action = '') { 29292 const deviceProps = EVENT_TYPE_MAP[device]; 29293 const actionKey = deviceProps ? deviceProps[action] || action : action; 29294 return device + actionKey; 29295 } 29296 function isTouch(event) { 29297 return 'touches' in event; 29298 } 29299 function getPointerType(event) { 29300 if (isTouch(event)) return 'touch'; 29301 if ('pointerType' in event) return event.pointerType; 29302 return 'mouse'; 29303 } 29304 function getCurrentTargetTouchList(event) { 29305 return Array.from(event.touches).filter(e => { 29306 var _event$currentTarget, _event$currentTarget$; 29307 return e.target === event.currentTarget || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || (_event$currentTarget$ = _event$currentTarget.contains) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, e.target)); 29308 }); 29309 } 29310 function getTouchList(event) { 29311 return event.type === 'touchend' || event.type === 'touchcancel' ? event.changedTouches : event.targetTouches; 29312 } 29313 function getValueEvent(event) { 29314 return isTouch(event) ? getTouchList(event)[0] : event; 29315 } 29316 function distanceAngle(P1, P2) { 29317 try { 29318 const dx = P2.clientX - P1.clientX; 29319 const dy = P2.clientY - P1.clientY; 29320 const cx = (P2.clientX + P1.clientX) / 2; 29321 const cy = (P2.clientY + P1.clientY) / 2; 29322 const distance = Math.hypot(dx, dy); 29323 const angle = -(Math.atan2(dx, dy) * 180) / Math.PI; 29324 const origin = [cx, cy]; 29325 return { 29326 angle, 29327 distance, 29328 origin 29329 }; 29330 } catch (_unused) {} 29331 return null; 29332 } 29333 function touchIds(event) { 29334 return getCurrentTargetTouchList(event).map(touch => touch.identifier); 29335 } 29336 function touchDistanceAngle(event, ids) { 29337 const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier)); 29338 return distanceAngle(P1, P2); 29339 } 29340 function pointerId(event) { 29341 const valueEvent = getValueEvent(event); 29342 return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId; 29343 } 29344 function pointerValues(event) { 29345 const valueEvent = getValueEvent(event); 29346 return [valueEvent.clientX, valueEvent.clientY]; 29347 } 29348 const LINE_HEIGHT = 40; 29349 const PAGE_HEIGHT = 800; 29350 function wheelValues(event) { 29351 let { 29352 deltaX, 29353 deltaY, 29354 deltaMode 29355 } = event; 29356 if (deltaMode === 1) { 29357 deltaX *= LINE_HEIGHT; 29358 deltaY *= LINE_HEIGHT; 29359 } else if (deltaMode === 2) { 29360 deltaX *= PAGE_HEIGHT; 29361 deltaY *= PAGE_HEIGHT; 29362 } 29363 return [deltaX, deltaY]; 29364 } 29365 function scrollValues(event) { 29366 var _ref, _ref2; 29367 const { 29368 scrollX, 29369 scrollY, 29370 scrollLeft, 29371 scrollTop 29372 } = event.currentTarget; 29373 return [(_ref = scrollX !== null && scrollX !== void 0 ? scrollX : scrollLeft) !== null && _ref !== void 0 ? _ref : 0, (_ref2 = scrollY !== null && scrollY !== void 0 ? scrollY : scrollTop) !== null && _ref2 !== void 0 ? _ref2 : 0]; 29374 } 29375 function getEventDetails(event) { 29376 const payload = {}; 29377 if ('buttons' in event) payload.buttons = event.buttons; 29378 if ('shiftKey' in event) { 29379 const { 29380 shiftKey, 29381 altKey, 29382 metaKey, 29383 ctrlKey 29384 } = event; 29385 Object.assign(payload, { 29386 shiftKey, 29387 altKey, 29388 metaKey, 29389 ctrlKey 29390 }); 29391 } 29392 return payload; 29393 } 29394 29395 function call(v, ...args) { 29396 if (typeof v === 'function') { 29397 return v(...args); 29398 } else { 29399 return v; 29400 } 29401 } 29402 function actions_fe213e88_esm_noop() {} 29403 function actions_fe213e88_esm_chain(...fns) { 29404 if (fns.length === 0) return actions_fe213e88_esm_noop; 29405 if (fns.length === 1) return fns[0]; 29406 return function () { 29407 let result; 29408 for (const fn of fns) { 29409 result = fn.apply(this, arguments) || result; 29410 } 29411 return result; 29412 }; 29413 } 29414 function assignDefault(value, fallback) { 29415 return Object.assign({}, fallback, value || {}); 29416 } 29417 29418 const BEFORE_LAST_KINEMATICS_DELAY = 32; 29419 class Engine { 29420 constructor(ctrl, args, key) { 29421 this.ctrl = ctrl; 29422 this.args = args; 29423 this.key = key; 29424 if (!this.state) { 29425 this.state = {}; 29426 this.computeValues([0, 0]); 29427 this.computeInitial(); 29428 if (this.init) this.init(); 29429 this.reset(); 29430 } 29431 } 29432 get state() { 29433 return this.ctrl.state[this.key]; 29434 } 29435 set state(state) { 29436 this.ctrl.state[this.key] = state; 29437 } 29438 get shared() { 29439 return this.ctrl.state.shared; 29440 } 29441 get eventStore() { 29442 return this.ctrl.gestureEventStores[this.key]; 29443 } 29444 get timeoutStore() { 29445 return this.ctrl.gestureTimeoutStores[this.key]; 29446 } 29447 get config() { 29448 return this.ctrl.config[this.key]; 29449 } 29450 get sharedConfig() { 29451 return this.ctrl.config.shared; 29452 } 29453 get handler() { 29454 return this.ctrl.handlers[this.key]; 29455 } 29456 reset() { 29457 const { 29458 state, 29459 shared, 29460 ingKey, 29461 args 29462 } = this; 29463 shared[ingKey] = state._active = state.active = state._blocked = state._force = false; 29464 state._step = [false, false]; 29465 state.intentional = false; 29466 state._movement = [0, 0]; 29467 state._distance = [0, 0]; 29468 state._direction = [0, 0]; 29469 state._delta = [0, 0]; 29470 state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]]; 29471 state.args = args; 29472 state.axis = undefined; 29473 state.memo = undefined; 29474 state.elapsedTime = state.timeDelta = 0; 29475 state.direction = [0, 0]; 29476 state.distance = [0, 0]; 29477 state.overflow = [0, 0]; 29478 state._movementBound = [false, false]; 29479 state.velocity = [0, 0]; 29480 state.movement = [0, 0]; 29481 state.delta = [0, 0]; 29482 state.timeStamp = 0; 29483 } 29484 start(event) { 29485 const state = this.state; 29486 const config = this.config; 29487 if (!state._active) { 29488 this.reset(); 29489 this.computeInitial(); 29490 state._active = true; 29491 state.target = event.target; 29492 state.currentTarget = event.currentTarget; 29493 state.lastOffset = config.from ? call(config.from, state) : state.offset; 29494 state.offset = state.lastOffset; 29495 state.startTime = state.timeStamp = event.timeStamp; 29496 } 29497 } 29498 computeValues(values) { 29499 const state = this.state; 29500 state._values = values; 29501 state.values = this.config.transform(values); 29502 } 29503 computeInitial() { 29504 const state = this.state; 29505 state._initial = state._values; 29506 state.initial = state.values; 29507 } 29508 compute(event) { 29509 const { 29510 state, 29511 config, 29512 shared 29513 } = this; 29514 state.args = this.args; 29515 let dt = 0; 29516 if (event) { 29517 state.event = event; 29518 if (config.preventDefault && event.cancelable) state.event.preventDefault(); 29519 state.type = event.type; 29520 shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size; 29521 shared.locked = !!document.pointerLockElement; 29522 Object.assign(shared, getEventDetails(event)); 29523 shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0; 29524 dt = event.timeStamp - state.timeStamp; 29525 state.timeStamp = event.timeStamp; 29526 state.elapsedTime = state.timeStamp - state.startTime; 29527 } 29528 if (state._active) { 29529 const _absoluteDelta = state._delta.map(Math.abs); 29530 V.addTo(state._distance, _absoluteDelta); 29531 } 29532 if (this.axisIntent) this.axisIntent(event); 29533 const [_m0, _m1] = state._movement; 29534 const [t0, t1] = config.threshold; 29535 const { 29536 _step, 29537 values 29538 } = state; 29539 if (config.hasCustomTransform) { 29540 if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0]; 29541 if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1]; 29542 } else { 29543 if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0; 29544 if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1; 29545 } 29546 state.intentional = _step[0] !== false || _step[1] !== false; 29547 if (!state.intentional) return; 29548 const movement = [0, 0]; 29549 if (config.hasCustomTransform) { 29550 const [v0, v1] = values; 29551 movement[0] = _step[0] !== false ? v0 - _step[0] : 0; 29552 movement[1] = _step[1] !== false ? v1 - _step[1] : 0; 29553 } else { 29554 movement[0] = _step[0] !== false ? _m0 - _step[0] : 0; 29555 movement[1] = _step[1] !== false ? _m1 - _step[1] : 0; 29556 } 29557 if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement); 29558 const previousOffset = state.offset; 29559 const gestureIsActive = state._active && !state._blocked || state.active; 29560 if (gestureIsActive) { 29561 state.first = state._active && !state.active; 29562 state.last = !state._active && state.active; 29563 state.active = shared[this.ingKey] = state._active; 29564 if (event) { 29565 if (state.first) { 29566 if ('bounds' in config) state._bounds = call(config.bounds, state); 29567 if (this.setup) this.setup(); 29568 } 29569 state.movement = movement; 29570 this.computeOffset(); 29571 } 29572 } 29573 const [ox, oy] = state.offset; 29574 const [[x0, x1], [y0, y1]] = state._bounds; 29575 state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0]; 29576 state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false; 29577 state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false; 29578 const rubberband = state._active ? config.rubberband || [0, 0] : [0, 0]; 29579 state.offset = computeRubberband(state._bounds, state.offset, rubberband); 29580 state.delta = V.sub(state.offset, previousOffset); 29581 this.computeMovement(); 29582 if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) { 29583 state.delta = V.sub(state.offset, previousOffset); 29584 const absoluteDelta = state.delta.map(Math.abs); 29585 V.addTo(state.distance, absoluteDelta); 29586 state.direction = state.delta.map(Math.sign); 29587 state._direction = state._delta.map(Math.sign); 29588 if (!state.first && dt > 0) { 29589 state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt]; 29590 state.timeDelta = dt; 29591 } 29592 } 29593 } 29594 emit() { 29595 const state = this.state; 29596 const shared = this.shared; 29597 const config = this.config; 29598 if (!state._active) this.clean(); 29599 if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return; 29600 const memo = this.handler(_objectSpread2(_objectSpread2(_objectSpread2({}, shared), state), {}, { 29601 [this.aliasKey]: state.values 29602 })); 29603 if (memo !== undefined) state.memo = memo; 29604 } 29605 clean() { 29606 this.eventStore.clean(); 29607 this.timeoutStore.clean(); 29608 } 29609 } 29610 29611 function selectAxis([dx, dy], threshold) { 29612 const absDx = Math.abs(dx); 29613 const absDy = Math.abs(dy); 29614 if (absDx > absDy && absDx > threshold) { 29615 return 'x'; 29616 } 29617 if (absDy > absDx && absDy > threshold) { 29618 return 'y'; 29619 } 29620 return undefined; 29621 } 29622 class CoordinatesEngine extends Engine { 29623 constructor(...args) { 29624 super(...args); 29625 _defineProperty(this, "aliasKey", 'xy'); 29626 } 29627 reset() { 29628 super.reset(); 29629 this.state.axis = undefined; 29630 } 29631 init() { 29632 this.state.offset = [0, 0]; 29633 this.state.lastOffset = [0, 0]; 29634 } 29635 computeOffset() { 29636 this.state.offset = V.add(this.state.lastOffset, this.state.movement); 29637 } 29638 computeMovement() { 29639 this.state.movement = V.sub(this.state.offset, this.state.lastOffset); 29640 } 29641 axisIntent(event) { 29642 const state = this.state; 29643 const config = this.config; 29644 if (!state.axis && event) { 29645 const threshold = typeof config.axisThreshold === 'object' ? config.axisThreshold[getPointerType(event)] : config.axisThreshold; 29646 state.axis = selectAxis(state._movement, threshold); 29647 } 29648 state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis; 29649 } 29650 restrictToAxis(v) { 29651 if (this.config.axis || this.config.lockDirection) { 29652 switch (this.state.axis) { 29653 case 'x': 29654 v[1] = 0; 29655 break; 29656 case 'y': 29657 v[0] = 0; 29658 break; 29659 } 29660 } 29661 } 29662 } 29663 29664 const actions_fe213e88_esm_identity = v => v; 29665 const DEFAULT_RUBBERBAND = 0.15; 29666 const commonConfigResolver = { 29667 enabled(value = true) { 29668 return value; 29669 }, 29670 eventOptions(value, _k, config) { 29671 return _objectSpread2(_objectSpread2({}, config.shared.eventOptions), value); 29672 }, 29673 preventDefault(value = false) { 29674 return value; 29675 }, 29676 triggerAllEvents(value = false) { 29677 return value; 29678 }, 29679 rubberband(value = 0) { 29680 switch (value) { 29681 case true: 29682 return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND]; 29683 case false: 29684 return [0, 0]; 29685 default: 29686 return V.toVector(value); 29687 } 29688 }, 29689 from(value) { 29690 if (typeof value === 'function') return value; 29691 if (value != null) return V.toVector(value); 29692 }, 29693 transform(value, _k, config) { 29694 const transform = value || config.shared.transform; 29695 this.hasCustomTransform = !!transform; 29696 if (false) {} 29697 return transform || actions_fe213e88_esm_identity; 29698 }, 29699 threshold(value) { 29700 return V.toVector(value, 0); 29701 } 29702 }; 29703 if (false) {} 29704 29705 const DEFAULT_AXIS_THRESHOLD = 0; 29706 const coordinatesConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, { 29707 axis(_v, _k, { 29708 axis 29709 }) { 29710 this.lockDirection = axis === 'lock'; 29711 if (!this.lockDirection) return axis; 29712 }, 29713 axisThreshold(value = DEFAULT_AXIS_THRESHOLD) { 29714 return value; 29715 }, 29716 bounds(value = {}) { 29717 if (typeof value === 'function') { 29718 return state => coordinatesConfigResolver.bounds(value(state)); 29719 } 29720 if ('current' in value) { 29721 return () => value.current; 29722 } 29723 if (typeof HTMLElement === 'function' && value instanceof HTMLElement) { 29724 return value; 29725 } 29726 const { 29727 left = -Infinity, 29728 right = Infinity, 29729 top = -Infinity, 29730 bottom = Infinity 29731 } = value; 29732 return [[left, right], [top, bottom]]; 29733 } 29734 }); 29735 29736 const KEYS_DELTA_MAP = { 29737 ArrowRight: (displacement, factor = 1) => [displacement * factor, 0], 29738 ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0], 29739 ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor], 29740 ArrowDown: (displacement, factor = 1) => [0, displacement * factor] 29741 }; 29742 class DragEngine extends CoordinatesEngine { 29743 constructor(...args) { 29744 super(...args); 29745 _defineProperty(this, "ingKey", 'dragging'); 29746 } 29747 reset() { 29748 super.reset(); 29749 const state = this.state; 29750 state._pointerId = undefined; 29751 state._pointerActive = false; 29752 state._keyboardActive = false; 29753 state._preventScroll = false; 29754 state._delayed = false; 29755 state.swipe = [0, 0]; 29756 state.tap = false; 29757 state.canceled = false; 29758 state.cancel = this.cancel.bind(this); 29759 } 29760 setup() { 29761 const state = this.state; 29762 if (state._bounds instanceof HTMLElement) { 29763 const boundRect = state._bounds.getBoundingClientRect(); 29764 const targetRect = state.currentTarget.getBoundingClientRect(); 29765 const _bounds = { 29766 left: boundRect.left - targetRect.left + state.offset[0], 29767 right: boundRect.right - targetRect.right + state.offset[0], 29768 top: boundRect.top - targetRect.top + state.offset[1], 29769 bottom: boundRect.bottom - targetRect.bottom + state.offset[1] 29770 }; 29771 state._bounds = coordinatesConfigResolver.bounds(_bounds); 29772 } 29773 } 29774 cancel() { 29775 const state = this.state; 29776 if (state.canceled) return; 29777 state.canceled = true; 29778 state._active = false; 29779 setTimeout(() => { 29780 this.compute(); 29781 this.emit(); 29782 }, 0); 29783 } 29784 setActive() { 29785 this.state._active = this.state._pointerActive || this.state._keyboardActive; 29786 } 29787 clean() { 29788 this.pointerClean(); 29789 this.state._pointerActive = false; 29790 this.state._keyboardActive = false; 29791 super.clean(); 29792 } 29793 pointerDown(event) { 29794 const config = this.config; 29795 const state = this.state; 29796 if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return; 29797 const ctrlIds = this.ctrl.setEventIds(event); 29798 if (config.pointerCapture) { 29799 event.target.setPointerCapture(event.pointerId); 29800 } 29801 if (ctrlIds && ctrlIds.size > 1 && state._pointerActive) return; 29802 this.start(event); 29803 this.setupPointer(event); 29804 state._pointerId = pointerId(event); 29805 state._pointerActive = true; 29806 this.computeValues(pointerValues(event)); 29807 this.computeInitial(); 29808 if (config.preventScrollAxis && getPointerType(event) !== 'mouse') { 29809 state._active = false; 29810 this.setupScrollPrevention(event); 29811 } else if (config.delay > 0) { 29812 this.setupDelayTrigger(event); 29813 if (config.triggerAllEvents) { 29814 this.compute(event); 29815 this.emit(); 29816 } 29817 } else { 29818 this.startPointerDrag(event); 29819 } 29820 } 29821 startPointerDrag(event) { 29822 const state = this.state; 29823 state._active = true; 29824 state._preventScroll = true; 29825 state._delayed = false; 29826 this.compute(event); 29827 this.emit(); 29828 } 29829 pointerMove(event) { 29830 const state = this.state; 29831 const config = this.config; 29832 if (!state._pointerActive) return; 29833 const id = pointerId(event); 29834 if (state._pointerId !== undefined && id !== state._pointerId) return; 29835 const _values = pointerValues(event); 29836 if (document.pointerLockElement === event.target) { 29837 state._delta = [event.movementX, event.movementY]; 29838 } else { 29839 state._delta = V.sub(_values, state._values); 29840 this.computeValues(_values); 29841 } 29842 V.addTo(state._movement, state._delta); 29843 this.compute(event); 29844 if (state._delayed && state.intentional) { 29845 this.timeoutStore.remove('dragDelay'); 29846 state.active = false; 29847 this.startPointerDrag(event); 29848 return; 29849 } 29850 if (config.preventScrollAxis && !state._preventScroll) { 29851 if (state.axis) { 29852 if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') { 29853 state._active = false; 29854 this.clean(); 29855 return; 29856 } else { 29857 this.timeoutStore.remove('startPointerDrag'); 29858 this.startPointerDrag(event); 29859 return; 29860 } 29861 } else { 29862 return; 29863 } 29864 } 29865 this.emit(); 29866 } 29867 pointerUp(event) { 29868 this.ctrl.setEventIds(event); 29869 try { 29870 if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) { 29871 ; 29872 event.target.releasePointerCapture(event.pointerId); 29873 } 29874 } catch (_unused) { 29875 if (false) {} 29876 } 29877 const state = this.state; 29878 const config = this.config; 29879 if (!state._active || !state._pointerActive) return; 29880 const id = pointerId(event); 29881 if (state._pointerId !== undefined && id !== state._pointerId) return; 29882 this.state._pointerActive = false; 29883 this.setActive(); 29884 this.compute(event); 29885 const [dx, dy] = state._distance; 29886 state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold; 29887 if (state.tap && config.filterTaps) { 29888 state._force = true; 29889 } else { 29890 const [_dx, _dy] = state._delta; 29891 const [_mx, _my] = state._movement; 29892 const [svx, svy] = config.swipe.velocity; 29893 const [sx, sy] = config.swipe.distance; 29894 const sdt = config.swipe.duration; 29895 if (state.elapsedTime < sdt) { 29896 const _vx = Math.abs(_dx / state.timeDelta); 29897 const _vy = Math.abs(_dy / state.timeDelta); 29898 if (_vx > svx && Math.abs(_mx) > sx) state.swipe[0] = Math.sign(_dx); 29899 if (_vy > svy && Math.abs(_my) > sy) state.swipe[1] = Math.sign(_dy); 29900 } 29901 } 29902 this.emit(); 29903 } 29904 pointerClick(event) { 29905 if (!this.state.tap && event.detail > 0) { 29906 event.preventDefault(); 29907 event.stopPropagation(); 29908 } 29909 } 29910 setupPointer(event) { 29911 const config = this.config; 29912 const device = config.device; 29913 if (false) {} 29914 if (config.pointerLock) { 29915 event.currentTarget.requestPointerLock(); 29916 } 29917 if (!config.pointerCapture) { 29918 this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this)); 29919 this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this)); 29920 this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this)); 29921 } 29922 } 29923 pointerClean() { 29924 if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) { 29925 document.exitPointerLock(); 29926 } 29927 } 29928 preventScroll(event) { 29929 if (this.state._preventScroll && event.cancelable) { 29930 event.preventDefault(); 29931 } 29932 } 29933 setupScrollPrevention(event) { 29934 this.state._preventScroll = false; 29935 persistEvent(event); 29936 const remove = this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), { 29937 passive: false 29938 }); 29939 this.eventStore.add(this.sharedConfig.window, 'touch', 'end', remove); 29940 this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', remove); 29941 this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay, event); 29942 } 29943 setupDelayTrigger(event) { 29944 this.state._delayed = true; 29945 this.timeoutStore.add('dragDelay', () => { 29946 this.state._step = [0, 0]; 29947 this.startPointerDrag(event); 29948 }, this.config.delay); 29949 } 29950 keyDown(event) { 29951 const deltaFn = KEYS_DELTA_MAP[event.key]; 29952 if (deltaFn) { 29953 const state = this.state; 29954 const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1; 29955 this.start(event); 29956 state._delta = deltaFn(this.config.keyboardDisplacement, factor); 29957 state._keyboardActive = true; 29958 V.addTo(state._movement, state._delta); 29959 this.compute(event); 29960 this.emit(); 29961 } 29962 } 29963 keyUp(event) { 29964 if (!(event.key in KEYS_DELTA_MAP)) return; 29965 this.state._keyboardActive = false; 29966 this.setActive(); 29967 this.compute(event); 29968 this.emit(); 29969 } 29970 bind(bindFunction) { 29971 const device = this.config.device; 29972 bindFunction(device, 'start', this.pointerDown.bind(this)); 29973 if (this.config.pointerCapture) { 29974 bindFunction(device, 'change', this.pointerMove.bind(this)); 29975 bindFunction(device, 'end', this.pointerUp.bind(this)); 29976 bindFunction(device, 'cancel', this.pointerUp.bind(this)); 29977 bindFunction('lostPointerCapture', '', this.pointerUp.bind(this)); 29978 } 29979 if (this.config.keys) { 29980 bindFunction('key', 'down', this.keyDown.bind(this)); 29981 bindFunction('key', 'up', this.keyUp.bind(this)); 29982 } 29983 if (this.config.filterTaps) { 29984 bindFunction('click', '', this.pointerClick.bind(this), { 29985 capture: true, 29986 passive: false 29987 }); 29988 } 29989 } 29990 } 29991 function persistEvent(event) { 29992 'persist' in event && typeof event.persist === 'function' && event.persist(); 29993 } 29994 29995 const actions_fe213e88_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; 29996 function supportsTouchEvents() { 29997 return actions_fe213e88_esm_isBrowser && 'ontouchstart' in window; 29998 } 29999 function isTouchScreen() { 30000 return supportsTouchEvents() || actions_fe213e88_esm_isBrowser && window.navigator.maxTouchPoints > 1; 30001 } 30002 function supportsPointerEvents() { 30003 return actions_fe213e88_esm_isBrowser && 'onpointerdown' in window; 30004 } 30005 function supportsPointerLock() { 30006 return actions_fe213e88_esm_isBrowser && 'exitPointerLock' in window.document; 30007 } 30008 function supportsGestureEvents() { 30009 try { 30010 return 'constructor' in GestureEvent; 30011 } catch (e) { 30012 return false; 30013 } 30014 } 30015 const SUPPORT = { 30016 isBrowser: actions_fe213e88_esm_isBrowser, 30017 gesture: supportsGestureEvents(), 30018 touch: supportsTouchEvents(), 30019 touchscreen: isTouchScreen(), 30020 pointer: supportsPointerEvents(), 30021 pointerLock: supportsPointerLock() 30022 }; 30023 30024 const DEFAULT_PREVENT_SCROLL_DELAY = 250; 30025 const DEFAULT_DRAG_DELAY = 180; 30026 const DEFAULT_SWIPE_VELOCITY = 0.5; 30027 const DEFAULT_SWIPE_DISTANCE = 50; 30028 const DEFAULT_SWIPE_DURATION = 250; 30029 const DEFAULT_KEYBOARD_DISPLACEMENT = 10; 30030 const DEFAULT_DRAG_AXIS_THRESHOLD = { 30031 mouse: 0, 30032 touch: 0, 30033 pen: 8 30034 }; 30035 const dragConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, { 30036 device(_v, _k, { 30037 pointer: { 30038 touch = false, 30039 lock = false, 30040 mouse = false 30041 } = {} 30042 }) { 30043 this.pointerLock = lock && SUPPORT.pointerLock; 30044 if (SUPPORT.touch && touch) return 'touch'; 30045 if (this.pointerLock) return 'mouse'; 30046 if (SUPPORT.pointer && !mouse) return 'pointer'; 30047 if (SUPPORT.touch) return 'touch'; 30048 return 'mouse'; 30049 }, 30050 preventScrollAxis(value, _k, { 30051 preventScroll 30052 }) { 30053 this.preventScrollDelay = typeof preventScroll === 'number' ? preventScroll : preventScroll || preventScroll === undefined && value ? DEFAULT_PREVENT_SCROLL_DELAY : undefined; 30054 if (!SUPPORT.touchscreen || preventScroll === false) return undefined; 30055 return value ? value : preventScroll !== undefined ? 'y' : undefined; 30056 }, 30057 pointerCapture(_v, _k, { 30058 pointer: { 30059 capture = true, 30060 buttons = 1, 30061 keys = true 30062 } = {} 30063 }) { 30064 this.pointerButtons = buttons; 30065 this.keys = keys; 30066 return !this.pointerLock && this.device === 'pointer' && capture; 30067 }, 30068 threshold(value, _k, { 30069 filterTaps = false, 30070 tapsThreshold = 3, 30071 axis = undefined 30072 }) { 30073 const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0); 30074 this.filterTaps = filterTaps; 30075 this.tapsThreshold = tapsThreshold; 30076 return threshold; 30077 }, 30078 swipe({ 30079 velocity = DEFAULT_SWIPE_VELOCITY, 30080 distance = DEFAULT_SWIPE_DISTANCE, 30081 duration = DEFAULT_SWIPE_DURATION 30082 } = {}) { 30083 return { 30084 velocity: this.transform(V.toVector(velocity)), 30085 distance: this.transform(V.toVector(distance)), 30086 duration 30087 }; 30088 }, 30089 delay(value = 0) { 30090 switch (value) { 30091 case true: 30092 return DEFAULT_DRAG_DELAY; 30093 case false: 30094 return 0; 30095 default: 30096 return value; 30097 } 30098 }, 30099 axisThreshold(value) { 30100 if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD; 30101 return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value); 30102 }, 30103 keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) { 30104 return value; 30105 } 30106 }); 30107 if (false) {} 30108 30109 function clampStateInternalMovementToBounds(state) { 30110 const [ox, oy] = state.overflow; 30111 const [dx, dy] = state._delta; 30112 const [dirx, diry] = state._direction; 30113 if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) { 30114 state._movement[0] = state._movementBound[0]; 30115 } 30116 if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) { 30117 state._movement[1] = state._movementBound[1]; 30118 } 30119 } 30120 30121 const SCALE_ANGLE_RATIO_INTENT_DEG = 30; 30122 const PINCH_WHEEL_RATIO = 100; 30123 class PinchEngine extends Engine { 30124 constructor(...args) { 30125 super(...args); 30126 _defineProperty(this, "ingKey", 'pinching'); 30127 _defineProperty(this, "aliasKey", 'da'); 30128 } 30129 init() { 30130 this.state.offset = [1, 0]; 30131 this.state.lastOffset = [1, 0]; 30132 this.state._pointerEvents = new Map(); 30133 } 30134 reset() { 30135 super.reset(); 30136 const state = this.state; 30137 state._touchIds = []; 30138 state.canceled = false; 30139 state.cancel = this.cancel.bind(this); 30140 state.turns = 0; 30141 } 30142 computeOffset() { 30143 const { 30144 type, 30145 movement, 30146 lastOffset 30147 } = this.state; 30148 if (type === 'wheel') { 30149 this.state.offset = V.add(movement, lastOffset); 30150 } else { 30151 this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]]; 30152 } 30153 } 30154 computeMovement() { 30155 const { 30156 offset, 30157 lastOffset 30158 } = this.state; 30159 this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]]; 30160 } 30161 axisIntent() { 30162 const state = this.state; 30163 const [_m0, _m1] = state._movement; 30164 if (!state.axis) { 30165 const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1); 30166 if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale'; 30167 } 30168 } 30169 restrictToAxis(v) { 30170 if (this.config.lockDirection) { 30171 if (this.state.axis === 'scale') v[1] = 0;else if (this.state.axis === 'angle') v[0] = 0; 30172 } 30173 } 30174 cancel() { 30175 const state = this.state; 30176 if (state.canceled) return; 30177 setTimeout(() => { 30178 state.canceled = true; 30179 state._active = false; 30180 this.compute(); 30181 this.emit(); 30182 }, 0); 30183 } 30184 touchStart(event) { 30185 this.ctrl.setEventIds(event); 30186 const state = this.state; 30187 const ctrlTouchIds = this.ctrl.touchIds; 30188 if (state._active) { 30189 if (state._touchIds.every(id => ctrlTouchIds.has(id))) return; 30190 } 30191 if (ctrlTouchIds.size < 2) return; 30192 this.start(event); 30193 state._touchIds = Array.from(ctrlTouchIds).slice(0, 2); 30194 const payload = touchDistanceAngle(event, state._touchIds); 30195 if (!payload) return; 30196 this.pinchStart(event, payload); 30197 } 30198 pointerStart(event) { 30199 if (event.buttons != null && event.buttons % 2 !== 1) return; 30200 this.ctrl.setEventIds(event); 30201 event.target.setPointerCapture(event.pointerId); 30202 const state = this.state; 30203 const _pointerEvents = state._pointerEvents; 30204 const ctrlPointerIds = this.ctrl.pointerIds; 30205 if (state._active) { 30206 if (Array.from(_pointerEvents.keys()).every(id => ctrlPointerIds.has(id))) return; 30207 } 30208 if (_pointerEvents.size < 2) { 30209 _pointerEvents.set(event.pointerId, event); 30210 } 30211 if (state._pointerEvents.size < 2) return; 30212 this.start(event); 30213 const payload = distanceAngle(...Array.from(_pointerEvents.values())); 30214 if (!payload) return; 30215 this.pinchStart(event, payload); 30216 } 30217 pinchStart(event, payload) { 30218 const state = this.state; 30219 state.origin = payload.origin; 30220 this.computeValues([payload.distance, payload.angle]); 30221 this.computeInitial(); 30222 this.compute(event); 30223 this.emit(); 30224 } 30225 touchMove(event) { 30226 if (!this.state._active) return; 30227 const payload = touchDistanceAngle(event, this.state._touchIds); 30228 if (!payload) return; 30229 this.pinchMove(event, payload); 30230 } 30231 pointerMove(event) { 30232 const _pointerEvents = this.state._pointerEvents; 30233 if (_pointerEvents.has(event.pointerId)) { 30234 _pointerEvents.set(event.pointerId, event); 30235 } 30236 if (!this.state._active) return; 30237 const payload = distanceAngle(...Array.from(_pointerEvents.values())); 30238 if (!payload) return; 30239 this.pinchMove(event, payload); 30240 } 30241 pinchMove(event, payload) { 30242 const state = this.state; 30243 const prev_a = state._values[1]; 30244 const delta_a = payload.angle - prev_a; 30245 let delta_turns = 0; 30246 if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a); 30247 this.computeValues([payload.distance, payload.angle - 360 * delta_turns]); 30248 state.origin = payload.origin; 30249 state.turns = delta_turns; 30250 state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]]; 30251 this.compute(event); 30252 this.emit(); 30253 } 30254 touchEnd(event) { 30255 this.ctrl.setEventIds(event); 30256 if (!this.state._active) return; 30257 if (this.state._touchIds.some(id => !this.ctrl.touchIds.has(id))) { 30258 this.state._active = false; 30259 this.compute(event); 30260 this.emit(); 30261 } 30262 } 30263 pointerEnd(event) { 30264 const state = this.state; 30265 this.ctrl.setEventIds(event); 30266 try { 30267 event.target.releasePointerCapture(event.pointerId); 30268 } catch (_unused) {} 30269 if (state._pointerEvents.has(event.pointerId)) { 30270 state._pointerEvents.delete(event.pointerId); 30271 } 30272 if (!state._active) return; 30273 if (state._pointerEvents.size < 2) { 30274 state._active = false; 30275 this.compute(event); 30276 this.emit(); 30277 } 30278 } 30279 gestureStart(event) { 30280 if (event.cancelable) event.preventDefault(); 30281 const state = this.state; 30282 if (state._active) return; 30283 this.start(event); 30284 this.computeValues([event.scale, event.rotation]); 30285 state.origin = [event.clientX, event.clientY]; 30286 this.compute(event); 30287 this.emit(); 30288 } 30289 gestureMove(event) { 30290 if (event.cancelable) event.preventDefault(); 30291 if (!this.state._active) return; 30292 const state = this.state; 30293 this.computeValues([event.scale, event.rotation]); 30294 state.origin = [event.clientX, event.clientY]; 30295 const _previousMovement = state._movement; 30296 state._movement = [event.scale - 1, event.rotation]; 30297 state._delta = V.sub(state._movement, _previousMovement); 30298 this.compute(event); 30299 this.emit(); 30300 } 30301 gestureEnd(event) { 30302 if (!this.state._active) return; 30303 this.state._active = false; 30304 this.compute(event); 30305 this.emit(); 30306 } 30307 wheel(event) { 30308 const modifierKey = this.config.modifierKey; 30309 if (modifierKey && (Array.isArray(modifierKey) ? !modifierKey.find(k => event[k]) : !event[modifierKey])) return; 30310 if (!this.state._active) this.wheelStart(event);else this.wheelChange(event); 30311 this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); 30312 } 30313 wheelStart(event) { 30314 this.start(event); 30315 this.wheelChange(event); 30316 } 30317 wheelChange(event) { 30318 const isR3f = ('uv' in event); 30319 if (!isR3f) { 30320 if (event.cancelable) { 30321 event.preventDefault(); 30322 } 30323 if (false) {} 30324 } 30325 const state = this.state; 30326 state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0]; 30327 V.addTo(state._movement, state._delta); 30328 clampStateInternalMovementToBounds(state); 30329 this.state.origin = [event.clientX, event.clientY]; 30330 this.compute(event); 30331 this.emit(); 30332 } 30333 wheelEnd() { 30334 if (!this.state._active) return; 30335 this.state._active = false; 30336 this.compute(); 30337 this.emit(); 30338 } 30339 bind(bindFunction) { 30340 const device = this.config.device; 30341 if (!!device) { 30342 bindFunction(device, 'start', this[device + 'Start'].bind(this)); 30343 bindFunction(device, 'change', this[device + 'Move'].bind(this)); 30344 bindFunction(device, 'end', this[device + 'End'].bind(this)); 30345 bindFunction(device, 'cancel', this[device + 'End'].bind(this)); 30346 bindFunction('lostPointerCapture', '', this[device + 'End'].bind(this)); 30347 } 30348 if (this.config.pinchOnWheel) { 30349 bindFunction('wheel', '', this.wheel.bind(this), { 30350 passive: false 30351 }); 30352 } 30353 } 30354 } 30355 30356 const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, { 30357 device(_v, _k, { 30358 shared, 30359 pointer: { 30360 touch = false 30361 } = {} 30362 }) { 30363 const sharedConfig = shared; 30364 if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture'; 30365 if (SUPPORT.touch && touch) return 'touch'; 30366 if (SUPPORT.touchscreen) { 30367 if (SUPPORT.pointer) return 'pointer'; 30368 if (SUPPORT.touch) return 'touch'; 30369 } 30370 }, 30371 bounds(_v, _k, { 30372 scaleBounds = {}, 30373 angleBounds = {} 30374 }) { 30375 const _scaleBounds = state => { 30376 const D = assignDefault(call(scaleBounds, state), { 30377 min: -Infinity, 30378 max: Infinity 30379 }); 30380 return [D.min, D.max]; 30381 }; 30382 const _angleBounds = state => { 30383 const A = assignDefault(call(angleBounds, state), { 30384 min: -Infinity, 30385 max: Infinity 30386 }); 30387 return [A.min, A.max]; 30388 }; 30389 if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()]; 30390 return state => [_scaleBounds(state), _angleBounds(state)]; 30391 }, 30392 threshold(value, _k, config) { 30393 this.lockDirection = config.axis === 'lock'; 30394 const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0); 30395 return threshold; 30396 }, 30397 modifierKey(value) { 30398 if (value === undefined) return 'ctrlKey'; 30399 return value; 30400 }, 30401 pinchOnWheel(value = true) { 30402 return value; 30403 } 30404 }); 30405 30406 class MoveEngine extends CoordinatesEngine { 30407 constructor(...args) { 30408 super(...args); 30409 _defineProperty(this, "ingKey", 'moving'); 30410 } 30411 move(event) { 30412 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 30413 if (!this.state._active) this.moveStart(event);else this.moveChange(event); 30414 this.timeoutStore.add('moveEnd', this.moveEnd.bind(this)); 30415 } 30416 moveStart(event) { 30417 this.start(event); 30418 this.computeValues(pointerValues(event)); 30419 this.compute(event); 30420 this.computeInitial(); 30421 this.emit(); 30422 } 30423 moveChange(event) { 30424 if (!this.state._active) return; 30425 const values = pointerValues(event); 30426 const state = this.state; 30427 state._delta = V.sub(values, state._values); 30428 V.addTo(state._movement, state._delta); 30429 this.computeValues(values); 30430 this.compute(event); 30431 this.emit(); 30432 } 30433 moveEnd(event) { 30434 if (!this.state._active) return; 30435 this.state._active = false; 30436 this.compute(event); 30437 this.emit(); 30438 } 30439 bind(bindFunction) { 30440 bindFunction('pointer', 'change', this.move.bind(this)); 30441 bindFunction('pointer', 'leave', this.moveEnd.bind(this)); 30442 } 30443 } 30444 30445 const moveConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, { 30446 mouseOnly: (value = true) => value 30447 }); 30448 30449 class ScrollEngine extends CoordinatesEngine { 30450 constructor(...args) { 30451 super(...args); 30452 _defineProperty(this, "ingKey", 'scrolling'); 30453 } 30454 scroll(event) { 30455 if (!this.state._active) this.start(event); 30456 this.scrollChange(event); 30457 this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this)); 30458 } 30459 scrollChange(event) { 30460 if (event.cancelable) event.preventDefault(); 30461 const state = this.state; 30462 const values = scrollValues(event); 30463 state._delta = V.sub(values, state._values); 30464 V.addTo(state._movement, state._delta); 30465 this.computeValues(values); 30466 this.compute(event); 30467 this.emit(); 30468 } 30469 scrollEnd() { 30470 if (!this.state._active) return; 30471 this.state._active = false; 30472 this.compute(); 30473 this.emit(); 30474 } 30475 bind(bindFunction) { 30476 bindFunction('scroll', '', this.scroll.bind(this)); 30477 } 30478 } 30479 30480 const scrollConfigResolver = coordinatesConfigResolver; 30481 30482 class WheelEngine extends CoordinatesEngine { 30483 constructor(...args) { 30484 super(...args); 30485 _defineProperty(this, "ingKey", 'wheeling'); 30486 } 30487 wheel(event) { 30488 if (!this.state._active) this.start(event); 30489 this.wheelChange(event); 30490 this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); 30491 } 30492 wheelChange(event) { 30493 const state = this.state; 30494 state._delta = wheelValues(event); 30495 V.addTo(state._movement, state._delta); 30496 clampStateInternalMovementToBounds(state); 30497 this.compute(event); 30498 this.emit(); 30499 } 30500 wheelEnd() { 30501 if (!this.state._active) return; 30502 this.state._active = false; 30503 this.compute(); 30504 this.emit(); 30505 } 30506 bind(bindFunction) { 30507 bindFunction('wheel', '', this.wheel.bind(this)); 30508 } 30509 } 30510 30511 const wheelConfigResolver = coordinatesConfigResolver; 30512 30513 class HoverEngine extends CoordinatesEngine { 30514 constructor(...args) { 30515 super(...args); 30516 _defineProperty(this, "ingKey", 'hovering'); 30517 } 30518 enter(event) { 30519 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 30520 this.start(event); 30521 this.computeValues(pointerValues(event)); 30522 this.compute(event); 30523 this.emit(); 30524 } 30525 leave(event) { 30526 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 30527 const state = this.state; 30528 if (!state._active) return; 30529 state._active = false; 30530 const values = pointerValues(event); 30531 state._movement = state._delta = V.sub(values, state._values); 30532 this.computeValues(values); 30533 this.compute(event); 30534 state.delta = state.movement; 30535 this.emit(); 30536 } 30537 bind(bindFunction) { 30538 bindFunction('pointer', 'enter', this.enter.bind(this)); 30539 bindFunction('pointer', 'leave', this.leave.bind(this)); 30540 } 30541 } 30542 30543 const hoverConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, { 30544 mouseOnly: (value = true) => value 30545 }); 30546 30547 const actions_fe213e88_esm_EngineMap = new Map(); 30548 const ConfigResolverMap = new Map(); 30549 function actions_fe213e88_esm_registerAction(action) { 30550 actions_fe213e88_esm_EngineMap.set(action.key, action.engine); 30551 ConfigResolverMap.set(action.key, action.resolver); 30552 } 30553 const actions_fe213e88_esm_dragAction = { 30554 key: 'drag', 30555 engine: DragEngine, 30556 resolver: dragConfigResolver 30557 }; 30558 const actions_fe213e88_esm_hoverAction = { 30559 key: 'hover', 30560 engine: HoverEngine, 30561 resolver: hoverConfigResolver 30562 }; 30563 const actions_fe213e88_esm_moveAction = { 30564 key: 'move', 30565 engine: MoveEngine, 30566 resolver: moveConfigResolver 30567 }; 30568 const actions_fe213e88_esm_pinchAction = { 30569 key: 'pinch', 30570 engine: PinchEngine, 30571 resolver: pinchConfigResolver 30572 }; 30573 const actions_fe213e88_esm_scrollAction = { 30574 key: 'scroll', 30575 engine: ScrollEngine, 30576 resolver: scrollConfigResolver 30577 }; 30578 const actions_fe213e88_esm_wheelAction = { 30579 key: 'wheel', 30580 engine: WheelEngine, 30581 resolver: wheelConfigResolver 30582 }; 30583 30584 30585 30586 ;// ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js 30587 30588 30589 30590 function _objectWithoutPropertiesLoose(source, excluded) { 30591 if (source == null) return {}; 30592 var target = {}; 30593 var sourceKeys = Object.keys(source); 30594 var key, i; 30595 for (i = 0; i < sourceKeys.length; i++) { 30596 key = sourceKeys[i]; 30597 if (excluded.indexOf(key) >= 0) continue; 30598 target[key] = source[key]; 30599 } 30600 return target; 30601 } 30602 30603 function _objectWithoutProperties(source, excluded) { 30604 if (source == null) return {}; 30605 var target = _objectWithoutPropertiesLoose(source, excluded); 30606 var key, i; 30607 if (Object.getOwnPropertySymbols) { 30608 var sourceSymbolKeys = Object.getOwnPropertySymbols(source); 30609 for (i = 0; i < sourceSymbolKeys.length; i++) { 30610 key = sourceSymbolKeys[i]; 30611 if (excluded.indexOf(key) >= 0) continue; 30612 if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; 30613 target[key] = source[key]; 30614 } 30615 } 30616 return target; 30617 } 30618 30619 const sharedConfigResolver = { 30620 target(value) { 30621 if (value) { 30622 return () => 'current' in value ? value.current : value; 30623 } 30624 return undefined; 30625 }, 30626 enabled(value = true) { 30627 return value; 30628 }, 30629 window(value = SUPPORT.isBrowser ? window : undefined) { 30630 return value; 30631 }, 30632 eventOptions({ 30633 passive = true, 30634 capture = false 30635 } = {}) { 30636 return { 30637 passive, 30638 capture 30639 }; 30640 }, 30641 transform(value) { 30642 return value; 30643 } 30644 }; 30645 30646 const _excluded = ["target", "eventOptions", "window", "enabled", "transform"]; 30647 function resolveWith(config = {}, resolvers) { 30648 const result = {}; 30649 for (const [key, resolver] of Object.entries(resolvers)) { 30650 switch (typeof resolver) { 30651 case 'function': 30652 if (false) {} else { 30653 result[key] = resolver.call(result, config[key], key, config); 30654 } 30655 break; 30656 case 'object': 30657 result[key] = resolveWith(config[key], resolver); 30658 break; 30659 case 'boolean': 30660 if (resolver) result[key] = config[key]; 30661 break; 30662 } 30663 } 30664 return result; 30665 } 30666 function use_gesture_core_esm_parse(newConfig, gestureKey, _config = {}) { 30667 const _ref = newConfig, 30668 { 30669 target, 30670 eventOptions, 30671 window, 30672 enabled, 30673 transform 30674 } = _ref, 30675 rest = _objectWithoutProperties(_ref, _excluded); 30676 _config.shared = resolveWith({ 30677 target, 30678 eventOptions, 30679 window, 30680 enabled, 30681 transform 30682 }, sharedConfigResolver); 30683 if (gestureKey) { 30684 const resolver = ConfigResolverMap.get(gestureKey); 30685 _config[gestureKey] = resolveWith(_objectSpread2({ 30686 shared: _config.shared 30687 }, rest), resolver); 30688 } else { 30689 for (const key in rest) { 30690 const resolver = ConfigResolverMap.get(key); 30691 if (resolver) { 30692 _config[key] = resolveWith(_objectSpread2({ 30693 shared: _config.shared 30694 }, rest[key]), resolver); 30695 } else if (false) {} 30696 } 30697 } 30698 return _config; 30699 } 30700 30701 class EventStore { 30702 constructor(ctrl, gestureKey) { 30703 _defineProperty(this, "_listeners", new Set()); 30704 this._ctrl = ctrl; 30705 this._gestureKey = gestureKey; 30706 } 30707 add(element, device, action, handler, options) { 30708 const listeners = this._listeners; 30709 const type = toDomEventType(device, action); 30710 const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {}; 30711 const eventOptions = _objectSpread2(_objectSpread2({}, _options), options); 30712 element.addEventListener(type, handler, eventOptions); 30713 const remove = () => { 30714 element.removeEventListener(type, handler, eventOptions); 30715 listeners.delete(remove); 30716 }; 30717 listeners.add(remove); 30718 return remove; 30719 } 30720 clean() { 30721 this._listeners.forEach(remove => remove()); 30722 this._listeners.clear(); 30723 } 30724 } 30725 30726 class TimeoutStore { 30727 constructor() { 30728 _defineProperty(this, "_timeouts", new Map()); 30729 } 30730 add(key, callback, ms = 140, ...args) { 30731 this.remove(key); 30732 this._timeouts.set(key, window.setTimeout(callback, ms, ...args)); 30733 } 30734 remove(key) { 30735 const timeout = this._timeouts.get(key); 30736 if (timeout) window.clearTimeout(timeout); 30737 } 30738 clean() { 30739 this._timeouts.forEach(timeout => void window.clearTimeout(timeout)); 30740 this._timeouts.clear(); 30741 } 30742 } 30743 30744 class Controller { 30745 constructor(handlers) { 30746 _defineProperty(this, "gestures", new Set()); 30747 _defineProperty(this, "_targetEventStore", new EventStore(this)); 30748 _defineProperty(this, "gestureEventStores", {}); 30749 _defineProperty(this, "gestureTimeoutStores", {}); 30750 _defineProperty(this, "handlers", {}); 30751 _defineProperty(this, "config", {}); 30752 _defineProperty(this, "pointerIds", new Set()); 30753 _defineProperty(this, "touchIds", new Set()); 30754 _defineProperty(this, "state", { 30755 shared: { 30756 shiftKey: false, 30757 metaKey: false, 30758 ctrlKey: false, 30759 altKey: false 30760 } 30761 }); 30762 resolveGestures(this, handlers); 30763 } 30764 setEventIds(event) { 30765 if (isTouch(event)) { 30766 this.touchIds = new Set(touchIds(event)); 30767 return this.touchIds; 30768 } else if ('pointerId' in event) { 30769 if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId);else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId); 30770 return this.pointerIds; 30771 } 30772 } 30773 applyHandlers(handlers, nativeHandlers) { 30774 this.handlers = handlers; 30775 this.nativeHandlers = nativeHandlers; 30776 } 30777 applyConfig(config, gestureKey) { 30778 this.config = use_gesture_core_esm_parse(config, gestureKey, this.config); 30779 } 30780 clean() { 30781 this._targetEventStore.clean(); 30782 for (const key of this.gestures) { 30783 this.gestureEventStores[key].clean(); 30784 this.gestureTimeoutStores[key].clean(); 30785 } 30786 } 30787 effect() { 30788 if (this.config.shared.target) this.bind(); 30789 return () => this._targetEventStore.clean(); 30790 } 30791 bind(...args) { 30792 const sharedConfig = this.config.shared; 30793 const props = {}; 30794 let target; 30795 if (sharedConfig.target) { 30796 target = sharedConfig.target(); 30797 if (!target) return; 30798 } 30799 if (sharedConfig.enabled) { 30800 for (const gestureKey of this.gestures) { 30801 const gestureConfig = this.config[gestureKey]; 30802 const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target); 30803 if (gestureConfig.enabled) { 30804 const Engine = actions_fe213e88_esm_EngineMap.get(gestureKey); 30805 new Engine(this, args, gestureKey).bind(bindFunction); 30806 } 30807 } 30808 const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target); 30809 for (const eventKey in this.nativeHandlers) { 30810 nativeBindFunction(eventKey, '', event => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, { 30811 event, 30812 args 30813 })), undefined, true); 30814 } 30815 } 30816 for (const handlerProp in props) { 30817 props[handlerProp] = actions_fe213e88_esm_chain(...props[handlerProp]); 30818 } 30819 if (!target) return props; 30820 for (const handlerProp in props) { 30821 const { 30822 device, 30823 capture, 30824 passive 30825 } = parseProp(handlerProp); 30826 this._targetEventStore.add(target, device, '', props[handlerProp], { 30827 capture, 30828 passive 30829 }); 30830 } 30831 } 30832 } 30833 function setupGesture(ctrl, gestureKey) { 30834 ctrl.gestures.add(gestureKey); 30835 ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey); 30836 ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore(); 30837 } 30838 function resolveGestures(ctrl, internalHandlers) { 30839 if (internalHandlers.drag) setupGesture(ctrl, 'drag'); 30840 if (internalHandlers.wheel) setupGesture(ctrl, 'wheel'); 30841 if (internalHandlers.scroll) setupGesture(ctrl, 'scroll'); 30842 if (internalHandlers.move) setupGesture(ctrl, 'move'); 30843 if (internalHandlers.pinch) setupGesture(ctrl, 'pinch'); 30844 if (internalHandlers.hover) setupGesture(ctrl, 'hover'); 30845 } 30846 const bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => { 30847 var _options$capture, _options$passive; 30848 const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture; 30849 const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive; 30850 let handlerProp = isNative ? device : toHandlerProp(device, action, capture); 30851 if (withPassiveOption && passive) handlerProp += 'Passive'; 30852 props[handlerProp] = props[handlerProp] || []; 30853 props[handlerProp].push(handler); 30854 }; 30855 30856 const RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/; 30857 function sortHandlers(_handlers) { 30858 const native = {}; 30859 const handlers = {}; 30860 const actions = new Set(); 30861 for (let key in _handlers) { 30862 if (RE_NOT_NATIVE.test(key)) { 30863 actions.add(RegExp.lastMatch); 30864 handlers[key] = _handlers[key]; 30865 } else { 30866 native[key] = _handlers[key]; 30867 } 30868 } 30869 return [handlers, native, actions]; 30870 } 30871 function registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) { 30872 if (!actions.has(handlerKey)) return; 30873 if (!EngineMap.has(key)) { 30874 if (false) {} 30875 return; 30876 } 30877 const startKey = handlerKey + 'Start'; 30878 const endKey = handlerKey + 'End'; 30879 const fn = state => { 30880 let memo = undefined; 30881 if (state.first && startKey in handlers) handlers[startKey](state); 30882 if (handlerKey in handlers) memo = handlers[handlerKey](state); 30883 if (state.last && endKey in handlers) handlers[endKey](state); 30884 return memo; 30885 }; 30886 internalHandlers[key] = fn; 30887 config[key] = config[key] || {}; 30888 } 30889 function use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) { 30890 const [handlers, nativeHandlers, actions] = sortHandlers(mergedHandlers); 30891 const internalHandlers = {}; 30892 registerGesture(actions, handlers, 'onDrag', 'drag', internalHandlers, mergedConfig); 30893 registerGesture(actions, handlers, 'onWheel', 'wheel', internalHandlers, mergedConfig); 30894 registerGesture(actions, handlers, 'onScroll', 'scroll', internalHandlers, mergedConfig); 30895 registerGesture(actions, handlers, 'onPinch', 'pinch', internalHandlers, mergedConfig); 30896 registerGesture(actions, handlers, 'onMove', 'move', internalHandlers, mergedConfig); 30897 registerGesture(actions, handlers, 'onHover', 'hover', internalHandlers, mergedConfig); 30898 return { 30899 handlers: internalHandlers, 30900 config: mergedConfig, 30901 nativeHandlers 30902 }; 30903 } 30904 30905 30906 30907 ;// ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js 30908 30909 30910 30911 30912 30913 30914 30915 function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) { 30916 const ctrl = external_React_default().useMemo(() => new Controller(handlers), []); 30917 ctrl.applyHandlers(handlers, nativeHandlers); 30918 ctrl.applyConfig(config, gestureKey); 30919 external_React_default().useEffect(ctrl.effect.bind(ctrl)); 30920 external_React_default().useEffect(() => { 30921 return ctrl.clean.bind(ctrl); 30922 }, []); 30923 if (config.target === undefined) { 30924 return ctrl.bind.bind(ctrl); 30925 } 30926 return undefined; 30927 } 30928 30929 function useDrag(handler, config) { 30930 actions_fe213e88_esm_registerAction(actions_fe213e88_esm_dragAction); 30931 return useRecognizers({ 30932 drag: handler 30933 }, config || {}, 'drag'); 30934 } 30935 30936 function usePinch(handler, config) { 30937 registerAction(pinchAction); 30938 return useRecognizers({ 30939 pinch: handler 30940 }, config || {}, 'pinch'); 30941 } 30942 30943 function useWheel(handler, config) { 30944 registerAction(wheelAction); 30945 return useRecognizers({ 30946 wheel: handler 30947 }, config || {}, 'wheel'); 30948 } 30949 30950 function useScroll(handler, config) { 30951 registerAction(scrollAction); 30952 return useRecognizers({ 30953 scroll: handler 30954 }, config || {}, 'scroll'); 30955 } 30956 30957 function useMove(handler, config) { 30958 registerAction(moveAction); 30959 return useRecognizers({ 30960 move: handler 30961 }, config || {}, 'move'); 30962 } 30963 30964 function useHover(handler, config) { 30965 registerAction(hoverAction); 30966 return useRecognizers({ 30967 hover: handler 30968 }, config || {}, 'hover'); 30969 } 30970 30971 function createUseGesture(actions) { 30972 actions.forEach(registerAction); 30973 return function useGesture(_handlers, _config) { 30974 const { 30975 handlers, 30976 nativeHandlers, 30977 config 30978 } = parseMergedHandlers(_handlers, _config || {}); 30979 return useRecognizers(handlers, config, undefined, nativeHandlers); 30980 }; 30981 } 30982 30983 function useGesture(handlers, config) { 30984 const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]); 30985 return hook(handlers, config || {}); 30986 } 30987 30988 30989 30990 ;// ./node_modules/@wordpress/components/build-module/input-control/utils.js 30991 /** 30992 * External dependencies 30993 */ 30994 30995 /** 30996 * WordPress dependencies 30997 */ 30998 30999 31000 /** 31001 * Internal dependencies 31002 */ 31003 31004 /** 31005 * Gets a CSS cursor value based on a drag direction. 31006 * 31007 * @param dragDirection The drag direction. 31008 * @return The CSS cursor value. 31009 */ 31010 function getDragCursor(dragDirection) { 31011 let dragCursor = 'ns-resize'; 31012 switch (dragDirection) { 31013 case 'n': 31014 case 's': 31015 dragCursor = 'ns-resize'; 31016 break; 31017 case 'e': 31018 case 'w': 31019 dragCursor = 'ew-resize'; 31020 break; 31021 } 31022 return dragCursor; 31023 } 31024 31025 /** 31026 * Custom hook that renders a drag cursor when dragging. 31027 * 31028 * @param {boolean} isDragging The dragging state. 31029 * @param {string} dragDirection The drag direction. 31030 * 31031 * @return {string} The CSS cursor value. 31032 */ 31033 function useDragCursor(isDragging, dragDirection) { 31034 const dragCursor = getDragCursor(dragDirection); 31035 (0,external_wp_element_namespaceObject.useEffect)(() => { 31036 if (isDragging) { 31037 document.documentElement.style.cursor = dragCursor; 31038 } else { 31039 // @ts-expect-error 31040 document.documentElement.style.cursor = null; 31041 } 31042 }, [isDragging, dragCursor]); 31043 return dragCursor; 31044 } 31045 function useDraft(props) { 31046 const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(props.value); 31047 const [draft, setDraft] = (0,external_wp_element_namespaceObject.useState)({}); 31048 const value = draft.value !== undefined ? draft.value : props.value; 31049 31050 // Determines when to discard the draft value to restore controlled status. 31051 // To do so, it tracks the previous value and marks the draft value as stale 31052 // after each render. 31053 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 31054 const { 31055 current: previousValue 31056 } = previousValueRef; 31057 previousValueRef.current = props.value; 31058 if (draft.value !== undefined && !draft.isStale) { 31059 setDraft({ 31060 ...draft, 31061 isStale: true 31062 }); 31063 } else if (draft.isStale && props.value !== previousValue) { 31064 setDraft({}); 31065 } 31066 }, [props.value, draft]); 31067 const onChange = (nextValue, extra) => { 31068 // Mutates the draft value to avoid an extra effect run. 31069 setDraft(current => Object.assign(current, { 31070 value: nextValue, 31071 isStale: false 31072 })); 31073 props.onChange(nextValue, extra); 31074 }; 31075 const onBlur = event => { 31076 setDraft({}); 31077 props.onBlur?.(event); 31078 }; 31079 return { 31080 value, 31081 onBlur, 31082 onChange 31083 }; 31084 } 31085 31086 ;// ./node_modules/@wordpress/components/build-module/input-control/reducer/state.js 31087 /** 31088 * External dependencies 31089 */ 31090 31091 /** 31092 * Internal dependencies 31093 */ 31094 31095 const initialStateReducer = state => state; 31096 const initialInputControlState = { 31097 error: null, 31098 initialValue: '', 31099 isDirty: false, 31100 isDragEnabled: false, 31101 isDragging: false, 31102 isPressEnterToChange: false, 31103 value: '' 31104 }; 31105 31106 ;// ./node_modules/@wordpress/components/build-module/input-control/reducer/actions.js 31107 /** 31108 * External dependencies 31109 */ 31110 31111 /** 31112 * Internal dependencies 31113 */ 31114 31115 const CHANGE = 'CHANGE'; 31116 const COMMIT = 'COMMIT'; 31117 const CONTROL = 'CONTROL'; 31118 const DRAG_END = 'DRAG_END'; 31119 const DRAG_START = 'DRAG_START'; 31120 const DRAG = 'DRAG'; 31121 const INVALIDATE = 'INVALIDATE'; 31122 const PRESS_DOWN = 'PRESS_DOWN'; 31123 const PRESS_ENTER = 'PRESS_ENTER'; 31124 const PRESS_UP = 'PRESS_UP'; 31125 const RESET = 'RESET'; 31126 31127 ;// ./node_modules/@wordpress/components/build-module/input-control/reducer/reducer.js 31128 /** 31129 * External dependencies 31130 */ 31131 31132 /** 31133 * WordPress dependencies 31134 */ 31135 31136 31137 /** 31138 * Internal dependencies 31139 */ 31140 31141 31142 31143 /** 31144 * Prepares initialState for the reducer. 31145 * 31146 * @param initialState The initial state. 31147 * @return Prepared initialState for the reducer 31148 */ 31149 function mergeInitialState(initialState = initialInputControlState) { 31150 const { 31151 value 31152 } = initialState; 31153 return { 31154 ...initialInputControlState, 31155 ...initialState, 31156 initialValue: value 31157 }; 31158 } 31159 31160 /** 31161 * Creates the base reducer which may be coupled to a specializing reducer. 31162 * As its final step, for all actions other than CONTROL, the base reducer 31163 * passes the state and action on through the specializing reducer. The 31164 * exception for CONTROL actions is because they represent controlled updates 31165 * from props and no case has yet presented for their specialization. 31166 * 31167 * @param composedStateReducers A reducer to specialize state changes. 31168 * @return The reducer. 31169 */ 31170 function inputControlStateReducer(composedStateReducers) { 31171 return (state, action) => { 31172 const nextState = { 31173 ...state 31174 }; 31175 switch (action.type) { 31176 /* 31177 * Controlled updates 31178 */ 31179 case CONTROL: 31180 nextState.value = action.payload.value; 31181 nextState.isDirty = false; 31182 nextState._event = undefined; 31183 // Returns immediately to avoid invoking additional reducers. 31184 return nextState; 31185 31186 /** 31187 * Keyboard events 31188 */ 31189 case PRESS_UP: 31190 nextState.isDirty = false; 31191 break; 31192 case PRESS_DOWN: 31193 nextState.isDirty = false; 31194 break; 31195 31196 /** 31197 * Drag events 31198 */ 31199 case DRAG_START: 31200 nextState.isDragging = true; 31201 break; 31202 case DRAG_END: 31203 nextState.isDragging = false; 31204 break; 31205 31206 /** 31207 * Input events 31208 */ 31209 case CHANGE: 31210 nextState.error = null; 31211 nextState.value = action.payload.value; 31212 if (state.isPressEnterToChange) { 31213 nextState.isDirty = true; 31214 } 31215 break; 31216 case COMMIT: 31217 nextState.value = action.payload.value; 31218 nextState.isDirty = false; 31219 break; 31220 case RESET: 31221 nextState.error = null; 31222 nextState.isDirty = false; 31223 nextState.value = action.payload.value || state.initialValue; 31224 break; 31225 31226 /** 31227 * Validation 31228 */ 31229 case INVALIDATE: 31230 nextState.error = action.payload.error; 31231 break; 31232 } 31233 nextState._event = action.payload.event; 31234 31235 /** 31236 * Send the nextState + action to the composedReducers via 31237 * this "bridge" mechanism. This allows external stateReducers 31238 * to hook into actions, and modify state if needed. 31239 */ 31240 return composedStateReducers(nextState, action); 31241 }; 31242 } 31243 31244 /** 31245 * A custom hook that connects and external stateReducer with an internal 31246 * reducer. This hook manages the internal state of InputControl. 31247 * However, by connecting an external stateReducer function, other 31248 * components can react to actions as well as modify state before it is 31249 * applied. 31250 * 31251 * This technique uses the "stateReducer" design pattern: 31252 * https://kentcdodds.com/blog/the-state-reducer-pattern/ 31253 * 31254 * @param stateReducer An external state reducer. 31255 * @param initialState The initial state for the reducer. 31256 * @param onChangeHandler A handler for the onChange event. 31257 * @return State, dispatch, and a collection of actions. 31258 */ 31259 function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) { 31260 const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState)); 31261 const createChangeEvent = type => (nextValue, event) => { 31262 dispatch({ 31263 type, 31264 payload: { 31265 value: nextValue, 31266 event 31267 } 31268 }); 31269 }; 31270 const createKeyEvent = type => event => { 31271 dispatch({ 31272 type, 31273 payload: { 31274 event 31275 } 31276 }); 31277 }; 31278 const createDragEvent = type => payload => { 31279 dispatch({ 31280 type, 31281 payload 31282 }); 31283 }; 31284 31285 /** 31286 * Actions for the reducer 31287 */ 31288 const change = createChangeEvent(CHANGE); 31289 const invalidate = (error, event) => dispatch({ 31290 type: INVALIDATE, 31291 payload: { 31292 error, 31293 event 31294 } 31295 }); 31296 const reset = createChangeEvent(RESET); 31297 const commit = createChangeEvent(COMMIT); 31298 const dragStart = createDragEvent(DRAG_START); 31299 const drag = createDragEvent(DRAG); 31300 const dragEnd = createDragEvent(DRAG_END); 31301 const pressUp = createKeyEvent(PRESS_UP); 31302 const pressDown = createKeyEvent(PRESS_DOWN); 31303 const pressEnter = createKeyEvent(PRESS_ENTER); 31304 const currentStateRef = (0,external_wp_element_namespaceObject.useRef)(state); 31305 const refPropsRef = (0,external_wp_element_namespaceObject.useRef)({ 31306 value: initialState.value, 31307 onChangeHandler 31308 }); 31309 31310 // Freshens refs to props and state so that subsequent effects have access 31311 // to their latest values without their changes causing effect runs. 31312 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 31313 currentStateRef.current = state; 31314 refPropsRef.current = { 31315 value: initialState.value, 31316 onChangeHandler 31317 }; 31318 }); 31319 31320 // Propagates the latest state through onChange. 31321 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 31322 if (currentStateRef.current._event !== undefined && state.value !== refPropsRef.current.value && !state.isDirty) { 31323 var _state$value; 31324 refPropsRef.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', { 31325 event: currentStateRef.current._event 31326 }); 31327 } 31328 }, [state.value, state.isDirty]); 31329 31330 // Updates the state from props. 31331 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 31332 if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) { 31333 var _initialState$value; 31334 dispatch({ 31335 type: CONTROL, 31336 payload: { 31337 value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : '' 31338 } 31339 }); 31340 } 31341 }, [initialState.value]); 31342 return { 31343 change, 31344 commit, 31345 dispatch, 31346 drag, 31347 dragEnd, 31348 dragStart, 31349 invalidate, 31350 pressDown, 31351 pressEnter, 31352 pressUp, 31353 reset, 31354 state 31355 }; 31356 } 31357 31358 ;// ./node_modules/@wordpress/components/build-module/utils/with-ignore-ime-events.js 31359 /** 31360 * A higher-order function that wraps a keydown event handler to ensure it is not an IME event. 31361 * 31362 * In CJK languages, an IME (Input Method Editor) is used to input complex characters. 31363 * During an IME composition, keydown events (e.g. Enter or Escape) can be fired 31364 * which are intended to control the IME and not the application. 31365 * These events should be ignored by any application logic. 31366 * 31367 * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event. 31368 * 31369 * @return A wrapped version of the given event handler that ignores IME events. 31370 */ 31371 function withIgnoreIMEEvents(keydownHandler) { 31372 return event => { 31373 const { 31374 isComposing 31375 } = 'nativeEvent' in event ? event.nativeEvent : event; 31376 if (isComposing || 31377 // Workaround for Mac Safari where the final Enter/Backspace of an IME composition 31378 // is `isComposing=false`, even though it's technically still part of the composition. 31379 // These can only be detected by keyCode. 31380 event.keyCode === 229) { 31381 return; 31382 } 31383 keydownHandler(event); 31384 }; 31385 } 31386 31387 ;// ./node_modules/@wordpress/components/build-module/input-control/input-field.js 31388 /** 31389 * External dependencies 31390 */ 31391 31392 /** 31393 * WordPress dependencies 31394 */ 31395 31396 /** 31397 * Internal dependencies 31398 */ 31399 31400 31401 31402 31403 31404 31405 const input_field_noop = () => {}; 31406 function InputField({ 31407 disabled = false, 31408 dragDirection = 'n', 31409 dragThreshold = 10, 31410 id, 31411 isDragEnabled = false, 31412 isPressEnterToChange = false, 31413 onBlur = input_field_noop, 31414 onChange = input_field_noop, 31415 onDrag = input_field_noop, 31416 onDragEnd = input_field_noop, 31417 onDragStart = input_field_noop, 31418 onKeyDown = input_field_noop, 31419 onValidate = input_field_noop, 31420 size = 'default', 31421 stateReducer = state => state, 31422 value: valueProp, 31423 type, 31424 ...props 31425 }, ref) { 31426 const { 31427 // State. 31428 state, 31429 // Actions. 31430 change, 31431 commit, 31432 drag, 31433 dragEnd, 31434 dragStart, 31435 invalidate, 31436 pressDown, 31437 pressEnter, 31438 pressUp, 31439 reset 31440 } = useInputControlStateReducer(stateReducer, { 31441 isDragEnabled, 31442 value: valueProp, 31443 isPressEnterToChange 31444 }, onChange); 31445 const { 31446 value, 31447 isDragging, 31448 isDirty 31449 } = state; 31450 const wasDirtyOnBlur = (0,external_wp_element_namespaceObject.useRef)(false); 31451 const dragCursor = useDragCursor(isDragging, dragDirection); 31452 const handleOnBlur = event => { 31453 onBlur(event); 31454 31455 /** 31456 * If isPressEnterToChange is set, this commits the value to 31457 * the onChange callback. 31458 */ 31459 if (isDirty || !event.target.validity.valid) { 31460 wasDirtyOnBlur.current = true; 31461 handleOnCommit(event); 31462 } 31463 }; 31464 const handleOnChange = event => { 31465 const nextValue = event.target.value; 31466 change(nextValue, event); 31467 }; 31468 const handleOnCommit = event => { 31469 const nextValue = event.currentTarget.value; 31470 try { 31471 onValidate(nextValue); 31472 commit(nextValue, event); 31473 } catch (err) { 31474 invalidate(err, event); 31475 } 31476 }; 31477 const handleOnKeyDown = event => { 31478 const { 31479 key 31480 } = event; 31481 onKeyDown(event); 31482 switch (key) { 31483 case 'ArrowUp': 31484 pressUp(event); 31485 break; 31486 case 'ArrowDown': 31487 pressDown(event); 31488 break; 31489 case 'Enter': 31490 pressEnter(event); 31491 if (isPressEnterToChange) { 31492 event.preventDefault(); 31493 handleOnCommit(event); 31494 } 31495 break; 31496 case 'Escape': 31497 if (isPressEnterToChange && isDirty) { 31498 event.preventDefault(); 31499 reset(valueProp, event); 31500 } 31501 break; 31502 } 31503 }; 31504 const dragGestureProps = useDrag(dragProps => { 31505 const { 31506 distance, 31507 dragging, 31508 event, 31509 target 31510 } = dragProps; 31511 31512 // The `target` prop always references the `input` element while, by 31513 // default, the `dragProps.event.target` property would reference the real 31514 // event target (i.e. any DOM element that the pointer is hovering while 31515 // dragging). Ensuring that the `target` is always the `input` element 31516 // allows consumers of `InputControl` (or any higher-level control) to 31517 // check the input's validity by accessing `event.target.validity.valid`. 31518 dragProps.event = { 31519 ...dragProps.event, 31520 target 31521 }; 31522 if (!distance) { 31523 return; 31524 } 31525 event.stopPropagation(); 31526 31527 /** 31528 * Quick return if no longer dragging. 31529 * This prevents unnecessary value calculations. 31530 */ 31531 if (!dragging) { 31532 onDragEnd(dragProps); 31533 dragEnd(dragProps); 31534 return; 31535 } 31536 onDrag(dragProps); 31537 drag(dragProps); 31538 if (!isDragging) { 31539 onDragStart(dragProps); 31540 dragStart(dragProps); 31541 } 31542 }, { 31543 axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y', 31544 threshold: dragThreshold, 31545 enabled: isDragEnabled, 31546 pointer: { 31547 capture: false 31548 } 31549 }); 31550 const dragProps = isDragEnabled ? dragGestureProps() : {}; 31551 /* 31552 * Works around the odd UA (e.g. Firefox) that does not focus inputs of 31553 * type=number when their spinner arrows are pressed. 31554 */ 31555 let handleOnMouseDown; 31556 if (type === 'number') { 31557 handleOnMouseDown = event => { 31558 props.onMouseDown?.(event); 31559 if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) { 31560 event.currentTarget.focus(); 31561 } 31562 }; 31563 } 31564 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Input, { 31565 ...props, 31566 ...dragProps, 31567 className: "components-input-control__input", 31568 disabled: disabled, 31569 dragCursor: dragCursor, 31570 isDragging: isDragging, 31571 id: id, 31572 onBlur: handleOnBlur, 31573 onChange: handleOnChange, 31574 onKeyDown: withIgnoreIMEEvents(handleOnKeyDown), 31575 onMouseDown: handleOnMouseDown, 31576 ref: ref, 31577 inputSize: size 31578 // Fallback to `''` to avoid "uncontrolled to controlled" warning. 31579 // See https://github.com/WordPress/gutenberg/pull/47250 for details. 31580 , 31581 value: value !== null && value !== void 0 ? value : '', 31582 type: type 31583 }); 31584 } 31585 const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField); 31586 /* harmony default export */ const input_field = (ForwardedComponent); 31587 31588 ;// ./node_modules/@wordpress/components/build-module/utils/font-values.js 31589 /* harmony default export */ const font_values = ({ 31590 'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", 31591 'default.fontSize': '13px', 31592 'helpText.fontSize': '12px', 31593 mobileTextMinFontSize: '16px' 31594 }); 31595 31596 ;// ./node_modules/@wordpress/components/build-module/utils/font.js 31597 /** 31598 * Internal dependencies 31599 */ 31600 31601 31602 /** 31603 * 31604 * @param {keyof FONT} value Path of value from `FONT` 31605 * @return {string} Font rule value 31606 */ 31607 function font(value) { 31608 var _FONT$value; 31609 return (_FONT$value = font_values[value]) !== null && _FONT$value !== void 0 ? _FONT$value : ''; 31610 } 31611 31612 ;// ./node_modules/@wordpress/components/build-module/utils/box-sizing.js 31613 function box_sizing_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 31614 /** 31615 * External dependencies 31616 */ 31617 31618 const boxSizingReset = true ? { 31619 name: "kv6lnz", 31620 styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}" 31621 } : 0; 31622 31623 ;// ./node_modules/@wordpress/components/build-module/base-control/styles/base-control-styles.js 31624 31625 function base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 31626 /** 31627 * External dependencies 31628 */ 31629 31630 31631 31632 /** 31633 * Internal dependencies 31634 */ 31635 31636 31637 const Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 31638 target: "ej5x27r4" 31639 } : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + ( true ? "" : 0)); 31640 const deprecatedMarginField = ({ 31641 __nextHasNoMarginBottom = false 31642 }) => { 31643 return !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0), true ? "" : 0); 31644 }; 31645 const StyledField = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 31646 target: "ej5x27r3" 31647 } : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0)); 31648 const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0), true ? "" : 0); 31649 const StyledLabel = /*#__PURE__*/emotion_styled_base_browser_esm("label", true ? { 31650 target: "ej5x27r2" 31651 } : 0)(labelStyles, ";" + ( true ? "" : 0)); 31652 var base_control_styles_ref = true ? { 31653 name: "11yad0w", 31654 styles: "margin-bottom:revert" 31655 } : 0; 31656 const deprecatedMarginHelp = ({ 31657 __nextHasNoMarginBottom = false 31658 }) => { 31659 return !__nextHasNoMarginBottom && base_control_styles_ref; 31660 }; 31661 const StyledHelp = /*#__PURE__*/emotion_styled_base_browser_esm("p", true ? { 31662 target: "ej5x27r1" 31663 } : 0)("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.gray[700], ";", deprecatedMarginHelp, ";" + ( true ? "" : 0)); 31664 const StyledVisualLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 31665 target: "ej5x27r0" 31666 } : 0)(labelStyles, ";" + ( true ? "" : 0)); 31667 31668 ;// ./node_modules/@wordpress/components/build-module/base-control/index.js 31669 /** 31670 * External dependencies 31671 */ 31672 31673 /** 31674 * WordPress dependencies 31675 */ 31676 31677 31678 31679 /** 31680 * Internal dependencies 31681 */ 31682 31683 31684 31685 31686 31687 const UnconnectedBaseControl = props => { 31688 const { 31689 __nextHasNoMarginBottom = false, 31690 __associatedWPComponentName = 'BaseControl', 31691 id, 31692 label, 31693 hideLabelFromVision = false, 31694 help, 31695 className, 31696 children 31697 } = useContextSystem(props, 'BaseControl'); 31698 if (!__nextHasNoMarginBottom) { 31699 external_wp_deprecated_default()(`Bottom margin styles for wp.components.$__associatedWPComponentName}`, { 31700 since: '6.7', 31701 version: '7.0', 31702 hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.' 31703 }); 31704 } 31705 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, { 31706 className: className, 31707 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledField, { 31708 className: "components-base-control__field" 31709 // TODO: Official deprecation for this should start after all internal usages have been migrated 31710 , 31711 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 31712 children: [label && id && (hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 31713 as: "label", 31714 htmlFor: id, 31715 children: label 31716 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { 31717 className: "components-base-control__label", 31718 htmlFor: id, 31719 children: label 31720 })), label && !id && (hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 31721 as: "label", 31722 children: label 31723 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(VisualLabel, { 31724 children: label 31725 })), children] 31726 }), !!help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, { 31727 id: id ? id + '__help' : undefined, 31728 className: "components-base-control__help", 31729 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 31730 children: help 31731 })] 31732 }); 31733 }; 31734 const UnforwardedVisualLabel = (props, ref) => { 31735 const { 31736 className, 31737 children, 31738 ...restProps 31739 } = props; 31740 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledVisualLabel, { 31741 ref: ref, 31742 ...restProps, 31743 className: dist_clsx('components-base-control__label', className), 31744 children: children 31745 }); 31746 }; 31747 const VisualLabel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedVisualLabel); 31748 31749 /** 31750 * `BaseControl` is a component used to generate labels and help text for components handling user inputs. 31751 * 31752 * ```jsx 31753 * import { BaseControl, useBaseControlProps } from '@wordpress/components'; 31754 * 31755 * // Render a `BaseControl` for a textarea input 31756 * const MyCustomTextareaControl = ({ children, ...baseProps }) => ( 31757 * // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl` 31758 * // and the inner control itself. Namely, it takes care of generating a unique `id`, 31759 * // properly associating it with the `label` and `help` elements. 31760 * const { baseControlProps, controlProps } = useBaseControlProps( baseProps ); 31761 * 31762 * return ( 31763 * <BaseControl { ...baseControlProps } __nextHasNoMarginBottom> 31764 * <textarea { ...controlProps }> 31765 * { children } 31766 * </textarea> 31767 * </BaseControl> 31768 * ); 31769 * ); 31770 * ``` 31771 */ 31772 const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseControl, 'BaseControl'), { 31773 /** 31774 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component. 31775 * 31776 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled, 31777 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would 31778 * otherwise use if the `label` prop was passed. 31779 * 31780 * ```jsx 31781 * import { BaseControl } from '@wordpress/components'; 31782 * 31783 * const MyBaseControl = () => ( 31784 * <BaseControl 31785 * __nextHasNoMarginBottom 31786 * help="This button is already accessibly labeled." 31787 * > 31788 * <BaseControl.VisualLabel>Author</BaseControl.VisualLabel> 31789 * <Button>Select an author</Button> 31790 * </BaseControl> 31791 * ); 31792 * ``` 31793 */ 31794 VisualLabel 31795 }); 31796 /* harmony default export */ const base_control = (BaseControl); 31797 31798 ;// ./node_modules/@wordpress/components/build-module/utils/deprecated-36px-size.js 31799 /** 31800 * WordPress dependencies 31801 */ 31802 31803 function maybeWarnDeprecated36pxSize({ 31804 componentName, 31805 __next40pxDefaultSize, 31806 size, 31807 __shouldNotWarnDeprecated36pxSize 31808 }) { 31809 if (__shouldNotWarnDeprecated36pxSize || __next40pxDefaultSize || size !== undefined && size !== 'default') { 31810 return; 31811 } 31812 external_wp_deprecated_default()(`36px default size for wp.components.$componentName}`, { 31813 since: '6.8', 31814 version: '7.1', 31815 hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.' 31816 }); 31817 } 31818 31819 ;// ./node_modules/@wordpress/components/build-module/input-control/index.js 31820 /** 31821 * External dependencies 31822 */ 31823 31824 /** 31825 * WordPress dependencies 31826 */ 31827 31828 31829 31830 /** 31831 * Internal dependencies 31832 */ 31833 31834 31835 31836 31837 31838 31839 31840 31841 const input_control_noop = () => {}; 31842 function input_control_useUniqueId(idProp) { 31843 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputControl); 31844 const id = `inspector-input-control-$instanceId}`; 31845 return idProp || id; 31846 } 31847 function UnforwardedInputControl(props, ref) { 31848 const { 31849 __next40pxDefaultSize, 31850 __shouldNotWarnDeprecated36pxSize, 31851 __unstableStateReducer: stateReducer = state => state, 31852 __unstableInputWidth, 31853 className, 31854 disabled = false, 31855 help, 31856 hideLabelFromVision = false, 31857 id: idProp, 31858 isPressEnterToChange = false, 31859 label, 31860 labelPosition = 'top', 31861 onChange = input_control_noop, 31862 onValidate = input_control_noop, 31863 onKeyDown = input_control_noop, 31864 prefix, 31865 size = 'default', 31866 style, 31867 suffix, 31868 value, 31869 ...restProps 31870 } = useDeprecated36pxDefaultSizeProp(props); 31871 const id = input_control_useUniqueId(idProp); 31872 const classes = dist_clsx('components-input-control', className); 31873 const draftHookProps = useDraft({ 31874 value, 31875 onBlur: restProps.onBlur, 31876 onChange 31877 }); 31878 const helpProp = !!help ? { 31879 'aria-describedby': `$id}__help` 31880 } : {}; 31881 maybeWarnDeprecated36pxSize({ 31882 componentName: 'InputControl', 31883 __next40pxDefaultSize, 31884 size, 31885 __shouldNotWarnDeprecated36pxSize 31886 }); 31887 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 31888 className: classes, 31889 help: help, 31890 id: id, 31891 __nextHasNoMarginBottom: true, 31892 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_base, { 31893 __next40pxDefaultSize: __next40pxDefaultSize, 31894 __unstableInputWidth: __unstableInputWidth, 31895 disabled: disabled, 31896 gap: 3, 31897 hideLabelFromVision: hideLabelFromVision, 31898 id: id, 31899 justify: "left", 31900 label: label, 31901 labelPosition: labelPosition, 31902 prefix: prefix, 31903 size: size, 31904 style: style, 31905 suffix: suffix, 31906 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_field, { 31907 ...restProps, 31908 ...helpProp, 31909 __next40pxDefaultSize: __next40pxDefaultSize, 31910 className: "components-input-control__input", 31911 disabled: disabled, 31912 id: id, 31913 isPressEnterToChange: isPressEnterToChange, 31914 onKeyDown: onKeyDown, 31915 onValidate: onValidate, 31916 paddingInlineStart: prefix ? space(1) : undefined, 31917 paddingInlineEnd: suffix ? space(1) : undefined, 31918 ref: ref, 31919 size: size, 31920 stateReducer: stateReducer, 31921 ...draftHookProps 31922 }) 31923 }) 31924 }); 31925 } 31926 31927 /** 31928 * InputControl components let users enter and edit text. This is an experimental component 31929 * intended to (in time) merge with or replace `TextControl`. 31930 * 31931 * ```jsx 31932 * import { __experimentalInputControl as InputControl } from '@wordpress/components'; 31933 * import { useState } from 'react'; 31934 * 31935 * const Example = () => { 31936 * const [ value, setValue ] = useState( '' ); 31937 * 31938 * return ( 31939 * <InputControl 31940 * __next40pxDefaultSize 31941 * value={ value } 31942 * onChange={ ( nextValue ) => setValue( nextValue ?? '' ) } 31943 * /> 31944 * ); 31945 * }; 31946 * ``` 31947 */ 31948 const InputControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedInputControl); 31949 /* harmony default export */ const input_control = (InputControl); 31950 31951 ;// ./node_modules/@wordpress/components/build-module/dashicon/index.js 31952 31953 /** 31954 * @typedef OwnProps 31955 * 31956 * @property {import('./types').IconKey} icon Icon name 31957 * @property {string} [className] Class name 31958 * @property {number} [size] Size of the icon 31959 */ 31960 31961 /** 31962 * Internal dependencies 31963 */ 31964 31965 function Dashicon({ 31966 icon, 31967 className, 31968 size = 20, 31969 style = {}, 31970 ...extraProps 31971 }) { 31972 const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' '); 31973 31974 // For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default 31975 const sizeStyles = 31976 // using `!=` to catch both 20 and "20" 31977 // eslint-disable-next-line eqeqeq 31978 20 != size ? { 31979 fontSize: `$size}px`, 31980 width: `$size}px`, 31981 height: `$size}px` 31982 } : {}; 31983 const styles = { 31984 ...sizeStyles, 31985 ...style 31986 }; 31987 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 31988 className: iconClass, 31989 style: styles, 31990 ...extraProps 31991 }); 31992 } 31993 /* harmony default export */ const dashicon = (Dashicon); 31994 31995 ;// ./node_modules/@wordpress/components/build-module/icon/index.js 31996 /** 31997 * External dependencies 31998 */ 31999 32000 /** 32001 * WordPress dependencies 32002 */ 32003 32004 32005 32006 /** 32007 * Internal dependencies 32008 */ 32009 32010 32011 /** 32012 * Renders a raw icon without any initial styling or wrappers. 32013 * 32014 * ```jsx 32015 * import { wordpress } from '@wordpress/icons'; 32016 * 32017 * <Icon icon={ wordpress } /> 32018 * ``` 32019 */ 32020 function Icon({ 32021 icon = null, 32022 size = 'string' === typeof icon ? 20 : 24, 32023 ...additionalProps 32024 }) { 32025 if ('string' === typeof icon) { 32026 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dashicon, { 32027 icon: icon, 32028 size: size, 32029 ...additionalProps 32030 }); 32031 } 32032 if ((0,external_wp_element_namespaceObject.isValidElement)(icon) && dashicon === icon.type) { 32033 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 32034 ...additionalProps 32035 }); 32036 } 32037 if ('function' === typeof icon) { 32038 return (0,external_wp_element_namespaceObject.createElement)(icon, { 32039 size, 32040 ...additionalProps 32041 }); 32042 } 32043 if (icon && (icon.type === 'svg' || icon.type === external_wp_primitives_namespaceObject.SVG)) { 32044 const appliedProps = { 32045 ...icon.props, 32046 width: size, 32047 height: size, 32048 ...additionalProps 32049 }; 32050 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 32051 ...appliedProps 32052 }); 32053 } 32054 if ((0,external_wp_element_namespaceObject.isValidElement)(icon)) { 32055 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 32056 // @ts-ignore Just forwarding the size prop along 32057 size, 32058 ...additionalProps 32059 }); 32060 } 32061 return icon; 32062 } 32063 /* harmony default export */ const build_module_icon = (Icon); 32064 32065 ;// ./node_modules/@wordpress/components/build-module/button/index.js 32066 /** 32067 * External dependencies 32068 */ 32069 32070 /** 32071 * WordPress dependencies 32072 */ 32073 32074 32075 32076 32077 /** 32078 * Internal dependencies 32079 */ 32080 32081 32082 32083 32084 32085 const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick']; 32086 function button_useDeprecatedProps({ 32087 __experimentalIsFocusable, 32088 isDefault, 32089 isPrimary, 32090 isSecondary, 32091 isTertiary, 32092 isLink, 32093 isPressed, 32094 isSmall, 32095 size, 32096 variant, 32097 describedBy, 32098 ...otherProps 32099 }) { 32100 let computedSize = size; 32101 let computedVariant = variant; 32102 const newProps = { 32103 accessibleWhenDisabled: __experimentalIsFocusable, 32104 // @todo Mark `isPressed` as deprecated 32105 'aria-pressed': isPressed, 32106 description: describedBy 32107 }; 32108 if (isSmall) { 32109 var _computedSize; 32110 (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small'; 32111 } 32112 if (isPrimary) { 32113 var _computedVariant; 32114 (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary'; 32115 } 32116 if (isTertiary) { 32117 var _computedVariant2; 32118 (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary'; 32119 } 32120 if (isSecondary) { 32121 var _computedVariant3; 32122 (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary'; 32123 } 32124 if (isDefault) { 32125 var _computedVariant4; 32126 external_wp_deprecated_default()('wp.components.Button `isDefault` prop', { 32127 since: '5.4', 32128 alternative: 'variant="secondary"' 32129 }); 32130 (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary'; 32131 } 32132 if (isLink) { 32133 var _computedVariant5; 32134 (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link'; 32135 } 32136 return { 32137 ...newProps, 32138 ...otherProps, 32139 size: computedSize, 32140 variant: computedVariant 32141 }; 32142 } 32143 function UnforwardedButton(props, ref) { 32144 const { 32145 __next40pxDefaultSize, 32146 accessibleWhenDisabled, 32147 isBusy, 32148 isDestructive, 32149 className, 32150 disabled, 32151 icon, 32152 iconPosition = 'left', 32153 iconSize, 32154 showTooltip, 32155 tooltipPosition, 32156 shortcut, 32157 label, 32158 children, 32159 size = 'default', 32160 text, 32161 variant, 32162 description, 32163 ...buttonOrAnchorProps 32164 } = button_useDeprecatedProps(props); 32165 const { 32166 href, 32167 target, 32168 'aria-checked': ariaChecked, 32169 'aria-pressed': ariaPressed, 32170 'aria-selected': ariaSelected, 32171 ...additionalProps 32172 } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : { 32173 href: undefined, 32174 target: undefined, 32175 ...buttonOrAnchorProps 32176 }; 32177 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Button, 'components-button__description'); 32178 const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null && 32179 // Tooltip should not considered as a child 32180 children?.[0]?.props?.className !== 'components-tooltip'; 32181 const truthyAriaPressedValues = [true, 'true', 'mixed']; 32182 const classes = dist_clsx('components-button', className, { 32183 'is-next-40px-default-size': __next40pxDefaultSize, 32184 'is-secondary': variant === 'secondary', 32185 'is-primary': variant === 'primary', 32186 'is-small': size === 'small', 32187 'is-compact': size === 'compact', 32188 'is-tertiary': variant === 'tertiary', 32189 'is-pressed': truthyAriaPressedValues.includes(ariaPressed), 32190 'is-pressed-mixed': ariaPressed === 'mixed', 32191 'is-busy': isBusy, 32192 'is-link': variant === 'link', 32193 'is-destructive': isDestructive, 32194 'has-text': !!icon && (hasChildren || text), 32195 'has-icon': !!icon 32196 }); 32197 const trulyDisabled = disabled && !accessibleWhenDisabled; 32198 const Tag = href !== undefined && !disabled ? 'a' : 'button'; 32199 const buttonProps = Tag === 'button' ? { 32200 type: 'button', 32201 disabled: trulyDisabled, 32202 'aria-checked': ariaChecked, 32203 'aria-pressed': ariaPressed, 32204 'aria-selected': ariaSelected 32205 } : {}; 32206 const anchorProps = Tag === 'a' ? { 32207 href, 32208 target 32209 } : {}; 32210 const disableEventProps = {}; 32211 if (disabled && accessibleWhenDisabled) { 32212 // In this case, the button will be disabled, but still focusable and 32213 // perceivable by screen reader users. 32214 buttonProps['aria-disabled'] = true; 32215 anchorProps['aria-disabled'] = true; 32216 for (const disabledEvent of disabledEventsOnDisabledButton) { 32217 disableEventProps[disabledEvent] = event => { 32218 if (event) { 32219 event.stopPropagation(); 32220 event.preventDefault(); 32221 } 32222 }; 32223 } 32224 } 32225 32226 // Should show the tooltip if... 32227 const shouldShowTooltip = !trulyDisabled && ( 32228 // An explicit tooltip is passed or... 32229 showTooltip && !!label || 32230 // There's a shortcut or... 32231 !!shortcut || 32232 // There's a label and... 32233 !!label && 32234 // The children are empty and... 32235 !children?.length && 32236 // The tooltip is not explicitly disabled. 32237 false !== showTooltip); 32238 const descriptionId = description ? instanceId : undefined; 32239 const describedById = additionalProps['aria-describedby'] || descriptionId; 32240 const commonProps = { 32241 className: classes, 32242 'aria-label': additionalProps['aria-label'] || label, 32243 'aria-describedby': describedById, 32244 ref 32245 }; 32246 const elementChildren = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 32247 children: [icon && iconPosition === 'left' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 32248 icon: icon, 32249 size: iconSize 32250 }), text && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 32251 children: text 32252 }), children, icon && iconPosition === 'right' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 32253 icon: icon, 32254 size: iconSize 32255 })] 32256 }); 32257 const element = Tag === 'a' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("a", { 32258 ...anchorProps, 32259 ...additionalProps, 32260 ...disableEventProps, 32261 ...commonProps, 32262 children: elementChildren 32263 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { 32264 ...buttonProps, 32265 ...additionalProps, 32266 ...disableEventProps, 32267 ...commonProps, 32268 children: elementChildren 32269 }); 32270 32271 // In order to avoid some React reconciliation issues, we are always rendering 32272 // the `Tooltip` component even when `shouldShowTooltip` is `false`. 32273 // In order to make sure that the tooltip doesn't show when it shouldn't, 32274 // we don't pass the props to the `Tooltip` component. 32275 const tooltipProps = shouldShowTooltip ? { 32276 text: children?.length && description ? description : label, 32277 shortcut, 32278 placement: tooltipPosition && 32279 // Convert legacy `position` values to be used with the new `placement` prop 32280 positionToPlacement(tooltipPosition) 32281 } : {}; 32282 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 32283 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { 32284 ...tooltipProps, 32285 children: element 32286 }), description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 32287 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 32288 id: descriptionId, 32289 children: description 32290 }) 32291 })] 32292 }); 32293 } 32294 32295 /** 32296 * Lets users take actions and make choices with a single click or tap. 32297 * 32298 * ```jsx 32299 * import { Button } from '@wordpress/components'; 32300 * const Mybutton = () => ( 32301 * <Button 32302 * variant="primary" 32303 * onClick={ handleClick } 32304 * > 32305 * Click here 32306 * </Button> 32307 * ); 32308 * ``` 32309 */ 32310 const Button = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButton); 32311 /* harmony default export */ const build_module_button = (Button); 32312 32313 ;// ./node_modules/@wordpress/components/build-module/number-control/styles/number-control-styles.js 32314 32315 function number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 32316 /** 32317 * External dependencies 32318 */ 32319 32320 /** 32321 * Internal dependencies 32322 */ 32323 32324 32325 32326 32327 var number_control_styles_ref = true ? { 32328 name: "euqsgg", 32329 styles: "input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}input[type='number']{-moz-appearance:textfield;}" 32330 } : 0; 32331 const htmlArrowStyles = ({ 32332 hideHTMLArrows 32333 }) => { 32334 if (!hideHTMLArrows) { 32335 return ``; 32336 } 32337 return number_control_styles_ref; 32338 }; 32339 const number_control_styles_Input = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 32340 target: "ep09it41" 32341 } : 0)(htmlArrowStyles, ";" + ( true ? "" : 0)); 32342 const SpinButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 32343 target: "ep09it40" 32344 } : 0)("&&&&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0)); 32345 const smallSpinButtons = /*#__PURE__*/emotion_react_browser_esm_css("width:", space(5), ";min-width:", space(5), ";height:", space(5), ";" + ( true ? "" : 0), true ? "" : 0); 32346 const styles = { 32347 smallSpinButtons 32348 }; 32349 32350 ;// ./node_modules/@wordpress/components/build-module/utils/math.js 32351 /** 32352 * Parses and retrieves a number value. 32353 * 32354 * @param {unknown} value The incoming value. 32355 * 32356 * @return {number} The parsed number value. 32357 */ 32358 function getNumber(value) { 32359 const number = Number(value); 32360 return isNaN(number) ? 0 : number; 32361 } 32362 32363 /** 32364 * Safely adds 2 values. 32365 * 32366 * @param {Array<number|string>} args Values to add together. 32367 * 32368 * @return {number} The sum of values. 32369 */ 32370 function add(...args) { 32371 return args.reduce(/** @type {(sum:number, arg: number|string) => number} */ 32372 (sum, arg) => sum + getNumber(arg), 0); 32373 } 32374 32375 /** 32376 * Safely subtracts 2 values. 32377 * 32378 * @param {Array<number|string>} args Values to subtract together. 32379 * 32380 * @return {number} The difference of the values. 32381 */ 32382 function subtract(...args) { 32383 return args.reduce(/** @type {(diff:number, arg: number|string, index:number) => number} */ 32384 (diff, arg, index) => { 32385 const value = getNumber(arg); 32386 return index === 0 ? value : diff - value; 32387 }, 0); 32388 } 32389 32390 /** 32391 * Determines the decimal position of a number value. 32392 * 32393 * @param {number} value The number to evaluate. 32394 * 32395 * @return {number} The number of decimal places. 32396 */ 32397 function getPrecision(value) { 32398 const split = (value + '').split('.'); 32399 return split[1] !== undefined ? split[1].length : 0; 32400 } 32401 32402 /** 32403 * Clamps a value based on a min/max range. 32404 * 32405 * @param {number} value The value. 32406 * @param {number} min The minimum range. 32407 * @param {number} max The maximum range. 32408 * 32409 * @return {number} The clamped value. 32410 */ 32411 function math_clamp(value, min, max) { 32412 const baseValue = getNumber(value); 32413 return Math.max(min, Math.min(baseValue, max)); 32414 } 32415 32416 /** 32417 * Clamps a value based on a min/max range with rounding 32418 * 32419 * @param {number | string} value The value. 32420 * @param {number} min The minimum range. 32421 * @param {number} max The maximum range. 32422 * @param {number} step A multiplier for the value. 32423 * 32424 * @return {number} The rounded and clamped value. 32425 */ 32426 function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) { 32427 const baseValue = getNumber(value); 32428 const stepValue = getNumber(step); 32429 const precision = getPrecision(step); 32430 const rounded = Math.round(baseValue / stepValue) * stepValue; 32431 const clampedValue = math_clamp(rounded, min, max); 32432 return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue; 32433 } 32434 32435 ;// ./node_modules/@wordpress/components/build-module/h-stack/utils.js 32436 /** 32437 * External dependencies 32438 */ 32439 32440 /** 32441 * Internal dependencies 32442 */ 32443 32444 32445 const H_ALIGNMENTS = { 32446 bottom: { 32447 align: 'flex-end', 32448 justify: 'center' 32449 }, 32450 bottomLeft: { 32451 align: 'flex-end', 32452 justify: 'flex-start' 32453 }, 32454 bottomRight: { 32455 align: 'flex-end', 32456 justify: 'flex-end' 32457 }, 32458 center: { 32459 align: 'center', 32460 justify: 'center' 32461 }, 32462 edge: { 32463 align: 'center', 32464 justify: 'space-between' 32465 }, 32466 left: { 32467 align: 'center', 32468 justify: 'flex-start' 32469 }, 32470 right: { 32471 align: 'center', 32472 justify: 'flex-end' 32473 }, 32474 stretch: { 32475 align: 'stretch' 32476 }, 32477 top: { 32478 align: 'flex-start', 32479 justify: 'center' 32480 }, 32481 topLeft: { 32482 align: 'flex-start', 32483 justify: 'flex-start' 32484 }, 32485 topRight: { 32486 align: 'flex-start', 32487 justify: 'flex-end' 32488 } 32489 }; 32490 const V_ALIGNMENTS = { 32491 bottom: { 32492 justify: 'flex-end', 32493 align: 'center' 32494 }, 32495 bottomLeft: { 32496 justify: 'flex-end', 32497 align: 'flex-start' 32498 }, 32499 bottomRight: { 32500 justify: 'flex-end', 32501 align: 'flex-end' 32502 }, 32503 center: { 32504 justify: 'center', 32505 align: 'center' 32506 }, 32507 edge: { 32508 justify: 'space-between', 32509 align: 'center' 32510 }, 32511 left: { 32512 justify: 'center', 32513 align: 'flex-start' 32514 }, 32515 right: { 32516 justify: 'center', 32517 align: 'flex-end' 32518 }, 32519 stretch: { 32520 align: 'stretch' 32521 }, 32522 top: { 32523 justify: 'flex-start', 32524 align: 'center' 32525 }, 32526 topLeft: { 32527 justify: 'flex-start', 32528 align: 'flex-start' 32529 }, 32530 topRight: { 32531 justify: 'flex-start', 32532 align: 'flex-end' 32533 } 32534 }; 32535 function getAlignmentProps(alignment, direction = 'row') { 32536 if (!isValueDefined(alignment)) { 32537 return {}; 32538 } 32539 const isVertical = direction === 'column'; 32540 const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS; 32541 const alignmentProps = alignment in props ? props[alignment] : { 32542 align: alignment 32543 }; 32544 return alignmentProps; 32545 } 32546 32547 ;// ./node_modules/@wordpress/components/build-module/utils/get-valid-children.js 32548 /** 32549 * External dependencies 32550 */ 32551 32552 /** 32553 * WordPress dependencies 32554 */ 32555 32556 32557 /** 32558 * Gets a collection of available children elements from a React component's children prop. 32559 * 32560 * @param children 32561 * 32562 * @return An array of available children. 32563 */ 32564 function getValidChildren(children) { 32565 if (typeof children === 'string') { 32566 return [children]; 32567 } 32568 return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child)); 32569 } 32570 32571 ;// ./node_modules/@wordpress/components/build-module/h-stack/hook.js 32572 /** 32573 * External dependencies 32574 */ 32575 32576 /** 32577 * Internal dependencies 32578 */ 32579 32580 32581 32582 32583 32584 32585 function useHStack(props) { 32586 const { 32587 alignment = 'edge', 32588 children, 32589 direction, 32590 spacing = 2, 32591 ...otherProps 32592 } = useContextSystem(props, 'HStack'); 32593 const align = getAlignmentProps(alignment, direction); 32594 const validChildren = getValidChildren(children); 32595 const clonedChildren = validChildren.map((child, index) => { 32596 const _isSpacer = hasConnectNamespace(child, ['Spacer']); 32597 if (_isSpacer) { 32598 const childElement = child; 32599 const _key = childElement.key || `hstack-$index}`; 32600 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 32601 isBlock: true, 32602 ...childElement.props 32603 }, _key); 32604 } 32605 return child; 32606 }); 32607 const propsForFlex = { 32608 children: clonedChildren, 32609 direction, 32610 justify: 'center', 32611 ...align, 32612 ...otherProps, 32613 gap: spacing 32614 }; 32615 32616 // Omit `isColumn` because it's not used in HStack. 32617 const { 32618 isColumn, 32619 ...flexProps 32620 } = useFlex(propsForFlex); 32621 return flexProps; 32622 } 32623 32624 ;// ./node_modules/@wordpress/components/build-module/h-stack/component.js 32625 /** 32626 * Internal dependencies 32627 */ 32628 32629 32630 32631 32632 32633 function UnconnectedHStack(props, forwardedRef) { 32634 const hStackProps = useHStack(props); 32635 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 32636 ...hStackProps, 32637 ref: forwardedRef 32638 }); 32639 } 32640 32641 /** 32642 * `HStack` (Horizontal Stack) arranges child elements in a horizontal line. 32643 * 32644 * `HStack` can render anything inside. 32645 * 32646 * ```jsx 32647 * import { 32648 * __experimentalHStack as HStack, 32649 * __experimentalText as Text, 32650 * } from `@wordpress/components`; 32651 * 32652 * function Example() { 32653 * return ( 32654 * <HStack> 32655 * <Text>Code</Text> 32656 * <Text>is</Text> 32657 * <Text>Poetry</Text> 32658 * </HStack> 32659 * ); 32660 * } 32661 * ``` 32662 */ 32663 const HStack = contextConnect(UnconnectedHStack, 'HStack'); 32664 /* harmony default export */ const h_stack_component = (HStack); 32665 32666 ;// ./node_modules/@wordpress/components/build-module/number-control/index.js 32667 /** 32668 * External dependencies 32669 */ 32670 32671 /** 32672 * WordPress dependencies 32673 */ 32674 32675 32676 32677 32678 32679 32680 /** 32681 * Internal dependencies 32682 */ 32683 32684 32685 32686 32687 32688 32689 32690 32691 32692 32693 const number_control_noop = () => {}; 32694 function UnforwardedNumberControl(props, forwardedRef) { 32695 const { 32696 __unstableStateReducer: stateReducerProp, 32697 className, 32698 dragDirection = 'n', 32699 hideHTMLArrows = false, 32700 spinControls = hideHTMLArrows ? 'none' : 'native', 32701 isDragEnabled = true, 32702 isShiftStepEnabled = true, 32703 label, 32704 max = Infinity, 32705 min = -Infinity, 32706 required = false, 32707 shiftStep = 10, 32708 step = 1, 32709 spinFactor = 1, 32710 type: typeProp = 'number', 32711 value: valueProp, 32712 size = 'default', 32713 suffix, 32714 onChange = number_control_noop, 32715 __shouldNotWarnDeprecated36pxSize, 32716 ...restProps 32717 } = useDeprecated36pxDefaultSizeProp(props); 32718 maybeWarnDeprecated36pxSize({ 32719 componentName: 'NumberControl', 32720 size, 32721 __next40pxDefaultSize: restProps.__next40pxDefaultSize, 32722 __shouldNotWarnDeprecated36pxSize 32723 }); 32724 if (hideHTMLArrows) { 32725 external_wp_deprecated_default()('wp.components.NumberControl hideHTMLArrows prop ', { 32726 alternative: 'spinControls="none"', 32727 since: '6.2', 32728 version: '6.3' 32729 }); 32730 } 32731 const inputRef = (0,external_wp_element_namespaceObject.useRef)(); 32732 const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]); 32733 const isStepAny = step === 'any'; 32734 const baseStep = isStepAny ? 1 : ensureNumber(step); 32735 const baseSpin = ensureNumber(spinFactor) * baseStep; 32736 const baseValue = roundClamp(0, min, max, baseStep); 32737 const constrainValue = (value, stepOverride) => { 32738 // When step is "any" clamp the value, otherwise round and clamp it. 32739 // Use '' + to convert to string for use in input value attribute. 32740 return isStepAny ? '' + Math.min(max, Math.max(min, ensureNumber(value))) : '' + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep); 32741 }; 32742 const autoComplete = typeProp === 'number' ? 'off' : undefined; 32743 const classes = dist_clsx('components-number-control', className); 32744 const cx = useCx(); 32745 const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons); 32746 const spinValue = (value, direction, event) => { 32747 event?.preventDefault(); 32748 const shift = event?.shiftKey && isShiftStepEnabled; 32749 const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin; 32750 let nextValue = isValueEmpty(value) ? baseValue : value; 32751 if (direction === 'up') { 32752 nextValue = add(nextValue, delta); 32753 } else if (direction === 'down') { 32754 nextValue = subtract(nextValue, delta); 32755 } 32756 return constrainValue(nextValue, shift ? delta : undefined); 32757 }; 32758 32759 /** 32760 * "Middleware" function that intercepts updates from InputControl. 32761 * This allows us to tap into actions to transform the (next) state for 32762 * InputControl. 32763 * 32764 * @return The updated state to apply to InputControl 32765 */ 32766 const numberControlStateReducer = (state, action) => { 32767 const nextState = { 32768 ...state 32769 }; 32770 const { 32771 type, 32772 payload 32773 } = action; 32774 const event = payload.event; 32775 const currentValue = nextState.value; 32776 32777 /** 32778 * Handles custom UP and DOWN Keyboard events 32779 */ 32780 if (type === PRESS_UP || type === PRESS_DOWN) { 32781 nextState.value = spinValue(currentValue, type === PRESS_UP ? 'up' : 'down', event); 32782 } 32783 32784 /** 32785 * Handles drag to update events 32786 */ 32787 if (type === DRAG && isDragEnabled) { 32788 const [x, y] = payload.delta; 32789 const enableShift = payload.shiftKey && isShiftStepEnabled; 32790 const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin; 32791 let directionModifier; 32792 let delta; 32793 switch (dragDirection) { 32794 case 'n': 32795 delta = y; 32796 directionModifier = -1; 32797 break; 32798 case 'e': 32799 delta = x; 32800 directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1; 32801 break; 32802 case 's': 32803 delta = y; 32804 directionModifier = 1; 32805 break; 32806 case 'w': 32807 delta = x; 32808 directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1; 32809 break; 32810 } 32811 if (delta !== 0) { 32812 delta = Math.ceil(Math.abs(delta)) * Math.sign(delta); 32813 const distance = delta * modifier * directionModifier; 32814 nextState.value = constrainValue( 32815 // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined 32816 add(currentValue, distance), enableShift ? modifier : undefined); 32817 } 32818 } 32819 32820 /** 32821 * Handles commit (ENTER key press or blur) 32822 */ 32823 if (type === PRESS_ENTER || type === COMMIT) { 32824 const applyEmptyValue = required === false && currentValue === ''; 32825 nextState.value = applyEmptyValue ? currentValue : 32826 // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined 32827 constrainValue(currentValue); 32828 } 32829 return nextState; 32830 }; 32831 const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), { 32832 // Set event.target to the <input> so that consumers can use 32833 // e.g. event.target.validity. 32834 event: { 32835 ...event, 32836 target: inputRef.current 32837 } 32838 }); 32839 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(number_control_styles_Input, { 32840 autoComplete: autoComplete, 32841 inputMode: "numeric", 32842 ...restProps, 32843 className: classes, 32844 dragDirection: dragDirection, 32845 hideHTMLArrows: spinControls !== 'native', 32846 isDragEnabled: isDragEnabled, 32847 label: label, 32848 max: max === Infinity ? undefined : max, 32849 min: min === -Infinity ? undefined : min, 32850 ref: mergedRef, 32851 required: required, 32852 step: step, 32853 type: typeProp 32854 // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components 32855 , 32856 value: valueProp, 32857 __unstableStateReducer: (state, action) => { 32858 var _stateReducerProp; 32859 const baseState = numberControlStateReducer(state, action); 32860 return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState; 32861 }, 32862 size: size, 32863 __shouldNotWarnDeprecated36pxSize: true, 32864 suffix: spinControls === 'custom' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 32865 children: [suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 32866 marginBottom: 0, 32867 marginRight: 2, 32868 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 32869 spacing: 1, 32870 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinButton, { 32871 className: spinButtonClasses, 32872 icon: library_plus, 32873 size: "small", 32874 label: (0,external_wp_i18n_namespaceObject.__)('Increment'), 32875 onClick: buildSpinButtonClickHandler('up') 32876 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinButton, { 32877 className: spinButtonClasses, 32878 icon: library_reset, 32879 size: "small", 32880 label: (0,external_wp_i18n_namespaceObject.__)('Decrement'), 32881 onClick: buildSpinButtonClickHandler('down') 32882 })] 32883 }) 32884 })] 32885 }) : suffix, 32886 onChange: onChange 32887 }); 32888 } 32889 const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl); 32890 /* harmony default export */ const number_control = (NumberControl); 32891 32892 ;// ./node_modules/@wordpress/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js 32893 32894 function angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 32895 /** 32896 * External dependencies 32897 */ 32898 32899 /** 32900 * Internal dependencies 32901 */ 32902 32903 32904 32905 32906 const CIRCLE_SIZE = 32; 32907 const INNER_CIRCLE_SIZE = 6; 32908 const CircleRoot = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 32909 target: "eln3bjz3" 32910 } : 0)("border-radius:", config_values.radiusRound, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + ( true ? "" : 0)); 32911 const CircleIndicatorWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 32912 target: "eln3bjz2" 32913 } : 0)( true ? { 32914 name: "1r307gh", 32915 styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}" 32916 } : 0); 32917 const CircleIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 32918 target: "eln3bjz1" 32919 } : 0)("background:", COLORS.theme.accent, ";border-radius:", config_values.radiusRound, ";box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + ( true ? "" : 0)); 32920 const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 32921 target: "eln3bjz0" 32922 } : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0)); 32923 32924 ;// ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js 32925 /** 32926 * WordPress dependencies 32927 */ 32928 32929 32930 32931 /** 32932 * Internal dependencies 32933 */ 32934 32935 32936 function AngleCircle({ 32937 value, 32938 onChange, 32939 ...props 32940 }) { 32941 const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(null); 32942 const angleCircleCenterRef = (0,external_wp_element_namespaceObject.useRef)(); 32943 const previousCursorValueRef = (0,external_wp_element_namespaceObject.useRef)(); 32944 const setAngleCircleCenter = () => { 32945 if (angleCircleRef.current === null) { 32946 return; 32947 } 32948 const rect = angleCircleRef.current.getBoundingClientRect(); 32949 angleCircleCenterRef.current = { 32950 x: rect.x + rect.width / 2, 32951 y: rect.y + rect.height / 2 32952 }; 32953 }; 32954 const changeAngleToPosition = event => { 32955 if (event === undefined) { 32956 return; 32957 } 32958 32959 // Prevent (drag) mouse events from selecting and accidentally 32960 // triggering actions from other elements. 32961 event.preventDefault(); 32962 // Input control needs to lose focus and by preventDefault above, it doesn't. 32963 event.target?.focus(); 32964 if (angleCircleCenterRef.current !== undefined && onChange !== undefined) { 32965 const { 32966 x: centerX, 32967 y: centerY 32968 } = angleCircleCenterRef.current; 32969 onChange(getAngle(centerX, centerY, event.clientX, event.clientY)); 32970 } 32971 }; 32972 const { 32973 startDrag, 32974 isDragging 32975 } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({ 32976 onDragStart: event => { 32977 setAngleCircleCenter(); 32978 changeAngleToPosition(event); 32979 }, 32980 onDragMove: changeAngleToPosition, 32981 onDragEnd: changeAngleToPosition 32982 }); 32983 (0,external_wp_element_namespaceObject.useEffect)(() => { 32984 if (isDragging) { 32985 if (previousCursorValueRef.current === undefined) { 32986 previousCursorValueRef.current = document.body.style.cursor; 32987 } 32988 document.body.style.cursor = 'grabbing'; 32989 } else { 32990 document.body.style.cursor = previousCursorValueRef.current || ''; 32991 previousCursorValueRef.current = undefined; 32992 } 32993 }, [isDragging]); 32994 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleRoot, { 32995 ref: angleCircleRef, 32996 onMouseDown: startDrag, 32997 className: "components-angle-picker-control__angle-circle", 32998 ...props, 32999 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleIndicatorWrapper, { 33000 style: value ? { 33001 transform: `rotate($value}deg)` 33002 } : undefined, 33003 className: "components-angle-picker-control__angle-circle-indicator-wrapper", 33004 tabIndex: -1, 33005 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleIndicator, { 33006 className: "components-angle-picker-control__angle-circle-indicator" 33007 }) 33008 }) 33009 }); 33010 } 33011 function getAngle(centerX, centerY, pointX, pointY) { 33012 const y = pointY - centerY; 33013 const x = pointX - centerX; 33014 const angleInRadians = Math.atan2(y, x); 33015 const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90; 33016 if (angleInDeg < 0) { 33017 return 360 + angleInDeg; 33018 } 33019 return angleInDeg; 33020 } 33021 /* harmony default export */ const angle_circle = (AngleCircle); 33022 33023 ;// ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js 33024 /** 33025 * External dependencies 33026 */ 33027 33028 33029 33030 /** 33031 * WordPress dependencies 33032 */ 33033 33034 33035 33036 /** 33037 * Internal dependencies 33038 */ 33039 33040 33041 33042 33043 33044 33045 function UnforwardedAnglePickerControl(props, ref) { 33046 const { 33047 className, 33048 label = (0,external_wp_i18n_namespaceObject.__)('Angle'), 33049 onChange, 33050 value, 33051 ...restProps 33052 } = props; 33053 const handleOnNumberChange = unprocessedValue => { 33054 if (onChange === undefined) { 33055 return; 33056 } 33057 const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0; 33058 onChange(inputValue); 33059 }; 33060 const classes = dist_clsx('components-angle-picker-control', className); 33061 const unitText = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UnitText, { 33062 children: "\xB0" 33063 }); 33064 const [prefixedUnitText, suffixedUnitText] = (0,external_wp_i18n_namespaceObject.isRTL)() ? [unitText, null] : [null, unitText]; 33065 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { 33066 ...restProps, 33067 ref: ref, 33068 className: classes, 33069 gap: 2, 33070 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, { 33071 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(number_control, { 33072 __next40pxDefaultSize: true, 33073 label: label, 33074 className: "components-angle-picker-control__input-field", 33075 max: 360, 33076 min: 0, 33077 onChange: handleOnNumberChange, 33078 step: "1", 33079 value: value, 33080 spinControls: "none", 33081 prefix: prefixedUnitText, 33082 suffix: suffixedUnitText 33083 }) 33084 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 33085 marginBottom: "1", 33086 marginTop: "auto", 33087 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(angle_circle, { 33088 "aria-hidden": "true", 33089 value: value, 33090 onChange: onChange 33091 }) 33092 })] 33093 }); 33094 } 33095 33096 /** 33097 * `AnglePickerControl` is a React component to render a UI that allows users to 33098 * pick an angle. Users can choose an angle in a visual UI with the mouse by 33099 * dragging an angle indicator inside a circle or by directly inserting the 33100 * desired angle in a text field. 33101 * 33102 * ```jsx 33103 * import { useState } from '@wordpress/element'; 33104 * import { AnglePickerControl } from '@wordpress/components'; 33105 * 33106 * function Example() { 33107 * const [ angle, setAngle ] = useState( 0 ); 33108 * return ( 33109 * <AnglePickerControl 33110 * value={ angle } 33111 * onChange={ setAngle } 33112 * </> 33113 * ); 33114 * } 33115 * ``` 33116 */ 33117 const AnglePickerControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedAnglePickerControl); 33118 /* harmony default export */ const angle_picker_control = (AnglePickerControl); 33119 33120 // EXTERNAL MODULE: ./node_modules/remove-accents/index.js 33121 var remove_accents = __webpack_require__(9681); 33122 var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents); 33123 ;// external ["wp","richText"] 33124 const external_wp_richText_namespaceObject = window["wp"]["richText"]; 33125 ;// external ["wp","a11y"] 33126 const external_wp_a11y_namespaceObject = window["wp"]["a11y"]; 33127 ;// external ["wp","keycodes"] 33128 const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"]; 33129 ;// ./node_modules/@wordpress/components/build-module/utils/strings.js 33130 /** 33131 * External dependencies 33132 */ 33133 33134 33135 33136 /** 33137 * All unicode characters that we consider "dash-like": 33138 * - `\u007e`: ~ (tilde) 33139 * - `\u00ad`: (soft hyphen) 33140 * - `\u2053`: ⁓ (swung dash) 33141 * - `\u207b`: ⁻ (superscript minus) 33142 * - `\u208b`: ₋ (subscript minus) 33143 * - `\u2212`: − (minus sign) 33144 * - `\\p{Pd}`: any other Unicode dash character 33145 */ 33146 const ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu); 33147 const normalizeTextString = value => { 33148 return remove_accents_default()(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-'); 33149 }; 33150 33151 /** 33152 * Converts any string to kebab case. 33153 * Backwards compatible with Lodash's `_.kebabCase()`. 33154 * Backwards compatible with `_wp_to_kebab_case()`. 33155 * 33156 * @see https://lodash.com/docs/4.17.15#kebabCase 33157 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/ 33158 * 33159 * @param str String to convert. 33160 * @return Kebab-cased string 33161 */ 33162 function kebabCase(str) { 33163 var _str$toString; 33164 let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : ''; 33165 33166 // See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970 33167 input = input.replace(/['\u2019]/, ''); 33168 return paramCase(input, { 33169 splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, 33170 // fooBar => foo-bar, 3Bar => 3-bar 33171 /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, 33172 // 3bar => 3-bar 33173 /([A-Za-z])([0-9])/g, 33174 // Foo3 => foo-3, foo3 => foo-3 33175 /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar 33176 ] 33177 }); 33178 } 33179 33180 /** 33181 * Escapes the RegExp special characters. 33182 * 33183 * @param string Input string. 33184 * 33185 * @return Regex-escaped string. 33186 */ 33187 function escapeRegExp(string) { 33188 return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&'); 33189 } 33190 33191 ;// ./node_modules/@wordpress/components/build-module/autocomplete/get-default-use-items.js 33192 /** 33193 * External dependencies 33194 */ 33195 33196 33197 /** 33198 * WordPress dependencies 33199 */ 33200 33201 33202 33203 /** 33204 * Internal dependencies 33205 */ 33206 33207 function filterOptions(search, options = [], maxResults = 10) { 33208 const filtered = []; 33209 for (let i = 0; i < options.length; i++) { 33210 const option = options[i]; 33211 33212 // Merge label into keywords. 33213 let { 33214 keywords = [] 33215 } = option; 33216 if ('string' === typeof option.label) { 33217 keywords = [...keywords, option.label]; 33218 } 33219 const isMatch = keywords.some(keyword => search.test(remove_accents_default()(keyword))); 33220 if (!isMatch) { 33221 continue; 33222 } 33223 filtered.push(option); 33224 33225 // Abort early if max reached. 33226 if (filtered.length === maxResults) { 33227 break; 33228 } 33229 } 33230 return filtered; 33231 } 33232 function getDefaultUseItems(autocompleter) { 33233 return filterValue => { 33234 const [items, setItems] = (0,external_wp_element_namespaceObject.useState)([]); 33235 /* 33236 * We support both synchronous and asynchronous retrieval of completer options 33237 * but internally treat all as async so we maintain a single, consistent code path. 33238 * 33239 * Because networks can be slow, and the internet is wonderfully unpredictable, 33240 * we don't want two promises updating the state at once. This ensures that only 33241 * the most recent promise will act on `optionsData`. This doesn't use the state 33242 * because `setState` is batched, and so there's no guarantee that setting 33243 * `activePromise` in the state would result in it actually being in `this.state` 33244 * before the promise resolves and we check to see if this is the active promise or not. 33245 */ 33246 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 33247 const { 33248 options, 33249 isDebounced 33250 } = autocompleter; 33251 const loadOptions = (0,external_wp_compose_namespaceObject.debounce)(() => { 33252 const promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(optionsData => { 33253 if (promise.canceled) { 33254 return; 33255 } 33256 const keyedOptions = optionsData.map((optionData, optionIndex) => ({ 33257 key: `$autocompleter.name}-$optionIndex}`, 33258 value: optionData, 33259 label: autocompleter.getOptionLabel(optionData), 33260 keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [], 33261 isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false 33262 })); 33263 33264 // Create a regular expression to filter the options. 33265 const search = new RegExp('(?:\\b|\\s|^)' + escapeRegExp(filterValue), 'i'); 33266 setItems(filterOptions(search, keyedOptions)); 33267 }); 33268 return promise; 33269 }, isDebounced ? 250 : 0); 33270 const promise = loadOptions(); 33271 return () => { 33272 loadOptions.cancel(); 33273 if (promise) { 33274 promise.canceled = true; 33275 } 33276 }; 33277 }, [filterValue]); 33278 return [items]; 33279 }; 33280 } 33281 33282 ;// ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs 33283 33284 33285 33286 33287 33288 33289 /** 33290 * Provides data to position an inner element of the floating element so that it 33291 * appears centered to the reference element. 33292 * This wraps the core `arrow` middleware to allow React refs as the element. 33293 * @see https://floating-ui.com/docs/arrow 33294 */ 33295 const floating_ui_react_dom_arrow = options => { 33296 function isRef(value) { 33297 return {}.hasOwnProperty.call(value, 'current'); 33298 } 33299 return { 33300 name: 'arrow', 33301 options, 33302 fn(state) { 33303 const { 33304 element, 33305 padding 33306 } = typeof options === 'function' ? options(state) : options; 33307 if (element && isRef(element)) { 33308 if (element.current != null) { 33309 return floating_ui_dom_arrow({ 33310 element: element.current, 33311 padding 33312 }).fn(state); 33313 } 33314 return {}; 33315 } 33316 if (element) { 33317 return floating_ui_dom_arrow({ 33318 element, 33319 padding 33320 }).fn(state); 33321 } 33322 return {}; 33323 } 33324 }; 33325 }; 33326 33327 var index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect; 33328 33329 // Fork of `fast-deep-equal` that only does the comparisons we need and compares 33330 // functions 33331 function deepEqual(a, b) { 33332 if (a === b) { 33333 return true; 33334 } 33335 if (typeof a !== typeof b) { 33336 return false; 33337 } 33338 if (typeof a === 'function' && a.toString() === b.toString()) { 33339 return true; 33340 } 33341 let length; 33342 let i; 33343 let keys; 33344 if (a && b && typeof a === 'object') { 33345 if (Array.isArray(a)) { 33346 length = a.length; 33347 if (length !== b.length) return false; 33348 for (i = length; i-- !== 0;) { 33349 if (!deepEqual(a[i], b[i])) { 33350 return false; 33351 } 33352 } 33353 return true; 33354 } 33355 keys = Object.keys(a); 33356 length = keys.length; 33357 if (length !== Object.keys(b).length) { 33358 return false; 33359 } 33360 for (i = length; i-- !== 0;) { 33361 if (!{}.hasOwnProperty.call(b, keys[i])) { 33362 return false; 33363 } 33364 } 33365 for (i = length; i-- !== 0;) { 33366 const key = keys[i]; 33367 if (key === '_owner' && a.$$typeof) { 33368 continue; 33369 } 33370 if (!deepEqual(a[key], b[key])) { 33371 return false; 33372 } 33373 } 33374 return true; 33375 } 33376 33377 // biome-ignore lint/suspicious/noSelfCompare: in source 33378 return a !== a && b !== b; 33379 } 33380 33381 function getDPR(element) { 33382 if (typeof window === 'undefined') { 33383 return 1; 33384 } 33385 const win = element.ownerDocument.defaultView || window; 33386 return win.devicePixelRatio || 1; 33387 } 33388 33389 function floating_ui_react_dom_roundByDPR(element, value) { 33390 const dpr = getDPR(element); 33391 return Math.round(value * dpr) / dpr; 33392 } 33393 33394 function useLatestRef(value) { 33395 const ref = external_React_.useRef(value); 33396 index(() => { 33397 ref.current = value; 33398 }); 33399 return ref; 33400 } 33401 33402 /** 33403 * Provides data to position a floating element. 33404 * @see https://floating-ui.com/docs/useFloating 33405 */ 33406 function useFloating(options) { 33407 if (options === void 0) { 33408 options = {}; 33409 } 33410 const { 33411 placement = 'bottom', 33412 strategy = 'absolute', 33413 middleware = [], 33414 platform, 33415 elements: { 33416 reference: externalReference, 33417 floating: externalFloating 33418 } = {}, 33419 transform = true, 33420 whileElementsMounted, 33421 open 33422 } = options; 33423 const [data, setData] = external_React_.useState({ 33424 x: 0, 33425 y: 0, 33426 strategy, 33427 placement, 33428 middlewareData: {}, 33429 isPositioned: false 33430 }); 33431 const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware); 33432 if (!deepEqual(latestMiddleware, middleware)) { 33433 setLatestMiddleware(middleware); 33434 } 33435 const [_reference, _setReference] = external_React_.useState(null); 33436 const [_floating, _setFloating] = external_React_.useState(null); 33437 const setReference = external_React_.useCallback(node => { 33438 if (node !== referenceRef.current) { 33439 referenceRef.current = node; 33440 _setReference(node); 33441 } 33442 }, []); 33443 const setFloating = external_React_.useCallback(node => { 33444 if (node !== floatingRef.current) { 33445 floatingRef.current = node; 33446 _setFloating(node); 33447 } 33448 }, []); 33449 const referenceEl = externalReference || _reference; 33450 const floatingEl = externalFloating || _floating; 33451 const referenceRef = external_React_.useRef(null); 33452 const floatingRef = external_React_.useRef(null); 33453 const dataRef = external_React_.useRef(data); 33454 const hasWhileElementsMounted = whileElementsMounted != null; 33455 const whileElementsMountedRef = useLatestRef(whileElementsMounted); 33456 const platformRef = useLatestRef(platform); 33457 const update = external_React_.useCallback(() => { 33458 if (!referenceRef.current || !floatingRef.current) { 33459 return; 33460 } 33461 const config = { 33462 placement, 33463 strategy, 33464 middleware: latestMiddleware 33465 }; 33466 if (platformRef.current) { 33467 config.platform = platformRef.current; 33468 } 33469 floating_ui_dom_computePosition(referenceRef.current, floatingRef.current, config).then(data => { 33470 const fullData = { 33471 ...data, 33472 isPositioned: true 33473 }; 33474 if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) { 33475 dataRef.current = fullData; 33476 external_ReactDOM_namespaceObject.flushSync(() => { 33477 setData(fullData); 33478 }); 33479 } 33480 }); 33481 }, [latestMiddleware, placement, strategy, platformRef]); 33482 index(() => { 33483 if (open === false && dataRef.current.isPositioned) { 33484 dataRef.current.isPositioned = false; 33485 setData(data => ({ 33486 ...data, 33487 isPositioned: false 33488 })); 33489 } 33490 }, [open]); 33491 const isMountedRef = external_React_.useRef(false); 33492 index(() => { 33493 isMountedRef.current = true; 33494 return () => { 33495 isMountedRef.current = false; 33496 }; 33497 }, []); 33498 33499 // biome-ignore lint/correctness/useExhaustiveDependencies: `hasWhileElementsMounted` is intentionally included. 33500 index(() => { 33501 if (referenceEl) referenceRef.current = referenceEl; 33502 if (floatingEl) floatingRef.current = floatingEl; 33503 if (referenceEl && floatingEl) { 33504 if (whileElementsMountedRef.current) { 33505 return whileElementsMountedRef.current(referenceEl, floatingEl, update); 33506 } 33507 update(); 33508 } 33509 }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]); 33510 const refs = external_React_.useMemo(() => ({ 33511 reference: referenceRef, 33512 floating: floatingRef, 33513 setReference, 33514 setFloating 33515 }), [setReference, setFloating]); 33516 const elements = external_React_.useMemo(() => ({ 33517 reference: referenceEl, 33518 floating: floatingEl 33519 }), [referenceEl, floatingEl]); 33520 const floatingStyles = external_React_.useMemo(() => { 33521 const initialStyles = { 33522 position: strategy, 33523 left: 0, 33524 top: 0 33525 }; 33526 if (!elements.floating) { 33527 return initialStyles; 33528 } 33529 const x = floating_ui_react_dom_roundByDPR(elements.floating, data.x); 33530 const y = floating_ui_react_dom_roundByDPR(elements.floating, data.y); 33531 if (transform) { 33532 return { 33533 ...initialStyles, 33534 transform: "translate(" + x + "px, " + y + "px)", 33535 ...(getDPR(elements.floating) >= 1.5 && { 33536 willChange: 'transform' 33537 }) 33538 }; 33539 } 33540 return { 33541 position: strategy, 33542 left: x, 33543 top: y 33544 }; 33545 }, [strategy, transform, elements.floating, data.x, data.y]); 33546 return external_React_.useMemo(() => ({ 33547 ...data, 33548 update, 33549 refs, 33550 elements, 33551 floatingStyles 33552 }), [data, update, refs, elements, floatingStyles]); 33553 } 33554 33555 33556 33557 ;// ./node_modules/@wordpress/icons/build-module/library/close.js 33558 /** 33559 * WordPress dependencies 33560 */ 33561 33562 33563 const close_close = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 33564 xmlns: "http://www.w3.org/2000/svg", 33565 viewBox: "0 0 24 24", 33566 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 33567 d: "m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z" 33568 }) 33569 }); 33570 /* harmony default export */ const library_close = (close_close); 33571 33572 ;// ./node_modules/@wordpress/components/build-module/scroll-lock/index.js 33573 /** 33574 * WordPress dependencies 33575 */ 33576 33577 33578 /* 33579 * Setting `overflow: hidden` on html and body elements resets body scroll in iOS. 33580 * Save scroll top so we can restore it after locking scroll. 33581 * 33582 * NOTE: It would be cleaner and possibly safer to find a localized solution such 33583 * as preventing default on certain touchmove events. 33584 */ 33585 let previousScrollTop = 0; 33586 function setLocked(locked) { 33587 const scrollingElement = document.scrollingElement || document.body; 33588 if (locked) { 33589 previousScrollTop = scrollingElement.scrollTop; 33590 } 33591 const methodName = locked ? 'add' : 'remove'; 33592 scrollingElement.classList[methodName]('lockscroll'); 33593 33594 // Adding the class to the document element seems to be necessary in iOS. 33595 document.documentElement.classList[methodName]('lockscroll'); 33596 if (!locked) { 33597 scrollingElement.scrollTop = previousScrollTop; 33598 } 33599 } 33600 let lockCounter = 0; 33601 33602 /** 33603 * ScrollLock is a content-free React component for declaratively preventing 33604 * scroll bleed from modal UI to the page body. This component applies a 33605 * `lockscroll` class to the `document.documentElement` and 33606 * `document.scrollingElement` elements to stop the body from scrolling. When it 33607 * is present, the lock is applied. 33608 * 33609 * ```jsx 33610 * import { ScrollLock, Button } from '@wordpress/components'; 33611 * import { useState } from '@wordpress/element'; 33612 * 33613 * const MyScrollLock = () => { 33614 * const [ isScrollLocked, setIsScrollLocked ] = useState( false ); 33615 * 33616 * const toggleLock = () => { 33617 * setIsScrollLocked( ( locked ) => ! locked ) ); 33618 * }; 33619 * 33620 * return ( 33621 * <div> 33622 * <Button variant="secondary" onClick={ toggleLock }> 33623 * Toggle scroll lock 33624 * </Button> 33625 * { isScrollLocked && <ScrollLock /> } 33626 * <p> 33627 * Scroll locked: 33628 * <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong> 33629 * </p> 33630 * </div> 33631 * ); 33632 * }; 33633 * ``` 33634 */ 33635 function ScrollLock() { 33636 (0,external_wp_element_namespaceObject.useEffect)(() => { 33637 if (lockCounter === 0) { 33638 setLocked(true); 33639 } 33640 ++lockCounter; 33641 return () => { 33642 if (lockCounter === 1) { 33643 setLocked(false); 33644 } 33645 --lockCounter; 33646 }; 33647 }, []); 33648 return null; 33649 } 33650 /* harmony default export */ const scroll_lock = (ScrollLock); 33651 33652 ;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js 33653 /** 33654 * WordPress dependencies 33655 */ 33656 33657 33658 33659 33660 /** 33661 * Internal dependencies 33662 */ 33663 33664 const initialContextValue = { 33665 slots: (0,external_wp_compose_namespaceObject.observableMap)(), 33666 fills: (0,external_wp_compose_namespaceObject.observableMap)(), 33667 registerSlot: () => { 33668 true ? external_wp_warning_default()('Components must be wrapped within `SlotFillProvider`. ' + 'See https://developer.wordpress.org/block-editor/components/slot-fill/') : 0; 33669 }, 33670 updateSlot: () => {}, 33671 unregisterSlot: () => {}, 33672 registerFill: () => {}, 33673 unregisterFill: () => {}, 33674 // This helps the provider know if it's using the default context value or not. 33675 isDefault: true 33676 }; 33677 const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(initialContextValue); 33678 /* harmony default export */ const slot_fill_context = (SlotFillContext); 33679 33680 ;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js 33681 /** 33682 * WordPress dependencies 33683 */ 33684 33685 33686 33687 /** 33688 * Internal dependencies 33689 */ 33690 33691 function useSlot(name) { 33692 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 33693 const slot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name); 33694 return { 33695 ...slot 33696 }; 33697 } 33698 33699 ;// ./node_modules/@wordpress/components/build-module/slot-fill/context.js 33700 /** 33701 * WordPress dependencies 33702 */ 33703 33704 33705 33706 /** 33707 * Internal dependencies 33708 */ 33709 33710 const initialValue = { 33711 slots: (0,external_wp_compose_namespaceObject.observableMap)(), 33712 fills: (0,external_wp_compose_namespaceObject.observableMap)(), 33713 registerSlot: () => {}, 33714 unregisterSlot: () => {}, 33715 registerFill: () => {}, 33716 unregisterFill: () => {}, 33717 updateFill: () => {} 33718 }; 33719 const context_SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(initialValue); 33720 /* harmony default export */ const context = (context_SlotFillContext); 33721 33722 ;// ./node_modules/@wordpress/components/build-module/slot-fill/fill.js 33723 /** 33724 * WordPress dependencies 33725 */ 33726 33727 33728 /** 33729 * Internal dependencies 33730 */ 33731 33732 function Fill({ 33733 name, 33734 children 33735 }) { 33736 const registry = (0,external_wp_element_namespaceObject.useContext)(context); 33737 const instanceRef = (0,external_wp_element_namespaceObject.useRef)({}); 33738 const childrenRef = (0,external_wp_element_namespaceObject.useRef)(children); 33739 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 33740 childrenRef.current = children; 33741 }, [children]); 33742 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 33743 const instance = instanceRef.current; 33744 registry.registerFill(name, instance, childrenRef.current); 33745 return () => registry.unregisterFill(name, instance); 33746 }, [registry, name]); 33747 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 33748 registry.updateFill(name, instanceRef.current, childrenRef.current); 33749 }); 33750 return null; 33751 } 33752 33753 ;// ./node_modules/@wordpress/components/build-module/slot-fill/slot.js 33754 /** 33755 * External dependencies 33756 */ 33757 33758 /** 33759 * WordPress dependencies 33760 */ 33761 33762 33763 33764 /** 33765 * Internal dependencies 33766 */ 33767 33768 33769 /** 33770 * Whether the argument is a function. 33771 * 33772 * @param maybeFunc The argument to check. 33773 * @return True if the argument is a function, false otherwise. 33774 */ 33775 function isFunction(maybeFunc) { 33776 return typeof maybeFunc === 'function'; 33777 } 33778 function addKeysToChildren(children) { 33779 return external_wp_element_namespaceObject.Children.map(children, (child, childIndex) => { 33780 if (!child || typeof child === 'string') { 33781 return child; 33782 } 33783 let childKey = childIndex; 33784 if (typeof child === 'object' && 'key' in child && child?.key) { 33785 childKey = child.key; 33786 } 33787 return (0,external_wp_element_namespaceObject.cloneElement)(child, { 33788 key: childKey 33789 }); 33790 }); 33791 } 33792 function Slot(props) { 33793 var _useObservableValue; 33794 const registry = (0,external_wp_element_namespaceObject.useContext)(context); 33795 const instanceRef = (0,external_wp_element_namespaceObject.useRef)({}); 33796 const { 33797 name, 33798 children, 33799 fillProps = {} 33800 } = props; 33801 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 33802 const instance = instanceRef.current; 33803 registry.registerSlot(name, instance); 33804 return () => registry.unregisterSlot(name, instance); 33805 }, [registry, name]); 33806 let fills = (_useObservableValue = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.fills, name)) !== null && _useObservableValue !== void 0 ? _useObservableValue : []; 33807 const currentSlot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name); 33808 33809 // Fills should only be rendered in the currently registered instance of the slot. 33810 if (currentSlot !== instanceRef.current) { 33811 fills = []; 33812 } 33813 const renderedFills = fills.map(fill => { 33814 const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children; 33815 return addKeysToChildren(fillChildren); 33816 }).filter( 33817 // In some cases fills are rendered only when some conditions apply. 33818 // This ensures that we only use non-empty fills when rendering, i.e., 33819 // it allows us to render wrappers only when the fills are actually present. 33820 element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element)); 33821 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 33822 children: isFunction(children) ? children(renderedFills) : renderedFills 33823 }); 33824 } 33825 /* harmony default export */ const slot = (Slot); 33826 33827 ;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/native.js 33828 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto); 33829 /* harmony default export */ const esm_browser_native = ({ 33830 randomUUID 33831 }); 33832 ;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/rng.js 33833 // Unique ID creation requires a high quality random # generator. In the browser we therefore 33834 // require the crypto API and do not support built-in fallback to lower quality random number 33835 // generators (like Math.random()). 33836 let getRandomValues; 33837 const rnds8 = new Uint8Array(16); 33838 function rng() { 33839 // lazy load so that environments that need to polyfill have a chance to do so 33840 if (!getRandomValues) { 33841 // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. 33842 getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto); 33843 33844 if (!getRandomValues) { 33845 throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported'); 33846 } 33847 } 33848 33849 return getRandomValues(rnds8); 33850 } 33851 ;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/stringify.js 33852 33853 /** 33854 * Convert array of 16 byte values to UUID string format of the form: 33855 * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 33856 */ 33857 33858 const byteToHex = []; 33859 33860 for (let i = 0; i < 256; ++i) { 33861 byteToHex.push((i + 0x100).toString(16).slice(1)); 33862 } 33863 33864 function unsafeStringify(arr, offset = 0) { 33865 // Note: Be careful editing this code! It's been tuned for performance 33866 // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434 33867 return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]; 33868 } 33869 33870 function stringify_stringify(arr, offset = 0) { 33871 const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID. If this throws, it's likely due to one 33872 // of the following: 33873 // - One or more input array values don't map to a hex octet (leading to 33874 // "undefined" in the uuid) 33875 // - Invalid input values for the RFC `version` or `variant` fields 33876 33877 if (!validate(uuid)) { 33878 throw TypeError('Stringified UUID is invalid'); 33879 } 33880 33881 return uuid; 33882 } 33883 33884 /* harmony default export */ const esm_browser_stringify = ((/* unused pure expression or super */ null && (stringify_stringify))); 33885 ;// ./node_modules/@wordpress/components/node_modules/uuid/dist/esm-browser/v4.js 33886 33887 33888 33889 33890 function v4(options, buf, offset) { 33891 if (esm_browser_native.randomUUID && !buf && !options) { 33892 return esm_browser_native.randomUUID(); 33893 } 33894 33895 options = options || {}; 33896 const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved` 33897 33898 rnds[6] = rnds[6] & 0x0f | 0x40; 33899 rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided 33900 33901 if (buf) { 33902 offset = offset || 0; 33903 33904 for (let i = 0; i < 16; ++i) { 33905 buf[offset + i] = rnds[i]; 33906 } 33907 33908 return buf; 33909 } 33910 33911 return unsafeStringify(rnds); 33912 } 33913 33914 /* harmony default export */ const esm_browser_v4 = (v4); 33915 ;// ./node_modules/@wordpress/components/build-module/style-provider/index.js 33916 /** 33917 * External dependencies 33918 */ 33919 33920 33921 33922 33923 /** 33924 * Internal dependencies 33925 */ 33926 33927 const uuidCache = new Set(); 33928 // Use a weak map so that when the container is detached it's automatically 33929 // dereferenced to avoid memory leak. 33930 const containerCacheMap = new WeakMap(); 33931 const memoizedCreateCacheWithContainer = container => { 33932 if (containerCacheMap.has(container)) { 33933 return containerCacheMap.get(container); 33934 } 33935 33936 // Emotion only accepts alphabetical and hyphenated keys so we just 33937 // strip the numbers from the UUID. It _should_ be fine. 33938 let key = esm_browser_v4().replace(/[0-9]/g, ''); 33939 while (uuidCache.has(key)) { 33940 key = esm_browser_v4().replace(/[0-9]/g, ''); 33941 } 33942 uuidCache.add(key); 33943 const cache = emotion_cache_browser_esm({ 33944 container, 33945 key 33946 }); 33947 containerCacheMap.set(container, cache); 33948 return cache; 33949 }; 33950 function StyleProvider(props) { 33951 const { 33952 children, 33953 document 33954 } = props; 33955 if (!document) { 33956 return null; 33957 } 33958 const cache = memoizedCreateCacheWithContainer(document.head); 33959 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CacheProvider, { 33960 value: cache, 33961 children: children 33962 }); 33963 } 33964 /* harmony default export */ const style_provider = (StyleProvider); 33965 33966 ;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js 33967 /** 33968 * WordPress dependencies 33969 */ 33970 33971 33972 33973 /** 33974 * Internal dependencies 33975 */ 33976 33977 33978 33979 function fill_Fill({ 33980 name, 33981 children 33982 }) { 33983 var _slot$fillProps; 33984 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 33985 const slot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name); 33986 const instanceRef = (0,external_wp_element_namespaceObject.useRef)({}); 33987 33988 // We register fills so we can keep track of their existence. 33989 // Slots can use the `useSlotFills` hook to know if there're already fills 33990 // registered so they can choose to render themselves or not. 33991 (0,external_wp_element_namespaceObject.useEffect)(() => { 33992 const instance = instanceRef.current; 33993 registry.registerFill(name, instance); 33994 return () => registry.unregisterFill(name, instance); 33995 }, [registry, name]); 33996 if (!slot || !slot.ref.current) { 33997 return null; 33998 } 33999 34000 // When using a `Fill`, the `children` will be rendered in the document of the 34001 // `Slot`. This means that we need to wrap the `children` in a `StyleProvider` 34002 // to make sure we're referencing the right document/iframe (instead of the 34003 // context of the `Fill`'s parent). 34004 const wrappedChildren = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, { 34005 document: slot.ref.current.ownerDocument, 34006 children: typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children 34007 }); 34008 return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current); 34009 } 34010 34011 ;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js 34012 /** 34013 * External dependencies 34014 */ 34015 34016 /** 34017 * WordPress dependencies 34018 */ 34019 34020 34021 34022 /** 34023 * Internal dependencies 34024 */ 34025 34026 34027 34028 function slot_Slot(props, forwardedRef) { 34029 const { 34030 name, 34031 fillProps = {}, 34032 as, 34033 // `children` is not allowed. However, if it is passed, 34034 // it will be displayed as is, so remove `children`. 34035 children, 34036 ...restProps 34037 } = props; 34038 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 34039 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 34040 34041 // We don't want to unregister and register the slot whenever 34042 // `fillProps` change, which would cause the fill to be re-mounted. Instead, 34043 // we can just update the slot (see hook below). 34044 // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973 34045 const fillPropsRef = (0,external_wp_element_namespaceObject.useRef)(fillProps); 34046 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 34047 fillPropsRef.current = fillProps; 34048 }, [fillProps]); 34049 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 34050 registry.registerSlot(name, ref, fillPropsRef.current); 34051 return () => registry.unregisterSlot(name, ref); 34052 }, [registry, name]); 34053 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 34054 registry.updateSlot(name, ref, fillPropsRef.current); 34055 }); 34056 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 34057 as: as, 34058 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, ref]), 34059 ...restProps 34060 }); 34061 } 34062 /* harmony default export */ const bubbles_virtually_slot = ((0,external_wp_element_namespaceObject.forwardRef)(slot_Slot)); 34063 34064 ;// external ["wp","isShallowEqual"] 34065 const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"]; 34066 var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject); 34067 ;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js 34068 /** 34069 * WordPress dependencies 34070 */ 34071 34072 34073 34074 34075 /** 34076 * Internal dependencies 34077 */ 34078 34079 34080 function createSlotRegistry() { 34081 const slots = (0,external_wp_compose_namespaceObject.observableMap)(); 34082 const fills = (0,external_wp_compose_namespaceObject.observableMap)(); 34083 const registerSlot = (name, ref, fillProps) => { 34084 slots.set(name, { 34085 ref, 34086 fillProps 34087 }); 34088 }; 34089 const unregisterSlot = (name, ref) => { 34090 const slot = slots.get(name); 34091 if (!slot) { 34092 return; 34093 } 34094 34095 // Make sure we're not unregistering a slot registered by another element 34096 // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412 34097 if (slot.ref !== ref) { 34098 return; 34099 } 34100 slots.delete(name); 34101 }; 34102 const updateSlot = (name, ref, fillProps) => { 34103 const slot = slots.get(name); 34104 if (!slot) { 34105 return; 34106 } 34107 if (slot.ref !== ref) { 34108 return; 34109 } 34110 if (external_wp_isShallowEqual_default()(slot.fillProps, fillProps)) { 34111 return; 34112 } 34113 slots.set(name, { 34114 ref, 34115 fillProps 34116 }); 34117 }; 34118 const registerFill = (name, ref) => { 34119 fills.set(name, [...(fills.get(name) || []), ref]); 34120 }; 34121 const unregisterFill = (name, ref) => { 34122 const fillsForName = fills.get(name); 34123 if (!fillsForName) { 34124 return; 34125 } 34126 fills.set(name, fillsForName.filter(fillRef => fillRef !== ref)); 34127 }; 34128 return { 34129 slots, 34130 fills, 34131 registerSlot, 34132 updateSlot, 34133 unregisterSlot, 34134 registerFill, 34135 unregisterFill 34136 }; 34137 } 34138 function SlotFillProvider({ 34139 children 34140 }) { 34141 const [registry] = (0,external_wp_element_namespaceObject.useState)(createSlotRegistry); 34142 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_context.Provider, { 34143 value: registry, 34144 children: children 34145 }); 34146 } 34147 34148 ;// ./node_modules/@wordpress/components/build-module/slot-fill/provider.js 34149 /** 34150 * WordPress dependencies 34151 */ 34152 34153 34154 /** 34155 * Internal dependencies 34156 */ 34157 34158 34159 34160 function provider_createSlotRegistry() { 34161 const slots = (0,external_wp_compose_namespaceObject.observableMap)(); 34162 const fills = (0,external_wp_compose_namespaceObject.observableMap)(); 34163 function registerSlot(name, instance) { 34164 slots.set(name, instance); 34165 } 34166 function unregisterSlot(name, instance) { 34167 // If a previous instance of a Slot by this name unmounts, do nothing, 34168 // as the slot and its fills should only be removed for the current 34169 // known instance. 34170 if (slots.get(name) !== instance) { 34171 return; 34172 } 34173 slots.delete(name); 34174 } 34175 function registerFill(name, instance, children) { 34176 fills.set(name, [...(fills.get(name) || []), { 34177 instance, 34178 children 34179 }]); 34180 } 34181 function unregisterFill(name, instance) { 34182 const fillsForName = fills.get(name); 34183 if (!fillsForName) { 34184 return; 34185 } 34186 fills.set(name, fillsForName.filter(fill => fill.instance !== instance)); 34187 } 34188 function updateFill(name, instance, children) { 34189 const fillsForName = fills.get(name); 34190 if (!fillsForName) { 34191 return; 34192 } 34193 const fillForInstance = fillsForName.find(f => f.instance === instance); 34194 if (!fillForInstance) { 34195 return; 34196 } 34197 if (fillForInstance.children === children) { 34198 return; 34199 } 34200 fills.set(name, fillsForName.map(f => { 34201 if (f.instance === instance) { 34202 // Replace with new record with updated `children`. 34203 return { 34204 instance, 34205 children 34206 }; 34207 } 34208 return f; 34209 })); 34210 } 34211 return { 34212 slots, 34213 fills, 34214 registerSlot, 34215 unregisterSlot, 34216 registerFill, 34217 unregisterFill, 34218 updateFill 34219 }; 34220 } 34221 function provider_SlotFillProvider({ 34222 children 34223 }) { 34224 const [contextValue] = (0,external_wp_element_namespaceObject.useState)(provider_createSlotRegistry); 34225 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, { 34226 value: contextValue, 34227 children: children 34228 }); 34229 } 34230 /* harmony default export */ const provider = (provider_SlotFillProvider); 34231 34232 ;// ./node_modules/@wordpress/components/build-module/slot-fill/index.js 34233 /** 34234 * External dependencies 34235 */ 34236 34237 /** 34238 * WordPress dependencies 34239 */ 34240 34241 34242 /** 34243 * Internal dependencies 34244 */ 34245 34246 34247 34248 34249 34250 34251 34252 34253 34254 34255 function slot_fill_Fill(props) { 34256 // We're adding both Fills here so they can register themselves before 34257 // their respective slot has been registered. Only the Fill that has a slot 34258 // will render. The other one will return null. 34259 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 34260 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Fill, { 34261 ...props 34262 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(fill_Fill, { 34263 ...props 34264 })] 34265 }); 34266 } 34267 function UnforwardedSlot(props, ref) { 34268 const { 34269 bubblesVirtually, 34270 ...restProps 34271 } = props; 34272 if (bubblesVirtually) { 34273 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(bubbles_virtually_slot, { 34274 ...restProps, 34275 ref: ref 34276 }); 34277 } 34278 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot, { 34279 ...restProps 34280 }); 34281 } 34282 const slot_fill_Slot = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSlot); 34283 function Provider({ 34284 children, 34285 passthrough = false 34286 }) { 34287 const parent = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 34288 if (!parent.isDefault && passthrough) { 34289 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 34290 children: children 34291 }); 34292 } 34293 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(provider, { 34294 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SlotFillProvider, { 34295 children: children 34296 }) 34297 }); 34298 } 34299 Provider.displayName = 'SlotFillProvider'; 34300 function createSlotFill(key) { 34301 const baseName = typeof key === 'symbol' ? key.description : key; 34302 const FillComponent = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Fill, { 34303 name: key, 34304 ...props 34305 }); 34306 FillComponent.displayName = `$baseName}Fill`; 34307 const SlotComponent = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Slot, { 34308 name: key, 34309 ...props 34310 }); 34311 SlotComponent.displayName = `$baseName}Slot`; 34312 /** 34313 * @deprecated 6.8.0 34314 * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`. 34315 */ 34316 SlotComponent.__unstableName = key; 34317 return { 34318 name: key, 34319 Fill: FillComponent, 34320 Slot: SlotComponent 34321 }; 34322 } 34323 34324 ;// ./node_modules/@wordpress/components/build-module/popover/overlay-middlewares.js 34325 /** 34326 * External dependencies 34327 */ 34328 34329 34330 function overlayMiddlewares() { 34331 return [{ 34332 name: 'overlay', 34333 fn({ 34334 rects 34335 }) { 34336 return rects.reference; 34337 } 34338 }, floating_ui_dom_size({ 34339 apply({ 34340 rects, 34341 elements 34342 }) { 34343 var _elements$floating; 34344 const { 34345 firstElementChild 34346 } = (_elements$floating = elements.floating) !== null && _elements$floating !== void 0 ? _elements$floating : {}; 34347 34348 // Only HTMLElement instances have the `style` property. 34349 if (!(firstElementChild instanceof HTMLElement)) { 34350 return; 34351 } 34352 34353 // Reduce the height of the popover to the available space. 34354 Object.assign(firstElementChild.style, { 34355 width: `$rects.reference.width}px`, 34356 height: `$rects.reference.height}px` 34357 }); 34358 } 34359 })]; 34360 } 34361 34362 ;// ./node_modules/@wordpress/components/build-module/popover/index.js 34363 /** 34364 * External dependencies 34365 */ 34366 34367 34368 34369 34370 34371 /** 34372 * WordPress dependencies 34373 */ 34374 34375 34376 34377 34378 34379 34380 34381 /** 34382 * Internal dependencies 34383 */ 34384 34385 34386 34387 34388 34389 34390 34391 34392 /** 34393 * Name of slot in which popover should fill. 34394 * 34395 * @type {string} 34396 */ 34397 34398 const SLOT_NAME = 'Popover'; 34399 34400 // An SVG displaying a triangle facing down, filled with a solid 34401 // color and bordered in such a way to create an arrow-like effect. 34402 // Keeping the SVG's viewbox squared simplify the arrow positioning 34403 // calculations. 34404 const ArrowTriangle = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, { 34405 xmlns: "http://www.w3.org/2000/svg", 34406 viewBox: "0 0 100 100", 34407 className: "components-popover__triangle", 34408 role: "presentation", 34409 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 34410 className: "components-popover__triangle-bg", 34411 d: "M 0 0 L 50 50 L 100 0" 34412 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 34413 className: "components-popover__triangle-border", 34414 d: "M 0 0 L 50 50 L 100 0", 34415 vectorEffect: "non-scaling-stroke" 34416 })] 34417 }); 34418 const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 34419 const fallbackContainerClassname = 'components-popover__fallback-container'; 34420 const getPopoverFallbackContainer = () => { 34421 let container = document.body.querySelector('.' + fallbackContainerClassname); 34422 if (!container) { 34423 container = document.createElement('div'); 34424 container.className = fallbackContainerClassname; 34425 document.body.append(container); 34426 } 34427 return container; 34428 }; 34429 const UnforwardedPopover = (props, forwardedRef) => { 34430 const { 34431 animate = true, 34432 headerTitle, 34433 constrainTabbing, 34434 onClose, 34435 children, 34436 className, 34437 noArrow = true, 34438 position, 34439 placement: placementProp = 'bottom-start', 34440 offset: offsetProp = 0, 34441 focusOnMount = 'firstElement', 34442 anchor, 34443 expandOnMobile, 34444 onFocusOutside, 34445 __unstableSlotName = SLOT_NAME, 34446 flip = true, 34447 resize = true, 34448 shift = false, 34449 inline = false, 34450 variant, 34451 style: contentStyle, 34452 // Deprecated props 34453 __unstableForcePosition, 34454 anchorRef, 34455 anchorRect, 34456 getAnchorRect, 34457 isAlternate, 34458 // Rest 34459 ...contentProps 34460 } = useContextSystem(props, 'Popover'); 34461 let computedFlipProp = flip; 34462 let computedResizeProp = resize; 34463 if (__unstableForcePosition !== undefined) { 34464 external_wp_deprecated_default()('`__unstableForcePosition` prop in wp.components.Popover', { 34465 since: '6.1', 34466 version: '6.3', 34467 alternative: '`flip={ false }` and `resize={ false }`' 34468 }); 34469 34470 // Back-compat, set the `flip` and `resize` props 34471 // to `false` to replicate `__unstableForcePosition`. 34472 computedFlipProp = !__unstableForcePosition; 34473 computedResizeProp = !__unstableForcePosition; 34474 } 34475 if (anchorRef !== undefined) { 34476 external_wp_deprecated_default()('`anchorRef` prop in wp.components.Popover', { 34477 since: '6.1', 34478 alternative: '`anchor` prop' 34479 }); 34480 } 34481 if (anchorRect !== undefined) { 34482 external_wp_deprecated_default()('`anchorRect` prop in wp.components.Popover', { 34483 since: '6.1', 34484 alternative: '`anchor` prop' 34485 }); 34486 } 34487 if (getAnchorRect !== undefined) { 34488 external_wp_deprecated_default()('`getAnchorRect` prop in wp.components.Popover', { 34489 since: '6.1', 34490 alternative: '`anchor` prop' 34491 }); 34492 } 34493 const computedVariant = isAlternate ? 'toolbar' : variant; 34494 if (isAlternate !== undefined) { 34495 external_wp_deprecated_default()('`isAlternate` prop in wp.components.Popover', { 34496 since: '6.2', 34497 alternative: "`variant` prop with the `'toolbar'` value" 34498 }); 34499 } 34500 const arrowRef = (0,external_wp_element_namespaceObject.useRef)(null); 34501 const [fallbackReferenceElement, setFallbackReferenceElement] = (0,external_wp_element_namespaceObject.useState)(null); 34502 const anchorRefFallback = (0,external_wp_element_namespaceObject.useCallback)(node => { 34503 setFallbackReferenceElement(node); 34504 }, []); 34505 const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<'); 34506 const isExpanded = expandOnMobile && isMobileViewport; 34507 const hasArrow = !isExpanded && !noArrow; 34508 const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp; 34509 const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []), offset(offsetProp), computedFlipProp && floating_ui_dom_flip(), computedResizeProp && floating_ui_dom_size({ 34510 apply(sizeProps) { 34511 var _refs$floating$curren; 34512 const { 34513 firstElementChild 34514 } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {}; 34515 34516 // Only HTMLElement instances have the `style` property. 34517 if (!(firstElementChild instanceof HTMLElement)) { 34518 return; 34519 } 34520 34521 // Reduce the height of the popover to the available space. 34522 Object.assign(firstElementChild.style, { 34523 maxHeight: `$sizeProps.availableHeight}px`, 34524 overflow: 'auto' 34525 }); 34526 } 34527 }), shift && floating_ui_dom_shift({ 34528 crossAxis: true, 34529 limiter: floating_ui_dom_limitShift(), 34530 padding: 1 // Necessary to avoid flickering at the edge of the viewport. 34531 }), floating_ui_react_dom_arrow({ 34532 element: arrowRef 34533 })]; 34534 const slotName = (0,external_wp_element_namespaceObject.useContext)(slotNameContext) || __unstableSlotName; 34535 const slot = useSlot(slotName); 34536 let onDialogClose; 34537 if (onClose || onFocusOutside) { 34538 onDialogClose = (type, event) => { 34539 // Ideally the popover should have just a single onClose prop and 34540 // not three props that potentially do the same thing. 34541 if (type === 'focus-outside' && onFocusOutside) { 34542 onFocusOutside(event); 34543 } else if (onClose) { 34544 onClose(); 34545 } 34546 }; 34547 } 34548 const [dialogRef, dialogProps] = (0,external_wp_compose_namespaceObject.__experimentalUseDialog)({ 34549 constrainTabbing, 34550 focusOnMount, 34551 __unstableOnClose: onDialogClose, 34552 // @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675) 34553 onClose: onDialogClose 34554 }); 34555 const { 34556 // Positioning coordinates 34557 x, 34558 y, 34559 // Object with "regular" refs to both "reference" and "floating" 34560 refs, 34561 // Type of CSS position property to use (absolute or fixed) 34562 strategy, 34563 update, 34564 placement: computedPlacement, 34565 middlewareData: { 34566 arrow: arrowData 34567 } 34568 } = useFloating({ 34569 placement: normalizedPlacementFromProps === 'overlay' ? undefined : normalizedPlacementFromProps, 34570 middleware, 34571 whileElementsMounted: (referenceParam, floatingParam, updateParam) => autoUpdate(referenceParam, floatingParam, updateParam, { 34572 layoutShift: false, 34573 animationFrame: true 34574 }) 34575 }); 34576 const arrowCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => { 34577 arrowRef.current = node; 34578 update(); 34579 }, [update]); 34580 34581 // When any of the possible anchor "sources" change, 34582 // recompute the reference element (real or virtual) and its owner document. 34583 34584 const anchorRefTop = anchorRef?.top; 34585 const anchorRefBottom = anchorRef?.bottom; 34586 const anchorRefStartContainer = anchorRef?.startContainer; 34587 const anchorRefCurrent = anchorRef?.current; 34588 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 34589 const resultingReferenceElement = getReferenceElement({ 34590 anchor, 34591 anchorRef, 34592 anchorRect, 34593 getAnchorRect, 34594 fallbackReferenceElement 34595 }); 34596 refs.setReference(resultingReferenceElement); 34597 }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anchorRect, getAnchorRect, fallbackReferenceElement, refs]); 34598 const mergedFloatingRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([refs.setFloating, dialogRef, forwardedRef]); 34599 const style = isExpanded ? undefined : { 34600 position: strategy, 34601 top: 0, 34602 left: 0, 34603 // `x` and `y` are framer-motion specific props and are shorthands 34604 // for `translateX` and `translateY`. Currently it is not possible 34605 // to use `translateX` and `translateY` because those values would 34606 // be overridden by the return value of the 34607 // `placementToMotionAnimationProps` function. 34608 x: computePopoverPosition(x), 34609 y: computePopoverPosition(y) 34610 }; 34611 const shouldReduceMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 34612 const shouldAnimate = animate && !isExpanded && !shouldReduceMotion; 34613 const [animationFinished, setAnimationFinished] = (0,external_wp_element_namespaceObject.useState)(false); 34614 const { 34615 style: motionInlineStyles, 34616 ...otherMotionProps 34617 } = (0,external_wp_element_namespaceObject.useMemo)(() => placementToMotionAnimationProps(computedPlacement), [computedPlacement]); 34618 const animationProps = shouldAnimate ? { 34619 style: { 34620 ...contentStyle, 34621 ...motionInlineStyles, 34622 ...style 34623 }, 34624 onAnimationComplete: () => setAnimationFinished(true), 34625 ...otherMotionProps 34626 } : { 34627 animate: false, 34628 style: { 34629 ...contentStyle, 34630 ...style 34631 } 34632 }; 34633 34634 // When Floating UI has finished positioning and Framer Motion has finished animating 34635 // the popover, add the `is-positioned` class to signal that all transitions have finished. 34636 const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null; 34637 let content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(motion.div, { 34638 className: dist_clsx(className, { 34639 'is-expanded': isExpanded, 34640 'is-positioned': isPositioned, 34641 // Use the 'alternate' classname for 'toolbar' variant for back compat. 34642 [`is-$computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant 34643 }), 34644 ...animationProps, 34645 ...contentProps, 34646 ref: mergedFloatingRef, 34647 ...dialogProps, 34648 tabIndex: -1, 34649 children: [isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(scroll_lock, {}), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 34650 className: "components-popover__header", 34651 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 34652 className: "components-popover__header-title", 34653 children: headerTitle 34654 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 34655 className: "components-popover__close", 34656 size: "small", 34657 icon: library_close, 34658 onClick: onClose, 34659 label: (0,external_wp_i18n_namespaceObject.__)('Close') 34660 })] 34661 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 34662 className: "components-popover__content", 34663 children: children 34664 }), hasArrow && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 34665 ref: arrowCallbackRef, 34666 className: ['components-popover__arrow', `is-$computedPlacement.split('-')[0]}`].join(' '), 34667 style: { 34668 left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `$arrowData.x}px` : '', 34669 top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `$arrowData.y}px` : '' 34670 }, 34671 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ArrowTriangle, {}) 34672 })] 34673 }); 34674 const shouldRenderWithinSlot = slot.ref && !inline; 34675 const hasAnchor = anchorRef || anchorRect || anchor; 34676 if (shouldRenderWithinSlot) { 34677 content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Fill, { 34678 name: slotName, 34679 children: content 34680 }); 34681 } else if (!inline) { 34682 content = (0,external_wp_element_namespaceObject.createPortal)(/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyleProvider, { 34683 document: document, 34684 children: content 34685 }), getPopoverFallbackContainer()); 34686 } 34687 if (hasAnchor) { 34688 return content; 34689 } 34690 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 34691 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 34692 ref: anchorRefFallback 34693 }), content] 34694 }); 34695 }; 34696 34697 /** 34698 * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default. 34699 * 34700 * ```jsx 34701 * import { Button, Popover } from '@wordpress/components'; 34702 * import { useState } from '@wordpress/element'; 34703 * 34704 * const MyPopover = () => { 34705 * const [ isVisible, setIsVisible ] = useState( false ); 34706 * const toggleVisible = () => { 34707 * setIsVisible( ( state ) => ! state ); 34708 * }; 34709 * 34710 * return ( 34711 * <Button variant="secondary" onClick={ toggleVisible }> 34712 * Toggle Popover! 34713 * { isVisible && <Popover>Popover is toggled!</Popover> } 34714 * </Button> 34715 * ); 34716 * }; 34717 * ``` 34718 * 34719 */ 34720 const popover_Popover = contextConnect(UnforwardedPopover, 'Popover'); 34721 function PopoverSlot({ 34722 name = SLOT_NAME 34723 }, ref) { 34724 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Slot, { 34725 bubblesVirtually: true, 34726 name: name, 34727 className: "popover-slot", 34728 ref: ref 34729 }); 34730 } 34731 34732 // @ts-expect-error For Legacy Reasons 34733 popover_Popover.Slot = (0,external_wp_element_namespaceObject.forwardRef)(PopoverSlot); 34734 // @ts-expect-error For Legacy Reasons 34735 popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider; 34736 /* harmony default export */ const popover = (popover_Popover); 34737 34738 ;// ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js 34739 /** 34740 * External dependencies 34741 */ 34742 34743 34744 /** 34745 * WordPress dependencies 34746 */ 34747 34748 34749 34750 34751 34752 34753 /** 34754 * Internal dependencies 34755 */ 34756 34757 34758 34759 34760 34761 34762 function ListBox({ 34763 items, 34764 onSelect, 34765 selectedIndex, 34766 instanceId, 34767 listBoxId, 34768 className, 34769 Component = 'div' 34770 }) { 34771 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 34772 id: listBoxId, 34773 role: "listbox", 34774 className: "components-autocomplete__results", 34775 children: items.map((option, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 34776 id: `components-autocomplete-item-$instanceId}-$option.key}`, 34777 role: "option", 34778 __next40pxDefaultSize: true, 34779 "aria-selected": index === selectedIndex, 34780 accessibleWhenDisabled: true, 34781 disabled: option.isDisabled, 34782 className: dist_clsx('components-autocomplete__result', className, { 34783 // Unused, for backwards compatibility. 34784 'is-selected': index === selectedIndex 34785 }), 34786 variant: index === selectedIndex ? 'primary' : undefined, 34787 onClick: () => onSelect(option), 34788 children: option.label 34789 }, option.key)) 34790 }); 34791 } 34792 function getAutoCompleterUI(autocompleter) { 34793 var _autocompleter$useIte; 34794 const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : getDefaultUseItems(autocompleter); 34795 function AutocompleterUI({ 34796 filterValue, 34797 instanceId, 34798 listBoxId, 34799 className, 34800 selectedIndex, 34801 onChangeOptions, 34802 onSelect, 34803 onReset, 34804 reset, 34805 contentRef 34806 }) { 34807 const [items] = useItems(filterValue); 34808 const popoverAnchor = (0,external_wp_richText_namespaceObject.useAnchor)({ 34809 editableContentElement: contentRef.current 34810 }); 34811 const [needsA11yCompat, setNeedsA11yCompat] = (0,external_wp_element_namespaceObject.useState)(false); 34812 const popoverRef = (0,external_wp_element_namespaceObject.useRef)(null); 34813 const popoverRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([popoverRef, (0,external_wp_compose_namespaceObject.useRefEffect)(node => { 34814 if (!contentRef.current) { 34815 return; 34816 } 34817 34818 // If the popover is rendered in a different document than 34819 // the content, we need to duplicate the options list in the 34820 // content document so that it's available to the screen 34821 // readers, which check the DOM ID based aria-* attributes. 34822 setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument); 34823 }, [contentRef])]); 34824 useOnClickOutside(popoverRef, reset); 34825 const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500); 34826 function announce(options) { 34827 if (!debouncedSpeak) { 34828 return; 34829 } 34830 if (!!options.length) { 34831 if (filterValue) { 34832 debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */ 34833 (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive'); 34834 } else { 34835 debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */ 34836 (0,external_wp_i18n_namespaceObject._n)('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive'); 34837 } 34838 } else { 34839 debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive'); 34840 } 34841 } 34842 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 34843 onChangeOptions(items); 34844 announce(items); 34845 // We want to avoid introducing unexpected side effects. 34846 // See https://github.com/WordPress/gutenberg/pull/41820 34847 }, [items]); 34848 if (items.length === 0) { 34849 return null; 34850 } 34851 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 34852 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(popover, { 34853 focusOnMount: false, 34854 onClose: onReset, 34855 placement: "top-start", 34856 className: "components-autocomplete__popover", 34857 anchor: popoverAnchor, 34858 ref: popoverRefs, 34859 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, { 34860 items: items, 34861 onSelect: onSelect, 34862 selectedIndex: selectedIndex, 34863 instanceId: instanceId, 34864 listBoxId: listBoxId, 34865 className: className 34866 }) 34867 }), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)(/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, { 34868 items: items, 34869 onSelect: onSelect, 34870 selectedIndex: selectedIndex, 34871 instanceId: instanceId, 34872 listBoxId: listBoxId, 34873 className: className, 34874 Component: visually_hidden_component 34875 }), contentRef.current.ownerDocument.body)] 34876 }); 34877 } 34878 return AutocompleterUI; 34879 } 34880 function useOnClickOutside(ref, handler) { 34881 (0,external_wp_element_namespaceObject.useEffect)(() => { 34882 const listener = event => { 34883 // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element 34884 if (!ref.current || ref.current.contains(event.target)) { 34885 return; 34886 } 34887 handler(event); 34888 }; 34889 document.addEventListener('mousedown', listener); 34890 document.addEventListener('touchstart', listener); 34891 return () => { 34892 document.removeEventListener('mousedown', listener); 34893 document.removeEventListener('touchstart', listener); 34894 }; 34895 }, [handler, ref]); 34896 } 34897 34898 ;// ./node_modules/@wordpress/components/build-module/autocomplete/index.js 34899 /** 34900 * External dependencies 34901 */ 34902 34903 34904 /** 34905 * WordPress dependencies 34906 */ 34907 34908 34909 34910 34911 34912 34913 /** 34914 * Internal dependencies 34915 */ 34916 34917 34918 34919 34920 const getNodeText = node => { 34921 if (node === null) { 34922 return ''; 34923 } 34924 switch (typeof node) { 34925 case 'string': 34926 case 'number': 34927 return node.toString(); 34928 break; 34929 case 'boolean': 34930 return ''; 34931 break; 34932 case 'object': 34933 { 34934 if (node instanceof Array) { 34935 return node.map(getNodeText).join(''); 34936 } 34937 if ('props' in node) { 34938 return getNodeText(node.props.children); 34939 } 34940 break; 34941 } 34942 default: 34943 return ''; 34944 } 34945 return ''; 34946 }; 34947 const EMPTY_FILTERED_OPTIONS = []; 34948 34949 // Used for generating the instance ID 34950 const AUTOCOMPLETE_HOOK_REFERENCE = {}; 34951 function useAutocomplete({ 34952 record, 34953 onChange, 34954 onReplace, 34955 completers, 34956 contentRef 34957 }) { 34958 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(AUTOCOMPLETE_HOOK_REFERENCE); 34959 const [selectedIndex, setSelectedIndex] = (0,external_wp_element_namespaceObject.useState)(0); 34960 const [filteredOptions, setFilteredOptions] = (0,external_wp_element_namespaceObject.useState)(EMPTY_FILTERED_OPTIONS); 34961 const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)(''); 34962 const [autocompleter, setAutocompleter] = (0,external_wp_element_namespaceObject.useState)(null); 34963 const [AutocompleterUI, setAutocompleterUI] = (0,external_wp_element_namespaceObject.useState)(null); 34964 const backspacingRef = (0,external_wp_element_namespaceObject.useRef)(false); 34965 function insertCompletion(replacement) { 34966 if (autocompleter === null) { 34967 return; 34968 } 34969 const end = record.start; 34970 const start = end - autocompleter.triggerPrefix.length - filterValue.length; 34971 const toInsert = (0,external_wp_richText_namespaceObject.create)({ 34972 html: (0,external_wp_element_namespaceObject.renderToString)(replacement) 34973 }); 34974 onChange((0,external_wp_richText_namespaceObject.insert)(record, toInsert, start, end)); 34975 } 34976 function select(option) { 34977 const { 34978 getOptionCompletion 34979 } = autocompleter || {}; 34980 if (option.isDisabled) { 34981 return; 34982 } 34983 if (getOptionCompletion) { 34984 const completion = getOptionCompletion(option.value, filterValue); 34985 const isCompletionObject = obj => { 34986 return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined; 34987 }; 34988 const completionObject = isCompletionObject(completion) ? completion : { 34989 action: 'insert-at-caret', 34990 value: completion 34991 }; 34992 if ('replace' === completionObject.action) { 34993 onReplace([completionObject.value]); 34994 // When replacing, the component will unmount, so don't reset 34995 // state (below) on an unmounted component. 34996 return; 34997 } else if ('insert-at-caret' === completionObject.action) { 34998 insertCompletion(completionObject.value); 34999 } 35000 } 35001 35002 // Reset autocomplete state after insertion rather than before 35003 // so insertion events don't cause the completion menu to redisplay. 35004 reset(); 35005 } 35006 function reset() { 35007 setSelectedIndex(0); 35008 setFilteredOptions(EMPTY_FILTERED_OPTIONS); 35009 setFilterValue(''); 35010 setAutocompleter(null); 35011 setAutocompleterUI(null); 35012 } 35013 35014 /** 35015 * Load options for an autocompleter. 35016 * 35017 * @param {Array} options 35018 */ 35019 function onChangeOptions(options) { 35020 setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0); 35021 setFilteredOptions(options); 35022 } 35023 function handleKeyDown(event) { 35024 backspacingRef.current = event.key === 'Backspace'; 35025 if (!autocompleter) { 35026 return; 35027 } 35028 if (filteredOptions.length === 0) { 35029 return; 35030 } 35031 if (event.defaultPrevented) { 35032 return; 35033 } 35034 switch (event.key) { 35035 case 'ArrowUp': 35036 { 35037 const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1; 35038 setSelectedIndex(newIndex); 35039 // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902. 35040 if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) { 35041 (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive'); 35042 } 35043 break; 35044 } 35045 case 'ArrowDown': 35046 { 35047 const newIndex = (selectedIndex + 1) % filteredOptions.length; 35048 setSelectedIndex(newIndex); 35049 if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) { 35050 (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive'); 35051 } 35052 break; 35053 } 35054 case 'Escape': 35055 setAutocompleter(null); 35056 setAutocompleterUI(null); 35057 event.preventDefault(); 35058 break; 35059 case 'Enter': 35060 select(filteredOptions[selectedIndex]); 35061 break; 35062 case 'ArrowLeft': 35063 case 'ArrowRight': 35064 reset(); 35065 return; 35066 default: 35067 return; 35068 } 35069 35070 // Any handled key should prevent original behavior. This relies on 35071 // the early return in the default case. 35072 event.preventDefault(); 35073 } 35074 35075 // textContent is a primitive (string), memoizing is not strictly necessary 35076 // but this is a preemptive performance improvement, since the autocompleter 35077 // is a potential bottleneck for the editor type metric. 35078 const textContent = (0,external_wp_element_namespaceObject.useMemo)(() => { 35079 if ((0,external_wp_richText_namespaceObject.isCollapsed)(record)) { 35080 return (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, 0)); 35081 } 35082 return ''; 35083 }, [record]); 35084 (0,external_wp_element_namespaceObject.useEffect)(() => { 35085 if (!textContent) { 35086 if (autocompleter) { 35087 reset(); 35088 } 35089 return; 35090 } 35091 35092 // Find the completer with the highest triggerPrefix index in the 35093 // textContent. 35094 const completer = completers.reduce((lastTrigger, currentCompleter) => { 35095 const triggerIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix); 35096 const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1; 35097 return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger; 35098 }, null); 35099 if (!completer) { 35100 if (autocompleter) { 35101 reset(); 35102 } 35103 return; 35104 } 35105 const { 35106 allowContext, 35107 triggerPrefix 35108 } = completer; 35109 const triggerIndex = textContent.lastIndexOf(triggerPrefix); 35110 const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length); 35111 const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit. 35112 // This is a final barrier to prevent the effect from completing with 35113 // an extremely long string, which causes the editor to slow-down 35114 // significantly. This could happen, for example, if `matchingWhileBackspacing` 35115 // is true and one of the "words" end up being too long. If that's the case, 35116 // it will be caught by this guard. 35117 if (tooDistantFromTrigger) { 35118 return; 35119 } 35120 const mismatch = filteredOptions.length === 0; 35121 const wordsFromTrigger = textWithoutTrigger.split(/\s/); 35122 // We need to allow the effect to run when not backspacing and if there 35123 // was a mismatch. i.e when typing a trigger + the match string or when 35124 // clicking in an existing trigger word on the page. We do that if we 35125 // detect that we have one word from trigger in the current textual context. 35126 // 35127 // Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and 35128 // allow the effect to run. It will run until there's a mismatch. 35129 const hasOneTriggerWord = wordsFromTrigger.length === 1; 35130 // This is used to allow the effect to run when backspacing and if 35131 // "touching" a word that "belongs" to a trigger. We consider a "trigger 35132 // word" any word up to the limit of 3 from the trigger character. 35133 // Anything beyond that is ignored if there's a mismatch. This allows 35134 // us to "escape" a mismatch when backspacing, but still imposing some 35135 // sane limits. 35136 // 35137 // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but 35138 // if the user presses backspace here, it will show the completion popup again. 35139 const matchingWhileBackspacing = backspacingRef.current && wordsFromTrigger.length <= 3; 35140 if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) { 35141 if (autocompleter) { 35142 reset(); 35143 } 35144 return; 35145 } 35146 const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length)); 35147 if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) { 35148 if (autocompleter) { 35149 reset(); 35150 } 35151 return; 35152 } 35153 if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) { 35154 if (autocompleter) { 35155 reset(); 35156 } 35157 return; 35158 } 35159 if (!/[\u0000-\uFFFF]*$/.test(textWithoutTrigger)) { 35160 if (autocompleter) { 35161 reset(); 35162 } 35163 return; 35164 } 35165 const safeTrigger = escapeRegExp(completer.triggerPrefix); 35166 const text = remove_accents_default()(textContent); 35167 const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`$safeTrigger}([\u0000-\uFFFF]*)$`)); 35168 const query = match && match[1]; 35169 setAutocompleter(completer); 35170 setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI); 35171 setFilterValue(query === null ? '' : query); 35172 // We want to avoid introducing unexpected side effects. 35173 // See https://github.com/WordPress/gutenberg/pull/41820 35174 }, [textContent]); 35175 const { 35176 key: selectedKey = '' 35177 } = filteredOptions[selectedIndex] || {}; 35178 const { 35179 className 35180 } = autocompleter || {}; 35181 const isExpanded = !!autocompleter && filteredOptions.length > 0; 35182 const listBoxId = isExpanded ? `components-autocomplete-listbox-$instanceId}` : undefined; 35183 const activeId = isExpanded ? `components-autocomplete-item-$instanceId}-$selectedKey}` : null; 35184 const hasSelection = record.start !== undefined; 35185 return { 35186 listBoxId, 35187 activeId, 35188 onKeyDown: withIgnoreIMEEvents(handleKeyDown), 35189 popover: hasSelection && AutocompleterUI && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AutocompleterUI, { 35190 className: className, 35191 filterValue: filterValue, 35192 instanceId: instanceId, 35193 listBoxId: listBoxId, 35194 selectedIndex: selectedIndex, 35195 onChangeOptions: onChangeOptions, 35196 onSelect: select, 35197 value: record, 35198 contentRef: contentRef, 35199 reset: reset 35200 }) 35201 }; 35202 } 35203 function useLastDifferentValue(value) { 35204 const history = (0,external_wp_element_namespaceObject.useRef)(new Set()); 35205 history.current.add(value); 35206 35207 // Keep the history size to 2. 35208 if (history.current.size > 2) { 35209 history.current.delete(Array.from(history.current)[0]); 35210 } 35211 return Array.from(history.current)[0]; 35212 } 35213 function useAutocompleteProps(options) { 35214 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 35215 const onKeyDownRef = (0,external_wp_element_namespaceObject.useRef)(); 35216 const { 35217 record 35218 } = options; 35219 const previousRecord = useLastDifferentValue(record); 35220 const { 35221 popover, 35222 listBoxId, 35223 activeId, 35224 onKeyDown 35225 } = useAutocomplete({ 35226 ...options, 35227 contentRef: ref 35228 }); 35229 onKeyDownRef.current = onKeyDown; 35230 const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useRefEffect)(element => { 35231 function _onKeyDown(event) { 35232 onKeyDownRef.current?.(event); 35233 } 35234 element.addEventListener('keydown', _onKeyDown); 35235 return () => { 35236 element.removeEventListener('keydown', _onKeyDown); 35237 }; 35238 }, [])]); 35239 35240 // We only want to show the popover if the user has typed something. 35241 const didUserInput = record.text !== previousRecord?.text; 35242 if (!didUserInput) { 35243 return { 35244 ref: mergedRefs 35245 }; 35246 } 35247 return { 35248 ref: mergedRefs, 35249 children: popover, 35250 'aria-autocomplete': listBoxId ? 'list' : undefined, 35251 'aria-owns': listBoxId, 35252 'aria-activedescendant': activeId 35253 }; 35254 } 35255 function Autocomplete({ 35256 children, 35257 isSelected, 35258 ...options 35259 }) { 35260 const { 35261 popover, 35262 ...props 35263 } = useAutocomplete(options); 35264 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 35265 children: [children(props), isSelected && popover] 35266 }); 35267 } 35268 35269 ;// ./node_modules/@wordpress/components/build-module/base-control/hooks.js 35270 /** 35271 * WordPress dependencies 35272 */ 35273 35274 35275 /** 35276 * Internal dependencies 35277 */ 35278 35279 /** 35280 * Generate props for the `BaseControl` and the inner control itself. 35281 * 35282 * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements. 35283 * 35284 * @param props 35285 */ 35286 function useBaseControlProps(props) { 35287 const { 35288 help, 35289 id: preferredId, 35290 ...restProps 35291 } = props; 35292 const uniqueId = (0,external_wp_compose_namespaceObject.useInstanceId)(base_control, 'wp-components-base-control', preferredId); 35293 return { 35294 baseControlProps: { 35295 id: uniqueId, 35296 help, 35297 ...restProps 35298 }, 35299 controlProps: { 35300 id: uniqueId, 35301 ...(!!help ? { 35302 'aria-describedby': `$uniqueId}__help` 35303 } : {}) 35304 } 35305 }; 35306 } 35307 35308 ;// ./node_modules/@wordpress/icons/build-module/library/link.js 35309 /** 35310 * WordPress dependencies 35311 */ 35312 35313 35314 const link_link = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 35315 xmlns: "http://www.w3.org/2000/svg", 35316 viewBox: "0 0 24 24", 35317 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 35318 d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z" 35319 }) 35320 }); 35321 /* harmony default export */ const library_link = (link_link); 35322 35323 ;// ./node_modules/@wordpress/icons/build-module/library/link-off.js 35324 /** 35325 * WordPress dependencies 35326 */ 35327 35328 35329 const linkOff = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 35330 xmlns: "http://www.w3.org/2000/svg", 35331 viewBox: "0 0 24 24", 35332 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 35333 d: "M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z" 35334 }) 35335 }); 35336 /* harmony default export */ const link_off = (linkOff); 35337 35338 ;// ./node_modules/@wordpress/components/build-module/border-box-control/styles.js 35339 function border_box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 35340 /** 35341 * External dependencies 35342 */ 35343 35344 35345 /** 35346 * Internal dependencies 35347 */ 35348 35349 const borderBoxControl = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 35350 const linkedBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1;", rtl({ 35351 marginRight: '24px' 35352 })(), ";" + ( true ? "" : 0), true ? "" : 0); 35353 const wrapper = true ? { 35354 name: "bjn8wh", 35355 styles: "position:relative" 35356 } : 0; 35357 const borderBoxControlLinkedButton = size => { 35358 return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '8px' : '3px', ";", rtl({ 35359 right: 0 35360 })(), " line-height:0;" + ( true ? "" : 0), true ? "" : 0); 35361 }; 35362 const borderBoxStyleWithFallback = border => { 35363 const { 35364 color = COLORS.gray[200], 35365 style = 'solid', 35366 width = config_values.borderWidth 35367 } = border || {}; 35368 const clampedWidth = width !== config_values.borderWidth ? `clamp(1px, $width}, 10px)` : width; 35369 const hasVisibleBorder = !!width && width !== '0' || !!color; 35370 const borderStyle = hasVisibleBorder ? style || 'solid' : style; 35371 return `$color} $borderStyle} $clampedWidth}`; 35372 }; 35373 const borderBoxControlVisualizer = (borders, size) => { 35374 return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '20px' : '15px', ";right:", size === '__unstable-large' ? '39px' : '29px', ";bottom:", size === '__unstable-large' ? '20px' : '15px', ";left:", size === '__unstable-large' ? '39px' : '29px', ";border-top:", borderBoxStyleWithFallback(borders?.top), ";border-bottom:", borderBoxStyleWithFallback(borders?.bottom), ";", rtl({ 35375 borderLeft: borderBoxStyleWithFallback(borders?.left) 35376 })(), " ", rtl({ 35377 borderRight: borderBoxStyleWithFallback(borders?.right) 35378 })(), ";" + ( true ? "" : 0), true ? "" : 0); 35379 }; 35380 const borderBoxControlSplitControls = size => /*#__PURE__*/emotion_react_browser_esm_css("position:relative;flex:1;width:", size === '__unstable-large' ? undefined : '80%', ";" + ( true ? "" : 0), true ? "" : 0); 35381 const centeredBorderControl = true ? { 35382 name: "1nwbfnf", 35383 styles: "grid-column:span 2;margin:0 auto" 35384 } : 0; 35385 const rightBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 35386 marginLeft: 'auto' 35387 })(), ";" + ( true ? "" : 0), true ? "" : 0); 35388 35389 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/hook.js 35390 /** 35391 * WordPress dependencies 35392 */ 35393 35394 35395 /** 35396 * Internal dependencies 35397 */ 35398 35399 35400 35401 function useBorderBoxControlLinkedButton(props) { 35402 const { 35403 className, 35404 size = 'default', 35405 ...otherProps 35406 } = useContextSystem(props, 'BorderBoxControlLinkedButton'); 35407 35408 // Generate class names. 35409 const cx = useCx(); 35410 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 35411 return cx(borderBoxControlLinkedButton(size), className); 35412 }, [className, cx, size]); 35413 return { 35414 ...otherProps, 35415 className: classes 35416 }; 35417 } 35418 35419 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/component.js 35420 /** 35421 * WordPress dependencies 35422 */ 35423 35424 35425 35426 /** 35427 * Internal dependencies 35428 */ 35429 35430 35431 35432 35433 const BorderBoxControlLinkedButton = (props, forwardedRef) => { 35434 const { 35435 className, 35436 isLinked, 35437 ...buttonProps 35438 } = useBorderBoxControlLinkedButton(props); 35439 const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); 35440 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 35441 ...buttonProps, 35442 size: "small", 35443 icon: isLinked ? library_link : link_off, 35444 iconSize: 24, 35445 label: label, 35446 ref: forwardedRef, 35447 className: className 35448 }); 35449 }; 35450 const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton'); 35451 /* harmony default export */ const border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton); 35452 35453 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/hook.js 35454 /** 35455 * WordPress dependencies 35456 */ 35457 35458 35459 /** 35460 * Internal dependencies 35461 */ 35462 35463 35464 35465 function useBorderBoxControlVisualizer(props) { 35466 const { 35467 className, 35468 value, 35469 size = 'default', 35470 ...otherProps 35471 } = useContextSystem(props, 'BorderBoxControlVisualizer'); 35472 35473 // Generate class names. 35474 const cx = useCx(); 35475 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 35476 return cx(borderBoxControlVisualizer(value, size), className); 35477 }, [cx, className, value, size]); 35478 return { 35479 ...otherProps, 35480 className: classes, 35481 value 35482 }; 35483 } 35484 35485 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/component.js 35486 /** 35487 * Internal dependencies 35488 */ 35489 35490 35491 35492 35493 const BorderBoxControlVisualizer = (props, forwardedRef) => { 35494 const { 35495 value, 35496 ...otherProps 35497 } = useBorderBoxControlVisualizer(props); 35498 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 35499 ...otherProps, 35500 ref: forwardedRef 35501 }); 35502 }; 35503 const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer'); 35504 /* harmony default export */ const border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer); 35505 35506 ;// ./node_modules/@wordpress/icons/build-module/library/line-solid.js 35507 /** 35508 * WordPress dependencies 35509 */ 35510 35511 35512 const lineSolid = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 35513 xmlns: "http://www.w3.org/2000/svg", 35514 viewBox: "0 0 24 24", 35515 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 35516 d: "M5 11.25h14v1.5H5z" 35517 }) 35518 }); 35519 /* harmony default export */ const line_solid = (lineSolid); 35520 35521 ;// ./node_modules/@wordpress/icons/build-module/library/line-dashed.js 35522 /** 35523 * WordPress dependencies 35524 */ 35525 35526 35527 const lineDashed = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 35528 xmlns: "http://www.w3.org/2000/svg", 35529 viewBox: "0 0 24 24", 35530 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 35531 fillRule: "evenodd", 35532 d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z", 35533 clipRule: "evenodd" 35534 }) 35535 }); 35536 /* harmony default export */ const line_dashed = (lineDashed); 35537 35538 ;// ./node_modules/@wordpress/icons/build-module/library/line-dotted.js 35539 /** 35540 * WordPress dependencies 35541 */ 35542 35543 35544 const lineDotted = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 35545 xmlns: "http://www.w3.org/2000/svg", 35546 viewBox: "0 0 24 24", 35547 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 35548 fillRule: "evenodd", 35549 d: "M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z", 35550 clipRule: "evenodd" 35551 }) 35552 }); 35553 /* harmony default export */ const line_dotted = (lineDotted); 35554 35555 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/styles.js 35556 35557 function toggle_group_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 35558 /** 35559 * External dependencies 35560 */ 35561 35562 /** 35563 * Internal dependencies 35564 */ 35565 35566 const toggleGroupControl = ({ 35567 isBlock, 35568 isDeselectable, 35569 size 35570 }) => /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", config_values.radiusSmall, ";display:inline-flex;min-width:0;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), "@media not ( prefers-reduced-motion ){&[data-indicator-animated]::before{transition-property:transform,border-radius;transition-duration:0.2s;transition-timing-function:ease-out;}}&::before{content:'';position:absolute;pointer-events:none;background:", COLORS.theme.foreground, ";outline:2px solid transparent;outline-offset:-3px;--antialiasing-factor:100;border-radius:calc(\n\t\t\t\t", config_values.radiusXSmall, " /\n\t\t\t\t\t(\n\t\t\t\t\t\tvar( --selected-width, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t)/", config_values.radiusXSmall, ";left:-1px;width:calc( var( --antialiasing-factor ) * 1px );height:calc( var( --selected-height, 0 ) * 1px );transform-origin:left top;transform:translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(\n\t\t\t\tcalc(\n\t\t\t\t\tvar( --selected-width, 0 ) / var( --antialiasing-factor )\n\t\t\t\t)\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0); 35571 const enclosingBorders = isBlock => { 35572 const enclosingBorder = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.ui.border, ";" + ( true ? "" : 0), true ? "" : 0); 35573 return /*#__PURE__*/emotion_react_browser_esm_css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";z-index:1;outline:2px solid transparent;outline-offset:-2px;}" + ( true ? "" : 0), true ? "" : 0); 35574 }; 35575 var styles_ref = true ? { 35576 name: "1aqh2c7", 35577 styles: "min-height:40px;padding:3px" 35578 } : 0; 35579 var _ref2 = true ? { 35580 name: "1ndywgm", 35581 styles: "min-height:36px;padding:2px" 35582 } : 0; 35583 const toggleGroupControlSize = size => { 35584 const styles = { 35585 default: _ref2, 35586 '__unstable-large': styles_ref 35587 }; 35588 return styles[size]; 35589 }; 35590 const toggle_group_control_styles_block = true ? { 35591 name: "7whenc", 35592 styles: "display:flex;width:100%" 35593 } : 0; 35594 const VisualLabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 35595 target: "eakva830" 35596 } : 0)( true ? { 35597 name: "zjik7", 35598 styles: "display:flex" 35599 } : 0); 35600 35601 ;// ./node_modules/@ariakit/core/esm/radio/radio-store.js 35602 "use client"; 35603 35604 35605 35606 35607 35608 35609 35610 35611 // src/radio/radio-store.ts 35612 function createRadioStore(_a = {}) { 35613 var props = _3YLGPPWQ_objRest(_a, []); 35614 var _a2; 35615 const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState(); 35616 const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 35617 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true) 35618 })); 35619 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), { 35620 value: defaultValue( 35621 props.value, 35622 syncState == null ? void 0 : syncState.value, 35623 props.defaultValue, 35624 null 35625 ) 35626 }); 35627 const radio = createStore(initialState, composite, props.store); 35628 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), radio), { 35629 setValue: (value) => radio.setState("value", value) 35630 }); 35631 } 35632 35633 35634 ;// ./node_modules/@ariakit/react-core/esm/__chunks/4BXJGRNH.js 35635 "use client"; 35636 35637 35638 35639 // src/radio/radio-store.ts 35640 35641 function useRadioStoreProps(store, update, props) { 35642 store = useCompositeStoreProps(store, update, props); 35643 useStoreProps(store, props, "value", "setValue"); 35644 return store; 35645 } 35646 function useRadioStore(props = {}) { 35647 const [store, update] = YV4JVR4I_useStore(createRadioStore, props); 35648 return useRadioStoreProps(store, update, props); 35649 } 35650 35651 35652 35653 ;// ./node_modules/@ariakit/react-core/esm/__chunks/UVUMR3WP.js 35654 "use client"; 35655 35656 35657 35658 // src/radio/radio-context.tsx 35659 var UVUMR3WP_ctx = createStoreContext( 35660 [CompositeContextProvider], 35661 [CompositeScopedContextProvider] 35662 ); 35663 var useRadioContext = UVUMR3WP_ctx.useContext; 35664 var useRadioScopedContext = UVUMR3WP_ctx.useScopedContext; 35665 var useRadioProviderContext = UVUMR3WP_ctx.useProviderContext; 35666 var RadioContextProvider = UVUMR3WP_ctx.ContextProvider; 35667 var RadioScopedContextProvider = UVUMR3WP_ctx.ScopedContextProvider; 35668 35669 35670 35671 ;// ./node_modules/@ariakit/react-core/esm/radio/radio-group.js 35672 "use client"; 35673 35674 35675 35676 35677 35678 35679 35680 35681 35682 35683 35684 35685 // src/radio/radio-group.tsx 35686 35687 35688 var radio_group_TagName = "div"; 35689 var useRadioGroup = createHook( 35690 function useRadioGroup2(_a) { 35691 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 35692 const context = useRadioProviderContext(); 35693 store = store || context; 35694 invariant( 35695 store, 35696 false && 0 35697 ); 35698 props = useWrapElement( 35699 props, 35700 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioScopedContextProvider, { value: store, children: element }), 35701 [store] 35702 ); 35703 props = _3YLGPPWQ_spreadValues({ 35704 role: "radiogroup" 35705 }, props); 35706 props = useComposite(_3YLGPPWQ_spreadValues({ store }, props)); 35707 return props; 35708 } 35709 ); 35710 var RadioGroup = forwardRef2(function RadioGroup2(props) { 35711 const htmlProps = useRadioGroup(props); 35712 return LMDWO4NN_createElement(radio_group_TagName, htmlProps); 35713 }); 35714 35715 35716 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/context.js 35717 /** 35718 * WordPress dependencies 35719 */ 35720 35721 35722 /** 35723 * Internal dependencies 35724 */ 35725 35726 const ToggleGroupControlContext = (0,external_wp_element_namespaceObject.createContext)({}); 35727 const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext); 35728 /* harmony default export */ const toggle_group_control_context = (ToggleGroupControlContext); 35729 35730 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/utils.js 35731 /** 35732 * WordPress dependencies 35733 */ 35734 35735 35736 35737 /** 35738 * Internal dependencies 35739 */ 35740 35741 /** 35742 * Used to determine, via an internal heuristics, whether an `undefined` value 35743 * received for the `value` prop should be interpreted as the component being 35744 * used in uncontrolled mode, or as an "empty" value for controlled mode. 35745 * 35746 * @param valueProp The received `value` 35747 */ 35748 function useComputeControlledOrUncontrolledValue(valueProp) { 35749 const isInitialRenderRef = (0,external_wp_element_namespaceObject.useRef)(true); 35750 const prevValueProp = (0,external_wp_compose_namespaceObject.usePrevious)(valueProp); 35751 const prevIsControlledRef = (0,external_wp_element_namespaceObject.useRef)(false); 35752 (0,external_wp_element_namespaceObject.useEffect)(() => { 35753 if (isInitialRenderRef.current) { 35754 isInitialRenderRef.current = false; 35755 } 35756 }, []); 35757 35758 // Assume the component is being used in controlled mode on the first re-render 35759 // that has a different `valueProp` from the previous render. 35760 const isControlled = prevIsControlledRef.current || !isInitialRenderRef.current && prevValueProp !== valueProp; 35761 (0,external_wp_element_namespaceObject.useEffect)(() => { 35762 prevIsControlledRef.current = isControlled; 35763 }, [isControlled]); 35764 if (isControlled) { 35765 // When in controlled mode, use `''` instead of `undefined` 35766 return { 35767 value: valueProp !== null && valueProp !== void 0 ? valueProp : '', 35768 defaultValue: undefined 35769 }; 35770 } 35771 35772 // When in uncontrolled mode, the `value` should be intended as the initial value 35773 return { 35774 value: undefined, 35775 defaultValue: valueProp 35776 }; 35777 } 35778 35779 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js 35780 /** 35781 * External dependencies 35782 */ 35783 35784 35785 35786 /** 35787 * WordPress dependencies 35788 */ 35789 35790 35791 35792 35793 /** 35794 * Internal dependencies 35795 */ 35796 35797 35798 35799 35800 function UnforwardedToggleGroupControlAsRadioGroup({ 35801 children, 35802 isAdaptiveWidth, 35803 label, 35804 onChange: onChangeProp, 35805 size, 35806 value: valueProp, 35807 id: idProp, 35808 setSelectedElement, 35809 ...otherProps 35810 }, forwardedRef) { 35811 const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group'); 35812 const baseId = idProp || generatedId; 35813 35814 // Use a heuristic to understand if the component is being used in controlled 35815 // or uncontrolled mode, and consequently: 35816 // - when controlled, convert `undefined` values to `''` (ie. "no value") 35817 // - use the `value` prop as the `defaultValue` when uncontrolled 35818 const { 35819 value, 35820 defaultValue 35821 } = useComputeControlledOrUncontrolledValue(valueProp); 35822 35823 // `useRadioStore`'s `setValue` prop can be called with `null`, while 35824 // the component's `onChange` prop only expects `undefined` 35825 const wrappedOnChangeProp = onChangeProp ? v => { 35826 onChangeProp(v !== null && v !== void 0 ? v : undefined); 35827 } : undefined; 35828 const radio = useRadioStore({ 35829 defaultValue, 35830 value, 35831 setValue: wrappedOnChangeProp, 35832 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 35833 }); 35834 const selectedValue = useStoreState(radio, 'value'); 35835 const setValue = radio.setValue; 35836 35837 // Ensures that the active id is also reset after the value is "reset" by the consumer. 35838 (0,external_wp_element_namespaceObject.useEffect)(() => { 35839 if (selectedValue === '') { 35840 radio.setActiveId(undefined); 35841 } 35842 }, [radio, selectedValue]); 35843 const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 35844 activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(), 35845 baseId, 35846 isBlock: !isAdaptiveWidth, 35847 size, 35848 // @ts-expect-error - This is wrong and we should fix it. 35849 value: selectedValue, 35850 // @ts-expect-error - This is wrong and we should fix it. 35851 setValue, 35852 setSelectedElement 35853 }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]); 35854 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, { 35855 value: groupContextValue, 35856 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, { 35857 store: radio, 35858 "aria-label": label, 35859 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {}), 35860 ...otherProps, 35861 id: baseId, 35862 ref: forwardedRef, 35863 children: children 35864 }) 35865 }); 35866 } 35867 const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup); 35868 35869 ;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-value.js 35870 /** 35871 * WordPress dependencies 35872 */ 35873 35874 /** 35875 * Simplified and improved implementation of useControlledState. 35876 * 35877 * @param props 35878 * @param props.defaultValue 35879 * @param props.value 35880 * @param props.onChange 35881 * @return The controlled value and the value setter. 35882 */ 35883 function useControlledValue({ 35884 defaultValue, 35885 onChange, 35886 value: valueProp 35887 }) { 35888 const hasValue = typeof valueProp !== 'undefined'; 35889 const initialValue = hasValue ? valueProp : defaultValue; 35890 const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialValue); 35891 const value = hasValue ? valueProp : state; 35892 let setValue; 35893 if (hasValue && typeof onChange === 'function') { 35894 setValue = onChange; 35895 } else if (!hasValue && typeof onChange === 'function') { 35896 setValue = nextValue => { 35897 onChange(nextValue); 35898 setState(nextValue); 35899 }; 35900 } else { 35901 setValue = setState; 35902 } 35903 return [value, setValue]; 35904 } 35905 35906 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js 35907 /** 35908 * WordPress dependencies 35909 */ 35910 35911 35912 35913 /** 35914 * Internal dependencies 35915 */ 35916 35917 35918 35919 35920 35921 function UnforwardedToggleGroupControlAsButtonGroup({ 35922 children, 35923 isAdaptiveWidth, 35924 label, 35925 onChange, 35926 size, 35927 value: valueProp, 35928 id: idProp, 35929 setSelectedElement, 35930 ...otherProps 35931 }, forwardedRef) { 35932 const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group'); 35933 const baseId = idProp || generatedId; 35934 35935 // Use a heuristic to understand if the component is being used in controlled 35936 // or uncontrolled mode, and consequently: 35937 // - when controlled, convert `undefined` values to `''` (ie. "no value") 35938 // - use the `value` prop as the `defaultValue` when uncontrolled 35939 const { 35940 value, 35941 defaultValue 35942 } = useComputeControlledOrUncontrolledValue(valueProp); 35943 const [selectedValue, setSelectedValue] = useControlledValue({ 35944 defaultValue, 35945 value, 35946 onChange 35947 }); 35948 const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 35949 baseId, 35950 value: selectedValue, 35951 setValue: setSelectedValue, 35952 isBlock: !isAdaptiveWidth, 35953 isDeselectable: true, 35954 size, 35955 setSelectedElement 35956 }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]); 35957 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, { 35958 value: groupContextValue, 35959 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 35960 "aria-label": label, 35961 ...otherProps, 35962 ref: forwardedRef, 35963 role: "group", 35964 children: children 35965 }) 35966 }); 35967 } 35968 const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup); 35969 35970 ;// ./node_modules/@wordpress/components/build-module/utils/element-rect.js 35971 /* eslint-disable jsdoc/require-param */ 35972 /** 35973 * WordPress dependencies 35974 */ 35975 35976 35977 35978 /** 35979 * The position and dimensions of an element, relative to its offset parent. 35980 */ 35981 35982 /** 35983 * An `ElementOffsetRect` object with all values set to zero. 35984 */ 35985 const NULL_ELEMENT_OFFSET_RECT = { 35986 element: undefined, 35987 top: 0, 35988 right: 0, 35989 bottom: 0, 35990 left: 0, 35991 width: 0, 35992 height: 0 35993 }; 35994 35995 /** 35996 * Returns the position and dimensions of an element, relative to its offset 35997 * parent, with subpixel precision. Values reflect the real measures before any 35998 * potential scaling distortions along the X and Y axes. 35999 * 36000 * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver` 36001 * entries are not suitable, such as when the element is transformed, and when 36002 * `element.offset<Top|Left|Width|Height>` methods are not precise enough. 36003 * 36004 * **Note:** in some contexts, like when the scale is 0, this method will fail 36005 * because it's impossible to calculate a scaling ratio. When that happens, it 36006 * will return `undefined`. 36007 */ 36008 function getElementOffsetRect(element) { 36009 var _offsetParent$getBoun, _offsetParent$scrollL, _offsetParent$scrollT; 36010 // Position and dimension values computed with `getBoundingClientRect` have 36011 // subpixel precision, but are affected by distortions since they represent 36012 // the "real" measures, or in other words, the actual final values as rendered 36013 // by the browser. 36014 const rect = element.getBoundingClientRect(); 36015 if (rect.width === 0 || rect.height === 0) { 36016 return; 36017 } 36018 const offsetParent = element.offsetParent; 36019 const offsetParentRect = (_offsetParent$getBoun = offsetParent?.getBoundingClientRect()) !== null && _offsetParent$getBoun !== void 0 ? _offsetParent$getBoun : NULL_ELEMENT_OFFSET_RECT; 36020 const offsetParentScrollX = (_offsetParent$scrollL = offsetParent?.scrollLeft) !== null && _offsetParent$scrollL !== void 0 ? _offsetParent$scrollL : 0; 36021 const offsetParentScrollY = (_offsetParent$scrollT = offsetParent?.scrollTop) !== null && _offsetParent$scrollT !== void 0 ? _offsetParent$scrollT : 0; 36022 36023 // Computed widths and heights have subpixel precision, and are not affected 36024 // by distortions. 36025 const computedWidth = parseFloat(getComputedStyle(element).width); 36026 const computedHeight = parseFloat(getComputedStyle(element).height); 36027 36028 // We can obtain the current scale factor for the element by comparing "computed" 36029 // dimensions with the "real" ones. 36030 const scaleX = computedWidth / rect.width; 36031 const scaleY = computedHeight / rect.height; 36032 return { 36033 element, 36034 // To obtain the adjusted values for the position: 36035 // 1. Compute the element's position relative to the offset parent. 36036 // 2. Correct for the scale factor. 36037 // 3. Adjust for the scroll position of the offset parent. 36038 top: (rect.top - offsetParentRect?.top) * scaleY + offsetParentScrollY, 36039 right: (offsetParentRect?.right - rect.right) * scaleX - offsetParentScrollX, 36040 bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY - offsetParentScrollY, 36041 left: (rect.left - offsetParentRect?.left) * scaleX + offsetParentScrollX, 36042 // Computed dimensions don't need any adjustments. 36043 width: computedWidth, 36044 height: computedHeight 36045 }; 36046 } 36047 const POLL_RATE = 100; 36048 36049 /** 36050 * Tracks the position and dimensions of an element, relative to its offset 36051 * parent. The element can be changed dynamically. 36052 * 36053 * When no element is provided (`null` or `undefined`), the hook will return 36054 * a "null" rect, in which all values are `0` and `element` is `undefined`. 36055 * 36056 * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s 36057 * documentation for more details). When that happens, this hook will attempt 36058 * to measure again after a frame, and if that fails, it will poll every 100 36059 * milliseconds until it succeeds. 36060 */ 36061 function useTrackElementOffsetRect(targetElement, deps = []) { 36062 const [indicatorPosition, setIndicatorPosition] = (0,external_wp_element_namespaceObject.useState)(NULL_ELEMENT_OFFSET_RECT); 36063 const intervalRef = (0,external_wp_element_namespaceObject.useRef)(); 36064 const measure = (0,external_wp_compose_namespaceObject.useEvent)(() => { 36065 // Check that the targetElement is still attached to the DOM, in case 36066 // it was removed since the last `measure` call. 36067 if (targetElement && targetElement.isConnected) { 36068 const elementOffsetRect = getElementOffsetRect(targetElement); 36069 if (elementOffsetRect) { 36070 setIndicatorPosition(elementOffsetRect); 36071 clearInterval(intervalRef.current); 36072 return true; 36073 } 36074 } else { 36075 clearInterval(intervalRef.current); 36076 } 36077 return false; 36078 }); 36079 const setElement = (0,external_wp_compose_namespaceObject.useResizeObserver)(() => { 36080 if (!measure()) { 36081 requestAnimationFrame(() => { 36082 if (!measure()) { 36083 intervalRef.current = setInterval(measure, POLL_RATE); 36084 } 36085 }); 36086 } 36087 }); 36088 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36089 setElement(targetElement); 36090 if (!targetElement) { 36091 setIndicatorPosition(NULL_ELEMENT_OFFSET_RECT); 36092 } 36093 }, [setElement, targetElement]); 36094 36095 // Escape hatch to force a remeasurement when something else changes rather 36096 // than the target elements' ref or size (for example, the target element 36097 // can change its position within the tablist). 36098 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36099 measure(); 36100 // `measure` is a stable function, so it's safe to omit it from the deps array. 36101 // deps can't be statically analyzed by ESLint 36102 }, deps); 36103 return indicatorPosition; 36104 } 36105 36106 /* eslint-enable jsdoc/require-param */ 36107 36108 ;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-on-value-update.js 36109 /* eslint-disable jsdoc/require-param */ 36110 /** 36111 * WordPress dependencies 36112 */ 36113 36114 36115 36116 /** 36117 * Context object for the `onUpdate` callback of `useOnValueUpdate`. 36118 */ 36119 36120 /** 36121 * Calls the `onUpdate` callback when the `value` changes. 36122 */ 36123 function useOnValueUpdate( 36124 /** 36125 * The value to watch for changes. 36126 */ 36127 value, 36128 /** 36129 * Callback to fire when the value changes. 36130 */ 36131 onUpdate) { 36132 const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(value); 36133 const updateCallbackEvent = (0,external_wp_compose_namespaceObject.useEvent)(onUpdate); 36134 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36135 if (previousValueRef.current !== value) { 36136 updateCallbackEvent({ 36137 previousValue: previousValueRef.current 36138 }); 36139 previousValueRef.current = value; 36140 } 36141 }, [updateCallbackEvent, value]); 36142 } 36143 /* eslint-enable jsdoc/require-param */ 36144 36145 ;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-animated-offset-rect.js 36146 /* eslint-disable jsdoc/require-param */ 36147 36148 /** 36149 * WordPress dependencies 36150 */ 36151 36152 36153 /** 36154 * Internal dependencies 36155 */ 36156 36157 36158 36159 /** 36160 * A utility used to animate something in a container component based on the "offset 36161 * rect" (position relative to the container and size) of a subelement. For example, 36162 * this is useful to render an indicator for the selected option of a component, and 36163 * to animate it when the selected option changes. 36164 * 36165 * Takes in a container element and the up-to-date "offset rect" of the target 36166 * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following: 36167 * 36168 * - Adds CSS variables with rect information to the container, so that the indicator 36169 * can be rendered and animated with them. These are kept up-to-date, enabling CSS 36170 * transitions on change. 36171 * - Sets an attribute (`data-subelement-animated` by default) when the tracked 36172 * element changes, so that the target (e.g. the indicator) can be animated to its 36173 * new size and position. 36174 * - Removes the attribute when the animation is done. 36175 * 36176 * The need for the attribute is due to the fact that the rect might update in 36177 * situations other than when the tracked element changes, e.g. the tracked element 36178 * might be resized. In such cases, there is no need to animate the indicator, and 36179 * the change in size or position of the indicator needs to be reflected immediately. 36180 */ 36181 function useAnimatedOffsetRect( 36182 /** 36183 * The container element. 36184 */ 36185 container, 36186 /** 36187 * The rect of the tracked element. 36188 */ 36189 rect, { 36190 prefix = 'subelement', 36191 dataAttribute = `$prefix}-animated`, 36192 transitionEndFilter = () => true, 36193 roundRect = false 36194 } = {}) { 36195 const setProperties = (0,external_wp_compose_namespaceObject.useEvent)(() => { 36196 Object.keys(rect).forEach(property => property !== 'element' && container?.style.setProperty(`--$prefix}-$property}`, String(roundRect ? Math.floor(rect[property]) : rect[property]))); 36197 }); 36198 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36199 setProperties(); 36200 }, [rect, setProperties]); 36201 useOnValueUpdate(rect.element, ({ 36202 previousValue 36203 }) => { 36204 // Only enable the animation when moving from one element to another. 36205 if (rect.element && previousValue) { 36206 container?.setAttribute(`data-$dataAttribute}`, ''); 36207 } 36208 }); 36209 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36210 function onTransitionEnd(event) { 36211 if (transitionEndFilter(event)) { 36212 container?.removeAttribute(`data-$dataAttribute}`); 36213 } 36214 } 36215 container?.addEventListener('transitionend', onTransitionEnd); 36216 return () => container?.removeEventListener('transitionend', onTransitionEnd); 36217 }, [dataAttribute, container, transitionEndFilter]); 36218 } 36219 /* eslint-enable jsdoc/require-param */ 36220 36221 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/component.js 36222 /** 36223 * External dependencies 36224 */ 36225 36226 /** 36227 * WordPress dependencies 36228 */ 36229 36230 36231 /** 36232 * Internal dependencies 36233 */ 36234 36235 36236 36237 36238 36239 36240 36241 36242 36243 36244 36245 36246 36247 function UnconnectedToggleGroupControl(props, forwardedRef) { 36248 const { 36249 __nextHasNoMarginBottom = false, 36250 __next40pxDefaultSize = false, 36251 __shouldNotWarnDeprecated36pxSize, 36252 className, 36253 isAdaptiveWidth = false, 36254 isBlock = false, 36255 isDeselectable = false, 36256 label, 36257 hideLabelFromVision = false, 36258 help, 36259 onChange, 36260 size = 'default', 36261 value, 36262 children, 36263 ...otherProps 36264 } = useContextSystem(props, 'ToggleGroupControl'); 36265 const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size; 36266 const [selectedElement, setSelectedElement] = (0,external_wp_element_namespaceObject.useState)(); 36267 const [controlElement, setControlElement] = (0,external_wp_element_namespaceObject.useState)(); 36268 const refs = (0,external_wp_compose_namespaceObject.useMergeRefs)([setControlElement, forwardedRef]); 36269 const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined); 36270 useAnimatedOffsetRect(controlElement, selectedRect, { 36271 prefix: 'selected', 36272 dataAttribute: 'indicator-animated', 36273 transitionEndFilter: event => event.pseudoElement === '::before', 36274 roundRect: true 36275 }); 36276 const cx = useCx(); 36277 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(toggleGroupControl({ 36278 isBlock, 36279 isDeselectable, 36280 size: normalizedSize 36281 }), isBlock && toggle_group_control_styles_block, className), [className, cx, isBlock, isDeselectable, normalizedSize]); 36282 const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup; 36283 maybeWarnDeprecated36pxSize({ 36284 componentName: 'ToggleGroupControl', 36285 size, 36286 __next40pxDefaultSize, 36287 __shouldNotWarnDeprecated36pxSize 36288 }); 36289 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control, { 36290 help: help, 36291 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 36292 __associatedWPComponentName: "ToggleGroupControl", 36293 children: [!hideLabelFromVision && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(VisualLabelWrapper, { 36294 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { 36295 children: label 36296 }) 36297 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MainControl, { 36298 ...otherProps, 36299 setSelectedElement: setSelectedElement, 36300 className: classes, 36301 isAdaptiveWidth: isAdaptiveWidth, 36302 label: label, 36303 onChange: onChange, 36304 ref: refs, 36305 size: normalizedSize, 36306 value: value, 36307 children: children 36308 })] 36309 }); 36310 } 36311 36312 /** 36313 * `ToggleGroupControl` is a form component that lets users choose options 36314 * represented in horizontal segments. To render options for this control use 36315 * `ToggleGroupControlOption` component. 36316 * 36317 * This component is intended for selecting a single persistent value from a set of options, 36318 * similar to a how a radio button group would work. If you simply want a toggle to switch between views, 36319 * use a `TabPanel` instead. 36320 * 36321 * Only use this control when you know for sure the labels of items inside won't 36322 * wrap. For items with longer labels, you can consider a `SelectControl` or a 36323 * `CustomSelectControl` component instead. 36324 * 36325 * ```jsx 36326 * import { 36327 * __experimentalToggleGroupControl as ToggleGroupControl, 36328 * __experimentalToggleGroupControlOption as ToggleGroupControlOption, 36329 * } from '@wordpress/components'; 36330 * 36331 * function Example() { 36332 * return ( 36333 * <ToggleGroupControl 36334 * label="my label" 36335 * value="vertical" 36336 * isBlock 36337 * __nextHasNoMarginBottom 36338 * __next40pxDefaultSize 36339 * > 36340 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 36341 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 36342 * </ToggleGroupControl> 36343 * ); 36344 * } 36345 * ``` 36346 */ 36347 const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl'); 36348 /* harmony default export */ const toggle_group_control_component = (ToggleGroupControl); 36349 36350 ;// ./node_modules/@ariakit/react-core/esm/__chunks/NLEBE274.js 36351 "use client"; 36352 36353 36354 36355 36356 36357 36358 36359 // src/radio/radio.tsx 36360 36361 36362 var NLEBE274_TagName = "input"; 36363 function getIsChecked(value, storeValue) { 36364 if (storeValue === void 0) return; 36365 if (value != null && storeValue != null) { 36366 return storeValue === value; 36367 } 36368 return !!storeValue; 36369 } 36370 function isNativeRadio(tagName, type) { 36371 return tagName === "input" && (!type || type === "radio"); 36372 } 36373 var useRadio = createHook(function useRadio2(_a) { 36374 var _b = _a, { 36375 store, 36376 name, 36377 value, 36378 checked 36379 } = _b, props = __objRest(_b, [ 36380 "store", 36381 "name", 36382 "value", 36383 "checked" 36384 ]); 36385 const context = useRadioContext(); 36386 store = store || context; 36387 const id = useId(props.id); 36388 const ref = (0,external_React_.useRef)(null); 36389 const isChecked = useStoreState( 36390 store, 36391 (state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value) 36392 ); 36393 (0,external_React_.useEffect)(() => { 36394 if (!id) return; 36395 if (!isChecked) return; 36396 const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id; 36397 if (isActiveItem) return; 36398 store == null ? void 0 : store.setActiveId(id); 36399 }, [store, isChecked, id]); 36400 const onChangeProp = props.onChange; 36401 const tagName = useTagName(ref, NLEBE274_TagName); 36402 const nativeRadio = isNativeRadio(tagName, props.type); 36403 const disabled = disabledFromProps(props); 36404 const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate(); 36405 (0,external_React_.useEffect)(() => { 36406 const element = ref.current; 36407 if (!element) return; 36408 if (nativeRadio) return; 36409 if (isChecked !== void 0) { 36410 element.checked = isChecked; 36411 } 36412 if (name !== void 0) { 36413 element.name = name; 36414 } 36415 if (value !== void 0) { 36416 element.value = `$value}`; 36417 } 36418 }, [propertyUpdated, nativeRadio, isChecked, name, value]); 36419 const onChange = useEvent((event) => { 36420 if (disabled) { 36421 event.preventDefault(); 36422 event.stopPropagation(); 36423 return; 36424 } 36425 if ((store == null ? void 0 : store.getState().value) === value) return; 36426 if (!nativeRadio) { 36427 event.currentTarget.checked = true; 36428 schedulePropertyUpdate(); 36429 } 36430 onChangeProp == null ? void 0 : onChangeProp(event); 36431 if (event.defaultPrevented) return; 36432 store == null ? void 0 : store.setValue(value); 36433 }); 36434 const onClickProp = props.onClick; 36435 const onClick = useEvent((event) => { 36436 onClickProp == null ? void 0 : onClickProp(event); 36437 if (event.defaultPrevented) return; 36438 if (nativeRadio) return; 36439 onChange(event); 36440 }); 36441 const onFocusProp = props.onFocus; 36442 const onFocus = useEvent((event) => { 36443 onFocusProp == null ? void 0 : onFocusProp(event); 36444 if (event.defaultPrevented) return; 36445 if (!nativeRadio) return; 36446 if (!store) return; 36447 const { moves, activeId } = store.getState(); 36448 if (!moves) return; 36449 if (id && activeId !== id) return; 36450 onChange(event); 36451 }); 36452 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 36453 id, 36454 role: !nativeRadio ? "radio" : void 0, 36455 type: nativeRadio ? "radio" : void 0, 36456 "aria-checked": isChecked 36457 }, props), { 36458 ref: useMergeRefs(ref, props.ref), 36459 onChange, 36460 onClick, 36461 onFocus 36462 }); 36463 props = useCompositeItem(_3YLGPPWQ_spreadValues({ 36464 store, 36465 clickOnEnter: !nativeRadio 36466 }, props)); 36467 return removeUndefinedValues(_3YLGPPWQ_spreadValues({ 36468 name: nativeRadio ? name : void 0, 36469 value: nativeRadio ? value : void 0, 36470 checked: isChecked 36471 }, props)); 36472 }); 36473 var Radio = memo2( 36474 forwardRef2(function Radio2(props) { 36475 const htmlProps = useRadio(props); 36476 return LMDWO4NN_createElement(NLEBE274_TagName, htmlProps); 36477 }) 36478 ); 36479 36480 36481 36482 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js 36483 36484 function toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 36485 /** 36486 * External dependencies 36487 */ 36488 36489 /** 36490 * Internal dependencies 36491 */ 36492 36493 const LabelView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 36494 target: "et6ln9s1" 36495 } : 0)( true ? { 36496 name: "sln1fl", 36497 styles: "display:inline-flex;max-width:100%;min-width:0;position:relative" 36498 } : 0); 36499 const labelBlock = true ? { 36500 name: "82a6rk", 36501 styles: "flex:1" 36502 } : 0; 36503 const buttonView = ({ 36504 isDeselectable, 36505 isIcon, 36506 isPressed, 36507 size 36508 }) => /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.radiusXSmall, ";color:", COLORS.theme.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;@media not ( prefers-reduced-motion ){transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;}user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&[disabled]{opacity:0.4;cursor:default;}&:active{background:", COLORS.ui.background, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({ 36509 size 36510 }), " ", isPressed && pressed, ";" + ( true ? "" : 0), true ? "" : 0); 36511 const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foregroundInverted, ";&:active{background:transparent;}" + ( true ? "" : 0), true ? "" : 0); 36512 const deselectable = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foreground, ";&:focus{box-shadow:inset 0 0 0 1px ", COLORS.ui.background, ",0 0 0 ", config_values.borderWidthFocus, " ", COLORS.theme.accent, ";outline:2px solid transparent;}" + ( true ? "" : 0), true ? "" : 0); 36513 const ButtonContentView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 36514 target: "et6ln9s0" 36515 } : 0)("display:flex;font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0)); 36516 const isIconStyles = ({ 36517 size = 'default' 36518 }) => { 36519 const iconButtonSizes = { 36520 default: '30px', 36521 '__unstable-large': '32px' 36522 }; 36523 return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.theme.foreground, ";height:", iconButtonSizes[size], ";aspect-ratio:1;padding-left:0;padding-right:0;" + ( true ? "" : 0), true ? "" : 0); 36524 }; 36525 36526 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js 36527 /** 36528 * External dependencies 36529 */ 36530 36531 36532 36533 /** 36534 * WordPress dependencies 36535 */ 36536 36537 36538 36539 /** 36540 * Internal dependencies 36541 */ 36542 36543 36544 36545 36546 36547 36548 36549 const { 36550 /* ButtonContentView */ "Rp": component_ButtonContentView, 36551 /* LabelView */ "y0": component_LabelView 36552 } = toggle_group_control_option_base_styles_namespaceObject; 36553 const WithToolTip = ({ 36554 showTooltip, 36555 text, 36556 children 36557 }) => { 36558 if (showTooltip && text) { 36559 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { 36560 text: text, 36561 placement: "top", 36562 children: children 36563 }); 36564 } 36565 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 36566 children: children 36567 }); 36568 }; 36569 function ToggleGroupControlOptionBase(props, forwardedRef) { 36570 const toggleGroupControlContext = useToggleGroupControlContext(); 36571 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base'); 36572 const buttonProps = useContextSystem({ 36573 ...props, 36574 id 36575 }, 'ToggleGroupControlOptionBase'); 36576 const { 36577 isBlock = false, 36578 isDeselectable = false, 36579 size = 'default' 36580 } = toggleGroupControlContext; 36581 const { 36582 className, 36583 isIcon = false, 36584 value, 36585 children, 36586 showTooltip = false, 36587 disabled, 36588 ...otherButtonProps 36589 } = buttonProps; 36590 const isPressed = toggleGroupControlContext.value === value; 36591 const cx = useCx(); 36592 const labelViewClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(isBlock && labelBlock), [cx, isBlock]); 36593 const itemClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(buttonView({ 36594 isDeselectable, 36595 isIcon, 36596 isPressed, 36597 size 36598 }), className), [cx, isDeselectable, isIcon, isPressed, size, className]); 36599 const buttonOnClick = () => { 36600 if (isDeselectable && isPressed) { 36601 toggleGroupControlContext.setValue(undefined); 36602 } else { 36603 toggleGroupControlContext.setValue(value); 36604 } 36605 }; 36606 const commonProps = { 36607 ...otherButtonProps, 36608 className: itemClasses, 36609 'data-value': value, 36610 ref: forwardedRef 36611 }; 36612 const labelRef = (0,external_wp_element_namespaceObject.useRef)(null); 36613 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36614 if (isPressed && labelRef.current) { 36615 toggleGroupControlContext.setSelectedElement(labelRef.current); 36616 } 36617 }, [isPressed, toggleGroupControlContext]); 36618 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_LabelView, { 36619 ref: labelRef, 36620 className: labelViewClasses, 36621 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolTip, { 36622 showTooltip: showTooltip, 36623 text: otherButtonProps['aria-label'], 36624 children: isDeselectable ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { 36625 ...commonProps, 36626 disabled: disabled, 36627 "aria-pressed": isPressed, 36628 type: "button", 36629 onClick: buttonOnClick, 36630 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, { 36631 children: children 36632 }) 36633 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, { 36634 disabled: disabled, 36635 onFocusVisible: () => { 36636 const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === ''; 36637 36638 // Conditions ensure that the first visible focus to a radio group 36639 // without a selected option will not automatically select the option. 36640 if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) { 36641 toggleGroupControlContext.setValue(value); 36642 } 36643 }, 36644 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { 36645 type: "button", 36646 ...commonProps 36647 }), 36648 value: value, 36649 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, { 36650 children: children 36651 }) 36652 }) 36653 }) 36654 }); 36655 } 36656 36657 /** 36658 * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, 36659 * generic component for any children of `ToggleGroupControl`. 36660 * 36661 * @example 36662 * ```jsx 36663 * import { 36664 * __experimentalToggleGroupControl as ToggleGroupControl, 36665 * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase, 36666 * } from '@wordpress/components'; 36667 * 36668 * function Example() { 36669 * return ( 36670 * <ToggleGroupControl label="my label" value="vertical" isBlock> 36671 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 36672 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 36673 * </ToggleGroupControl> 36674 * ); 36675 * } 36676 * ``` 36677 */ 36678 const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase'); 36679 /* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase); 36680 36681 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js 36682 /** 36683 * External dependencies 36684 */ 36685 36686 /** 36687 * WordPress dependencies 36688 */ 36689 36690 36691 /** 36692 * Internal dependencies 36693 */ 36694 36695 36696 36697 36698 function UnforwardedToggleGroupControlOptionIcon(props, ref) { 36699 const { 36700 icon, 36701 label, 36702 ...restProps 36703 } = props; 36704 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, { 36705 ...restProps, 36706 isIcon: true, 36707 "aria-label": label, 36708 showTooltip: true, 36709 ref: ref, 36710 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 36711 icon: icon 36712 }) 36713 }); 36714 } 36715 36716 /** 36717 * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a 36718 * child of `ToggleGroupControl` and displays an icon. 36719 * 36720 * ```jsx 36721 * 36722 * import { 36723 * __experimentalToggleGroupControl as ToggleGroupControl, 36724 * __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, 36725 * from '@wordpress/components'; 36726 * import { formatLowercase, formatUppercase } from '@wordpress/icons'; 36727 * 36728 * function Example() { 36729 * return ( 36730 * <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize> 36731 * <ToggleGroupControlOptionIcon 36732 * value="uppercase" 36733 * label="Uppercase" 36734 * icon={ formatUppercase } 36735 * /> 36736 * <ToggleGroupControlOptionIcon 36737 * value="lowercase" 36738 * label="Lowercase" 36739 * icon={ formatLowercase } 36740 * /> 36741 * </ToggleGroupControl> 36742 * ); 36743 * } 36744 * ``` 36745 */ 36746 const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOptionIcon); 36747 /* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon); 36748 36749 ;// ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/component.js 36750 /** 36751 * WordPress dependencies 36752 */ 36753 36754 36755 36756 /** 36757 * Internal dependencies 36758 */ 36759 36760 36761 36762 const BORDER_STYLES = [{ 36763 label: (0,external_wp_i18n_namespaceObject.__)('Solid'), 36764 icon: line_solid, 36765 value: 'solid' 36766 }, { 36767 label: (0,external_wp_i18n_namespaceObject.__)('Dashed'), 36768 icon: line_dashed, 36769 value: 'dashed' 36770 }, { 36771 label: (0,external_wp_i18n_namespaceObject.__)('Dotted'), 36772 icon: line_dotted, 36773 value: 'dotted' 36774 }]; 36775 function UnconnectedBorderControlStylePicker({ 36776 onChange, 36777 ...restProps 36778 }, forwardedRef) { 36779 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_component, { 36780 __nextHasNoMarginBottom: true, 36781 __next40pxDefaultSize: true, 36782 ref: forwardedRef, 36783 isDeselectable: true, 36784 onChange: value => { 36785 onChange?.(value); 36786 }, 36787 ...restProps, 36788 children: BORDER_STYLES.map(borderStyle => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_icon_component, { 36789 value: borderStyle.value, 36790 icon: borderStyle.icon, 36791 label: borderStyle.label 36792 }, borderStyle.value)) 36793 }); 36794 } 36795 const BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker'); 36796 /* harmony default export */ const border_control_style_picker_component = (BorderControlStylePicker); 36797 36798 ;// ./node_modules/@wordpress/components/build-module/color-indicator/index.js 36799 /** 36800 * External dependencies 36801 */ 36802 36803 /** 36804 * WordPress dependencies 36805 */ 36806 36807 36808 /** 36809 * Internal dependencies 36810 */ 36811 36812 function UnforwardedColorIndicator(props, forwardedRef) { 36813 const { 36814 className, 36815 colorValue, 36816 ...additionalProps 36817 } = props; 36818 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 36819 className: dist_clsx('component-color-indicator', className), 36820 style: { 36821 background: colorValue 36822 }, 36823 ref: forwardedRef, 36824 ...additionalProps 36825 }); 36826 } 36827 36828 /** 36829 * ColorIndicator is a React component that renders a specific color in a 36830 * circle. It's often used to summarize a collection of used colors in a child 36831 * component. 36832 * 36833 * ```jsx 36834 * import { ColorIndicator } from '@wordpress/components'; 36835 * 36836 * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />; 36837 * ``` 36838 */ 36839 const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorIndicator); 36840 /* harmony default export */ const color_indicator = (ColorIndicator); 36841 36842 ;// ./node_modules/colord/plugins/a11y.mjs 36843 var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}} 36844 36845 ;// ./node_modules/@wordpress/components/build-module/dropdown/index.js 36846 /** 36847 * External dependencies 36848 */ 36849 36850 /** 36851 * WordPress dependencies 36852 */ 36853 36854 36855 36856 36857 /** 36858 * Internal dependencies 36859 */ 36860 36861 36862 36863 36864 const UnconnectedDropdown = (props, forwardedRef) => { 36865 const { 36866 renderContent, 36867 renderToggle, 36868 className, 36869 contentClassName, 36870 expandOnMobile, 36871 headerTitle, 36872 focusOnMount, 36873 popoverProps, 36874 onClose, 36875 onToggle, 36876 style, 36877 open, 36878 defaultOpen, 36879 // Deprecated props 36880 position, 36881 // From context system 36882 variant 36883 } = useContextSystem(props, 'Dropdown'); 36884 if (position !== undefined) { 36885 external_wp_deprecated_default()('`position` prop in wp.components.Dropdown', { 36886 since: '6.2', 36887 alternative: '`popoverProps.placement` prop', 36888 hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.' 36889 }); 36890 } 36891 36892 // Use internal state instead of a ref to make sure that the component 36893 // re-renders when the popover's anchor updates. 36894 const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 36895 const containerRef = (0,external_wp_element_namespaceObject.useRef)(); 36896 const [isOpen, setIsOpen] = useControlledValue({ 36897 defaultValue: defaultOpen, 36898 value: open, 36899 onChange: onToggle 36900 }); 36901 36902 /** 36903 * Closes the popover when focus leaves it unless the toggle was pressed or 36904 * focus has moved to a separate dialog. The former is to let the toggle 36905 * handle closing the popover and the latter is to preserve presence in 36906 * case a dialog has opened, allowing focus to return when it's dismissed. 36907 */ 36908 function closeIfFocusOutside() { 36909 if (!containerRef.current) { 36910 return; 36911 } 36912 const { 36913 ownerDocument 36914 } = containerRef.current; 36915 const dialog = ownerDocument?.activeElement?.closest('[role="dialog"]'); 36916 if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) { 36917 close(); 36918 } 36919 } 36920 function close() { 36921 onClose?.(); 36922 setIsOpen(false); 36923 } 36924 const args = { 36925 isOpen: !!isOpen, 36926 onToggle: () => setIsOpen(!isOpen), 36927 onClose: close 36928 }; 36929 const popoverPropsHaveAnchor = !!popoverProps?.anchor || 36930 // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and 36931 // be removed from `Popover` from WordPress 6.3 36932 !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect; 36933 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 36934 className: className, 36935 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef, setFallbackPopoverAnchor]) 36936 // Some UAs focus the closest focusable parent when the toggle is 36937 // clicked. Making this div focusable ensures such UAs will focus 36938 // it and `closeIfFocusOutside` can tell if the toggle was clicked. 36939 , 36940 tabIndex: -1, 36941 style: style, 36942 children: [renderToggle(args), isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(popover, { 36943 position: position, 36944 onClose: close, 36945 onFocusOutside: closeIfFocusOutside, 36946 expandOnMobile: expandOnMobile, 36947 headerTitle: headerTitle, 36948 focusOnMount: focusOnMount 36949 // This value is used to ensure that the dropdowns 36950 // align with the editor header by default. 36951 , 36952 offset: 13, 36953 anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined, 36954 variant: variant, 36955 ...popoverProps, 36956 className: dist_clsx('components-dropdown__content', popoverProps?.className, contentClassName), 36957 children: renderContent(args) 36958 })] 36959 }); 36960 }; 36961 36962 /** 36963 * Renders a button that opens a floating content modal when clicked. 36964 * 36965 * ```jsx 36966 * import { Button, Dropdown } from '@wordpress/components'; 36967 * 36968 * const MyDropdown = () => ( 36969 * <Dropdown 36970 * className="my-container-class-name" 36971 * contentClassName="my-dropdown-content-classname" 36972 * popoverProps={ { placement: 'bottom-start' } } 36973 * renderToggle={ ( { isOpen, onToggle } ) => ( 36974 * <Button 36975 * variant="primary" 36976 * onClick={ onToggle } 36977 * aria-expanded={ isOpen } 36978 * > 36979 * Toggle Dropdown! 36980 * </Button> 36981 * ) } 36982 * renderContent={ () => <div>This is the content of the dropdown.</div> } 36983 * /> 36984 * ); 36985 * ``` 36986 */ 36987 const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown'); 36988 /* harmony default export */ const dropdown = (Dropdown); 36989 36990 ;// ./node_modules/@wordpress/components/build-module/input-control/input-suffix-wrapper.js 36991 /** 36992 * External dependencies 36993 */ 36994 36995 /** 36996 * Internal dependencies 36997 */ 36998 36999 37000 37001 37002 function UnconnectedInputControlSuffixWrapper(props, forwardedRef) { 37003 const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper'); 37004 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrefixSuffixWrapper, { 37005 ...derivedProps, 37006 ref: forwardedRef 37007 }); 37008 } 37009 37010 /** 37011 * A convenience wrapper for the `suffix` when you want to apply 37012 * standard padding in accordance with the size variant. 37013 * 37014 * ```jsx 37015 * import { 37016 * __experimentalInputControl as InputControl, 37017 * __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, 37018 * } from '@wordpress/components'; 37019 * 37020 * <InputControl 37021 * suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>} 37022 * /> 37023 * ``` 37024 */ 37025 const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper'); 37026 /* harmony default export */ const input_suffix_wrapper = (InputControlSuffixWrapper); 37027 37028 ;// ./node_modules/@wordpress/components/build-module/select-control/styles/select-control-styles.js 37029 37030 function select_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 37031 /** 37032 * External dependencies 37033 */ 37034 37035 /** 37036 * Internal dependencies 37037 */ 37038 37039 37040 37041 37042 37043 const select_control_styles_disabledStyles = ({ 37044 disabled 37045 }) => { 37046 if (!disabled) { 37047 return ''; 37048 } 37049 return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.ui.textDisabled, ";cursor:default;" + ( true ? "" : 0), true ? "" : 0); 37050 }; 37051 var select_control_styles_ref2 = true ? { 37052 name: "1lv1yo7", 37053 styles: "display:inline-flex" 37054 } : 0; 37055 const inputBaseVariantStyles = ({ 37056 variant 37057 }) => { 37058 if (variant === 'minimal') { 37059 return select_control_styles_ref2; 37060 } 37061 return ''; 37062 }; 37063 const StyledInputBase = /*#__PURE__*/emotion_styled_base_browser_esm(input_base, true ? { 37064 target: "e1mv6sxx3" 37065 } : 0)("color:", COLORS.theme.foreground, ";cursor:pointer;", select_control_styles_disabledStyles, " ", inputBaseVariantStyles, ";" + ( true ? "" : 0)); 37066 const select_control_styles_sizeStyles = ({ 37067 __next40pxDefaultSize, 37068 multiple, 37069 selectSize = 'default' 37070 }) => { 37071 if (multiple) { 37072 // When `multiple`, just use the native browser styles 37073 // without setting explicit height. 37074 return; 37075 } 37076 const sizes = { 37077 default: { 37078 height: 40, 37079 minHeight: 40, 37080 paddingTop: 0, 37081 paddingBottom: 0 37082 }, 37083 small: { 37084 height: 24, 37085 minHeight: 24, 37086 paddingTop: 0, 37087 paddingBottom: 0 37088 }, 37089 compact: { 37090 height: 32, 37091 minHeight: 32, 37092 paddingTop: 0, 37093 paddingBottom: 0 37094 }, 37095 '__unstable-large': { 37096 height: 40, 37097 minHeight: 40, 37098 paddingTop: 0, 37099 paddingBottom: 0 37100 } 37101 }; 37102 if (!__next40pxDefaultSize) { 37103 sizes.default = sizes.compact; 37104 } 37105 const style = sizes[selectSize] || sizes.default; 37106 return /*#__PURE__*/emotion_react_browser_esm_css(style, true ? "" : 0, true ? "" : 0); 37107 }; 37108 const chevronIconSize = 18; 37109 const sizePaddings = ({ 37110 __next40pxDefaultSize, 37111 multiple, 37112 selectSize = 'default' 37113 }) => { 37114 const padding = { 37115 default: config_values.controlPaddingX, 37116 small: config_values.controlPaddingXSmall, 37117 compact: config_values.controlPaddingXSmall, 37118 '__unstable-large': config_values.controlPaddingX 37119 }; 37120 if (!__next40pxDefaultSize) { 37121 padding.default = padding.compact; 37122 } 37123 const selectedPadding = padding[selectSize] || padding.default; 37124 return rtl({ 37125 paddingLeft: selectedPadding, 37126 paddingRight: selectedPadding + chevronIconSize, 37127 ...(multiple ? { 37128 paddingTop: selectedPadding, 37129 paddingBottom: selectedPadding 37130 } : {}) 37131 }); 37132 }; 37133 const overflowStyles = ({ 37134 multiple 37135 }) => { 37136 return { 37137 overflow: multiple ? 'auto' : 'hidden' 37138 }; 37139 }; 37140 var select_control_styles_ref = true ? { 37141 name: "n1jncc", 37142 styles: "field-sizing:content" 37143 } : 0; 37144 const variantStyles = ({ 37145 variant 37146 }) => { 37147 if (variant === 'minimal') { 37148 return select_control_styles_ref; 37149 } 37150 return ''; 37151 }; 37152 37153 // TODO: Resolve need to use &&& to increase specificity 37154 // https://github.com/WordPress/gutenberg/issues/18483 37155 37156 const Select = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? { 37157 target: "e1mv6sxx2" 37158 } : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:currentColor;cursor:inherit;display:block;font-family:inherit;margin:0;width:100%;max-width:none;white-space:nowrap;text-overflow:ellipsis;", fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, " ", variantStyles, ";}" + ( true ? "" : 0)); 37159 const DownArrowWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 37160 target: "e1mv6sxx1" 37161 } : 0)("margin-inline-end:", space(-1), ";line-height:0;path{fill:currentColor;}" + ( true ? "" : 0)); 37162 const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper, true ? { 37163 target: "e1mv6sxx0" 37164 } : 0)("position:absolute;pointer-events:none;", rtl({ 37165 right: 0 37166 }), ";" + ( true ? "" : 0)); 37167 37168 ;// ./node_modules/@wordpress/icons/build-module/icon/index.js 37169 /** 37170 * WordPress dependencies 37171 */ 37172 37173 37174 /** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */ 37175 37176 /** 37177 * Return an SVG icon. 37178 * 37179 * @param {IconProps} props icon is the SVG component to render 37180 * size is a number specifying the icon size in pixels 37181 * Other props will be passed to wrapped SVG component 37182 * @param {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element. 37183 * 37184 * @return {JSX.Element} Icon component 37185 */ 37186 function icon_Icon({ 37187 icon, 37188 size = 24, 37189 ...props 37190 }, ref) { 37191 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 37192 width: size, 37193 height: size, 37194 ...props, 37195 ref 37196 }); 37197 } 37198 /* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon)); 37199 37200 ;// ./node_modules/@wordpress/icons/build-module/library/chevron-down.js 37201 /** 37202 * WordPress dependencies 37203 */ 37204 37205 37206 const chevronDown = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 37207 viewBox: "0 0 24 24", 37208 xmlns: "http://www.w3.org/2000/svg", 37209 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 37210 d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" 37211 }) 37212 }); 37213 /* harmony default export */ const chevron_down = (chevronDown); 37214 37215 ;// ./node_modules/@wordpress/components/build-module/select-control/chevron-down.js 37216 /** 37217 * WordPress dependencies 37218 */ 37219 37220 37221 /** 37222 * Internal dependencies 37223 */ 37224 37225 37226 const SelectControlChevronDown = () => { 37227 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputControlSuffixWrapperWithClickThrough, { 37228 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DownArrowWrapper, { 37229 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 37230 icon: chevron_down, 37231 size: chevronIconSize 37232 }) 37233 }) 37234 }); 37235 }; 37236 /* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown); 37237 37238 ;// ./node_modules/@wordpress/components/build-module/select-control/index.js 37239 /** 37240 * External dependencies 37241 */ 37242 37243 37244 /** 37245 * WordPress dependencies 37246 */ 37247 37248 37249 37250 /** 37251 * Internal dependencies 37252 */ 37253 37254 37255 37256 37257 37258 37259 function select_control_useUniqueId(idProp) { 37260 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SelectControl); 37261 const id = `inspector-select-control-$instanceId}`; 37262 return idProp || id; 37263 } 37264 function SelectOptions({ 37265 options 37266 }) { 37267 return options.map(({ 37268 id, 37269 label, 37270 value, 37271 ...optionProps 37272 }, index) => { 37273 const key = id || `$label}-$value}-$index}`; 37274 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { 37275 value: value, 37276 ...optionProps, 37277 children: label 37278 }, key); 37279 }); 37280 } 37281 function UnforwardedSelectControl(props, ref) { 37282 const { 37283 className, 37284 disabled = false, 37285 help, 37286 hideLabelFromVision, 37287 id: idProp, 37288 label, 37289 multiple = false, 37290 onChange, 37291 options = [], 37292 size = 'default', 37293 value: valueProp, 37294 labelPosition = 'top', 37295 children, 37296 prefix, 37297 suffix, 37298 variant = 'default', 37299 __next40pxDefaultSize = false, 37300 __nextHasNoMarginBottom = false, 37301 __shouldNotWarnDeprecated36pxSize, 37302 ...restProps 37303 } = useDeprecated36pxDefaultSizeProp(props); 37304 const id = select_control_useUniqueId(idProp); 37305 const helpId = help ? `$id}__help` : undefined; 37306 37307 // Disable reason: A select with an onchange throws a warning. 37308 if (!options?.length && !children) { 37309 return null; 37310 } 37311 const handleOnChange = event => { 37312 if (props.multiple) { 37313 const selectedOptions = Array.from(event.target.options).filter(({ 37314 selected 37315 }) => selected); 37316 const newValues = selectedOptions.map(({ 37317 value 37318 }) => value); 37319 props.onChange?.(newValues, { 37320 event 37321 }); 37322 return; 37323 } 37324 props.onChange?.(event.target.value, { 37325 event 37326 }); 37327 }; 37328 const classes = dist_clsx('components-select-control', className); 37329 maybeWarnDeprecated36pxSize({ 37330 componentName: 'SelectControl', 37331 __next40pxDefaultSize, 37332 size, 37333 __shouldNotWarnDeprecated36pxSize 37334 }); 37335 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 37336 help: help, 37337 id: id, 37338 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 37339 __associatedWPComponentName: "SelectControl", 37340 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledInputBase, { 37341 className: classes, 37342 disabled: disabled, 37343 hideLabelFromVision: hideLabelFromVision, 37344 id: id, 37345 isBorderless: variant === 'minimal', 37346 label: label, 37347 size: size, 37348 suffix: suffix || !multiple && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}), 37349 prefix: prefix, 37350 labelPosition: labelPosition, 37351 __unstableInputWidth: variant === 'minimal' ? 'auto' : undefined, 37352 variant: variant, 37353 __next40pxDefaultSize: __next40pxDefaultSize, 37354 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Select, { 37355 ...restProps, 37356 __next40pxDefaultSize: __next40pxDefaultSize, 37357 "aria-describedby": helpId, 37358 className: "components-select-control__input", 37359 disabled: disabled, 37360 id: id, 37361 multiple: multiple, 37362 onChange: handleOnChange, 37363 ref: ref, 37364 selectSize: size, 37365 value: valueProp, 37366 variant: variant, 37367 children: children || /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectOptions, { 37368 options: options 37369 }) 37370 }) 37371 }) 37372 }); 37373 } 37374 37375 /** 37376 * `SelectControl` allows users to select from a single or multiple option menu. 37377 * It functions as a wrapper around the browser's native `<select>` element. 37378 * 37379 * ```jsx 37380 * import { SelectControl } from '@wordpress/components'; 37381 * import { useState } from '@wordpress/element'; 37382 * 37383 * const MySelectControl = () => { 37384 * const [ size, setSize ] = useState( '50%' ); 37385 * 37386 * return ( 37387 * <SelectControl 37388 * __next40pxDefaultSize 37389 * __nextHasNoMarginBottom 37390 * label="Size" 37391 * value={ size } 37392 * options={ [ 37393 * { label: 'Big', value: '100%' }, 37394 * { label: 'Medium', value: '50%' }, 37395 * { label: 'Small', value: '25%' }, 37396 * ] } 37397 * onChange={ setSize } 37398 * /> 37399 * ); 37400 * }; 37401 * ``` 37402 */ 37403 const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl); 37404 /* harmony default export */ const select_control = (SelectControl); 37405 37406 ;// ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js 37407 /** 37408 * WordPress dependencies 37409 */ 37410 37411 37412 /** 37413 * Internal dependencies 37414 */ 37415 37416 37417 /** 37418 * @template T 37419 * @typedef Options 37420 * @property {T} [initial] Initial value 37421 * @property {T | ""} fallback Fallback value 37422 */ 37423 37424 /** @type {Readonly<{ initial: undefined, fallback: '' }>} */ 37425 const defaultOptions = { 37426 initial: undefined, 37427 /** 37428 * Defaults to empty string, as that is preferred for usage with 37429 * <input />, <textarea />, and <select /> form elements. 37430 */ 37431 fallback: '' 37432 }; 37433 37434 /** 37435 * Custom hooks for "controlled" components to track and consolidate internal 37436 * state and incoming values. This is useful for components that render 37437 * `input`, `textarea`, or `select` HTML elements. 37438 * 37439 * https://reactjs.org/docs/forms.html#controlled-components 37440 * 37441 * At first, a component using useControlledState receives an initial prop 37442 * value, which is used as initial internal state. 37443 * 37444 * This internal state can be maintained and updated without 37445 * relying on new incoming prop values. 37446 * 37447 * Unlike the basic useState hook, useControlledState's state can 37448 * be updated if a new incoming prop value is changed. 37449 * 37450 * @template T 37451 * 37452 * @param {T | undefined} currentState The current value. 37453 * @param {Options<T>} [options=defaultOptions] Additional options for the hook. 37454 * 37455 * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter. 37456 */ 37457 function useControlledState(currentState, options = defaultOptions) { 37458 const { 37459 initial, 37460 fallback 37461 } = { 37462 ...defaultOptions, 37463 ...options 37464 }; 37465 const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState); 37466 const hasCurrentState = isValueDefined(currentState); 37467 37468 /* 37469 * Resets internal state if value every changes from uncontrolled <-> controlled. 37470 */ 37471 (0,external_wp_element_namespaceObject.useEffect)(() => { 37472 if (hasCurrentState && internalState) { 37473 setInternalState(undefined); 37474 } 37475 }, [hasCurrentState, internalState]); 37476 const state = getDefinedValue([currentState, internalState, initial], fallback); 37477 37478 /* eslint-disable jsdoc/no-undefined-types */ 37479 /** @type {(nextState: T) => void} */ 37480 const setState = (0,external_wp_element_namespaceObject.useCallback)(nextState => { 37481 if (!hasCurrentState) { 37482 setInternalState(nextState); 37483 } 37484 }, [hasCurrentState]); 37485 /* eslint-enable jsdoc/no-undefined-types */ 37486 37487 return [state, setState]; 37488 } 37489 /* harmony default export */ const use_controlled_state = (useControlledState); 37490 37491 ;// ./node_modules/@wordpress/components/build-module/range-control/utils.js 37492 /** 37493 * WordPress dependencies 37494 */ 37495 37496 37497 /** 37498 * Internal dependencies 37499 */ 37500 37501 37502 /** 37503 * A float supported clamp function for a specific value. 37504 * 37505 * @param value The value to clamp. 37506 * @param min The minimum value. 37507 * @param max The maximum value. 37508 * 37509 * @return A (float) number 37510 */ 37511 function floatClamp(value, min, max) { 37512 if (typeof value !== 'number') { 37513 return null; 37514 } 37515 return parseFloat(`$math_clamp(value, min, max)}`); 37516 } 37517 37518 /** 37519 * Hook to store a clamped value, derived from props. 37520 * 37521 * @param settings 37522 * @return The controlled value and the value setter. 37523 */ 37524 function useControlledRangeValue(settings) { 37525 const { 37526 min, 37527 max, 37528 value: valueProp, 37529 initial 37530 } = settings; 37531 const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), { 37532 initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max), 37533 fallback: null 37534 }); 37535 const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => { 37536 if (nextValue === null) { 37537 setInternalState(null); 37538 } else { 37539 setInternalState(floatClamp(nextValue, min, max)); 37540 } 37541 }, [min, max, setInternalState]); 37542 37543 // `state` can't be an empty string because we specified a fallback value of 37544 // `null` in `useControlledState` 37545 return [state, setState]; 37546 } 37547 37548 ;// ./node_modules/@wordpress/components/build-module/range-control/styles/range-control-styles.js 37549 37550 function range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 37551 /** 37552 * External dependencies 37553 */ 37554 37555 /** 37556 * Internal dependencies 37557 */ 37558 37559 37560 37561 const rangeHeightValue = 30; 37562 const railHeight = 4; 37563 const rangeHeight = () => /*#__PURE__*/emotion_react_browser_esm_css({ 37564 height: rangeHeightValue, 37565 minHeight: rangeHeightValue 37566 }, true ? "" : 0, true ? "" : 0); 37567 const thumbSize = 12; 37568 const deprecatedHeight = ({ 37569 __next40pxDefaultSize 37570 }) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css({ 37571 minHeight: rangeHeightValue 37572 }, true ? "" : 0, true ? "" : 0); 37573 const range_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 37574 target: "e1epgpqk14" 37575 } : 0)("-webkit-tap-highlight-color:transparent;align-items:center;display:flex;justify-content:flex-start;padding:0;position:relative;touch-action:none;width:100%;min-height:40px;", deprecatedHeight, ";" + ( true ? "" : 0)); 37576 const wrapperColor = ({ 37577 color = COLORS.ui.borderFocus 37578 }) => /*#__PURE__*/emotion_react_browser_esm_css({ 37579 color 37580 }, true ? "" : 0, true ? "" : 0); 37581 const wrapperMargin = ({ 37582 marks, 37583 __nextHasNoMarginBottom 37584 }) => { 37585 if (!__nextHasNoMarginBottom) { 37586 return /*#__PURE__*/emotion_react_browser_esm_css({ 37587 marginBottom: marks ? 16 : undefined 37588 }, true ? "" : 0, true ? "" : 0); 37589 } 37590 return ''; 37591 }; 37592 const range_control_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm('div', true ? { 37593 shouldForwardProp: prop => !['color', '__nextHasNoMarginBottom', 'marks'].includes(prop), 37594 target: "e1epgpqk13" 37595 } : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0)); 37596 const BeforeIconWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37597 target: "e1epgpqk12" 37598 } : 0)("display:flex;margin-top:", railHeight, "px;", rtl({ 37599 marginRight: 6 37600 }), ";" + ( true ? "" : 0)); 37601 const AfterIconWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37602 target: "e1epgpqk11" 37603 } : 0)("display:flex;margin-top:", railHeight, "px;", rtl({ 37604 marginLeft: 6 37605 }), ";" + ( true ? "" : 0)); 37606 const railBackgroundColor = ({ 37607 disabled, 37608 railColor 37609 }) => { 37610 let background = railColor || ''; 37611 if (disabled) { 37612 background = COLORS.ui.backgroundDisabled; 37613 } 37614 return /*#__PURE__*/emotion_react_browser_esm_css({ 37615 background 37616 }, true ? "" : 0, true ? "" : 0); 37617 }; 37618 const Rail = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37619 target: "e1epgpqk10" 37620 } : 0)("background-color:", COLORS.gray[300], ";left:0;pointer-events:none;right:0;display:block;height:", railHeight, "px;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;border-radius:", config_values.radiusFull, ";", railBackgroundColor, ";" + ( true ? "" : 0)); 37621 const trackBackgroundColor = ({ 37622 disabled, 37623 trackColor 37624 }) => { 37625 let background = trackColor || 'currentColor'; 37626 if (disabled) { 37627 background = COLORS.gray[400]; 37628 } 37629 return /*#__PURE__*/emotion_react_browser_esm_css({ 37630 background 37631 }, true ? "" : 0, true ? "" : 0); 37632 }; 37633 const Track = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37634 target: "e1epgpqk9" 37635 } : 0)("background-color:currentColor;border-radius:", config_values.radiusFull, ";height:", railHeight, "px;pointer-events:none;display:block;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;.is-marked &{@media not ( prefers-reduced-motion ){transition:width ease 0.1s;}}", trackBackgroundColor, ";" + ( true ? "" : 0)); 37636 const MarksWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37637 target: "e1epgpqk8" 37638 } : 0)( true ? { 37639 name: "g5kg28", 37640 styles: "display:block;pointer-events:none;position:relative;width:100%;user-select:none;margin-top:17px" 37641 } : 0); 37642 const Mark = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37643 target: "e1epgpqk7" 37644 } : 0)("position:absolute;left:0;top:-4px;height:4px;width:2px;transform:translateX( -50% );background-color:", COLORS.ui.background, ";z-index:1;" + ( true ? "" : 0)); 37645 const markLabelFill = ({ 37646 isFilled 37647 }) => { 37648 return /*#__PURE__*/emotion_react_browser_esm_css({ 37649 color: isFilled ? COLORS.gray[700] : COLORS.gray[300] 37650 }, true ? "" : 0, true ? "" : 0); 37651 }; 37652 const MarkLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37653 target: "e1epgpqk6" 37654 } : 0)("color:", COLORS.gray[300], ";font-size:11px;position:absolute;top:8px;white-space:nowrap;", rtl({ 37655 left: 0 37656 }), ";", rtl({ 37657 transform: 'translateX( -50% )' 37658 }, { 37659 transform: 'translateX( 50% )' 37660 }), ";", markLabelFill, ";" + ( true ? "" : 0)); 37661 const thumbColor = ({ 37662 disabled 37663 }) => disabled ? /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.gray[400], ";" + ( true ? "" : 0), true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.theme.accent, ";" + ( true ? "" : 0), true ? "" : 0); 37664 const ThumbWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37665 target: "e1epgpqk5" 37666 } : 0)("align-items:center;display:flex;height:", thumbSize, "px;justify-content:center;margin-top:", (rangeHeightValue - thumbSize) / 2, "px;outline:0;pointer-events:none;position:absolute;top:0;user-select:none;width:", thumbSize, "px;border-radius:", config_values.radiusRound, ";z-index:3;.is-marked &{@media not ( prefers-reduced-motion ){transition:left ease 0.1s;}}", thumbColor, ";", rtl({ 37667 marginLeft: -10 37668 }), ";", rtl({ 37669 transform: 'translateX( 4.5px )' 37670 }, { 37671 transform: 'translateX( -4.5px )' 37672 }), ";" + ( true ? "" : 0)); 37673 const thumbFocus = ({ 37674 isFocused 37675 }) => { 37676 return isFocused ? /*#__PURE__*/emotion_react_browser_esm_css("&::before{content:' ';position:absolute;background-color:", COLORS.theme.accent, ";opacity:0.4;border-radius:", config_values.radiusRound, ";height:", thumbSize + 8, "px;width:", thumbSize + 8, "px;top:-4px;left:-4px;}" + ( true ? "" : 0), true ? "" : 0) : ''; 37677 }; 37678 const Thumb = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37679 target: "e1epgpqk4" 37680 } : 0)("align-items:center;border-radius:", config_values.radiusRound, ";height:100%;outline:0;position:absolute;user-select:none;width:100%;box-shadow:", config_values.elevationXSmall, ";", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0)); 37681 const InputRange = /*#__PURE__*/emotion_styled_base_browser_esm("input", true ? { 37682 target: "e1epgpqk3" 37683 } : 0)("box-sizing:border-box;cursor:pointer;display:block;height:100%;left:0;margin:0 -", thumbSize / 2, "px;opacity:0;outline:none;position:absolute;right:0;top:0;width:calc( 100% + ", thumbSize, "px );" + ( true ? "" : 0)); 37684 const tooltipShow = ({ 37685 show 37686 }) => { 37687 return /*#__PURE__*/emotion_react_browser_esm_css("display:", show ? 'inline-block' : 'none', ";opacity:", show ? 1 : 0, ";@media not ( prefers-reduced-motion ){transition:opacity 120ms ease,display 120ms ease allow-discrete;}@starting-style{opacity:0;}" + ( true ? "" : 0), true ? "" : 0); 37688 }; 37689 var range_control_styles_ref = true ? { 37690 name: "1cypxip", 37691 styles: "top:-80%" 37692 } : 0; 37693 var range_control_styles_ref2 = true ? { 37694 name: "1lr98c4", 37695 styles: "bottom:-80%" 37696 } : 0; 37697 const tooltipPosition = ({ 37698 position 37699 }) => { 37700 const isBottom = position === 'bottom'; 37701 if (isBottom) { 37702 return range_control_styles_ref2; 37703 } 37704 return range_control_styles_ref; 37705 }; 37706 const range_control_styles_Tooltip = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37707 target: "e1epgpqk2" 37708 } : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:", config_values.radiusSmall, ";color:white;font-size:12px;min-width:32px;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;user-select:none;line-height:1.4;", tooltipShow, ";", tooltipPosition, ";", rtl({ 37709 transform: 'translateX(-50%)' 37710 }, { 37711 transform: 'translateX(50%)' 37712 }), ";" + ( true ? "" : 0)); 37713 37714 // @todo Refactor RangeControl with latest HStack configuration 37715 // @see: packages/components/src/h-stack 37716 const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 37717 target: "e1epgpqk1" 37718 } : 0)("display:inline-block;font-size:13px;margin-top:0;input[type='number']&{", rangeHeight, ";}", rtl({ 37719 marginLeft: `$space(4)} !important` 37720 }), ";" + ( true ? "" : 0)); 37721 const ActionRightWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 37722 target: "e1epgpqk0" 37723 } : 0)("display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({ 37724 marginLeft: 8 37725 }), ";" + ( true ? "" : 0)); 37726 37727 ;// ./node_modules/@wordpress/components/build-module/range-control/input-range.js 37728 /** 37729 * WordPress dependencies 37730 */ 37731 37732 37733 /** 37734 * Internal dependencies 37735 */ 37736 37737 37738 function input_range_InputRange(props, ref) { 37739 const { 37740 describedBy, 37741 label, 37742 value, 37743 ...otherProps 37744 } = props; 37745 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputRange, { 37746 ...otherProps, 37747 "aria-describedby": describedBy, 37748 "aria-label": label, 37749 "aria-hidden": false, 37750 ref: ref, 37751 tabIndex: 0, 37752 type: "range", 37753 value: value 37754 }); 37755 } 37756 const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(input_range_InputRange); 37757 /* harmony default export */ const input_range = (input_range_ForwardedComponent); 37758 37759 ;// ./node_modules/@wordpress/components/build-module/range-control/mark.js 37760 /** 37761 * External dependencies 37762 */ 37763 37764 37765 /** 37766 * Internal dependencies 37767 */ 37768 37769 37770 function RangeMark(props) { 37771 const { 37772 className, 37773 isFilled = false, 37774 label, 37775 style = {}, 37776 ...otherProps 37777 } = props; 37778 const classes = dist_clsx('components-range-control__mark', isFilled && 'is-filled', className); 37779 const labelClasses = dist_clsx('components-range-control__mark-label', isFilled && 'is-filled'); 37780 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 37781 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Mark, { 37782 ...otherProps, 37783 "aria-hidden": "true", 37784 className: classes, 37785 style: style 37786 }), label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MarkLabel, { 37787 "aria-hidden": "true", 37788 className: labelClasses, 37789 isFilled: isFilled, 37790 style: style, 37791 children: label 37792 })] 37793 }); 37794 } 37795 37796 ;// ./node_modules/@wordpress/components/build-module/range-control/rail.js 37797 /** 37798 * WordPress dependencies 37799 */ 37800 37801 37802 /** 37803 * Internal dependencies 37804 */ 37805 37806 37807 37808 37809 function RangeRail(props) { 37810 const { 37811 disabled = false, 37812 marks = false, 37813 min = 0, 37814 max = 100, 37815 step = 1, 37816 value = 0, 37817 ...restProps 37818 } = props; 37819 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 37820 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Rail, { 37821 disabled: disabled, 37822 ...restProps 37823 }), marks && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Marks, { 37824 disabled: disabled, 37825 marks: marks, 37826 min: min, 37827 max: max, 37828 step: step, 37829 value: value 37830 })] 37831 }); 37832 } 37833 function Marks(props) { 37834 const { 37835 disabled = false, 37836 marks = false, 37837 min = 0, 37838 max = 100, 37839 step: stepProp = 1, 37840 value = 0 37841 } = props; 37842 const step = stepProp === 'any' ? 1 : stepProp; 37843 const marksData = useMarks({ 37844 marks, 37845 min, 37846 max, 37847 step, 37848 value 37849 }); 37850 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MarksWrapper, { 37851 "aria-hidden": "true", 37852 className: "components-range-control__marks", 37853 children: marksData.map(mark => /*#__PURE__*/(0,external_React_.createElement)(RangeMark, { 37854 ...mark, 37855 key: mark.key, 37856 "aria-hidden": "true", 37857 disabled: disabled 37858 })) 37859 }); 37860 } 37861 function useMarks({ 37862 marks, 37863 min = 0, 37864 max = 100, 37865 step = 1, 37866 value = 0 37867 }) { 37868 if (!marks) { 37869 return []; 37870 } 37871 const range = max - min; 37872 if (!Array.isArray(marks)) { 37873 marks = []; 37874 const count = 1 + Math.round(range / step); 37875 while (count > marks.push({ 37876 value: step * marks.length + min 37877 })) {} 37878 } 37879 const placedMarks = []; 37880 marks.forEach((mark, index) => { 37881 if (mark.value < min || mark.value > max) { 37882 return; 37883 } 37884 const key = `mark-$index}`; 37885 const isFilled = mark.value <= value; 37886 const offset = `${(mark.value - min) / range * 100}%`; 37887 const offsetStyle = { 37888 [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: offset 37889 }; 37890 placedMarks.push({ 37891 ...mark, 37892 isFilled, 37893 key, 37894 style: offsetStyle 37895 }); 37896 }); 37897 return placedMarks; 37898 } 37899 37900 ;// ./node_modules/@wordpress/components/build-module/range-control/tooltip.js 37901 /** 37902 * External dependencies 37903 */ 37904 37905 37906 /** 37907 * WordPress dependencies 37908 */ 37909 37910 37911 /** 37912 * Internal dependencies 37913 */ 37914 37915 37916 function SimpleTooltip(props) { 37917 const { 37918 className, 37919 inputRef, 37920 tooltipPosition, 37921 show = false, 37922 style = {}, 37923 value = 0, 37924 renderTooltipContent = v => v, 37925 zIndex = 100, 37926 ...restProps 37927 } = props; 37928 const position = useTooltipPosition({ 37929 inputRef, 37930 tooltipPosition 37931 }); 37932 const classes = dist_clsx('components-simple-tooltip', className); 37933 const styles = { 37934 ...style, 37935 zIndex 37936 }; 37937 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control_styles_Tooltip, { 37938 ...restProps, 37939 "aria-hidden": "false", 37940 className: classes, 37941 position: position, 37942 show: show, 37943 role: "tooltip", 37944 style: styles, 37945 children: renderTooltipContent(value) 37946 }); 37947 } 37948 function useTooltipPosition({ 37949 inputRef, 37950 tooltipPosition 37951 }) { 37952 const [position, setPosition] = (0,external_wp_element_namespaceObject.useState)(); 37953 const setTooltipPosition = (0,external_wp_element_namespaceObject.useCallback)(() => { 37954 if (inputRef && inputRef.current) { 37955 setPosition(tooltipPosition); 37956 } 37957 }, [tooltipPosition, inputRef]); 37958 (0,external_wp_element_namespaceObject.useEffect)(() => { 37959 setTooltipPosition(); 37960 }, [setTooltipPosition]); 37961 (0,external_wp_element_namespaceObject.useEffect)(() => { 37962 window.addEventListener('resize', setTooltipPosition); 37963 return () => { 37964 window.removeEventListener('resize', setTooltipPosition); 37965 }; 37966 }); 37967 return position; 37968 } 37969 37970 ;// ./node_modules/@wordpress/components/build-module/range-control/index.js 37971 /** 37972 * External dependencies 37973 */ 37974 37975 /** 37976 * WordPress dependencies 37977 */ 37978 37979 37980 37981 37982 /** 37983 * Internal dependencies 37984 */ 37985 37986 37987 37988 37989 37990 37991 37992 37993 37994 37995 37996 37997 37998 const range_control_noop = () => {}; 37999 38000 /** 38001 * Computes the value that `RangeControl` should reset to when pressing 38002 * the reset button. 38003 */ 38004 function computeResetValue({ 38005 resetFallbackValue, 38006 initialPosition 38007 }) { 38008 if (resetFallbackValue !== undefined) { 38009 return !Number.isNaN(resetFallbackValue) ? resetFallbackValue : null; 38010 } 38011 if (initialPosition !== undefined) { 38012 return !Number.isNaN(initialPosition) ? initialPosition : null; 38013 } 38014 return null; 38015 } 38016 function UnforwardedRangeControl(props, forwardedRef) { 38017 const { 38018 __nextHasNoMarginBottom = false, 38019 afterIcon, 38020 allowReset = false, 38021 beforeIcon, 38022 className, 38023 color: colorProp = COLORS.theme.accent, 38024 currentInput, 38025 disabled = false, 38026 help, 38027 hideLabelFromVision = false, 38028 initialPosition, 38029 isShiftStepEnabled = true, 38030 label, 38031 marks = false, 38032 max = 100, 38033 min = 0, 38034 onBlur = range_control_noop, 38035 onChange = range_control_noop, 38036 onFocus = range_control_noop, 38037 onMouseLeave = range_control_noop, 38038 onMouseMove = range_control_noop, 38039 railColor, 38040 renderTooltipContent = v => v, 38041 resetFallbackValue, 38042 __next40pxDefaultSize = false, 38043 shiftStep = 10, 38044 showTooltip: showTooltipProp, 38045 step = 1, 38046 trackColor, 38047 value: valueProp, 38048 withInputField = true, 38049 __shouldNotWarnDeprecated36pxSize, 38050 ...otherProps 38051 } = props; 38052 const [value, setValue] = useControlledRangeValue({ 38053 min, 38054 max, 38055 value: valueProp !== null && valueProp !== void 0 ? valueProp : null, 38056 initial: initialPosition 38057 }); 38058 const isResetPendent = (0,external_wp_element_namespaceObject.useRef)(false); 38059 let hasTooltip = showTooltipProp; 38060 let hasInputField = withInputField; 38061 if (step === 'any') { 38062 // The tooltip and number input field are hidden when the step is "any" 38063 // because the decimals get too lengthy to fit well. 38064 hasTooltip = false; 38065 hasInputField = false; 38066 } 38067 const [showTooltip, setShowTooltip] = (0,external_wp_element_namespaceObject.useState)(hasTooltip); 38068 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 38069 const inputRef = (0,external_wp_element_namespaceObject.useRef)(); 38070 const isCurrentlyFocused = inputRef.current?.matches(':focus'); 38071 const isThumbFocused = !disabled && isFocused; 38072 const isValueReset = value === null; 38073 const currentValue = value !== undefined ? value : currentInput; 38074 const inputSliderValue = isValueReset ? '' : currentValue; 38075 const rangeFillValue = isValueReset ? (max - min) / 2 + min : value; 38076 const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100; 38077 const fillValueOffset = `$math_clamp(fillValue, 0, 100)}%`; 38078 const classes = dist_clsx('components-range-control', className); 38079 const wrapperClasses = dist_clsx('components-range-control__wrapper', !!marks && 'is-marked'); 38080 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedRangeControl, 'inspector-range-control'); 38081 const describedBy = !!help ? `$id}__help` : undefined; 38082 const enableTooltip = hasTooltip !== false && Number.isFinite(value); 38083 const handleOnRangeChange = event => { 38084 const nextValue = parseFloat(event.target.value); 38085 setValue(nextValue); 38086 onChange(nextValue); 38087 }; 38088 const handleOnChange = next => { 38089 // @ts-expect-error TODO: Investigate if it's problematic for setValue() to 38090 // potentially receive a NaN when next is undefined. 38091 let nextValue = parseFloat(next); 38092 setValue(nextValue); 38093 38094 /* 38095 * Calls onChange only when nextValue is numeric 38096 * otherwise may queue a reset for the blur event. 38097 */ 38098 if (!isNaN(nextValue)) { 38099 if (nextValue < min || nextValue > max) { 38100 nextValue = floatClamp(nextValue, min, max); 38101 } 38102 onChange(nextValue); 38103 isResetPendent.current = false; 38104 } else if (allowReset) { 38105 isResetPendent.current = true; 38106 } 38107 }; 38108 const handleOnInputNumberBlur = () => { 38109 if (isResetPendent.current) { 38110 handleOnReset(); 38111 isResetPendent.current = false; 38112 } 38113 }; 38114 const handleOnReset = () => { 38115 // Reset to `resetFallbackValue` if defined, otherwise set internal value 38116 // to `null` — which, if propagated to the `value` prop, will cause 38117 // the value to be reset to the `initialPosition` prop if defined. 38118 const resetValue = Number.isNaN(resetFallbackValue) ? null : resetFallbackValue !== null && resetFallbackValue !== void 0 ? resetFallbackValue : null; 38119 setValue(resetValue); 38120 38121 /** 38122 * Previously, this callback would always receive undefined as 38123 * an argument. This behavior is unexpected, specifically 38124 * when resetFallbackValue is defined. 38125 * 38126 * The value of undefined is not ideal. Passing it through 38127 * to internal <input /> elements would change it from a 38128 * controlled component to an uncontrolled component. 38129 * 38130 * For now, to minimize unexpected regressions, we're going to 38131 * preserve the undefined callback argument, except when a 38132 * resetFallbackValue is defined. 38133 */ 38134 onChange(resetValue !== null && resetValue !== void 0 ? resetValue : undefined); 38135 }; 38136 const handleShowTooltip = () => setShowTooltip(true); 38137 const handleHideTooltip = () => setShowTooltip(false); 38138 const handleOnBlur = event => { 38139 onBlur(event); 38140 setIsFocused(false); 38141 handleHideTooltip(); 38142 }; 38143 const handleOnFocus = event => { 38144 onFocus(event); 38145 setIsFocused(true); 38146 handleShowTooltip(); 38147 }; 38148 const offsetStyle = { 38149 [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset 38150 }; 38151 38152 // Add default size deprecation warning. 38153 maybeWarnDeprecated36pxSize({ 38154 componentName: 'RangeControl', 38155 __next40pxDefaultSize, 38156 size: undefined, 38157 __shouldNotWarnDeprecated36pxSize 38158 }); 38159 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 38160 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 38161 __associatedWPComponentName: "RangeControl", 38162 className: classes, 38163 label: label, 38164 hideLabelFromVision: hideLabelFromVision, 38165 id: `$id}`, 38166 help: help, 38167 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Root, { 38168 className: "components-range-control__root", 38169 __next40pxDefaultSize: __next40pxDefaultSize, 38170 children: [beforeIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BeforeIconWrapper, { 38171 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 38172 icon: beforeIcon 38173 }) 38174 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Wrapper, { 38175 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 38176 className: wrapperClasses, 38177 color: colorProp, 38178 marks: !!marks, 38179 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_range, { 38180 ...otherProps, 38181 className: "components-range-control__slider", 38182 describedBy: describedBy, 38183 disabled: disabled, 38184 id: `$id}`, 38185 label: label, 38186 max: max, 38187 min: min, 38188 onBlur: handleOnBlur, 38189 onChange: handleOnRangeChange, 38190 onFocus: handleOnFocus, 38191 onMouseMove: onMouseMove, 38192 onMouseLeave: onMouseLeave, 38193 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]), 38194 step: step, 38195 value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined 38196 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RangeRail, { 38197 "aria-hidden": true, 38198 disabled: disabled, 38199 marks: marks, 38200 max: max, 38201 min: min, 38202 railColor: railColor, 38203 step: step, 38204 value: rangeFillValue 38205 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Track, { 38206 "aria-hidden": true, 38207 className: "components-range-control__track", 38208 disabled: disabled, 38209 style: { 38210 width: fillValueOffset 38211 }, 38212 trackColor: trackColor 38213 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ThumbWrapper, { 38214 className: "components-range-control__thumb-wrapper", 38215 style: offsetStyle, 38216 disabled: disabled, 38217 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Thumb, { 38218 "aria-hidden": true, 38219 isFocused: isThumbFocused, 38220 disabled: disabled 38221 }) 38222 }), enableTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SimpleTooltip, { 38223 className: "components-range-control__tooltip", 38224 inputRef: inputRef, 38225 tooltipPosition: "bottom", 38226 renderTooltipContent: renderTooltipContent, 38227 show: isCurrentlyFocused || showTooltip, 38228 style: offsetStyle, 38229 value: value 38230 })] 38231 }), afterIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AfterIconWrapper, { 38232 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 38233 icon: afterIcon 38234 }) 38235 }), hasInputField && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputNumber, { 38236 "aria-label": label, 38237 className: "components-range-control__number", 38238 disabled: disabled, 38239 inputMode: "decimal", 38240 isShiftStepEnabled: isShiftStepEnabled, 38241 max: max, 38242 min: min, 38243 onBlur: handleOnInputNumberBlur, 38244 onChange: handleOnChange, 38245 shiftStep: shiftStep, 38246 size: __next40pxDefaultSize ? '__unstable-large' : 'default', 38247 __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16), 38248 step: step 38249 // @ts-expect-error TODO: Investigate if the `null` value is necessary 38250 , 38251 value: inputSliderValue, 38252 __shouldNotWarnDeprecated36pxSize: true 38253 }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ActionRightWrapper, { 38254 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 38255 className: "components-range-control__reset" 38256 // If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence. 38257 , 38258 accessibleWhenDisabled: !disabled 38259 // The reset button should be disabled if RangeControl itself is disabled, 38260 // or if the current `value` is equal to the value that would be currently 38261 // assigned when clicking the button. 38262 , 38263 disabled: disabled || value === computeResetValue({ 38264 resetFallbackValue, 38265 initialPosition 38266 }), 38267 variant: "secondary", 38268 size: "small", 38269 onClick: handleOnReset, 38270 children: (0,external_wp_i18n_namespaceObject.__)('Reset') 38271 }) 38272 })] 38273 }) 38274 }); 38275 } 38276 38277 /** 38278 * RangeControls are used to make selections from a range of incremental values. 38279 * 38280 * ```jsx 38281 * import { RangeControl } from '@wordpress/components'; 38282 * import { useState } from '@wordpress/element'; 38283 * 38284 * const MyRangeControl = () => { 38285 * const [ isChecked, setChecked ] = useState( true ); 38286 * return ( 38287 * <RangeControl 38288 * __nextHasNoMarginBottom 38289 * __next40pxDefaultSize 38290 * help="Please select how transparent you would like this." 38291 * initialPosition={50} 38292 * label="Opacity" 38293 * max={100} 38294 * min={0} 38295 * onChange={() => {}} 38296 * /> 38297 * ); 38298 * }; 38299 * ``` 38300 */ 38301 const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl); 38302 /* harmony default export */ const range_control = (RangeControl); 38303 38304 ;// ./node_modules/@wordpress/components/build-module/color-picker/styles.js 38305 38306 /** 38307 * External dependencies 38308 */ 38309 38310 /** 38311 * Internal dependencies 38312 */ 38313 38314 38315 38316 38317 38318 38319 38320 38321 const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 38322 target: "ez9hsf46" 38323 } : 0)("width:", space(24), ";" + ( true ? "" : 0)); 38324 const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? { 38325 target: "ez9hsf45" 38326 } : 0)("margin-left:", space(-2), ";" + ( true ? "" : 0)); 38327 const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? { 38328 target: "ez9hsf44" 38329 } : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0)); 38330 38331 // Make the Hue circle picker not go out of the bar. 38332 const interactiveHueStyles = ` 38333 .react-colorful__interactive { 38334 width: calc( 100% - $space(2)} ); 38335 margin-left: $space(1)}; 38336 }`; 38337 const AuxiliaryColorArtefactWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 38338 target: "ez9hsf43" 38339 } : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0)); 38340 const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 38341 target: "ez9hsf42" 38342 } : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0)); 38343 const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 38344 target: "ez9hsf41" 38345 } : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0)); 38346 const ColorfulWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 38347 target: "ez9hsf40" 38348 } : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:", config_values.radiusFull, ";margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0)); 38349 38350 ;// ./node_modules/@wordpress/icons/build-module/library/copy.js 38351 /** 38352 * WordPress dependencies 38353 */ 38354 38355 38356 const copy_copy = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 38357 xmlns: "http://www.w3.org/2000/svg", 38358 viewBox: "0 0 24 24", 38359 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 38360 fillRule: "evenodd", 38361 clipRule: "evenodd", 38362 d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z" 38363 }) 38364 }); 38365 /* harmony default export */ const library_copy = (copy_copy); 38366 38367 ;// ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js 38368 /** 38369 * WordPress dependencies 38370 */ 38371 38372 38373 38374 38375 38376 /** 38377 * Internal dependencies 38378 */ 38379 38380 38381 38382 const ColorCopyButton = props => { 38383 const { 38384 color, 38385 colorType 38386 } = props; 38387 const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null); 38388 const copyTimerRef = (0,external_wp_element_namespaceObject.useRef)(); 38389 const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => { 38390 switch (colorType) { 38391 case 'hsl': 38392 { 38393 return color.toHslString(); 38394 } 38395 case 'rgb': 38396 { 38397 return color.toRgbString(); 38398 } 38399 default: 38400 case 'hex': 38401 { 38402 return color.toHex(); 38403 } 38404 } 38405 }, () => { 38406 if (copyTimerRef.current) { 38407 clearTimeout(copyTimerRef.current); 38408 } 38409 setCopiedColor(color.toHex()); 38410 copyTimerRef.current = setTimeout(() => { 38411 setCopiedColor(null); 38412 copyTimerRef.current = undefined; 38413 }, 3000); 38414 }); 38415 (0,external_wp_element_namespaceObject.useEffect)(() => { 38416 // Clear copyTimerRef on component unmount. 38417 return () => { 38418 if (copyTimerRef.current) { 38419 clearTimeout(copyTimerRef.current); 38420 } 38421 }; 38422 }, []); 38423 const label = copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy'); 38424 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { 38425 delay: 0, 38426 hideOnClick: false, 38427 text: label, 38428 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Button, { 38429 size: "compact", 38430 "aria-label": label, 38431 ref: copyRef, 38432 icon: library_copy, 38433 showTooltip: false 38434 }) 38435 }); 38436 }; 38437 38438 ;// ./node_modules/@wordpress/components/build-module/input-control/input-prefix-wrapper.js 38439 /** 38440 * External dependencies 38441 */ 38442 38443 /** 38444 * Internal dependencies 38445 */ 38446 38447 38448 38449 38450 function UnconnectedInputControlPrefixWrapper(props, forwardedRef) { 38451 const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper'); 38452 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrefixSuffixWrapper, { 38453 ...derivedProps, 38454 isPrefix: true, 38455 ref: forwardedRef 38456 }); 38457 } 38458 38459 /** 38460 * A convenience wrapper for the `prefix` when you want to apply 38461 * standard padding in accordance with the size variant. 38462 * 38463 * ```jsx 38464 * import { 38465 * __experimentalInputControl as InputControl, 38466 * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, 38467 * } from '@wordpress/components'; 38468 * 38469 * <InputControl 38470 * prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>} 38471 * /> 38472 * ``` 38473 */ 38474 const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper'); 38475 /* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper); 38476 38477 ;// ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js 38478 /** 38479 * Internal dependencies 38480 */ 38481 38482 38483 38484 38485 38486 38487 const InputWithSlider = ({ 38488 min, 38489 max, 38490 label, 38491 abbreviation, 38492 onChange, 38493 value 38494 }) => { 38495 const onNumberControlChange = newValue => { 38496 if (!newValue) { 38497 onChange(0); 38498 return; 38499 } 38500 if (typeof newValue === 'string') { 38501 onChange(parseInt(newValue, 10)); 38502 return; 38503 } 38504 onChange(newValue); 38505 }; 38506 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 38507 spacing: 4, 38508 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NumberControlWrapper, { 38509 __next40pxDefaultSize: true, 38510 min: min, 38511 max: max, 38512 label: label, 38513 hideLabelFromVision: true, 38514 value: value, 38515 onChange: onNumberControlChange, 38516 prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_prefix_wrapper, { 38517 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, { 38518 color: COLORS.theme.accent, 38519 lineHeight: 1, 38520 children: abbreviation 38521 }) 38522 }), 38523 spinControls: "none" 38524 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_RangeControl, { 38525 __nextHasNoMarginBottom: true, 38526 __next40pxDefaultSize: true, 38527 label: label, 38528 hideLabelFromVision: true, 38529 min: min, 38530 max: max, 38531 value: value 38532 // @ts-expect-error 38533 // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185 38534 , 38535 onChange: onChange, 38536 withInputField: false 38537 })] 38538 }); 38539 }; 38540 38541 ;// ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js 38542 /** 38543 * External dependencies 38544 */ 38545 38546 38547 /** 38548 * Internal dependencies 38549 */ 38550 38551 38552 const RgbInput = ({ 38553 color, 38554 onChange, 38555 enableAlpha 38556 }) => { 38557 const { 38558 r, 38559 g, 38560 b, 38561 a 38562 } = color.toRgb(); 38563 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 38564 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38565 min: 0, 38566 max: 255, 38567 label: "Red", 38568 abbreviation: "R", 38569 value: r, 38570 onChange: nextR => onChange(w({ 38571 r: nextR, 38572 g, 38573 b, 38574 a 38575 })) 38576 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38577 min: 0, 38578 max: 255, 38579 label: "Green", 38580 abbreviation: "G", 38581 value: g, 38582 onChange: nextG => onChange(w({ 38583 r, 38584 g: nextG, 38585 b, 38586 a 38587 })) 38588 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38589 min: 0, 38590 max: 255, 38591 label: "Blue", 38592 abbreviation: "B", 38593 value: b, 38594 onChange: nextB => onChange(w({ 38595 r, 38596 g, 38597 b: nextB, 38598 a 38599 })) 38600 }), enableAlpha && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38601 min: 0, 38602 max: 100, 38603 label: "Alpha", 38604 abbreviation: "A", 38605 value: Math.trunc(a * 100), 38606 onChange: nextA => onChange(w({ 38607 r, 38608 g, 38609 b, 38610 a: nextA / 100 38611 })) 38612 })] 38613 }); 38614 }; 38615 38616 ;// ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js 38617 /** 38618 * External dependencies 38619 */ 38620 38621 38622 /** 38623 * WordPress dependencies 38624 */ 38625 38626 38627 /** 38628 * Internal dependencies 38629 */ 38630 38631 38632 const HslInput = ({ 38633 color, 38634 onChange, 38635 enableAlpha 38636 }) => { 38637 const colorPropHSLA = (0,external_wp_element_namespaceObject.useMemo)(() => color.toHsl(), [color]); 38638 const [internalHSLA, setInternalHSLA] = (0,external_wp_element_namespaceObject.useState)({ 38639 ...colorPropHSLA 38640 }); 38641 const isInternalColorSameAsReceivedColor = color.isEqual(w(internalHSLA)); 38642 (0,external_wp_element_namespaceObject.useEffect)(() => { 38643 if (!isInternalColorSameAsReceivedColor) { 38644 // Keep internal HSLA color up to date with the received color prop 38645 setInternalHSLA(colorPropHSLA); 38646 } 38647 }, [colorPropHSLA, isInternalColorSameAsReceivedColor]); 38648 38649 // If the internal color is equal to the received color prop, we can use the 38650 // HSLA values from the local state which, compared to the received color prop, 38651 // retain more details about the actual H and S values that the user selected, 38652 // and thus allow for better UX when interacting with the H and S sliders. 38653 const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA; 38654 const updateHSLAValue = partialNewValue => { 38655 const nextOnChangeValue = w({ 38656 ...colorValue, 38657 ...partialNewValue 38658 }); 38659 38660 // Fire `onChange` only if the resulting color is different from the 38661 // current one. 38662 // Otherwise, update the internal HSLA color to cause a re-render. 38663 if (!color.isEqual(nextOnChangeValue)) { 38664 onChange(nextOnChangeValue); 38665 } else { 38666 setInternalHSLA(prevHSLA => ({ 38667 ...prevHSLA, 38668 ...partialNewValue 38669 })); 38670 } 38671 }; 38672 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 38673 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38674 min: 0, 38675 max: 359, 38676 label: "Hue", 38677 abbreviation: "H", 38678 value: colorValue.h, 38679 onChange: nextH => { 38680 updateHSLAValue({ 38681 h: nextH 38682 }); 38683 } 38684 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38685 min: 0, 38686 max: 100, 38687 label: "Saturation", 38688 abbreviation: "S", 38689 value: colorValue.s, 38690 onChange: nextS => { 38691 updateHSLAValue({ 38692 s: nextS 38693 }); 38694 } 38695 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38696 min: 0, 38697 max: 100, 38698 label: "Lightness", 38699 abbreviation: "L", 38700 value: colorValue.l, 38701 onChange: nextL => { 38702 updateHSLAValue({ 38703 l: nextL 38704 }); 38705 } 38706 }), enableAlpha && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { 38707 min: 0, 38708 max: 100, 38709 label: "Alpha", 38710 abbreviation: "A", 38711 value: Math.trunc(100 * colorValue.a), 38712 onChange: nextA => { 38713 updateHSLAValue({ 38714 a: nextA / 100 38715 }); 38716 } 38717 })] 38718 }); 38719 }; 38720 38721 ;// ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js 38722 /** 38723 * External dependencies 38724 */ 38725 38726 38727 /** 38728 * WordPress dependencies 38729 */ 38730 38731 38732 /** 38733 * Internal dependencies 38734 */ 38735 38736 38737 38738 38739 38740 const HexInput = ({ 38741 color, 38742 onChange, 38743 enableAlpha 38744 }) => { 38745 const handleChange = nextValue => { 38746 if (!nextValue) { 38747 return; 38748 } 38749 const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue; 38750 onChange(w(hexValue)); 38751 }; 38752 const stateReducer = (state, action) => { 38753 const nativeEvent = action.payload?.event?.nativeEvent; 38754 if ('insertFromPaste' !== nativeEvent?.inputType) { 38755 return { 38756 ...state 38757 }; 38758 } 38759 const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase(); 38760 return { 38761 ...state, 38762 value 38763 }; 38764 }; 38765 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputControl, { 38766 prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_prefix_wrapper, { 38767 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, { 38768 color: COLORS.theme.accent, 38769 lineHeight: 1, 38770 children: "#" 38771 }) 38772 }), 38773 value: color.toHex().slice(1).toUpperCase(), 38774 onChange: handleChange, 38775 maxLength: enableAlpha ? 9 : 7, 38776 label: (0,external_wp_i18n_namespaceObject.__)('Hex color'), 38777 hideLabelFromVision: true, 38778 size: "__unstable-large", 38779 __unstableStateReducer: stateReducer, 38780 __unstableInputWidth: "9em" 38781 }); 38782 }; 38783 38784 ;// ./node_modules/@wordpress/components/build-module/color-picker/color-input.js 38785 /** 38786 * Internal dependencies 38787 */ 38788 38789 38790 38791 38792 const ColorInput = ({ 38793 colorType, 38794 color, 38795 onChange, 38796 enableAlpha 38797 }) => { 38798 const props = { 38799 color, 38800 onChange, 38801 enableAlpha 38802 }; 38803 switch (colorType) { 38804 case 'hsl': 38805 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HslInput, { 38806 ...props 38807 }); 38808 case 'rgb': 38809 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RgbInput, { 38810 ...props 38811 }); 38812 default: 38813 case 'hex': 38814 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HexInput, { 38815 ...props 38816 }); 38817 } 38818 }; 38819 38820 ;// ./node_modules/react-colorful/dist/index.mjs 38821 function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function dist_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function dist_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var dist_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},dist_f=function(e){return"touches"in e},dist_v=function(e){return e&&e.ownerDocument.defaultView||self},dist_d=function(e,r,t){var n=e.getBoundingClientRect(),o=dist_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:dist_s((o.pageX-(n.left+dist_v(e).pageXOffset))/n.width),top:dist_s((o.pageY-(n.top+dist_v(e).pageYOffset))/n.height)}},dist_h=function(e){!dist_f(e)&&e.preventDefault()},dist_m=external_React_.memo(function(o){var a=o.onMove,l=o.onKey,s=dist_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=dist_i(a),p=dist_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){dist_h(e),(dist_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(dist_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=dist_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(dist_h(r),!function(e,r){return r&&!dist_f(e)}(r,_.current)&&n)){if(dist_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(dist_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_.createElement("div",dist_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),dist_g=function(e){return e.filter(Boolean).join(" ")},dist_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=dist_g(["react-colorful__pointer",r.className]);return external_React_.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},dist_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},dist_x=function(e){return L(C(e))},C=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?dist_b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?dist_b(parseInt(e.substring(6,8),16)/255,2):1}},dist_E=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},dist_H=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?dist_N({h:dist_E(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_M=dist_H,dist_N=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},dist_w=function(e){return K(dist_I(e))},dist_y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:dist_b(e.h),s:dist_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:dist_b(o/2),a:dist_b(n,2)}},q=function(e){var r=dist_y(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},dist_k=function(e){var r=dist_y(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},dist_I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:dist_b(255*[n,u,l,l,c,n][i]),g:dist_b(255*[c,n,n,u,l,l][i]),b:dist_b(255*[l,l,c,n,n,u][i]),a:dist_b(o,2)}},O=function(e){var r=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?A({h:dist_E(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_j=O,z=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?L({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=z,D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(dist_b(255*o)):"";return"#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:dist_b(60*(u<0?u+6:u)),s:dist_b(a?l/a*100:0),v:dist_b(a/255*100),a:o}},A=function(e){return{h:dist_b(e.h),s:dist_b(e.s),v:dist_b(e.v),a:dist_b(e.a,2)}},dist_S=external_React_.memo(function(r){var t=r.hue,n=r.onChange,o=dist_g(["react-colorful__hue",r.className]);return external_React_.createElement("div",{className:o},external_React_.createElement(dist_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:dist_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":dist_b(t),"aria-valuemax":"360","aria-valuemin":"0"},external_React_.createElement(dist_p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=external_React_.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return external_React_.createElement("div",{className:"react-colorful__saturation",style:o},external_React_.createElement(dist_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:dist_s(t.s+100*e.left,0,100),v:dist_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+dist_b(t.s)+"%, Brightness "+dist_b(t.v)+"%"},external_React_.createElement(dist_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},P=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=dist_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var R,dist_V="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,dist_$=function(){return R||( true?__webpack_require__.nc:0)},G=function(e){R=e},J=new Map,Q=function(e){dist_V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=dist_$();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:dist_x,fromHsva:function(e){return dist_w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return e.createElement(U,dist_u({},r,{colorModel:W}))},ee=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+dist_k(Object.assign({},n,{a:0}))+", "+dist_k(Object.assign({},n,{a:1}))+")"},l=dist_g(["react-colorful__alpha",t]),u=dist_b(100*n.a);return external_React_.createElement("div",{className:l},external_React_.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_.createElement(dist_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:dist_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},external_React_.createElement(dist_p,{className:"react-colorful__alpha-pointer",left:n.a,color:dist_k(n)})))},re=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h}),external_React_.createElement(ee,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},te={defaultColor:"0001",toHsva:dist_x,fromHsva:dist_w,equal:X},ne=function(r){return e.createElement(re,dist_u({},r,{colorModel:te}))},oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:dist_N,fromHsva:dist_y,equal:F},ae=function(r){return e.createElement(re,dist_u({},r,{colorModel:oe}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:dist_H,fromHsva:dist_k,equal:P},ue=function(r){return e.createElement(re,dist_u({},r,{colorModel:le}))},ce={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return dist_N({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=dist_y(e)).h,s:r.s,l:r.l};var r},equal:F},ie=function(r){return e.createElement(U,dist_u({},r,{colorModel:ce}))},se={defaultColor:"hsl(0, 0%, 0%)",toHsva:dist_M,fromHsva:q,equal:P},fe=function(r){return e.createElement(U,dist_u({},r,{colorModel:se}))},ve={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:A,equal:F},de=function(r){return e.createElement(re,dist_u({},r,{colorModel:ve}))},he={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:O,fromHsva:function(e){var r=A(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:P},me=function(r){return e.createElement(re,dist_u({},r,{colorModel:he}))},ge={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=A(e);return{h:r.h,s:r.s,v:r.v}},equal:F},pe=function(r){return e.createElement(U,dist_u({},r,{colorModel:ge}))},be={defaultColor:"hsv(0, 0%, 0%)",toHsva:dist_j,fromHsva:function(e){var r=A(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:P},_e=function(r){return e.createElement(U,dist_u({},r,{colorModel:be}))},xe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:L,fromHsva:dist_I,equal:F},Ce=function(r){return e.createElement(re,dist_u({},r,{colorModel:xe}))},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:z,fromHsva:function(e){var r=dist_I(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:P},He=function(r){return external_React_.createElement(re,dist_u({},r,{colorModel:Ee}))},Me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return L({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=dist_I(e)).r,g:r.g,b:r.b};var r},equal:F},Ne=function(r){return e.createElement(U,dist_u({},r,{colorModel:Me}))},we={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var r=dist_I(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:P},ye=function(r){return external_React_.createElement(U,dist_u({},r,{colorModel:we}))},qe=/^#?([0-9A-F]{3,8})$/i,ke=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=dist_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=dist_i(s),C=dist_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",dist_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Ie=function(e){return"#"+e},Oe=function(r){var t=r.prefixed,n=r.alpha,o=dist_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=qe.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(ke,dist_u({},o,{escape:l,format:t?Ie:void 0,process:Ie,validate:i}))}; 38822 //# sourceMappingURL=index.module.js.map 38823 38824 ;// ./node_modules/@wordpress/components/build-module/color-picker/picker.js 38825 /** 38826 * External dependencies 38827 */ 38828 38829 38830 38831 /** 38832 * WordPress dependencies 38833 */ 38834 38835 /** 38836 * Internal dependencies 38837 */ 38838 38839 const Picker = ({ 38840 color, 38841 enableAlpha, 38842 onChange 38843 }) => { 38844 const Component = enableAlpha ? He : ye; 38845 const rgbColor = (0,external_wp_element_namespaceObject.useMemo)(() => color.toRgbString(), [color]); 38846 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 38847 color: rgbColor, 38848 onChange: nextColor => { 38849 onChange(w(nextColor)); 38850 } 38851 // Pointer capture fortifies drag gestures so that they continue to 38852 // work while dragging outside the component over objects like 38853 // iframes. If a newer version of react-colorful begins to employ 38854 // pointer capture this will be redundant and should be removed. 38855 , 38856 onPointerDown: ({ 38857 currentTarget, 38858 pointerId 38859 }) => { 38860 currentTarget.setPointerCapture(pointerId); 38861 }, 38862 onPointerUp: ({ 38863 currentTarget, 38864 pointerId 38865 }) => { 38866 currentTarget.releasePointerCapture(pointerId); 38867 } 38868 }); 38869 }; 38870 38871 ;// ./node_modules/@wordpress/components/build-module/color-picker/component.js 38872 /** 38873 * External dependencies 38874 */ 38875 38876 38877 38878 38879 /** 38880 * WordPress dependencies 38881 */ 38882 38883 38884 38885 38886 /** 38887 * Internal dependencies 38888 */ 38889 38890 38891 38892 38893 38894 38895 38896 k([names]); 38897 const options = [{ 38898 label: 'RGB', 38899 value: 'rgb' 38900 }, { 38901 label: 'HSL', 38902 value: 'hsl' 38903 }, { 38904 label: 'Hex', 38905 value: 'hex' 38906 }]; 38907 const UnconnectedColorPicker = (props, forwardedRef) => { 38908 const { 38909 enableAlpha = false, 38910 color: colorProp, 38911 onChange, 38912 defaultValue = '#fff', 38913 copyFormat, 38914 ...divProps 38915 } = useContextSystem(props, 'ColorPicker'); 38916 38917 // Use a safe default value for the color and remove the possibility of `undefined`. 38918 const [color, setColor] = useControlledValue({ 38919 onChange, 38920 value: colorProp, 38921 defaultValue 38922 }); 38923 const safeColordColor = (0,external_wp_element_namespaceObject.useMemo)(() => { 38924 return w(color || ''); 38925 }, [color]); 38926 const debouncedSetColor = (0,external_wp_compose_namespaceObject.useDebounce)(setColor); 38927 const handleChange = (0,external_wp_element_namespaceObject.useCallback)(nextValue => { 38928 debouncedSetColor(nextValue.toHex()); 38929 }, [debouncedSetColor]); 38930 const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex'); 38931 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ColorfulWrapper, { 38932 ref: forwardedRef, 38933 ...divProps, 38934 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Picker, { 38935 onChange: handleChange, 38936 color: safeColordColor, 38937 enableAlpha: enableAlpha 38938 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactWrapper, { 38939 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactHStackHeader, { 38940 justify: "space-between", 38941 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectControl, { 38942 __nextHasNoMarginBottom: true, 38943 size: "compact", 38944 options: options, 38945 value: colorType, 38946 onChange: nextColorType => setColorType(nextColorType), 38947 label: (0,external_wp_i18n_namespaceObject.__)('Color format'), 38948 hideLabelFromVision: true, 38949 variant: "minimal" 38950 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorCopyButton, { 38951 color: safeColordColor, 38952 colorType: copyFormat || colorType 38953 })] 38954 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorInputWrapper, { 38955 direction: "column", 38956 gap: 2, 38957 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorInput, { 38958 colorType: colorType, 38959 color: safeColordColor, 38960 onChange: handleChange, 38961 enableAlpha: enableAlpha 38962 }) 38963 })] 38964 })] 38965 }); 38966 }; 38967 const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker'); 38968 /* harmony default export */ const color_picker_component = (ColorPicker); 38969 38970 ;// ./node_modules/@wordpress/components/build-module/color-picker/use-deprecated-props.js 38971 /** 38972 * External dependencies 38973 */ 38974 38975 38976 38977 /** 38978 * WordPress dependencies 38979 */ 38980 38981 38982 /** 38983 * Internal dependencies 38984 */ 38985 38986 function isLegacyProps(props) { 38987 return typeof props.onChangeComplete !== 'undefined' || typeof props.disableAlpha !== 'undefined' || typeof props.color?.hex === 'string'; 38988 } 38989 function getColorFromLegacyProps(color) { 38990 if (color === undefined) { 38991 return; 38992 } 38993 if (typeof color === 'string') { 38994 return color; 38995 } 38996 if (color.hex) { 38997 return color.hex; 38998 } 38999 return undefined; 39000 } 39001 const transformColorStringToLegacyColor = memize(color => { 39002 const colordColor = w(color); 39003 const hex = colordColor.toHex(); 39004 const rgb = colordColor.toRgb(); 39005 const hsv = colordColor.toHsv(); 39006 const hsl = colordColor.toHsl(); 39007 return { 39008 hex, 39009 rgb, 39010 hsv, 39011 hsl, 39012 source: 'hex', 39013 oldHue: hsl.h 39014 }; 39015 }); 39016 function use_deprecated_props_useDeprecatedProps(props) { 39017 const { 39018 onChangeComplete 39019 } = props; 39020 const legacyChangeHandler = (0,external_wp_element_namespaceObject.useCallback)(color => { 39021 onChangeComplete(transformColorStringToLegacyColor(color)); 39022 }, [onChangeComplete]); 39023 if (isLegacyProps(props)) { 39024 return { 39025 color: getColorFromLegacyProps(props.color), 39026 enableAlpha: !props.disableAlpha, 39027 onChange: legacyChangeHandler 39028 }; 39029 } 39030 return { 39031 ...props, 39032 color: props.color, 39033 enableAlpha: props.enableAlpha, 39034 onChange: props.onChange 39035 }; 39036 } 39037 39038 ;// ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js 39039 /** 39040 * Internal dependencies 39041 */ 39042 39043 39044 39045 const LegacyAdapter = props => { 39046 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_picker_component, { 39047 ...use_deprecated_props_useDeprecatedProps(props) 39048 }); 39049 }; 39050 39051 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-context.js 39052 /** 39053 * WordPress dependencies 39054 */ 39055 39056 39057 /** 39058 * Internal dependencies 39059 */ 39060 39061 const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({}); 39062 39063 ;// ./node_modules/@wordpress/icons/build-module/library/check.js 39064 /** 39065 * WordPress dependencies 39066 */ 39067 39068 39069 const check = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 39070 xmlns: "http://www.w3.org/2000/svg", 39071 viewBox: "0 0 24 24", 39072 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 39073 d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" 39074 }) 39075 }); 39076 /* harmony default export */ const library_check = (check); 39077 39078 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option.js 39079 /** 39080 * External dependencies 39081 */ 39082 39083 /** 39084 * WordPress dependencies 39085 */ 39086 39087 39088 39089 39090 /** 39091 * Internal dependencies 39092 */ 39093 39094 39095 39096 39097 function UnforwardedOptionAsButton(props, forwardedRef) { 39098 const { 39099 isPressed, 39100 label, 39101 ...additionalProps 39102 } = props; 39103 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 39104 ...additionalProps, 39105 "aria-pressed": isPressed, 39106 ref: forwardedRef, 39107 label: label 39108 }); 39109 } 39110 const OptionAsButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsButton); 39111 function UnforwardedOptionAsOption(props, forwardedRef) { 39112 const { 39113 id, 39114 isSelected, 39115 label, 39116 ...additionalProps 39117 } = props; 39118 const { 39119 setActiveId, 39120 activeId 39121 } = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext); 39122 (0,external_wp_element_namespaceObject.useEffect)(() => { 39123 if (isSelected && !activeId) { 39124 // The setTimeout call is necessary to make sure that this update 39125 // doesn't get overridden by `Composite`'s internal logic, which picks 39126 // an initial active item if one is not specifically set. 39127 window.setTimeout(() => setActiveId?.(id), 0); 39128 } 39129 }, [isSelected, setActiveId, activeId, id]); 39130 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite.Item, { 39131 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 39132 ...additionalProps, 39133 role: "option", 39134 "aria-selected": !!isSelected, 39135 ref: forwardedRef, 39136 label: label 39137 }), 39138 id: id 39139 }); 39140 } 39141 const OptionAsOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsOption); 39142 function Option({ 39143 className, 39144 isSelected, 39145 selectedIconProps = {}, 39146 tooltipText, 39147 ...additionalProps 39148 }) { 39149 const { 39150 baseId, 39151 setActiveId 39152 } = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext); 39153 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(Option, baseId || 'components-circular-option-picker__option'); 39154 const commonProps = { 39155 id, 39156 className: 'components-circular-option-picker__option', 39157 __next40pxDefaultSize: true, 39158 ...additionalProps 39159 }; 39160 const isListbox = setActiveId !== undefined; 39161 const optionControl = isListbox ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsOption, { 39162 ...commonProps, 39163 label: tooltipText, 39164 isSelected: isSelected 39165 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsButton, { 39166 ...commonProps, 39167 label: tooltipText, 39168 isPressed: isSelected 39169 }); 39170 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 39171 className: dist_clsx(className, 'components-circular-option-picker__option-wrapper'), 39172 children: [optionControl, isSelected && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 39173 icon: library_check, 39174 ...selectedIconProps 39175 })] 39176 }); 39177 } 39178 39179 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option-group.js 39180 /** 39181 * External dependencies 39182 */ 39183 39184 39185 /** 39186 * Internal dependencies 39187 */ 39188 39189 function OptionGroup({ 39190 className, 39191 options, 39192 ...additionalProps 39193 }) { 39194 const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined; 39195 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 39196 ...additionalProps, 39197 role: role, 39198 className: dist_clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className), 39199 children: options 39200 }); 39201 } 39202 39203 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-actions.js 39204 /** 39205 * External dependencies 39206 */ 39207 39208 39209 /** 39210 * Internal dependencies 39211 */ 39212 39213 39214 39215 function DropdownLinkAction({ 39216 buttonProps, 39217 className, 39218 dropdownProps, 39219 linkText 39220 }) { 39221 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { 39222 className: dist_clsx('components-circular-option-picker__dropdown-link-action', className), 39223 renderToggle: ({ 39224 isOpen, 39225 onToggle 39226 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 39227 "aria-expanded": isOpen, 39228 "aria-haspopup": "true", 39229 onClick: onToggle, 39230 variant: "link", 39231 ...buttonProps, 39232 children: linkText 39233 }), 39234 ...dropdownProps 39235 }); 39236 } 39237 function ButtonAction({ 39238 className, 39239 children, 39240 ...additionalProps 39241 }) { 39242 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 39243 __next40pxDefaultSize: true, 39244 className: dist_clsx('components-circular-option-picker__clear', className), 39245 variant: "tertiary", 39246 ...additionalProps, 39247 children: children 39248 }); 39249 } 39250 39251 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker.js 39252 /** 39253 * External dependencies 39254 */ 39255 39256 39257 /** 39258 * WordPress dependencies 39259 */ 39260 39261 39262 39263 39264 /** 39265 * Internal dependencies 39266 */ 39267 39268 39269 39270 39271 39272 39273 /** 39274 *`CircularOptionPicker` is a component that displays a set of options as circular buttons. 39275 * 39276 * ```jsx 39277 * import { CircularOptionPicker } from '../circular-option-picker'; 39278 * import { useState } from '@wordpress/element'; 39279 * 39280 * const Example = () => { 39281 * const [ currentColor, setCurrentColor ] = useState(); 39282 * const colors = [ 39283 * { color: '#f00', name: 'Red' }, 39284 * { color: '#0f0', name: 'Green' }, 39285 * { color: '#00f', name: 'Blue' }, 39286 * ]; 39287 * const colorOptions = ( 39288 * <> 39289 * { colors.map( ( { color, name }, index ) => { 39290 * return ( 39291 * <CircularOptionPicker.Option 39292 * key={ `${ color }-${ index }` } 39293 * tooltipText={ name } 39294 * style={ { backgroundColor: color, color } } 39295 * isSelected={ index === currentColor } 39296 * onClick={ () => setCurrentColor( index ) } 39297 * /> 39298 * ); 39299 * } ) } 39300 * </> 39301 * ); 39302 * return ( 39303 * <CircularOptionPicker 39304 * options={ colorOptions } 39305 * actions={ 39306 * <CircularOptionPicker.ButtonAction 39307 * onClick={ () => setCurrentColor( undefined ) } 39308 * > 39309 * { 'Clear' } 39310 * </CircularOptionPicker.ButtonAction> 39311 * } 39312 * /> 39313 * ); 39314 * }; 39315 * ``` 39316 */ 39317 39318 function ListboxCircularOptionPicker(props) { 39319 const { 39320 actions, 39321 options, 39322 baseId, 39323 className, 39324 loop = true, 39325 children, 39326 ...additionalProps 39327 } = props; 39328 const [activeId, setActiveId] = (0,external_wp_element_namespaceObject.useState)(undefined); 39329 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 39330 baseId, 39331 activeId, 39332 setActiveId 39333 }), [baseId, activeId, setActiveId]); 39334 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 39335 className: className, 39336 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CircularOptionPickerContext.Provider, { 39337 value: contextValue, 39338 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, { 39339 ...additionalProps, 39340 id: baseId, 39341 focusLoop: loop, 39342 rtl: (0,external_wp_i18n_namespaceObject.isRTL)(), 39343 role: "listbox", 39344 activeId: activeId, 39345 setActiveId: setActiveId, 39346 children: options 39347 }), children, actions] 39348 }) 39349 }); 39350 } 39351 function ButtonsCircularOptionPicker(props) { 39352 const { 39353 actions, 39354 options, 39355 children, 39356 baseId, 39357 ...additionalProps 39358 } = props; 39359 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 39360 baseId 39361 }), [baseId]); 39362 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 39363 ...additionalProps, 39364 role: "group", 39365 id: baseId, 39366 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CircularOptionPickerContext.Provider, { 39367 value: contextValue, 39368 children: [options, children, actions] 39369 }) 39370 }); 39371 } 39372 function CircularOptionPicker(props) { 39373 const { 39374 asButtons, 39375 actions: actionsProp, 39376 options: optionsProp, 39377 children, 39378 className, 39379 ...additionalProps 39380 } = props; 39381 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id); 39382 const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker; 39383 const actions = actionsProp ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 39384 className: "components-circular-option-picker__custom-clear-wrapper", 39385 children: actionsProp 39386 }) : undefined; 39387 const options = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 39388 className: "components-circular-option-picker__swatches", 39389 children: optionsProp 39390 }); 39391 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionPickerImplementation, { 39392 ...additionalProps, 39393 baseId: baseId, 39394 className: dist_clsx('components-circular-option-picker', className), 39395 actions: actions, 39396 options: options, 39397 children: children 39398 }); 39399 } 39400 CircularOptionPicker.Option = Option; 39401 CircularOptionPicker.OptionGroup = OptionGroup; 39402 CircularOptionPicker.ButtonAction = ButtonAction; 39403 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction; 39404 /* harmony default export */ const circular_option_picker = (CircularOptionPicker); 39405 39406 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/index.js 39407 /** 39408 * Internal dependencies 39409 */ 39410 39411 39412 39413 39414 39415 /* harmony default export */ const build_module_circular_option_picker = (circular_option_picker); 39416 39417 ;// ./node_modules/@wordpress/components/build-module/circular-option-picker/utils.js 39418 /** 39419 * WordPress dependencies 39420 */ 39421 39422 39423 /** 39424 * Computes the common props for the CircularOptionPicker. 39425 */ 39426 function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby) { 39427 const metaProps = asButtons ? { 39428 asButtons: true 39429 } : { 39430 asButtons: false, 39431 loop 39432 }; 39433 const labelProps = { 39434 'aria-labelledby': ariaLabelledby, 39435 'aria-label': ariaLabelledby ? undefined : ariaLabel || (0,external_wp_i18n_namespaceObject.__)('Custom color picker') 39436 }; 39437 return { 39438 metaProps, 39439 labelProps 39440 }; 39441 } 39442 39443 ;// ./node_modules/@wordpress/components/build-module/v-stack/hook.js 39444 /** 39445 * Internal dependencies 39446 */ 39447 39448 39449 39450 function useVStack(props) { 39451 const { 39452 expanded = false, 39453 alignment = 'stretch', 39454 ...otherProps 39455 } = useContextSystem(props, 'VStack'); 39456 const hStackProps = useHStack({ 39457 direction: 'column', 39458 expanded, 39459 alignment, 39460 ...otherProps 39461 }); 39462 return hStackProps; 39463 } 39464 39465 ;// ./node_modules/@wordpress/components/build-module/v-stack/component.js 39466 /** 39467 * External dependencies 39468 */ 39469 39470 /** 39471 * Internal dependencies 39472 */ 39473 39474 39475 39476 39477 39478 function UnconnectedVStack(props, forwardedRef) { 39479 const vStackProps = useVStack(props); 39480 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 39481 ...vStackProps, 39482 ref: forwardedRef 39483 }); 39484 } 39485 39486 /** 39487 * `VStack` (or Vertical Stack) is a layout component that arranges child 39488 * elements in a vertical line. 39489 * 39490 * `VStack` can render anything inside. 39491 * 39492 * ```jsx 39493 * import { 39494 * __experimentalText as Text, 39495 * __experimentalVStack as VStack, 39496 * } from `@wordpress/components`; 39497 * 39498 * function Example() { 39499 * return ( 39500 * <VStack> 39501 * <Text>Code</Text> 39502 * <Text>is</Text> 39503 * <Text>Poetry</Text> 39504 * </VStack> 39505 * ); 39506 * } 39507 * ``` 39508 */ 39509 const VStack = contextConnect(UnconnectedVStack, 'VStack'); 39510 /* harmony default export */ const v_stack_component = (VStack); 39511 39512 ;// ./node_modules/@wordpress/components/build-module/truncate/component.js 39513 /** 39514 * External dependencies 39515 */ 39516 39517 /** 39518 * Internal dependencies 39519 */ 39520 39521 39522 39523 39524 39525 function UnconnectedTruncate(props, forwardedRef) { 39526 const truncateProps = useTruncate(props); 39527 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 39528 as: "span", 39529 ...truncateProps, 39530 ref: forwardedRef 39531 }); 39532 } 39533 39534 /** 39535 * `Truncate` is a typography primitive that trims text content. 39536 * For almost all cases, it is recommended that `Text`, `Heading`, or 39537 * `Subheading` is used to render text content. However,`Truncate` is 39538 * available for custom implementations. 39539 * 39540 * ```jsx 39541 * import { __experimentalTruncate as Truncate } from `@wordpress/components`; 39542 * 39543 * function Example() { 39544 * return ( 39545 * <Truncate> 39546 * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex 39547 * neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac 39548 * mollis mi. Morbi id elementum massa. 39549 * </Truncate> 39550 * ); 39551 * } 39552 * ``` 39553 */ 39554 const component_Truncate = contextConnect(UnconnectedTruncate, 'Truncate'); 39555 /* harmony default export */ const truncate_component = (component_Truncate); 39556 39557 ;// ./node_modules/@wordpress/components/build-module/heading/hook.js 39558 /** 39559 * Internal dependencies 39560 */ 39561 39562 39563 39564 39565 39566 function useHeading(props) { 39567 const { 39568 as: asProp, 39569 level = 2, 39570 color = COLORS.theme.foreground, 39571 isBlock = true, 39572 weight = config_values.fontWeightHeading, 39573 ...otherProps 39574 } = useContextSystem(props, 'Heading'); 39575 const as = asProp || `h$level}`; 39576 const a11yProps = {}; 39577 if (typeof as === 'string' && as[0] !== 'h') { 39578 // If not a semantic `h` element, add a11y props: 39579 a11yProps.role = 'heading'; 39580 a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level; 39581 } 39582 const textProps = useText({ 39583 color, 39584 isBlock, 39585 weight, 39586 size: getHeadingFontSize(level), 39587 ...otherProps 39588 }); 39589 return { 39590 ...textProps, 39591 ...a11yProps, 39592 as 39593 }; 39594 } 39595 39596 ;// ./node_modules/@wordpress/components/build-module/heading/component.js 39597 /** 39598 * External dependencies 39599 */ 39600 39601 /** 39602 * Internal dependencies 39603 */ 39604 39605 39606 39607 39608 39609 function UnconnectedHeading(props, forwardedRef) { 39610 const headerProps = useHeading(props); 39611 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 39612 ...headerProps, 39613 ref: forwardedRef 39614 }); 39615 } 39616 39617 /** 39618 * `Heading` renders headings and titles using the library's typography system. 39619 * 39620 * ```jsx 39621 * import { __experimentalHeading as Heading } from "@wordpress/components"; 39622 * 39623 * function Example() { 39624 * return <Heading>Code is Poetry</Heading>; 39625 * } 39626 * ``` 39627 */ 39628 const Heading = contextConnect(UnconnectedHeading, 'Heading'); 39629 /* harmony default export */ const heading_component = (Heading); 39630 39631 ;// ./node_modules/@wordpress/components/build-module/color-palette/styles.js 39632 39633 function color_palette_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 39634 /** 39635 * External dependencies 39636 */ 39637 39638 /** 39639 * Internal dependencies 39640 */ 39641 39642 const ColorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 39643 target: "ev9wop70" 39644 } : 0)( true ? { 39645 name: "13lxv2o", 39646 styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}" 39647 } : 0); 39648 39649 ;// ./node_modules/@wordpress/components/build-module/dropdown/styles.js 39650 39651 /** 39652 * External dependencies 39653 */ 39654 39655 /** 39656 * Internal dependencies 39657 */ 39658 39659 const padding = ({ 39660 paddingSize = 'small' 39661 }) => { 39662 if (paddingSize === 'none') { 39663 return; 39664 } 39665 const paddingValues = { 39666 small: space(2), 39667 medium: space(4) 39668 }; 39669 return /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingValues[paddingSize] || paddingValues.small, ";" + ( true ? "" : 0), true ? "" : 0); 39670 }; 39671 const DropdownContentWrapperDiv = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 39672 target: "eovvns30" 39673 } : 0)("margin-left:", space(-2), ";margin-right:", space(-2), ";&:first-of-type{margin-top:", space(-2), ";}&:last-of-type{margin-bottom:", space(-2), ";}", padding, ";" + ( true ? "" : 0)); 39674 39675 ;// ./node_modules/@wordpress/components/build-module/dropdown/dropdown-content-wrapper.js 39676 /** 39677 * External dependencies 39678 */ 39679 39680 /** 39681 * Internal dependencies 39682 */ 39683 39684 39685 39686 39687 function UnconnectedDropdownContentWrapper(props, forwardedRef) { 39688 const { 39689 paddingSize = 'small', 39690 ...derivedProps 39691 } = useContextSystem(props, 'DropdownContentWrapper'); 39692 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownContentWrapperDiv, { 39693 ...derivedProps, 39694 paddingSize: paddingSize, 39695 ref: forwardedRef 39696 }); 39697 } 39698 39699 /** 39700 * A convenience wrapper for the `renderContent` when you want to apply 39701 * different padding. (Default is `paddingSize="small"`). 39702 * 39703 * ```jsx 39704 * import { 39705 * Dropdown, 39706 * __experimentalDropdownContentWrapper as DropdownContentWrapper, 39707 * } from '@wordpress/components'; 39708 * 39709 * <Dropdown 39710 * renderContent={ () => ( 39711 * <DropdownContentWrapper paddingSize="medium"> 39712 * My dropdown content 39713 * </DropdownContentWrapper> 39714 * ) } 39715 * /> 39716 * ``` 39717 */ 39718 const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper'); 39719 /* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper); 39720 39721 ;// ./node_modules/@wordpress/components/build-module/color-palette/utils.js 39722 /** 39723 * External dependencies 39724 */ 39725 39726 39727 39728 39729 /** 39730 * WordPress dependencies 39731 */ 39732 39733 39734 /** 39735 * Internal dependencies 39736 */ 39737 39738 k([names, a11y]); 39739 39740 /** 39741 * Checks if a color value is a simple CSS color. 39742 * 39743 * @param value The color value to check. 39744 * @return A boolean indicating whether the color value is a simple CSS color. 39745 */ 39746 const isSimpleCSSColor = value => { 39747 const valueIsCssVariable = /var\(/.test(value !== null && value !== void 0 ? value : ''); 39748 const valueIsColorMix = /color-mix\(/.test(value !== null && value !== void 0 ? value : ''); 39749 return !valueIsCssVariable && !valueIsColorMix; 39750 }; 39751 const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => { 39752 if (!currentValue) { 39753 return ''; 39754 } 39755 const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false; 39756 const normalizedCurrentValue = currentValueIsSimpleColor ? w(currentValue).toHex() : currentValue; 39757 39758 // Normalize format of `colors` to simplify the following loop 39759 39760 const colorPalettes = showMultiplePalettes ? colors : [{ 39761 colors: colors 39762 }]; 39763 for (const { 39764 colors: paletteColors 39765 } of colorPalettes) { 39766 for (const { 39767 name: colorName, 39768 color: colorValue 39769 } of paletteColors) { 39770 const normalizedColorValue = currentValueIsSimpleColor ? w(colorValue).toHex() : colorValue; 39771 if (normalizedCurrentValue === normalizedColorValue) { 39772 return colorName; 39773 } 39774 } 39775 } 39776 39777 // translators: shown when the user has picked a custom color (i.e not in the palette of colors). 39778 return (0,external_wp_i18n_namespaceObject.__)('Custom'); 39779 }; 39780 39781 // The PaletteObject type has a `colors` property (an array of ColorObject), 39782 // while the ColorObject type has a `color` property (the CSS color value). 39783 const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj); 39784 const isMultiplePaletteArray = arr => { 39785 return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj)); 39786 }; 39787 39788 /** 39789 * Transform a CSS variable used as background color into the color value itself. 39790 * 39791 * @param value The color value that may be a CSS variable. 39792 * @param element The element for which to get the computed style. 39793 * @return The background color value computed from a element. 39794 */ 39795 const normalizeColorValue = (value, element) => { 39796 if (!value || !element || isSimpleCSSColor(value)) { 39797 return value; 39798 } 39799 const { 39800 ownerDocument 39801 } = element; 39802 const { 39803 defaultView 39804 } = ownerDocument; 39805 const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor; 39806 return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value; 39807 }; 39808 39809 ;// ./node_modules/@wordpress/components/build-module/color-palette/index.js 39810 /** 39811 * External dependencies 39812 */ 39813 39814 39815 39816 39817 39818 39819 /** 39820 * WordPress dependencies 39821 */ 39822 39823 39824 39825 39826 /** 39827 * Internal dependencies 39828 */ 39829 39830 39831 39832 39833 39834 39835 39836 39837 39838 k([names, a11y]); 39839 function SinglePalette({ 39840 className, 39841 clearColor, 39842 colors, 39843 onChange, 39844 value, 39845 ...additionalProps 39846 }) { 39847 const colorOptions = (0,external_wp_element_namespaceObject.useMemo)(() => { 39848 return colors.map(({ 39849 color, 39850 name 39851 }, index) => { 39852 const colordColor = w(color); 39853 const isSelected = value === color; 39854 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { 39855 isSelected: isSelected, 39856 selectedIconProps: isSelected ? { 39857 fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000' 39858 } : {}, 39859 tooltipText: name || 39860 // translators: %s: color hex code e.g: "#f00". 39861 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color), 39862 style: { 39863 backgroundColor: color, 39864 color 39865 }, 39866 onClick: isSelected ? clearColor : () => onChange(color, index) 39867 }, `$color}-$index}`); 39868 }); 39869 }, [colors, value, onChange, clearColor]); 39870 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.OptionGroup, { 39871 className: className, 39872 options: colorOptions, 39873 ...additionalProps 39874 }); 39875 } 39876 function MultiplePalettes({ 39877 className, 39878 clearColor, 39879 colors, 39880 onChange, 39881 value, 39882 headingLevel 39883 }) { 39884 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultiplePalettes, 'color-palette'); 39885 if (colors.length === 0) { 39886 return null; 39887 } 39888 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { 39889 spacing: 3, 39890 className: className, 39891 children: colors.map(({ 39892 name, 39893 colors: colorPalette 39894 }, index) => { 39895 const id = `$instanceId}-$index}`; 39896 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 39897 spacing: 2, 39898 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorHeading, { 39899 id: id, 39900 level: headingLevel, 39901 children: name 39902 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SinglePalette, { 39903 clearColor: clearColor, 39904 colors: colorPalette, 39905 onChange: newColor => onChange(newColor, index), 39906 value: value, 39907 "aria-labelledby": id 39908 })] 39909 }, index); 39910 }) 39911 }); 39912 } 39913 function CustomColorPickerDropdown({ 39914 isRenderedInSidebar, 39915 popoverProps: receivedPopoverProps, 39916 ...props 39917 }) { 39918 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 39919 shift: true, 39920 // Disabling resize as it would otherwise cause the popover to show 39921 // scrollbars while dragging the color picker's handle close to the 39922 // popover edge. 39923 resize: false, 39924 ...(isRenderedInSidebar ? { 39925 // When in the sidebar: open to the left (stacking), 39926 // leaving the same gap as the parent popover. 39927 placement: 'left-start', 39928 offset: 34 39929 } : { 39930 // Default behavior: open below the anchor 39931 placement: 'bottom', 39932 offset: 8 39933 }), 39934 ...receivedPopoverProps 39935 }), [isRenderedInSidebar, receivedPopoverProps]); 39936 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { 39937 contentClassName: "components-color-palette__custom-color-dropdown-content", 39938 popoverProps: popoverProps, 39939 ...props 39940 }); 39941 } 39942 function UnforwardedColorPalette(props, forwardedRef) { 39943 const { 39944 asButtons, 39945 loop, 39946 clearable = true, 39947 colors = [], 39948 disableCustomColors = false, 39949 enableAlpha = false, 39950 onChange, 39951 value, 39952 __experimentalIsRenderedInSidebar = false, 39953 headingLevel = 2, 39954 'aria-label': ariaLabel, 39955 'aria-labelledby': ariaLabelledby, 39956 ...additionalProps 39957 } = props; 39958 const [normalizedColorValue, setNormalizedColorValue] = (0,external_wp_element_namespaceObject.useState)(value); 39959 const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]); 39960 const customColorPaletteCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => { 39961 setNormalizedColorValue(normalizeColorValue(value, node)); 39962 }, [value]); 39963 const hasMultipleColorOrigins = isMultiplePaletteArray(colors); 39964 const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]); 39965 const renderCustomColorPicker = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, { 39966 paddingSize: "none", 39967 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { 39968 color: normalizedColorValue, 39969 onChange: color => onChange(color), 39970 enableAlpha: enableAlpha 39971 }) 39972 }); 39973 const isHex = value?.startsWith('#'); 39974 39975 // Leave hex values as-is. Remove the `var()` wrapper from CSS vars. 39976 const displayValue = value?.replace(/^var\((.+)\)$/, '$1'); 39977 const customColorAccessibleLabel = !!displayValue ? (0,external_wp_i18n_namespaceObject.sprintf)( 39978 // translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00". 39979 (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker'); 39980 const paletteCommonProps = { 39981 clearColor, 39982 onChange, 39983 value 39984 }; 39985 const actions = !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, { 39986 onClick: clearColor, 39987 accessibleWhenDisabled: true, 39988 disabled: !value, 39989 children: (0,external_wp_i18n_namespaceObject.__)('Clear') 39990 }); 39991 const { 39992 metaProps, 39993 labelProps 39994 } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby); 39995 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 39996 spacing: 3, 39997 ref: forwardedRef, 39998 ...additionalProps, 39999 children: [!disableCustomColors && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, { 40000 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 40001 renderContent: renderCustomColorPicker, 40002 renderToggle: ({ 40003 isOpen, 40004 onToggle 40005 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 40006 className: "components-color-palette__custom-color-wrapper", 40007 spacing: 0, 40008 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { 40009 ref: customColorPaletteCallbackRef, 40010 className: "components-color-palette__custom-color-button", 40011 "aria-expanded": isOpen, 40012 "aria-haspopup": "true", 40013 onClick: onToggle, 40014 "aria-label": customColorAccessibleLabel, 40015 style: { 40016 background: value 40017 }, 40018 type: "button" 40019 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 40020 className: "components-color-palette__custom-color-text-wrapper", 40021 spacing: 0.5, 40022 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(truncate_component, { 40023 className: "components-color-palette__custom-color-name", 40024 children: value ? buttonLabelName : (0,external_wp_i18n_namespaceObject.__)('No color selected') 40025 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(truncate_component, { 40026 className: dist_clsx('components-color-palette__custom-color-value', { 40027 'components-color-palette__custom-color-value--is-hex': isHex 40028 }), 40029 children: displayValue 40030 })] 40031 })] 40032 }) 40033 }), (colors.length > 0 || actions) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, { 40034 ...metaProps, 40035 ...labelProps, 40036 actions: actions, 40037 options: hasMultipleColorOrigins ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultiplePalettes, { 40038 ...paletteCommonProps, 40039 headingLevel: headingLevel, 40040 colors: colors, 40041 value: value 40042 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SinglePalette, { 40043 ...paletteCommonProps, 40044 colors: colors, 40045 value: value 40046 }) 40047 })] 40048 }); 40049 } 40050 40051 /** 40052 * Allows the user to pick a color from a list of pre-defined color entries. 40053 * 40054 * ```jsx 40055 * import { ColorPalette } from '@wordpress/components'; 40056 * import { useState } from '@wordpress/element'; 40057 * 40058 * const MyColorPalette = () => { 40059 * const [ color, setColor ] = useState ( '#f00' ) 40060 * const colors = [ 40061 * { name: 'red', color: '#f00' }, 40062 * { name: 'white', color: '#fff' }, 40063 * { name: 'blue', color: '#00f' }, 40064 * ]; 40065 * return ( 40066 * <ColorPalette 40067 * colors={ colors } 40068 * value={ color } 40069 * onChange={ ( color ) => setColor( color ) } 40070 * /> 40071 * ); 40072 * } ); 40073 * ``` 40074 */ 40075 const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette); 40076 /* harmony default export */ const color_palette = (ColorPalette); 40077 40078 ;// ./node_modules/@wordpress/components/build-module/unit-control/styles/unit-control-styles.js 40079 40080 /** 40081 * External dependencies 40082 */ 40083 40084 /** 40085 * Internal dependencies 40086 */ 40087 40088 40089 40090 40091 40092 // Using `selectSize` instead of `size` to avoid a type conflict with the 40093 // `size` HTML attribute of the `select` element. 40094 40095 // TODO: Resolve need to use &&& to increase specificity 40096 // https://github.com/WordPress/gutenberg/issues/18483 40097 40098 const ValueInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 40099 target: "e1bagdl32" 40100 } : 0)("&&&{input{display:block;width:100%;}", BackdropUI, "{transition:box-shadow 0.1s linear;}}" + ( true ? "" : 0)); 40101 const baseUnitLabelStyles = ({ 40102 selectSize 40103 }) => { 40104 const sizes = { 40105 small: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;padding:2px 1px;width:20px;font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;&:not( :disabled ){color:", COLORS.gray[800], ";}" + ( true ? "" : 0), true ? "" : 0), 40106 default: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", space(2), ";padding:", space(1), ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;field-sizing:content;&:not( :disabled ){color:", COLORS.theme.accent, ";}" + ( true ? "" : 0), true ? "" : 0) 40107 }; 40108 return sizes[selectSize]; 40109 }; 40110 const UnitLabel = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 40111 target: "e1bagdl31" 40112 } : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", COLORS.gray[900], ";}" + ( true ? "" : 0)); 40113 const unitSelectSizes = ({ 40114 selectSize = 'default' 40115 }) => { 40116 const sizes = { 40117 small: /*#__PURE__*/emotion_react_browser_esm_css("height:100%;border:1px solid transparent;transition:box-shadow 0.1s linear,border 0.1s linear;", rtl({ 40118 borderTopLeftRadius: 0, 40119 borderBottomLeftRadius: 0 40120 })(), " &:not(:disabled):hover{background-color:", COLORS.gray[100], ";}&:focus{border:1px solid ", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline-offset:0;outline:2px solid transparent;z-index:1;}" + ( true ? "" : 0), true ? "" : 0), 40121 default: /*#__PURE__*/emotion_react_browser_esm_css("display:flex;justify-content:center;align-items:center;&:where( :not( :disabled ) ):hover{box-shadow:0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidth, " solid transparent;}&:focus{box-shadow:0 0 0 ", config_values.borderWidthFocus + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidthFocus, " solid transparent;}" + ( true ? "" : 0), true ? "" : 0) 40122 }; 40123 return sizes[selectSize]; 40124 }; 40125 const UnitSelect = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? { 40126 target: "e1bagdl30" 40127 } : 0)("&&&{appearance:none;background:transparent;border-radius:", config_values.radiusXSmall, ";border:none;display:block;outline:none;margin:0;min-height:auto;font-family:inherit;", baseUnitLabelStyles, ";", unitSelectSizes, ";&:not( :disabled ){cursor:pointer;}}" + ( true ? "" : 0)); 40128 40129 ;// ./node_modules/@wordpress/components/build-module/border-control/styles.js 40130 function border_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 40131 /** 40132 * External dependencies 40133 */ 40134 40135 40136 /** 40137 * Internal dependencies 40138 */ 40139 40140 40141 40142 40143 const focusBoxShadow = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:inset ", config_values.controlBoxShadowFocus, ";" + ( true ? "" : 0), true ? "" : 0); 40144 const borderControl = /*#__PURE__*/emotion_react_browser_esm_css("border:0;padding:0;margin:0;", boxSizingReset, ";" + ( true ? "" : 0), true ? "" : 0); 40145 const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:1 1 40%;}&& ", UnitSelect, "{min-height:0;}" + ( true ? "" : 0), true ? "" : 0); 40146 40147 /* 40148 * This style is only applied to the UnitControl wrapper when the border width 40149 * field should be a set width. Omitting this allows the UnitControl & 40150 * RangeControl to share the available width in a 40/60 split respectively. 40151 */ 40152 const styles_wrapperWidth = /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:0 0 auto;}" + ( true ? "" : 0), true ? "" : 0); 40153 const wrapperHeight = size => { 40154 return /*#__PURE__*/emotion_react_browser_esm_css("height:", size === '__unstable-large' ? '40px' : '30px', ";" + ( true ? "" : 0), true ? "" : 0); 40155 }; 40156 const borderControlDropdown = /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;&&>button{aspect-ratio:1;padding:0;display:flex;align-items:center;justify-content:center;", rtl({ 40157 borderRadius: `2px 0 0 2px` 40158 }, { 40159 borderRadius: `0 2px 2px 0` 40160 })(), " border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";&:focus,&:hover:not( :disabled ){", focusBoxShadow, " border-color:", COLORS.ui.borderFocus, ";z-index:1;position:relative;}}" + ( true ? "" : 0), true ? "" : 0); 40161 const colorIndicatorBorder = border => { 40162 const { 40163 color, 40164 style 40165 } = border || {}; 40166 const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined; 40167 return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0), true ? "" : 0); 40168 }; 40169 const colorIndicatorWrapper = (border, size) => { 40170 const { 40171 style 40172 } = border || {}; 40173 return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", config_values.radiusFull, ";border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0); 40174 }; 40175 40176 // Must equal $color-palette-circle-size from: 40177 // @wordpress/components/src/circular-option-picker/style.scss 40178 const swatchSize = 28; 40179 const swatchGap = 12; 40180 const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("width:", swatchSize * 6 + swatchGap * 5, "px;>div:first-of-type>", StyledLabel, "{margin-bottom:0;}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0), true ? "" : 0); 40181 const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 40182 const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 40183 const resetButtonWrapper = true ? { 40184 name: "1ghe26v", 40185 styles: "display:flex;justify-content:flex-end;margin-top:12px" 40186 } : 0; 40187 const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({ 40188 marginRight: space(3) 40189 })(), ";" + ( true ? "" : 0), true ? "" : 0); 40190 40191 ;// ./node_modules/@wordpress/components/build-module/unit-control/utils.js 40192 /** 40193 * WordPress dependencies 40194 */ 40195 40196 40197 40198 /** 40199 * Internal dependencies 40200 */ 40201 40202 const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web'; 40203 const allUnits = { 40204 px: { 40205 value: 'px', 40206 label: isWeb ? 'px' : (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'), 40207 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'), 40208 step: 1 40209 }, 40210 '%': { 40211 value: '%', 40212 label: isWeb ? '%' : (0,external_wp_i18n_namespaceObject.__)('Percentage (%)'), 40213 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Percent (%)'), 40214 step: 0.1 40215 }, 40216 em: { 40217 value: 'em', 40218 label: isWeb ? 'em' : (0,external_wp_i18n_namespaceObject.__)('Relative to parent font size (em)'), 40219 a11yLabel: (0,external_wp_i18n_namespaceObject._x)('ems', 'Relative to parent font size (em)'), 40220 step: 0.01 40221 }, 40222 rem: { 40223 value: 'rem', 40224 label: isWeb ? 'rem' : (0,external_wp_i18n_namespaceObject.__)('Relative to root font size (rem)'), 40225 a11yLabel: (0,external_wp_i18n_namespaceObject._x)('rems', 'Relative to root font size (rem)'), 40226 step: 0.01 40227 }, 40228 vw: { 40229 value: 'vw', 40230 label: isWeb ? 'vw' : (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'), 40231 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'), 40232 step: 0.1 40233 }, 40234 vh: { 40235 value: 'vh', 40236 label: isWeb ? 'vh' : (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'), 40237 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'), 40238 step: 0.1 40239 }, 40240 vmin: { 40241 value: 'vmin', 40242 label: isWeb ? 'vmin' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'), 40243 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'), 40244 step: 0.1 40245 }, 40246 vmax: { 40247 value: 'vmax', 40248 label: isWeb ? 'vmax' : (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'), 40249 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'), 40250 step: 0.1 40251 }, 40252 ch: { 40253 value: 'ch', 40254 label: isWeb ? 'ch' : (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'), 40255 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'), 40256 step: 0.01 40257 }, 40258 ex: { 40259 value: 'ex', 40260 label: isWeb ? 'ex' : (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'), 40261 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'), 40262 step: 0.01 40263 }, 40264 cm: { 40265 value: 'cm', 40266 label: isWeb ? 'cm' : (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'), 40267 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'), 40268 step: 0.001 40269 }, 40270 mm: { 40271 value: 'mm', 40272 label: isWeb ? 'mm' : (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'), 40273 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'), 40274 step: 0.1 40275 }, 40276 in: { 40277 value: 'in', 40278 label: isWeb ? 'in' : (0,external_wp_i18n_namespaceObject.__)('Inches (in)'), 40279 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Inches (in)'), 40280 step: 0.001 40281 }, 40282 pc: { 40283 value: 'pc', 40284 label: isWeb ? 'pc' : (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'), 40285 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'), 40286 step: 1 40287 }, 40288 pt: { 40289 value: 'pt', 40290 label: isWeb ? 'pt' : (0,external_wp_i18n_namespaceObject.__)('Points (pt)'), 40291 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Points (pt)'), 40292 step: 1 40293 }, 40294 svw: { 40295 value: 'svw', 40296 label: isWeb ? 'svw' : (0,external_wp_i18n_namespaceObject.__)('Small viewport width (svw)'), 40297 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width (svw)'), 40298 step: 0.1 40299 }, 40300 svh: { 40301 value: 'svh', 40302 label: isWeb ? 'svh' : (0,external_wp_i18n_namespaceObject.__)('Small viewport height (svh)'), 40303 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport height (svh)'), 40304 step: 0.1 40305 }, 40306 svi: { 40307 value: 'svi', 40308 label: isWeb ? 'svi' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest size in the inline direction (svi)'), 40309 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width or height (svi)'), 40310 step: 0.1 40311 }, 40312 svb: { 40313 value: 'svb', 40314 label: isWeb ? 'svb' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest size in the block direction (svb)'), 40315 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width or height (svb)'), 40316 step: 0.1 40317 }, 40318 svmin: { 40319 value: 'svmin', 40320 label: isWeb ? 'svmin' : (0,external_wp_i18n_namespaceObject.__)('Small viewport smallest dimension (svmin)'), 40321 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport smallest dimension (svmin)'), 40322 step: 0.1 40323 }, 40324 lvw: { 40325 value: 'lvw', 40326 label: isWeb ? 'lvw' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width (lvw)'), 40327 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width (lvw)'), 40328 step: 0.1 40329 }, 40330 lvh: { 40331 value: 'lvh', 40332 label: isWeb ? 'lvh' : (0,external_wp_i18n_namespaceObject.__)('Large viewport height (lvh)'), 40333 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport height (lvh)'), 40334 step: 0.1 40335 }, 40336 lvi: { 40337 value: 'lvi', 40338 label: isWeb ? 'lvi' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvi)'), 40339 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvi)'), 40340 step: 0.1 40341 }, 40342 lvb: { 40343 value: 'lvb', 40344 label: isWeb ? 'lvb' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvb)'), 40345 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvb)'), 40346 step: 0.1 40347 }, 40348 lvmin: { 40349 value: 'lvmin', 40350 label: isWeb ? 'lvmin' : (0,external_wp_i18n_namespaceObject.__)('Large viewport smallest dimension (lvmin)'), 40351 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport smallest dimension (lvmin)'), 40352 step: 0.1 40353 }, 40354 dvw: { 40355 value: 'dvw', 40356 label: isWeb ? 'dvw' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width (dvw)'), 40357 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width (dvw)'), 40358 step: 0.1 40359 }, 40360 dvh: { 40361 value: 'dvh', 40362 label: isWeb ? 'dvh' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport height (dvh)'), 40363 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport height (dvh)'), 40364 step: 0.1 40365 }, 40366 dvi: { 40367 value: 'dvi', 40368 label: isWeb ? 'dvi' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvi)'), 40369 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvi)'), 40370 step: 0.1 40371 }, 40372 dvb: { 40373 value: 'dvb', 40374 label: isWeb ? 'dvb' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvb)'), 40375 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvb)'), 40376 step: 0.1 40377 }, 40378 dvmin: { 40379 value: 'dvmin', 40380 label: isWeb ? 'dvmin' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport smallest dimension (dvmin)'), 40381 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport smallest dimension (dvmin)'), 40382 step: 0.1 40383 }, 40384 dvmax: { 40385 value: 'dvmax', 40386 label: isWeb ? 'dvmax' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport largest dimension (dvmax)'), 40387 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport largest dimension (dvmax)'), 40388 step: 0.1 40389 }, 40390 svmax: { 40391 value: 'svmax', 40392 label: isWeb ? 'svmax' : (0,external_wp_i18n_namespaceObject.__)('Small viewport largest dimension (svmax)'), 40393 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport largest dimension (svmax)'), 40394 step: 0.1 40395 }, 40396 lvmax: { 40397 value: 'lvmax', 40398 label: isWeb ? 'lvmax' : (0,external_wp_i18n_namespaceObject.__)('Large viewport largest dimension (lvmax)'), 40399 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport largest dimension (lvmax)'), 40400 step: 0.1 40401 } 40402 }; 40403 40404 /** 40405 * An array of all available CSS length units. 40406 */ 40407 const ALL_CSS_UNITS = Object.values(allUnits); 40408 40409 /** 40410 * Units of measurements. `a11yLabel` is used by screenreaders. 40411 */ 40412 const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh]; 40413 const DEFAULT_UNIT = allUnits.px; 40414 40415 /** 40416 * Handles legacy value + unit handling. 40417 * This component use to manage both incoming value and units separately. 40418 * 40419 * Moving forward, ideally the value should be a string that contains both 40420 * the value and unit, example: '10px' 40421 * 40422 * @param rawValue The raw value as a string (may or may not contain the unit) 40423 * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value` 40424 * @param allowedUnits Units to derive from. 40425 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 40426 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse 40427 * from the raw value could not be matched against the list of allowed units. 40428 */ 40429 function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) { 40430 const initialValue = fallbackUnit ? `$rawValue !== null && rawValue !== void 0 ? rawValue : ''}$fallbackUnit}` : rawValue; 40431 return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits); 40432 } 40433 40434 /** 40435 * Checks if units are defined. 40436 * 40437 * @param units List of units. 40438 * @return Whether the list actually contains any units. 40439 */ 40440 function hasUnits(units) { 40441 // Although the `isArray` check shouldn't be necessary (given the signature of 40442 // this typed function), it's better to stay on the side of caution, since 40443 // this function may be called from un-typed environments. 40444 return Array.isArray(units) && !!units.length; 40445 } 40446 40447 /** 40448 * Parses a quantity and unit from a raw string value, given a list of allowed 40449 * units and otherwise falling back to the default unit. 40450 * 40451 * @param rawValue The raw value as a string (may or may not contain the unit) 40452 * @param allowedUnits Units to derive from. 40453 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 40454 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed 40455 * from the raw value could not be matched against the list of allowed units. 40456 */ 40457 function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) { 40458 let trimmedValue; 40459 let quantityToReturn; 40460 if (typeof rawValue !== 'undefined' || rawValue === null) { 40461 trimmedValue = `$rawValue}`.trim(); 40462 const parsedQuantity = parseFloat(trimmedValue); 40463 quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity; 40464 } 40465 const unitMatch = trimmedValue?.match(/[\d.\-\+]*\s*(.*)/); 40466 const matchedUnit = unitMatch?.[1]?.toLowerCase(); 40467 let unitToReturn; 40468 if (hasUnits(allowedUnits)) { 40469 const match = allowedUnits.find(item => item.value === matchedUnit); 40470 unitToReturn = match?.value; 40471 } else { 40472 unitToReturn = DEFAULT_UNIT.value; 40473 } 40474 return [quantityToReturn, unitToReturn]; 40475 } 40476 40477 /** 40478 * Parses quantity and unit from a raw value. Validates parsed value, using fallback 40479 * value if invalid. 40480 * 40481 * @param rawValue The next value. 40482 * @param allowedUnits Units to derive from. 40483 * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value. 40484 * @param fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value. 40485 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 40486 * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The 40487 * unit can be `undefined` only if the unit parsed from the raw value could not be matched against 40488 * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of 40489 * `allowedUnits` is passed empty. 40490 */ 40491 function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) { 40492 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits); 40493 40494 // The parsed value from `parseQuantityAndUnitFromRawValue` should now be 40495 // either a real number or undefined. If undefined, use the fallback value. 40496 const quantityToReturn = parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : fallbackQuantity; 40497 40498 // If no unit is parsed from the raw value, or if the fallback unit is not 40499 // defined, use the first value from the list of allowed units as fallback. 40500 let unitToReturn = parsedUnit || fallbackUnit; 40501 if (!unitToReturn && hasUnits(allowedUnits)) { 40502 unitToReturn = allowedUnits[0].value; 40503 } 40504 return [quantityToReturn, unitToReturn]; 40505 } 40506 40507 /** 40508 * Takes a unit value and finds the matching accessibility label for the 40509 * unit abbreviation. 40510 * 40511 * @param unit Unit value (example: `px`) 40512 * @return a11y label for the unit abbreviation 40513 */ 40514 function getAccessibleLabelForUnit(unit) { 40515 const match = ALL_CSS_UNITS.find(item => item.value === unit); 40516 return match?.a11yLabel ? match?.a11yLabel : match?.value; 40517 } 40518 40519 /** 40520 * Filters available units based on values defined a list of allowed unit values. 40521 * 40522 * @param allowedUnitValues Collection of allowed unit value strings. 40523 * @param availableUnits Collection of available unit objects. 40524 * @return Filtered units. 40525 */ 40526 function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) { 40527 // Although the `isArray` check shouldn't be necessary (given the signature of 40528 // this typed function), it's better to stay on the side of caution, since 40529 // this function may be called from un-typed environments. 40530 return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : []; 40531 } 40532 40533 /** 40534 * Custom hook to retrieve and consolidate units setting from add_theme_support(). 40535 * TODO: ideally this hook shouldn't be needed 40536 * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823 40537 * 40538 * @param args An object containing units, settingPath & defaultUnits. 40539 * @param args.units Collection of all potentially available units. 40540 * @param args.availableUnits Collection of unit value strings for filtering available units. 40541 * @param args.defaultValues Collection of default values for defined units. Example: `{ px: 350, em: 15 }`. 40542 * 40543 * @return Filtered list of units, with their default values updated following the `defaultValues` 40544 * argument's property. 40545 */ 40546 const useCustomUnits = ({ 40547 units = ALL_CSS_UNITS, 40548 availableUnits = [], 40549 defaultValues 40550 }) => { 40551 const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units); 40552 if (defaultValues) { 40553 customUnitsToReturn.forEach((unit, i) => { 40554 if (defaultValues[unit.value]) { 40555 const [parsedDefaultValue] = parseQuantityAndUnitFromRawValue(defaultValues[unit.value]); 40556 customUnitsToReturn[i].default = parsedDefaultValue; 40557 } 40558 }); 40559 } 40560 return customUnitsToReturn; 40561 }; 40562 40563 /** 40564 * Get available units with the unit for the currently selected value 40565 * prepended if it is not available in the list of units. 40566 * 40567 * This is useful to ensure that the current value's unit is always 40568 * accurately displayed in the UI, even if the intention is to hide 40569 * the availability of that unit. 40570 * 40571 * @param rawValue Selected value to parse. 40572 * @param legacyUnit Legacy unit value, if rawValue needs it appended. 40573 * @param units List of available units. 40574 * 40575 * @return A collection of units containing the unit for the current value. 40576 */ 40577 function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) { 40578 const unitsToReturn = Array.isArray(units) ? [...units] : []; 40579 const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS); 40580 if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) { 40581 if (allUnits[currentUnit]) { 40582 unitsToReturn.unshift(allUnits[currentUnit]); 40583 } 40584 } 40585 return unitsToReturn; 40586 } 40587 40588 ;// ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/hook.js 40589 /** 40590 * WordPress dependencies 40591 */ 40592 40593 40594 /** 40595 * Internal dependencies 40596 */ 40597 40598 40599 40600 40601 function useBorderControlDropdown(props) { 40602 const { 40603 border, 40604 className, 40605 colors = [], 40606 enableAlpha = false, 40607 enableStyle = true, 40608 onChange, 40609 previousStyleSelection, 40610 size = 'default', 40611 __experimentalIsRenderedInSidebar = false, 40612 ...otherProps 40613 } = useContextSystem(props, 'BorderControlDropdown'); 40614 const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width); 40615 const hasZeroWidth = widthValue === 0; 40616 const onColorChange = color => { 40617 const style = border?.style === 'none' ? previousStyleSelection : border?.style; 40618 const width = hasZeroWidth && !!color ? '1px' : border?.width; 40619 onChange({ 40620 color, 40621 style, 40622 width 40623 }); 40624 }; 40625 const onStyleChange = style => { 40626 const width = hasZeroWidth && !!style ? '1px' : border?.width; 40627 onChange({ 40628 ...border, 40629 style, 40630 width 40631 }); 40632 }; 40633 const onReset = () => { 40634 onChange({ 40635 ...border, 40636 color: undefined, 40637 style: undefined 40638 }); 40639 }; 40640 40641 // Generate class names. 40642 const cx = useCx(); 40643 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 40644 return cx(borderControlDropdown, className); 40645 }, [className, cx]); 40646 const indicatorClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 40647 return cx(borderColorIndicator); 40648 }, [cx]); 40649 const indicatorWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 40650 return cx(colorIndicatorWrapper(border, size)); 40651 }, [border, cx, size]); 40652 const popoverControlsClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 40653 return cx(borderControlPopoverControls); 40654 }, [cx]); 40655 const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 40656 return cx(borderControlPopoverContent); 40657 }, [cx]); 40658 const resetButtonWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 40659 return cx(resetButtonWrapper); 40660 }, [cx]); 40661 return { 40662 ...otherProps, 40663 border, 40664 className: classes, 40665 colors, 40666 enableAlpha, 40667 enableStyle, 40668 indicatorClassName, 40669 indicatorWrapperClassName, 40670 onColorChange, 40671 onStyleChange, 40672 onReset, 40673 popoverContentClassName, 40674 popoverControlsClassName, 40675 resetButtonWrapperClassName, 40676 size, 40677 __experimentalIsRenderedInSidebar 40678 }; 40679 } 40680 40681 ;// ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js 40682 /** 40683 * External dependencies 40684 */ 40685 40686 /** 40687 * WordPress dependencies 40688 */ 40689 40690 40691 /** 40692 * Internal dependencies 40693 */ 40694 40695 40696 40697 40698 40699 40700 40701 40702 40703 40704 40705 const getAriaLabelColorValue = colorValue => { 40706 // Leave hex values as-is. Remove the `var()` wrapper from CSS vars. 40707 return colorValue.replace(/^var\((.+)\)$/, '$1'); 40708 }; 40709 const getColorObject = (colorValue, colors) => { 40710 if (!colorValue || !colors) { 40711 return; 40712 } 40713 if (isMultiplePaletteArray(colors)) { 40714 // Multiple origins 40715 let matchedColor; 40716 colors.some(origin => origin.colors.some(color => { 40717 if (color.color === colorValue) { 40718 matchedColor = color; 40719 return true; 40720 } 40721 return false; 40722 })); 40723 return matchedColor; 40724 } 40725 40726 // Single origin 40727 return colors.find(color => color.color === colorValue); 40728 }; 40729 const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => { 40730 if (isStyleEnabled) { 40731 if (colorObject) { 40732 const ariaLabelValue = getAriaLabelColorValue(colorObject.color); 40733 return style ? (0,external_wp_i18n_namespaceObject.sprintf)( 40734 // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid". 40735 (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'), colorObject.name, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)( 40736 // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 40737 (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, ariaLabelValue); 40738 } 40739 if (colorValue) { 40740 const ariaLabelValue = getAriaLabelColorValue(colorValue); 40741 return style ? (0,external_wp_i18n_namespaceObject.sprintf)( 40742 // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid". 40743 (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'), ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)( 40744 // translators: %s: The color's hex code e.g: "#f00". 40745 (0,external_wp_i18n_namespaceObject.__)('Border color and style picker. The currently selected color has a value of "%s".'), ariaLabelValue); 40746 } 40747 return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.'); 40748 } 40749 if (colorObject) { 40750 return (0,external_wp_i18n_namespaceObject.sprintf)( 40751 // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00". 40752 (0,external_wp_i18n_namespaceObject.__)('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, getAriaLabelColorValue(colorObject.color)); 40753 } 40754 if (colorValue) { 40755 return (0,external_wp_i18n_namespaceObject.sprintf)( 40756 // translators: %s: The color's hex code e.g: "#f00". 40757 (0,external_wp_i18n_namespaceObject.__)('Border color picker. The currently selected color has a value of "%s".'), getAriaLabelColorValue(colorValue)); 40758 } 40759 return (0,external_wp_i18n_namespaceObject.__)('Border color picker.'); 40760 }; 40761 const BorderControlDropdown = (props, forwardedRef) => { 40762 const { 40763 __experimentalIsRenderedInSidebar, 40764 border, 40765 colors, 40766 disableCustomColors, 40767 enableAlpha, 40768 enableStyle, 40769 indicatorClassName, 40770 indicatorWrapperClassName, 40771 isStyleSettable, 40772 onReset, 40773 onColorChange, 40774 onStyleChange, 40775 popoverContentClassName, 40776 popoverControlsClassName, 40777 resetButtonWrapperClassName, 40778 size, 40779 __unstablePopoverProps, 40780 ...otherProps 40781 } = useBorderControlDropdown(props); 40782 const { 40783 color, 40784 style 40785 } = border || {}; 40786 const colorObject = getColorObject(color, colors); 40787 const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle); 40788 const enableResetButton = color || style && style !== 'none'; 40789 const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined; 40790 const renderToggle = ({ 40791 onToggle 40792 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 40793 onClick: onToggle, 40794 variant: "tertiary", 40795 "aria-label": toggleAriaLabel, 40796 tooltipPosition: dropdownPosition, 40797 label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'), 40798 showTooltip: true, 40799 __next40pxDefaultSize: size === '__unstable-large', 40800 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 40801 className: indicatorWrapperClassName, 40802 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, { 40803 className: indicatorClassName, 40804 colorValue: color 40805 }) 40806 }) 40807 }); 40808 const renderContent = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 40809 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(dropdown_content_wrapper, { 40810 paddingSize: "medium", 40811 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 40812 className: popoverControlsClassName, 40813 spacing: 6, 40814 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, { 40815 className: popoverContentClassName, 40816 value: color, 40817 onChange: onColorChange, 40818 colors, 40819 disableCustomColors, 40820 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 40821 clearable: false, 40822 enableAlpha: enableAlpha 40823 }), enableStyle && isStyleSettable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_style_picker_component, { 40824 label: (0,external_wp_i18n_namespaceObject.__)('Style'), 40825 value: style, 40826 onChange: onStyleChange 40827 })] 40828 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 40829 className: resetButtonWrapperClassName, 40830 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 40831 variant: "tertiary", 40832 onClick: () => { 40833 onReset(); 40834 }, 40835 disabled: !enableResetButton, 40836 accessibleWhenDisabled: true, 40837 __next40pxDefaultSize: true, 40838 children: (0,external_wp_i18n_namespaceObject.__)('Reset') 40839 }) 40840 })] 40841 }) 40842 }); 40843 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { 40844 renderToggle: renderToggle, 40845 renderContent: renderContent, 40846 popoverProps: { 40847 ...__unstablePopoverProps 40848 }, 40849 ...otherProps, 40850 ref: forwardedRef 40851 }); 40852 }; 40853 const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown'); 40854 /* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown); 40855 40856 ;// ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js 40857 /** 40858 * External dependencies 40859 */ 40860 40861 /** 40862 * WordPress dependencies 40863 */ 40864 40865 40866 /** 40867 * Internal dependencies 40868 */ 40869 40870 40871 40872 40873 function UnitSelectControl({ 40874 className, 40875 isUnitSelectTabbable: isTabbable = true, 40876 onChange, 40877 size = 'default', 40878 unit = 'px', 40879 units = CSS_UNITS, 40880 ...props 40881 }, ref) { 40882 if (!hasUnits(units) || units?.length === 1) { 40883 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UnitLabel, { 40884 className: "components-unit-control__unit-label", 40885 selectSize: size, 40886 children: unit 40887 }); 40888 } 40889 const handleOnChange = event => { 40890 const { 40891 value: unitValue 40892 } = event.target; 40893 const data = units.find(option => option.value === unitValue); 40894 onChange?.(unitValue, { 40895 event, 40896 data 40897 }); 40898 }; 40899 const classes = dist_clsx('components-unit-control__select', className); 40900 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UnitSelect, { 40901 ref: ref, 40902 className: classes, 40903 onChange: handleOnChange, 40904 selectSize: size, 40905 tabIndex: isTabbable ? undefined : -1, 40906 value: unit, 40907 ...props, 40908 children: units.map(option => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { 40909 value: option.value, 40910 children: option.label 40911 }, option.value)) 40912 }); 40913 } 40914 /* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl)); 40915 40916 ;// ./node_modules/@wordpress/components/build-module/unit-control/index.js 40917 /** 40918 * External dependencies 40919 */ 40920 40921 40922 40923 /** 40924 * WordPress dependencies 40925 */ 40926 40927 40928 40929 40930 /** 40931 * Internal dependencies 40932 */ 40933 40934 40935 40936 40937 40938 40939 40940 40941 40942 function UnforwardedUnitControl(unitControlProps, forwardedRef) { 40943 const { 40944 __unstableStateReducer, 40945 autoComplete = 'off', 40946 // @ts-expect-error Ensure that children is omitted from restProps 40947 children, 40948 className, 40949 disabled = false, 40950 disableUnits = false, 40951 isPressEnterToChange = false, 40952 isResetValueOnUnitChange = false, 40953 isUnitSelectTabbable = true, 40954 label, 40955 onChange: onChangeProp, 40956 onUnitChange, 40957 size = 'default', 40958 unit: unitProp, 40959 units: unitsProp = CSS_UNITS, 40960 value: valueProp, 40961 onFocus: onFocusProp, 40962 __shouldNotWarnDeprecated36pxSize, 40963 ...props 40964 } = useDeprecated36pxDefaultSizeProp(unitControlProps); 40965 maybeWarnDeprecated36pxSize({ 40966 componentName: 'UnitControl', 40967 __next40pxDefaultSize: props.__next40pxDefaultSize, 40968 size, 40969 __shouldNotWarnDeprecated36pxSize 40970 }); 40971 if ('unit' in unitControlProps) { 40972 external_wp_deprecated_default()('UnitControl unit prop', { 40973 since: '5.6', 40974 hint: 'The unit should be provided within the `value` prop.', 40975 version: '6.2' 40976 }); 40977 } 40978 40979 // The `value` prop, in theory, should not be `null`, but the following line 40980 // ensures it fallback to `undefined` in case a consumer of `UnitControl` 40981 // still passes `null` as a `value`. 40982 const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined; 40983 const [units, reFirstCharacterOfUnits] = (0,external_wp_element_namespaceObject.useMemo)(() => { 40984 const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp); 40985 const [{ 40986 value: firstUnitValue = '' 40987 } = {}, ...rest] = list; 40988 const firstCharacters = rest.reduce((carry, { 40989 value 40990 }) => { 40991 const first = escapeRegExp(value?.substring(0, 1) || ''); 40992 return carry.includes(first) ? carry : `$carry}|$first}`; 40993 }, escapeRegExp(firstUnitValue.substring(0, 1))); 40994 return [list, new RegExp(`^(?:$firstCharacters})$`, 'i')]; 40995 }, [nonNullValueProp, unitProp, unitsProp]); 40996 const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units); 40997 const [unit, setUnit] = use_controlled_state(units.length === 1 ? units[0].value : unitProp, { 40998 initial: parsedUnit, 40999 fallback: '' 41000 }); 41001 (0,external_wp_element_namespaceObject.useEffect)(() => { 41002 if (parsedUnit !== undefined) { 41003 setUnit(parsedUnit); 41004 } 41005 }, [parsedUnit, setUnit]); 41006 const classes = dist_clsx('components-unit-control', 41007 // This class is added for legacy purposes to maintain it on the outer 41008 // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139 41009 'components-unit-control-wrapper', className); 41010 const handleOnQuantityChange = (nextQuantityValue, changeProps) => { 41011 if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) { 41012 onChangeProp?.('', changeProps); 41013 return; 41014 } 41015 41016 /* 41017 * Customizing the onChange callback. 41018 * This allows as to broadcast a combined value+unit to onChange. 41019 */ 41020 const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join(''); 41021 onChangeProp?.(onChangeValue, changeProps); 41022 }; 41023 const handleOnUnitChange = (nextUnitValue, changeProps) => { 41024 const { 41025 data 41026 } = changeProps; 41027 let nextValue = `$parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}$nextUnitValue}`; 41028 if (isResetValueOnUnitChange && data?.default !== undefined) { 41029 nextValue = `$data.default}$nextUnitValue}`; 41030 } 41031 onChangeProp?.(nextValue, changeProps); 41032 onUnitChange?.(nextUnitValue, changeProps); 41033 setUnit(nextUnitValue); 41034 }; 41035 let handleOnKeyDown; 41036 if (!disableUnits && isUnitSelectTabbable && units.length) { 41037 handleOnKeyDown = event => { 41038 props.onKeyDown?.(event); 41039 // Unless the meta or ctrl key was pressed (to avoid interfering with 41040 // shortcuts, e.g. pastes), move focus to the unit select if a key 41041 // matches the first character of a unit. 41042 if (!event.metaKey && !event.ctrlKey && reFirstCharacterOfUnits.test(event.key)) { 41043 refInputSuffix.current?.focus(); 41044 } 41045 }; 41046 } 41047 const refInputSuffix = (0,external_wp_element_namespaceObject.useRef)(null); 41048 const inputSuffix = !disableUnits ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_select_control, { 41049 ref: refInputSuffix, 41050 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'), 41051 disabled: disabled, 41052 isUnitSelectTabbable: isUnitSelectTabbable, 41053 onChange: handleOnUnitChange, 41054 size: ['small', 'compact'].includes(size) || size === 'default' && !props.__next40pxDefaultSize ? 'small' : 'default', 41055 unit: unit, 41056 units: units, 41057 onFocus: onFocusProp, 41058 onBlur: unitControlProps.onBlur 41059 }) : null; 41060 let step = props.step; 41061 41062 /* 41063 * If no step prop has been passed, lookup the active unit and 41064 * try to get step from `units`, or default to a value of `1` 41065 */ 41066 if (!step && units) { 41067 var _activeUnit$step; 41068 const activeUnit = units.find(option => option.value === unit); 41069 step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1; 41070 } 41071 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ValueInput, { 41072 ...props, 41073 __shouldNotWarnDeprecated36pxSize: true, 41074 autoComplete: autoComplete, 41075 className: classes, 41076 disabled: disabled, 41077 spinControls: "none", 41078 isPressEnterToChange: isPressEnterToChange, 41079 label: label, 41080 onKeyDown: handleOnKeyDown, 41081 onChange: handleOnQuantityChange, 41082 ref: forwardedRef, 41083 size: size, 41084 suffix: inputSuffix, 41085 type: isPressEnterToChange ? 'text' : 'number', 41086 value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '', 41087 step: step, 41088 onFocus: onFocusProp, 41089 __unstableStateReducer: __unstableStateReducer 41090 }); 41091 } 41092 41093 /** 41094 * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`). 41095 * 41096 * 41097 * ```jsx 41098 * import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; 41099 * import { useState } from '@wordpress/element'; 41100 * 41101 * const Example = () => { 41102 * const [ value, setValue ] = useState( '10px' ); 41103 * 41104 * return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />; 41105 * }; 41106 * ``` 41107 */ 41108 const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl); 41109 41110 /* harmony default export */ const unit_control = (UnitControl); 41111 41112 ;// ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js 41113 /** 41114 * WordPress dependencies 41115 */ 41116 41117 41118 /** 41119 * Internal dependencies 41120 */ 41121 41122 41123 41124 41125 41126 41127 // If either width or color are defined, the border is considered valid 41128 // and a border style can be set as well. 41129 const isValidBorder = border => { 41130 const hasWidth = border?.width !== undefined && border.width !== ''; 41131 const hasColor = border?.color !== undefined; 41132 return hasWidth || hasColor; 41133 }; 41134 function useBorderControl(props) { 41135 const { 41136 className, 41137 colors = [], 41138 isCompact, 41139 onChange, 41140 enableAlpha = true, 41141 enableStyle = true, 41142 shouldSanitizeBorder = true, 41143 size = 'default', 41144 value: border, 41145 width, 41146 __experimentalIsRenderedInSidebar = false, 41147 __next40pxDefaultSize, 41148 __shouldNotWarnDeprecated36pxSize, 41149 ...otherProps 41150 } = useContextSystem(props, 'BorderControl'); 41151 maybeWarnDeprecated36pxSize({ 41152 componentName: 'BorderControl', 41153 __next40pxDefaultSize, 41154 size, 41155 __shouldNotWarnDeprecated36pxSize 41156 }); 41157 const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size; 41158 const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width); 41159 const widthUnit = originalWidthUnit || 'px'; 41160 const hadPreviousZeroWidth = widthValue === 0; 41161 const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)(); 41162 const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)(); 41163 const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true; 41164 const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => { 41165 if (shouldSanitizeBorder && !isValidBorder(newBorder)) { 41166 onChange(undefined); 41167 return; 41168 } 41169 onChange(newBorder); 41170 }, [onChange, shouldSanitizeBorder]); 41171 const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => { 41172 const newWidthValue = newWidth === '' ? undefined : newWidth; 41173 const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth); 41174 const hasZeroWidth = parsedValue === 0; 41175 const updatedBorder = { 41176 ...border, 41177 width: newWidthValue 41178 }; 41179 41180 // Setting the border width explicitly to zero will also set the 41181 // border style to `none` and clear the border color. 41182 if (hasZeroWidth && !hadPreviousZeroWidth) { 41183 // Before clearing the color and style selections, keep track of 41184 // the current selections so they can be restored when the width 41185 // changes to a non-zero value. 41186 setColorSelection(border?.color); 41187 setStyleSelection(border?.style); 41188 41189 // Clear the color and style border properties. 41190 updatedBorder.color = undefined; 41191 updatedBorder.style = 'none'; 41192 } 41193 41194 // Selection has changed from zero border width to non-zero width. 41195 if (!hasZeroWidth && hadPreviousZeroWidth) { 41196 // Restore previous border color and style selections if width 41197 // is now not zero. 41198 if (updatedBorder.color === undefined) { 41199 updatedBorder.color = colorSelection; 41200 } 41201 if (updatedBorder.style === 'none') { 41202 updatedBorder.style = styleSelection; 41203 } 41204 } 41205 onBorderChange(updatedBorder); 41206 }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]); 41207 const onSliderChange = (0,external_wp_element_namespaceObject.useCallback)(value => { 41208 onWidthChange(`$value}$widthUnit}`); 41209 }, [onWidthChange, widthUnit]); 41210 41211 // Generate class names. 41212 const cx = useCx(); 41213 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 41214 return cx(borderControl, className); 41215 }, [className, cx]); 41216 let wrapperWidth = width; 41217 if (isCompact) { 41218 // Widths below represent the minimum usable width for compact controls. 41219 // Taller controls contain greater internal padding, thus greater width. 41220 wrapperWidth = size === '__unstable-large' ? '116px' : '90px'; 41221 } 41222 const innerWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 41223 const widthStyle = !!wrapperWidth && styles_wrapperWidth; 41224 const heightStyle = wrapperHeight(computedSize); 41225 return cx(innerWrapper(), widthStyle, heightStyle); 41226 }, [wrapperWidth, cx, computedSize]); 41227 const sliderClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 41228 return cx(borderSlider()); 41229 }, [cx]); 41230 return { 41231 ...otherProps, 41232 className: classes, 41233 colors, 41234 enableAlpha, 41235 enableStyle, 41236 innerWrapperClassName, 41237 inputWidth: wrapperWidth, 41238 isStyleSettable, 41239 onBorderChange, 41240 onSliderChange, 41241 onWidthChange, 41242 previousStyleSelection: styleSelection, 41243 sliderClassName, 41244 value: border, 41245 widthUnit, 41246 widthValue, 41247 size: computedSize, 41248 __experimentalIsRenderedInSidebar, 41249 __next40pxDefaultSize 41250 }; 41251 } 41252 41253 ;// ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js 41254 /** 41255 * WordPress dependencies 41256 */ 41257 41258 41259 /** 41260 * Internal dependencies 41261 */ 41262 41263 41264 41265 41266 41267 41268 41269 41270 41271 41272 41273 const BorderLabel = props => { 41274 const { 41275 label, 41276 hideLabelFromVision 41277 } = props; 41278 if (!label) { 41279 return null; 41280 } 41281 return hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 41282 as: "legend", 41283 children: label 41284 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { 41285 as: "legend", 41286 children: label 41287 }); 41288 }; 41289 const UnconnectedBorderControl = (props, forwardedRef) => { 41290 const { 41291 __next40pxDefaultSize = false, 41292 colors, 41293 disableCustomColors, 41294 disableUnits, 41295 enableAlpha, 41296 enableStyle, 41297 hideLabelFromVision, 41298 innerWrapperClassName, 41299 inputWidth, 41300 isStyleSettable, 41301 label, 41302 onBorderChange, 41303 onSliderChange, 41304 onWidthChange, 41305 placeholder, 41306 __unstablePopoverProps, 41307 previousStyleSelection, 41308 showDropdownHeader, 41309 size, 41310 sliderClassName, 41311 value: border, 41312 widthUnit, 41313 widthValue, 41314 withSlider, 41315 __experimentalIsRenderedInSidebar, 41316 ...otherProps 41317 } = useBorderControl(props); 41318 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { 41319 as: "fieldset", 41320 ...otherProps, 41321 ref: forwardedRef, 41322 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BorderLabel, { 41323 label: label, 41324 hideLabelFromVision: hideLabelFromVision 41325 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 41326 spacing: 4, 41327 className: innerWrapperClassName, 41328 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_control, { 41329 __next40pxDefaultSize: __next40pxDefaultSize, 41330 __shouldNotWarnDeprecated36pxSize: true, 41331 prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 41332 marginRight: 1, 41333 marginBottom: 0, 41334 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_dropdown_component, { 41335 border: border, 41336 colors: colors, 41337 __unstablePopoverProps: __unstablePopoverProps, 41338 disableCustomColors: disableCustomColors, 41339 enableAlpha: enableAlpha, 41340 enableStyle: enableStyle, 41341 isStyleSettable: isStyleSettable, 41342 onChange: onBorderChange, 41343 previousStyleSelection: previousStyleSelection, 41344 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 41345 size: size 41346 }) 41347 }), 41348 label: (0,external_wp_i18n_namespaceObject.__)('Border width'), 41349 hideLabelFromVision: true, 41350 min: 0, 41351 onChange: onWidthChange, 41352 value: border?.width || '', 41353 placeholder: placeholder, 41354 disableUnits: disableUnits, 41355 __unstableInputWidth: inputWidth, 41356 size: size 41357 }), withSlider && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, { 41358 __nextHasNoMarginBottom: true, 41359 label: (0,external_wp_i18n_namespaceObject.__)('Border width'), 41360 hideLabelFromVision: true, 41361 className: sliderClassName, 41362 initialPosition: 0, 41363 max: 100, 41364 min: 0, 41365 onChange: onSliderChange, 41366 step: ['px', '%'].includes(widthUnit) ? 1 : 0.1, 41367 value: widthValue || undefined, 41368 withInputField: false, 41369 __next40pxDefaultSize: __next40pxDefaultSize, 41370 __shouldNotWarnDeprecated36pxSize: true 41371 })] 41372 })] 41373 }); 41374 }; 41375 41376 /** 41377 * The `BorderControl` brings together internal sub-components which allow users to 41378 * set the various properties of a border. The first sub-component, a 41379 * `BorderDropdown` contains options representing border color and style. The 41380 * border width is controlled via a `UnitControl` and an optional `RangeControl`. 41381 * 41382 * Border radius is not covered by this control as it may be desired separate to 41383 * color, style, and width. For example, the border radius may be absorbed under 41384 * a "shape" abstraction. 41385 * 41386 * ```jsx 41387 * import { BorderControl } from '@wordpress/components'; 41388 * import { __ } from '@wordpress/i18n'; 41389 * 41390 * const colors = [ 41391 * { name: 'Blue 20', color: '#72aee6' }, 41392 * // ... 41393 * ]; 41394 * 41395 * const MyBorderControl = () => { 41396 * const [ border, setBorder ] = useState(); 41397 * const onChange = ( newBorder ) => setBorder( newBorder ); 41398 * 41399 * return ( 41400 * <BorderControl 41401 * __next40pxDefaultSize 41402 * colors={ colors } 41403 * label={ __( 'Border' ) } 41404 * onChange={ onChange } 41405 * value={ border } 41406 * /> 41407 * ); 41408 * }; 41409 * ``` 41410 */ 41411 const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl'); 41412 /* harmony default export */ const border_control_component = (BorderControl); 41413 41414 ;// ./node_modules/@wordpress/components/build-module/grid/utils.js 41415 /** 41416 * External dependencies 41417 */ 41418 41419 const utils_ALIGNMENTS = { 41420 bottom: { 41421 alignItems: 'flex-end', 41422 justifyContent: 'center' 41423 }, 41424 bottomLeft: { 41425 alignItems: 'flex-start', 41426 justifyContent: 'flex-end' 41427 }, 41428 bottomRight: { 41429 alignItems: 'flex-end', 41430 justifyContent: 'flex-end' 41431 }, 41432 center: { 41433 alignItems: 'center', 41434 justifyContent: 'center' 41435 }, 41436 spaced: { 41437 alignItems: 'center', 41438 justifyContent: 'space-between' 41439 }, 41440 left: { 41441 alignItems: 'center', 41442 justifyContent: 'flex-start' 41443 }, 41444 right: { 41445 alignItems: 'center', 41446 justifyContent: 'flex-end' 41447 }, 41448 stretch: { 41449 alignItems: 'stretch' 41450 }, 41451 top: { 41452 alignItems: 'flex-start', 41453 justifyContent: 'center' 41454 }, 41455 topLeft: { 41456 alignItems: 'flex-start', 41457 justifyContent: 'flex-start' 41458 }, 41459 topRight: { 41460 alignItems: 'flex-start', 41461 justifyContent: 'flex-end' 41462 } 41463 }; 41464 function utils_getAlignmentProps(alignment) { 41465 const alignmentProps = alignment ? utils_ALIGNMENTS[alignment] : {}; 41466 return alignmentProps; 41467 } 41468 41469 ;// ./node_modules/@wordpress/components/build-module/grid/hook.js 41470 /** 41471 * External dependencies 41472 */ 41473 41474 41475 /** 41476 * WordPress dependencies 41477 */ 41478 41479 41480 /** 41481 * Internal dependencies 41482 */ 41483 41484 41485 41486 41487 41488 41489 function useGrid(props) { 41490 const { 41491 align, 41492 alignment, 41493 className, 41494 columnGap, 41495 columns = 2, 41496 gap = 3, 41497 isInline = false, 41498 justify, 41499 rowGap, 41500 rows, 41501 templateColumns, 41502 templateRows, 41503 ...otherProps 41504 } = useContextSystem(props, 'Grid'); 41505 const columnsAsArray = Array.isArray(columns) ? columns : [columns]; 41506 const column = useResponsiveValue(columnsAsArray); 41507 const rowsAsArray = Array.isArray(rows) ? rows : [rows]; 41508 const row = useResponsiveValue(rowsAsArray); 41509 const gridTemplateColumns = templateColumns || !!columns && `repeat( $column}, 1fr )`; 41510 const gridTemplateRows = templateRows || !!rows && `repeat( $row}, 1fr )`; 41511 const cx = useCx(); 41512 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 41513 const alignmentProps = utils_getAlignmentProps(alignment); 41514 const gridClasses = /*#__PURE__*/emotion_react_browser_esm_css({ 41515 alignItems: align, 41516 display: isInline ? 'inline-grid' : 'grid', 41517 gap: `calc( $config_values.gridBase} * $gap} )`, 41518 gridTemplateColumns: gridTemplateColumns || undefined, 41519 gridTemplateRows: gridTemplateRows || undefined, 41520 gridRowGap: rowGap, 41521 gridColumnGap: columnGap, 41522 justifyContent: justify, 41523 verticalAlign: isInline ? 'middle' : undefined, 41524 ...alignmentProps 41525 }, true ? "" : 0, true ? "" : 0); 41526 return cx(gridClasses, className); 41527 }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]); 41528 return { 41529 ...otherProps, 41530 className: classes 41531 }; 41532 } 41533 41534 ;// ./node_modules/@wordpress/components/build-module/grid/component.js 41535 /** 41536 * External dependencies 41537 */ 41538 41539 /** 41540 * Internal dependencies 41541 */ 41542 41543 41544 41545 41546 41547 function UnconnectedGrid(props, forwardedRef) { 41548 const gridProps = useGrid(props); 41549 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 41550 ...gridProps, 41551 ref: forwardedRef 41552 }); 41553 } 41554 41555 /** 41556 * `Grid` is a primitive layout component that can arrange content in a grid configuration. 41557 * 41558 * ```jsx 41559 * import { 41560 * __experimentalGrid as Grid, 41561 * __experimentalText as Text 41562 * } from `@wordpress/components`; 41563 * 41564 * function Example() { 41565 * return ( 41566 * <Grid columns={ 3 }> 41567 * <Text>Code</Text> 41568 * <Text>is</Text> 41569 * <Text>Poetry</Text> 41570 * </Grid> 41571 * ); 41572 * } 41573 * ``` 41574 */ 41575 const Grid = contextConnect(UnconnectedGrid, 'Grid'); 41576 /* harmony default export */ const grid_component = (Grid); 41577 41578 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/hook.js 41579 /** 41580 * WordPress dependencies 41581 */ 41582 41583 41584 /** 41585 * Internal dependencies 41586 */ 41587 41588 41589 41590 function useBorderBoxControlSplitControls(props) { 41591 const { 41592 className, 41593 colors = [], 41594 enableAlpha = false, 41595 enableStyle = true, 41596 size = 'default', 41597 __experimentalIsRenderedInSidebar = false, 41598 ...otherProps 41599 } = useContextSystem(props, 'BorderBoxControlSplitControls'); 41600 41601 // Generate class names. 41602 const cx = useCx(); 41603 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 41604 return cx(borderBoxControlSplitControls(size), className); 41605 }, [cx, className, size]); 41606 const centeredClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 41607 return cx(centeredBorderControl, className); 41608 }, [cx, className]); 41609 const rightAlignedClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 41610 return cx(rightBorderControl(), className); 41611 }, [cx, className]); 41612 return { 41613 ...otherProps, 41614 centeredClassName, 41615 className: classes, 41616 colors, 41617 enableAlpha, 41618 enableStyle, 41619 rightAlignedClassName, 41620 size, 41621 __experimentalIsRenderedInSidebar 41622 }; 41623 } 41624 41625 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js 41626 /** 41627 * WordPress dependencies 41628 */ 41629 41630 41631 41632 41633 /** 41634 * Internal dependencies 41635 */ 41636 41637 41638 41639 41640 41641 41642 const BorderBoxControlSplitControls = (props, forwardedRef) => { 41643 const { 41644 centeredClassName, 41645 colors, 41646 disableCustomColors, 41647 enableAlpha, 41648 enableStyle, 41649 onChange, 41650 popoverPlacement, 41651 popoverOffset, 41652 rightAlignedClassName, 41653 size = 'default', 41654 value, 41655 __experimentalIsRenderedInSidebar, 41656 ...otherProps 41657 } = useBorderBoxControlSplitControls(props); 41658 41659 // Use internal state instead of a ref to make sure that the component 41660 // re-renders when the popover's anchor updates. 41661 const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 41662 41663 // Memoize popoverProps to avoid returning a new object every time. 41664 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? { 41665 placement: popoverPlacement, 41666 offset: popoverOffset, 41667 anchor: popoverAnchor, 41668 shift: true 41669 } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]); 41670 const sharedBorderControlProps = { 41671 colors, 41672 disableCustomColors, 41673 enableAlpha, 41674 enableStyle, 41675 isCompact: true, 41676 __experimentalIsRenderedInSidebar, 41677 size, 41678 __shouldNotWarnDeprecated36pxSize: true 41679 }; 41680 const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]); 41681 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, { 41682 ...otherProps, 41683 ref: mergedRef, 41684 gap: 3, 41685 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_visualizer_component, { 41686 value: value, 41687 size: size 41688 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { 41689 className: centeredClassName, 41690 hideLabelFromVision: true, 41691 label: (0,external_wp_i18n_namespaceObject.__)('Top border'), 41692 onChange: newBorder => onChange(newBorder, 'top'), 41693 __unstablePopoverProps: popoverProps, 41694 value: value?.top, 41695 ...sharedBorderControlProps 41696 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { 41697 hideLabelFromVision: true, 41698 label: (0,external_wp_i18n_namespaceObject.__)('Left border'), 41699 onChange: newBorder => onChange(newBorder, 'left'), 41700 __unstablePopoverProps: popoverProps, 41701 value: value?.left, 41702 ...sharedBorderControlProps 41703 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { 41704 className: rightAlignedClassName, 41705 hideLabelFromVision: true, 41706 label: (0,external_wp_i18n_namespaceObject.__)('Right border'), 41707 onChange: newBorder => onChange(newBorder, 'right'), 41708 __unstablePopoverProps: popoverProps, 41709 value: value?.right, 41710 ...sharedBorderControlProps 41711 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { 41712 className: centeredClassName, 41713 hideLabelFromVision: true, 41714 label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'), 41715 onChange: newBorder => onChange(newBorder, 'bottom'), 41716 __unstablePopoverProps: popoverProps, 41717 value: value?.bottom, 41718 ...sharedBorderControlProps 41719 })] 41720 }); 41721 }; 41722 const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls'); 41723 /* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls); 41724 41725 ;// ./node_modules/@wordpress/components/build-module/utils/unit-values.js 41726 const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/; 41727 41728 /** 41729 * Parses a number and unit from a value. 41730 * 41731 * @param toParse Value to parse 41732 * 41733 * @return The extracted number and unit. 41734 */ 41735 function parseCSSUnitValue(toParse) { 41736 const value = toParse.trim(); 41737 const matched = value.match(UNITED_VALUE_REGEX); 41738 if (!matched) { 41739 return [undefined, undefined]; 41740 } 41741 const [, num, unit] = matched; 41742 let numParsed = parseFloat(num); 41743 numParsed = Number.isNaN(numParsed) ? undefined : numParsed; 41744 return [numParsed, unit]; 41745 } 41746 41747 /** 41748 * Combines a value and a unit into a unit value. 41749 * 41750 * @param value 41751 * @param unit 41752 * 41753 * @return The unit value. 41754 */ 41755 function createCSSUnitValue(value, unit) { 41756 return `$value}$unit}`; 41757 } 41758 41759 ;// ./node_modules/@wordpress/components/build-module/border-box-control/utils.js 41760 /** 41761 * External dependencies 41762 */ 41763 41764 /** 41765 * Internal dependencies 41766 */ 41767 41768 const utils_sides = ['top', 'right', 'bottom', 'left']; 41769 const borderProps = ['color', 'style', 'width']; 41770 const isEmptyBorder = border => { 41771 if (!border) { 41772 return true; 41773 } 41774 return !borderProps.some(prop => border[prop] !== undefined); 41775 }; 41776 const isDefinedBorder = border => { 41777 // No border, no worries :) 41778 if (!border) { 41779 return false; 41780 } 41781 41782 // If we have individual borders per side within the border object we 41783 // need to check whether any of those side borders have been set. 41784 if (hasSplitBorders(border)) { 41785 const allSidesEmpty = utils_sides.every(side => isEmptyBorder(border[side])); 41786 return !allSidesEmpty; 41787 } 41788 41789 // If we have a top-level border only, check if that is empty. e.g. 41790 // { color: undefined, style: undefined, width: undefined } 41791 // Border radius can still be set within the border object as it is 41792 // handled separately. 41793 return !isEmptyBorder(border); 41794 }; 41795 const isCompleteBorder = border => { 41796 if (!border) { 41797 return false; 41798 } 41799 return borderProps.every(prop => border[prop] !== undefined); 41800 }; 41801 const hasSplitBorders = (border = {}) => { 41802 return Object.keys(border).some(side => utils_sides.indexOf(side) !== -1); 41803 }; 41804 const hasMixedBorders = borders => { 41805 if (!hasSplitBorders(borders)) { 41806 return false; 41807 } 41808 const shorthandBorders = utils_sides.map(side => getShorthandBorderStyle(borders?.[side])); 41809 return !shorthandBorders.every(border => border === shorthandBorders[0]); 41810 }; 41811 const getSplitBorders = border => { 41812 if (!border || isEmptyBorder(border)) { 41813 return undefined; 41814 } 41815 return { 41816 top: border, 41817 right: border, 41818 bottom: border, 41819 left: border 41820 }; 41821 }; 41822 const getBorderDiff = (original, updated) => { 41823 const diff = {}; 41824 if (original.color !== updated.color) { 41825 diff.color = updated.color; 41826 } 41827 if (original.style !== updated.style) { 41828 diff.style = updated.style; 41829 } 41830 if (original.width !== updated.width) { 41831 diff.width = updated.width; 41832 } 41833 return diff; 41834 }; 41835 const getCommonBorder = borders => { 41836 if (!borders) { 41837 return undefined; 41838 } 41839 const colors = []; 41840 const styles = []; 41841 const widths = []; 41842 utils_sides.forEach(side => { 41843 colors.push(borders[side]?.color); 41844 styles.push(borders[side]?.style); 41845 widths.push(borders[side]?.width); 41846 }); 41847 const allColorsMatch = colors.every(value => value === colors[0]); 41848 const allStylesMatch = styles.every(value => value === styles[0]); 41849 const allWidthsMatch = widths.every(value => value === widths[0]); 41850 return { 41851 color: allColorsMatch ? colors[0] : undefined, 41852 style: allStylesMatch ? styles[0] : undefined, 41853 width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths) 41854 }; 41855 }; 41856 const getShorthandBorderStyle = (border, fallbackBorder) => { 41857 if (isEmptyBorder(border)) { 41858 return fallbackBorder; 41859 } 41860 const { 41861 color: fallbackColor, 41862 style: fallbackStyle, 41863 width: fallbackWidth 41864 } = fallbackBorder || {}; 41865 const { 41866 color = fallbackColor, 41867 style = fallbackStyle, 41868 width = fallbackWidth 41869 } = border; 41870 const hasVisibleBorder = !!width && width !== '0' || !!color; 41871 const borderStyle = hasVisibleBorder ? style || 'solid' : style; 41872 return [width, borderStyle, color].filter(Boolean).join(' '); 41873 }; 41874 const getMostCommonUnit = values => { 41875 // Collect all the CSS units. 41876 const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`$value}`)[1]); 41877 41878 // Return the most common unit out of only the defined CSS units. 41879 const filteredUnits = units.filter(value => value !== undefined); 41880 return mode(filteredUnits); 41881 }; 41882 41883 /** 41884 * Finds the mode value out of the array passed favouring the first value 41885 * as a tiebreaker. 41886 * 41887 * @param values Values to determine the mode from. 41888 * 41889 * @return The mode value. 41890 */ 41891 function mode(values) { 41892 if (values.length === 0) { 41893 return undefined; 41894 } 41895 const map = {}; 41896 let maxCount = 0; 41897 let currentMode; 41898 values.forEach(value => { 41899 map[value] = map[value] === undefined ? 1 : map[value] + 1; 41900 if (map[value] > maxCount) { 41901 currentMode = value; 41902 maxCount = map[value]; 41903 } 41904 }); 41905 return currentMode; 41906 } 41907 41908 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/hook.js 41909 /** 41910 * WordPress dependencies 41911 */ 41912 41913 41914 /** 41915 * Internal dependencies 41916 */ 41917 41918 41919 41920 41921 41922 function useBorderBoxControl(props) { 41923 const { 41924 className, 41925 colors = [], 41926 onChange, 41927 enableAlpha = false, 41928 enableStyle = true, 41929 size = 'default', 41930 value, 41931 __experimentalIsRenderedInSidebar = false, 41932 __next40pxDefaultSize, 41933 ...otherProps 41934 } = useContextSystem(props, 'BorderBoxControl'); 41935 maybeWarnDeprecated36pxSize({ 41936 componentName: 'BorderBoxControl', 41937 __next40pxDefaultSize, 41938 size 41939 }); 41940 const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size; 41941 const mixedBorders = hasMixedBorders(value); 41942 const splitBorders = hasSplitBorders(value); 41943 const linkedValue = splitBorders ? getCommonBorder(value) : value; 41944 const splitValue = splitBorders ? value : getSplitBorders(value); 41945 41946 // If no numeric width value is set, the unit select will be disabled. 41947 const hasWidthValue = !isNaN(parseFloat(`$linkedValue?.width}`)); 41948 const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders); 41949 const toggleLinked = () => setIsLinked(!isLinked); 41950 const onLinkedChange = newBorder => { 41951 if (!newBorder) { 41952 return onChange(undefined); 41953 } 41954 41955 // If we have all props defined on the new border apply it. 41956 if (!mixedBorders || isCompleteBorder(newBorder)) { 41957 return onChange(isEmptyBorder(newBorder) ? undefined : newBorder); 41958 } 41959 41960 // If we had mixed borders we might have had some shared border props 41961 // that we need to maintain. For example; we could have mixed borders 41962 // with all the same color but different widths. Then from the linked 41963 // control we change the color. We should keep the separate widths. 41964 const changes = getBorderDiff(linkedValue, newBorder); 41965 const updatedBorders = { 41966 top: { 41967 ...value?.top, 41968 ...changes 41969 }, 41970 right: { 41971 ...value?.right, 41972 ...changes 41973 }, 41974 bottom: { 41975 ...value?.bottom, 41976 ...changes 41977 }, 41978 left: { 41979 ...value?.left, 41980 ...changes 41981 } 41982 }; 41983 if (hasMixedBorders(updatedBorders)) { 41984 return onChange(updatedBorders); 41985 } 41986 const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top; 41987 onChange(filteredResult); 41988 }; 41989 const onSplitChange = (newBorder, side) => { 41990 const updatedBorders = { 41991 ...splitValue, 41992 [side]: newBorder 41993 }; 41994 if (hasMixedBorders(updatedBorders)) { 41995 onChange(updatedBorders); 41996 } else { 41997 onChange(newBorder); 41998 } 41999 }; 42000 const cx = useCx(); 42001 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 42002 return cx(borderBoxControl, className); 42003 }, [cx, className]); 42004 const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 42005 return cx(linkedBorderControl()); 42006 }, [cx]); 42007 const wrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 42008 return cx(wrapper); 42009 }, [cx]); 42010 return { 42011 ...otherProps, 42012 className: classes, 42013 colors, 42014 disableUnits: mixedBorders && !hasWidthValue, 42015 enableAlpha, 42016 enableStyle, 42017 hasMixedBorders: mixedBorders, 42018 isLinked, 42019 linkedControlClassName, 42020 onLinkedChange, 42021 onSplitChange, 42022 toggleLinked, 42023 linkedValue, 42024 size: computedSize, 42025 splitValue, 42026 wrapperClassName, 42027 __experimentalIsRenderedInSidebar 42028 }; 42029 } 42030 42031 ;// ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js 42032 /** 42033 * WordPress dependencies 42034 */ 42035 42036 42037 42038 42039 /** 42040 * Internal dependencies 42041 */ 42042 42043 42044 42045 42046 42047 42048 42049 42050 42051 const component_BorderLabel = props => { 42052 const { 42053 label, 42054 hideLabelFromVision 42055 } = props; 42056 if (!label) { 42057 return null; 42058 } 42059 return hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 42060 as: "label", 42061 children: label 42062 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { 42063 children: label 42064 }); 42065 }; 42066 const UnconnectedBorderBoxControl = (props, forwardedRef) => { 42067 const { 42068 className, 42069 colors, 42070 disableCustomColors, 42071 disableUnits, 42072 enableAlpha, 42073 enableStyle, 42074 hasMixedBorders, 42075 hideLabelFromVision, 42076 isLinked, 42077 label, 42078 linkedControlClassName, 42079 linkedValue, 42080 onLinkedChange, 42081 onSplitChange, 42082 popoverPlacement, 42083 popoverOffset, 42084 size, 42085 splitValue, 42086 toggleLinked, 42087 wrapperClassName, 42088 __experimentalIsRenderedInSidebar, 42089 ...otherProps 42090 } = useBorderBoxControl(props); 42091 42092 // Use internal state instead of a ref to make sure that the component 42093 // re-renders when the popover's anchor updates. 42094 const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 42095 42096 // Memoize popoverProps to avoid returning a new object every time. 42097 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? { 42098 placement: popoverPlacement, 42099 offset: popoverOffset, 42100 anchor: popoverAnchor, 42101 shift: true 42102 } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]); 42103 const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]); 42104 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { 42105 className: className, 42106 ...otherProps, 42107 ref: mergedRef, 42108 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_BorderLabel, { 42109 label: label, 42110 hideLabelFromVision: hideLabelFromVision 42111 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { 42112 className: wrapperClassName, 42113 children: [isLinked ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { 42114 className: linkedControlClassName, 42115 colors: colors, 42116 disableUnits: disableUnits, 42117 disableCustomColors: disableCustomColors, 42118 enableAlpha: enableAlpha, 42119 enableStyle: enableStyle, 42120 onChange: onLinkedChange, 42121 placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined, 42122 __unstablePopoverProps: popoverProps, 42123 shouldSanitizeBorder: false // This component will handle that. 42124 , 42125 value: linkedValue, 42126 withSlider: true, 42127 width: size === '__unstable-large' ? '116px' : '110px', 42128 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 42129 __shouldNotWarnDeprecated36pxSize: true, 42130 size: size 42131 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_split_controls_component, { 42132 colors: colors, 42133 disableCustomColors: disableCustomColors, 42134 enableAlpha: enableAlpha, 42135 enableStyle: enableStyle, 42136 onChange: onSplitChange, 42137 popoverPlacement: popoverPlacement, 42138 popoverOffset: popoverOffset, 42139 value: splitValue, 42140 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 42141 size: size 42142 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_linked_button_component, { 42143 onClick: toggleLinked, 42144 isLinked: isLinked, 42145 size: size 42146 })] 42147 })] 42148 }); 42149 }; 42150 42151 /** 42152 * An input control for the color, style, and width of the border of a box. The 42153 * border can be customized as a whole, or individually for each side of the box. 42154 * 42155 * ```jsx 42156 * import { BorderBoxControl } from '@wordpress/components'; 42157 * import { __ } from '@wordpress/i18n'; 42158 * 42159 * const colors = [ 42160 * { name: 'Blue 20', color: '#72aee6' }, 42161 * // ... 42162 * ]; 42163 * 42164 * const MyBorderBoxControl = () => { 42165 * const defaultBorder = { 42166 * color: '#72aee6', 42167 * style: 'dashed', 42168 * width: '1px', 42169 * }; 42170 * const [ borders, setBorders ] = useState( { 42171 * top: defaultBorder, 42172 * right: defaultBorder, 42173 * bottom: defaultBorder, 42174 * left: defaultBorder, 42175 * } ); 42176 * const onChange = ( newBorders ) => setBorders( newBorders ); 42177 * 42178 * return ( 42179 * <BorderBoxControl 42180 * __next40pxDefaultSize 42181 * colors={ colors } 42182 * label={ __( 'Borders' ) } 42183 * onChange={ onChange } 42184 * value={ borders } 42185 * /> 42186 * ); 42187 * }; 42188 * ``` 42189 */ 42190 const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl'); 42191 /* harmony default export */ const border_box_control_component = (BorderBoxControl); 42192 42193 ;// ./node_modules/@wordpress/icons/build-module/library/settings.js 42194 /** 42195 * WordPress dependencies 42196 */ 42197 42198 42199 const settings = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, { 42200 xmlns: "http://www.w3.org/2000/svg", 42201 viewBox: "0 0 24 24", 42202 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 42203 d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z" 42204 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 42205 d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z" 42206 })] 42207 }); 42208 /* harmony default export */ const library_settings = (settings); 42209 42210 ;// ./node_modules/@wordpress/components/build-module/box-control/utils.js 42211 /** 42212 * WordPress dependencies 42213 */ 42214 42215 42216 /** 42217 * Internal dependencies 42218 */ 42219 42220 42221 const CUSTOM_VALUE_SETTINGS = { 42222 px: { 42223 max: 300, 42224 step: 1 42225 }, 42226 '%': { 42227 max: 100, 42228 step: 1 42229 }, 42230 vw: { 42231 max: 100, 42232 step: 1 42233 }, 42234 vh: { 42235 max: 100, 42236 step: 1 42237 }, 42238 em: { 42239 max: 10, 42240 step: 0.1 42241 }, 42242 rm: { 42243 max: 10, 42244 step: 0.1 42245 }, 42246 svw: { 42247 max: 100, 42248 step: 1 42249 }, 42250 lvw: { 42251 max: 100, 42252 step: 1 42253 }, 42254 dvw: { 42255 max: 100, 42256 step: 1 42257 }, 42258 svh: { 42259 max: 100, 42260 step: 1 42261 }, 42262 lvh: { 42263 max: 100, 42264 step: 1 42265 }, 42266 dvh: { 42267 max: 100, 42268 step: 1 42269 }, 42270 vi: { 42271 max: 100, 42272 step: 1 42273 }, 42274 svi: { 42275 max: 100, 42276 step: 1 42277 }, 42278 lvi: { 42279 max: 100, 42280 step: 1 42281 }, 42282 dvi: { 42283 max: 100, 42284 step: 1 42285 }, 42286 vb: { 42287 max: 100, 42288 step: 1 42289 }, 42290 svb: { 42291 max: 100, 42292 step: 1 42293 }, 42294 lvb: { 42295 max: 100, 42296 step: 1 42297 }, 42298 dvb: { 42299 max: 100, 42300 step: 1 42301 }, 42302 vmin: { 42303 max: 100, 42304 step: 1 42305 }, 42306 svmin: { 42307 max: 100, 42308 step: 1 42309 }, 42310 lvmin: { 42311 max: 100, 42312 step: 1 42313 }, 42314 dvmin: { 42315 max: 100, 42316 step: 1 42317 }, 42318 vmax: { 42319 max: 100, 42320 step: 1 42321 }, 42322 svmax: { 42323 max: 100, 42324 step: 1 42325 }, 42326 lvmax: { 42327 max: 100, 42328 step: 1 42329 }, 42330 dvmax: { 42331 max: 100, 42332 step: 1 42333 } 42334 }; 42335 const LABELS = { 42336 all: (0,external_wp_i18n_namespaceObject.__)('All sides'), 42337 top: (0,external_wp_i18n_namespaceObject.__)('Top side'), 42338 bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom side'), 42339 left: (0,external_wp_i18n_namespaceObject.__)('Left side'), 42340 right: (0,external_wp_i18n_namespaceObject.__)('Right side'), 42341 vertical: (0,external_wp_i18n_namespaceObject.__)('Top and bottom sides'), 42342 horizontal: (0,external_wp_i18n_namespaceObject.__)('Left and right sides') 42343 }; 42344 const DEFAULT_VALUES = { 42345 top: undefined, 42346 right: undefined, 42347 bottom: undefined, 42348 left: undefined 42349 }; 42350 const ALL_SIDES = ['top', 'right', 'bottom', 'left']; 42351 42352 /** 42353 * Gets an items with the most occurrence within an array 42354 * https://stackoverflow.com/a/20762713 42355 * 42356 * @param arr Array of items to check. 42357 * @return The item with the most occurrences. 42358 */ 42359 function utils_mode(arr) { 42360 return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop(); 42361 } 42362 42363 /** 42364 * Gets the merged input value and unit from values data. 42365 * 42366 * @param values Box values. 42367 * @param availableSides Available box sides to evaluate. 42368 * 42369 * @return A value + unit for the 'all' input. 42370 */ 42371 function getMergedValue(values = {}, availableSides = ALL_SIDES) { 42372 const sides = normalizeSides(availableSides); 42373 if (sides.every(side => values[side] === values[sides[0]])) { 42374 return values[sides[0]]; 42375 } 42376 return undefined; 42377 } 42378 42379 /** 42380 * Checks if the values are mixed. 42381 * 42382 * @param values Box values. 42383 * @param availableSides Available box sides to evaluate. 42384 * @return Whether the values are mixed. 42385 */ 42386 function isValueMixed(values = {}, availableSides = ALL_SIDES) { 42387 const sides = normalizeSides(availableSides); 42388 return sides.some(side => values[side] !== values[sides[0]]); 42389 } 42390 42391 /** 42392 * Determine the most common unit selection to use as a fallback option. 42393 * 42394 * @param selectedUnits Current unit selections for individual sides. 42395 * @return Most common unit selection. 42396 */ 42397 function getAllUnitFallback(selectedUnits) { 42398 if (!selectedUnits || typeof selectedUnits !== 'object') { 42399 return undefined; 42400 } 42401 const filteredUnits = Object.values(selectedUnits).filter(Boolean); 42402 return utils_mode(filteredUnits); 42403 } 42404 42405 /** 42406 * Checks to determine if values are defined. 42407 * 42408 * @param values Box values. 42409 * 42410 * @return Whether values are mixed. 42411 */ 42412 function isValuesDefined(values) { 42413 return values && Object.values(values).filter( 42414 // Switching units when input is empty causes values only 42415 // containing units. This gives false positive on mixed values 42416 // unless filtered. 42417 value => !!value && /\d/.test(value)).length > 0; 42418 } 42419 42420 /** 42421 * Get initial selected side, factoring in whether the sides are linked, 42422 * and whether the vertical / horizontal directions are grouped via splitOnAxis. 42423 * 42424 * @param isLinked Whether the box control's fields are linked. 42425 * @param splitOnAxis Whether splitting by horizontal or vertical axis. 42426 * @return The initial side. 42427 */ 42428 function getInitialSide(isLinked, splitOnAxis) { 42429 let initialSide = 'all'; 42430 if (!isLinked) { 42431 initialSide = splitOnAxis ? 'vertical' : 'top'; 42432 } 42433 return initialSide; 42434 } 42435 42436 /** 42437 * Normalizes provided sides configuration to an array containing only top, 42438 * right, bottom and left. This essentially just maps `horizontal` or `vertical` 42439 * to their appropriate sides to facilitate correctly determining value for 42440 * all input control. 42441 * 42442 * @param sides Available sides for box control. 42443 * @return Normalized sides configuration. 42444 */ 42445 function normalizeSides(sides) { 42446 const filteredSides = []; 42447 if (!sides?.length) { 42448 return ALL_SIDES; 42449 } 42450 if (sides.includes('vertical')) { 42451 filteredSides.push(...['top', 'bottom']); 42452 } else if (sides.includes('horizontal')) { 42453 filteredSides.push(...['left', 'right']); 42454 } else { 42455 const newSides = ALL_SIDES.filter(side => sides.includes(side)); 42456 filteredSides.push(...newSides); 42457 } 42458 return filteredSides; 42459 } 42460 42461 /** 42462 * Applies a value to an object representing top, right, bottom and left sides 42463 * while taking into account any custom side configuration. 42464 * 42465 * @deprecated 42466 * 42467 * @param currentValues The current values for each side. 42468 * @param newValue The value to apply to the sides object. 42469 * @param sides Array defining valid sides. 42470 * 42471 * @return Object containing the updated values for each side. 42472 */ 42473 function applyValueToSides(currentValues, newValue, sides) { 42474 external_wp_deprecated_default()('applyValueToSides', { 42475 since: '6.8', 42476 version: '7.0' 42477 }); 42478 const newValues = { 42479 ...currentValues 42480 }; 42481 if (sides?.length) { 42482 sides.forEach(side => { 42483 if (side === 'vertical') { 42484 newValues.top = newValue; 42485 newValues.bottom = newValue; 42486 } else if (side === 'horizontal') { 42487 newValues.left = newValue; 42488 newValues.right = newValue; 42489 } else { 42490 newValues[side] = newValue; 42491 } 42492 }); 42493 } else { 42494 ALL_SIDES.forEach(side => newValues[side] = newValue); 42495 } 42496 return newValues; 42497 } 42498 42499 /** 42500 * Return the allowed sides based on the sides configuration. 42501 * 42502 * @param sides Sides configuration. 42503 * @return Allowed sides. 42504 */ 42505 function getAllowedSides(sides) { 42506 const allowedSides = new Set(!sides ? ALL_SIDES : []); 42507 sides?.forEach(allowedSide => { 42508 if (allowedSide === 'vertical') { 42509 allowedSides.add('top'); 42510 allowedSides.add('bottom'); 42511 } else if (allowedSide === 'horizontal') { 42512 allowedSides.add('right'); 42513 allowedSides.add('left'); 42514 } else { 42515 allowedSides.add(allowedSide); 42516 } 42517 }); 42518 return allowedSides; 42519 } 42520 42521 /** 42522 * Checks if a value is a preset value. 42523 * 42524 * @param value The value to check. 42525 * @param presetKey The preset key to check against. 42526 * @return Whether the value is a preset value. 42527 */ 42528 function isValuePreset(value, presetKey) { 42529 return value.startsWith(`var:preset|$presetKey}|`); 42530 } 42531 42532 /** 42533 * Returns the index of the preset value in the presets array. 42534 * 42535 * @param value The value to check. 42536 * @param presetKey The preset key to check against. 42537 * @param presets The array of presets to search. 42538 * @return The index of the preset value in the presets array. 42539 */ 42540 function getPresetIndexFromValue(value, presetKey, presets) { 42541 if (!isValuePreset(value, presetKey)) { 42542 return undefined; 42543 } 42544 const match = value.match(new RegExp(`^var:preset\\|$presetKey}\\|(.+)$`)); 42545 if (!match) { 42546 return undefined; 42547 } 42548 const slug = match[1]; 42549 const index = presets.findIndex(preset => { 42550 return preset.slug === slug; 42551 }); 42552 return index !== -1 ? index : undefined; 42553 } 42554 42555 /** 42556 * Returns the preset value from the index. 42557 * 42558 * @param index The index of the preset value in the presets array. 42559 * @param presetKey The preset key to check against. 42560 * @param presets The array of presets to search. 42561 * @return The preset value from the index. 42562 */ 42563 function getPresetValueFromIndex(index, presetKey, presets) { 42564 const preset = presets[index]; 42565 return `var:preset|$presetKey}|$preset.slug}`; 42566 } 42567 42568 ;// ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-icon-styles.js 42569 42570 function box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 42571 /** 42572 * External dependencies 42573 */ 42574 42575 const box_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 42576 target: "e1j5nr4z8" 42577 } : 0)( true ? { 42578 name: "1w884gc", 42579 styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px" 42580 } : 0); 42581 const Viewbox = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 42582 target: "e1j5nr4z7" 42583 } : 0)( true ? { 42584 name: "i6vjox", 42585 styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%" 42586 } : 0); 42587 const strokeFocus = ({ 42588 isFocused 42589 }) => { 42590 return /*#__PURE__*/emotion_react_browser_esm_css({ 42591 backgroundColor: 'currentColor', 42592 opacity: isFocused ? 1 : 0.3 42593 }, true ? "" : 0, true ? "" : 0); 42594 }; 42595 const Stroke = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 42596 target: "e1j5nr4z6" 42597 } : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0)); 42598 const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { 42599 target: "e1j5nr4z5" 42600 } : 0)( true ? { 42601 name: "1k2w39q", 42602 styles: "bottom:3px;top:3px;width:2px" 42603 } : 0); 42604 const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { 42605 target: "e1j5nr4z4" 42606 } : 0)( true ? { 42607 name: "1q9b07k", 42608 styles: "height:2px;left:3px;right:3px" 42609 } : 0); 42610 const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? { 42611 target: "e1j5nr4z3" 42612 } : 0)( true ? { 42613 name: "abcix4", 42614 styles: "top:0" 42615 } : 0); 42616 const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? { 42617 target: "e1j5nr4z2" 42618 } : 0)( true ? { 42619 name: "1wf8jf", 42620 styles: "right:0" 42621 } : 0); 42622 const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? { 42623 target: "e1j5nr4z1" 42624 } : 0)( true ? { 42625 name: "8tapst", 42626 styles: "bottom:0" 42627 } : 0); 42628 const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? { 42629 target: "e1j5nr4z0" 42630 } : 0)( true ? { 42631 name: "1ode3cm", 42632 styles: "left:0" 42633 } : 0); 42634 42635 ;// ./node_modules/@wordpress/components/build-module/box-control/icon.js 42636 /** 42637 * Internal dependencies 42638 */ 42639 42640 42641 42642 const BASE_ICON_SIZE = 24; 42643 function BoxControlIcon({ 42644 size = 24, 42645 side = 'all', 42646 sides, 42647 ...props 42648 }) { 42649 const isSideDisabled = value => sides?.length && !sides.includes(value); 42650 const hasSide = value => { 42651 if (isSideDisabled(value)) { 42652 return false; 42653 } 42654 return side === 'all' || side === value; 42655 }; 42656 const top = hasSide('top') || hasSide('vertical'); 42657 const right = hasSide('right') || hasSide('horizontal'); 42658 const bottom = hasSide('bottom') || hasSide('vertical'); 42659 const left = hasSide('left') || hasSide('horizontal'); 42660 42661 // Simulates SVG Icon scaling. 42662 const scale = size / BASE_ICON_SIZE; 42663 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(box_control_icon_styles_Root, { 42664 style: { 42665 transform: `scale($scale})` 42666 }, 42667 ...props, 42668 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Viewbox, { 42669 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TopStroke, { 42670 isFocused: top 42671 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RightStroke, { 42672 isFocused: right 42673 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BottomStroke, { 42674 isFocused: bottom 42675 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LeftStroke, { 42676 isFocused: left 42677 })] 42678 }) 42679 }); 42680 } 42681 42682 ;// ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js 42683 42684 function box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 42685 /** 42686 * External dependencies 42687 */ 42688 42689 /** 42690 * Internal dependencies 42691 */ 42692 42693 42694 42695 42696 42697 42698 const StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { 42699 target: "e1jovhle5" 42700 } : 0)( true ? { 42701 name: "1ejyr19", 42702 styles: "max-width:90px" 42703 } : 0); 42704 const InputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 42705 target: "e1jovhle4" 42706 } : 0)( true ? { 42707 name: "1j1lmoi", 42708 styles: "grid-column:1/span 3" 42709 } : 0); 42710 const ResetButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 42711 target: "e1jovhle3" 42712 } : 0)( true ? { 42713 name: "tkya7b", 42714 styles: "grid-area:1/2;justify-self:end" 42715 } : 0); 42716 const LinkedButtonWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 42717 target: "e1jovhle2" 42718 } : 0)( true ? { 42719 name: "1dfa8al", 42720 styles: "grid-area:1/3;justify-self:end" 42721 } : 0); 42722 const FlexedBoxControlIcon = /*#__PURE__*/emotion_styled_base_browser_esm(BoxControlIcon, true ? { 42723 target: "e1jovhle1" 42724 } : 0)( true ? { 42725 name: "ou8xsw", 42726 styles: "flex:0 0 auto" 42727 } : 0); 42728 const FlexedRangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? { 42729 target: "e1jovhle0" 42730 } : 0)("width:100%;margin-inline-end:", space(2), ";" + ( true ? "" : 0)); 42731 42732 ;// ./node_modules/@wordpress/components/build-module/box-control/input-control.js 42733 /** 42734 * WordPress dependencies 42735 */ 42736 42737 42738 42739 42740 42741 /** 42742 * Internal dependencies 42743 */ 42744 42745 42746 42747 42748 42749 42750 const box_control_input_control_noop = () => {}; 42751 function getSidesToModify(side, sides, isAlt) { 42752 const allowedSides = getAllowedSides(sides); 42753 let modifiedSides = []; 42754 switch (side) { 42755 case 'all': 42756 modifiedSides = ['top', 'bottom', 'left', 'right']; 42757 break; 42758 case 'horizontal': 42759 modifiedSides = ['left', 'right']; 42760 break; 42761 case 'vertical': 42762 modifiedSides = ['top', 'bottom']; 42763 break; 42764 default: 42765 modifiedSides = [side]; 42766 } 42767 if (isAlt) { 42768 switch (side) { 42769 case 'top': 42770 modifiedSides.push('bottom'); 42771 break; 42772 case 'bottom': 42773 modifiedSides.push('top'); 42774 break; 42775 case 'left': 42776 modifiedSides.push('left'); 42777 break; 42778 case 'right': 42779 modifiedSides.push('right'); 42780 break; 42781 } 42782 } 42783 return modifiedSides.filter(s => allowedSides.has(s)); 42784 } 42785 function BoxInputControl({ 42786 __next40pxDefaultSize, 42787 onChange = box_control_input_control_noop, 42788 onFocus = box_control_input_control_noop, 42789 values, 42790 selectedUnits, 42791 setSelectedUnits, 42792 sides, 42793 side, 42794 min = 0, 42795 presets, 42796 presetKey, 42797 ...props 42798 }) { 42799 var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2; 42800 const defaultValuesToModify = getSidesToModify(side, sides); 42801 const handleOnFocus = event => { 42802 onFocus(event, { 42803 side 42804 }); 42805 }; 42806 const handleOnChange = nextValues => { 42807 onChange(nextValues); 42808 }; 42809 const handleRawOnValueChange = next => { 42810 const nextValues = { 42811 ...values 42812 }; 42813 defaultValuesToModify.forEach(modifiedSide => { 42814 nextValues[modifiedSide] = next; 42815 }); 42816 handleOnChange(nextValues); 42817 }; 42818 const handleOnValueChange = (next, extra) => { 42819 const nextValues = { 42820 ...values 42821 }; 42822 const isNumeric = next !== undefined && !isNaN(parseFloat(next)); 42823 const nextValue = isNumeric ? next : undefined; 42824 const modifiedSides = getSidesToModify(side, sides, 42825 /** 42826 * Supports changing pair sides. For example, holding the ALT key 42827 * when changing the TOP will also update BOTTOM. 42828 */ 42829 // @ts-expect-error - TODO: event.altKey is only present when the change event was 42830 // triggered by a keyboard event. Should this feature be implemented differently so 42831 // it also works with drag events? 42832 !!extra?.event.altKey); 42833 modifiedSides.forEach(modifiedSide => { 42834 nextValues[modifiedSide] = nextValue; 42835 }); 42836 handleOnChange(nextValues); 42837 }; 42838 const handleOnUnitChange = next => { 42839 const newUnits = { 42840 ...selectedUnits 42841 }; 42842 defaultValuesToModify.forEach(modifiedSide => { 42843 newUnits[modifiedSide] = next; 42844 }); 42845 setSelectedUnits(newUnits); 42846 }; 42847 const mergedValue = getMergedValue(values, defaultValuesToModify); 42848 const hasValues = isValuesDefined(values); 42849 const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify); 42850 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue); 42851 const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]]; 42852 const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxInputControl, 'box-control-input'); 42853 const inputId = [generatedId, side].join('-'); 42854 const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit); 42855 const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue; 42856 const mixedPlaceholder = isMixed || isMixedUnit ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined; 42857 const hasPresets = presets && presets.length > 0 && presetKey; 42858 const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey); 42859 const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined); 42860 const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined; 42861 const marks = hasPresets ? [{ 42862 value: 0, 42863 label: '', 42864 tooltip: (0,external_wp_i18n_namespaceObject.__)('None') 42865 }].concat(presets.map((preset, index) => { 42866 var _preset$name; 42867 return { 42868 value: index + 1, 42869 label: '', 42870 tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug 42871 }; 42872 })) : []; 42873 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, { 42874 expanded: true, 42875 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, { 42876 side: side, 42877 sides: sides 42878 }), showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 42879 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { 42880 placement: "top-end", 42881 text: LABELS[side], 42882 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, { 42883 ...props, 42884 min: min, 42885 __shouldNotWarnDeprecated36pxSize: true, 42886 __next40pxDefaultSize: __next40pxDefaultSize, 42887 className: "component-box-control__unit-control", 42888 id: inputId, 42889 isPressEnterToChange: true, 42890 disableUnits: isMixed || isMixedUnit, 42891 value: usedValue, 42892 onChange: handleOnValueChange, 42893 onUnitChange: handleOnUnitChange, 42894 onFocus: handleOnFocus, 42895 label: LABELS[side], 42896 placeholder: mixedPlaceholder, 42897 hideLabelFromVision: true 42898 }) 42899 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, { 42900 __nextHasNoMarginBottom: true, 42901 __next40pxDefaultSize: __next40pxDefaultSize, 42902 __shouldNotWarnDeprecated36pxSize: true, 42903 "aria-controls": inputId, 42904 label: LABELS[side], 42905 hideLabelFromVision: true, 42906 onChange: newValue => { 42907 handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined); 42908 }, 42909 min: isFinite(min) ? min : 0, 42910 max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, 42911 step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, 42912 value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, 42913 withInputField: false 42914 })] 42915 }), hasPresets && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, { 42916 __next40pxDefaultSize: true, 42917 className: "spacing-sizes-control__range-control", 42918 value: presetIndex !== undefined ? presetIndex + 1 : 0, 42919 onChange: newIndex => { 42920 const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets); 42921 handleRawOnValueChange(newValue); 42922 }, 42923 withInputField: false, 42924 "aria-valuenow": presetIndex !== undefined ? presetIndex + 1 : 0, 42925 "aria-valuetext": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip, 42926 renderTooltipContent: index => marks[!index ? 0 : index].tooltip, 42927 min: 0, 42928 max: marks.length - 1, 42929 marks: marks, 42930 label: LABELS[side], 42931 hideLabelFromVision: true, 42932 __nextHasNoMarginBottom: true 42933 }), hasPresets && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 42934 label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'), 42935 icon: library_settings, 42936 onClick: () => { 42937 setShowCustomValueControl(!showCustomValueControl); 42938 }, 42939 isPressed: showCustomValueControl, 42940 size: "small", 42941 iconSize: 24 42942 })] 42943 }, `box-control-$side}`); 42944 } 42945 42946 ;// ./node_modules/@wordpress/components/build-module/box-control/linked-button.js 42947 /** 42948 * WordPress dependencies 42949 */ 42950 42951 42952 42953 /** 42954 * Internal dependencies 42955 */ 42956 42957 42958 function LinkedButton({ 42959 isLinked, 42960 ...props 42961 }) { 42962 const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); 42963 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 42964 ...props, 42965 className: "component-box-control__linked-button", 42966 size: "small", 42967 icon: isLinked ? library_link : link_off, 42968 iconSize: 24, 42969 label: label 42970 }); 42971 } 42972 42973 ;// ./node_modules/@wordpress/components/build-module/box-control/index.js 42974 /** 42975 * WordPress dependencies 42976 */ 42977 42978 42979 42980 42981 42982 /** 42983 * Internal dependencies 42984 */ 42985 42986 42987 42988 42989 42990 42991 42992 42993 42994 42995 const defaultInputProps = { 42996 min: 0 42997 }; 42998 const box_control_noop = () => {}; 42999 function box_control_useUniqueId(idProp) { 43000 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxControl, 'inspector-box-control'); 43001 return idProp || instanceId; 43002 } 43003 43004 /** 43005 * A control that lets users set values for top, right, bottom, and left. Can be 43006 * used as an input control for values like `padding` or `margin`. 43007 * 43008 * ```jsx 43009 * import { useState } from 'react'; 43010 * import { BoxControl } from '@wordpress/components'; 43011 * 43012 * function Example() { 43013 * const [ values, setValues ] = useState( { 43014 * top: '50px', 43015 * left: '10%', 43016 * right: '10%', 43017 * bottom: '50px', 43018 * } ); 43019 * 43020 * return ( 43021 * <BoxControl 43022 * __next40pxDefaultSize 43023 * values={ values } 43024 * onChange={ setValues } 43025 * /> 43026 * ); 43027 * }; 43028 * ``` 43029 */ 43030 function BoxControl({ 43031 __next40pxDefaultSize = false, 43032 id: idProp, 43033 inputProps = defaultInputProps, 43034 onChange = box_control_noop, 43035 label = (0,external_wp_i18n_namespaceObject.__)('Box Control'), 43036 values: valuesProp, 43037 units, 43038 sides, 43039 splitOnAxis = false, 43040 allowReset = true, 43041 resetValues = DEFAULT_VALUES, 43042 presets, 43043 presetKey, 43044 onMouseOver, 43045 onMouseOut 43046 }) { 43047 const [values, setValues] = use_controlled_state(valuesProp, { 43048 fallback: DEFAULT_VALUES 43049 }); 43050 const inputValues = values || DEFAULT_VALUES; 43051 const hasInitialValue = isValuesDefined(valuesProp); 43052 const hasOneSide = sides?.length === 1; 43053 const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue); 43054 const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide); 43055 const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis)); 43056 43057 // Tracking selected units via internal state allows filtering of CSS unit 43058 // only values from being saved while maintaining preexisting unit selection 43059 // behaviour. Filtering CSS only values prevents invalid style values. 43060 const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({ 43061 top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1], 43062 right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1], 43063 bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1], 43064 left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1] 43065 }); 43066 const id = box_control_useUniqueId(idProp); 43067 const headingId = `$id}-heading`; 43068 const toggleLinked = () => { 43069 setIsLinked(!isLinked); 43070 setSide(getInitialSide(!isLinked, splitOnAxis)); 43071 }; 43072 const handleOnFocus = (_event, { 43073 side: nextSide 43074 }) => { 43075 setSide(nextSide); 43076 }; 43077 const handleOnChange = nextValues => { 43078 onChange(nextValues); 43079 setValues(nextValues); 43080 setIsDirty(true); 43081 }; 43082 const handleOnReset = () => { 43083 onChange(resetValues); 43084 setValues(resetValues); 43085 setSelectedUnits(resetValues); 43086 setIsDirty(false); 43087 }; 43088 const inputControlProps = { 43089 onMouseOver, 43090 onMouseOut, 43091 ...inputProps, 43092 onChange: handleOnChange, 43093 onFocus: handleOnFocus, 43094 isLinked, 43095 units, 43096 selectedUnits, 43097 setSelectedUnits, 43098 sides, 43099 values: inputValues, 43100 __next40pxDefaultSize, 43101 presets, 43102 presetKey 43103 }; 43104 maybeWarnDeprecated36pxSize({ 43105 componentName: 'BoxControl', 43106 __next40pxDefaultSize, 43107 size: undefined 43108 }); 43109 const sidesToRender = getAllowedSides(sides); 43110 if (presets && !presetKey || !presets && presetKey) { 43111 const definedProp = presets ? 'presets' : 'presetKey'; 43112 const missingProp = presets ? 'presetKey' : 'presets'; 43113 true ? external_wp_warning_default()(`wp.components.BoxControl: the '$missingProp}' prop is required when the '$definedProp}' prop is defined.`) : 0; 43114 } 43115 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, { 43116 id: id, 43117 columns: 3, 43118 templateColumns: "1fr min-content min-content", 43119 role: "group", 43120 "aria-labelledby": headingId, 43121 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseControl.VisualLabel, { 43122 id: headingId, 43123 children: label 43124 }), isLinked && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWrapper, { 43125 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControl, { 43126 side: "all", 43127 ...inputControlProps 43128 }) 43129 }), !hasOneSide && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButtonWrapper, { 43130 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, { 43131 onClick: toggleLinked, 43132 isLinked: isLinked 43133 }) 43134 }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControl, { 43135 side: axis, 43136 ...inputControlProps 43137 }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControl, { 43138 side: axis, 43139 ...inputControlProps 43140 }, axis)), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetButton, { 43141 className: "component-box-control__reset-button", 43142 variant: "secondary", 43143 size: "small", 43144 onClick: handleOnReset, 43145 disabled: !isDirty, 43146 children: (0,external_wp_i18n_namespaceObject.__)('Reset') 43147 })] 43148 }); 43149 } 43150 43151 /* harmony default export */ const box_control = (BoxControl); 43152 43153 ;// ./node_modules/@wordpress/components/build-module/button-group/index.js 43154 /** 43155 * External dependencies 43156 */ 43157 43158 /** 43159 * WordPress dependencies 43160 */ 43161 43162 43163 43164 /** 43165 * Internal dependencies 43166 */ 43167 43168 function UnforwardedButtonGroup(props, ref) { 43169 const { 43170 className, 43171 __shouldNotWarnDeprecated, 43172 ...restProps 43173 } = props; 43174 const classes = dist_clsx('components-button-group', className); 43175 if (!__shouldNotWarnDeprecated) { 43176 external_wp_deprecated_default()('wp.components.ButtonGroup', { 43177 since: '6.8', 43178 alternative: 'wp.components.__experimentalToggleGroupControl' 43179 }); 43180 } 43181 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 43182 ref: ref, 43183 role: "group", 43184 className: classes, 43185 ...restProps 43186 }); 43187 } 43188 43189 /** 43190 * ButtonGroup can be used to group any related buttons together. To emphasize 43191 * related buttons, a group should share a common container. 43192 * 43193 * @deprecated Use `ToggleGroupControl` instead. 43194 * 43195 * ```jsx 43196 * import { Button, ButtonGroup } from '@wordpress/components'; 43197 * 43198 * const MyButtonGroup = () => ( 43199 * <ButtonGroup> 43200 * <Button variant="primary">Button 1</Button> 43201 * <Button variant="primary">Button 2</Button> 43202 * </ButtonGroup> 43203 * ); 43204 * ``` 43205 */ 43206 const ButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButtonGroup); 43207 /* harmony default export */ const button_group = (ButtonGroup); 43208 43209 ;// ./node_modules/@wordpress/components/build-module/elevation/styles.js 43210 function elevation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 43211 /** 43212 * External dependencies 43213 */ 43214 43215 const Elevation = true ? { 43216 name: "12ip69d", 43217 styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow" 43218 } : 0; 43219 43220 ;// ./node_modules/@wordpress/components/build-module/elevation/hook.js 43221 /** 43222 * External dependencies 43223 */ 43224 43225 43226 43227 /** 43228 * WordPress dependencies 43229 */ 43230 43231 43232 /** 43233 * Internal dependencies 43234 */ 43235 43236 43237 43238 43239 43240 43241 function getBoxShadow(value) { 43242 const boxShadowColor = `rgba(0, 0, 0, $value / 20})`; 43243 const boxShadow = `0 $value}px $value * 2}px 0 43244 $boxShadowColor}`; 43245 return boxShadow; 43246 } 43247 function useElevation(props) { 43248 const { 43249 active, 43250 borderRadius = 'inherit', 43251 className, 43252 focus, 43253 hover, 43254 isInteractive = false, 43255 offset = 0, 43256 value = 0, 43257 ...otherProps 43258 } = useContextSystem(props, 'Elevation'); 43259 const cx = useCx(); 43260 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 43261 let hoverValue = isValueDefined(hover) ? hover : value * 2; 43262 let activeValue = isValueDefined(active) ? active : value / 2; 43263 if (!isInteractive) { 43264 hoverValue = isValueDefined(hover) ? hover : undefined; 43265 activeValue = isValueDefined(active) ? active : undefined; 43266 } 43267 const transition = `box-shadow $config_values.transitionDuration} $config_values.transitionTimingFunction}`; 43268 const sx = {}; 43269 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 43270 borderRadius, 43271 bottom: offset, 43272 boxShadow: getBoxShadow(value), 43273 opacity: config_values.elevationIntensity, 43274 left: offset, 43275 right: offset, 43276 top: offset 43277 }, /*#__PURE__*/emotion_react_browser_esm_css("@media not ( prefers-reduced-motion ){transition:", transition, ";}" + ( true ? "" : 0), true ? "" : 0), true ? "" : 0, true ? "" : 0); 43278 if (isValueDefined(hoverValue)) { 43279 sx.hover = /*#__PURE__*/emotion_react_browser_esm_css("*:hover>&{box-shadow:", getBoxShadow(hoverValue), ";}" + ( true ? "" : 0), true ? "" : 0); 43280 } 43281 if (isValueDefined(activeValue)) { 43282 sx.active = /*#__PURE__*/emotion_react_browser_esm_css("*:active>&{box-shadow:", getBoxShadow(activeValue), ";}" + ( true ? "" : 0), true ? "" : 0); 43283 } 43284 if (isValueDefined(focus)) { 43285 sx.focus = /*#__PURE__*/emotion_react_browser_esm_css("*:focus>&{box-shadow:", getBoxShadow(focus), ";}" + ( true ? "" : 0), true ? "" : 0); 43286 } 43287 return cx(Elevation, sx.Base, sx.hover, sx.focus, sx.active, className); 43288 }, [active, borderRadius, className, cx, focus, hover, isInteractive, offset, value]); 43289 return { 43290 ...otherProps, 43291 className: classes, 43292 'aria-hidden': true 43293 }; 43294 } 43295 43296 ;// ./node_modules/@wordpress/components/build-module/elevation/component.js 43297 /** 43298 * External dependencies 43299 */ 43300 43301 /** 43302 * Internal dependencies 43303 */ 43304 43305 43306 43307 43308 43309 function UnconnectedElevation(props, forwardedRef) { 43310 const elevationProps = useElevation(props); 43311 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 43312 ...elevationProps, 43313 ref: forwardedRef 43314 }); 43315 } 43316 43317 /** 43318 * `Elevation` is a core component that renders shadow, using the component 43319 * system's shadow system. 43320 * 43321 * The shadow effect is generated using the `value` prop. 43322 * 43323 * ```jsx 43324 * import { 43325 * __experimentalElevation as Elevation, 43326 * __experimentalSurface as Surface, 43327 * __experimentalText as Text, 43328 * } from '@wordpress/components'; 43329 * 43330 * function Example() { 43331 * return ( 43332 * <Surface> 43333 * <Text>Code is Poetry</Text> 43334 * <Elevation value={ 5 } /> 43335 * </Surface> 43336 * ); 43337 * } 43338 * ``` 43339 */ 43340 const component_Elevation = contextConnect(UnconnectedElevation, 'Elevation'); 43341 /* harmony default export */ const elevation_component = (component_Elevation); 43342 43343 ;// ./node_modules/@wordpress/components/build-module/card/styles.js 43344 function card_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 43345 /** 43346 * External dependencies 43347 */ 43348 43349 43350 /** 43351 * Internal dependencies 43352 */ 43353 43354 43355 // Since the border for `Card` is rendered via the `box-shadow` property 43356 // (as opposed to the `border` property), the value of the border radius needs 43357 // to be adjusted by removing 1px (this is because the `box-shadow` renders 43358 // as an "outer radius"). 43359 const adjustedBorderRadius = `calc($config_values.radiusLarge} - 1px)`; 43360 const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0), true ? "" : 0); 43361 const Header = true ? { 43362 name: "1showjb", 43363 styles: "border-bottom:1px solid;box-sizing:border-box;&:last-child{border-bottom:none;}" 43364 } : 0; 43365 const Footer = true ? { 43366 name: "14n5oej", 43367 styles: "border-top:1px solid;box-sizing:border-box;&:first-of-type{border-top:none;}" 43368 } : 0; 43369 const Content = true ? { 43370 name: "13udsys", 43371 styles: "height:100%" 43372 } : 0; 43373 const Body = true ? { 43374 name: "6ywzd", 43375 styles: "box-sizing:border-box;height:auto;max-height:100%" 43376 } : 0; 43377 const Media = true ? { 43378 name: "dq805e", 43379 styles: "box-sizing:border-box;overflow:hidden;&>img,&>iframe{display:block;height:auto;max-width:100%;width:100%;}" 43380 } : 0; 43381 const Divider = true ? { 43382 name: "c990dr", 43383 styles: "box-sizing:border-box;display:block;width:100%" 43384 } : 0; 43385 const borderRadius = /*#__PURE__*/emotion_react_browser_esm_css("&:first-of-type{border-top-left-radius:", adjustedBorderRadius, ";border-top-right-radius:", adjustedBorderRadius, ";}&:last-of-type{border-bottom-left-radius:", adjustedBorderRadius, ";border-bottom-right-radius:", adjustedBorderRadius, ";}" + ( true ? "" : 0), true ? "" : 0); 43386 const borderColor = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", config_values.colorDivider, ";" + ( true ? "" : 0), true ? "" : 0); 43387 const boxShadowless = true ? { 43388 name: "1t90u8d", 43389 styles: "box-shadow:none" 43390 } : 0; 43391 const borderless = true ? { 43392 name: "1e1ncky", 43393 styles: "border:none" 43394 } : 0; 43395 const rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", adjustedBorderRadius, ";" + ( true ? "" : 0), true ? "" : 0); 43396 const xSmallCardPadding = /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingXSmall, ";" + ( true ? "" : 0), true ? "" : 0); 43397 const cardPaddings = { 43398 large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingLarge, ";" + ( true ? "" : 0), true ? "" : 0), 43399 medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingMedium, ";" + ( true ? "" : 0), true ? "" : 0), 43400 small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingSmall, ";" + ( true ? "" : 0), true ? "" : 0), 43401 xSmall: xSmallCardPadding, 43402 // The `extraSmall` size is not officially documented, but the following styles 43403 // are kept for legacy reasons to support older values of the `size` prop. 43404 extraSmall: xSmallCardPadding 43405 }; 43406 const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.ui.backgroundDisabled, ";" + ( true ? "" : 0), true ? "" : 0); 43407 43408 ;// ./node_modules/@wordpress/components/build-module/surface/styles.js 43409 /** 43410 * External dependencies 43411 */ 43412 43413 43414 /** 43415 * Internal dependencies 43416 */ 43417 43418 const Surface = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceColor, ";color:", COLORS.gray[900], ";position:relative;" + ( true ? "" : 0), true ? "" : 0); 43419 const background = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceBackgroundColor, ";" + ( true ? "" : 0), true ? "" : 0); 43420 function getBorders({ 43421 borderBottom, 43422 borderLeft, 43423 borderRight, 43424 borderTop 43425 }) { 43426 const borderStyle = `1px solid $config_values.surfaceBorderColor}`; 43427 return /*#__PURE__*/emotion_react_browser_esm_css({ 43428 borderBottom: borderBottom ? borderStyle : undefined, 43429 borderLeft: borderLeft ? borderStyle : undefined, 43430 borderRight: borderRight ? borderStyle : undefined, 43431 borderTop: borderTop ? borderStyle : undefined 43432 }, true ? "" : 0, true ? "" : 0); 43433 } 43434 const primary = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 43435 const secondary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTintColor, ";" + ( true ? "" : 0), true ? "" : 0); 43436 const tertiary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTertiaryColor, ";" + ( true ? "" : 0), true ? "" : 0); 43437 const customBackgroundSize = surfaceBackgroundSize => [surfaceBackgroundSize, surfaceBackgroundSize].join(' '); 43438 const dottedBackground1 = surfaceBackgroundSizeDotted => ['90deg', [config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(','); 43439 const dottedBackground2 = surfaceBackgroundSizeDotted => [[config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(','); 43440 const dottedBackgroundCombined = surfaceBackgroundSizeDotted => [`linear-gradient( $dottedBackground1(surfaceBackgroundSizeDotted)} ) center`, `linear-gradient( $dottedBackground2(surfaceBackgroundSizeDotted)} ) center`, config_values.surfaceBorderBoldColor].join(','); 43441 const getDotted = (surfaceBackgroundSize, surfaceBackgroundSizeDotted) => /*#__PURE__*/emotion_react_browser_esm_css("background:", dottedBackgroundCombined(surfaceBackgroundSizeDotted), ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0), true ? "" : 0); 43442 const gridBackground1 = [`$config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(','); 43443 const gridBackground2 = ['90deg', `$config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(','); 43444 const gridBackgroundCombined = [`linear-gradient( $gridBackground1} )`, `linear-gradient( $gridBackground2} )`].join(','); 43445 const getGrid = surfaceBackgroundSize => { 43446 return /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundColor, ";background-image:", gridBackgroundCombined, ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0), true ? "" : 0); 43447 }; 43448 const getVariant = (variant, surfaceBackgroundSize, surfaceBackgroundSizeDotted) => { 43449 switch (variant) { 43450 case 'dotted': 43451 { 43452 return getDotted(surfaceBackgroundSize, surfaceBackgroundSizeDotted); 43453 } 43454 case 'grid': 43455 { 43456 return getGrid(surfaceBackgroundSize); 43457 } 43458 case 'primary': 43459 { 43460 return primary; 43461 } 43462 case 'secondary': 43463 { 43464 return secondary; 43465 } 43466 case 'tertiary': 43467 { 43468 return tertiary; 43469 } 43470 } 43471 }; 43472 43473 ;// ./node_modules/@wordpress/components/build-module/surface/hook.js 43474 /** 43475 * WordPress dependencies 43476 */ 43477 43478 43479 /** 43480 * Internal dependencies 43481 */ 43482 43483 43484 43485 function useSurface(props) { 43486 const { 43487 backgroundSize = 12, 43488 borderBottom = false, 43489 borderLeft = false, 43490 borderRight = false, 43491 borderTop = false, 43492 className, 43493 variant = 'primary', 43494 ...otherProps 43495 } = useContextSystem(props, 'Surface'); 43496 const cx = useCx(); 43497 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 43498 const sx = { 43499 borders: getBorders({ 43500 borderBottom, 43501 borderLeft, 43502 borderRight, 43503 borderTop 43504 }) 43505 }; 43506 return cx(Surface, sx.borders, getVariant(variant, `$backgroundSize}px`, `$backgroundSize - 1}px`), className); 43507 }, [backgroundSize, borderBottom, borderLeft, borderRight, borderTop, className, cx, variant]); 43508 return { 43509 ...otherProps, 43510 className: classes 43511 }; 43512 } 43513 43514 ;// ./node_modules/@wordpress/components/build-module/card/card/hook.js 43515 /** 43516 * WordPress dependencies 43517 */ 43518 43519 43520 43521 /** 43522 * Internal dependencies 43523 */ 43524 43525 43526 43527 43528 43529 function hook_useDeprecatedProps({ 43530 elevation, 43531 isElevated, 43532 ...otherProps 43533 }) { 43534 const propsToReturn = { 43535 ...otherProps 43536 }; 43537 let computedElevation = elevation; 43538 if (isElevated) { 43539 var _computedElevation; 43540 external_wp_deprecated_default()('Card isElevated prop', { 43541 since: '5.9', 43542 alternative: 'elevation' 43543 }); 43544 (_computedElevation = computedElevation) !== null && _computedElevation !== void 0 ? _computedElevation : computedElevation = 2; 43545 } 43546 43547 // The `elevation` prop should only be passed when it's not `undefined`, 43548 // otherwise it will override the value that gets derived from `useContextSystem`. 43549 if (typeof computedElevation !== 'undefined') { 43550 propsToReturn.elevation = computedElevation; 43551 } 43552 return propsToReturn; 43553 } 43554 function useCard(props) { 43555 const { 43556 className, 43557 elevation = 0, 43558 isBorderless = false, 43559 isRounded = true, 43560 size = 'medium', 43561 ...otherProps 43562 } = useContextSystem(hook_useDeprecatedProps(props), 'Card'); 43563 const cx = useCx(); 43564 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 43565 return cx(Card, isBorderless && boxShadowless, isRounded && rounded, className); 43566 }, [className, cx, isBorderless, isRounded]); 43567 const surfaceProps = useSurface({ 43568 ...otherProps, 43569 className: classes 43570 }); 43571 return { 43572 ...surfaceProps, 43573 elevation, 43574 isBorderless, 43575 isRounded, 43576 size 43577 }; 43578 } 43579 43580 ;// ./node_modules/@wordpress/components/build-module/card/card/component.js 43581 /** 43582 * External dependencies 43583 */ 43584 43585 /** 43586 * WordPress dependencies 43587 */ 43588 43589 43590 /** 43591 * Internal dependencies 43592 */ 43593 43594 43595 43596 43597 43598 43599 43600 43601 43602 function UnconnectedCard(props, forwardedRef) { 43603 const { 43604 children, 43605 elevation, 43606 isBorderless, 43607 isRounded, 43608 size, 43609 ...otherProps 43610 } = useCard(props); 43611 const elevationBorderRadius = isRounded ? config_values.radiusLarge : 0; 43612 const cx = useCx(); 43613 const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx(/*#__PURE__*/emotion_react_browser_esm_css({ 43614 borderRadius: elevationBorderRadius 43615 }, true ? "" : 0, true ? "" : 0)), [cx, elevationBorderRadius]); 43616 const contextProviderValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 43617 const contextProps = { 43618 size, 43619 isBorderless 43620 }; 43621 return { 43622 CardBody: contextProps, 43623 CardHeader: contextProps, 43624 CardFooter: contextProps 43625 }; 43626 }, [isBorderless, size]); 43627 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { 43628 value: contextProviderValue, 43629 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { 43630 ...otherProps, 43631 ref: forwardedRef, 43632 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 43633 className: cx(Content), 43634 children: children 43635 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(elevation_component, { 43636 className: elevationClassName, 43637 isInteractive: false, 43638 value: elevation ? 1 : 0 43639 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(elevation_component, { 43640 className: elevationClassName, 43641 isInteractive: false, 43642 value: elevation 43643 })] 43644 }) 43645 }); 43646 } 43647 43648 /** 43649 * `Card` provides a flexible and extensible content container. 43650 * `Card` also provides a convenient set of sub-components such as `CardBody`, 43651 * `CardHeader`, `CardFooter`, and more. 43652 * 43653 * ```jsx 43654 * import { 43655 * Card, 43656 * CardHeader, 43657 * CardBody, 43658 * CardFooter, 43659 * __experimentalText as Text, 43660 * __experimentalHeading as Heading, 43661 * } from `@wordpress/components`; 43662 * 43663 * function Example() { 43664 * return ( 43665 * <Card> 43666 * <CardHeader> 43667 * <Heading level={ 4 }>Card Title</Heading> 43668 * </CardHeader> 43669 * <CardBody> 43670 * <Text>Card Content</Text> 43671 * </CardBody> 43672 * <CardFooter> 43673 * <Text>Card Footer</Text> 43674 * </CardFooter> 43675 * </Card> 43676 * ); 43677 * } 43678 * ``` 43679 */ 43680 const component_Card = contextConnect(UnconnectedCard, 'Card'); 43681 /* harmony default export */ const card_component = (component_Card); 43682 43683 ;// ./node_modules/@wordpress/components/build-module/scrollable/styles.js 43684 function scrollable_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 43685 /** 43686 * External dependencies 43687 */ 43688 43689 43690 /** 43691 * Internal dependencies 43692 */ 43693 43694 const scrollableScrollbar = /*#__PURE__*/emotion_react_browser_esm_css("@media only screen and ( min-device-width: 40em ){&::-webkit-scrollbar{height:12px;width:12px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-track{background:", config_values.colorScrollbarTrack, ";border-radius:8px;}&::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:", config_values.colorScrollbarThumb, ";border:2px solid rgba( 0, 0, 0, 0 );border-radius:7px;}&:hover::-webkit-scrollbar-thumb{background-color:", config_values.colorScrollbarThumbHover, ";}}" + ( true ? "" : 0), true ? "" : 0); 43695 const Scrollable = true ? { 43696 name: "13udsys", 43697 styles: "height:100%" 43698 } : 0; 43699 const styles_Content = true ? { 43700 name: "bjn8wh", 43701 styles: "position:relative" 43702 } : 0; 43703 const styles_smoothScroll = true ? { 43704 name: "7zq9w", 43705 styles: "scroll-behavior:smooth" 43706 } : 0; 43707 const scrollX = true ? { 43708 name: "q33xhg", 43709 styles: "overflow-x:auto;overflow-y:hidden" 43710 } : 0; 43711 const scrollY = true ? { 43712 name: "103x71s", 43713 styles: "overflow-x:hidden;overflow-y:auto" 43714 } : 0; 43715 const scrollAuto = true ? { 43716 name: "umwchj", 43717 styles: "overflow-y:auto" 43718 } : 0; 43719 43720 ;// ./node_modules/@wordpress/components/build-module/scrollable/hook.js 43721 /** 43722 * WordPress dependencies 43723 */ 43724 43725 43726 /** 43727 * Internal dependencies 43728 */ 43729 43730 43731 43732 43733 function useScrollable(props) { 43734 const { 43735 className, 43736 scrollDirection = 'y', 43737 smoothScroll = false, 43738 ...otherProps 43739 } = useContextSystem(props, 'Scrollable'); 43740 const cx = useCx(); 43741 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Scrollable, scrollableScrollbar, smoothScroll && styles_smoothScroll, scrollDirection === 'x' && scrollX, scrollDirection === 'y' && scrollY, scrollDirection === 'auto' && scrollAuto, className), [className, cx, scrollDirection, smoothScroll]); 43742 return { 43743 ...otherProps, 43744 className: classes 43745 }; 43746 } 43747 43748 ;// ./node_modules/@wordpress/components/build-module/scrollable/component.js 43749 /** 43750 * External dependencies 43751 */ 43752 43753 /** 43754 * Internal dependencies 43755 */ 43756 43757 43758 43759 43760 43761 function UnconnectedScrollable(props, forwardedRef) { 43762 const scrollableProps = useScrollable(props); 43763 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 43764 ...scrollableProps, 43765 ref: forwardedRef 43766 }); 43767 } 43768 43769 /** 43770 * `Scrollable` is a layout component that content in a scrollable container. 43771 * 43772 * ```jsx 43773 * import { __experimentalScrollable as Scrollable } from `@wordpress/components`; 43774 * 43775 * function Example() { 43776 * return ( 43777 * <Scrollable style={ { maxHeight: 200 } }> 43778 * <div style={ { height: 500 } }>...</div> 43779 * </Scrollable> 43780 * ); 43781 * } 43782 * ``` 43783 */ 43784 const component_Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable'); 43785 /* harmony default export */ const scrollable_component = (component_Scrollable); 43786 43787 ;// ./node_modules/@wordpress/components/build-module/card/card-body/hook.js 43788 /** 43789 * WordPress dependencies 43790 */ 43791 43792 43793 /** 43794 * Internal dependencies 43795 */ 43796 43797 43798 43799 43800 function useCardBody(props) { 43801 const { 43802 className, 43803 isScrollable = false, 43804 isShady = false, 43805 size = 'medium', 43806 ...otherProps 43807 } = useContextSystem(props, 'CardBody'); 43808 const cx = useCx(); 43809 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Body, borderRadius, cardPaddings[size], isShady && shady, 43810 // This classname is added for legacy compatibility reasons. 43811 'components-card__body', className), [className, cx, isShady, size]); 43812 return { 43813 ...otherProps, 43814 className: classes, 43815 isScrollable 43816 }; 43817 } 43818 43819 ;// ./node_modules/@wordpress/components/build-module/card/card-body/component.js 43820 /** 43821 * External dependencies 43822 */ 43823 43824 /** 43825 * Internal dependencies 43826 */ 43827 43828 43829 43830 43831 43832 43833 function UnconnectedCardBody(props, forwardedRef) { 43834 const { 43835 isScrollable, 43836 ...otherProps 43837 } = useCardBody(props); 43838 if (isScrollable) { 43839 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(scrollable_component, { 43840 ...otherProps, 43841 ref: forwardedRef 43842 }); 43843 } 43844 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 43845 ...otherProps, 43846 ref: forwardedRef 43847 }); 43848 } 43849 43850 /** 43851 * `CardBody` renders an optional content area for a `Card`. 43852 * Multiple `CardBody` components can be used within `Card` if needed. 43853 * 43854 * ```jsx 43855 * import { Card, CardBody } from `@wordpress/components`; 43856 * 43857 * <Card> 43858 * <CardBody> 43859 * ... 43860 * </CardBody> 43861 * </Card> 43862 * ``` 43863 */ 43864 const CardBody = contextConnect(UnconnectedCardBody, 'CardBody'); 43865 /* harmony default export */ const card_body_component = (CardBody); 43866 43867 ;// ./node_modules/@ariakit/react-core/esm/__chunks/A3CZKICO.js 43868 "use client"; 43869 43870 43871 43872 // src/separator/separator.tsx 43873 var A3CZKICO_TagName = "hr"; 43874 var useSeparator = createHook( 43875 function useSeparator2(_a) { 43876 var _b = _a, { orientation = "horizontal" } = _b, props = __objRest(_b, ["orientation"]); 43877 props = _3YLGPPWQ_spreadValues({ 43878 role: "separator", 43879 "aria-orientation": orientation 43880 }, props); 43881 return props; 43882 } 43883 ); 43884 var Separator = forwardRef2(function Separator2(props) { 43885 const htmlProps = useSeparator(props); 43886 return LMDWO4NN_createElement(A3CZKICO_TagName, htmlProps); 43887 }); 43888 43889 43890 43891 ;// ./node_modules/@wordpress/components/build-module/divider/styles.js 43892 43893 function divider_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 43894 /** 43895 * External dependencies 43896 */ 43897 43898 43899 43900 /** 43901 * Internal dependencies 43902 */ 43903 43904 43905 const MARGIN_DIRECTIONS = { 43906 vertical: { 43907 start: 'marginLeft', 43908 end: 'marginRight' 43909 }, 43910 horizontal: { 43911 start: 'marginTop', 43912 end: 'marginBottom' 43913 } 43914 }; 43915 43916 // Renders the correct margins given the Divider's `orientation` and the writing direction. 43917 // When both the generic `margin` and the specific `marginStart|marginEnd` props are defined, 43918 // the latter will take priority. 43919 const renderMargin = ({ 43920 'aria-orientation': orientation = 'horizontal', 43921 margin, 43922 marginStart, 43923 marginEnd 43924 }) => /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 43925 [MARGIN_DIRECTIONS[orientation].start]: space(marginStart !== null && marginStart !== void 0 ? marginStart : margin), 43926 [MARGIN_DIRECTIONS[orientation].end]: space(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin) 43927 })(), true ? "" : 0, true ? "" : 0); 43928 var divider_styles_ref = true ? { 43929 name: "1u4hpl4", 43930 styles: "display:inline" 43931 } : 0; 43932 const renderDisplay = ({ 43933 'aria-orientation': orientation = 'horizontal' 43934 }) => { 43935 return orientation === 'vertical' ? divider_styles_ref : undefined; 43936 }; 43937 const renderBorder = ({ 43938 'aria-orientation': orientation = 'horizontal' 43939 }) => { 43940 return /*#__PURE__*/emotion_react_browser_esm_css({ 43941 [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor' 43942 }, true ? "" : 0, true ? "" : 0); 43943 }; 43944 const renderSize = ({ 43945 'aria-orientation': orientation = 'horizontal' 43946 }) => /*#__PURE__*/emotion_react_browser_esm_css({ 43947 height: orientation === 'vertical' ? 'auto' : 0, 43948 width: orientation === 'vertical' ? 0 : 'auto' 43949 }, true ? "" : 0, true ? "" : 0); 43950 const DividerView = /*#__PURE__*/emotion_styled_base_browser_esm("hr", true ? { 43951 target: "e19on6iw0" 43952 } : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0)); 43953 43954 ;// ./node_modules/@wordpress/components/build-module/divider/component.js 43955 /** 43956 * External dependencies 43957 */ 43958 43959 43960 /** 43961 * Internal dependencies 43962 */ 43963 43964 43965 43966 43967 function UnconnectedDivider(props, forwardedRef) { 43968 const contextProps = useContextSystem(props, 'Divider'); 43969 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Separator, { 43970 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DividerView, {}), 43971 ...contextProps, 43972 ref: forwardedRef 43973 }); 43974 } 43975 43976 /** 43977 * `Divider` is a layout component that separates groups of related content. 43978 * 43979 * ```js 43980 * import { 43981 * __experimentalDivider as Divider, 43982 * __experimentalText as Text, 43983 * __experimentalVStack as VStack, 43984 * } from `@wordpress/components`; 43985 * 43986 * function Example() { 43987 * return ( 43988 * <VStack spacing={4}> 43989 * <Text>Some text here</Text> 43990 * <Divider /> 43991 * <Text>Some more text here</Text> 43992 * </VStack> 43993 * ); 43994 * } 43995 * ``` 43996 */ 43997 const component_Divider = contextConnect(UnconnectedDivider, 'Divider'); 43998 /* harmony default export */ const divider_component = (component_Divider); 43999 44000 ;// ./node_modules/@wordpress/components/build-module/card/card-divider/hook.js 44001 /** 44002 * WordPress dependencies 44003 */ 44004 44005 44006 /** 44007 * Internal dependencies 44008 */ 44009 44010 44011 44012 44013 function useCardDivider(props) { 44014 const { 44015 className, 44016 ...otherProps 44017 } = useContextSystem(props, 'CardDivider'); 44018 const cx = useCx(); 44019 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Divider, borderColor, 44020 // This classname is added for legacy compatibility reasons. 44021 'components-card__divider', className), [className, cx]); 44022 return { 44023 ...otherProps, 44024 className: classes 44025 }; 44026 } 44027 44028 ;// ./node_modules/@wordpress/components/build-module/card/card-divider/component.js 44029 /** 44030 * External dependencies 44031 */ 44032 44033 /** 44034 * Internal dependencies 44035 */ 44036 44037 44038 44039 44040 44041 function UnconnectedCardDivider(props, forwardedRef) { 44042 const dividerProps = useCardDivider(props); 44043 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(divider_component, { 44044 ...dividerProps, 44045 ref: forwardedRef 44046 }); 44047 } 44048 44049 /** 44050 * `CardDivider` renders an optional divider within a `Card`. 44051 * It is typically used to divide multiple `CardBody` components from each other. 44052 * 44053 * ```jsx 44054 * import { Card, CardBody, CardDivider } from `@wordpress/components`; 44055 * 44056 * <Card> 44057 * <CardBody>...</CardBody> 44058 * <CardDivider /> 44059 * <CardBody>...</CardBody> 44060 * </Card> 44061 * ``` 44062 */ 44063 const CardDivider = contextConnect(UnconnectedCardDivider, 'CardDivider'); 44064 /* harmony default export */ const card_divider_component = (CardDivider); 44065 44066 ;// ./node_modules/@wordpress/components/build-module/card/card-footer/hook.js 44067 /** 44068 * WordPress dependencies 44069 */ 44070 44071 44072 /** 44073 * Internal dependencies 44074 */ 44075 44076 44077 44078 44079 function useCardFooter(props) { 44080 const { 44081 className, 44082 justify, 44083 isBorderless = false, 44084 isShady = false, 44085 size = 'medium', 44086 ...otherProps 44087 } = useContextSystem(props, 'CardFooter'); 44088 const cx = useCx(); 44089 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Footer, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady, 44090 // This classname is added for legacy compatibility reasons. 44091 'components-card__footer', className), [className, cx, isBorderless, isShady, size]); 44092 return { 44093 ...otherProps, 44094 className: classes, 44095 justify 44096 }; 44097 } 44098 44099 ;// ./node_modules/@wordpress/components/build-module/card/card-footer/component.js 44100 /** 44101 * External dependencies 44102 */ 44103 44104 /** 44105 * Internal dependencies 44106 */ 44107 44108 44109 44110 44111 44112 function UnconnectedCardFooter(props, forwardedRef) { 44113 const footerProps = useCardFooter(props); 44114 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_component, { 44115 ...footerProps, 44116 ref: forwardedRef 44117 }); 44118 } 44119 44120 /** 44121 * `CardFooter` renders an optional footer within a `Card`. 44122 * 44123 * ```jsx 44124 * import { Card, CardBody, CardFooter } from `@wordpress/components`; 44125 * 44126 * <Card> 44127 * <CardBody>...</CardBody> 44128 * <CardFooter>...</CardFooter> 44129 * </Card> 44130 * ``` 44131 */ 44132 const CardFooter = contextConnect(UnconnectedCardFooter, 'CardFooter'); 44133 /* harmony default export */ const card_footer_component = (CardFooter); 44134 44135 ;// ./node_modules/@wordpress/components/build-module/card/card-header/hook.js 44136 /** 44137 * WordPress dependencies 44138 */ 44139 44140 44141 /** 44142 * Internal dependencies 44143 */ 44144 44145 44146 44147 44148 function useCardHeader(props) { 44149 const { 44150 className, 44151 isBorderless = false, 44152 isShady = false, 44153 size = 'medium', 44154 ...otherProps 44155 } = useContextSystem(props, 'CardHeader'); 44156 const cx = useCx(); 44157 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Header, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady, 44158 // This classname is added for legacy compatibility reasons. 44159 'components-card__header', className), [className, cx, isBorderless, isShady, size]); 44160 return { 44161 ...otherProps, 44162 className: classes 44163 }; 44164 } 44165 44166 ;// ./node_modules/@wordpress/components/build-module/card/card-header/component.js 44167 /** 44168 * External dependencies 44169 */ 44170 44171 /** 44172 * Internal dependencies 44173 */ 44174 44175 44176 44177 44178 44179 function UnconnectedCardHeader(props, forwardedRef) { 44180 const headerProps = useCardHeader(props); 44181 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_component, { 44182 ...headerProps, 44183 ref: forwardedRef 44184 }); 44185 } 44186 44187 /** 44188 * `CardHeader` renders an optional header within a `Card`. 44189 * 44190 * ```jsx 44191 * import { Card, CardBody, CardHeader } from `@wordpress/components`; 44192 * 44193 * <Card> 44194 * <CardHeader>...</CardHeader> 44195 * <CardBody>...</CardBody> 44196 * </Card> 44197 * ``` 44198 */ 44199 const CardHeader = contextConnect(UnconnectedCardHeader, 'CardHeader'); 44200 /* harmony default export */ const card_header_component = (CardHeader); 44201 44202 ;// ./node_modules/@wordpress/components/build-module/card/card-media/hook.js 44203 /** 44204 * WordPress dependencies 44205 */ 44206 44207 44208 /** 44209 * Internal dependencies 44210 */ 44211 44212 44213 44214 44215 function useCardMedia(props) { 44216 const { 44217 className, 44218 ...otherProps 44219 } = useContextSystem(props, 'CardMedia'); 44220 const cx = useCx(); 44221 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Media, borderRadius, 44222 // This classname is added for legacy compatibility reasons. 44223 'components-card__media', className), [className, cx]); 44224 return { 44225 ...otherProps, 44226 className: classes 44227 }; 44228 } 44229 44230 ;// ./node_modules/@wordpress/components/build-module/card/card-media/component.js 44231 /** 44232 * External dependencies 44233 */ 44234 44235 /** 44236 * Internal dependencies 44237 */ 44238 44239 44240 44241 44242 44243 function UnconnectedCardMedia(props, forwardedRef) { 44244 const cardMediaProps = useCardMedia(props); 44245 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 44246 ...cardMediaProps, 44247 ref: forwardedRef 44248 }); 44249 } 44250 44251 /** 44252 * `CardMedia` provides a container for full-bleed content within a `Card`, 44253 * such as images, video, or even just a background color. 44254 * 44255 * @example 44256 * ```jsx 44257 * import { Card, CardBody, CardMedia } from '@wordpress/components'; 44258 * 44259 * const Example = () => ( 44260 * <Card> 44261 * <CardMedia> 44262 * <img src="..." /> 44263 * </CardMedia> 44264 * <CardBody>...</CardBody> 44265 * </Card> 44266 * ); 44267 * ``` 44268 */ 44269 const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia'); 44270 /* harmony default export */ const card_media_component = (CardMedia); 44271 44272 ;// ./node_modules/@wordpress/components/build-module/checkbox-control/index.js 44273 /** 44274 * External dependencies 44275 */ 44276 44277 /** 44278 * WordPress dependencies 44279 */ 44280 44281 44282 44283 44284 44285 /** 44286 * Internal dependencies 44287 */ 44288 44289 44290 44291 /** 44292 * Checkboxes allow the user to select one or more items from a set. 44293 * 44294 * ```jsx 44295 * import { CheckboxControl } from '@wordpress/components'; 44296 * import { useState } from '@wordpress/element'; 44297 * 44298 * const MyCheckboxControl = () => { 44299 * const [ isChecked, setChecked ] = useState( true ); 44300 * return ( 44301 * <CheckboxControl 44302 * __nextHasNoMarginBottom 44303 * label="Is author" 44304 * help="Is the user a author or not?" 44305 * checked={ isChecked } 44306 * onChange={ setChecked } 44307 * /> 44308 * ); 44309 * }; 44310 * ``` 44311 */ 44312 function CheckboxControl(props) { 44313 const { 44314 __nextHasNoMarginBottom, 44315 label, 44316 className, 44317 heading, 44318 checked, 44319 indeterminate, 44320 help, 44321 id: idProp, 44322 onChange, 44323 ...additionalProps 44324 } = props; 44325 if (heading) { 44326 external_wp_deprecated_default()('`heading` prop in `CheckboxControl`', { 44327 alternative: 'a separate element to implement a heading', 44328 since: '5.8' 44329 }); 44330 } 44331 const [showCheckedIcon, setShowCheckedIcon] = (0,external_wp_element_namespaceObject.useState)(false); 44332 const [showIndeterminateIcon, setShowIndeterminateIcon] = (0,external_wp_element_namespaceObject.useState)(false); 44333 44334 // Run the following callback every time the `ref` (and the additional 44335 // dependencies) change. 44336 const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => { 44337 if (!node) { 44338 return; 44339 } 44340 44341 // It cannot be set using an HTML attribute. 44342 node.indeterminate = !!indeterminate; 44343 setShowCheckedIcon(node.matches(':checked')); 44344 setShowIndeterminateIcon(node.matches(':indeterminate')); 44345 }, [checked, indeterminate]); 44346 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp); 44347 const onChangeValue = event => onChange(event.target.checked); 44348 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 44349 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 44350 __associatedWPComponentName: "CheckboxControl", 44351 label: heading, 44352 id: id, 44353 help: help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 44354 className: "components-checkbox-control__help", 44355 children: help 44356 }), 44357 className: dist_clsx('components-checkbox-control', className), 44358 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 44359 spacing: 0, 44360 justify: "start", 44361 alignment: "top", 44362 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 44363 className: "components-checkbox-control__input-container", 44364 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { 44365 ref: ref, 44366 id: id, 44367 className: "components-checkbox-control__input", 44368 type: "checkbox", 44369 value: "1", 44370 onChange: onChangeValue, 44371 checked: checked, 44372 "aria-describedby": !!help ? id + '__help' : undefined, 44373 ...additionalProps 44374 }), showIndeterminateIcon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 44375 icon: library_reset, 44376 className: "components-checkbox-control__indeterminate", 44377 role: "presentation" 44378 }) : null, showCheckedIcon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 44379 icon: library_check, 44380 className: "components-checkbox-control__checked", 44381 role: "presentation" 44382 }) : null] 44383 }), label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("label", { 44384 className: "components-checkbox-control__label", 44385 htmlFor: id, 44386 children: label 44387 })] 44388 }) 44389 }); 44390 } 44391 /* harmony default export */ const checkbox_control = (CheckboxControl); 44392 44393 ;// ./node_modules/@wordpress/components/build-module/clipboard-button/index.js 44394 /** 44395 * External dependencies 44396 */ 44397 44398 44399 /** 44400 * WordPress dependencies 44401 */ 44402 44403 44404 44405 44406 /** 44407 * Internal dependencies 44408 */ 44409 44410 44411 const TIMEOUT = 4000; 44412 function ClipboardButton({ 44413 className, 44414 children, 44415 onCopy, 44416 onFinishCopy, 44417 text, 44418 ...buttonProps 44419 }) { 44420 external_wp_deprecated_default()('wp.components.ClipboardButton', { 44421 since: '5.8', 44422 alternative: 'wp.compose.useCopyToClipboard' 44423 }); 44424 const timeoutIdRef = (0,external_wp_element_namespaceObject.useRef)(); 44425 const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(text, () => { 44426 onCopy(); 44427 if (timeoutIdRef.current) { 44428 clearTimeout(timeoutIdRef.current); 44429 } 44430 if (onFinishCopy) { 44431 timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT); 44432 } 44433 }); 44434 (0,external_wp_element_namespaceObject.useEffect)(() => { 44435 return () => { 44436 if (timeoutIdRef.current) { 44437 clearTimeout(timeoutIdRef.current); 44438 } 44439 }; 44440 }, []); 44441 const classes = dist_clsx('components-clipboard-button', className); 44442 44443 // Workaround for inconsistent behavior in Safari, where <textarea> is not 44444 // the document.activeElement at the moment when the copy event fires. 44445 // This causes documentHasSelection() in the copy-handler component to 44446 // mistakenly override the ClipboardButton, and copy a serialized string 44447 // of the current block instead. 44448 const focusOnCopyEventTarget = event => { 44449 // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated. 44450 event.target.focus(); 44451 }; 44452 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 44453 ...buttonProps, 44454 className: classes, 44455 ref: ref, 44456 onCopy: focusOnCopyEventTarget, 44457 children: children 44458 }); 44459 } 44460 44461 ;// ./node_modules/@wordpress/icons/build-module/library/more-vertical.js 44462 /** 44463 * WordPress dependencies 44464 */ 44465 44466 44467 const moreVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 44468 xmlns: "http://www.w3.org/2000/svg", 44469 viewBox: "0 0 24 24", 44470 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 44471 d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" 44472 }) 44473 }); 44474 /* harmony default export */ const more_vertical = (moreVertical); 44475 44476 ;// ./node_modules/@wordpress/components/build-module/item-group/styles.js 44477 function item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 44478 /** 44479 * External dependencies 44480 */ 44481 44482 44483 /** 44484 * Internal dependencies 44485 */ 44486 44487 const unstyledButton = as => { 44488 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", font('default.fontSize'), ";font-family:inherit;appearance:none;border:1px solid transparent;cursor:pointer;background:none;text-align:start;text-decoration:", as === 'a' ? 'none' : undefined, ";svg,path{fill:currentColor;}&:hover{color:", COLORS.theme.accent, ";}&:focus{box-shadow:none;outline:none;}&:focus-visible{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0), true ? "" : 0); 44489 }; 44490 const itemWrapper = true ? { 44491 name: "1bcj5ek", 44492 styles: "width:100%;display:block" 44493 } : 0; 44494 const item = true ? { 44495 name: "150ruhm", 44496 styles: "box-sizing:border-box;width:100%;display:block;margin:0;color:inherit" 44497 } : 0; 44498 const bordered = /*#__PURE__*/emotion_react_browser_esm_css("border:1px solid ", config_values.surfaceBorderColor, ";" + ( true ? "" : 0), true ? "" : 0); 44499 const separated = /*#__PURE__*/emotion_react_browser_esm_css(">*:not( marquee )>*{border-bottom:1px solid ", config_values.surfaceBorderColor, ";}>*:last-of-type>*:not( :focus ){border-bottom-color:transparent;}" + ( true ? "" : 0), true ? "" : 0); 44500 const styles_borderRadius = config_values.radiusSmall; 44501 const styles_spacedAround = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";" + ( true ? "" : 0), true ? "" : 0); 44502 const styles_rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";>*:first-of-type>*{border-top-left-radius:", styles_borderRadius, ";border-top-right-radius:", styles_borderRadius, ";}>*:last-of-type>*{border-bottom-left-radius:", styles_borderRadius, ";border-bottom-right-radius:", styles_borderRadius, ";}" + ( true ? "" : 0), true ? "" : 0); 44503 const baseFontHeight = `calc($config_values.fontSize} * $config_values.fontLineHeightBase})`; 44504 44505 /* 44506 * Math: 44507 * - Use the desired height as the base value 44508 * - Subtract the computed height of (default) text 44509 * - Subtract the effects of border 44510 * - Divide the calculated number by 2, in order to get an individual top/bottom padding 44511 */ 44512 const paddingY = `calc(($config_values.controlHeight} - $baseFontHeight} - 2px) / 2)`; 44513 const paddingYSmall = `calc(($config_values.controlHeightSmall} - $baseFontHeight} - 2px) / 2)`; 44514 const paddingYLarge = `calc(($config_values.controlHeightLarge} - $baseFontHeight} - 2px) / 2)`; 44515 const itemSizes = { 44516 small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, "px;" + ( true ? "" : 0), true ? "" : 0), 44517 medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, "px;" + ( true ? "" : 0), true ? "" : 0), 44518 large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, "px;" + ( true ? "" : 0), true ? "" : 0) 44519 }; 44520 44521 ;// ./node_modules/@wordpress/components/build-module/item-group/context.js 44522 /** 44523 * WordPress dependencies 44524 */ 44525 44526 44527 /** 44528 * Internal dependencies 44529 */ 44530 44531 const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 44532 size: 'medium' 44533 }); 44534 const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext); 44535 44536 ;// ./node_modules/@wordpress/components/build-module/item-group/item/hook.js 44537 /** 44538 * WordPress dependencies 44539 */ 44540 44541 44542 /** 44543 * Internal dependencies 44544 */ 44545 44546 44547 44548 44549 44550 function useItem(props) { 44551 const { 44552 as: asProp, 44553 className, 44554 onClick, 44555 role = 'listitem', 44556 size: sizeProp, 44557 ...otherProps 44558 } = useContextSystem(props, 'Item'); 44559 const { 44560 spacedAround, 44561 size: contextSize 44562 } = useItemGroupContext(); 44563 const size = sizeProp || contextSize; 44564 const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div'); 44565 const cx = useCx(); 44566 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx((as === 'button' || as === 'a') && unstyledButton(as), itemSizes[size] || itemSizes.medium, item, spacedAround && styles_spacedAround, className), [as, className, cx, size, spacedAround]); 44567 const wrapperClassName = cx(itemWrapper); 44568 return { 44569 as, 44570 className: classes, 44571 onClick, 44572 wrapperClassName, 44573 role, 44574 ...otherProps 44575 }; 44576 } 44577 44578 ;// ./node_modules/@wordpress/components/build-module/item-group/item/component.js 44579 /** 44580 * External dependencies 44581 */ 44582 44583 /** 44584 * Internal dependencies 44585 */ 44586 44587 44588 44589 44590 44591 function UnconnectedItem(props, forwardedRef) { 44592 const { 44593 role, 44594 wrapperClassName, 44595 ...otherProps 44596 } = useItem(props); 44597 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 44598 role: role, 44599 className: wrapperClassName, 44600 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 44601 ...otherProps, 44602 ref: forwardedRef 44603 }) 44604 }); 44605 } 44606 44607 /** 44608 * `Item` is used in combination with `ItemGroup` to display a list of items 44609 * grouped and styled together. 44610 * 44611 * ```jsx 44612 * import { 44613 * __experimentalItemGroup as ItemGroup, 44614 * __experimentalItem as Item, 44615 * } from '@wordpress/components'; 44616 * 44617 * function Example() { 44618 * return ( 44619 * <ItemGroup> 44620 * <Item>Code</Item> 44621 * <Item>is</Item> 44622 * <Item>Poetry</Item> 44623 * </ItemGroup> 44624 * ); 44625 * } 44626 * ``` 44627 */ 44628 const component_Item = contextConnect(UnconnectedItem, 'Item'); 44629 /* harmony default export */ const item_component = (component_Item); 44630 44631 ;// ./node_modules/@wordpress/components/build-module/item-group/item-group/hook.js 44632 /** 44633 * Internal dependencies 44634 */ 44635 44636 44637 44638 /** 44639 * Internal dependencies 44640 */ 44641 44642 44643 function useItemGroup(props) { 44644 const { 44645 className, 44646 isBordered = false, 44647 isRounded = true, 44648 isSeparated = false, 44649 role = 'list', 44650 ...otherProps 44651 } = useContextSystem(props, 'ItemGroup'); 44652 const cx = useCx(); 44653 const classes = cx(isBordered && bordered, isSeparated && separated, isRounded && styles_rounded, className); 44654 return { 44655 isBordered, 44656 className: classes, 44657 role, 44658 isSeparated, 44659 ...otherProps 44660 }; 44661 } 44662 44663 ;// ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js 44664 /** 44665 * External dependencies 44666 */ 44667 44668 /** 44669 * Internal dependencies 44670 */ 44671 44672 44673 44674 44675 44676 44677 function UnconnectedItemGroup(props, forwardedRef) { 44678 const { 44679 isBordered, 44680 isSeparated, 44681 size: sizeProp, 44682 ...otherProps 44683 } = useItemGroup(props); 44684 const { 44685 size: contextSize 44686 } = useItemGroupContext(); 44687 const spacedAround = !isBordered && !isSeparated; 44688 const size = sizeProp || contextSize; 44689 const contextValue = { 44690 spacedAround, 44691 size 44692 }; 44693 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemGroupContext.Provider, { 44694 value: contextValue, 44695 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 44696 ...otherProps, 44697 ref: forwardedRef 44698 }) 44699 }); 44700 } 44701 44702 /** 44703 * `ItemGroup` displays a list of `Item`s grouped and styled together. 44704 * 44705 * ```jsx 44706 * import { 44707 * __experimentalItemGroup as ItemGroup, 44708 * __experimentalItem as Item, 44709 * } from '@wordpress/components'; 44710 * 44711 * function Example() { 44712 * return ( 44713 * <ItemGroup> 44714 * <Item>Code</Item> 44715 * <Item>is</Item> 44716 * <Item>Poetry</Item> 44717 * </ItemGroup> 44718 * ); 44719 * } 44720 * ``` 44721 */ 44722 const ItemGroup = contextConnect(UnconnectedItemGroup, 'ItemGroup'); 44723 /* harmony default export */ const item_group_component = (ItemGroup); 44724 44725 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js 44726 const GRADIENT_MARKERS_WIDTH = 16; 44727 const INSERT_POINT_WIDTH = 16; 44728 const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10; 44729 const MINIMUM_DISTANCE_BETWEEN_POINTS = 0; 44730 const MINIMUM_SIGNIFICANT_MOVE = 5; 44731 const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; 44732 const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2; 44733 44734 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js 44735 /** 44736 * Internal dependencies 44737 */ 44738 44739 /** 44740 * Clamps a number between 0 and 100. 44741 * 44742 * @param value Value to clamp. 44743 * 44744 * @return Value clamped between 0 and 100. 44745 */ 44746 function clampPercent(value) { 44747 return Math.max(0, Math.min(100, value)); 44748 } 44749 44750 /** 44751 * Check if a control point is overlapping with another. 44752 * 44753 * @param value Array of control points. 44754 * @param initialIndex Index of the position to test. 44755 * @param newPosition New position of the control point. 44756 * @param minDistance Distance considered to be overlapping. 44757 * 44758 * @return True if the point is overlapping. 44759 */ 44760 function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) { 44761 const initialPosition = value[initialIndex].position; 44762 const minPosition = Math.min(initialPosition, newPosition); 44763 const maxPosition = Math.max(initialPosition, newPosition); 44764 return value.some(({ 44765 position 44766 }, index) => { 44767 return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition); 44768 }); 44769 } 44770 44771 /** 44772 * Adds a control point from an array and returns the new array. 44773 * 44774 * @param points Array of control points. 44775 * @param position Position to insert the new point. 44776 * @param color Color to update the control point at index. 44777 * 44778 * @return New array of control points. 44779 */ 44780 function addControlPoint(points, position, color) { 44781 const nextIndex = points.findIndex(point => point.position > position); 44782 const newPoint = { 44783 color, 44784 position 44785 }; 44786 const newPoints = points.slice(); 44787 newPoints.splice(nextIndex - 1, 0, newPoint); 44788 return newPoints; 44789 } 44790 44791 /** 44792 * Removes a control point from an array and returns the new array. 44793 * 44794 * @param points Array of control points. 44795 * @param index Index to remove. 44796 * 44797 * @return New array of control points. 44798 */ 44799 function removeControlPoint(points, index) { 44800 return points.filter((_point, pointIndex) => { 44801 return pointIndex !== index; 44802 }); 44803 } 44804 /** 44805 * Updates a control point from an array and returns the new array. 44806 * 44807 * @param points Array of control points. 44808 * @param index Index to update. 44809 * @param newPoint New control point to replace the index. 44810 * 44811 * @return New array of control points. 44812 */ 44813 function updateControlPoint(points, index, newPoint) { 44814 const newValue = points.slice(); 44815 newValue[index] = newPoint; 44816 return newValue; 44817 } 44818 44819 /** 44820 * Updates the position of a control point from an array and returns the new array. 44821 * 44822 * @param points Array of control points. 44823 * @param index Index to update. 44824 * @param newPosition Position to move the control point at index. 44825 * 44826 * @return New array of control points. 44827 */ 44828 function updateControlPointPosition(points, index, newPosition) { 44829 if (isOverlapping(points, index, newPosition)) { 44830 return points; 44831 } 44832 const newPoint = { 44833 ...points[index], 44834 position: newPosition 44835 }; 44836 return updateControlPoint(points, index, newPoint); 44837 } 44838 44839 /** 44840 * Updates the position of a control point from an array and returns the new array. 44841 * 44842 * @param points Array of control points. 44843 * @param index Index to update. 44844 * @param newColor Color to update the control point at index. 44845 * 44846 * @return New array of control points. 44847 */ 44848 function updateControlPointColor(points, index, newColor) { 44849 const newPoint = { 44850 ...points[index], 44851 color: newColor 44852 }; 44853 return updateControlPoint(points, index, newPoint); 44854 } 44855 44856 /** 44857 * Updates the position of a control point from an array and returns the new array. 44858 * 44859 * @param points Array of control points. 44860 * @param position Position of the color stop. 44861 * @param newColor Color to update the control point at index. 44862 * 44863 * @return New array of control points. 44864 */ 44865 function updateControlPointColorByPosition(points, position, newColor) { 44866 const index = points.findIndex(point => point.position === position); 44867 return updateControlPointColor(points, index, newColor); 44868 } 44869 44870 /** 44871 * Gets the horizontal coordinate when dragging a control point with the mouse. 44872 * 44873 * @param mouseXcoordinate Horizontal coordinate of the mouse position. 44874 * @param containerElement Container for the gradient picker. 44875 * 44876 * @return Whole number percentage from the left. 44877 */ 44878 44879 function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) { 44880 if (!containerElement) { 44881 return; 44882 } 44883 const { 44884 x, 44885 width 44886 } = containerElement.getBoundingClientRect(); 44887 const absolutePositionValue = mouseXCoordinate - x; 44888 return Math.round(clampPercent(absolutePositionValue * 100 / width)); 44889 } 44890 44891 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js 44892 /** 44893 * External dependencies 44894 */ 44895 44896 44897 44898 /** 44899 * WordPress dependencies 44900 */ 44901 44902 44903 44904 44905 44906 /** 44907 * Internal dependencies 44908 */ 44909 44910 44911 44912 44913 44914 44915 44916 44917 44918 function ControlPointButton({ 44919 isOpen, 44920 position, 44921 color, 44922 ...additionalProps 44923 }) { 44924 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton); 44925 const descriptionId = `components-custom-gradient-picker__control-point-button-description-$instanceId}`; 44926 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 44927 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 44928 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( 44929 // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151). 44930 (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color), 44931 "aria-describedby": descriptionId, 44932 "aria-haspopup": "true", 44933 "aria-expanded": isOpen, 44934 __next40pxDefaultSize: true, 44935 className: dist_clsx('components-custom-gradient-picker__control-point-button', { 44936 'is-active': isOpen 44937 }), 44938 ...additionalProps 44939 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 44940 id: descriptionId, 44941 children: (0,external_wp_i18n_namespaceObject.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.') 44942 })] 44943 }); 44944 } 44945 function GradientColorPickerDropdown({ 44946 isRenderedInSidebar, 44947 className, 44948 ...props 44949 }) { 44950 // Open the popover below the gradient control/insertion point 44951 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 44952 placement: 'bottom', 44953 offset: 8, 44954 // Disabling resize as it would otherwise cause the popover to show 44955 // scrollbars while dragging the color picker's handle close to the 44956 // popover edge. 44957 resize: false 44958 }), []); 44959 const mergedClassName = dist_clsx('components-custom-gradient-picker__control-point-dropdown', className); 44960 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, { 44961 isRenderedInSidebar: isRenderedInSidebar, 44962 popoverProps: popoverProps, 44963 className: mergedClassName, 44964 ...props 44965 }); 44966 } 44967 function ControlPoints({ 44968 disableRemove, 44969 disableAlpha, 44970 gradientPickerDomRef, 44971 ignoreMarkerPosition, 44972 value: controlPoints, 44973 onChange, 44974 onStartControlPointChange, 44975 onStopControlPointChange, 44976 __experimentalIsRenderedInSidebar 44977 }) { 44978 const controlPointMoveStateRef = (0,external_wp_element_namespaceObject.useRef)(); 44979 const onMouseMove = event => { 44980 if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) { 44981 return; 44982 } 44983 const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current); 44984 const { 44985 initialPosition, 44986 index, 44987 significantMoveHappened 44988 } = controlPointMoveStateRef.current; 44989 if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) { 44990 controlPointMoveStateRef.current.significantMoveHappened = true; 44991 } 44992 onChange(updateControlPointPosition(controlPoints, index, relativePosition)); 44993 }; 44994 const cleanEventListeners = () => { 44995 if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) { 44996 window.removeEventListener('mousemove', onMouseMove); 44997 window.removeEventListener('mouseup', cleanEventListeners); 44998 onStopControlPointChange(); 44999 controlPointMoveStateRef.current.listenersActivated = false; 45000 } 45001 }; 45002 45003 // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback` 45004 // This memoization would prevent the event listeners from being properly cleaned. 45005 // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency. 45006 const cleanEventListenersRef = (0,external_wp_element_namespaceObject.useRef)(); 45007 cleanEventListenersRef.current = cleanEventListeners; 45008 (0,external_wp_element_namespaceObject.useEffect)(() => { 45009 return () => { 45010 cleanEventListenersRef.current?.(); 45011 }; 45012 }, []); 45013 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 45014 children: controlPoints.map((point, index) => { 45015 const initialPosition = point?.position; 45016 return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, { 45017 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 45018 onClose: onStopControlPointChange, 45019 renderToggle: ({ 45020 isOpen, 45021 onToggle 45022 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ControlPointButton, { 45023 onClick: () => { 45024 if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) { 45025 return; 45026 } 45027 if (isOpen) { 45028 onStopControlPointChange(); 45029 } else { 45030 onStartControlPointChange(); 45031 } 45032 onToggle(); 45033 }, 45034 onMouseDown: () => { 45035 if (window && window.addEventListener) { 45036 controlPointMoveStateRef.current = { 45037 initialPosition, 45038 index, 45039 significantMoveHappened: false, 45040 listenersActivated: true 45041 }; 45042 onStartControlPointChange(); 45043 window.addEventListener('mousemove', onMouseMove); 45044 window.addEventListener('mouseup', cleanEventListeners); 45045 } 45046 }, 45047 onKeyDown: event => { 45048 if (event.code === 'ArrowLeft') { 45049 // Stop propagation of the key press event to avoid focus moving 45050 // to another editor area. 45051 event.stopPropagation(); 45052 onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION))); 45053 } else if (event.code === 'ArrowRight') { 45054 // Stop propagation of the key press event to avoid focus moving 45055 // to another editor area. 45056 event.stopPropagation(); 45057 onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION))); 45058 } 45059 }, 45060 isOpen: isOpen, 45061 position: point.position, 45062 color: point.color 45063 }, index), 45064 renderContent: ({ 45065 onClose 45066 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(dropdown_content_wrapper, { 45067 paddingSize: "none", 45068 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { 45069 enableAlpha: !disableAlpha, 45070 color: point.color, 45071 onChange: color => { 45072 onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString())); 45073 } 45074 }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(h_stack_component, { 45075 className: "components-custom-gradient-picker__remove-control-point-wrapper", 45076 alignment: "center", 45077 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 45078 onClick: () => { 45079 onChange(removeControlPoint(controlPoints, index)); 45080 onClose(); 45081 }, 45082 variant: "link", 45083 children: (0,external_wp_i18n_namespaceObject.__)('Remove Control Point') 45084 }) 45085 })] 45086 }), 45087 style: { 45088 left: `$point.position}%`, 45089 transform: 'translateX( -50% )' 45090 } 45091 }, index); 45092 }) 45093 }); 45094 } 45095 function InsertPoint({ 45096 value: controlPoints, 45097 onChange, 45098 onOpenInserter, 45099 onCloseInserter, 45100 insertPosition, 45101 disableAlpha, 45102 __experimentalIsRenderedInSidebar 45103 }) { 45104 const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false); 45105 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, { 45106 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 45107 className: "components-custom-gradient-picker__inserter", 45108 onClose: () => { 45109 onCloseInserter(); 45110 }, 45111 renderToggle: ({ 45112 isOpen, 45113 onToggle 45114 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 45115 __next40pxDefaultSize: true, 45116 "aria-expanded": isOpen, 45117 "aria-haspopup": "true", 45118 onClick: () => { 45119 if (isOpen) { 45120 onCloseInserter(); 45121 } else { 45122 setAlreadyInsertedPoint(false); 45123 onOpenInserter(); 45124 } 45125 onToggle(); 45126 }, 45127 className: "components-custom-gradient-picker__insert-point-dropdown", 45128 icon: library_plus 45129 }), 45130 renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, { 45131 paddingSize: "none", 45132 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { 45133 enableAlpha: !disableAlpha, 45134 onChange: color => { 45135 if (!alreadyInsertedPoint) { 45136 onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString())); 45137 setAlreadyInsertedPoint(true); 45138 } else { 45139 onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString())); 45140 } 45141 } 45142 }) 45143 }), 45144 style: insertPosition !== null ? { 45145 left: `$insertPosition}%`, 45146 transform: 'translateX( -50% )' 45147 } : undefined 45148 }); 45149 } 45150 ControlPoints.InsertPoint = InsertPoint; 45151 /* harmony default export */ const control_points = (ControlPoints); 45152 45153 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js 45154 /** 45155 * External dependencies 45156 */ 45157 45158 45159 /** 45160 * WordPress dependencies 45161 */ 45162 45163 45164 /** 45165 * Internal dependencies 45166 */ 45167 45168 45169 45170 45171 const customGradientBarReducer = (state, action) => { 45172 switch (action.type) { 45173 case 'MOVE_INSERTER': 45174 if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') { 45175 return { 45176 id: 'MOVING_INSERTER', 45177 insertPosition: action.insertPosition 45178 }; 45179 } 45180 break; 45181 case 'STOP_INSERTER_MOVE': 45182 if (state.id === 'MOVING_INSERTER') { 45183 return { 45184 id: 'IDLE' 45185 }; 45186 } 45187 break; 45188 case 'OPEN_INSERTER': 45189 if (state.id === 'MOVING_INSERTER') { 45190 return { 45191 id: 'INSERTING_CONTROL_POINT', 45192 insertPosition: state.insertPosition 45193 }; 45194 } 45195 break; 45196 case 'CLOSE_INSERTER': 45197 if (state.id === 'INSERTING_CONTROL_POINT') { 45198 return { 45199 id: 'IDLE' 45200 }; 45201 } 45202 break; 45203 case 'START_CONTROL_CHANGE': 45204 if (state.id === 'IDLE') { 45205 return { 45206 id: 'MOVING_CONTROL_POINT' 45207 }; 45208 } 45209 break; 45210 case 'STOP_CONTROL_CHANGE': 45211 if (state.id === 'MOVING_CONTROL_POINT') { 45212 return { 45213 id: 'IDLE' 45214 }; 45215 } 45216 break; 45217 } 45218 return state; 45219 }; 45220 const customGradientBarReducerInitialState = { 45221 id: 'IDLE' 45222 }; 45223 function CustomGradientBar({ 45224 background, 45225 hasGradient, 45226 value: controlPoints, 45227 onChange, 45228 disableInserter = false, 45229 disableAlpha = false, 45230 __experimentalIsRenderedInSidebar = false 45231 }) { 45232 const gradientMarkersContainerDomRef = (0,external_wp_element_namespaceObject.useRef)(null); 45233 const [gradientBarState, gradientBarStateDispatch] = (0,external_wp_element_namespaceObject.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState); 45234 const onMouseEnterAndMove = event => { 45235 if (!gradientMarkersContainerDomRef.current) { 45236 return; 45237 } 45238 const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current); 45239 45240 // If the insert point is close to an existing control point don't show it. 45241 if (controlPoints.some(({ 45242 position 45243 }) => { 45244 return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; 45245 })) { 45246 if (gradientBarState.id === 'MOVING_INSERTER') { 45247 gradientBarStateDispatch({ 45248 type: 'STOP_INSERTER_MOVE' 45249 }); 45250 } 45251 return; 45252 } 45253 gradientBarStateDispatch({ 45254 type: 'MOVE_INSERTER', 45255 insertPosition 45256 }); 45257 }; 45258 const onMouseLeave = () => { 45259 gradientBarStateDispatch({ 45260 type: 'STOP_INSERTER_MOVE' 45261 }); 45262 }; 45263 const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER'; 45264 const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT'; 45265 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 45266 className: dist_clsx('components-custom-gradient-picker__gradient-bar', { 45267 'has-gradient': hasGradient 45268 }), 45269 onMouseEnter: onMouseEnterAndMove, 45270 onMouseMove: onMouseEnterAndMove, 45271 onMouseLeave: onMouseLeave, 45272 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 45273 className: "components-custom-gradient-picker__gradient-bar-background", 45274 style: { 45275 background, 45276 opacity: hasGradient ? 1 : 0.4 45277 } 45278 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 45279 ref: gradientMarkersContainerDomRef, 45280 className: "components-custom-gradient-picker__markers-container", 45281 children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control_points.InsertPoint, { 45282 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 45283 disableAlpha: disableAlpha, 45284 insertPosition: gradientBarState.insertPosition, 45285 value: controlPoints, 45286 onChange: onChange, 45287 onOpenInserter: () => { 45288 gradientBarStateDispatch({ 45289 type: 'OPEN_INSERTER' 45290 }); 45291 }, 45292 onCloseInserter: () => { 45293 gradientBarStateDispatch({ 45294 type: 'CLOSE_INSERTER' 45295 }); 45296 } 45297 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control_points, { 45298 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 45299 disableAlpha: disableAlpha, 45300 disableRemove: disableInserter, 45301 gradientPickerDomRef: gradientMarkersContainerDomRef, 45302 ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined, 45303 value: controlPoints, 45304 onChange: onChange, 45305 onStartControlPointChange: () => { 45306 gradientBarStateDispatch({ 45307 type: 'START_CONTROL_CHANGE' 45308 }); 45309 }, 45310 onStopControlPointChange: () => { 45311 gradientBarStateDispatch({ 45312 type: 'STOP_CONTROL_CHANGE' 45313 }); 45314 } 45315 })] 45316 })] 45317 }); 45318 } 45319 45320 // EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js 45321 var build_node = __webpack_require__(8924); 45322 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js 45323 /** 45324 * WordPress dependencies 45325 */ 45326 45327 const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)'; 45328 const DEFAULT_LINEAR_GRADIENT_ANGLE = 180; 45329 const HORIZONTAL_GRADIENT_ORIENTATION = { 45330 type: 'angular', 45331 value: '90' 45332 }; 45333 const GRADIENT_OPTIONS = [{ 45334 value: 'linear-gradient', 45335 label: (0,external_wp_i18n_namespaceObject.__)('Linear') 45336 }, { 45337 value: 'radial-gradient', 45338 label: (0,external_wp_i18n_namespaceObject.__)('Radial') 45339 }]; 45340 const DIRECTIONAL_ORIENTATION_ANGLE_MAP = { 45341 top: 0, 45342 'top right': 45, 45343 'right top': 45, 45344 right: 90, 45345 'right bottom': 135, 45346 'bottom right': 135, 45347 bottom: 180, 45348 'bottom left': 225, 45349 'left bottom': 225, 45350 left: 270, 45351 'top left': 315, 45352 'left top': 315 45353 }; 45354 45355 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js 45356 /** 45357 * External dependencies 45358 */ 45359 45360 function serializeGradientColor({ 45361 type, 45362 value 45363 }) { 45364 if (type === 'literal') { 45365 return value; 45366 } 45367 if (type === 'hex') { 45368 return `#$value}`; 45369 } 45370 return `$type}($value.join(',')})`; 45371 } 45372 function serializeGradientPosition(position) { 45373 if (!position) { 45374 return ''; 45375 } 45376 const { 45377 value, 45378 type 45379 } = position; 45380 return `$value}$type}`; 45381 } 45382 function serializeGradientColorStop({ 45383 type, 45384 value, 45385 length 45386 }) { 45387 return `$serializeGradientColor({ 45388 type, 45389 value 45390 })} $serializeGradientPosition(length)}`; 45391 } 45392 function serializeGradientOrientation(orientation) { 45393 if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') { 45394 return; 45395 } 45396 return `$orientation.value}deg`; 45397 } 45398 function serializeGradient({ 45399 type, 45400 orientation, 45401 colorStops 45402 }) { 45403 const serializedOrientation = serializeGradientOrientation(orientation); 45404 const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => { 45405 const getNumericStopValue = colorStop => { 45406 return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value); 45407 }; 45408 return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2); 45409 }).map(serializeGradientColorStop); 45410 return `$type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`; 45411 } 45412 45413 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js 45414 /** 45415 * External dependencies 45416 */ 45417 45418 45419 45420 45421 /** 45422 * Internal dependencies 45423 */ 45424 45425 45426 k([names]); 45427 function getLinearGradientRepresentation(gradientAST) { 45428 return serializeGradient({ 45429 type: 'linear-gradient', 45430 orientation: HORIZONTAL_GRADIENT_ORIENTATION, 45431 colorStops: gradientAST.colorStops 45432 }); 45433 } 45434 function hasUnsupportedLength(item) { 45435 return item.length === undefined || item.length.type !== '%'; 45436 } 45437 function getGradientAstWithDefault(value) { 45438 // gradientAST will contain the gradient AST as parsed by gradient-parser npm module. 45439 // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast. 45440 let gradientAST; 45441 let hasGradient = !!value; 45442 const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT; 45443 try { 45444 gradientAST = build_node.parse(valueToParse)[0]; 45445 } catch (error) { 45446 // eslint-disable-next-line no-console 45447 console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error); 45448 gradientAST = build_node.parse(DEFAULT_GRADIENT)[0]; 45449 hasGradient = false; 45450 } 45451 if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') { 45452 gradientAST.orientation = { 45453 type: 'angular', 45454 value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString() 45455 }; 45456 } 45457 if (gradientAST.colorStops.some(hasUnsupportedLength)) { 45458 const { 45459 colorStops 45460 } = gradientAST; 45461 const step = 100 / (colorStops.length - 1); 45462 colorStops.forEach((stop, index) => { 45463 stop.length = { 45464 value: `$step * index}`, 45465 type: '%' 45466 }; 45467 }); 45468 } 45469 return { 45470 gradientAST, 45471 hasGradient 45472 }; 45473 } 45474 function getGradientAstWithControlPoints(gradientAST, newControlPoints) { 45475 return { 45476 ...gradientAST, 45477 colorStops: newControlPoints.map(({ 45478 position, 45479 color 45480 }) => { 45481 const { 45482 r, 45483 g, 45484 b, 45485 a 45486 } = w(color).toRgb(); 45487 return { 45488 length: { 45489 type: '%', 45490 value: position?.toString() 45491 }, 45492 type: a < 1 ? 'rgba' : 'rgb', 45493 value: a < 1 ? [`$r}`, `$g}`, `$b}`, `$a}`] : [`$r}`, `$g}`, `$b}`] 45494 }; 45495 }) 45496 }; 45497 } 45498 function getStopCssColor(colorStop) { 45499 switch (colorStop.type) { 45500 case 'hex': 45501 return `#$colorStop.value}`; 45502 case 'literal': 45503 return colorStop.value; 45504 case 'rgb': 45505 case 'rgba': 45506 return `$colorStop.type}($colorStop.value.join(',')})`; 45507 default: 45508 // Should be unreachable if passing an AST from gradient-parser. 45509 // See https://github.com/rafaelcaricio/gradient-parser#ast. 45510 return 'transparent'; 45511 } 45512 } 45513 45514 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js 45515 45516 function custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 45517 /** 45518 * External dependencies 45519 */ 45520 45521 /** 45522 * Internal dependencies 45523 */ 45524 45525 const SelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component, true ? { 45526 target: "e10bzpgi1" 45527 } : 0)( true ? { 45528 name: "1gvx10y", 45529 styles: "flex-grow:5" 45530 } : 0); 45531 const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component, true ? { 45532 target: "e10bzpgi0" 45533 } : 0)( true ? { 45534 name: "1gvx10y", 45535 styles: "flex-grow:5" 45536 } : 0); 45537 45538 ;// ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js 45539 /** 45540 * External dependencies 45541 */ 45542 45543 /** 45544 * WordPress dependencies 45545 */ 45546 45547 45548 /** 45549 * Internal dependencies 45550 */ 45551 45552 45553 45554 45555 45556 45557 45558 45559 45560 45561 const GradientAnglePicker = ({ 45562 gradientAST, 45563 hasGradient, 45564 onChange 45565 }) => { 45566 var _gradientAST$orientat; 45567 const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE; 45568 const onAngleChange = newAngle => { 45569 onChange(serializeGradient({ 45570 ...gradientAST, 45571 orientation: { 45572 type: 'angular', 45573 value: `$newAngle}` 45574 } 45575 })); 45576 }; 45577 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(angle_picker_control, { 45578 onChange: onAngleChange, 45579 value: hasGradient ? angle : '' 45580 }); 45581 }; 45582 const GradientTypePicker = ({ 45583 gradientAST, 45584 hasGradient, 45585 onChange 45586 }) => { 45587 const { 45588 type 45589 } = gradientAST; 45590 const onSetLinearGradient = () => { 45591 onChange(serializeGradient({ 45592 ...gradientAST, 45593 orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION, 45594 type: 'linear-gradient' 45595 })); 45596 }; 45597 const onSetRadialGradient = () => { 45598 const { 45599 orientation, 45600 ...restGradientAST 45601 } = gradientAST; 45602 onChange(serializeGradient({ 45603 ...restGradientAST, 45604 type: 'radial-gradient' 45605 })); 45606 }; 45607 const handleOnChange = next => { 45608 if (next === 'linear-gradient') { 45609 onSetLinearGradient(); 45610 } 45611 if (next === 'radial-gradient') { 45612 onSetRadialGradient(); 45613 } 45614 }; 45615 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { 45616 __nextHasNoMarginBottom: true, 45617 className: "components-custom-gradient-picker__type-picker", 45618 label: (0,external_wp_i18n_namespaceObject.__)('Type'), 45619 labelPosition: "top", 45620 onChange: handleOnChange, 45621 options: GRADIENT_OPTIONS, 45622 size: "__unstable-large", 45623 value: hasGradient ? type : undefined 45624 }); 45625 }; 45626 45627 /** 45628 * CustomGradientPicker is a React component that renders a UI for specifying 45629 * linear or radial gradients. Radial gradients are displayed in the picker as 45630 * a slice of the gradient from the center to the outside. 45631 * 45632 * ```jsx 45633 * import { CustomGradientPicker } from '@wordpress/components'; 45634 * import { useState } from '@wordpress/element'; 45635 * 45636 * const MyCustomGradientPicker = () => { 45637 * const [ gradient, setGradient ] = useState(); 45638 * 45639 * return ( 45640 * <CustomGradientPicker 45641 * value={ gradient } 45642 * onChange={ setGradient } 45643 * /> 45644 * ); 45645 * }; 45646 * ``` 45647 */ 45648 function CustomGradientPicker({ 45649 value, 45650 onChange, 45651 enableAlpha = true, 45652 __experimentalIsRenderedInSidebar = false 45653 }) { 45654 const { 45655 gradientAST, 45656 hasGradient 45657 } = getGradientAstWithDefault(value); 45658 45659 // On radial gradients the bar should display a linear gradient. 45660 // On radial gradients the bar represents a slice of the gradient from the center until the outside. 45661 // On liner gradients the bar represents the color stops from left to right independently of the angle. 45662 const background = getLinearGradientRepresentation(gradientAST); 45663 45664 // Control points color option may be hex from presets, custom colors will be rgb. 45665 // The position should always be a percentage. 45666 const controlPoints = gradientAST.colorStops.map(colorStop => { 45667 return { 45668 color: getStopCssColor(colorStop), 45669 // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`, 45670 // TypeScript doesn't know that `colorStop.length` is not undefined here. 45671 // @ts-expect-error 45672 position: parseInt(colorStop.length.value) 45673 }; 45674 }); 45675 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 45676 spacing: 4, 45677 className: "components-custom-gradient-picker", 45678 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomGradientBar, { 45679 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 45680 disableAlpha: !enableAlpha, 45681 background: background, 45682 hasGradient: hasGradient, 45683 value: controlPoints, 45684 onChange: newControlPoints => { 45685 onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints))); 45686 } 45687 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { 45688 gap: 3, 45689 className: "components-custom-gradient-picker__ui-line", 45690 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectWrapper, { 45691 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientTypePicker, { 45692 gradientAST: gradientAST, 45693 hasGradient: hasGradient, 45694 onChange: onChange 45695 }) 45696 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AccessoryWrapper, { 45697 children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientAnglePicker, { 45698 gradientAST: gradientAST, 45699 hasGradient: hasGradient, 45700 onChange: onChange 45701 }) 45702 })] 45703 })] 45704 }); 45705 } 45706 /* harmony default export */ const custom_gradient_picker = (CustomGradientPicker); 45707 45708 ;// ./node_modules/@wordpress/components/build-module/gradient-picker/index.js 45709 /** 45710 * WordPress dependencies 45711 */ 45712 45713 45714 45715 45716 /** 45717 * Internal dependencies 45718 */ 45719 45720 45721 45722 45723 45724 // The Multiple Origin Gradients have a `gradients` property (an array of 45725 // gradient objects), while Single Origin ones have a `gradient` property. 45726 const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj); 45727 const isMultipleOriginArray = arr => { 45728 return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj)); 45729 }; 45730 function SingleOrigin({ 45731 className, 45732 clearGradient, 45733 gradients, 45734 onChange, 45735 value, 45736 ...additionalProps 45737 }) { 45738 const gradientOptions = (0,external_wp_element_namespaceObject.useMemo)(() => { 45739 return gradients.map(({ 45740 gradient, 45741 name, 45742 slug 45743 }, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { 45744 value: gradient, 45745 isSelected: value === gradient, 45746 tooltipText: name || 45747 // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". 45748 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient), 45749 style: { 45750 color: 'rgba( 0,0,0,0 )', 45751 background: gradient 45752 }, 45753 onClick: value === gradient ? clearGradient : () => onChange(gradient, index), 45754 "aria-label": name ? 45755 // translators: %s: The name of the gradient e.g: "Angular red to blue". 45756 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) : 45757 // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". 45758 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient) 45759 }, slug)); 45760 }, [gradients, value, onChange, clearGradient]); 45761 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.OptionGroup, { 45762 className: className, 45763 options: gradientOptions, 45764 ...additionalProps 45765 }); 45766 } 45767 function MultipleOrigin({ 45768 className, 45769 clearGradient, 45770 gradients, 45771 onChange, 45772 value, 45773 headingLevel 45774 }) { 45775 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultipleOrigin); 45776 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { 45777 spacing: 3, 45778 className: className, 45779 children: gradients.map(({ 45780 name, 45781 gradients: gradientSet 45782 }, index) => { 45783 const id = `color-palette-$instanceId}-$index}`; 45784 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 45785 spacing: 2, 45786 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorHeading, { 45787 level: headingLevel, 45788 id: id, 45789 children: name 45790 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, { 45791 clearGradient: clearGradient, 45792 gradients: gradientSet, 45793 onChange: gradient => onChange(gradient, index), 45794 value: value, 45795 "aria-labelledby": id 45796 })] 45797 }, index); 45798 }) 45799 }); 45800 } 45801 function Component(props) { 45802 const { 45803 asButtons, 45804 loop, 45805 actions, 45806 headingLevel, 45807 'aria-label': ariaLabel, 45808 'aria-labelledby': ariaLabelledby, 45809 ...additionalProps 45810 } = props; 45811 const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultipleOrigin, { 45812 headingLevel: headingLevel, 45813 ...additionalProps 45814 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, { 45815 ...additionalProps 45816 }); 45817 const { 45818 metaProps, 45819 labelProps 45820 } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby); 45821 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, { 45822 ...metaProps, 45823 ...labelProps, 45824 actions: actions, 45825 options: options 45826 }); 45827 } 45828 45829 /** 45830 * GradientPicker is a React component that renders a color gradient picker to 45831 * define a multi step gradient. There's either a _linear_ or a _radial_ type 45832 * available. 45833 * 45834 * ```jsx 45835 * import { useState } from 'react'; 45836 * import { GradientPicker } from '@wordpress/components'; 45837 * 45838 * const MyGradientPicker = () => { 45839 * const [ gradient, setGradient ] = useState( null ); 45840 * 45841 * return ( 45842 * <GradientPicker 45843 * value={ gradient } 45844 * onChange={ ( currentGradient ) => setGradient( currentGradient ) } 45845 * gradients={ [ 45846 * { 45847 * name: 'JShine', 45848 * gradient: 45849 * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)', 45850 * slug: 'jshine', 45851 * }, 45852 * { 45853 * name: 'Moonlit Asteroid', 45854 * gradient: 45855 * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)', 45856 * slug: 'moonlit-asteroid', 45857 * }, 45858 * { 45859 * name: 'Rastafarie', 45860 * gradient: 45861 * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)', 45862 * slug: 'rastafari', 45863 * }, 45864 * ] } 45865 * /> 45866 * ); 45867 * }; 45868 *``` 45869 * 45870 */ 45871 function GradientPicker({ 45872 className, 45873 gradients = [], 45874 onChange, 45875 value, 45876 clearable = true, 45877 enableAlpha = true, 45878 disableCustomGradients = false, 45879 __experimentalIsRenderedInSidebar, 45880 headingLevel = 2, 45881 ...additionalProps 45882 }) { 45883 const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]); 45884 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 45885 spacing: gradients.length ? 4 : 0, 45886 children: [!disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, { 45887 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 45888 enableAlpha: enableAlpha, 45889 value: value, 45890 onChange: onChange 45891 }), (gradients.length > 0 || clearable) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 45892 ...additionalProps, 45893 className: className, 45894 clearGradient: clearGradient, 45895 gradients: gradients, 45896 onChange: onChange, 45897 value: value, 45898 actions: clearable && !disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, { 45899 onClick: clearGradient, 45900 accessibleWhenDisabled: true, 45901 disabled: !value, 45902 children: (0,external_wp_i18n_namespaceObject.__)('Clear') 45903 }), 45904 headingLevel: headingLevel 45905 })] 45906 }); 45907 } 45908 /* harmony default export */ const gradient_picker = (GradientPicker); 45909 45910 ;// ./node_modules/@wordpress/icons/build-module/library/menu.js 45911 /** 45912 * WordPress dependencies 45913 */ 45914 45915 45916 const menu = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 45917 xmlns: "http://www.w3.org/2000/svg", 45918 viewBox: "0 0 24 24", 45919 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 45920 d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" 45921 }) 45922 }); 45923 /* harmony default export */ const library_menu = (menu); 45924 45925 ;// external ["wp","dom"] 45926 const external_wp_dom_namespaceObject = window["wp"]["dom"]; 45927 ;// ./node_modules/@wordpress/components/build-module/navigable-container/container.js 45928 /** 45929 * External dependencies 45930 */ 45931 45932 /** 45933 * WordPress dependencies 45934 */ 45935 45936 45937 45938 /** 45939 * Internal dependencies 45940 */ 45941 45942 const container_noop = () => {}; 45943 const MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox']; 45944 function cycleValue(value, total, offset) { 45945 const nextValue = value + offset; 45946 if (nextValue < 0) { 45947 return total + nextValue; 45948 } else if (nextValue >= total) { 45949 return nextValue - total; 45950 } 45951 return nextValue; 45952 } 45953 class NavigableContainer extends external_wp_element_namespaceObject.Component { 45954 constructor(args) { 45955 super(args); 45956 this.onKeyDown = this.onKeyDown.bind(this); 45957 this.bindContainer = this.bindContainer.bind(this); 45958 this.getFocusableContext = this.getFocusableContext.bind(this); 45959 this.getFocusableIndex = this.getFocusableIndex.bind(this); 45960 } 45961 componentDidMount() { 45962 if (!this.container) { 45963 return; 45964 } 45965 45966 // We use DOM event listeners instead of React event listeners 45967 // because we want to catch events from the underlying DOM tree 45968 // The React Tree can be different from the DOM tree when using 45969 // portals. Block Toolbars for instance are rendered in a separate 45970 // React Trees. 45971 this.container.addEventListener('keydown', this.onKeyDown); 45972 } 45973 componentWillUnmount() { 45974 if (!this.container) { 45975 return; 45976 } 45977 this.container.removeEventListener('keydown', this.onKeyDown); 45978 } 45979 bindContainer(ref) { 45980 const { 45981 forwardedRef 45982 } = this.props; 45983 this.container = ref; 45984 if (typeof forwardedRef === 'function') { 45985 forwardedRef(ref); 45986 } else if (forwardedRef && 'current' in forwardedRef) { 45987 forwardedRef.current = ref; 45988 } 45989 } 45990 getFocusableContext(target) { 45991 if (!this.container) { 45992 return null; 45993 } 45994 const { 45995 onlyBrowserTabstops 45996 } = this.props; 45997 const finder = onlyBrowserTabstops ? external_wp_dom_namespaceObject.focus.tabbable : external_wp_dom_namespaceObject.focus.focusable; 45998 const focusables = finder.find(this.container); 45999 const index = this.getFocusableIndex(focusables, target); 46000 if (index > -1 && target) { 46001 return { 46002 index, 46003 target, 46004 focusables 46005 }; 46006 } 46007 return null; 46008 } 46009 getFocusableIndex(focusables, target) { 46010 return focusables.indexOf(target); 46011 } 46012 onKeyDown(event) { 46013 if (this.props.onKeyDown) { 46014 this.props.onKeyDown(event); 46015 } 46016 const { 46017 getFocusableContext 46018 } = this; 46019 const { 46020 cycle = true, 46021 eventToOffset, 46022 onNavigate = container_noop, 46023 stopNavigationEvents 46024 } = this.props; 46025 const offset = eventToOffset(event); 46026 46027 // eventToOffset returns undefined if the event is not handled by the component. 46028 if (offset !== undefined && stopNavigationEvents) { 46029 // Prevents arrow key handlers bound to the document directly interfering. 46030 event.stopImmediatePropagation(); 46031 46032 // When navigating a collection of items, prevent scroll containers 46033 // from scrolling. The preventDefault also prevents Voiceover from 46034 // 'handling' the event, as voiceover will try to use arrow keys 46035 // for highlighting text. 46036 const targetRole = event.target?.getAttribute('role'); 46037 const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole); 46038 if (targetHasMenuItemRole) { 46039 event.preventDefault(); 46040 } 46041 } 46042 if (!offset) { 46043 return; 46044 } 46045 const activeElement = event.target?.ownerDocument?.activeElement; 46046 if (!activeElement) { 46047 return; 46048 } 46049 const context = getFocusableContext(activeElement); 46050 if (!context) { 46051 return; 46052 } 46053 const { 46054 index, 46055 focusables 46056 } = context; 46057 const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset; 46058 if (nextIndex >= 0 && nextIndex < focusables.length) { 46059 focusables[nextIndex].focus(); 46060 onNavigate(nextIndex, focusables[nextIndex]); 46061 46062 // `preventDefault()` on tab to avoid having the browser move the focus 46063 // after this component has already moved it. 46064 if (event.code === 'Tab') { 46065 event.preventDefault(); 46066 } 46067 } 46068 } 46069 render() { 46070 const { 46071 children, 46072 stopNavigationEvents, 46073 eventToOffset, 46074 onNavigate, 46075 onKeyDown, 46076 cycle, 46077 onlyBrowserTabstops, 46078 forwardedRef, 46079 ...restProps 46080 } = this.props; 46081 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 46082 ref: this.bindContainer, 46083 ...restProps, 46084 children: children 46085 }); 46086 } 46087 } 46088 const forwardedNavigableContainer = (props, ref) => { 46089 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigableContainer, { 46090 ...props, 46091 forwardedRef: ref 46092 }); 46093 }; 46094 forwardedNavigableContainer.displayName = 'NavigableContainer'; 46095 /* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer)); 46096 46097 ;// ./node_modules/@wordpress/components/build-module/navigable-container/menu.js 46098 /** 46099 * External dependencies 46100 */ 46101 46102 /** 46103 * WordPress dependencies 46104 */ 46105 46106 46107 /** 46108 * Internal dependencies 46109 */ 46110 46111 46112 function UnforwardedNavigableMenu({ 46113 role = 'menu', 46114 orientation = 'vertical', 46115 ...rest 46116 }, ref) { 46117 const eventToOffset = evt => { 46118 const { 46119 code 46120 } = evt; 46121 let next = ['ArrowDown']; 46122 let previous = ['ArrowUp']; 46123 if (orientation === 'horizontal') { 46124 next = ['ArrowRight']; 46125 previous = ['ArrowLeft']; 46126 } 46127 if (orientation === 'both') { 46128 next = ['ArrowRight', 'ArrowDown']; 46129 previous = ['ArrowLeft', 'ArrowUp']; 46130 } 46131 if (next.includes(code)) { 46132 return 1; 46133 } else if (previous.includes(code)) { 46134 return -1; 46135 } else if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(code)) { 46136 // Key press should be handled, e.g. have event propagation and 46137 // default behavior handled by NavigableContainer but not result 46138 // in an offset. 46139 return 0; 46140 } 46141 return undefined; 46142 }; 46143 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(container, { 46144 ref: ref, 46145 stopNavigationEvents: true, 46146 onlyBrowserTabstops: false, 46147 role: role, 46148 "aria-orientation": role !== 'presentation' && (orientation === 'vertical' || orientation === 'horizontal') ? orientation : undefined, 46149 eventToOffset: eventToOffset, 46150 ...rest 46151 }); 46152 } 46153 46154 /** 46155 * A container for a navigable menu. 46156 * 46157 * ```jsx 46158 * import { 46159 * NavigableMenu, 46160 * Button, 46161 * } from '@wordpress/components'; 46162 * 46163 * function onNavigate( index, target ) { 46164 * console.log( `Navigates to ${ index }`, target ); 46165 * } 46166 * 46167 * const MyNavigableContainer = () => ( 46168 * <div> 46169 * <span>Navigable Menu:</span> 46170 * <NavigableMenu onNavigate={ onNavigate } orientation="horizontal"> 46171 * <Button variant="secondary">Item 1</Button> 46172 * <Button variant="secondary">Item 2</Button> 46173 * <Button variant="secondary">Item 3</Button> 46174 * </NavigableMenu> 46175 * </div> 46176 * ); 46177 * ``` 46178 */ 46179 const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigableMenu); 46180 /* harmony default export */ const navigable_container_menu = (NavigableMenu); 46181 46182 ;// ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js 46183 /** 46184 * External dependencies 46185 */ 46186 46187 46188 /** 46189 * WordPress dependencies 46190 */ 46191 46192 46193 /** 46194 * Internal dependencies 46195 */ 46196 46197 46198 46199 46200 46201 function dropdown_menu_mergeProps(defaultProps = {}, props = {}) { 46202 const mergedProps = { 46203 ...defaultProps, 46204 ...props 46205 }; 46206 if (props.className && defaultProps.className) { 46207 mergedProps.className = dist_clsx(props.className, defaultProps.className); 46208 } 46209 return mergedProps; 46210 } 46211 function dropdown_menu_isFunction(maybeFunc) { 46212 return typeof maybeFunc === 'function'; 46213 } 46214 function UnconnectedDropdownMenu(dropdownMenuProps) { 46215 const { 46216 children, 46217 className, 46218 controls, 46219 icon = library_menu, 46220 label, 46221 popoverProps, 46222 toggleProps, 46223 menuProps, 46224 disableOpenOnArrowDown = false, 46225 text, 46226 noIcons, 46227 open, 46228 defaultOpen, 46229 onToggle: onToggleProp, 46230 // Context 46231 variant 46232 } = useContextSystem(dropdownMenuProps, 'DropdownMenu'); 46233 if (!controls?.length && !dropdown_menu_isFunction(children)) { 46234 return null; 46235 } 46236 46237 // Normalize controls to nested array of objects (sets of controls) 46238 let controlSets; 46239 if (controls?.length) { 46240 // @ts-expect-error The check below is needed because `DropdownMenus` 46241 // rendered by `ToolBarGroup` receive controls as a nested array. 46242 controlSets = controls; 46243 if (!Array.isArray(controlSets[0])) { 46244 // This is not ideal, but at this point we know that `controls` is 46245 // not a nested array, even if TypeScript doesn't. 46246 controlSets = [controls]; 46247 } 46248 } 46249 const mergedPopoverProps = dropdown_menu_mergeProps({ 46250 className: 'components-dropdown-menu__popover', 46251 variant 46252 }, popoverProps); 46253 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { 46254 className: className, 46255 popoverProps: mergedPopoverProps, 46256 renderToggle: ({ 46257 isOpen, 46258 onToggle 46259 }) => { 46260 var _toggleProps$showTool; 46261 const openOnArrowDown = event => { 46262 if (disableOpenOnArrowDown) { 46263 return; 46264 } 46265 if (!isOpen && event.code === 'ArrowDown') { 46266 event.preventDefault(); 46267 onToggle(); 46268 } 46269 }; 46270 const { 46271 as: Toggle = build_module_button, 46272 ...restToggleProps 46273 } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {}; 46274 const mergedToggleProps = dropdown_menu_mergeProps({ 46275 className: dist_clsx('components-dropdown-menu__toggle', { 46276 'is-opened': isOpen 46277 }) 46278 }, restToggleProps); 46279 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Toggle, { 46280 ...mergedToggleProps, 46281 icon: icon, 46282 onClick: event => { 46283 onToggle(); 46284 if (mergedToggleProps.onClick) { 46285 mergedToggleProps.onClick(event); 46286 } 46287 }, 46288 onKeyDown: event => { 46289 openOnArrowDown(event); 46290 if (mergedToggleProps.onKeyDown) { 46291 mergedToggleProps.onKeyDown(event); 46292 } 46293 }, 46294 "aria-haspopup": "true", 46295 "aria-expanded": isOpen, 46296 label: label, 46297 text: text, 46298 showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true, 46299 children: mergedToggleProps.children 46300 }); 46301 }, 46302 renderContent: props => { 46303 const mergedMenuProps = dropdown_menu_mergeProps({ 46304 'aria-label': label, 46305 className: dist_clsx('components-dropdown-menu__menu', { 46306 'no-icons': noIcons 46307 }) 46308 }, menuProps); 46309 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, { 46310 ...mergedMenuProps, 46311 role: "menu", 46312 children: [dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 46313 __next40pxDefaultSize: true, 46314 onClick: event => { 46315 event.stopPropagation(); 46316 props.onClose(); 46317 if (control.onClick) { 46318 control.onClick(); 46319 } 46320 }, 46321 className: dist_clsx('components-dropdown-menu__menu-item', { 46322 'has-separator': indexOfSet > 0 && indexOfControl === 0, 46323 'is-active': control.isActive, 46324 'is-icon-only': !control.title 46325 }), 46326 icon: control.icon, 46327 label: control.label, 46328 "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined, 46329 role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem', 46330 accessibleWhenDisabled: true, 46331 disabled: control.isDisabled, 46332 children: control.title 46333 }, [indexOfSet, indexOfControl].join())))] 46334 }); 46335 }, 46336 open: open, 46337 defaultOpen: defaultOpen, 46338 onToggle: onToggleProp 46339 }); 46340 } 46341 46342 /** 46343 * 46344 * The DropdownMenu displays a list of actions (each contained in a MenuItem, 46345 * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover 46346 * after the user has interacted with an element (a button or icon) or when 46347 * they perform a specific action. 46348 * 46349 * Render a Dropdown Menu with a set of controls: 46350 * 46351 * ```jsx 46352 * import { DropdownMenu } from '@wordpress/components'; 46353 * import { 46354 * more, 46355 * arrowLeft, 46356 * arrowRight, 46357 * arrowUp, 46358 * arrowDown, 46359 * } from '@wordpress/icons'; 46360 * 46361 * const MyDropdownMenu = () => ( 46362 * <DropdownMenu 46363 * icon={ more } 46364 * label="Select a direction" 46365 * controls={ [ 46366 * { 46367 * title: 'Up', 46368 * icon: arrowUp, 46369 * onClick: () => console.log( 'up' ), 46370 * }, 46371 * { 46372 * title: 'Right', 46373 * icon: arrowRight, 46374 * onClick: () => console.log( 'right' ), 46375 * }, 46376 * { 46377 * title: 'Down', 46378 * icon: arrowDown, 46379 * onClick: () => console.log( 'down' ), 46380 * }, 46381 * { 46382 * title: 'Left', 46383 * icon: arrowLeft, 46384 * onClick: () => console.log( 'left' ), 46385 * }, 46386 * ] } 46387 * /> 46388 * ); 46389 * ``` 46390 * 46391 * Alternatively, specify a `children` function which returns elements valid for 46392 * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. 46393 * 46394 * ```jsx 46395 * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; 46396 * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons'; 46397 * 46398 * const MyDropdownMenu = () => ( 46399 * <DropdownMenu icon={ more } label="Select a direction"> 46400 * { ( { onClose } ) => ( 46401 * <> 46402 * <MenuGroup> 46403 * <MenuItem icon={ arrowUp } onClick={ onClose }> 46404 * Move Up 46405 * </MenuItem> 46406 * <MenuItem icon={ arrowDown } onClick={ onClose }> 46407 * Move Down 46408 * </MenuItem> 46409 * </MenuGroup> 46410 * <MenuGroup> 46411 * <MenuItem icon={ trash } onClick={ onClose }> 46412 * Remove 46413 * </MenuItem> 46414 * </MenuGroup> 46415 * </> 46416 * ) } 46417 * </DropdownMenu> 46418 * ); 46419 * ``` 46420 * 46421 */ 46422 const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu'); 46423 /* harmony default export */ const dropdown_menu = (DropdownMenu); 46424 46425 ;// ./node_modules/@wordpress/components/build-module/palette-edit/styles.js 46426 46427 function palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 46428 /** 46429 * External dependencies 46430 */ 46431 46432 /** 46433 * Internal dependencies 46434 */ 46435 46436 46437 46438 46439 46440 46441 46442 46443 const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(color_indicator, true ? { 46444 target: "e1lpqc908" 46445 } : 0)("&&{flex-shrink:0;width:", space(6), ";height:", space(6), ";}" + ( true ? "" : 0)); 46446 const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 46447 target: "e1lpqc907" 46448 } : 0)(Container, "{background:", COLORS.gray[100], ";border-radius:", config_values.radiusXSmall, ";", Input, Input, Input, Input, "{height:", space(8), ";}", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;box-shadow:none;}}" + ( true ? "" : 0)); 46449 const NameContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 46450 target: "e1lpqc906" 46451 } : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;" + ( true ? "" : 0)); 46452 const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 46453 target: "e1lpqc905" 46454 } : 0)("text-transform:uppercase;line-height:", space(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + ( true ? "" : 0)); 46455 const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 46456 target: "e1lpqc904" 46457 } : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0)); 46458 const PaletteEditContents = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 46459 target: "e1lpqc903" 46460 } : 0)("margin-top:", space(2), ";" + ( true ? "" : 0)); 46461 const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 46462 target: "e1lpqc902" 46463 } : 0)( true ? { 46464 name: "u6wnko", 46465 styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}" 46466 } : 0); 46467 const DoneButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 46468 target: "e1lpqc901" 46469 } : 0)("&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0)); 46470 const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 46471 target: "e1lpqc900" 46472 } : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0)); 46473 46474 ;// ./node_modules/@wordpress/components/build-module/palette-edit/index.js 46475 /** 46476 * External dependencies 46477 */ 46478 46479 46480 /** 46481 * WordPress dependencies 46482 */ 46483 46484 46485 46486 46487 46488 /** 46489 * Internal dependencies 46490 */ 46491 46492 46493 46494 46495 46496 46497 46498 46499 46500 46501 46502 46503 46504 46505 46506 46507 const DEFAULT_COLOR = '#000'; 46508 function NameInput({ 46509 value, 46510 onChange, 46511 label 46512 }) { 46513 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInputControl, { 46514 size: "compact", 46515 label: label, 46516 hideLabelFromVision: true, 46517 value: value, 46518 onChange: onChange 46519 }); 46520 } 46521 46522 /* 46523 * Deduplicates the slugs of the provided elements. 46524 */ 46525 function deduplicateElementSlugs(elements) { 46526 const slugCounts = {}; 46527 return elements.map(element => { 46528 var _newSlug; 46529 let newSlug; 46530 const { 46531 slug 46532 } = element; 46533 slugCounts[slug] = (slugCounts[slug] || 0) + 1; 46534 if (slugCounts[slug] > 1) { 46535 newSlug = `$slug}-$slugCounts[slug] - 1}`; 46536 } 46537 return { 46538 ...element, 46539 slug: (_newSlug = newSlug) !== null && _newSlug !== void 0 ? _newSlug : slug 46540 }; 46541 }); 46542 } 46543 46544 /** 46545 * Returns a name and slug for a palette item. The name takes the format "Color + id". 46546 * To ensure there are no duplicate ids, this function checks all slugs. 46547 * It expects slugs to be in the format: slugPrefix + color- + number. 46548 * It then sets the id component of the new name based on the incremented id of the highest existing slug id. 46549 * 46550 * @param elements An array of color palette items. 46551 * @param slugPrefix The slug prefix used to match the element slug. 46552 * 46553 * @return A name and slug for the new palette item. 46554 */ 46555 function getNameAndSlugForPosition(elements, slugPrefix) { 46556 const nameRegex = new RegExp(`^$slugPrefix}color-([\\d]+)$`); 46557 const position = elements.reduce((previousValue, currentValue) => { 46558 if (typeof currentValue?.slug === 'string') { 46559 const matches = currentValue?.slug.match(nameRegex); 46560 if (matches) { 46561 const id = parseInt(matches[1], 10); 46562 if (id >= previousValue) { 46563 return id + 1; 46564 } 46565 } 46566 } 46567 return previousValue; 46568 }, 1); 46569 return { 46570 name: (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %s: is an id for a custom color */ 46571 (0,external_wp_i18n_namespaceObject.__)('Color %s'), position), 46572 slug: `$slugPrefix}color-$position}` 46573 }; 46574 } 46575 function ColorPickerPopover({ 46576 isGradient, 46577 element, 46578 onChange, 46579 popoverProps: receivedPopoverProps, 46580 onClose = () => {} 46581 }) { 46582 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 46583 shift: true, 46584 offset: 20, 46585 // Disabling resize as it would otherwise cause the popover to show 46586 // scrollbars while dragging the color picker's handle close to the 46587 // popover edge. 46588 resize: false, 46589 placement: 'left-start', 46590 ...receivedPopoverProps, 46591 className: dist_clsx('components-palette-edit__popover', receivedPopoverProps?.className) 46592 }), [receivedPopoverProps]); 46593 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(popover, { 46594 ...popoverProps, 46595 onClose: onClose, 46596 children: [!isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { 46597 color: element.color, 46598 enableAlpha: true, 46599 onChange: newColor => { 46600 onChange({ 46601 ...element, 46602 color: newColor 46603 }); 46604 } 46605 }), isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 46606 className: "components-palette-edit__popover-gradient-picker", 46607 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, { 46608 __experimentalIsRenderedInSidebar: true, 46609 value: element.gradient, 46610 onChange: newGradient => { 46611 onChange({ 46612 ...element, 46613 gradient: newGradient 46614 }); 46615 } 46616 }) 46617 })] 46618 }); 46619 } 46620 function palette_edit_Option({ 46621 canOnlyChangeValues, 46622 element, 46623 onChange, 46624 onRemove, 46625 popoverProps: receivedPopoverProps, 46626 slugPrefix, 46627 isGradient 46628 }) { 46629 const value = isGradient ? element.gradient : element.color; 46630 const [isEditingColor, setIsEditingColor] = (0,external_wp_element_namespaceObject.useState)(false); 46631 46632 // Use internal state instead of a ref to make sure that the component 46633 // re-renders when the popover's anchor updates. 46634 const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 46635 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 46636 ...receivedPopoverProps, 46637 // Use the custom palette color item as the popover anchor. 46638 anchor: popoverAnchor 46639 }), [popoverAnchor, receivedPopoverProps]); 46640 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(item_component, { 46641 ref: setPopoverAnchor, 46642 size: "small", 46643 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 46644 justify: "flex-start", 46645 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 46646 size: "small", 46647 onClick: () => { 46648 setIsEditingColor(true); 46649 }, 46650 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( 46651 // translators: %s is a color or gradient name, e.g. "Red". 46652 (0,external_wp_i18n_namespaceObject.__)('Edit: %s'), element.name.trim().length ? element.name : value), 46653 style: { 46654 padding: 0 46655 }, 46656 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(IndicatorStyled, { 46657 colorValue: value 46658 }) 46659 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 46660 children: !canOnlyChangeValues ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInput, { 46661 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'), 46662 value: element.name, 46663 onChange: nextName => onChange({ 46664 ...element, 46665 name: nextName, 46666 slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '') 46667 }) 46668 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameContainer, { 46669 children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */ 46670 '\u00A0' 46671 }) 46672 }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 46673 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RemoveButton, { 46674 size: "small", 46675 icon: line_solid, 46676 label: (0,external_wp_i18n_namespaceObject.sprintf)( 46677 // translators: %s is a color or gradient name, e.g. "Red". 46678 (0,external_wp_i18n_namespaceObject.__)('Remove color: %s'), element.name.trim().length ? element.name : value), 46679 onClick: onRemove 46680 }) 46681 })] 46682 }), isEditingColor && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, { 46683 isGradient: isGradient, 46684 onChange: onChange, 46685 element: element, 46686 popoverProps: popoverProps, 46687 onClose: () => setIsEditingColor(false) 46688 })] 46689 }); 46690 } 46691 function PaletteEditListView({ 46692 elements, 46693 onChange, 46694 canOnlyChangeValues, 46695 slugPrefix, 46696 isGradient, 46697 popoverProps, 46698 addColorRef 46699 }) { 46700 // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them. 46701 const elementsReferenceRef = (0,external_wp_element_namespaceObject.useRef)(); 46702 (0,external_wp_element_namespaceObject.useEffect)(() => { 46703 elementsReferenceRef.current = elements; 46704 }, [elements]); 46705 const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100); 46706 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { 46707 spacing: 3, 46708 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_group_component, { 46709 isRounded: true, 46710 isBordered: true, 46711 isSeparated: true, 46712 children: elements.map((element, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(palette_edit_Option, { 46713 isGradient: isGradient, 46714 canOnlyChangeValues: canOnlyChangeValues, 46715 element: element, 46716 onChange: newElement => { 46717 debounceOnChange(elements.map((currentElement, currentIndex) => { 46718 if (currentIndex === index) { 46719 return newElement; 46720 } 46721 return currentElement; 46722 })); 46723 }, 46724 onRemove: () => { 46725 const newElements = elements.filter((_currentElement, currentIndex) => { 46726 if (currentIndex === index) { 46727 return false; 46728 } 46729 return true; 46730 }); 46731 onChange(newElements.length ? newElements : undefined); 46732 addColorRef.current?.focus(); 46733 }, 46734 slugPrefix: slugPrefix, 46735 popoverProps: popoverProps 46736 }, index)) 46737 }) 46738 }); 46739 } 46740 const EMPTY_ARRAY = []; 46741 46742 /** 46743 * Allows editing a palette of colors or gradients. 46744 * 46745 * ```jsx 46746 * import { PaletteEdit } from '@wordpress/components'; 46747 * const MyPaletteEdit = () => { 46748 * const [ controlledColors, setControlledColors ] = useState( colors ); 46749 * 46750 * return ( 46751 * <PaletteEdit 46752 * colors={ controlledColors } 46753 * onChange={ ( newColors?: Color[] ) => { 46754 * setControlledColors( newColors ); 46755 * } } 46756 * paletteLabel="Here is a label" 46757 * /> 46758 * ); 46759 * }; 46760 * ``` 46761 */ 46762 function PaletteEdit({ 46763 gradients, 46764 colors = EMPTY_ARRAY, 46765 onChange, 46766 paletteLabel, 46767 paletteLabelHeadingLevel = 2, 46768 emptyMessage, 46769 canOnlyChangeValues, 46770 canReset, 46771 slugPrefix = '', 46772 popoverProps 46773 }) { 46774 const isGradient = !!gradients; 46775 const elements = isGradient ? gradients : colors; 46776 const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false); 46777 const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null); 46778 const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug; 46779 const elementsLength = elements.length; 46780 const hasElements = elementsLength > 0; 46781 const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100); 46782 const onSelectPaletteItem = (0,external_wp_element_namespaceObject.useCallback)((value, newEditingElementIndex) => { 46783 const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex]; 46784 const key = isGradient ? 'gradient' : 'color'; 46785 // Ensures that the index returned matches a known element value. 46786 if (!!selectedElement && selectedElement[key] === value) { 46787 setEditingElement(newEditingElementIndex); 46788 } else { 46789 setIsEditing(true); 46790 } 46791 }, [isGradient, elements]); 46792 const addColorRef = (0,external_wp_element_namespaceObject.useRef)(null); 46793 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditStyles, { 46794 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 46795 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteHeading, { 46796 level: paletteLabelHeadingLevel, 46797 children: paletteLabel 46798 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteActionsContainer, { 46799 children: [hasElements && isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DoneButton, { 46800 size: "small", 46801 onClick: () => { 46802 setIsEditing(false); 46803 setEditingElement(null); 46804 }, 46805 children: (0,external_wp_i18n_namespaceObject.__)('Done') 46806 }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 46807 ref: addColorRef, 46808 size: "small", 46809 isPressed: isAdding, 46810 icon: library_plus, 46811 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'), 46812 onClick: () => { 46813 const { 46814 name, 46815 slug 46816 } = getNameAndSlugForPosition(elements, slugPrefix); 46817 if (!!gradients) { 46818 onChange([...gradients, { 46819 gradient: DEFAULT_GRADIENT, 46820 name, 46821 slug 46822 }]); 46823 } else { 46824 onChange([...colors, { 46825 color: DEFAULT_COLOR, 46826 name, 46827 slug 46828 }]); 46829 } 46830 setIsEditing(true); 46831 setEditingElement(elements.length); 46832 } 46833 }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { 46834 icon: more_vertical, 46835 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'), 46836 toggleProps: { 46837 size: 'small' 46838 }, 46839 children: ({ 46840 onClose 46841 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 46842 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, { 46843 role: "menu", 46844 children: [!isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 46845 __next40pxDefaultSize: true, 46846 variant: "tertiary", 46847 onClick: () => { 46848 setIsEditing(true); 46849 onClose(); 46850 }, 46851 className: "components-palette-edit__menu-button", 46852 children: (0,external_wp_i18n_namespaceObject.__)('Show details') 46853 }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 46854 __next40pxDefaultSize: true, 46855 variant: "tertiary", 46856 onClick: () => { 46857 setEditingElement(null); 46858 setIsEditing(false); 46859 onChange(); 46860 onClose(); 46861 }, 46862 className: "components-palette-edit__menu-button", 46863 children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors') 46864 }), canReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 46865 __next40pxDefaultSize: true, 46866 className: "components-palette-edit__menu-button", 46867 variant: "tertiary", 46868 onClick: () => { 46869 setEditingElement(null); 46870 onChange(); 46871 onClose(); 46872 }, 46873 children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors') 46874 })] 46875 }) 46876 }) 46877 })] 46878 })] 46879 }), hasElements && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditContents, { 46880 children: [isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditListView, { 46881 canOnlyChangeValues: canOnlyChangeValues, 46882 elements: elements 46883 // @ts-expect-error TODO: Don't know how to resolve 46884 , 46885 onChange: onChange, 46886 slugPrefix: slugPrefix, 46887 isGradient: isGradient, 46888 popoverProps: popoverProps, 46889 addColorRef: addColorRef 46890 }), !isEditing && editingElement !== null && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, { 46891 isGradient: isGradient, 46892 onClose: () => setEditingElement(null), 46893 onChange: newElement => { 46894 debounceOnChange( 46895 // @ts-expect-error TODO: Don't know how to resolve 46896 elements.map((currentElement, currentIndex) => { 46897 if (currentIndex === editingElement) { 46898 return newElement; 46899 } 46900 return currentElement; 46901 })); 46902 }, 46903 element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1], 46904 popoverProps: popoverProps 46905 }), !isEditing && (isGradient ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker, { 46906 gradients: gradients, 46907 onChange: onSelectPaletteItem, 46908 clearable: false, 46909 disableCustomGradients: true 46910 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, { 46911 colors: colors, 46912 onChange: onSelectPaletteItem, 46913 clearable: false, 46914 disableCustomColors: true 46915 }))] 46916 }), !hasElements && emptyMessage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditContents, { 46917 children: emptyMessage 46918 })] 46919 }); 46920 } 46921 /* harmony default export */ const palette_edit = (PaletteEdit); 46922 46923 ;// ./node_modules/@wordpress/icons/build-module/library/close-small.js 46924 /** 46925 * WordPress dependencies 46926 */ 46927 46928 46929 const closeSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 46930 xmlns: "http://www.w3.org/2000/svg", 46931 viewBox: "0 0 24 24", 46932 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 46933 d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z" 46934 }) 46935 }); 46936 /* harmony default export */ const close_small = (closeSmall); 46937 46938 ;// ./node_modules/@wordpress/components/build-module/combobox-control/styles.js 46939 46940 /** 46941 * External dependencies 46942 */ 46943 46944 46945 46946 /** 46947 * Internal dependencies 46948 */ 46949 46950 46951 const deprecatedDefaultSize = ({ 46952 __next40pxDefaultSize 46953 }) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + ( true ? "" : 0), true ? "" : 0); 46954 const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 46955 target: "evuatpg0" 46956 } : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0)); 46957 46958 ;// ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js 46959 /** 46960 * External dependencies 46961 */ 46962 46963 /** 46964 * WordPress dependencies 46965 */ 46966 46967 46968 /** 46969 * Internal dependencies 46970 */ 46971 46972 function UnForwardedTokenInput(props, ref) { 46973 const { 46974 value, 46975 isExpanded, 46976 instanceId, 46977 selectedSuggestionIndex, 46978 className, 46979 onChange, 46980 onFocus, 46981 onBlur, 46982 ...restProps 46983 } = props; 46984 const [hasFocus, setHasFocus] = (0,external_wp_element_namespaceObject.useState)(false); 46985 const size = value ? value.length + 1 : 0; 46986 const onChangeHandler = event => { 46987 if (onChange) { 46988 onChange({ 46989 value: event.target.value 46990 }); 46991 } 46992 }; 46993 const onFocusHandler = e => { 46994 setHasFocus(true); 46995 onFocus?.(e); 46996 }; 46997 const onBlurHandler = e => { 46998 setHasFocus(false); 46999 onBlur?.(e); 47000 }; 47001 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { 47002 ref: ref, 47003 id: `components-form-token-input-$instanceId}`, 47004 type: "text", 47005 ...restProps, 47006 value: value || '', 47007 onChange: onChangeHandler, 47008 onFocus: onFocusHandler, 47009 onBlur: onBlurHandler, 47010 size: size, 47011 className: dist_clsx(className, 'components-form-token-field__input'), 47012 autoComplete: "off", 47013 role: "combobox", 47014 "aria-expanded": isExpanded, 47015 "aria-autocomplete": "list", 47016 "aria-owns": isExpanded ? `components-form-token-suggestions-$instanceId}` : undefined, 47017 "aria-activedescendant": 47018 // Only add the `aria-activedescendant` attribute when: 47019 // - the user is actively interacting with the input (`hasFocus`) 47020 // - there is a selected suggestion (`selectedSuggestionIndex !== -1`) 47021 // - the list of suggestions are rendered in the DOM (`isExpanded`) 47022 hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-$instanceId}-$selectedSuggestionIndex}` : undefined, 47023 "aria-describedby": `components-form-token-suggestions-howto-$instanceId}` 47024 }); 47025 } 47026 const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput); 47027 /* harmony default export */ const token_input = (TokenInput); 47028 47029 ;// ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js 47030 /** 47031 * External dependencies 47032 */ 47033 47034 /** 47035 * WordPress dependencies 47036 */ 47037 47038 47039 47040 /** 47041 * Internal dependencies 47042 */ 47043 47044 const handleMouseDown = e => { 47045 // By preventing default here, we will not lose focus of <input> when clicking a suggestion. 47046 e.preventDefault(); 47047 }; 47048 function SuggestionsList({ 47049 selectedIndex, 47050 scrollIntoView, 47051 match, 47052 onHover, 47053 onSelect, 47054 suggestions = [], 47055 displayTransform, 47056 instanceId, 47057 __experimentalRenderItem 47058 }) { 47059 const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => { 47060 // only have to worry about scrolling selected suggestion into view 47061 // when already expanded. 47062 let rafId; 47063 if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) { 47064 listNode.children[selectedIndex].scrollIntoView({ 47065 behavior: 'instant', 47066 block: 'nearest', 47067 inline: 'nearest' 47068 }); 47069 } 47070 return () => { 47071 if (rafId !== undefined) { 47072 cancelAnimationFrame(rafId); 47073 } 47074 }; 47075 }, [selectedIndex, scrollIntoView]); 47076 const handleHover = suggestion => { 47077 return () => { 47078 onHover?.(suggestion); 47079 }; 47080 }; 47081 const handleClick = suggestion => { 47082 return () => { 47083 onSelect?.(suggestion); 47084 }; 47085 }; 47086 const computeSuggestionMatch = suggestion => { 47087 const matchText = displayTransform(match).toLocaleLowerCase(); 47088 if (matchText.length === 0) { 47089 return null; 47090 } 47091 const transformedSuggestion = displayTransform(suggestion); 47092 const indexOfMatch = transformedSuggestion.toLocaleLowerCase().indexOf(matchText); 47093 return { 47094 suggestionBeforeMatch: transformedSuggestion.substring(0, indexOfMatch), 47095 suggestionMatch: transformedSuggestion.substring(indexOfMatch, indexOfMatch + matchText.length), 47096 suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length) 47097 }; 47098 }; 47099 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("ul", { 47100 ref: listRef, 47101 className: "components-form-token-field__suggestions-list", 47102 id: `components-form-token-suggestions-$instanceId}`, 47103 role: "listbox", 47104 children: [suggestions.map((suggestion, index) => { 47105 const matchText = computeSuggestionMatch(suggestion); 47106 const isSelected = index === selectedIndex; 47107 const isDisabled = typeof suggestion === 'object' && suggestion?.disabled; 47108 const key = typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion); 47109 const className = dist_clsx('components-form-token-field__suggestion', { 47110 'is-selected': isSelected 47111 }); 47112 let output; 47113 if (typeof __experimentalRenderItem === 'function') { 47114 output = __experimentalRenderItem({ 47115 item: suggestion 47116 }); 47117 } else if (matchText) { 47118 output = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 47119 "aria-label": displayTransform(suggestion), 47120 children: [matchText.suggestionBeforeMatch, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", { 47121 className: "components-form-token-field__suggestion-match", 47122 children: matchText.suggestionMatch 47123 }), matchText.suggestionAfterMatch] 47124 }); 47125 } else { 47126 output = displayTransform(suggestion); 47127 } 47128 47129 /* eslint-disable jsx-a11y/click-events-have-key-events */ 47130 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", { 47131 id: `components-form-token-suggestions-$instanceId}-$index}`, 47132 role: "option", 47133 className: className, 47134 onMouseDown: handleMouseDown, 47135 onClick: handleClick(suggestion), 47136 onMouseEnter: handleHover(suggestion), 47137 "aria-selected": index === selectedIndex, 47138 "aria-disabled": isDisabled, 47139 children: output 47140 }, key); 47141 /* eslint-enable jsx-a11y/click-events-have-key-events */ 47142 }), suggestions.length === 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", { 47143 className: "components-form-token-field__suggestion is-empty", 47144 children: (0,external_wp_i18n_namespaceObject.__)('No items found') 47145 })] 47146 }); 47147 } 47148 /* harmony default export */ const suggestions_list = (SuggestionsList); 47149 47150 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js 47151 /** 47152 * WordPress dependencies 47153 */ 47154 47155 47156 47157 /* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => { 47158 const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined); 47159 const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []); 47160 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 47161 ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside), 47162 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { 47163 ref: bindFocusOutsideHandler, 47164 ...props 47165 }) 47166 }); 47167 }, 'withFocusOutside')); 47168 47169 ;// ./node_modules/@wordpress/components/build-module/spinner/styles.js 47170 47171 function spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 47172 /** 47173 * External dependencies 47174 */ 47175 47176 47177 47178 /** 47179 * Internal dependencies 47180 */ 47181 47182 const spinAnimation = emotion_react_browser_esm_keyframes` 47183 from { 47184 transform: rotate(0deg); 47185 } 47186 to { 47187 transform: rotate(360deg); 47188 } 47189 `; 47190 const StyledSpinner = /*#__PURE__*/emotion_styled_base_browser_esm("svg", true ? { 47191 target: "ea4tfvq2" 47192 } : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.theme.accent, ";overflow:visible;opacity:1;background-color:transparent;" + ( true ? "" : 0)); 47193 const commonPathProps = true ? { 47194 name: "9s4963", 47195 styles: "fill:transparent;stroke-width:1.5px" 47196 } : 0; 47197 const SpinnerTrack = /*#__PURE__*/emotion_styled_base_browser_esm("circle", true ? { 47198 target: "ea4tfvq1" 47199 } : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0)); 47200 const SpinnerIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("path", true ? { 47201 target: "ea4tfvq0" 47202 } : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0)); 47203 47204 ;// ./node_modules/@wordpress/components/build-module/spinner/index.js 47205 /** 47206 * External dependencies 47207 */ 47208 47209 /** 47210 * Internal dependencies 47211 */ 47212 47213 /** 47214 * WordPress dependencies 47215 */ 47216 47217 47218 function UnforwardedSpinner({ 47219 className, 47220 ...props 47221 }, forwardedRef) { 47222 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledSpinner, { 47223 className: dist_clsx('components-spinner', className), 47224 viewBox: "0 0 100 100", 47225 width: "16", 47226 height: "16", 47227 xmlns: "http://www.w3.org/2000/svg", 47228 role: "presentation", 47229 focusable: "false", 47230 ...props, 47231 ref: forwardedRef, 47232 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerTrack, { 47233 cx: "50", 47234 cy: "50", 47235 r: "50", 47236 vectorEffect: "non-scaling-stroke" 47237 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerIndicator, { 47238 d: "m 50 0 a 50 50 0 0 1 50 50", 47239 vectorEffect: "non-scaling-stroke" 47240 })] 47241 }); 47242 } 47243 /** 47244 * `Spinner` is a component used to notify users that their action is being processed. 47245 * 47246 * ```js 47247 * import { Spinner } from '@wordpress/components'; 47248 * 47249 * function Example() { 47250 * return <Spinner />; 47251 * } 47252 * ``` 47253 */ 47254 const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSpinner); 47255 /* harmony default export */ const spinner = (Spinner); 47256 47257 ;// ./node_modules/@wordpress/components/build-module/combobox-control/index.js 47258 /** 47259 * External dependencies 47260 */ 47261 47262 47263 /** 47264 * WordPress dependencies 47265 */ 47266 47267 47268 47269 47270 47271 47272 /** 47273 * Internal dependencies 47274 */ 47275 47276 47277 47278 47279 47280 47281 47282 47283 47284 47285 47286 47287 47288 47289 const combobox_control_noop = () => {}; 47290 const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component { 47291 handleFocusOutside(event) { 47292 this.props.onFocusOutside(event); 47293 } 47294 render() { 47295 return this.props.children; 47296 } 47297 }); 47298 const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion); 47299 47300 /** 47301 * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of 47302 * being able to search for options using a search input. 47303 * 47304 * ```jsx 47305 * import { ComboboxControl } from '@wordpress/components'; 47306 * import { useState } from '@wordpress/element'; 47307 * 47308 * const options = [ 47309 * { 47310 * value: 'small', 47311 * label: 'Small', 47312 * }, 47313 * { 47314 * value: 'normal', 47315 * label: 'Normal', 47316 * disabled: true, 47317 * }, 47318 * { 47319 * value: 'large', 47320 * label: 'Large', 47321 * disabled: false, 47322 * }, 47323 * ]; 47324 * 47325 * function MyComboboxControl() { 47326 * const [ fontSize, setFontSize ] = useState(); 47327 * const [ filteredOptions, setFilteredOptions ] = useState( options ); 47328 * return ( 47329 * <ComboboxControl 47330 * __next40pxDefaultSize 47331 * __nextHasNoMarginBottom 47332 * label="Font Size" 47333 * value={ fontSize } 47334 * onChange={ setFontSize } 47335 * options={ filteredOptions } 47336 * onFilterValueChange={ ( inputValue ) => 47337 * setFilteredOptions( 47338 * options.filter( ( option ) => 47339 * option.label 47340 * .toLowerCase() 47341 * .startsWith( inputValue.toLowerCase() ) 47342 * ) 47343 * ) 47344 * } 47345 * /> 47346 * ); 47347 * } 47348 * ``` 47349 */ 47350 function ComboboxControl(props) { 47351 var _currentOption$label; 47352 const { 47353 __nextHasNoMarginBottom = false, 47354 __next40pxDefaultSize = false, 47355 value: valueProp, 47356 label, 47357 options, 47358 onChange: onChangeProp, 47359 onFilterValueChange = combobox_control_noop, 47360 hideLabelFromVision, 47361 help, 47362 allowReset = true, 47363 className, 47364 isLoading = false, 47365 messages = { 47366 selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.') 47367 }, 47368 __experimentalRenderItem, 47369 expandOnFocus = true, 47370 placeholder 47371 } = useDeprecated36pxDefaultSizeProp(props); 47372 const [value, setValue] = useControlledValue({ 47373 value: valueProp, 47374 onChange: onChangeProp 47375 }); 47376 const currentOption = options.find(option => option.value === value); 47377 const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : ''; 47378 // Use a custom prefix when generating the `instanceId` to avoid having 47379 // duplicate input IDs when rendering this component and `FormTokenField` 47380 // in the same page (see https://github.com/WordPress/gutenberg/issues/42112). 47381 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ComboboxControl, 'combobox-control'); 47382 const [selectedSuggestion, setSelectedSuggestion] = (0,external_wp_element_namespaceObject.useState)(currentOption || null); 47383 const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false); 47384 const [inputHasFocus, setInputHasFocus] = (0,external_wp_element_namespaceObject.useState)(false); 47385 const [inputValue, setInputValue] = (0,external_wp_element_namespaceObject.useState)(''); 47386 const inputContainer = (0,external_wp_element_namespaceObject.useRef)(null); 47387 const matchingSuggestions = (0,external_wp_element_namespaceObject.useMemo)(() => { 47388 const startsWithMatch = []; 47389 const containsMatch = []; 47390 const match = normalizeTextString(inputValue); 47391 options.forEach(option => { 47392 const index = normalizeTextString(option.label).indexOf(match); 47393 if (index === 0) { 47394 startsWithMatch.push(option); 47395 } else if (index > 0) { 47396 containsMatch.push(option); 47397 } 47398 }); 47399 return startsWithMatch.concat(containsMatch); 47400 }, [inputValue, options]); 47401 const onSuggestionSelected = newSelectedSuggestion => { 47402 if (newSelectedSuggestion.disabled) { 47403 return; 47404 } 47405 setValue(newSelectedSuggestion.value); 47406 (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive'); 47407 setSelectedSuggestion(newSelectedSuggestion); 47408 setInputValue(''); 47409 setIsExpanded(false); 47410 }; 47411 const handleArrowNavigation = (offset = 1) => { 47412 const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions); 47413 let nextIndex = index + offset; 47414 if (nextIndex < 0) { 47415 nextIndex = matchingSuggestions.length - 1; 47416 } else if (nextIndex >= matchingSuggestions.length) { 47417 nextIndex = 0; 47418 } 47419 setSelectedSuggestion(matchingSuggestions[nextIndex]); 47420 setIsExpanded(true); 47421 }; 47422 const onKeyDown = withIgnoreIMEEvents(event => { 47423 let preventDefault = false; 47424 if (event.defaultPrevented) { 47425 return; 47426 } 47427 switch (event.code) { 47428 case 'Enter': 47429 if (selectedSuggestion) { 47430 onSuggestionSelected(selectedSuggestion); 47431 preventDefault = true; 47432 } 47433 break; 47434 case 'ArrowUp': 47435 handleArrowNavigation(-1); 47436 preventDefault = true; 47437 break; 47438 case 'ArrowDown': 47439 handleArrowNavigation(1); 47440 preventDefault = true; 47441 break; 47442 case 'Escape': 47443 setIsExpanded(false); 47444 setSelectedSuggestion(null); 47445 preventDefault = true; 47446 break; 47447 default: 47448 break; 47449 } 47450 if (preventDefault) { 47451 event.preventDefault(); 47452 } 47453 }); 47454 const onBlur = () => { 47455 setInputHasFocus(false); 47456 }; 47457 const onFocus = () => { 47458 setInputHasFocus(true); 47459 if (expandOnFocus) { 47460 setIsExpanded(true); 47461 } 47462 onFilterValueChange(''); 47463 setInputValue(''); 47464 }; 47465 const onClick = () => { 47466 setIsExpanded(true); 47467 }; 47468 const onFocusOutside = () => { 47469 setIsExpanded(false); 47470 }; 47471 const onInputChange = event => { 47472 const text = event.value; 47473 setInputValue(text); 47474 onFilterValueChange(text); 47475 if (inputHasFocus) { 47476 setIsExpanded(true); 47477 } 47478 }; 47479 const handleOnReset = () => { 47480 setValue(null); 47481 inputContainer.current?.focus(); 47482 }; 47483 47484 // Stop propagation of the keydown event when pressing Enter on the Reset 47485 // button to prevent calling the onKeydown callback on the container div 47486 // element which actually sets the selected suggestion. 47487 const handleResetStopPropagation = event => { 47488 event.stopPropagation(); 47489 }; 47490 47491 // Update current selections when the filter input changes. 47492 (0,external_wp_element_namespaceObject.useEffect)(() => { 47493 const hasMatchingSuggestions = matchingSuggestions.length > 0; 47494 const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0; 47495 if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) { 47496 // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions. 47497 setSelectedSuggestion(matchingSuggestions[0]); 47498 } 47499 }, [matchingSuggestions, selectedSuggestion]); 47500 47501 // Announcements. 47502 (0,external_wp_element_namespaceObject.useEffect)(() => { 47503 const hasMatchingSuggestions = matchingSuggestions.length > 0; 47504 if (isExpanded) { 47505 const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */ 47506 (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.'); 47507 (0,external_wp_a11y_namespaceObject.speak)(message, 'polite'); 47508 } 47509 }, [matchingSuggestions, isExpanded]); 47510 maybeWarnDeprecated36pxSize({ 47511 componentName: 'ComboboxControl', 47512 __next40pxDefaultSize, 47513 size: undefined 47514 }); 47515 47516 // Disable reason: There is no appropriate role which describes the 47517 // input container intended accessible usability. 47518 // TODO: Refactor click detection to use blur to stop propagation. 47519 /* eslint-disable jsx-a11y/no-static-element-interactions */ 47520 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DetectOutside, { 47521 onFocusOutside: onFocusOutside, 47522 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 47523 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 47524 __associatedWPComponentName: "ComboboxControl", 47525 className: dist_clsx(className, 'components-combobox-control'), 47526 label: label, 47527 id: `components-form-token-input-$instanceId}`, 47528 hideLabelFromVision: hideLabelFromVision, 47529 help: help, 47530 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 47531 className: "components-combobox-control__suggestions-container", 47532 tabIndex: -1, 47533 onKeyDown: onKeyDown, 47534 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapperFlex, { 47535 __next40pxDefaultSize: __next40pxDefaultSize, 47536 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, { 47537 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(token_input, { 47538 className: "components-combobox-control__input", 47539 instanceId: instanceId, 47540 ref: inputContainer, 47541 placeholder: placeholder, 47542 value: isExpanded ? inputValue : currentLabel, 47543 onFocus: onFocus, 47544 onBlur: onBlur, 47545 onClick: onClick, 47546 isExpanded: isExpanded, 47547 selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), 47548 onChange: onInputChange 47549 }) 47550 }), isLoading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spinner, {}), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 47551 size: "small", 47552 icon: close_small 47553 // Disable reason: Focus returns to input field when reset is clicked. 47554 // eslint-disable-next-line no-restricted-syntax 47555 , 47556 disabled: !value, 47557 onClick: handleOnReset, 47558 onKeyDown: handleResetStopPropagation, 47559 label: (0,external_wp_i18n_namespaceObject.__)('Reset') 47560 })] 47561 }), isExpanded && !isLoading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, { 47562 instanceId: instanceId 47563 // The empty string for `value` here is not actually used, but is 47564 // just a quick way to satisfy the TypeScript requirements of SuggestionsList. 47565 // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330 47566 , 47567 match: { 47568 label: inputValue, 47569 value: '' 47570 }, 47571 displayTransform: suggestion => suggestion.label, 47572 suggestions: matchingSuggestions, 47573 selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), 47574 onHover: setSelectedSuggestion, 47575 onSelect: onSuggestionSelected, 47576 scrollIntoView: true, 47577 __experimentalRenderItem: __experimentalRenderItem 47578 })] 47579 }) 47580 }) 47581 }); 47582 /* eslint-enable jsx-a11y/no-static-element-interactions */ 47583 } 47584 /* harmony default export */ const combobox_control = (ComboboxControl); 47585 47586 ;// ./node_modules/@wordpress/components/build-module/composite/legacy/index.js 47587 /** 47588 * Composite is a component that may contain navigable items represented by 47589 * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements 47590 * all the keyboard navigation mechanisms to ensure that there's only one 47591 * tab stop for the whole Composite element. This means that it can behave as 47592 * a roving tabindex or aria-activedescendant container. 47593 * 47594 * This file aims at providing components that are as close as possible to the 47595 * original `reakit`-based implementation (which was removed from the codebase), 47596 * although it is recommended that consumers of the package switch to the stable, 47597 * un-prefixed, `ariakit`-based version of `Composite`. 47598 * 47599 * @see https://ariakit.org/components/composite 47600 */ 47601 47602 /** 47603 * External dependencies 47604 */ 47605 47606 47607 /** 47608 * WordPress dependencies 47609 */ 47610 47611 47612 47613 47614 /** 47615 * Internal dependencies 47616 */ 47617 47618 47619 // Legacy composite components can either provide state through a 47620 // single `state` prop, or via individual props, usually through 47621 // spreading the state generated by `useCompositeState`. 47622 // That is, `<Composite* { ...state }>`. 47623 47624 function mapLegacyStatePropsToComponentProps(legacyProps) { 47625 // If a `state` prop is provided, we unpack that; otherwise, 47626 // the necessary props are provided directly in `legacyProps`. 47627 if (legacyProps.state) { 47628 const { 47629 state, 47630 ...rest 47631 } = legacyProps; 47632 const { 47633 store, 47634 ...props 47635 } = mapLegacyStatePropsToComponentProps(state); 47636 return { 47637 ...rest, 47638 ...props, 47639 store 47640 }; 47641 } 47642 return legacyProps; 47643 } 47644 const LEGACY_TO_NEW_DISPLAY_NAME = { 47645 __unstableComposite: 'Composite', 47646 __unstableCompositeGroup: 'Composite.Group or Composite.Row', 47647 __unstableCompositeItem: 'Composite.Item', 47648 __unstableUseCompositeState: 'Composite' 47649 }; 47650 function proxyComposite(ProxiedComponent, propMap = {}) { 47651 var _ProxiedComponent$dis; 47652 const displayName = (_ProxiedComponent$dis = ProxiedComponent.displayName) !== null && _ProxiedComponent$dis !== void 0 ? _ProxiedComponent$dis : ''; 47653 const Component = legacyProps => { 47654 external_wp_deprecated_default()(`wp.components.$displayName}`, { 47655 since: '6.7', 47656 alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(displayName) ? LEGACY_TO_NEW_DISPLAY_NAME[displayName] : undefined 47657 }); 47658 const { 47659 store, 47660 ...rest 47661 } = mapLegacyStatePropsToComponentProps(legacyProps); 47662 let props = rest; 47663 props = { 47664 ...props, 47665 id: (0,external_wp_compose_namespaceObject.useInstanceId)(store, props.baseId, props.id) 47666 }; 47667 Object.entries(propMap).forEach(([from, to]) => { 47668 if (props.hasOwnProperty(from)) { 47669 Object.assign(props, { 47670 [to]: props[from] 47671 }); 47672 delete props[from]; 47673 } 47674 }); 47675 delete props.baseId; 47676 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ProxiedComponent, { 47677 ...props, 47678 store: store 47679 }); 47680 }; 47681 Component.displayName = displayName; 47682 return Component; 47683 } 47684 47685 // The old `CompositeGroup` used to behave more like the current 47686 // `CompositeRow`, but this has been split into two different 47687 // components. We handle that difference by checking on the 47688 // provided role, and returning the appropriate component. 47689 const UnproxiedCompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(({ 47690 role, 47691 ...props 47692 }, ref) => { 47693 const Component = role === 'row' ? Composite.Row : Composite.Group; 47694 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 47695 ref: ref, 47696 role: role, 47697 ...props 47698 }); 47699 }); 47700 47701 /** 47702 * _Note: please use the `Composite` component instead._ 47703 * 47704 * @deprecated 47705 */ 47706 const legacy_Composite = proxyComposite(Object.assign(Composite, { 47707 displayName: '__unstableComposite' 47708 }), { 47709 baseId: 'id' 47710 }); 47711 /** 47712 * _Note: please use the `Composite.Row` or `Composite.Group` components instead._ 47713 * 47714 * @deprecated 47715 */ 47716 const legacy_CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, { 47717 displayName: '__unstableCompositeGroup' 47718 })); 47719 /** 47720 * _Note: please use the `Composite.Item` component instead._ 47721 * 47722 * @deprecated 47723 */ 47724 const legacy_CompositeItem = proxyComposite(Object.assign(Composite.Item, { 47725 displayName: '__unstableCompositeItem' 47726 }), { 47727 focusable: 'accessibleWhenDisabled' 47728 }); 47729 47730 /** 47731 * _Note: please use the `Composite` component instead._ 47732 * 47733 * @deprecated 47734 */ 47735 function useCompositeState(legacyStateOptions = {}) { 47736 external_wp_deprecated_default()(`wp.components.__unstableUseCompositeState`, { 47737 since: '6.7', 47738 alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState 47739 }); 47740 const { 47741 baseId, 47742 currentId: defaultActiveId, 47743 orientation, 47744 rtl = false, 47745 loop: focusLoop = false, 47746 wrap: focusWrap = false, 47747 shift: focusShift = false, 47748 // eslint-disable-next-line camelcase 47749 unstable_virtual: virtualFocus 47750 } = legacyStateOptions; 47751 return { 47752 baseId: (0,external_wp_compose_namespaceObject.useInstanceId)(legacy_Composite, 'composite', baseId), 47753 store: useCompositeStore({ 47754 defaultActiveId, 47755 rtl, 47756 orientation, 47757 focusLoop, 47758 focusShift, 47759 focusWrap, 47760 virtualFocus 47761 }) 47762 }; 47763 } 47764 47765 ;// ./node_modules/@wordpress/components/build-module/modal/aria-helper.js 47766 const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']); 47767 const hiddenElementsByDepth = []; 47768 47769 /** 47770 * Hides all elements in the body element from screen-readers except 47771 * the provided element and elements that should not be hidden from 47772 * screen-readers. 47773 * 47774 * The reason we do this is because `aria-modal="true"` currently is bugged 47775 * in Safari, and support is spotty in other browsers overall. In the future 47776 * we should consider removing these helper functions in favor of 47777 * `aria-modal="true"`. 47778 * 47779 * @param modalElement The element that should not be hidden. 47780 */ 47781 function modalize(modalElement) { 47782 const elements = Array.from(document.body.children); 47783 const hiddenElements = []; 47784 hiddenElementsByDepth.push(hiddenElements); 47785 for (const element of elements) { 47786 if (element === modalElement) { 47787 continue; 47788 } 47789 if (elementShouldBeHidden(element)) { 47790 element.setAttribute('aria-hidden', 'true'); 47791 hiddenElements.push(element); 47792 } 47793 } 47794 } 47795 47796 /** 47797 * Determines if the passed element should not be hidden from screen readers. 47798 * 47799 * @param element The element that should be checked. 47800 * 47801 * @return Whether the element should not be hidden from screen-readers. 47802 */ 47803 function elementShouldBeHidden(element) { 47804 const role = element.getAttribute('role'); 47805 return !(element.tagName === 'SCRIPT' || element.hasAttribute('hidden') || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role)); 47806 } 47807 47808 /** 47809 * Accessibly reveals the elements hidden by the latest modal. 47810 */ 47811 function unmodalize() { 47812 const hiddenElements = hiddenElementsByDepth.pop(); 47813 if (!hiddenElements) { 47814 return; 47815 } 47816 for (const element of hiddenElements) { 47817 element.removeAttribute('aria-hidden'); 47818 } 47819 } 47820 47821 ;// ./node_modules/@wordpress/components/build-module/modal/use-modal-exit-animation.js 47822 /** 47823 * WordPress dependencies 47824 */ 47825 47826 47827 47828 /** 47829 * Internal dependencies 47830 */ 47831 47832 47833 47834 // Animation duration (ms) extracted to JS in order to be used on a setTimeout. 47835 const FRAME_ANIMATION_DURATION = config_values.transitionDuration; 47836 const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(config_values.transitionDuration); 47837 const EXIT_ANIMATION_NAME = 'components-modal__disappear-animation'; 47838 function useModalExitAnimation() { 47839 const frameRef = (0,external_wp_element_namespaceObject.useRef)(); 47840 const [isAnimatingOut, setIsAnimatingOut] = (0,external_wp_element_namespaceObject.useState)(false); 47841 const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 47842 const closeModal = (0,external_wp_element_namespaceObject.useCallback)(() => new Promise(closeModalResolve => { 47843 // Grab a "stable" reference of the frame element, since 47844 // the value held by the react ref might change at runtime. 47845 const frameEl = frameRef.current; 47846 if (isReducedMotion) { 47847 closeModalResolve(); 47848 return; 47849 } 47850 if (!frameEl) { 47851 true ? external_wp_warning_default()("wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element.") : 0; 47852 closeModalResolve(); 47853 return; 47854 } 47855 let handleAnimationEnd; 47856 const startAnimation = () => new Promise(animationResolve => { 47857 handleAnimationEnd = e => { 47858 if (e.animationName === EXIT_ANIMATION_NAME) { 47859 animationResolve(); 47860 } 47861 }; 47862 frameEl.addEventListener('animationend', handleAnimationEnd); 47863 setIsAnimatingOut(true); 47864 }); 47865 const animationTimeout = () => new Promise(timeoutResolve => { 47866 setTimeout(() => timeoutResolve(), 47867 // Allow an extra 20% of the animation duration for the 47868 // animationend event to fire, in case the animation frame is 47869 // slightly delayes by some other events in the event loop. 47870 FRAME_ANIMATION_DURATION_NUMBER * 1.2); 47871 }); 47872 Promise.race([startAnimation(), animationTimeout()]).then(() => { 47873 if (handleAnimationEnd) { 47874 frameEl.removeEventListener('animationend', handleAnimationEnd); 47875 } 47876 setIsAnimatingOut(false); 47877 closeModalResolve(); 47878 }); 47879 }), [isReducedMotion]); 47880 return { 47881 overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined, 47882 frameRef, 47883 frameStyle: { 47884 '--modal-frame-animation-duration': `$FRAME_ANIMATION_DURATION}` 47885 }, 47886 closeModal 47887 }; 47888 } 47889 47890 ;// ./node_modules/@wordpress/components/build-module/modal/index.js 47891 /** 47892 * External dependencies 47893 */ 47894 47895 47896 /** 47897 * WordPress dependencies 47898 */ 47899 47900 47901 47902 47903 47904 47905 /** 47906 * Internal dependencies 47907 */ 47908 47909 47910 47911 47912 47913 47914 47915 // Used to track and dismiss the prior modal when another opens unless nested. 47916 47917 const ModalContext = (0,external_wp_element_namespaceObject.createContext)(new Set()); 47918 47919 // Used to track body class names applied while modals are open. 47920 const bodyOpenClasses = new Map(); 47921 function UnforwardedModal(props, forwardedRef) { 47922 const { 47923 bodyOpenClassName = 'modal-open', 47924 role = 'dialog', 47925 title = null, 47926 focusOnMount = true, 47927 shouldCloseOnEsc = true, 47928 shouldCloseOnClickOutside = true, 47929 isDismissible = true, 47930 /* Accessibility. */ 47931 aria = { 47932 labelledby: undefined, 47933 describedby: undefined 47934 }, 47935 onRequestClose, 47936 icon, 47937 closeButtonLabel, 47938 children, 47939 style, 47940 overlayClassName: overlayClassnameProp, 47941 className, 47942 contentLabel, 47943 onKeyDown, 47944 isFullScreen = false, 47945 size, 47946 headerActions = null, 47947 __experimentalHideHeader = false 47948 } = props; 47949 const ref = (0,external_wp_element_namespaceObject.useRef)(); 47950 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal); 47951 const headingId = title ? `components-modal-header-$instanceId}` : aria.labelledby; 47952 47953 // The focus hook does not support 'firstContentElement' but this is a valid 47954 // value for the Modal's focusOnMount prop. The following code ensures the focus 47955 // hook will focus the first focusable node within the element to which it is applied. 47956 // When `firstContentElement` is passed as the value of the focusOnMount prop, 47957 // the focus hook is applied to the Modal's content element. 47958 // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the 47959 // focus hook will focus the first element in the Modal's **content** when 47960 // `firstContentElement` is passed. 47961 const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount); 47962 const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); 47963 const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)(); 47964 const contentRef = (0,external_wp_element_namespaceObject.useRef)(null); 47965 const childrenContainerRef = (0,external_wp_element_namespaceObject.useRef)(null); 47966 const [hasScrolledContent, setHasScrolledContent] = (0,external_wp_element_namespaceObject.useState)(false); 47967 const [hasScrollableContent, setHasScrollableContent] = (0,external_wp_element_namespaceObject.useState)(false); 47968 let sizeClass; 47969 if (isFullScreen || size === 'fill') { 47970 sizeClass = 'is-full-screen'; 47971 } else if (size) { 47972 sizeClass = `has-size-$size}`; 47973 } 47974 47975 // Determines whether the Modal content is scrollable and updates the state. 47976 const isContentScrollable = (0,external_wp_element_namespaceObject.useCallback)(() => { 47977 if (!contentRef.current) { 47978 return; 47979 } 47980 const closestScrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(contentRef.current); 47981 if (contentRef.current === closestScrollContainer) { 47982 setHasScrollableContent(true); 47983 } else { 47984 setHasScrollableContent(false); 47985 } 47986 }, [contentRef]); 47987 47988 // Accessibly isolates/unisolates the modal. 47989 (0,external_wp_element_namespaceObject.useEffect)(() => { 47990 modalize(ref.current); 47991 return () => unmodalize(); 47992 }, []); 47993 47994 // Keeps a fresh ref for the subsequent effect. 47995 const onRequestCloseRef = (0,external_wp_element_namespaceObject.useRef)(); 47996 (0,external_wp_element_namespaceObject.useEffect)(() => { 47997 onRequestCloseRef.current = onRequestClose; 47998 }, [onRequestClose]); 47999 48000 // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only 48001 // one should remain open at a time and the list enables closing prior ones. 48002 const dismissers = (0,external_wp_element_namespaceObject.useContext)(ModalContext); 48003 // Used for the tracking and dismissing any nested modals. 48004 const [nestedDismissers] = (0,external_wp_element_namespaceObject.useState)(() => new Set()); 48005 48006 // Updates the stack tracking open modals at this level and calls 48007 // onRequestClose for any prior and/or nested modals as applicable. 48008 (0,external_wp_element_namespaceObject.useEffect)(() => { 48009 // add this modal instance to the dismissers set 48010 dismissers.add(onRequestCloseRef); 48011 // request that all the other modals close themselves 48012 for (const dismisser of dismissers) { 48013 if (dismisser !== onRequestCloseRef) { 48014 dismisser.current?.(); 48015 } 48016 } 48017 return () => { 48018 // request that all the nested modals close themselves 48019 for (const dismisser of nestedDismissers) { 48020 dismisser.current?.(); 48021 } 48022 // remove this modal instance from the dismissers set 48023 dismissers.delete(onRequestCloseRef); 48024 }; 48025 }, [dismissers, nestedDismissers]); 48026 48027 // Adds/removes the value of bodyOpenClassName to body element. 48028 (0,external_wp_element_namespaceObject.useEffect)(() => { 48029 var _bodyOpenClasses$get; 48030 const theClass = bodyOpenClassName; 48031 const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0); 48032 bodyOpenClasses.set(theClass, oneMore); 48033 document.body.classList.add(bodyOpenClassName); 48034 return () => { 48035 const oneLess = bodyOpenClasses.get(theClass) - 1; 48036 if (oneLess === 0) { 48037 document.body.classList.remove(theClass); 48038 bodyOpenClasses.delete(theClass); 48039 } else { 48040 bodyOpenClasses.set(theClass, oneLess); 48041 } 48042 }; 48043 }, [bodyOpenClassName]); 48044 const { 48045 closeModal, 48046 frameRef, 48047 frameStyle, 48048 overlayClassname 48049 } = useModalExitAnimation(); 48050 48051 // Calls the isContentScrollable callback when the Modal children container resizes. 48052 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 48053 if (!window.ResizeObserver || !childrenContainerRef.current) { 48054 return; 48055 } 48056 const resizeObserver = new ResizeObserver(isContentScrollable); 48057 resizeObserver.observe(childrenContainerRef.current); 48058 isContentScrollable(); 48059 return () => { 48060 resizeObserver.disconnect(); 48061 }; 48062 }, [isContentScrollable, childrenContainerRef]); 48063 function handleEscapeKeyDown(event) { 48064 if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) { 48065 event.preventDefault(); 48066 closeModal().then(() => onRequestClose(event)); 48067 } 48068 } 48069 const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => { 48070 var _e$currentTarget$scro; 48071 const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1; 48072 if (!hasScrolledContent && scrollY > 0) { 48073 setHasScrolledContent(true); 48074 } else if (hasScrolledContent && scrollY <= 0) { 48075 setHasScrolledContent(false); 48076 } 48077 }, [hasScrolledContent]); 48078 let pressTarget = null; 48079 const overlayPressHandlers = { 48080 onPointerDown: event => { 48081 if (event.target === event.currentTarget) { 48082 pressTarget = event.target; 48083 // Avoids focus changing so that focus return works as expected. 48084 event.preventDefault(); 48085 } 48086 }, 48087 // Closes the modal with two exceptions. 1. Opening the context menu on 48088 // the overlay. 2. Pressing on the overlay then dragging the pointer 48089 // over the modal and releasing. Due to the modal being a child of the 48090 // overlay, such a gesture is a `click` on the overlay and cannot be 48091 // excepted by a `click` handler. Thus the tactic of handling 48092 // `pointerup` and comparing its target to that of the `pointerdown`. 48093 onPointerUp: ({ 48094 target, 48095 button 48096 }) => { 48097 const isSameTarget = target === pressTarget; 48098 pressTarget = null; 48099 if (button === 0 && isSameTarget) { 48100 closeModal().then(() => onRequestClose()); 48101 } 48102 } 48103 }; 48104 const modal = 48105 /*#__PURE__*/ 48106 // eslint-disable-next-line jsx-a11y/no-static-element-interactions 48107 (0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 48108 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]), 48109 className: dist_clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp), 48110 onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown), 48111 ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}), 48112 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, { 48113 document: document, 48114 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 48115 className: dist_clsx('components-modal__frame', sizeClass, className), 48116 style: { 48117 ...frameStyle, 48118 ...style 48119 }, 48120 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]), 48121 role: role, 48122 "aria-label": contentLabel, 48123 "aria-labelledby": contentLabel ? undefined : headingId, 48124 "aria-describedby": aria.describedby, 48125 tabIndex: -1, 48126 onKeyDown: onKeyDown, 48127 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 48128 className: dist_clsx('components-modal__content', { 48129 'hide-header': __experimentalHideHeader, 48130 'is-scrollable': hasScrollableContent, 48131 'has-scrolled-content': hasScrolledContent 48132 }), 48133 role: "document", 48134 onScroll: onContentContainerScroll, 48135 ref: contentRef, 48136 "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined, 48137 tabIndex: hasScrollableContent ? 0 : undefined, 48138 children: [!__experimentalHideHeader && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 48139 className: "components-modal__header", 48140 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 48141 className: "components-modal__header-heading-container", 48142 children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 48143 className: "components-modal__icon-container", 48144 "aria-hidden": true, 48145 children: icon 48146 }), title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h1", { 48147 id: headingId, 48148 className: "components-modal__header-heading", 48149 children: title 48150 })] 48151 }), headerActions, isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 48152 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 48153 marginBottom: 0, 48154 marginLeft: 2 48155 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 48156 size: "compact", 48157 onClick: event => closeModal().then(() => onRequestClose(event)), 48158 icon: library_close, 48159 label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close') 48160 })] 48161 })] 48162 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 48163 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]), 48164 children: children 48165 })] 48166 }) 48167 }) 48168 }) 48169 }); 48170 return (0,external_wp_element_namespaceObject.createPortal)(/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModalContext.Provider, { 48171 value: nestedDismissers, 48172 children: modal 48173 }), document.body); 48174 } 48175 48176 /** 48177 * Modals give users information and choices related to a task they’re trying to 48178 * accomplish. They can contain critical information, require decisions, or 48179 * involve multiple tasks. 48180 * 48181 * ```jsx 48182 * import { Button, Modal } from '@wordpress/components'; 48183 * import { useState } from '@wordpress/element'; 48184 * 48185 * const MyModal = () => { 48186 * const [ isOpen, setOpen ] = useState( false ); 48187 * const openModal = () => setOpen( true ); 48188 * const closeModal = () => setOpen( false ); 48189 * 48190 * return ( 48191 * <> 48192 * <Button variant="secondary" onClick={ openModal }> 48193 * Open Modal 48194 * </Button> 48195 * { isOpen && ( 48196 * <Modal title="This is my modal" onRequestClose={ closeModal }> 48197 * <Button variant="secondary" onClick={ closeModal }> 48198 * My custom close button 48199 * </Button> 48200 * </Modal> 48201 * ) } 48202 * </> 48203 * ); 48204 * }; 48205 * ``` 48206 */ 48207 const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal); 48208 /* harmony default export */ const modal = (Modal); 48209 48210 ;// ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js 48211 function confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 48212 /** 48213 * External dependencies 48214 */ 48215 48216 48217 /** 48218 * The z-index for ConfirmDialog is being set here instead of in 48219 * packages/base-styles/_z-index.scss, because this component uses 48220 * emotion instead of sass. 48221 * 48222 * ConfirmDialog needs this higher z-index to ensure it renders on top of 48223 * any parent Popover component. 48224 */ 48225 const styles_wrapper = true ? { 48226 name: "7g5ii0", 48227 styles: "&&{z-index:1000001;}" 48228 } : 0; 48229 48230 ;// ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js 48231 /** 48232 * WordPress dependencies 48233 */ 48234 48235 48236 48237 /** 48238 * Internal dependencies 48239 */ 48240 48241 48242 48243 48244 48245 48246 48247 48248 48249 const UnconnectedConfirmDialog = (props, forwardedRef) => { 48250 const { 48251 isOpen: isOpenProp, 48252 onConfirm, 48253 onCancel, 48254 children, 48255 confirmButtonText, 48256 cancelButtonText, 48257 ...otherProps 48258 } = useContextSystem(props, 'ConfirmDialog'); 48259 const cx = useCx(); 48260 const wrapperClassName = cx(styles_wrapper); 48261 const cancelButtonRef = (0,external_wp_element_namespaceObject.useRef)(); 48262 const confirmButtonRef = (0,external_wp_element_namespaceObject.useRef)(); 48263 const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(); 48264 const [shouldSelfClose, setShouldSelfClose] = (0,external_wp_element_namespaceObject.useState)(); 48265 (0,external_wp_element_namespaceObject.useEffect)(() => { 48266 // We only allow the dialog to close itself if `isOpenProp` is *not* set. 48267 // If `isOpenProp` is set, then it (probably) means it's controlled by a 48268 // parent component. In that case, `shouldSelfClose` might do more harm than 48269 // good, so we disable it. 48270 const isIsOpenSet = typeof isOpenProp !== 'undefined'; 48271 setIsOpen(isIsOpenSet ? isOpenProp : true); 48272 setShouldSelfClose(!isIsOpenSet); 48273 }, [isOpenProp]); 48274 const handleEvent = (0,external_wp_element_namespaceObject.useCallback)(callback => event => { 48275 callback?.(event); 48276 if (shouldSelfClose) { 48277 setIsOpen(false); 48278 } 48279 }, [shouldSelfClose, setIsOpen]); 48280 const handleEnter = (0,external_wp_element_namespaceObject.useCallback)(event => { 48281 // Avoid triggering the 'confirm' action when a button is focused, 48282 // as this can cause a double submission. 48283 const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current; 48284 if (!isConfirmOrCancelButton && event.key === 'Enter') { 48285 handleEvent(onConfirm)(event); 48286 } 48287 }, [handleEvent, onConfirm]); 48288 const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel'); 48289 const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK'); 48290 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 48291 children: isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(modal, { 48292 onRequestClose: handleEvent(onCancel), 48293 onKeyDown: handleEnter, 48294 closeButtonLabel: cancelLabel, 48295 isDismissible: true, 48296 ref: forwardedRef, 48297 overlayClassName: wrapperClassName, 48298 __experimentalHideHeader: true, 48299 ...otherProps, 48300 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 48301 spacing: 8, 48302 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, { 48303 children: children 48304 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { 48305 direction: "row", 48306 justify: "flex-end", 48307 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 48308 __next40pxDefaultSize: true, 48309 ref: cancelButtonRef, 48310 variant: "tertiary", 48311 onClick: handleEvent(onCancel), 48312 children: cancelLabel 48313 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 48314 __next40pxDefaultSize: true, 48315 ref: confirmButtonRef, 48316 variant: "primary", 48317 onClick: handleEvent(onConfirm), 48318 children: confirmLabel 48319 })] 48320 })] 48321 }) 48322 }) 48323 }); 48324 }; 48325 48326 /** 48327 * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) 48328 * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons. 48329 * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. 48330 * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by 48331 * clicking outside the dialog focus (i.e, the overlay). 48332 * 48333 * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled. 48334 * 48335 * UnControlled: 48336 * 48337 * Allows the component to be used standalone, just by declaring it as part of another React's component render method: 48338 * - It will be automatically open (displayed) upon mounting; 48339 * - It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay); 48340 * - `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself. 48341 * 48342 * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like: 48343 * 48344 * ```jsx 48345 * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components'; 48346 * 48347 * function Example() { 48348 * return ( 48349 * <ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }> 48350 * Are you sure? <strong>This action cannot be undone!</strong> 48351 * </ConfirmDialog> 48352 * ); 48353 * } 48354 * ``` 48355 * 48356 * 48357 * Controlled mode: 48358 * Let the parent component control when the dialog is open/closed. It's activated when a 48359 * boolean value is passed to `isOpen`: 48360 * - It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop; 48361 * - Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode; 48362 * - You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks. 48363 * 48364 *```jsx 48365 * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components'; 48366 * import { useState } from '@wordpress/element'; 48367 * 48368 * function Example() { 48369 * const [ isOpen, setIsOpen ] = useState( true ); 48370 * 48371 * const handleConfirm = () => { 48372 * console.debug( 'Confirmed!' ); 48373 * setIsOpen( false ); 48374 * }; 48375 * 48376 * const handleCancel = () => { 48377 * console.debug( 'Cancelled!' ); 48378 * setIsOpen( false ); 48379 * }; 48380 * 48381 * return ( 48382 * <ConfirmDialog 48383 * isOpen={ isOpen } 48384 * onConfirm={ handleConfirm } 48385 * onCancel={ handleCancel } 48386 * > 48387 * Are you sure? <strong>This action cannot be undone!</strong> 48388 * </ConfirmDialog> 48389 * ); 48390 * } 48391 * ``` 48392 */ 48393 const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog'); 48394 /* harmony default export */ const confirm_dialog_component = (ConfirmDialog); 48395 48396 ;// ./node_modules/@ariakit/react-core/esm/__chunks/VEVQD5MH.js 48397 "use client"; 48398 48399 48400 48401 48402 // src/combobox/combobox-context.tsx 48403 48404 var ComboboxListRoleContext = (0,external_React_.createContext)( 48405 void 0 48406 ); 48407 var VEVQD5MH_ctx = createStoreContext( 48408 [PopoverContextProvider, CompositeContextProvider], 48409 [PopoverScopedContextProvider, CompositeScopedContextProvider] 48410 ); 48411 var useComboboxContext = VEVQD5MH_ctx.useContext; 48412 var useComboboxScopedContext = VEVQD5MH_ctx.useScopedContext; 48413 var useComboboxProviderContext = VEVQD5MH_ctx.useProviderContext; 48414 var ComboboxContextProvider = VEVQD5MH_ctx.ContextProvider; 48415 var ComboboxScopedContextProvider = VEVQD5MH_ctx.ScopedContextProvider; 48416 var ComboboxItemValueContext = (0,external_React_.createContext)( 48417 void 0 48418 ); 48419 var ComboboxItemCheckedContext = (0,external_React_.createContext)(false); 48420 48421 48422 48423 ;// ./node_modules/@ariakit/core/esm/select/select-store.js 48424 "use client"; 48425 48426 48427 48428 48429 48430 48431 48432 48433 48434 48435 48436 // src/select/select-store.ts 48437 function createSelectStore(_a = {}) { 48438 var _b = _a, { 48439 combobox 48440 } = _b, props = _3YLGPPWQ_objRest(_b, [ 48441 "combobox" 48442 ]); 48443 const store = mergeStore( 48444 props.store, 48445 omit2(combobox, [ 48446 "value", 48447 "items", 48448 "renderedItems", 48449 "baseElement", 48450 "arrowElement", 48451 "anchorElement", 48452 "contentElement", 48453 "popoverElement", 48454 "disclosureElement" 48455 ]) 48456 ); 48457 throwOnConflictingProps(props, store); 48458 const syncState = store.getState(); 48459 const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 48460 store, 48461 virtualFocus: defaultValue( 48462 props.virtualFocus, 48463 syncState.virtualFocus, 48464 true 48465 ), 48466 includesBaseElement: defaultValue( 48467 props.includesBaseElement, 48468 syncState.includesBaseElement, 48469 false 48470 ), 48471 activeId: defaultValue( 48472 props.activeId, 48473 syncState.activeId, 48474 props.defaultActiveId, 48475 null 48476 ), 48477 orientation: defaultValue( 48478 props.orientation, 48479 syncState.orientation, 48480 "vertical" 48481 ) 48482 })); 48483 const popover = createPopoverStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 48484 store, 48485 placement: defaultValue( 48486 props.placement, 48487 syncState.placement, 48488 "bottom-start" 48489 ) 48490 })); 48491 const initialValue = new String(""); 48492 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), popover.getState()), { 48493 value: defaultValue( 48494 props.value, 48495 syncState.value, 48496 props.defaultValue, 48497 initialValue 48498 ), 48499 setValueOnMove: defaultValue( 48500 props.setValueOnMove, 48501 syncState.setValueOnMove, 48502 false 48503 ), 48504 labelElement: defaultValue(syncState.labelElement, null), 48505 selectElement: defaultValue(syncState.selectElement, null), 48506 listElement: defaultValue(syncState.listElement, null) 48507 }); 48508 const select = createStore(initialState, composite, popover, store); 48509 setup( 48510 select, 48511 () => sync(select, ["value", "items"], (state) => { 48512 if (state.value !== initialValue) return; 48513 if (!state.items.length) return; 48514 const item = state.items.find( 48515 (item2) => !item2.disabled && item2.value != null 48516 ); 48517 if ((item == null ? void 0 : item.value) == null) return; 48518 select.setState("value", item.value); 48519 }) 48520 ); 48521 setup( 48522 select, 48523 () => sync(select, ["mounted"], (state) => { 48524 if (state.mounted) return; 48525 select.setState("activeId", initialState.activeId); 48526 }) 48527 ); 48528 setup( 48529 select, 48530 () => sync(select, ["mounted", "items", "value"], (state) => { 48531 if (combobox) return; 48532 if (state.mounted) return; 48533 const values = toArray(state.value); 48534 const lastValue = values[values.length - 1]; 48535 if (lastValue == null) return; 48536 const item = state.items.find( 48537 (item2) => !item2.disabled && item2.value === lastValue 48538 ); 48539 if (!item) return; 48540 select.setState("activeId", item.id); 48541 }) 48542 ); 48543 setup( 48544 select, 48545 () => batch(select, ["setValueOnMove", "moves"], (state) => { 48546 const { mounted, value, activeId } = select.getState(); 48547 if (!state.setValueOnMove && mounted) return; 48548 if (Array.isArray(value)) return; 48549 if (!state.moves) return; 48550 if (!activeId) return; 48551 const item = composite.item(activeId); 48552 if (!item || item.disabled || item.value == null) return; 48553 select.setState("value", item.value); 48554 }) 48555 ); 48556 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), popover), select), { 48557 combobox, 48558 setValue: (value) => select.setState("value", value), 48559 setLabelElement: (element) => select.setState("labelElement", element), 48560 setSelectElement: (element) => select.setState("selectElement", element), 48561 setListElement: (element) => select.setState("listElement", element) 48562 }); 48563 } 48564 48565 48566 ;// ./node_modules/@ariakit/react-core/esm/__chunks/S5WQ44SQ.js 48567 "use client"; 48568 48569 48570 48571 48572 48573 48574 48575 // src/select/select-store.ts 48576 48577 function useSelectStoreOptions(props) { 48578 const combobox = useComboboxProviderContext(); 48579 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 48580 combobox: props.combobox !== void 0 ? props.combobox : combobox 48581 }); 48582 return useCompositeStoreOptions(props); 48583 } 48584 function useSelectStoreProps(store, update, props) { 48585 useUpdateEffect(update, [props.combobox]); 48586 useStoreProps(store, props, "value", "setValue"); 48587 useStoreProps(store, props, "setValueOnMove"); 48588 return Object.assign( 48589 usePopoverStoreProps( 48590 useCompositeStoreProps(store, update, props), 48591 update, 48592 props 48593 ), 48594 { combobox: props.combobox } 48595 ); 48596 } 48597 function useSelectStore(props = {}) { 48598 props = useSelectStoreOptions(props); 48599 const [store, update] = YV4JVR4I_useStore(createSelectStore, props); 48600 return useSelectStoreProps(store, update, props); 48601 } 48602 48603 48604 48605 ;// ./node_modules/@ariakit/react-core/esm/__chunks/KPEX55MY.js 48606 "use client"; 48607 48608 48609 48610 48611 // src/select/select-context.tsx 48612 48613 var KPEX55MY_ctx = createStoreContext( 48614 [PopoverContextProvider, CompositeContextProvider], 48615 [PopoverScopedContextProvider, CompositeScopedContextProvider] 48616 ); 48617 var useSelectContext = KPEX55MY_ctx.useContext; 48618 var useSelectScopedContext = KPEX55MY_ctx.useScopedContext; 48619 var useSelectProviderContext = KPEX55MY_ctx.useProviderContext; 48620 var SelectContextProvider = KPEX55MY_ctx.ContextProvider; 48621 var SelectScopedContextProvider = KPEX55MY_ctx.ScopedContextProvider; 48622 var SelectItemCheckedContext = (0,external_React_.createContext)(false); 48623 var SelectHeadingContext = (0,external_React_.createContext)(null); 48624 48625 48626 48627 ;// ./node_modules/@ariakit/react-core/esm/select/select-label.js 48628 "use client"; 48629 48630 48631 48632 48633 48634 48635 48636 48637 48638 48639 48640 // src/select/select-label.tsx 48641 48642 var select_label_TagName = "div"; 48643 var useSelectLabel = createHook( 48644 function useSelectLabel2(_a) { 48645 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 48646 const context = useSelectProviderContext(); 48647 store = store || context; 48648 invariant( 48649 store, 48650 false && 0 48651 ); 48652 const id = useId(props.id); 48653 const onClickProp = props.onClick; 48654 const onClick = useEvent((event) => { 48655 onClickProp == null ? void 0 : onClickProp(event); 48656 if (event.defaultPrevented) return; 48657 queueMicrotask(() => { 48658 const select = store == null ? void 0 : store.getState().selectElement; 48659 select == null ? void 0 : select.focus(); 48660 }); 48661 }); 48662 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 48663 id 48664 }, props), { 48665 ref: useMergeRefs(store.setLabelElement, props.ref), 48666 onClick, 48667 style: _3YLGPPWQ_spreadValues({ 48668 cursor: "default" 48669 }, props.style) 48670 }); 48671 return removeUndefinedValues(props); 48672 } 48673 ); 48674 var SelectLabel = memo2( 48675 forwardRef2(function SelectLabel2(props) { 48676 const htmlProps = useSelectLabel(props); 48677 return LMDWO4NN_createElement(select_label_TagName, htmlProps); 48678 }) 48679 ); 48680 48681 48682 ;// ./node_modules/@ariakit/react-core/esm/__chunks/X5NMLKT6.js 48683 "use client"; 48684 48685 48686 48687 48688 48689 // src/button/button.tsx 48690 48691 48692 var X5NMLKT6_TagName = "button"; 48693 var useButton = createHook( 48694 function useButton2(props) { 48695 const ref = (0,external_React_.useRef)(null); 48696 const tagName = useTagName(ref, X5NMLKT6_TagName); 48697 const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)( 48698 () => !!tagName && isButton({ tagName, type: props.type }) 48699 ); 48700 (0,external_React_.useEffect)(() => { 48701 if (!ref.current) return; 48702 setIsNativeButton(isButton(ref.current)); 48703 }, []); 48704 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 48705 role: !isNativeButton && tagName !== "a" ? "button" : void 0 48706 }, props), { 48707 ref: useMergeRefs(ref, props.ref) 48708 }); 48709 props = useCommand(props); 48710 return props; 48711 } 48712 ); 48713 var X5NMLKT6_Button = forwardRef2(function Button2(props) { 48714 const htmlProps = useButton(props); 48715 return LMDWO4NN_createElement(X5NMLKT6_TagName, htmlProps); 48716 }); 48717 48718 48719 48720 ;// ./node_modules/@ariakit/react-core/esm/__chunks/P4IRICAX.js 48721 "use client"; 48722 48723 48724 48725 48726 48727 48728 // src/disclosure/disclosure.tsx 48729 48730 48731 var P4IRICAX_TagName = "button"; 48732 var P4IRICAX_symbol = Symbol("disclosure"); 48733 var useDisclosure = createHook( 48734 function useDisclosure2(_a) { 48735 var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]); 48736 const context = useDisclosureProviderContext(); 48737 store = store || context; 48738 invariant( 48739 store, 48740 false && 0 48741 ); 48742 const ref = (0,external_React_.useRef)(null); 48743 const [expanded, setExpanded] = (0,external_React_.useState)(false); 48744 const disclosureElement = store.useState("disclosureElement"); 48745 const open = store.useState("open"); 48746 (0,external_React_.useEffect)(() => { 48747 let isCurrentDisclosure = disclosureElement === ref.current; 48748 if (!(disclosureElement == null ? void 0 : disclosureElement.isConnected)) { 48749 store == null ? void 0 : store.setDisclosureElement(ref.current); 48750 isCurrentDisclosure = true; 48751 } 48752 setExpanded(open && isCurrentDisclosure); 48753 }, [disclosureElement, store, open]); 48754 const onClickProp = props.onClick; 48755 const toggleOnClickProp = useBooleanEvent(toggleOnClick); 48756 const [isDuplicate, metadataProps] = useMetadataProps(props, P4IRICAX_symbol, true); 48757 const onClick = useEvent((event) => { 48758 onClickProp == null ? void 0 : onClickProp(event); 48759 if (event.defaultPrevented) return; 48760 if (isDuplicate) return; 48761 if (!toggleOnClickProp(event)) return; 48762 store == null ? void 0 : store.setDisclosureElement(event.currentTarget); 48763 store == null ? void 0 : store.toggle(); 48764 }); 48765 const contentElement = store.useState("contentElement"); 48766 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues(_3YLGPPWQ_spreadValues({ 48767 "aria-expanded": expanded, 48768 "aria-controls": contentElement == null ? void 0 : contentElement.id 48769 }, metadataProps), props), { 48770 ref: useMergeRefs(ref, props.ref), 48771 onClick 48772 }); 48773 props = useButton(props); 48774 return props; 48775 } 48776 ); 48777 var Disclosure = forwardRef2(function Disclosure2(props) { 48778 const htmlProps = useDisclosure(props); 48779 return LMDWO4NN_createElement(P4IRICAX_TagName, htmlProps); 48780 }); 48781 48782 48783 48784 ;// ./node_modules/@ariakit/react-core/esm/__chunks/AXB53BZF.js 48785 "use client"; 48786 48787 48788 48789 48790 48791 // src/dialog/dialog-disclosure.tsx 48792 48793 48794 var AXB53BZF_TagName = "button"; 48795 var useDialogDisclosure = createHook( 48796 function useDialogDisclosure2(_a) { 48797 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 48798 const context = useDialogProviderContext(); 48799 store = store || context; 48800 invariant( 48801 store, 48802 false && 0 48803 ); 48804 const contentElement = store.useState("contentElement"); 48805 props = _3YLGPPWQ_spreadValues({ 48806 "aria-haspopup": getPopupRole(contentElement, "dialog") 48807 }, props); 48808 props = useDisclosure(_3YLGPPWQ_spreadValues({ store }, props)); 48809 return props; 48810 } 48811 ); 48812 var DialogDisclosure = forwardRef2(function DialogDisclosure2(props) { 48813 const htmlProps = useDialogDisclosure(props); 48814 return LMDWO4NN_createElement(AXB53BZF_TagName, htmlProps); 48815 }); 48816 48817 48818 48819 ;// ./node_modules/@ariakit/react-core/esm/__chunks/OMU7RWRV.js 48820 "use client"; 48821 48822 48823 48824 48825 48826 // src/popover/popover-anchor.tsx 48827 var OMU7RWRV_TagName = "div"; 48828 var usePopoverAnchor = createHook( 48829 function usePopoverAnchor2(_a) { 48830 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 48831 const context = usePopoverProviderContext(); 48832 store = store || context; 48833 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 48834 ref: useMergeRefs(store == null ? void 0 : store.setAnchorElement, props.ref) 48835 }); 48836 return props; 48837 } 48838 ); 48839 var PopoverAnchor = forwardRef2(function PopoverAnchor2(props) { 48840 const htmlProps = usePopoverAnchor(props); 48841 return LMDWO4NN_createElement(OMU7RWRV_TagName, htmlProps); 48842 }); 48843 48844 48845 48846 ;// ./node_modules/@ariakit/react-core/esm/__chunks/QYJ6MIDR.js 48847 "use client"; 48848 48849 48850 48851 48852 48853 48854 48855 // src/popover/popover-disclosure.tsx 48856 48857 48858 var QYJ6MIDR_TagName = "button"; 48859 var usePopoverDisclosure = createHook(function usePopoverDisclosure2(_a) { 48860 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 48861 const context = usePopoverProviderContext(); 48862 store = store || context; 48863 invariant( 48864 store, 48865 false && 0 48866 ); 48867 const onClickProp = props.onClick; 48868 const onClick = useEvent((event) => { 48869 store == null ? void 0 : store.setAnchorElement(event.currentTarget); 48870 onClickProp == null ? void 0 : onClickProp(event); 48871 }); 48872 props = useWrapElement( 48873 props, 48874 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }), 48875 [store] 48876 ); 48877 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 48878 onClick 48879 }); 48880 props = usePopoverAnchor(_3YLGPPWQ_spreadValues({ store }, props)); 48881 props = useDialogDisclosure(_3YLGPPWQ_spreadValues({ store }, props)); 48882 return props; 48883 }); 48884 var PopoverDisclosure = forwardRef2(function PopoverDisclosure2(props) { 48885 const htmlProps = usePopoverDisclosure(props); 48886 return LMDWO4NN_createElement(QYJ6MIDR_TagName, htmlProps); 48887 }); 48888 48889 48890 48891 ;// ./node_modules/@ariakit/react-core/esm/__chunks/DR55NYVS.js 48892 "use client"; 48893 48894 48895 48896 48897 // src/popover/popover-disclosure-arrow.tsx 48898 48899 48900 48901 var DR55NYVS_TagName = "span"; 48902 var pointsMap = { 48903 top: "4,10 8,6 12,10", 48904 right: "6,4 10,8 6,12", 48905 bottom: "4,6 8,10 12,6", 48906 left: "10,4 6,8 10,12" 48907 }; 48908 var usePopoverDisclosureArrow = createHook(function usePopoverDisclosureArrow2(_a) { 48909 var _b = _a, { store, placement } = _b, props = __objRest(_b, ["store", "placement"]); 48910 const context = usePopoverContext(); 48911 store = store || context; 48912 invariant( 48913 store, 48914 false && 0 48915 ); 48916 const position = store.useState((state) => placement || state.placement); 48917 const dir = position.split("-")[0]; 48918 const points = pointsMap[dir]; 48919 const children = (0,external_React_.useMemo)( 48920 () => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 48921 "svg", 48922 { 48923 display: "block", 48924 fill: "none", 48925 stroke: "currentColor", 48926 strokeLinecap: "round", 48927 strokeLinejoin: "round", 48928 strokeWidth: 1.5, 48929 viewBox: "0 0 16 16", 48930 height: "1em", 48931 width: "1em", 48932 children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("polyline", { points }) 48933 } 48934 ), 48935 [points] 48936 ); 48937 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 48938 children, 48939 "aria-hidden": true 48940 }, props), { 48941 style: _3YLGPPWQ_spreadValues({ 48942 width: "1em", 48943 height: "1em", 48944 pointerEvents: "none" 48945 }, props.style) 48946 }); 48947 return removeUndefinedValues(props); 48948 }); 48949 var PopoverDisclosureArrow = forwardRef2( 48950 function PopoverDisclosureArrow2(props) { 48951 const htmlProps = usePopoverDisclosureArrow(props); 48952 return LMDWO4NN_createElement(DR55NYVS_TagName, htmlProps); 48953 } 48954 ); 48955 48956 48957 48958 ;// ./node_modules/@ariakit/react-core/esm/__chunks/UD53QJDV.js 48959 "use client"; 48960 48961 48962 48963 48964 48965 // src/select/select-arrow.tsx 48966 var UD53QJDV_TagName = "span"; 48967 var useSelectArrow = createHook( 48968 function useSelectArrow2(_a) { 48969 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 48970 const context = useSelectContext(); 48971 store = store || context; 48972 props = usePopoverDisclosureArrow(_3YLGPPWQ_spreadValues({ store }, props)); 48973 return props; 48974 } 48975 ); 48976 var SelectArrow = forwardRef2(function SelectArrow2(props) { 48977 const htmlProps = useSelectArrow(props); 48978 return LMDWO4NN_createElement(UD53QJDV_TagName, htmlProps); 48979 }); 48980 48981 48982 48983 ;// ./node_modules/@ariakit/react-core/esm/select/select.js 48984 "use client"; 48985 48986 48987 48988 48989 48990 48991 48992 48993 48994 48995 48996 48997 48998 48999 49000 49001 49002 49003 49004 49005 49006 49007 49008 // src/select/select.tsx 49009 49010 49011 49012 49013 49014 49015 var select_TagName = "button"; 49016 function getSelectedValues(select) { 49017 return Array.from(select.selectedOptions).map((option) => option.value); 49018 } 49019 function nextWithValue(store, next) { 49020 return () => { 49021 const nextId = next(); 49022 if (!nextId) return; 49023 let i = 0; 49024 let nextItem = store.item(nextId); 49025 const firstItem = nextItem; 49026 while (nextItem && nextItem.value == null) { 49027 const nextId2 = next(++i); 49028 if (!nextId2) return; 49029 nextItem = store.item(nextId2); 49030 if (nextItem === firstItem) break; 49031 } 49032 return nextItem == null ? void 0 : nextItem.id; 49033 }; 49034 } 49035 var useSelect = createHook(function useSelect2(_a) { 49036 var _b = _a, { 49037 store, 49038 name, 49039 form, 49040 required, 49041 showOnKeyDown = true, 49042 moveOnKeyDown = true, 49043 toggleOnPress = true, 49044 toggleOnClick = toggleOnPress 49045 } = _b, props = __objRest(_b, [ 49046 "store", 49047 "name", 49048 "form", 49049 "required", 49050 "showOnKeyDown", 49051 "moveOnKeyDown", 49052 "toggleOnPress", 49053 "toggleOnClick" 49054 ]); 49055 const context = useSelectProviderContext(); 49056 store = store || context; 49057 invariant( 49058 store, 49059 false && 0 49060 ); 49061 const onKeyDownProp = props.onKeyDown; 49062 const showOnKeyDownProp = useBooleanEvent(showOnKeyDown); 49063 const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown); 49064 const placement = store.useState("placement"); 49065 const dir = placement.split("-")[0]; 49066 const value = store.useState("value"); 49067 const multiSelectable = Array.isArray(value); 49068 const onKeyDown = useEvent((event) => { 49069 var _a2; 49070 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 49071 if (event.defaultPrevented) return; 49072 if (!store) return; 49073 const { orientation, items: items2, activeId } = store.getState(); 49074 const isVertical = orientation !== "horizontal"; 49075 const isHorizontal = orientation !== "vertical"; 49076 const isGrid = !!((_a2 = items2.find((item) => !item.disabled && item.value != null)) == null ? void 0 : _a2.rowId); 49077 const moveKeyMap = { 49078 ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up), 49079 ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next), 49080 ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down), 49081 ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous) 49082 }; 49083 const getId = moveKeyMap[event.key]; 49084 if (getId && moveOnKeyDownProp(event)) { 49085 event.preventDefault(); 49086 store.move(getId()); 49087 } 49088 const isTopOrBottom = dir === "top" || dir === "bottom"; 49089 const isLeft = dir === "left"; 49090 const isRight = dir === "right"; 49091 const canShowKeyMap = { 49092 ArrowDown: isTopOrBottom, 49093 ArrowUp: isTopOrBottom, 49094 ArrowLeft: isLeft, 49095 ArrowRight: isRight 49096 }; 49097 const canShow = canShowKeyMap[event.key]; 49098 if (canShow && showOnKeyDownProp(event)) { 49099 event.preventDefault(); 49100 store.move(activeId); 49101 queueBeforeEvent(event.currentTarget, "keyup", store.show); 49102 } 49103 }); 49104 props = useWrapElement( 49105 props, 49106 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectScopedContextProvider, { value: store, children: element }), 49107 [store] 49108 ); 49109 const [autofill, setAutofill] = (0,external_React_.useState)(false); 49110 const nativeSelectChangedRef = (0,external_React_.useRef)(false); 49111 (0,external_React_.useEffect)(() => { 49112 const nativeSelectChanged = nativeSelectChangedRef.current; 49113 nativeSelectChangedRef.current = false; 49114 if (nativeSelectChanged) return; 49115 setAutofill(false); 49116 }, [value]); 49117 const labelId = store.useState((state) => { 49118 var _a2; 49119 return (_a2 = state.labelElement) == null ? void 0 : _a2.id; 49120 }); 49121 const label = props["aria-label"]; 49122 const labelledBy = props["aria-labelledby"] || labelId; 49123 const items = store.useState((state) => { 49124 if (!name) return; 49125 return state.items; 49126 }); 49127 const values = (0,external_React_.useMemo)(() => { 49128 return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))]; 49129 }, [items]); 49130 props = useWrapElement( 49131 props, 49132 (element) => { 49133 if (!name) return element; 49134 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ 49135 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)( 49136 "select", 49137 { 49138 style: { 49139 border: 0, 49140 clip: "rect(0 0 0 0)", 49141 height: "1px", 49142 margin: "-1px", 49143 overflow: "hidden", 49144 padding: 0, 49145 position: "absolute", 49146 whiteSpace: "nowrap", 49147 width: "1px" 49148 }, 49149 tabIndex: -1, 49150 "aria-hidden": true, 49151 "aria-label": label, 49152 "aria-labelledby": labelledBy, 49153 name, 49154 form, 49155 required, 49156 value, 49157 multiple: multiSelectable, 49158 onFocus: () => { 49159 var _a2; 49160 return (_a2 = store == null ? void 0 : store.getState().selectElement) == null ? void 0 : _a2.focus(); 49161 }, 49162 onChange: (event) => { 49163 nativeSelectChangedRef.current = true; 49164 setAutofill(true); 49165 store == null ? void 0 : store.setValue( 49166 multiSelectable ? getSelectedValues(event.target) : event.target.value 49167 ); 49168 }, 49169 children: [ 49170 toArray(value).map((value2) => { 49171 if (value2 == null) return null; 49172 if (values.includes(value2)) return null; 49173 return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { value: value2, children: value2 }, value2); 49174 }), 49175 values.map((value2) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { value: value2, children: value2 }, value2)) 49176 ] 49177 } 49178 ), 49179 element 49180 ] }); 49181 }, 49182 [ 49183 store, 49184 label, 49185 labelledBy, 49186 name, 49187 form, 49188 required, 49189 value, 49190 multiSelectable, 49191 values 49192 ] 49193 ); 49194 const children = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ 49195 value, 49196 /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectArrow, {}) 49197 ] }); 49198 const contentElement = store.useState("contentElement"); 49199 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 49200 role: "combobox", 49201 "aria-autocomplete": "none", 49202 "aria-labelledby": labelId, 49203 "aria-haspopup": getPopupRole(contentElement, "listbox"), 49204 "data-autofill": autofill || void 0, 49205 "data-name": name, 49206 children 49207 }, props), { 49208 ref: useMergeRefs(store.setSelectElement, props.ref), 49209 onKeyDown 49210 }); 49211 props = usePopoverDisclosure(_3YLGPPWQ_spreadValues({ store, toggleOnClick }, props)); 49212 props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ store }, props)); 49213 return props; 49214 }); 49215 var select_Select = forwardRef2(function Select2(props) { 49216 const htmlProps = useSelect(props); 49217 return LMDWO4NN_createElement(select_TagName, htmlProps); 49218 }); 49219 49220 49221 ;// ./node_modules/@ariakit/react-core/esm/__chunks/XRBJGF7I.js 49222 "use client"; 49223 49224 49225 49226 49227 49228 49229 49230 49231 // src/select/select-list.tsx 49232 49233 49234 49235 49236 var XRBJGF7I_TagName = "div"; 49237 var SelectListContext = (0,external_React_.createContext)(null); 49238 var useSelectList = createHook( 49239 function useSelectList2(_a) { 49240 var _b = _a, { 49241 store, 49242 resetOnEscape = true, 49243 hideOnEnter = true, 49244 focusOnMove = true, 49245 composite, 49246 alwaysVisible 49247 } = _b, props = __objRest(_b, [ 49248 "store", 49249 "resetOnEscape", 49250 "hideOnEnter", 49251 "focusOnMove", 49252 "composite", 49253 "alwaysVisible" 49254 ]); 49255 const context = useSelectContext(); 49256 store = store || context; 49257 invariant( 49258 store, 49259 false && 0 49260 ); 49261 const id = useId(props.id); 49262 const value = store.useState("value"); 49263 const multiSelectable = Array.isArray(value); 49264 const [defaultValue, setDefaultValue] = (0,external_React_.useState)(value); 49265 const mounted = store.useState("mounted"); 49266 (0,external_React_.useEffect)(() => { 49267 if (mounted) return; 49268 setDefaultValue(value); 49269 }, [mounted, value]); 49270 resetOnEscape = resetOnEscape && !multiSelectable; 49271 const onKeyDownProp = props.onKeyDown; 49272 const resetOnEscapeProp = useBooleanEvent(resetOnEscape); 49273 const hideOnEnterProp = useBooleanEvent(hideOnEnter); 49274 const onKeyDown = useEvent((event) => { 49275 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 49276 if (event.defaultPrevented) return; 49277 if (event.key === "Escape" && resetOnEscapeProp(event)) { 49278 store == null ? void 0 : store.setValue(defaultValue); 49279 } 49280 if (event.key === " " || event.key === "Enter") { 49281 if (isSelfTarget(event) && hideOnEnterProp(event)) { 49282 event.preventDefault(); 49283 store == null ? void 0 : store.hide(); 49284 } 49285 } 49286 }); 49287 const headingContext = (0,external_React_.useContext)(SelectHeadingContext); 49288 const headingState = (0,external_React_.useState)(); 49289 const [headingId, setHeadingId] = headingContext || headingState; 49290 const headingContextValue = (0,external_React_.useMemo)( 49291 () => [headingId, setHeadingId], 49292 [headingId] 49293 ); 49294 const [childStore, setChildStore] = (0,external_React_.useState)(null); 49295 const setStore = (0,external_React_.useContext)(SelectListContext); 49296 (0,external_React_.useEffect)(() => { 49297 if (!setStore) return; 49298 setStore(store); 49299 return () => setStore(null); 49300 }, [setStore, store]); 49301 props = useWrapElement( 49302 props, 49303 (element2) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectListContext.Provider, { value: setChildStore, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectHeadingContext.Provider, { value: headingContextValue, children: element2 }) }) }), 49304 [store, headingContextValue] 49305 ); 49306 const hasCombobox = !!store.combobox; 49307 composite = composite != null ? composite : !hasCombobox && childStore !== store; 49308 const [element, setElement] = useTransactionState( 49309 composite ? store.setListElement : null 49310 ); 49311 const role = useAttribute(element, "role", props.role); 49312 const isCompositeRole = role === "listbox" || role === "menu" || role === "tree" || role === "grid"; 49313 const ariaMultiSelectable = composite || isCompositeRole ? multiSelectable || void 0 : void 0; 49314 const hidden = isHidden(mounted, props.hidden, alwaysVisible); 49315 const style = hidden ? _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props.style), { display: "none" }) : props.style; 49316 if (composite) { 49317 props = _3YLGPPWQ_spreadValues({ 49318 role: "listbox", 49319 "aria-multiselectable": ariaMultiSelectable 49320 }, props); 49321 } 49322 const labelId = store.useState( 49323 (state) => { 49324 var _a2; 49325 return headingId || ((_a2 = state.labelElement) == null ? void 0 : _a2.id); 49326 } 49327 ); 49328 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 49329 id, 49330 "aria-labelledby": labelId, 49331 hidden 49332 }, props), { 49333 ref: useMergeRefs(setElement, props.ref), 49334 style, 49335 onKeyDown 49336 }); 49337 props = useComposite(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ store }, props), { composite })); 49338 props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ store, typeahead: !hasCombobox }, props)); 49339 return props; 49340 } 49341 ); 49342 var SelectList = forwardRef2(function SelectList2(props) { 49343 const htmlProps = useSelectList(props); 49344 return LMDWO4NN_createElement(XRBJGF7I_TagName, htmlProps); 49345 }); 49346 49347 49348 49349 ;// ./node_modules/@ariakit/react-core/esm/select/select-popover.js 49350 "use client"; 49351 49352 49353 49354 49355 49356 49357 49358 49359 49360 49361 49362 49363 49364 49365 49366 49367 49368 49369 49370 49371 49372 49373 49374 49375 49376 49377 49378 49379 49380 49381 49382 49383 49384 49385 49386 49387 49388 49389 49390 49391 49392 49393 49394 49395 49396 49397 // src/select/select-popover.tsx 49398 var select_popover_TagName = "div"; 49399 var useSelectPopover = createHook( 49400 function useSelectPopover2(_a) { 49401 var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]); 49402 const context = useSelectProviderContext(); 49403 store = store || context; 49404 props = useSelectList(_3YLGPPWQ_spreadValues({ store, alwaysVisible }, props)); 49405 props = usePopover(_3YLGPPWQ_spreadValues({ store, alwaysVisible }, props)); 49406 return props; 49407 } 49408 ); 49409 var SelectPopover = createDialogComponent( 49410 forwardRef2(function SelectPopover2(props) { 49411 const htmlProps = useSelectPopover(props); 49412 return LMDWO4NN_createElement(select_popover_TagName, htmlProps); 49413 }), 49414 useSelectProviderContext 49415 ); 49416 49417 49418 ;// ./node_modules/@ariakit/react-core/esm/__chunks/YF2ICFG4.js 49419 "use client"; 49420 49421 49422 49423 49424 49425 49426 49427 49428 // src/select/select-item.tsx 49429 49430 49431 49432 49433 49434 var YF2ICFG4_TagName = "div"; 49435 function isSelected(storeValue, itemValue) { 49436 if (itemValue == null) return; 49437 if (storeValue == null) return false; 49438 if (Array.isArray(storeValue)) { 49439 return storeValue.includes(itemValue); 49440 } 49441 return storeValue === itemValue; 49442 } 49443 var useSelectItem = createHook( 49444 function useSelectItem2(_a) { 49445 var _b = _a, { 49446 store, 49447 value, 49448 getItem: getItemProp, 49449 hideOnClick, 49450 setValueOnClick = value != null, 49451 preventScrollOnKeyDown = true, 49452 focusOnHover = true 49453 } = _b, props = __objRest(_b, [ 49454 "store", 49455 "value", 49456 "getItem", 49457 "hideOnClick", 49458 "setValueOnClick", 49459 "preventScrollOnKeyDown", 49460 "focusOnHover" 49461 ]); 49462 var _a2; 49463 const context = useSelectScopedContext(); 49464 store = store || context; 49465 invariant( 49466 store, 49467 false && 0 49468 ); 49469 const id = useId(props.id); 49470 const disabled = disabledFromProps(props); 49471 const { listElement, multiSelectable, selected, autoFocus } = useStoreStateObject(store, { 49472 listElement: "listElement", 49473 multiSelectable(state) { 49474 return Array.isArray(state.value); 49475 }, 49476 selected(state) { 49477 return isSelected(state.value, value); 49478 }, 49479 autoFocus(state) { 49480 if (value == null) return false; 49481 if (state.value == null) return false; 49482 if (state.activeId !== id && (store == null ? void 0 : store.item(state.activeId))) { 49483 return false; 49484 } 49485 if (Array.isArray(state.value)) { 49486 return state.value[state.value.length - 1] === value; 49487 } 49488 return state.value === value; 49489 } 49490 }); 49491 const getItem = (0,external_React_.useCallback)( 49492 (item) => { 49493 const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), { 49494 value: disabled ? void 0 : value, 49495 children: value 49496 }); 49497 if (getItemProp) { 49498 return getItemProp(nextItem); 49499 } 49500 return nextItem; 49501 }, 49502 [disabled, value, getItemProp] 49503 ); 49504 hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable; 49505 const onClickProp = props.onClick; 49506 const setValueOnClickProp = useBooleanEvent(setValueOnClick); 49507 const hideOnClickProp = useBooleanEvent(hideOnClick); 49508 const onClick = useEvent((event) => { 49509 onClickProp == null ? void 0 : onClickProp(event); 49510 if (event.defaultPrevented) return; 49511 if (isDownloading(event)) return; 49512 if (isOpeningInNewTab(event)) return; 49513 if (setValueOnClickProp(event) && value != null) { 49514 store == null ? void 0 : store.setValue((prevValue) => { 49515 if (!Array.isArray(prevValue)) return value; 49516 if (prevValue.includes(value)) { 49517 return prevValue.filter((v) => v !== value); 49518 } 49519 return [...prevValue, value]; 49520 }); 49521 } 49522 if (hideOnClickProp(event)) { 49523 store == null ? void 0 : store.hide(); 49524 } 49525 }); 49526 props = useWrapElement( 49527 props, 49528 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }), 49529 [selected] 49530 ); 49531 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 49532 id, 49533 role: getPopupItemRole(listElement), 49534 "aria-selected": selected, 49535 children: value 49536 }, props), { 49537 autoFocus: (_a2 = props.autoFocus) != null ? _a2 : autoFocus, 49538 onClick 49539 }); 49540 props = useCompositeItem(_3YLGPPWQ_spreadValues({ 49541 store, 49542 getItem, 49543 preventScrollOnKeyDown 49544 }, props)); 49545 const focusOnHoverProp = useBooleanEvent(focusOnHover); 49546 props = useCompositeHover(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 49547 store 49548 }, props), { 49549 // We have to disable focusOnHover when the popup is closed, otherwise 49550 // the active item will change to null (the container) when the popup is 49551 // closed by clicking on an item. 49552 focusOnHover(event) { 49553 if (!focusOnHoverProp(event)) return false; 49554 const state = store == null ? void 0 : store.getState(); 49555 return !!(state == null ? void 0 : state.open); 49556 } 49557 })); 49558 return props; 49559 } 49560 ); 49561 var SelectItem = memo2( 49562 forwardRef2(function SelectItem2(props) { 49563 const htmlProps = useSelectItem(props); 49564 return LMDWO4NN_createElement(YF2ICFG4_TagName, htmlProps); 49565 }) 49566 ); 49567 49568 49569 49570 ;// ./node_modules/@ariakit/react-core/esm/__chunks/EYKMH5G5.js 49571 "use client"; 49572 49573 // src/checkbox/checkbox-checked-context.tsx 49574 49575 var CheckboxCheckedContext = (0,external_React_.createContext)(false); 49576 49577 49578 49579 ;// ./node_modules/@ariakit/react-core/esm/__chunks/5JCRYSSV.js 49580 "use client"; 49581 49582 49583 49584 49585 // src/checkbox/checkbox-check.tsx 49586 49587 49588 49589 var _5JCRYSSV_TagName = "span"; 49590 var checkmark = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 49591 "svg", 49592 { 49593 display: "block", 49594 fill: "none", 49595 stroke: "currentColor", 49596 strokeLinecap: "round", 49597 strokeLinejoin: "round", 49598 strokeWidth: 1.5, 49599 viewBox: "0 0 16 16", 49600 height: "1em", 49601 width: "1em", 49602 children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("polyline", { points: "4,8 7,12 12,4" }) 49603 } 49604 ); 49605 function getChildren(props) { 49606 if (props.checked) { 49607 return props.children || checkmark; 49608 } 49609 if (typeof props.children === "function") { 49610 return props.children; 49611 } 49612 return null; 49613 } 49614 var useCheckboxCheck = createHook( 49615 function useCheckboxCheck2(_a) { 49616 var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]); 49617 const context = (0,external_React_.useContext)(CheckboxCheckedContext); 49618 checked = checked != null ? checked : context; 49619 const children = getChildren({ checked, children: props.children }); 49620 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 49621 "aria-hidden": true 49622 }, props), { 49623 children, 49624 style: _3YLGPPWQ_spreadValues({ 49625 width: "1em", 49626 height: "1em", 49627 pointerEvents: "none" 49628 }, props.style) 49629 }); 49630 return removeUndefinedValues(props); 49631 } 49632 ); 49633 var CheckboxCheck = forwardRef2(function CheckboxCheck2(props) { 49634 const htmlProps = useCheckboxCheck(props); 49635 return LMDWO4NN_createElement(_5JCRYSSV_TagName, htmlProps); 49636 }); 49637 49638 49639 49640 ;// ./node_modules/@ariakit/react-core/esm/select/select-item-check.js 49641 "use client"; 49642 49643 49644 49645 49646 49647 49648 49649 49650 49651 49652 49653 49654 49655 // src/select/select-item-check.tsx 49656 49657 var select_item_check_TagName = "span"; 49658 var useSelectItemCheck = createHook( 49659 function useSelectItemCheck2(_a) { 49660 var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]); 49661 const context = (0,external_React_.useContext)(SelectItemCheckedContext); 49662 checked = checked != null ? checked : context; 49663 props = useCheckboxCheck(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { checked })); 49664 return props; 49665 } 49666 ); 49667 var SelectItemCheck = forwardRef2(function SelectItemCheck2(props) { 49668 const htmlProps = useSelectItemCheck(props); 49669 return LMDWO4NN_createElement(select_item_check_TagName, htmlProps); 49670 }); 49671 49672 49673 ;// ./node_modules/@wordpress/components/build-module/custom-select-control-v2/styles.js 49674 49675 function custom_select_control_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 49676 /** 49677 * External dependencies 49678 */ 49679 49680 49681 /** 49682 * Internal dependencies 49683 */ 49684 49685 49686 49687 49688 // TODO: extract to common utils and apply to relevant components 49689 const ANIMATION_PARAMS = { 49690 SLIDE_AMOUNT: '2px', 49691 DURATION: '400ms', 49692 EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )' 49693 }; 49694 const INLINE_PADDING = { 49695 compact: config_values.controlPaddingXSmall, 49696 small: config_values.controlPaddingXSmall, 49697 default: config_values.controlPaddingX 49698 }; 49699 const getSelectSize = (size, heightProperty) => { 49700 const sizes = { 49701 compact: { 49702 [heightProperty]: 32, 49703 paddingInlineStart: INLINE_PADDING.compact, 49704 paddingInlineEnd: INLINE_PADDING.compact + chevronIconSize 49705 }, 49706 default: { 49707 [heightProperty]: 40, 49708 paddingInlineStart: INLINE_PADDING.default, 49709 paddingInlineEnd: INLINE_PADDING.default + chevronIconSize 49710 }, 49711 small: { 49712 [heightProperty]: 24, 49713 paddingInlineStart: INLINE_PADDING.small, 49714 paddingInlineEnd: INLINE_PADDING.small + chevronIconSize 49715 } 49716 }; 49717 return sizes[size] || sizes.default; 49718 }; 49719 const getSelectItemSize = size => { 49720 // Used to visually align the checkmark with the chevron 49721 const checkmarkCorrection = 6; 49722 const sizes = { 49723 compact: { 49724 paddingInlineStart: INLINE_PADDING.compact, 49725 paddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection 49726 }, 49727 default: { 49728 paddingInlineStart: INLINE_PADDING.default, 49729 paddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection 49730 }, 49731 small: { 49732 paddingInlineStart: INLINE_PADDING.small, 49733 paddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection 49734 } 49735 }; 49736 return sizes[size] || sizes.default; 49737 }; 49738 const styles_Select = /*#__PURE__*/emotion_styled_base_browser_esm(select_Select, true ? { 49739 // Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component 49740 shouldForwardProp: prop => prop !== 'hasCustomRenderProp', 49741 target: "e1p3eej77" 49742 } : 0)(({ 49743 size, 49744 hasCustomRenderProp 49745 }) => /*#__PURE__*/emotion_react_browser_esm_css("display:block;background-color:", COLORS.theme.background, ";border:none;color:", COLORS.theme.foreground, ";cursor:pointer;font-family:inherit;text-align:start;user-select:none;width:100%;&[data-focus-visible]{outline:none;}", getSelectSize(size, hasCustomRenderProp ? 'minHeight' : 'height'), " ", !hasCustomRenderProp && truncateStyles, " ", fontSizeStyles({ 49746 inputSize: size 49747 }), ";" + ( true ? "" : 0), true ? "" : 0), true ? "" : 0); 49748 const slideDownAndFade = emotion_react_browser_esm_keyframes({ 49749 '0%': { 49750 opacity: 0, 49751 transform: `translateY(-$ANIMATION_PARAMS.SLIDE_AMOUNT})` 49752 }, 49753 '100%': { 49754 opacity: 1, 49755 transform: 'translateY(0)' 49756 } 49757 }); 49758 const styles_SelectPopover = /*#__PURE__*/emotion_styled_base_browser_esm(SelectPopover, true ? { 49759 target: "e1p3eej76" 49760 } : 0)("display:flex;flex-direction:column;background-color:", COLORS.theme.background, ";border-radius:", config_values.radiusSmall, ";border:1px solid ", COLORS.theme.foreground, ";box-shadow:", config_values.elevationMedium, ";z-index:1000000;max-height:min( var( --popover-available-height, 400px ), 400px );overflow:auto;overscroll-behavior:contain;min-width:min-content;&[data-open]{@media not ( prefers-reduced-motion ){animation-duration:", ANIMATION_PARAMS.DURATION, ";animation-timing-function:", ANIMATION_PARAMS.EASING, ";animation-name:", slideDownAndFade, ";will-change:transform,opacity;}}&[data-focus-visible]{outline:none;}" + ( true ? "" : 0)); 49761 const styles_SelectItem = /*#__PURE__*/emotion_styled_base_browser_esm(SelectItem, true ? { 49762 target: "e1p3eej75" 49763 } : 0)(({ 49764 size 49765 }) => /*#__PURE__*/emotion_react_browser_esm_css("cursor:default;display:flex;align-items:center;justify-content:space-between;font-size:", config_values.fontSize, ";line-height:28px;padding-block:", space(2), ";scroll-margin:", space(1), ";user-select:none;&[aria-disabled='true']{cursor:not-allowed;}&[data-active-item]{background-color:", COLORS.theme.gray[300], ";}", getSelectItemSize(size), ";" + ( true ? "" : 0), true ? "" : 0), true ? "" : 0); 49766 const truncateStyles = true ? { 49767 name: "1h52dri", 49768 styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap" 49769 } : 0; 49770 const SelectedExperimentalHintWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 49771 target: "e1p3eej74" 49772 } : 0)(truncateStyles, ";" + ( true ? "" : 0)); 49773 const SelectedExperimentalHintItem = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 49774 target: "e1p3eej73" 49775 } : 0)("color:", COLORS.theme.gray[600], ";margin-inline-start:", space(2), ";" + ( true ? "" : 0)); 49776 const WithHintItemWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 49777 target: "e1p3eej72" 49778 } : 0)("display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;flex:1;column-gap:", space(4), ";" + ( true ? "" : 0)); 49779 const WithHintItemHint = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 49780 target: "e1p3eej71" 49781 } : 0)("color:", COLORS.theme.gray[600], ";text-align:initial;line-height:", config_values.fontLineHeightBase, ";padding-inline-end:", space(1), ";margin-block:", space(1), ";" + ( true ? "" : 0)); 49782 const SelectedItemCheck = /*#__PURE__*/emotion_styled_base_browser_esm(SelectItemCheck, true ? { 49783 target: "e1p3eej70" 49784 } : 0)("display:flex;align-items:center;margin-inline-start:", space(2), ";align-self:start;margin-block-start:2px;font-size:0;", WithHintItemWrapper, "~&,&:not(:empty){font-size:24px;}" + ( true ? "" : 0)); 49785 49786 ;// ./node_modules/@wordpress/components/build-module/custom-select-control-v2/custom-select.js 49787 /** 49788 * External dependencies 49789 */ 49790 49791 49792 /** 49793 * WordPress dependencies 49794 */ 49795 49796 49797 49798 /** 49799 * Internal dependencies 49800 */ 49801 49802 49803 49804 49805 49806 49807 const CustomSelectContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 49808 function defaultRenderSelectedValue(value) { 49809 const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null; 49810 if (isValueEmpty) { 49811 return (0,external_wp_i18n_namespaceObject.__)('Select an item'); 49812 } 49813 if (Array.isArray(value)) { 49814 return value.length === 1 ? value[0] : 49815 // translators: %s: number of items selected (it will always be 2 or more items) 49816 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('%s items selected'), value.length); 49817 } 49818 return value; 49819 } 49820 const CustomSelectButton = ({ 49821 renderSelectedValue, 49822 size = 'default', 49823 store, 49824 ...restProps 49825 }) => { 49826 const { 49827 value: currentValue 49828 } = useStoreState(store); 49829 const computedRenderSelectedValue = (0,external_wp_element_namespaceObject.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]); 49830 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Select, { 49831 ...restProps, 49832 size: size, 49833 hasCustomRenderProp: !!renderSelectedValue, 49834 store: store, 49835 children: computedRenderSelectedValue(currentValue) 49836 }); 49837 }; 49838 function _CustomSelect(props) { 49839 const { 49840 children, 49841 hideLabelFromVision = false, 49842 label, 49843 size, 49844 store, 49845 className, 49846 isLegacy = false, 49847 ...restProps 49848 } = props; 49849 const onSelectPopoverKeyDown = (0,external_wp_element_namespaceObject.useCallback)(e => { 49850 if (isLegacy) { 49851 e.stopPropagation(); 49852 } 49853 }, [isLegacy]); 49854 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 49855 store, 49856 size 49857 }), [store, size]); 49858 return ( 49859 /*#__PURE__*/ 49860 // Where should `restProps` be forwarded to? 49861 (0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 49862 className: className, 49863 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectLabel, { 49864 store: store, 49865 render: hideLabelFromVision ? 49866 /*#__PURE__*/ 49867 // @ts-expect-error `children` are passed via the render prop 49868 (0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {}) : 49869 /*#__PURE__*/ 49870 // @ts-expect-error `children` are passed via the render prop 49871 (0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { 49872 as: "div" 49873 }), 49874 children: label 49875 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(input_base, { 49876 __next40pxDefaultSize: true, 49877 size: size, 49878 suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}), 49879 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectButton, { 49880 ...restProps, 49881 size: size, 49882 store: store 49883 // Match legacy behavior (move selection rather than open the popover) 49884 , 49885 showOnKeyDown: !isLegacy 49886 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectPopover, { 49887 gutter: 12, 49888 store: store, 49889 sameWidth: true, 49890 slide: false, 49891 onKeyDown: onSelectPopoverKeyDown 49892 // Match legacy behavior 49893 , 49894 flip: !isLegacy, 49895 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectContext.Provider, { 49896 value: contextValue, 49897 children: children 49898 }) 49899 })] 49900 })] 49901 }) 49902 ); 49903 } 49904 /* harmony default export */ const custom_select = (_CustomSelect); 49905 49906 ;// ./node_modules/@wordpress/components/build-module/custom-select-control-v2/item.js 49907 /** 49908 * WordPress dependencies 49909 */ 49910 49911 49912 /** 49913 * Internal dependencies 49914 */ 49915 49916 49917 49918 49919 function CustomSelectItem({ 49920 children, 49921 ...props 49922 }) { 49923 var _customSelectContext$; 49924 const customSelectContext = (0,external_wp_element_namespaceObject.useContext)(CustomSelectContext); 49925 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_SelectItem, { 49926 store: customSelectContext?.store, 49927 size: (_customSelectContext$ = customSelectContext?.size) !== null && _customSelectContext$ !== void 0 ? _customSelectContext$ : 'default', 49928 ...props, 49929 children: [children !== null && children !== void 0 ? children : props.value, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectedItemCheck, { 49930 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 49931 icon: library_check 49932 }) 49933 })] 49934 }); 49935 } 49936 CustomSelectItem.displayName = 'CustomSelectControlV2.Item'; 49937 /* harmony default export */ const custom_select_control_v2_item = (CustomSelectItem); 49938 49939 ;// ./node_modules/@wordpress/components/build-module/custom-select-control/index.js 49940 /** 49941 * External dependencies 49942 */ 49943 49944 49945 49946 /** 49947 * WordPress dependencies 49948 */ 49949 49950 49951 49952 /** 49953 * Internal dependencies 49954 */ 49955 49956 49957 49958 49959 49960 49961 function custom_select_control_useDeprecatedProps({ 49962 __experimentalShowSelectedHint, 49963 ...otherProps 49964 }) { 49965 return { 49966 showSelectedHint: __experimentalShowSelectedHint, 49967 ...otherProps 49968 }; 49969 } 49970 49971 // The removal of `__experimentalHint` in favour of `hint` doesn't happen in 49972 // the `useDeprecatedProps` hook in order not to break consumers that rely 49973 // on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131) 49974 function applyOptionDeprecations({ 49975 __experimentalHint, 49976 ...rest 49977 }) { 49978 return { 49979 hint: __experimentalHint, 49980 ...rest 49981 }; 49982 } 49983 function getDescribedBy(currentValue, describedBy) { 49984 if (describedBy) { 49985 return describedBy; 49986 } 49987 49988 // translators: %s: The selected option. 49989 return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), currentValue); 49990 } 49991 function CustomSelectControl(props) { 49992 const { 49993 __next40pxDefaultSize = false, 49994 __shouldNotWarnDeprecated36pxSize, 49995 describedBy, 49996 options, 49997 onChange, 49998 size = 'default', 49999 value, 50000 className: classNameProp, 50001 showSelectedHint = false, 50002 ...restProps 50003 } = custom_select_control_useDeprecatedProps(props); 50004 maybeWarnDeprecated36pxSize({ 50005 componentName: 'CustomSelectControl', 50006 __next40pxDefaultSize, 50007 size, 50008 __shouldNotWarnDeprecated36pxSize 50009 }); 50010 const descriptionId = (0,external_wp_compose_namespaceObject.useInstanceId)(CustomSelectControl, 'custom-select-control__description'); 50011 50012 // Forward props + store from v2 implementation 50013 const store = useSelectStore({ 50014 async setValue(nextValue) { 50015 const nextOption = options.find(item => item.name === nextValue); 50016 if (!onChange || !nextOption) { 50017 return; 50018 } 50019 50020 // Executes the logic in a microtask after the popup is closed. 50021 // This is simply to ensure the isOpen state matches the one from the 50022 // previous legacy implementation. 50023 await Promise.resolve(); 50024 const state = store.getState(); 50025 const changeObject = { 50026 highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue), 50027 inputValue: '', 50028 isOpen: state.open, 50029 selectedItem: nextOption, 50030 type: '' 50031 }; 50032 onChange(changeObject); 50033 }, 50034 value: value?.name, 50035 // Setting the first option as a default value when no value is provided 50036 // is already done natively by the underlying Ariakit component, 50037 // but doing this explicitly avoids the `onChange` callback from firing 50038 // on initial render, thus making this implementation closer to the v1. 50039 defaultValue: options[0]?.name 50040 }); 50041 const children = options.map(applyOptionDeprecations).map(({ 50042 name, 50043 key, 50044 hint, 50045 style, 50046 className 50047 }) => { 50048 const withHint = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(WithHintItemWrapper, { 50049 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 50050 children: name 50051 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithHintItemHint, { 50052 // Keeping the classname for legacy reasons 50053 className: "components-custom-select-control__item-hint", 50054 children: hint 50055 })] 50056 }); 50057 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_select_control_v2_item, { 50058 value: name, 50059 children: hint ? withHint : name, 50060 style: style, 50061 className: dist_clsx(className, 50062 // Keeping the classnames for legacy reasons 50063 'components-custom-select-control__item', { 50064 'has-hint': hint 50065 }) 50066 }, key); 50067 }); 50068 const currentValue = useStoreState(store, 'value'); 50069 const renderSelectedValueHint = () => { 50070 const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({ 50071 name 50072 }) => currentValue === name)?.hint; 50073 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(SelectedExperimentalHintWrapper, { 50074 children: [currentValue, selectedOptionHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectedExperimentalHintItem, { 50075 // Keeping the classname for legacy reasons 50076 className: "components-custom-select-control__hint", 50077 children: selectedOptionHint 50078 })] 50079 }); 50080 }; 50081 const translatedSize = (() => { 50082 if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') { 50083 return 'default'; 50084 } 50085 if (!__next40pxDefaultSize && size === 'default') { 50086 return 'compact'; 50087 } 50088 return size; 50089 })(); 50090 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 50091 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_select, { 50092 "aria-describedby": descriptionId, 50093 renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined, 50094 size: translatedSize, 50095 store: store, 50096 className: dist_clsx( 50097 // Keeping the classname for legacy reasons 50098 'components-custom-select-control', classNameProp), 50099 isLegacy: true, 50100 ...restProps, 50101 children: children 50102 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 50103 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 50104 id: descriptionId, 50105 children: getDescribedBy(currentValue, describedBy) 50106 }) 50107 })] 50108 }); 50109 } 50110 /* harmony default export */ const custom_select_control = (CustomSelectControl); 50111 50112 ;// ./node_modules/date-fns/toDate.mjs 50113 /** 50114 * @name toDate 50115 * @category Common Helpers 50116 * @summary Convert the given argument to an instance of Date. 50117 * 50118 * @description 50119 * Convert the given argument to an instance of Date. 50120 * 50121 * If the argument is an instance of Date, the function returns its clone. 50122 * 50123 * If the argument is a number, it is treated as a timestamp. 50124 * 50125 * If the argument is none of the above, the function returns Invalid Date. 50126 * 50127 * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`. 50128 * 50129 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 50130 * 50131 * @param argument - The value to convert 50132 * 50133 * @returns The parsed date in the local time zone 50134 * 50135 * @example 50136 * // Clone the date: 50137 * const result = toDate(new Date(2014, 1, 11, 11, 30, 30)) 50138 * //=> Tue Feb 11 2014 11:30:30 50139 * 50140 * @example 50141 * // Convert the timestamp to date: 50142 * const result = toDate(1392098430000) 50143 * //=> Tue Feb 11 2014 11:30:30 50144 */ 50145 function toDate(argument) { 50146 const argStr = Object.prototype.toString.call(argument); 50147 50148 // Clone the date 50149 if ( 50150 argument instanceof Date || 50151 (typeof argument === "object" && argStr === "[object Date]") 50152 ) { 50153 // Prevent the date to lose the milliseconds when passed to new Date() in IE10 50154 return new argument.constructor(+argument); 50155 } else if ( 50156 typeof argument === "number" || 50157 argStr === "[object Number]" || 50158 typeof argument === "string" || 50159 argStr === "[object String]" 50160 ) { 50161 // TODO: Can we get rid of as? 50162 return new Date(argument); 50163 } else { 50164 // TODO: Can we get rid of as? 50165 return new Date(NaN); 50166 } 50167 } 50168 50169 // Fallback for modularized imports: 50170 /* harmony default export */ const date_fns_toDate = ((/* unused pure expression or super */ null && (toDate))); 50171 50172 ;// ./node_modules/date-fns/startOfDay.mjs 50173 50174 50175 /** 50176 * @name startOfDay 50177 * @category Day Helpers 50178 * @summary Return the start of a day for the given date. 50179 * 50180 * @description 50181 * Return the start of a day for the given date. 50182 * The result will be in the local timezone. 50183 * 50184 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 50185 * 50186 * @param date - The original date 50187 * 50188 * @returns The start of a day 50189 * 50190 * @example 50191 * // The start of a day for 2 September 2014 11:55:00: 50192 * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0)) 50193 * //=> Tue Sep 02 2014 00:00:00 50194 */ 50195 function startOfDay(date) { 50196 const _date = toDate(date); 50197 _date.setHours(0, 0, 0, 0); 50198 return _date; 50199 } 50200 50201 // Fallback for modularized imports: 50202 /* harmony default export */ const date_fns_startOfDay = ((/* unused pure expression or super */ null && (startOfDay))); 50203 50204 ;// ./node_modules/date-fns/constructFrom.mjs 50205 /** 50206 * @name constructFrom 50207 * @category Generic Helpers 50208 * @summary Constructs a date using the reference date and the value 50209 * 50210 * @description 50211 * The function constructs a new date using the constructor from the reference 50212 * date and the given value. It helps to build generic functions that accept 50213 * date extensions. 50214 * 50215 * It defaults to `Date` if the passed reference date is a number or a string. 50216 * 50217 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 50218 * 50219 * @param date - The reference date to take constructor from 50220 * @param value - The value to create the date 50221 * 50222 * @returns Date initialized using the given date and value 50223 * 50224 * @example 50225 * import { constructFrom } from 'date-fns' 50226 * 50227 * // A function that clones a date preserving the original type 50228 * function cloneDate<DateType extends Date(date: DateType): DateType { 50229 * return constructFrom( 50230 * date, // Use contrustor from the given date 50231 * date.getTime() // Use the date value to create a new date 50232 * ) 50233 * } 50234 */ 50235 function constructFrom(date, value) { 50236 if (date instanceof Date) { 50237 return new date.constructor(value); 50238 } else { 50239 return new Date(value); 50240 } 50241 } 50242 50243 // Fallback for modularized imports: 50244 /* harmony default export */ const date_fns_constructFrom = ((/* unused pure expression or super */ null && (constructFrom))); 50245 50246 ;// ./node_modules/date-fns/addMonths.mjs 50247 50248 50249 50250 /** 50251 * @name addMonths 50252 * @category Month Helpers 50253 * @summary Add the specified number of months to the given date. 50254 * 50255 * @description 50256 * Add the specified number of months to the given date. 50257 * 50258 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 50259 * 50260 * @param date - The date to be changed 50261 * @param amount - The amount of months to be added. 50262 * 50263 * @returns The new date with the months added 50264 * 50265 * @example 50266 * // Add 5 months to 1 September 2014: 50267 * const result = addMonths(new Date(2014, 8, 1), 5) 50268 * //=> Sun Feb 01 2015 00:00:00 50269 * 50270 * // Add one month to 30 January 2023: 50271 * const result = addMonths(new Date(2023, 0, 30), 1) 50272 * //=> Tue Feb 28 2023 00:00:00 50273 */ 50274 function addMonths(date, amount) { 50275 const _date = toDate(date); 50276 if (isNaN(amount)) return constructFrom(date, NaN); 50277 if (!amount) { 50278 // If 0 months, no-op to avoid changing times in the hour before end of DST 50279 return _date; 50280 } 50281 const dayOfMonth = _date.getDate(); 50282 50283 // The JS Date object supports date math by accepting out-of-bounds values for 50284 // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and 50285 // new Date(2020, 13, 1) returns 1 Feb 2021. This is *almost* the behavior we 50286 // want except that dates will wrap around the end of a month, meaning that 50287 // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So 50288 // we'll default to the end of the desired month by adding 1 to the desired 50289 // month and using a date of 0 to back up one day to the end of the desired 50290 // month. 50291 const endOfDesiredMonth = constructFrom(date, _date.getTime()); 50292 endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0); 50293 const daysInMonth = endOfDesiredMonth.getDate(); 50294 if (dayOfMonth >= daysInMonth) { 50295 // If we're already at the end of the month, then this is the correct date 50296 // and we're done. 50297 return endOfDesiredMonth; 50298 } else { 50299 // Otherwise, we now know that setting the original day-of-month value won't 50300 // cause an overflow, so set the desired day-of-month. Note that we can't 50301 // just set the date of `endOfDesiredMonth` because that object may have had 50302 // its time changed in the unusual case where where a DST transition was on 50303 // the last day of the month and its local time was in the hour skipped or 50304 // repeated next to a DST transition. So we use `date` instead which is 50305 // guaranteed to still have the original time. 50306 _date.setFullYear( 50307 endOfDesiredMonth.getFullYear(), 50308 endOfDesiredMonth.getMonth(), 50309 dayOfMonth, 50310 ); 50311 return _date; 50312 } 50313 } 50314 50315 // Fallback for modularized imports: 50316 /* harmony default export */ const date_fns_addMonths = ((/* unused pure expression or super */ null && (addMonths))); 50317 50318 ;// ./node_modules/date-fns/subMonths.mjs 50319 50320 50321 /** 50322 * @name subMonths 50323 * @category Month Helpers 50324 * @summary Subtract the specified number of months from the given date. 50325 * 50326 * @description 50327 * Subtract the specified number of months from the given date. 50328 * 50329 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 50330 * 50331 * @param date - The date to be changed 50332 * @param amount - The amount of months to be subtracted. 50333 * 50334 * @returns The new date with the months subtracted 50335 * 50336 * @example 50337 * // Subtract 5 months from 1 February 2015: 50338 * const result = subMonths(new Date(2015, 1, 1), 5) 50339 * //=> Mon Sep 01 2014 00:00:00 50340 */ 50341 function subMonths(date, amount) { 50342 return addMonths(date, -amount); 50343 } 50344 50345 // Fallback for modularized imports: 50346 /* harmony default export */ const date_fns_subMonths = ((/* unused pure expression or super */ null && (subMonths))); 50347 50348 ;// ./node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs 50349 const formatDistanceLocale = { 50350 lessThanXSeconds: { 50351 one: "less than a second", 50352 other: "less than {{count}} seconds", 50353 }, 50354 50355 xSeconds: { 50356 one: "1 second", 50357 other: "{{count}} seconds", 50358 }, 50359 50360 halfAMinute: "half a minute", 50361 50362 lessThanXMinutes: { 50363 one: "less than a minute", 50364 other: "less than {{count}} minutes", 50365 }, 50366 50367 xMinutes: { 50368 one: "1 minute", 50369 other: "{{count}} minutes", 50370 }, 50371 50372 aboutXHours: { 50373 one: "about 1 hour", 50374 other: "about {{count}} hours", 50375 }, 50376 50377 xHours: { 50378 one: "1 hour", 50379 other: "{{count}} hours", 50380 }, 50381 50382 xDays: { 50383 one: "1 day", 50384 other: "{{count}} days", 50385 }, 50386 50387 aboutXWeeks: { 50388 one: "about 1 week", 50389 other: "about {{count}} weeks", 50390 }, 50391 50392 xWeeks: { 50393 one: "1 week", 50394 other: "{{count}} weeks", 50395 }, 50396 50397 aboutXMonths: { 50398 one: "about 1 month", 50399 other: "about {{count}} months", 50400 }, 50401 50402 xMonths: { 50403 one: "1 month", 50404 other: "{{count}} months", 50405 }, 50406 50407 aboutXYears: { 50408 one: "about 1 year", 50409 other: "about {{count}} years", 50410 }, 50411 50412 xYears: { 50413 one: "1 year", 50414 other: "{{count}} years", 50415 }, 50416 50417 overXYears: { 50418 one: "over 1 year", 50419 other: "over {{count}} years", 50420 }, 50421 50422 almostXYears: { 50423 one: "almost 1 year", 50424 other: "almost {{count}} years", 50425 }, 50426 }; 50427 50428 const formatDistance = (token, count, options) => { 50429 let result; 50430 50431 const tokenValue = formatDistanceLocale[token]; 50432 if (typeof tokenValue === "string") { 50433 result = tokenValue; 50434 } else if (count === 1) { 50435 result = tokenValue.one; 50436 } else { 50437 result = tokenValue.other.replace("{{count}}", count.toString()); 50438 } 50439 50440 if (options?.addSuffix) { 50441 if (options.comparison && options.comparison > 0) { 50442 return "in " + result; 50443 } else { 50444 return result + " ago"; 50445 } 50446 } 50447 50448 return result; 50449 }; 50450 50451 ;// ./node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs 50452 function buildFormatLongFn(args) { 50453 return (options = {}) => { 50454 // TODO: Remove String() 50455 const width = options.width ? String(options.width) : args.defaultWidth; 50456 const format = args.formats[width] || args.formats[args.defaultWidth]; 50457 return format; 50458 }; 50459 } 50460 50461 ;// ./node_modules/date-fns/locale/en-US/_lib/formatLong.mjs 50462 50463 50464 const dateFormats = { 50465 full: "EEEE, MMMM do, y", 50466 long: "MMMM do, y", 50467 medium: "MMM d, y", 50468 short: "MM/dd/yyyy", 50469 }; 50470 50471 const timeFormats = { 50472 full: "h:mm:ss a zzzz", 50473 long: "h:mm:ss a z", 50474 medium: "h:mm:ss a", 50475 short: "h:mm a", 50476 }; 50477 50478 const dateTimeFormats = { 50479 full: "{{date}} 'at' {{time}}", 50480 long: "{{date}} 'at' {{time}}", 50481 medium: "{{date}}, {{time}}", 50482 short: "{{date}}, {{time}}", 50483 }; 50484 50485 const formatLong = { 50486 date: buildFormatLongFn({ 50487 formats: dateFormats, 50488 defaultWidth: "full", 50489 }), 50490 50491 time: buildFormatLongFn({ 50492 formats: timeFormats, 50493 defaultWidth: "full", 50494 }), 50495 50496 dateTime: buildFormatLongFn({ 50497 formats: dateTimeFormats, 50498 defaultWidth: "full", 50499 }), 50500 }; 50501 50502 ;// ./node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs 50503 const formatRelativeLocale = { 50504 lastWeek: "'last' eeee 'at' p", 50505 yesterday: "'yesterday at' p", 50506 today: "'today at' p", 50507 tomorrow: "'tomorrow at' p", 50508 nextWeek: "eeee 'at' p", 50509 other: "P", 50510 }; 50511 50512 const formatRelative = (token, _date, _baseDate, _options) => 50513 formatRelativeLocale[token]; 50514 50515 ;// ./node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs 50516 /* eslint-disable no-unused-vars */ 50517 50518 /** 50519 * The localize function argument callback which allows to convert raw value to 50520 * the actual type. 50521 * 50522 * @param value - The value to convert 50523 * 50524 * @returns The converted value 50525 */ 50526 50527 /** 50528 * The map of localized values for each width. 50529 */ 50530 50531 /** 50532 * The index type of the locale unit value. It types conversion of units of 50533 * values that don't start at 0 (i.e. quarters). 50534 */ 50535 50536 /** 50537 * Converts the unit value to the tuple of values. 50538 */ 50539 50540 /** 50541 * The tuple of localized era values. The first element represents BC, 50542 * the second element represents AD. 50543 */ 50544 50545 /** 50546 * The tuple of localized quarter values. The first element represents Q1. 50547 */ 50548 50549 /** 50550 * The tuple of localized day values. The first element represents Sunday. 50551 */ 50552 50553 /** 50554 * The tuple of localized month values. The first element represents January. 50555 */ 50556 50557 function buildLocalizeFn(args) { 50558 return (value, options) => { 50559 const context = options?.context ? String(options.context) : "standalone"; 50560 50561 let valuesArray; 50562 if (context === "formatting" && args.formattingValues) { 50563 const defaultWidth = args.defaultFormattingWidth || args.defaultWidth; 50564 const width = options?.width ? String(options.width) : defaultWidth; 50565 50566 valuesArray = 50567 args.formattingValues[width] || args.formattingValues[defaultWidth]; 50568 } else { 50569 const defaultWidth = args.defaultWidth; 50570 const width = options?.width ? String(options.width) : args.defaultWidth; 50571 50572 valuesArray = args.values[width] || args.values[defaultWidth]; 50573 } 50574 const index = args.argumentCallback ? args.argumentCallback(value) : value; 50575 50576 // @ts-expect-error - For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it! 50577 return valuesArray[index]; 50578 }; 50579 } 50580 50581 ;// ./node_modules/date-fns/locale/en-US/_lib/localize.mjs 50582 50583 50584 const eraValues = { 50585 narrow: ["B", "A"], 50586 abbreviated: ["BC", "AD"], 50587 wide: ["Before Christ", "Anno Domini"], 50588 }; 50589 50590 const quarterValues = { 50591 narrow: ["1", "2", "3", "4"], 50592 abbreviated: ["Q1", "Q2", "Q3", "Q4"], 50593 wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"], 50594 }; 50595 50596 // Note: in English, the names of days of the week and months are capitalized. 50597 // If you are making a new locale based on this one, check if the same is true for the language you're working on. 50598 // Generally, formatted dates should look like they are in the middle of a sentence, 50599 // e.g. in Spanish language the weekdays and months should be in the lowercase. 50600 const monthValues = { 50601 narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], 50602 abbreviated: [ 50603 "Jan", 50604 "Feb", 50605 "Mar", 50606 "Apr", 50607 "May", 50608 "Jun", 50609 "Jul", 50610 "Aug", 50611 "Sep", 50612 "Oct", 50613 "Nov", 50614 "Dec", 50615 ], 50616 50617 wide: [ 50618 "January", 50619 "February", 50620 "March", 50621 "April", 50622 "May", 50623 "June", 50624 "July", 50625 "August", 50626 "September", 50627 "October", 50628 "November", 50629 "December", 50630 ], 50631 }; 50632 50633 const dayValues = { 50634 narrow: ["S", "M", "T", "W", "T", "F", "S"], 50635 short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 50636 abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], 50637 wide: [ 50638 "Sunday", 50639 "Monday", 50640 "Tuesday", 50641 "Wednesday", 50642 "Thursday", 50643 "Friday", 50644 "Saturday", 50645 ], 50646 }; 50647 50648 const dayPeriodValues = { 50649 narrow: { 50650 am: "a", 50651 pm: "p", 50652 midnight: "mi", 50653 noon: "n", 50654 morning: "morning", 50655 afternoon: "afternoon", 50656 evening: "evening", 50657 night: "night", 50658 }, 50659 abbreviated: { 50660 am: "AM", 50661 pm: "PM", 50662 midnight: "midnight", 50663 noon: "noon", 50664 morning: "morning", 50665 afternoon: "afternoon", 50666 evening: "evening", 50667 night: "night", 50668 }, 50669 wide: { 50670 am: "a.m.", 50671 pm: "p.m.", 50672 midnight: "midnight", 50673 noon: "noon", 50674 morning: "morning", 50675 afternoon: "afternoon", 50676 evening: "evening", 50677 night: "night", 50678 }, 50679 }; 50680 50681 const formattingDayPeriodValues = { 50682 narrow: { 50683 am: "a", 50684 pm: "p", 50685 midnight: "mi", 50686 noon: "n", 50687 morning: "in the morning", 50688 afternoon: "in the afternoon", 50689 evening: "in the evening", 50690 night: "at night", 50691 }, 50692 abbreviated: { 50693 am: "AM", 50694 pm: "PM", 50695 midnight: "midnight", 50696 noon: "noon", 50697 morning: "in the morning", 50698 afternoon: "in the afternoon", 50699 evening: "in the evening", 50700 night: "at night", 50701 }, 50702 wide: { 50703 am: "a.m.", 50704 pm: "p.m.", 50705 midnight: "midnight", 50706 noon: "noon", 50707 morning: "in the morning", 50708 afternoon: "in the afternoon", 50709 evening: "in the evening", 50710 night: "at night", 50711 }, 50712 }; 50713 50714 const ordinalNumber = (dirtyNumber, _options) => { 50715 const number = Number(dirtyNumber); 50716 50717 // If ordinal numbers depend on context, for example, 50718 // if they are different for different grammatical genders, 50719 // use `options.unit`. 50720 // 50721 // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear', 50722 // 'day', 'hour', 'minute', 'second'. 50723 50724 const rem100 = number % 100; 50725 if (rem100 > 20 || rem100 < 10) { 50726 switch (rem100 % 10) { 50727 case 1: 50728 return number + "st"; 50729 case 2: 50730 return number + "nd"; 50731 case 3: 50732 return number + "rd"; 50733 } 50734 } 50735 return number + "th"; 50736 }; 50737 50738 const localize = { 50739 ordinalNumber, 50740 50741 era: buildLocalizeFn({ 50742 values: eraValues, 50743 defaultWidth: "wide", 50744 }), 50745 50746 quarter: buildLocalizeFn({ 50747 values: quarterValues, 50748 defaultWidth: "wide", 50749 argumentCallback: (quarter) => quarter - 1, 50750 }), 50751 50752 month: buildLocalizeFn({ 50753 values: monthValues, 50754 defaultWidth: "wide", 50755 }), 50756 50757 day: buildLocalizeFn({ 50758 values: dayValues, 50759 defaultWidth: "wide", 50760 }), 50761 50762 dayPeriod: buildLocalizeFn({ 50763 values: dayPeriodValues, 50764 defaultWidth: "wide", 50765 formattingValues: formattingDayPeriodValues, 50766 defaultFormattingWidth: "wide", 50767 }), 50768 }; 50769 50770 ;// ./node_modules/date-fns/locale/_lib/buildMatchFn.mjs 50771 function buildMatchFn(args) { 50772 return (string, options = {}) => { 50773 const width = options.width; 50774 50775 const matchPattern = 50776 (width && args.matchPatterns[width]) || 50777 args.matchPatterns[args.defaultMatchWidth]; 50778 const matchResult = string.match(matchPattern); 50779 50780 if (!matchResult) { 50781 return null; 50782 } 50783 const matchedString = matchResult[0]; 50784 50785 const parsePatterns = 50786 (width && args.parsePatterns[width]) || 50787 args.parsePatterns[args.defaultParseWidth]; 50788 50789 const key = Array.isArray(parsePatterns) 50790 ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) 50791 : // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type 50792 findKey(parsePatterns, (pattern) => pattern.test(matchedString)); 50793 50794 let value; 50795 50796 value = args.valueCallback ? args.valueCallback(key) : key; 50797 value = options.valueCallback 50798 ? // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type 50799 options.valueCallback(value) 50800 : value; 50801 50802 const rest = string.slice(matchedString.length); 50803 50804 return { value, rest }; 50805 }; 50806 } 50807 50808 function findKey(object, predicate) { 50809 for (const key in object) { 50810 if ( 50811 Object.prototype.hasOwnProperty.call(object, key) && 50812 predicate(object[key]) 50813 ) { 50814 return key; 50815 } 50816 } 50817 return undefined; 50818 } 50819 50820 function findIndex(array, predicate) { 50821 for (let key = 0; key < array.length; key++) { 50822 if (predicate(array[key])) { 50823 return key; 50824 } 50825 } 50826 return undefined; 50827 } 50828 50829 ;// ./node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs 50830 function buildMatchPatternFn(args) { 50831 return (string, options = {}) => { 50832 const matchResult = string.match(args.matchPattern); 50833 if (!matchResult) return null; 50834 const matchedString = matchResult[0]; 50835 50836 const parseResult = string.match(args.parsePattern); 50837 if (!parseResult) return null; 50838 let value = args.valueCallback 50839 ? args.valueCallback(parseResult[0]) 50840 : parseResult[0]; 50841 50842 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type 50843 value = options.valueCallback ? options.valueCallback(value) : value; 50844 50845 const rest = string.slice(matchedString.length); 50846 50847 return { value, rest }; 50848 }; 50849 } 50850 50851 ;// ./node_modules/date-fns/locale/en-US/_lib/match.mjs 50852 50853 50854 50855 const matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i; 50856 const parseOrdinalNumberPattern = /\d+/i; 50857 50858 const matchEraPatterns = { 50859 narrow: /^(b|a)/i, 50860 abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i, 50861 wide: /^(before christ|before common era|anno domini|common era)/i, 50862 }; 50863 const parseEraPatterns = { 50864 any: [/^b/i, /^(a|c)/i], 50865 }; 50866 50867 const matchQuarterPatterns = { 50868 narrow: /^[1234]/i, 50869 abbreviated: /^q[1234]/i, 50870 wide: /^[1234](th|st|nd|rd)? quarter/i, 50871 }; 50872 const parseQuarterPatterns = { 50873 any: [/1/i, /2/i, /3/i, /4/i], 50874 }; 50875 50876 const matchMonthPatterns = { 50877 narrow: /^[jfmasond]/i, 50878 abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i, 50879 wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i, 50880 }; 50881 const parseMonthPatterns = { 50882 narrow: [ 50883 /^j/i, 50884 /^f/i, 50885 /^m/i, 50886 /^a/i, 50887 /^m/i, 50888 /^j/i, 50889 /^j/i, 50890 /^a/i, 50891 /^s/i, 50892 /^o/i, 50893 /^n/i, 50894 /^d/i, 50895 ], 50896 50897 any: [ 50898 /^ja/i, 50899 /^f/i, 50900 /^mar/i, 50901 /^ap/i, 50902 /^may/i, 50903 /^jun/i, 50904 /^jul/i, 50905 /^au/i, 50906 /^s/i, 50907 /^o/i, 50908 /^n/i, 50909 /^d/i, 50910 ], 50911 }; 50912 50913 const matchDayPatterns = { 50914 narrow: /^[smtwf]/i, 50915 short: /^(su|mo|tu|we|th|fr|sa)/i, 50916 abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i, 50917 wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i, 50918 }; 50919 const parseDayPatterns = { 50920 narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i], 50921 any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i], 50922 }; 50923 50924 const matchDayPeriodPatterns = { 50925 narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i, 50926 any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i, 50927 }; 50928 const parseDayPeriodPatterns = { 50929 any: { 50930 am: /^a/i, 50931 pm: /^p/i, 50932 midnight: /^mi/i, 50933 noon: /^no/i, 50934 morning: /morning/i, 50935 afternoon: /afternoon/i, 50936 evening: /evening/i, 50937 night: /night/i, 50938 }, 50939 }; 50940 50941 const match_match = { 50942 ordinalNumber: buildMatchPatternFn({ 50943 matchPattern: matchOrdinalNumberPattern, 50944 parsePattern: parseOrdinalNumberPattern, 50945 valueCallback: (value) => parseInt(value, 10), 50946 }), 50947 50948 era: buildMatchFn({ 50949 matchPatterns: matchEraPatterns, 50950 defaultMatchWidth: "wide", 50951 parsePatterns: parseEraPatterns, 50952 defaultParseWidth: "any", 50953 }), 50954 50955 quarter: buildMatchFn({ 50956 matchPatterns: matchQuarterPatterns, 50957 defaultMatchWidth: "wide", 50958 parsePatterns: parseQuarterPatterns, 50959 defaultParseWidth: "any", 50960 valueCallback: (index) => index + 1, 50961 }), 50962 50963 month: buildMatchFn({ 50964 matchPatterns: matchMonthPatterns, 50965 defaultMatchWidth: "wide", 50966 parsePatterns: parseMonthPatterns, 50967 defaultParseWidth: "any", 50968 }), 50969 50970 day: buildMatchFn({ 50971 matchPatterns: matchDayPatterns, 50972 defaultMatchWidth: "wide", 50973 parsePatterns: parseDayPatterns, 50974 defaultParseWidth: "any", 50975 }), 50976 50977 dayPeriod: buildMatchFn({ 50978 matchPatterns: matchDayPeriodPatterns, 50979 defaultMatchWidth: "any", 50980 parsePatterns: parseDayPeriodPatterns, 50981 defaultParseWidth: "any", 50982 }), 50983 }; 50984 50985 ;// ./node_modules/date-fns/locale/en-US.mjs 50986 50987 50988 50989 50990 50991 50992 /** 50993 * @category Locales 50994 * @summary English locale (United States). 50995 * @language English 50996 * @iso-639-2 eng 50997 * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp) 50998 * @author Lesha Koss [@leshakoss](https://github.com/leshakoss) 50999 */ 51000 const enUS = { 51001 code: "en-US", 51002 formatDistance: formatDistance, 51003 formatLong: formatLong, 51004 formatRelative: formatRelative, 51005 localize: localize, 51006 match: match_match, 51007 options: { 51008 weekStartsOn: 0 /* Sunday */, 51009 firstWeekContainsDate: 1, 51010 }, 51011 }; 51012 51013 // Fallback for modularized imports: 51014 /* harmony default export */ const en_US = ((/* unused pure expression or super */ null && (enUS))); 51015 51016 ;// ./node_modules/date-fns/_lib/defaultOptions.mjs 51017 let defaultOptions_defaultOptions = {}; 51018 51019 function getDefaultOptions() { 51020 return defaultOptions_defaultOptions; 51021 } 51022 51023 function setDefaultOptions(newOptions) { 51024 defaultOptions_defaultOptions = newOptions; 51025 } 51026 51027 ;// ./node_modules/date-fns/constants.mjs 51028 /** 51029 * @module constants 51030 * @summary Useful constants 51031 * @description 51032 * Collection of useful date constants. 51033 * 51034 * The constants could be imported from `date-fns/constants`: 51035 * 51036 * ```ts 51037 * import { maxTime, minTime } from "./constants/date-fns/constants"; 51038 * 51039 * function isAllowedTime(time) { 51040 * return time <= maxTime && time >= minTime; 51041 * } 51042 * ``` 51043 */ 51044 51045 /** 51046 * @constant 51047 * @name daysInWeek 51048 * @summary Days in 1 week. 51049 */ 51050 const daysInWeek = 7; 51051 51052 /** 51053 * @constant 51054 * @name daysInYear 51055 * @summary Days in 1 year. 51056 * 51057 * @description 51058 * How many days in a year. 51059 * 51060 * One years equals 365.2425 days according to the formula: 51061 * 51062 * > Leap year occures every 4 years, except for years that are divisable by 100 and not divisable by 400. 51063 * > 1 mean year = (365+1/4-1/100+1/400) days = 365.2425 days 51064 */ 51065 const daysInYear = 365.2425; 51066 51067 /** 51068 * @constant 51069 * @name maxTime 51070 * @summary Maximum allowed time. 51071 * 51072 * @example 51073 * import { maxTime } from "./constants/date-fns/constants"; 51074 * 51075 * const isValid = 8640000000000001 <= maxTime; 51076 * //=> false 51077 * 51078 * new Date(8640000000000001); 51079 * //=> Invalid Date 51080 */ 51081 const maxTime = Math.pow(10, 8) * 24 * 60 * 60 * 1000; 51082 51083 /** 51084 * @constant 51085 * @name minTime 51086 * @summary Minimum allowed time. 51087 * 51088 * @example 51089 * import { minTime } from "./constants/date-fns/constants"; 51090 * 51091 * const isValid = -8640000000000001 >= minTime; 51092 * //=> false 51093 * 51094 * new Date(-8640000000000001) 51095 * //=> Invalid Date 51096 */ 51097 const minTime = -maxTime; 51098 51099 /** 51100 * @constant 51101 * @name millisecondsInWeek 51102 * @summary Milliseconds in 1 week. 51103 */ 51104 const millisecondsInWeek = 604800000; 51105 51106 /** 51107 * @constant 51108 * @name millisecondsInDay 51109 * @summary Milliseconds in 1 day. 51110 */ 51111 const millisecondsInDay = 86400000; 51112 51113 /** 51114 * @constant 51115 * @name millisecondsInMinute 51116 * @summary Milliseconds in 1 minute 51117 */ 51118 const millisecondsInMinute = 60000; 51119 51120 /** 51121 * @constant 51122 * @name millisecondsInHour 51123 * @summary Milliseconds in 1 hour 51124 */ 51125 const millisecondsInHour = 3600000; 51126 51127 /** 51128 * @constant 51129 * @name millisecondsInSecond 51130 * @summary Milliseconds in 1 second 51131 */ 51132 const millisecondsInSecond = 1000; 51133 51134 /** 51135 * @constant 51136 * @name minutesInYear 51137 * @summary Minutes in 1 year. 51138 */ 51139 const minutesInYear = 525600; 51140 51141 /** 51142 * @constant 51143 * @name minutesInMonth 51144 * @summary Minutes in 1 month. 51145 */ 51146 const minutesInMonth = 43200; 51147 51148 /** 51149 * @constant 51150 * @name minutesInDay 51151 * @summary Minutes in 1 day. 51152 */ 51153 const minutesInDay = 1440; 51154 51155 /** 51156 * @constant 51157 * @name minutesInHour 51158 * @summary Minutes in 1 hour. 51159 */ 51160 const minutesInHour = 60; 51161 51162 /** 51163 * @constant 51164 * @name monthsInQuarter 51165 * @summary Months in 1 quarter. 51166 */ 51167 const monthsInQuarter = 3; 51168 51169 /** 51170 * @constant 51171 * @name monthsInYear 51172 * @summary Months in 1 year. 51173 */ 51174 const monthsInYear = 12; 51175 51176 /** 51177 * @constant 51178 * @name quartersInYear 51179 * @summary Quarters in 1 year 51180 */ 51181 const quartersInYear = 4; 51182 51183 /** 51184 * @constant 51185 * @name secondsInHour 51186 * @summary Seconds in 1 hour. 51187 */ 51188 const secondsInHour = 3600; 51189 51190 /** 51191 * @constant 51192 * @name secondsInMinute 51193 * @summary Seconds in 1 minute. 51194 */ 51195 const secondsInMinute = 60; 51196 51197 /** 51198 * @constant 51199 * @name secondsInDay 51200 * @summary Seconds in 1 day. 51201 */ 51202 const secondsInDay = secondsInHour * 24; 51203 51204 /** 51205 * @constant 51206 * @name secondsInWeek 51207 * @summary Seconds in 1 week. 51208 */ 51209 const secondsInWeek = secondsInDay * 7; 51210 51211 /** 51212 * @constant 51213 * @name secondsInYear 51214 * @summary Seconds in 1 year. 51215 */ 51216 const secondsInYear = secondsInDay * daysInYear; 51217 51218 /** 51219 * @constant 51220 * @name secondsInMonth 51221 * @summary Seconds in 1 month 51222 */ 51223 const secondsInMonth = secondsInYear / 12; 51224 51225 /** 51226 * @constant 51227 * @name secondsInQuarter 51228 * @summary Seconds in 1 quarter. 51229 */ 51230 const secondsInQuarter = secondsInMonth * 3; 51231 51232 ;// ./node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.mjs 51233 51234 51235 /** 51236 * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds. 51237 * They usually appear for dates that denote time before the timezones were introduced 51238 * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891 51239 * and GMT+01:00:00 after that date) 51240 * 51241 * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above, 51242 * which would lead to incorrect calculations. 51243 * 51244 * This function returns the timezone offset in milliseconds that takes seconds in account. 51245 */ 51246 function getTimezoneOffsetInMilliseconds(date) { 51247 const _date = toDate(date); 51248 const utcDate = new Date( 51249 Date.UTC( 51250 _date.getFullYear(), 51251 _date.getMonth(), 51252 _date.getDate(), 51253 _date.getHours(), 51254 _date.getMinutes(), 51255 _date.getSeconds(), 51256 _date.getMilliseconds(), 51257 ), 51258 ); 51259 utcDate.setUTCFullYear(_date.getFullYear()); 51260 return +date - +utcDate; 51261 } 51262 51263 ;// ./node_modules/date-fns/differenceInCalendarDays.mjs 51264 51265 51266 51267 51268 /** 51269 * @name differenceInCalendarDays 51270 * @category Day Helpers 51271 * @summary Get the number of calendar days between the given dates. 51272 * 51273 * @description 51274 * Get the number of calendar days between the given dates. This means that the times are removed 51275 * from the dates and then the difference in days is calculated. 51276 * 51277 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51278 * 51279 * @param dateLeft - The later date 51280 * @param dateRight - The earlier date 51281 * 51282 * @returns The number of calendar days 51283 * 51284 * @example 51285 * // How many calendar days are between 51286 * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00? 51287 * const result = differenceInCalendarDays( 51288 * new Date(2012, 6, 2, 0, 0), 51289 * new Date(2011, 6, 2, 23, 0) 51290 * ) 51291 * //=> 366 51292 * // How many calendar days are between 51293 * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00? 51294 * const result = differenceInCalendarDays( 51295 * new Date(2011, 6, 3, 0, 1), 51296 * new Date(2011, 6, 2, 23, 59) 51297 * ) 51298 * //=> 1 51299 */ 51300 function differenceInCalendarDays(dateLeft, dateRight) { 51301 const startOfDayLeft = startOfDay(dateLeft); 51302 const startOfDayRight = startOfDay(dateRight); 51303 51304 const timestampLeft = 51305 +startOfDayLeft - getTimezoneOffsetInMilliseconds(startOfDayLeft); 51306 const timestampRight = 51307 +startOfDayRight - getTimezoneOffsetInMilliseconds(startOfDayRight); 51308 51309 // Round the number of days to the nearest integer because the number of 51310 // milliseconds in a day is not constant (e.g. it's different in the week of 51311 // the daylight saving time clock shift). 51312 return Math.round((timestampLeft - timestampRight) / millisecondsInDay); 51313 } 51314 51315 // Fallback for modularized imports: 51316 /* harmony default export */ const date_fns_differenceInCalendarDays = ((/* unused pure expression or super */ null && (differenceInCalendarDays))); 51317 51318 ;// ./node_modules/date-fns/startOfYear.mjs 51319 51320 51321 51322 /** 51323 * @name startOfYear 51324 * @category Year Helpers 51325 * @summary Return the start of a year for the given date. 51326 * 51327 * @description 51328 * Return the start of a year for the given date. 51329 * The result will be in the local timezone. 51330 * 51331 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51332 * 51333 * @param date - The original date 51334 * 51335 * @returns The start of a year 51336 * 51337 * @example 51338 * // The start of a year for 2 September 2014 11:55:00: 51339 * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00)) 51340 * //=> Wed Jan 01 2014 00:00:00 51341 */ 51342 function startOfYear(date) { 51343 const cleanDate = toDate(date); 51344 const _date = constructFrom(date, 0); 51345 _date.setFullYear(cleanDate.getFullYear(), 0, 1); 51346 _date.setHours(0, 0, 0, 0); 51347 return _date; 51348 } 51349 51350 // Fallback for modularized imports: 51351 /* harmony default export */ const date_fns_startOfYear = ((/* unused pure expression or super */ null && (startOfYear))); 51352 51353 ;// ./node_modules/date-fns/getDayOfYear.mjs 51354 51355 51356 51357 51358 /** 51359 * @name getDayOfYear 51360 * @category Day Helpers 51361 * @summary Get the day of the year of the given date. 51362 * 51363 * @description 51364 * Get the day of the year of the given date. 51365 * 51366 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51367 * 51368 * @param date - The given date 51369 * 51370 * @returns The day of year 51371 * 51372 * @example 51373 * // Which day of the year is 2 July 2014? 51374 * const result = getDayOfYear(new Date(2014, 6, 2)) 51375 * //=> 183 51376 */ 51377 function getDayOfYear(date) { 51378 const _date = toDate(date); 51379 const diff = differenceInCalendarDays(_date, startOfYear(_date)); 51380 const dayOfYear = diff + 1; 51381 return dayOfYear; 51382 } 51383 51384 // Fallback for modularized imports: 51385 /* harmony default export */ const date_fns_getDayOfYear = ((/* unused pure expression or super */ null && (getDayOfYear))); 51386 51387 ;// ./node_modules/date-fns/startOfWeek.mjs 51388 51389 51390 51391 /** 51392 * The {@link startOfWeek} function options. 51393 */ 51394 51395 /** 51396 * @name startOfWeek 51397 * @category Week Helpers 51398 * @summary Return the start of a week for the given date. 51399 * 51400 * @description 51401 * Return the start of a week for the given date. 51402 * The result will be in the local timezone. 51403 * 51404 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51405 * 51406 * @param date - The original date 51407 * @param options - An object with options 51408 * 51409 * @returns The start of a week 51410 * 51411 * @example 51412 * // The start of a week for 2 September 2014 11:55:00: 51413 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0)) 51414 * //=> Sun Aug 31 2014 00:00:00 51415 * 51416 * @example 51417 * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00: 51418 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) 51419 * //=> Mon Sep 01 2014 00:00:00 51420 */ 51421 function startOfWeek(date, options) { 51422 const defaultOptions = getDefaultOptions(); 51423 const weekStartsOn = 51424 options?.weekStartsOn ?? 51425 options?.locale?.options?.weekStartsOn ?? 51426 defaultOptions.weekStartsOn ?? 51427 defaultOptions.locale?.options?.weekStartsOn ?? 51428 0; 51429 51430 const _date = toDate(date); 51431 const day = _date.getDay(); 51432 const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; 51433 51434 _date.setDate(_date.getDate() - diff); 51435 _date.setHours(0, 0, 0, 0); 51436 return _date; 51437 } 51438 51439 // Fallback for modularized imports: 51440 /* harmony default export */ const date_fns_startOfWeek = ((/* unused pure expression or super */ null && (startOfWeek))); 51441 51442 ;// ./node_modules/date-fns/startOfISOWeek.mjs 51443 51444 51445 /** 51446 * @name startOfISOWeek 51447 * @category ISO Week Helpers 51448 * @summary Return the start of an ISO week for the given date. 51449 * 51450 * @description 51451 * Return the start of an ISO week for the given date. 51452 * The result will be in the local timezone. 51453 * 51454 * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date 51455 * 51456 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51457 * 51458 * @param date - The original date 51459 * 51460 * @returns The start of an ISO week 51461 * 51462 * @example 51463 * // The start of an ISO week for 2 September 2014 11:55:00: 51464 * const result = startOfISOWeek(new Date(2014, 8, 2, 11, 55, 0)) 51465 * //=> Mon Sep 01 2014 00:00:00 51466 */ 51467 function startOfISOWeek(date) { 51468 return startOfWeek(date, { weekStartsOn: 1 }); 51469 } 51470 51471 // Fallback for modularized imports: 51472 /* harmony default export */ const date_fns_startOfISOWeek = ((/* unused pure expression or super */ null && (startOfISOWeek))); 51473 51474 ;// ./node_modules/date-fns/getISOWeekYear.mjs 51475 51476 51477 51478 51479 /** 51480 * @name getISOWeekYear 51481 * @category ISO Week-Numbering Year Helpers 51482 * @summary Get the ISO week-numbering year of the given date. 51483 * 51484 * @description 51485 * Get the ISO week-numbering year of the given date, 51486 * which always starts 3 days before the year's first Thursday. 51487 * 51488 * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date 51489 * 51490 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51491 * 51492 * @param date - The given date 51493 * 51494 * @returns The ISO week-numbering year 51495 * 51496 * @example 51497 * // Which ISO-week numbering year is 2 January 2005? 51498 * const result = getISOWeekYear(new Date(2005, 0, 2)) 51499 * //=> 2004 51500 */ 51501 function getISOWeekYear(date) { 51502 const _date = toDate(date); 51503 const year = _date.getFullYear(); 51504 51505 const fourthOfJanuaryOfNextYear = constructFrom(date, 0); 51506 fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4); 51507 fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0); 51508 const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear); 51509 51510 const fourthOfJanuaryOfThisYear = constructFrom(date, 0); 51511 fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4); 51512 fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0); 51513 const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear); 51514 51515 if (_date.getTime() >= startOfNextYear.getTime()) { 51516 return year + 1; 51517 } else if (_date.getTime() >= startOfThisYear.getTime()) { 51518 return year; 51519 } else { 51520 return year - 1; 51521 } 51522 } 51523 51524 // Fallback for modularized imports: 51525 /* harmony default export */ const date_fns_getISOWeekYear = ((/* unused pure expression or super */ null && (getISOWeekYear))); 51526 51527 ;// ./node_modules/date-fns/startOfISOWeekYear.mjs 51528 51529 51530 51531 51532 /** 51533 * @name startOfISOWeekYear 51534 * @category ISO Week-Numbering Year Helpers 51535 * @summary Return the start of an ISO week-numbering year for the given date. 51536 * 51537 * @description 51538 * Return the start of an ISO week-numbering year, 51539 * which always starts 3 days before the year's first Thursday. 51540 * The result will be in the local timezone. 51541 * 51542 * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date 51543 * 51544 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51545 * 51546 * @param date - The original date 51547 * 51548 * @returns The start of an ISO week-numbering year 51549 * 51550 * @example 51551 * // The start of an ISO week-numbering year for 2 July 2005: 51552 * const result = startOfISOWeekYear(new Date(2005, 6, 2)) 51553 * //=> Mon Jan 03 2005 00:00:00 51554 */ 51555 function startOfISOWeekYear(date) { 51556 const year = getISOWeekYear(date); 51557 const fourthOfJanuary = constructFrom(date, 0); 51558 fourthOfJanuary.setFullYear(year, 0, 4); 51559 fourthOfJanuary.setHours(0, 0, 0, 0); 51560 return startOfISOWeek(fourthOfJanuary); 51561 } 51562 51563 // Fallback for modularized imports: 51564 /* harmony default export */ const date_fns_startOfISOWeekYear = ((/* unused pure expression or super */ null && (startOfISOWeekYear))); 51565 51566 ;// ./node_modules/date-fns/getISOWeek.mjs 51567 51568 51569 51570 51571 51572 /** 51573 * @name getISOWeek 51574 * @category ISO Week Helpers 51575 * @summary Get the ISO week of the given date. 51576 * 51577 * @description 51578 * Get the ISO week of the given date. 51579 * 51580 * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date 51581 * 51582 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51583 * 51584 * @param date - The given date 51585 * 51586 * @returns The ISO week 51587 * 51588 * @example 51589 * // Which week of the ISO-week numbering year is 2 January 2005? 51590 * const result = getISOWeek(new Date(2005, 0, 2)) 51591 * //=> 53 51592 */ 51593 function getISOWeek(date) { 51594 const _date = toDate(date); 51595 const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date); 51596 51597 // Round the number of weeks to the nearest integer because the number of 51598 // milliseconds in a week is not constant (e.g. it's different in the week of 51599 // the daylight saving time clock shift). 51600 return Math.round(diff / millisecondsInWeek) + 1; 51601 } 51602 51603 // Fallback for modularized imports: 51604 /* harmony default export */ const date_fns_getISOWeek = ((/* unused pure expression or super */ null && (getISOWeek))); 51605 51606 ;// ./node_modules/date-fns/getWeekYear.mjs 51607 51608 51609 51610 51611 51612 /** 51613 * The {@link getWeekYear} function options. 51614 */ 51615 51616 /** 51617 * @name getWeekYear 51618 * @category Week-Numbering Year Helpers 51619 * @summary Get the local week-numbering year of the given date. 51620 * 51621 * @description 51622 * Get the local week-numbering year of the given date. 51623 * The exact calculation depends on the values of 51624 * `options.weekStartsOn` (which is the index of the first day of the week) 51625 * and `options.firstWeekContainsDate` (which is the day of January, which is always in 51626 * the first week of the week-numbering year) 51627 * 51628 * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system 51629 * 51630 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51631 * 51632 * @param date - The given date 51633 * @param options - An object with options. 51634 * 51635 * @returns The local week-numbering year 51636 * 51637 * @example 51638 * // Which week numbering year is 26 December 2004 with the default settings? 51639 * const result = getWeekYear(new Date(2004, 11, 26)) 51640 * //=> 2005 51641 * 51642 * @example 51643 * // Which week numbering year is 26 December 2004 if week starts on Saturday? 51644 * const result = getWeekYear(new Date(2004, 11, 26), { weekStartsOn: 6 }) 51645 * //=> 2004 51646 * 51647 * @example 51648 * // Which week numbering year is 26 December 2004 if the first week contains 4 January? 51649 * const result = getWeekYear(new Date(2004, 11, 26), { firstWeekContainsDate: 4 }) 51650 * //=> 2004 51651 */ 51652 function getWeekYear(date, options) { 51653 const _date = toDate(date); 51654 const year = _date.getFullYear(); 51655 51656 const defaultOptions = getDefaultOptions(); 51657 const firstWeekContainsDate = 51658 options?.firstWeekContainsDate ?? 51659 options?.locale?.options?.firstWeekContainsDate ?? 51660 defaultOptions.firstWeekContainsDate ?? 51661 defaultOptions.locale?.options?.firstWeekContainsDate ?? 51662 1; 51663 51664 const firstWeekOfNextYear = constructFrom(date, 0); 51665 firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate); 51666 firstWeekOfNextYear.setHours(0, 0, 0, 0); 51667 const startOfNextYear = startOfWeek(firstWeekOfNextYear, options); 51668 51669 const firstWeekOfThisYear = constructFrom(date, 0); 51670 firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate); 51671 firstWeekOfThisYear.setHours(0, 0, 0, 0); 51672 const startOfThisYear = startOfWeek(firstWeekOfThisYear, options); 51673 51674 if (_date.getTime() >= startOfNextYear.getTime()) { 51675 return year + 1; 51676 } else if (_date.getTime() >= startOfThisYear.getTime()) { 51677 return year; 51678 } else { 51679 return year - 1; 51680 } 51681 } 51682 51683 // Fallback for modularized imports: 51684 /* harmony default export */ const date_fns_getWeekYear = ((/* unused pure expression or super */ null && (getWeekYear))); 51685 51686 ;// ./node_modules/date-fns/startOfWeekYear.mjs 51687 51688 51689 51690 51691 51692 /** 51693 * The {@link startOfWeekYear} function options. 51694 */ 51695 51696 /** 51697 * @name startOfWeekYear 51698 * @category Week-Numbering Year Helpers 51699 * @summary Return the start of a local week-numbering year for the given date. 51700 * 51701 * @description 51702 * Return the start of a local week-numbering year. 51703 * The exact calculation depends on the values of 51704 * `options.weekStartsOn` (which is the index of the first day of the week) 51705 * and `options.firstWeekContainsDate` (which is the day of January, which is always in 51706 * the first week of the week-numbering year) 51707 * 51708 * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system 51709 * 51710 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51711 * 51712 * @param date - The original date 51713 * @param options - An object with options 51714 * 51715 * @returns The start of a week-numbering year 51716 * 51717 * @example 51718 * // The start of an a week-numbering year for 2 July 2005 with default settings: 51719 * const result = startOfWeekYear(new Date(2005, 6, 2)) 51720 * //=> Sun Dec 26 2004 00:00:00 51721 * 51722 * @example 51723 * // The start of a week-numbering year for 2 July 2005 51724 * // if Monday is the first day of week 51725 * // and 4 January is always in the first week of the year: 51726 * const result = startOfWeekYear(new Date(2005, 6, 2), { 51727 * weekStartsOn: 1, 51728 * firstWeekContainsDate: 4 51729 * }) 51730 * //=> Mon Jan 03 2005 00:00:00 51731 */ 51732 function startOfWeekYear(date, options) { 51733 const defaultOptions = getDefaultOptions(); 51734 const firstWeekContainsDate = 51735 options?.firstWeekContainsDate ?? 51736 options?.locale?.options?.firstWeekContainsDate ?? 51737 defaultOptions.firstWeekContainsDate ?? 51738 defaultOptions.locale?.options?.firstWeekContainsDate ?? 51739 1; 51740 51741 const year = getWeekYear(date, options); 51742 const firstWeek = constructFrom(date, 0); 51743 firstWeek.setFullYear(year, 0, firstWeekContainsDate); 51744 firstWeek.setHours(0, 0, 0, 0); 51745 const _date = startOfWeek(firstWeek, options); 51746 return _date; 51747 } 51748 51749 // Fallback for modularized imports: 51750 /* harmony default export */ const date_fns_startOfWeekYear = ((/* unused pure expression or super */ null && (startOfWeekYear))); 51751 51752 ;// ./node_modules/date-fns/getWeek.mjs 51753 51754 51755 51756 51757 51758 /** 51759 * The {@link getWeek} function options. 51760 */ 51761 51762 /** 51763 * @name getWeek 51764 * @category Week Helpers 51765 * @summary Get the local week index of the given date. 51766 * 51767 * @description 51768 * Get the local week index of the given date. 51769 * The exact calculation depends on the values of 51770 * `options.weekStartsOn` (which is the index of the first day of the week) 51771 * and `options.firstWeekContainsDate` (which is the day of January, which is always in 51772 * the first week of the week-numbering year) 51773 * 51774 * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system 51775 * 51776 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 51777 * 51778 * @param date - The given date 51779 * @param options - An object with options 51780 * 51781 * @returns The week 51782 * 51783 * @example 51784 * // Which week of the local week numbering year is 2 January 2005 with default options? 51785 * const result = getWeek(new Date(2005, 0, 2)) 51786 * //=> 2 51787 * 51788 * @example 51789 * // Which week of the local week numbering year is 2 January 2005, 51790 * // if Monday is the first day of the week, 51791 * // and the first week of the year always contains 4 January? 51792 * const result = getWeek(new Date(2005, 0, 2), { 51793 * weekStartsOn: 1, 51794 * firstWeekContainsDate: 4 51795 * }) 51796 * //=> 53 51797 */ 51798 51799 function getWeek(date, options) { 51800 const _date = toDate(date); 51801 const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options); 51802 51803 // Round the number of weeks to the nearest integer because the number of 51804 // milliseconds in a week is not constant (e.g. it's different in the week of 51805 // the daylight saving time clock shift). 51806 return Math.round(diff / millisecondsInWeek) + 1; 51807 } 51808 51809 // Fallback for modularized imports: 51810 /* harmony default export */ const date_fns_getWeek = ((/* unused pure expression or super */ null && (getWeek))); 51811 51812 ;// ./node_modules/date-fns/_lib/addLeadingZeros.mjs 51813 function addLeadingZeros(number, targetLength) { 51814 const sign = number < 0 ? "-" : ""; 51815 const output = Math.abs(number).toString().padStart(targetLength, "0"); 51816 return sign + output; 51817 } 51818 51819 ;// ./node_modules/date-fns/_lib/format/lightFormatters.mjs 51820 51821 51822 /* 51823 * | | Unit | | Unit | 51824 * |-----|--------------------------------|-----|--------------------------------| 51825 * | a | AM, PM | A* | | 51826 * | d | Day of month | D | | 51827 * | h | Hour [1-12] | H | Hour [0-23] | 51828 * | m | Minute | M | Month | 51829 * | s | Second | S | Fraction of second | 51830 * | y | Year (abs) | Y | | 51831 * 51832 * Letters marked by * are not implemented but reserved by Unicode standard. 51833 */ 51834 51835 const lightFormatters = { 51836 // Year 51837 y(date, token) { 51838 // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens 51839 // | Year | y | yy | yyy | yyyy | yyyyy | 51840 // |----------|-------|----|-------|-------|-------| 51841 // | AD 1 | 1 | 01 | 001 | 0001 | 00001 | 51842 // | AD 12 | 12 | 12 | 012 | 0012 | 00012 | 51843 // | AD 123 | 123 | 23 | 123 | 0123 | 00123 | 51844 // | AD 1234 | 1234 | 34 | 1234 | 1234 | 01234 | 51845 // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 | 51846 51847 const signedYear = date.getFullYear(); 51848 // Returns 1 for 1 BC (which is year 0 in JavaScript) 51849 const year = signedYear > 0 ? signedYear : 1 - signedYear; 51850 return addLeadingZeros(token === "yy" ? year % 100 : year, token.length); 51851 }, 51852 51853 // Month 51854 M(date, token) { 51855 const month = date.getMonth(); 51856 return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2); 51857 }, 51858 51859 // Day of the month 51860 d(date, token) { 51861 return addLeadingZeros(date.getDate(), token.length); 51862 }, 51863 51864 // AM or PM 51865 a(date, token) { 51866 const dayPeriodEnumValue = date.getHours() / 12 >= 1 ? "pm" : "am"; 51867 51868 switch (token) { 51869 case "a": 51870 case "aa": 51871 return dayPeriodEnumValue.toUpperCase(); 51872 case "aaa": 51873 return dayPeriodEnumValue; 51874 case "aaaaa": 51875 return dayPeriodEnumValue[0]; 51876 case "aaaa": 51877 default: 51878 return dayPeriodEnumValue === "am" ? "a.m." : "p.m."; 51879 } 51880 }, 51881 51882 // Hour [1-12] 51883 h(date, token) { 51884 return addLeadingZeros(date.getHours() % 12 || 12, token.length); 51885 }, 51886 51887 // Hour [0-23] 51888 H(date, token) { 51889 return addLeadingZeros(date.getHours(), token.length); 51890 }, 51891 51892 // Minute 51893 m(date, token) { 51894 return addLeadingZeros(date.getMinutes(), token.length); 51895 }, 51896 51897 // Second 51898 s(date, token) { 51899 return addLeadingZeros(date.getSeconds(), token.length); 51900 }, 51901 51902 // Fraction of second 51903 S(date, token) { 51904 const numberOfDigits = token.length; 51905 const milliseconds = date.getMilliseconds(); 51906 const fractionalSeconds = Math.trunc( 51907 milliseconds * Math.pow(10, numberOfDigits - 3), 51908 ); 51909 return addLeadingZeros(fractionalSeconds, token.length); 51910 }, 51911 }; 51912 51913 ;// ./node_modules/date-fns/_lib/format/formatters.mjs 51914 51915 51916 51917 51918 51919 51920 51921 51922 const dayPeriodEnum = { 51923 am: "am", 51924 pm: "pm", 51925 midnight: "midnight", 51926 noon: "noon", 51927 morning: "morning", 51928 afternoon: "afternoon", 51929 evening: "evening", 51930 night: "night", 51931 }; 51932 51933 /* 51934 * | | Unit | | Unit | 51935 * |-----|--------------------------------|-----|--------------------------------| 51936 * | a | AM, PM | A* | Milliseconds in day | 51937 * | b | AM, PM, noon, midnight | B | Flexible day period | 51938 * | c | Stand-alone local day of week | C* | Localized hour w/ day period | 51939 * | d | Day of month | D | Day of year | 51940 * | e | Local day of week | E | Day of week | 51941 * | f | | F* | Day of week in month | 51942 * | g* | Modified Julian day | G | Era | 51943 * | h | Hour [1-12] | H | Hour [0-23] | 51944 * | i! | ISO day of week | I! | ISO week of year | 51945 * | j* | Localized hour w/ day period | J* | Localized hour w/o day period | 51946 * | k | Hour [1-24] | K | Hour [0-11] | 51947 * | l* | (deprecated) | L | Stand-alone month | 51948 * | m | Minute | M | Month | 51949 * | n | | N | | 51950 * | o! | Ordinal number modifier | O | Timezone (GMT) | 51951 * | p! | Long localized time | P! | Long localized date | 51952 * | q | Stand-alone quarter | Q | Quarter | 51953 * | r* | Related Gregorian year | R! | ISO week-numbering year | 51954 * | s | Second | S | Fraction of second | 51955 * | t! | Seconds timestamp | T! | Milliseconds timestamp | 51956 * | u | Extended year | U* | Cyclic year | 51957 * | v* | Timezone (generic non-locat.) | V* | Timezone (location) | 51958 * | w | Local week of year | W* | Week of month | 51959 * | x | Timezone (ISO-8601 w/o Z) | X | Timezone (ISO-8601) | 51960 * | y | Year (abs) | Y | Local week-numbering year | 51961 * | z | Timezone (specific non-locat.) | Z* | Timezone (aliases) | 51962 * 51963 * Letters marked by * are not implemented but reserved by Unicode standard. 51964 * 51965 * Letters marked by ! are non-standard, but implemented by date-fns: 51966 * - `o` modifies the previous token to turn it into an ordinal (see `format` docs) 51967 * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days, 51968 * i.e. 7 for Sunday, 1 for Monday, etc. 51969 * - `I` is ISO week of year, as opposed to `w` which is local week of year. 51970 * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year. 51971 * `R` is supposed to be used in conjunction with `I` and `i` 51972 * for universal ISO week-numbering date, whereas 51973 * `Y` is supposed to be used in conjunction with `w` and `e` 51974 * for week-numbering date specific to the locale. 51975 * - `P` is long localized date format 51976 * - `p` is long localized time format 51977 */ 51978 51979 const formatters = { 51980 // Era 51981 G: function (date, token, localize) { 51982 const era = date.getFullYear() > 0 ? 1 : 0; 51983 switch (token) { 51984 // AD, BC 51985 case "G": 51986 case "GG": 51987 case "GGG": 51988 return localize.era(era, { width: "abbreviated" }); 51989 // A, B 51990 case "GGGGG": 51991 return localize.era(era, { width: "narrow" }); 51992 // Anno Domini, Before Christ 51993 case "GGGG": 51994 default: 51995 return localize.era(era, { width: "wide" }); 51996 } 51997 }, 51998 51999 // Year 52000 y: function (date, token, localize) { 52001 // Ordinal number 52002 if (token === "yo") { 52003 const signedYear = date.getFullYear(); 52004 // Returns 1 for 1 BC (which is year 0 in JavaScript) 52005 const year = signedYear > 0 ? signedYear : 1 - signedYear; 52006 return localize.ordinalNumber(year, { unit: "year" }); 52007 } 52008 52009 return lightFormatters.y(date, token); 52010 }, 52011 52012 // Local week-numbering year 52013 Y: function (date, token, localize, options) { 52014 const signedWeekYear = getWeekYear(date, options); 52015 // Returns 1 for 1 BC (which is year 0 in JavaScript) 52016 const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; 52017 52018 // Two digit year 52019 if (token === "YY") { 52020 const twoDigitYear = weekYear % 100; 52021 return addLeadingZeros(twoDigitYear, 2); 52022 } 52023 52024 // Ordinal number 52025 if (token === "Yo") { 52026 return localize.ordinalNumber(weekYear, { unit: "year" }); 52027 } 52028 52029 // Padding 52030 return addLeadingZeros(weekYear, token.length); 52031 }, 52032 52033 // ISO week-numbering year 52034 R: function (date, token) { 52035 const isoWeekYear = getISOWeekYear(date); 52036 52037 // Padding 52038 return addLeadingZeros(isoWeekYear, token.length); 52039 }, 52040 52041 // Extended year. This is a single number designating the year of this calendar system. 52042 // The main difference between `y` and `u` localizers are B.C. years: 52043 // | Year | `y` | `u` | 52044 // |------|-----|-----| 52045 // | AC 1 | 1 | 1 | 52046 // | BC 1 | 1 | 0 | 52047 // | BC 2 | 2 | -1 | 52048 // Also `yy` always returns the last two digits of a year, 52049 // while `uu` pads single digit years to 2 characters and returns other years unchanged. 52050 u: function (date, token) { 52051 const year = date.getFullYear(); 52052 return addLeadingZeros(year, token.length); 52053 }, 52054 52055 // Quarter 52056 Q: function (date, token, localize) { 52057 const quarter = Math.ceil((date.getMonth() + 1) / 3); 52058 switch (token) { 52059 // 1, 2, 3, 4 52060 case "Q": 52061 return String(quarter); 52062 // 01, 02, 03, 04 52063 case "QQ": 52064 return addLeadingZeros(quarter, 2); 52065 // 1st, 2nd, 3rd, 4th 52066 case "Qo": 52067 return localize.ordinalNumber(quarter, { unit: "quarter" }); 52068 // Q1, Q2, Q3, Q4 52069 case "QQQ": 52070 return localize.quarter(quarter, { 52071 width: "abbreviated", 52072 context: "formatting", 52073 }); 52074 // 1, 2, 3, 4 (narrow quarter; could be not numerical) 52075 case "QQQQQ": 52076 return localize.quarter(quarter, { 52077 width: "narrow", 52078 context: "formatting", 52079 }); 52080 // 1st quarter, 2nd quarter, ... 52081 case "QQQQ": 52082 default: 52083 return localize.quarter(quarter, { 52084 width: "wide", 52085 context: "formatting", 52086 }); 52087 } 52088 }, 52089 52090 // Stand-alone quarter 52091 q: function (date, token, localize) { 52092 const quarter = Math.ceil((date.getMonth() + 1) / 3); 52093 switch (token) { 52094 // 1, 2, 3, 4 52095 case "q": 52096 return String(quarter); 52097 // 01, 02, 03, 04 52098 case "qq": 52099 return addLeadingZeros(quarter, 2); 52100 // 1st, 2nd, 3rd, 4th 52101 case "qo": 52102 return localize.ordinalNumber(quarter, { unit: "quarter" }); 52103 // Q1, Q2, Q3, Q4 52104 case "qqq": 52105 return localize.quarter(quarter, { 52106 width: "abbreviated", 52107 context: "standalone", 52108 }); 52109 // 1, 2, 3, 4 (narrow quarter; could be not numerical) 52110 case "qqqqq": 52111 return localize.quarter(quarter, { 52112 width: "narrow", 52113 context: "standalone", 52114 }); 52115 // 1st quarter, 2nd quarter, ... 52116 case "qqqq": 52117 default: 52118 return localize.quarter(quarter, { 52119 width: "wide", 52120 context: "standalone", 52121 }); 52122 } 52123 }, 52124 52125 // Month 52126 M: function (date, token, localize) { 52127 const month = date.getMonth(); 52128 switch (token) { 52129 case "M": 52130 case "MM": 52131 return lightFormatters.M(date, token); 52132 // 1st, 2nd, ..., 12th 52133 case "Mo": 52134 return localize.ordinalNumber(month + 1, { unit: "month" }); 52135 // Jan, Feb, ..., Dec 52136 case "MMM": 52137 return localize.month(month, { 52138 width: "abbreviated", 52139 context: "formatting", 52140 }); 52141 // J, F, ..., D 52142 case "MMMMM": 52143 return localize.month(month, { 52144 width: "narrow", 52145 context: "formatting", 52146 }); 52147 // January, February, ..., December 52148 case "MMMM": 52149 default: 52150 return localize.month(month, { width: "wide", context: "formatting" }); 52151 } 52152 }, 52153 52154 // Stand-alone month 52155 L: function (date, token, localize) { 52156 const month = date.getMonth(); 52157 switch (token) { 52158 // 1, 2, ..., 12 52159 case "L": 52160 return String(month + 1); 52161 // 01, 02, ..., 12 52162 case "LL": 52163 return addLeadingZeros(month + 1, 2); 52164 // 1st, 2nd, ..., 12th 52165 case "Lo": 52166 return localize.ordinalNumber(month + 1, { unit: "month" }); 52167 // Jan, Feb, ..., Dec 52168 case "LLL": 52169 return localize.month(month, { 52170 width: "abbreviated", 52171 context: "standalone", 52172 }); 52173 // J, F, ..., D 52174 case "LLLLL": 52175 return localize.month(month, { 52176 width: "narrow", 52177 context: "standalone", 52178 }); 52179 // January, February, ..., December 52180 case "LLLL": 52181 default: 52182 return localize.month(month, { width: "wide", context: "standalone" }); 52183 } 52184 }, 52185 52186 // Local week of year 52187 w: function (date, token, localize, options) { 52188 const week = getWeek(date, options); 52189 52190 if (token === "wo") { 52191 return localize.ordinalNumber(week, { unit: "week" }); 52192 } 52193 52194 return addLeadingZeros(week, token.length); 52195 }, 52196 52197 // ISO week of year 52198 I: function (date, token, localize) { 52199 const isoWeek = getISOWeek(date); 52200 52201 if (token === "Io") { 52202 return localize.ordinalNumber(isoWeek, { unit: "week" }); 52203 } 52204 52205 return addLeadingZeros(isoWeek, token.length); 52206 }, 52207 52208 // Day of the month 52209 d: function (date, token, localize) { 52210 if (token === "do") { 52211 return localize.ordinalNumber(date.getDate(), { unit: "date" }); 52212 } 52213 52214 return lightFormatters.d(date, token); 52215 }, 52216 52217 // Day of year 52218 D: function (date, token, localize) { 52219 const dayOfYear = getDayOfYear(date); 52220 52221 if (token === "Do") { 52222 return localize.ordinalNumber(dayOfYear, { unit: "dayOfYear" }); 52223 } 52224 52225 return addLeadingZeros(dayOfYear, token.length); 52226 }, 52227 52228 // Day of week 52229 E: function (date, token, localize) { 52230 const dayOfWeek = date.getDay(); 52231 switch (token) { 52232 // Tue 52233 case "E": 52234 case "EE": 52235 case "EEE": 52236 return localize.day(dayOfWeek, { 52237 width: "abbreviated", 52238 context: "formatting", 52239 }); 52240 // T 52241 case "EEEEE": 52242 return localize.day(dayOfWeek, { 52243 width: "narrow", 52244 context: "formatting", 52245 }); 52246 // Tu 52247 case "EEEEEE": 52248 return localize.day(dayOfWeek, { 52249 width: "short", 52250 context: "formatting", 52251 }); 52252 // Tuesday 52253 case "EEEE": 52254 default: 52255 return localize.day(dayOfWeek, { 52256 width: "wide", 52257 context: "formatting", 52258 }); 52259 } 52260 }, 52261 52262 // Local day of week 52263 e: function (date, token, localize, options) { 52264 const dayOfWeek = date.getDay(); 52265 const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; 52266 switch (token) { 52267 // Numerical value (Nth day of week with current locale or weekStartsOn) 52268 case "e": 52269 return String(localDayOfWeek); 52270 // Padded numerical value 52271 case "ee": 52272 return addLeadingZeros(localDayOfWeek, 2); 52273 // 1st, 2nd, ..., 7th 52274 case "eo": 52275 return localize.ordinalNumber(localDayOfWeek, { unit: "day" }); 52276 case "eee": 52277 return localize.day(dayOfWeek, { 52278 width: "abbreviated", 52279 context: "formatting", 52280 }); 52281 // T 52282 case "eeeee": 52283 return localize.day(dayOfWeek, { 52284 width: "narrow", 52285 context: "formatting", 52286 }); 52287 // Tu 52288 case "eeeeee": 52289 return localize.day(dayOfWeek, { 52290 width: "short", 52291 context: "formatting", 52292 }); 52293 // Tuesday 52294 case "eeee": 52295 default: 52296 return localize.day(dayOfWeek, { 52297 width: "wide", 52298 context: "formatting", 52299 }); 52300 } 52301 }, 52302 52303 // Stand-alone local day of week 52304 c: function (date, token, localize, options) { 52305 const dayOfWeek = date.getDay(); 52306 const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; 52307 switch (token) { 52308 // Numerical value (same as in `e`) 52309 case "c": 52310 return String(localDayOfWeek); 52311 // Padded numerical value 52312 case "cc": 52313 return addLeadingZeros(localDayOfWeek, token.length); 52314 // 1st, 2nd, ..., 7th 52315 case "co": 52316 return localize.ordinalNumber(localDayOfWeek, { unit: "day" }); 52317 case "ccc": 52318 return localize.day(dayOfWeek, { 52319 width: "abbreviated", 52320 context: "standalone", 52321 }); 52322 // T 52323 case "ccccc": 52324 return localize.day(dayOfWeek, { 52325 width: "narrow", 52326 context: "standalone", 52327 }); 52328 // Tu 52329 case "cccccc": 52330 return localize.day(dayOfWeek, { 52331 width: "short", 52332 context: "standalone", 52333 }); 52334 // Tuesday 52335 case "cccc": 52336 default: 52337 return localize.day(dayOfWeek, { 52338 width: "wide", 52339 context: "standalone", 52340 }); 52341 } 52342 }, 52343 52344 // ISO day of week 52345 i: function (date, token, localize) { 52346 const dayOfWeek = date.getDay(); 52347 const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; 52348 switch (token) { 52349 // 2 52350 case "i": 52351 return String(isoDayOfWeek); 52352 // 02 52353 case "ii": 52354 return addLeadingZeros(isoDayOfWeek, token.length); 52355 // 2nd 52356 case "io": 52357 return localize.ordinalNumber(isoDayOfWeek, { unit: "day" }); 52358 // Tue 52359 case "iii": 52360 return localize.day(dayOfWeek, { 52361 width: "abbreviated", 52362 context: "formatting", 52363 }); 52364 // T 52365 case "iiiii": 52366 return localize.day(dayOfWeek, { 52367 width: "narrow", 52368 context: "formatting", 52369 }); 52370 // Tu 52371 case "iiiiii": 52372 return localize.day(dayOfWeek, { 52373 width: "short", 52374 context: "formatting", 52375 }); 52376 // Tuesday 52377 case "iiii": 52378 default: 52379 return localize.day(dayOfWeek, { 52380 width: "wide", 52381 context: "formatting", 52382 }); 52383 } 52384 }, 52385 52386 // AM or PM 52387 a: function (date, token, localize) { 52388 const hours = date.getHours(); 52389 const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am"; 52390 52391 switch (token) { 52392 case "a": 52393 case "aa": 52394 return localize.dayPeriod(dayPeriodEnumValue, { 52395 width: "abbreviated", 52396 context: "formatting", 52397 }); 52398 case "aaa": 52399 return localize 52400 .dayPeriod(dayPeriodEnumValue, { 52401 width: "abbreviated", 52402 context: "formatting", 52403 }) 52404 .toLowerCase(); 52405 case "aaaaa": 52406 return localize.dayPeriod(dayPeriodEnumValue, { 52407 width: "narrow", 52408 context: "formatting", 52409 }); 52410 case "aaaa": 52411 default: 52412 return localize.dayPeriod(dayPeriodEnumValue, { 52413 width: "wide", 52414 context: "formatting", 52415 }); 52416 } 52417 }, 52418 52419 // AM, PM, midnight, noon 52420 b: function (date, token, localize) { 52421 const hours = date.getHours(); 52422 let dayPeriodEnumValue; 52423 if (hours === 12) { 52424 dayPeriodEnumValue = dayPeriodEnum.noon; 52425 } else if (hours === 0) { 52426 dayPeriodEnumValue = dayPeriodEnum.midnight; 52427 } else { 52428 dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am"; 52429 } 52430 52431 switch (token) { 52432 case "b": 52433 case "bb": 52434 return localize.dayPeriod(dayPeriodEnumValue, { 52435 width: "abbreviated", 52436 context: "formatting", 52437 }); 52438 case "bbb": 52439 return localize 52440 .dayPeriod(dayPeriodEnumValue, { 52441 width: "abbreviated", 52442 context: "formatting", 52443 }) 52444 .toLowerCase(); 52445 case "bbbbb": 52446 return localize.dayPeriod(dayPeriodEnumValue, { 52447 width: "narrow", 52448 context: "formatting", 52449 }); 52450 case "bbbb": 52451 default: 52452 return localize.dayPeriod(dayPeriodEnumValue, { 52453 width: "wide", 52454 context: "formatting", 52455 }); 52456 } 52457 }, 52458 52459 // in the morning, in the afternoon, in the evening, at night 52460 B: function (date, token, localize) { 52461 const hours = date.getHours(); 52462 let dayPeriodEnumValue; 52463 if (hours >= 17) { 52464 dayPeriodEnumValue = dayPeriodEnum.evening; 52465 } else if (hours >= 12) { 52466 dayPeriodEnumValue = dayPeriodEnum.afternoon; 52467 } else if (hours >= 4) { 52468 dayPeriodEnumValue = dayPeriodEnum.morning; 52469 } else { 52470 dayPeriodEnumValue = dayPeriodEnum.night; 52471 } 52472 52473 switch (token) { 52474 case "B": 52475 case "BB": 52476 case "BBB": 52477 return localize.dayPeriod(dayPeriodEnumValue, { 52478 width: "abbreviated", 52479 context: "formatting", 52480 }); 52481 case "BBBBB": 52482 return localize.dayPeriod(dayPeriodEnumValue, { 52483 width: "narrow", 52484 context: "formatting", 52485 }); 52486 case "BBBB": 52487 default: 52488 return localize.dayPeriod(dayPeriodEnumValue, { 52489 width: "wide", 52490 context: "formatting", 52491 }); 52492 } 52493 }, 52494 52495 // Hour [1-12] 52496 h: function (date, token, localize) { 52497 if (token === "ho") { 52498 let hours = date.getHours() % 12; 52499 if (hours === 0) hours = 12; 52500 return localize.ordinalNumber(hours, { unit: "hour" }); 52501 } 52502 52503 return lightFormatters.h(date, token); 52504 }, 52505 52506 // Hour [0-23] 52507 H: function (date, token, localize) { 52508 if (token === "Ho") { 52509 return localize.ordinalNumber(date.getHours(), { unit: "hour" }); 52510 } 52511 52512 return lightFormatters.H(date, token); 52513 }, 52514 52515 // Hour [0-11] 52516 K: function (date, token, localize) { 52517 const hours = date.getHours() % 12; 52518 52519 if (token === "Ko") { 52520 return localize.ordinalNumber(hours, { unit: "hour" }); 52521 } 52522 52523 return addLeadingZeros(hours, token.length); 52524 }, 52525 52526 // Hour [1-24] 52527 k: function (date, token, localize) { 52528 let hours = date.getHours(); 52529 if (hours === 0) hours = 24; 52530 52531 if (token === "ko") { 52532 return localize.ordinalNumber(hours, { unit: "hour" }); 52533 } 52534 52535 return addLeadingZeros(hours, token.length); 52536 }, 52537 52538 // Minute 52539 m: function (date, token, localize) { 52540 if (token === "mo") { 52541 return localize.ordinalNumber(date.getMinutes(), { unit: "minute" }); 52542 } 52543 52544 return lightFormatters.m(date, token); 52545 }, 52546 52547 // Second 52548 s: function (date, token, localize) { 52549 if (token === "so") { 52550 return localize.ordinalNumber(date.getSeconds(), { unit: "second" }); 52551 } 52552 52553 return lightFormatters.s(date, token); 52554 }, 52555 52556 // Fraction of second 52557 S: function (date, token) { 52558 return lightFormatters.S(date, token); 52559 }, 52560 52561 // Timezone (ISO-8601. If offset is 0, output is always `'Z'`) 52562 X: function (date, token, _localize) { 52563 const timezoneOffset = date.getTimezoneOffset(); 52564 52565 if (timezoneOffset === 0) { 52566 return "Z"; 52567 } 52568 52569 switch (token) { 52570 // Hours and optional minutes 52571 case "X": 52572 return formatTimezoneWithOptionalMinutes(timezoneOffset); 52573 52574 // Hours, minutes and optional seconds without `:` delimiter 52575 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 52576 // so this token always has the same output as `XX` 52577 case "XXXX": 52578 case "XX": // Hours and minutes without `:` delimiter 52579 return formatTimezone(timezoneOffset); 52580 52581 // Hours, minutes and optional seconds with `:` delimiter 52582 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 52583 // so this token always has the same output as `XXX` 52584 case "XXXXX": 52585 case "XXX": // Hours and minutes with `:` delimiter 52586 default: 52587 return formatTimezone(timezoneOffset, ":"); 52588 } 52589 }, 52590 52591 // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent) 52592 x: function (date, token, _localize) { 52593 const timezoneOffset = date.getTimezoneOffset(); 52594 52595 switch (token) { 52596 // Hours and optional minutes 52597 case "x": 52598 return formatTimezoneWithOptionalMinutes(timezoneOffset); 52599 52600 // Hours, minutes and optional seconds without `:` delimiter 52601 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 52602 // so this token always has the same output as `xx` 52603 case "xxxx": 52604 case "xx": // Hours and minutes without `:` delimiter 52605 return formatTimezone(timezoneOffset); 52606 52607 // Hours, minutes and optional seconds with `:` delimiter 52608 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 52609 // so this token always has the same output as `xxx` 52610 case "xxxxx": 52611 case "xxx": // Hours and minutes with `:` delimiter 52612 default: 52613 return formatTimezone(timezoneOffset, ":"); 52614 } 52615 }, 52616 52617 // Timezone (GMT) 52618 O: function (date, token, _localize) { 52619 const timezoneOffset = date.getTimezoneOffset(); 52620 52621 switch (token) { 52622 // Short 52623 case "O": 52624 case "OO": 52625 case "OOO": 52626 return "GMT" + formatTimezoneShort(timezoneOffset, ":"); 52627 // Long 52628 case "OOOO": 52629 default: 52630 return "GMT" + formatTimezone(timezoneOffset, ":"); 52631 } 52632 }, 52633 52634 // Timezone (specific non-location) 52635 z: function (date, token, _localize) { 52636 const timezoneOffset = date.getTimezoneOffset(); 52637 52638 switch (token) { 52639 // Short 52640 case "z": 52641 case "zz": 52642 case "zzz": 52643 return "GMT" + formatTimezoneShort(timezoneOffset, ":"); 52644 // Long 52645 case "zzzz": 52646 default: 52647 return "GMT" + formatTimezone(timezoneOffset, ":"); 52648 } 52649 }, 52650 52651 // Seconds timestamp 52652 t: function (date, token, _localize) { 52653 const timestamp = Math.trunc(date.getTime() / 1000); 52654 return addLeadingZeros(timestamp, token.length); 52655 }, 52656 52657 // Milliseconds timestamp 52658 T: function (date, token, _localize) { 52659 const timestamp = date.getTime(); 52660 return addLeadingZeros(timestamp, token.length); 52661 }, 52662 }; 52663 52664 function formatTimezoneShort(offset, delimiter = "") { 52665 const sign = offset > 0 ? "-" : "+"; 52666 const absOffset = Math.abs(offset); 52667 const hours = Math.trunc(absOffset / 60); 52668 const minutes = absOffset % 60; 52669 if (minutes === 0) { 52670 return sign + String(hours); 52671 } 52672 return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2); 52673 } 52674 52675 function formatTimezoneWithOptionalMinutes(offset, delimiter) { 52676 if (offset % 60 === 0) { 52677 const sign = offset > 0 ? "-" : "+"; 52678 return sign + addLeadingZeros(Math.abs(offset) / 60, 2); 52679 } 52680 return formatTimezone(offset, delimiter); 52681 } 52682 52683 function formatTimezone(offset, delimiter = "") { 52684 const sign = offset > 0 ? "-" : "+"; 52685 const absOffset = Math.abs(offset); 52686 const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2); 52687 const minutes = addLeadingZeros(absOffset % 60, 2); 52688 return sign + hours + delimiter + minutes; 52689 } 52690 52691 ;// ./node_modules/date-fns/_lib/format/longFormatters.mjs 52692 const dateLongFormatter = (pattern, formatLong) => { 52693 switch (pattern) { 52694 case "P": 52695 return formatLong.date({ width: "short" }); 52696 case "PP": 52697 return formatLong.date({ width: "medium" }); 52698 case "PPP": 52699 return formatLong.date({ width: "long" }); 52700 case "PPPP": 52701 default: 52702 return formatLong.date({ width: "full" }); 52703 } 52704 }; 52705 52706 const timeLongFormatter = (pattern, formatLong) => { 52707 switch (pattern) { 52708 case "p": 52709 return formatLong.time({ width: "short" }); 52710 case "pp": 52711 return formatLong.time({ width: "medium" }); 52712 case "ppp": 52713 return formatLong.time({ width: "long" }); 52714 case "pppp": 52715 default: 52716 return formatLong.time({ width: "full" }); 52717 } 52718 }; 52719 52720 const dateTimeLongFormatter = (pattern, formatLong) => { 52721 const matchResult = pattern.match(/(P+)(p+)?/) || []; 52722 const datePattern = matchResult[1]; 52723 const timePattern = matchResult[2]; 52724 52725 if (!timePattern) { 52726 return dateLongFormatter(pattern, formatLong); 52727 } 52728 52729 let dateTimeFormat; 52730 52731 switch (datePattern) { 52732 case "P": 52733 dateTimeFormat = formatLong.dateTime({ width: "short" }); 52734 break; 52735 case "PP": 52736 dateTimeFormat = formatLong.dateTime({ width: "medium" }); 52737 break; 52738 case "PPP": 52739 dateTimeFormat = formatLong.dateTime({ width: "long" }); 52740 break; 52741 case "PPPP": 52742 default: 52743 dateTimeFormat = formatLong.dateTime({ width: "full" }); 52744 break; 52745 } 52746 52747 return dateTimeFormat 52748 .replace("{{date}}", dateLongFormatter(datePattern, formatLong)) 52749 .replace("{{time}}", timeLongFormatter(timePattern, formatLong)); 52750 }; 52751 52752 const longFormatters = { 52753 p: timeLongFormatter, 52754 P: dateTimeLongFormatter, 52755 }; 52756 52757 ;// ./node_modules/date-fns/_lib/protectedTokens.mjs 52758 const dayOfYearTokenRE = /^D+$/; 52759 const weekYearTokenRE = /^Y+$/; 52760 52761 const throwTokens = ["D", "DD", "YY", "YYYY"]; 52762 52763 function isProtectedDayOfYearToken(token) { 52764 return dayOfYearTokenRE.test(token); 52765 } 52766 52767 function isProtectedWeekYearToken(token) { 52768 return weekYearTokenRE.test(token); 52769 } 52770 52771 function warnOrThrowProtectedError(token, format, input) { 52772 const _message = message(token, format, input); 52773 console.warn(_message); 52774 if (throwTokens.includes(token)) throw new RangeError(_message); 52775 } 52776 52777 function message(token, format, input) { 52778 const subject = token[0] === "Y" ? "years" : "days of the month"; 52779 return `Use \`$token.toLowerCase()}\` instead of \`$token}\` (in \`$format}\`) for formatting $subject} to the input \`$input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`; 52780 } 52781 52782 ;// ./node_modules/date-fns/isDate.mjs 52783 /** 52784 * @name isDate 52785 * @category Common Helpers 52786 * @summary Is the given value a date? 52787 * 52788 * @description 52789 * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes. 52790 * 52791 * @param value - The value to check 52792 * 52793 * @returns True if the given value is a date 52794 * 52795 * @example 52796 * // For a valid date: 52797 * const result = isDate(new Date()) 52798 * //=> true 52799 * 52800 * @example 52801 * // For an invalid date: 52802 * const result = isDate(new Date(NaN)) 52803 * //=> true 52804 * 52805 * @example 52806 * // For some value: 52807 * const result = isDate('2014-02-31') 52808 * //=> false 52809 * 52810 * @example 52811 * // For an object: 52812 * const result = isDate({}) 52813 * //=> false 52814 */ 52815 function isDate(value) { 52816 return ( 52817 value instanceof Date || 52818 (typeof value === "object" && 52819 Object.prototype.toString.call(value) === "[object Date]") 52820 ); 52821 } 52822 52823 // Fallback for modularized imports: 52824 /* harmony default export */ const date_fns_isDate = ((/* unused pure expression or super */ null && (isDate))); 52825 52826 ;// ./node_modules/date-fns/isValid.mjs 52827 52828 52829 52830 /** 52831 * @name isValid 52832 * @category Common Helpers 52833 * @summary Is the given date valid? 52834 * 52835 * @description 52836 * Returns false if argument is Invalid Date and true otherwise. 52837 * Argument is converted to Date using `toDate`. See [toDate](https://date-fns.org/docs/toDate) 52838 * Invalid Date is a Date, whose time value is NaN. 52839 * 52840 * Time value of Date: http://es5.github.io/#x15.9.1.1 52841 * 52842 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 52843 * 52844 * @param date - The date to check 52845 * 52846 * @returns The date is valid 52847 * 52848 * @example 52849 * // For the valid date: 52850 * const result = isValid(new Date(2014, 1, 31)) 52851 * //=> true 52852 * 52853 * @example 52854 * // For the value, convertable into a date: 52855 * const result = isValid(1393804800000) 52856 * //=> true 52857 * 52858 * @example 52859 * // For the invalid date: 52860 * const result = isValid(new Date('')) 52861 * //=> false 52862 */ 52863 function isValid(date) { 52864 if (!isDate(date) && typeof date !== "number") { 52865 return false; 52866 } 52867 const _date = toDate(date); 52868 return !isNaN(Number(_date)); 52869 } 52870 52871 // Fallback for modularized imports: 52872 /* harmony default export */ const date_fns_isValid = ((/* unused pure expression or super */ null && (isValid))); 52873 52874 ;// ./node_modules/date-fns/format.mjs 52875 52876 52877 52878 52879 52880 52881 52882 52883 // Rexports of internal for libraries to use. 52884 // See: https://github.com/date-fns/date-fns/issues/3638#issuecomment-1877082874 52885 52886 52887 // This RegExp consists of three parts separated by `|`: 52888 // - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token 52889 // (one of the certain letters followed by `o`) 52890 // - (\w)\1* matches any sequences of the same letter 52891 // - '' matches two quote characters in a row 52892 // - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('), 52893 // except a single quote symbol, which ends the sequence. 52894 // Two quote characters do not end the sequence. 52895 // If there is no matching single quote 52896 // then the sequence will continue until the end of the string. 52897 // - . matches any single character unmatched by previous parts of the RegExps 52898 const formattingTokensRegExp = 52899 /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; 52900 52901 // This RegExp catches symbols escaped by quotes, and also 52902 // sequences of symbols P, p, and the combinations like `PPPPPPPppppp` 52903 const longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; 52904 52905 const escapedStringRegExp = /^'([^]*?)'?$/; 52906 const doubleQuoteRegExp = /''/g; 52907 const unescapedLatinCharacterRegExp = /[a-zA-Z]/; 52908 52909 52910 52911 /** 52912 * The {@link format} function options. 52913 */ 52914 52915 /** 52916 * @name format 52917 * @alias formatDate 52918 * @category Common Helpers 52919 * @summary Format the date. 52920 * 52921 * @description 52922 * Return the formatted date string in the given format. The result may vary by locale. 52923 * 52924 * > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries. 52925 * > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 52926 * 52927 * The characters wrapped between two single quotes characters (') are escaped. 52928 * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote. 52929 * (see the last example) 52930 * 52931 * Format of the string is based on Unicode Technical Standard #35: 52932 * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table 52933 * with a few additions (see note 7 below the table). 52934 * 52935 * Accepted patterns: 52936 * | Unit | Pattern | Result examples | Notes | 52937 * |---------------------------------|---------|-----------------------------------|-------| 52938 * | Era | G..GGG | AD, BC | | 52939 * | | GGGG | Anno Domini, Before Christ | 2 | 52940 * | | GGGGG | A, B | | 52941 * | Calendar year | y | 44, 1, 1900, 2017 | 5 | 52942 * | | yo | 44th, 1st, 0th, 17th | 5,7 | 52943 * | | yy | 44, 01, 00, 17 | 5 | 52944 * | | yyy | 044, 001, 1900, 2017 | 5 | 52945 * | | yyyy | 0044, 0001, 1900, 2017 | 5 | 52946 * | | yyyyy | ... | 3,5 | 52947 * | Local week-numbering year | Y | 44, 1, 1900, 2017 | 5 | 52948 * | | Yo | 44th, 1st, 1900th, 2017th | 5,7 | 52949 * | | YY | 44, 01, 00, 17 | 5,8 | 52950 * | | YYY | 044, 001, 1900, 2017 | 5 | 52951 * | | YYYY | 0044, 0001, 1900, 2017 | 5,8 | 52952 * | | YYYYY | ... | 3,5 | 52953 * | ISO week-numbering year | R | -43, 0, 1, 1900, 2017 | 5,7 | 52954 * | | RR | -43, 00, 01, 1900, 2017 | 5,7 | 52955 * | | RRR | -043, 000, 001, 1900, 2017 | 5,7 | 52956 * | | RRRR | -0043, 0000, 0001, 1900, 2017 | 5,7 | 52957 * | | RRRRR | ... | 3,5,7 | 52958 * | Extended year | u | -43, 0, 1, 1900, 2017 | 5 | 52959 * | | uu | -43, 01, 1900, 2017 | 5 | 52960 * | | uuu | -043, 001, 1900, 2017 | 5 | 52961 * | | uuuu | -0043, 0001, 1900, 2017 | 5 | 52962 * | | uuuuu | ... | 3,5 | 52963 * | Quarter (formatting) | Q | 1, 2, 3, 4 | | 52964 * | | Qo | 1st, 2nd, 3rd, 4th | 7 | 52965 * | | QQ | 01, 02, 03, 04 | | 52966 * | | QQQ | Q1, Q2, Q3, Q4 | | 52967 * | | QQQQ | 1st quarter, 2nd quarter, ... | 2 | 52968 * | | QQQQQ | 1, 2, 3, 4 | 4 | 52969 * | Quarter (stand-alone) | q | 1, 2, 3, 4 | | 52970 * | | qo | 1st, 2nd, 3rd, 4th | 7 | 52971 * | | qq | 01, 02, 03, 04 | | 52972 * | | qqq | Q1, Q2, Q3, Q4 | | 52973 * | | qqqq | 1st quarter, 2nd quarter, ... | 2 | 52974 * | | qqqqq | 1, 2, 3, 4 | 4 | 52975 * | Month (formatting) | M | 1, 2, ..., 12 | | 52976 * | | Mo | 1st, 2nd, ..., 12th | 7 | 52977 * | | MM | 01, 02, ..., 12 | | 52978 * | | MMM | Jan, Feb, ..., Dec | | 52979 * | | MMMM | January, February, ..., December | 2 | 52980 * | | MMMMM | J, F, ..., D | | 52981 * | Month (stand-alone) | L | 1, 2, ..., 12 | | 52982 * | | Lo | 1st, 2nd, ..., 12th | 7 | 52983 * | | LL | 01, 02, ..., 12 | | 52984 * | | LLL | Jan, Feb, ..., Dec | | 52985 * | | LLLL | January, February, ..., December | 2 | 52986 * | | LLLLL | J, F, ..., D | | 52987 * | Local week of year | w | 1, 2, ..., 53 | | 52988 * | | wo | 1st, 2nd, ..., 53th | 7 | 52989 * | | ww | 01, 02, ..., 53 | | 52990 * | ISO week of year | I | 1, 2, ..., 53 | 7 | 52991 * | | Io | 1st, 2nd, ..., 53th | 7 | 52992 * | | II | 01, 02, ..., 53 | 7 | 52993 * | Day of month | d | 1, 2, ..., 31 | | 52994 * | | do | 1st, 2nd, ..., 31st | 7 | 52995 * | | dd | 01, 02, ..., 31 | | 52996 * | Day of year | D | 1, 2, ..., 365, 366 | 9 | 52997 * | | Do | 1st, 2nd, ..., 365th, 366th | 7 | 52998 * | | DD | 01, 02, ..., 365, 366 | 9 | 52999 * | | DDD | 001, 002, ..., 365, 366 | | 53000 * | | DDDD | ... | 3 | 53001 * | Day of week (formatting) | E..EEE | Mon, Tue, Wed, ..., Sun | | 53002 * | | EEEE | Monday, Tuesday, ..., Sunday | 2 | 53003 * | | EEEEE | M, T, W, T, F, S, S | | 53004 * | | EEEEEE | Mo, Tu, We, Th, Fr, Sa, Su | | 53005 * | ISO day of week (formatting) | i | 1, 2, 3, ..., 7 | 7 | 53006 * | | io | 1st, 2nd, ..., 7th | 7 | 53007 * | | ii | 01, 02, ..., 07 | 7 | 53008 * | | iii | Mon, Tue, Wed, ..., Sun | 7 | 53009 * | | iiii | Monday, Tuesday, ..., Sunday | 2,7 | 53010 * | | iiiii | M, T, W, T, F, S, S | 7 | 53011 * | | iiiiii | Mo, Tu, We, Th, Fr, Sa, Su | 7 | 53012 * | Local day of week (formatting) | e | 2, 3, 4, ..., 1 | | 53013 * | | eo | 2nd, 3rd, ..., 1st | 7 | 53014 * | | ee | 02, 03, ..., 01 | | 53015 * | | eee | Mon, Tue, Wed, ..., Sun | | 53016 * | | eeee | Monday, Tuesday, ..., Sunday | 2 | 53017 * | | eeeee | M, T, W, T, F, S, S | | 53018 * | | eeeeee | Mo, Tu, We, Th, Fr, Sa, Su | | 53019 * | Local day of week (stand-alone) | c | 2, 3, 4, ..., 1 | | 53020 * | | co | 2nd, 3rd, ..., 1st | 7 | 53021 * | | cc | 02, 03, ..., 01 | | 53022 * | | ccc | Mon, Tue, Wed, ..., Sun | | 53023 * | | cccc | Monday, Tuesday, ..., Sunday | 2 | 53024 * | | ccccc | M, T, W, T, F, S, S | | 53025 * | | cccccc | Mo, Tu, We, Th, Fr, Sa, Su | | 53026 * | AM, PM | a..aa | AM, PM | | 53027 * | | aaa | am, pm | | 53028 * | | aaaa | a.m., p.m. | 2 | 53029 * | | aaaaa | a, p | | 53030 * | AM, PM, noon, midnight | b..bb | AM, PM, noon, midnight | | 53031 * | | bbb | am, pm, noon, midnight | | 53032 * | | bbbb | a.m., p.m., noon, midnight | 2 | 53033 * | | bbbbb | a, p, n, mi | | 53034 * | Flexible day period | B..BBB | at night, in the morning, ... | | 53035 * | | BBBB | at night, in the morning, ... | 2 | 53036 * | | BBBBB | at night, in the morning, ... | | 53037 * | Hour [1-12] | h | 1, 2, ..., 11, 12 | | 53038 * | | ho | 1st, 2nd, ..., 11th, 12th | 7 | 53039 * | | hh | 01, 02, ..., 11, 12 | | 53040 * | Hour [0-23] | H | 0, 1, 2, ..., 23 | | 53041 * | | Ho | 0th, 1st, 2nd, ..., 23rd | 7 | 53042 * | | HH | 00, 01, 02, ..., 23 | | 53043 * | Hour [0-11] | K | 1, 2, ..., 11, 0 | | 53044 * | | Ko | 1st, 2nd, ..., 11th, 0th | 7 | 53045 * | | KK | 01, 02, ..., 11, 00 | | 53046 * | Hour [1-24] | k | 24, 1, 2, ..., 23 | | 53047 * | | ko | 24th, 1st, 2nd, ..., 23rd | 7 | 53048 * | | kk | 24, 01, 02, ..., 23 | | 53049 * | Minute | m | 0, 1, ..., 59 | | 53050 * | | mo | 0th, 1st, ..., 59th | 7 | 53051 * | | mm | 00, 01, ..., 59 | | 53052 * | Second | s | 0, 1, ..., 59 | | 53053 * | | so | 0th, 1st, ..., 59th | 7 | 53054 * | | ss | 00, 01, ..., 59 | | 53055 * | Fraction of second | S | 0, 1, ..., 9 | | 53056 * | | SS | 00, 01, ..., 99 | | 53057 * | | SSS | 000, 001, ..., 999 | | 53058 * | | SSSS | ... | 3 | 53059 * | Timezone (ISO-8601 w/ Z) | X | -08, +0530, Z | | 53060 * | | XX | -0800, +0530, Z | | 53061 * | | XXX | -08:00, +05:30, Z | | 53062 * | | XXXX | -0800, +0530, Z, +123456 | 2 | 53063 * | | XXXXX | -08:00, +05:30, Z, +12:34:56 | | 53064 * | Timezone (ISO-8601 w/o Z) | x | -08, +0530, +00 | | 53065 * | | xx | -0800, +0530, +0000 | | 53066 * | | xxx | -08:00, +05:30, +00:00 | 2 | 53067 * | | xxxx | -0800, +0530, +0000, +123456 | | 53068 * | | xxxxx | -08:00, +05:30, +00:00, +12:34:56 | | 53069 * | Timezone (GMT) | O...OOO | GMT-8, GMT+5:30, GMT+0 | | 53070 * | | OOOO | GMT-08:00, GMT+05:30, GMT+00:00 | 2 | 53071 * | Timezone (specific non-locat.) | z...zzz | GMT-8, GMT+5:30, GMT+0 | 6 | 53072 * | | zzzz | GMT-08:00, GMT+05:30, GMT+00:00 | 2,6 | 53073 * | Seconds timestamp | t | 512969520 | 7 | 53074 * | | tt | ... | 3,7 | 53075 * | Milliseconds timestamp | T | 512969520900 | 7 | 53076 * | | TT | ... | 3,7 | 53077 * | Long localized date | P | 04/29/1453 | 7 | 53078 * | | PP | Apr 29, 1453 | 7 | 53079 * | | PPP | April 29th, 1453 | 7 | 53080 * | | PPPP | Friday, April 29th, 1453 | 2,7 | 53081 * | Long localized time | p | 12:00 AM | 7 | 53082 * | | pp | 12:00:00 AM | 7 | 53083 * | | ppp | 12:00:00 AM GMT+2 | 7 | 53084 * | | pppp | 12:00:00 AM GMT+02:00 | 2,7 | 53085 * | Combination of date and time | Pp | 04/29/1453, 12:00 AM | 7 | 53086 * | | PPpp | Apr 29, 1453, 12:00:00 AM | 7 | 53087 * | | PPPppp | April 29th, 1453 at ... | 7 | 53088 * | | PPPPpppp| Friday, April 29th, 1453 at ... | 2,7 | 53089 * Notes: 53090 * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale 53091 * are the same as "stand-alone" units, but are different in some languages. 53092 * "Formatting" units are declined according to the rules of the language 53093 * in the context of a date. "Stand-alone" units are always nominative singular: 53094 * 53095 * `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'` 53096 * 53097 * `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'` 53098 * 53099 * 2. Any sequence of the identical letters is a pattern, unless it is escaped by 53100 * the single quote characters (see below). 53101 * If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`) 53102 * the output will be the same as default pattern for this unit, usually 53103 * the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units 53104 * are marked with "2" in the last column of the table. 53105 * 53106 * `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'` 53107 * 53108 * `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'` 53109 * 53110 * `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'` 53111 * 53112 * `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'` 53113 * 53114 * `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'` 53115 * 53116 * 3. Some patterns could be unlimited length (such as `yyyyyyyy`). 53117 * The output will be padded with zeros to match the length of the pattern. 53118 * 53119 * `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'` 53120 * 53121 * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales. 53122 * These tokens represent the shortest form of the quarter. 53123 * 53124 * 5. The main difference between `y` and `u` patterns are B.C. years: 53125 * 53126 * | Year | `y` | `u` | 53127 * |------|-----|-----| 53128 * | AC 1 | 1 | 1 | 53129 * | BC 1 | 1 | 0 | 53130 * | BC 2 | 2 | -1 | 53131 * 53132 * Also `yy` always returns the last two digits of a year, 53133 * while `uu` pads single digit years to 2 characters and returns other years unchanged: 53134 * 53135 * | Year | `yy` | `uu` | 53136 * |------|------|------| 53137 * | 1 | 01 | 01 | 53138 * | 14 | 14 | 14 | 53139 * | 376 | 76 | 376 | 53140 * | 1453 | 53 | 1453 | 53141 * 53142 * The same difference is true for local and ISO week-numbering years (`Y` and `R`), 53143 * except local week-numbering years are dependent on `options.weekStartsOn` 53144 * and `options.firstWeekContainsDate` (compare [getISOWeekYear](https://date-fns.org/docs/getISOWeekYear) 53145 * and [getWeekYear](https://date-fns.org/docs/getWeekYear)). 53146 * 53147 * 6. Specific non-location timezones are currently unavailable in `date-fns`, 53148 * so right now these tokens fall back to GMT timezones. 53149 * 53150 * 7. These patterns are not in the Unicode Technical Standard #35: 53151 * - `i`: ISO day of week 53152 * - `I`: ISO week of year 53153 * - `R`: ISO week-numbering year 53154 * - `t`: seconds timestamp 53155 * - `T`: milliseconds timestamp 53156 * - `o`: ordinal number modifier 53157 * - `P`: long localized date 53158 * - `p`: long localized time 53159 * 53160 * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years. 53161 * You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 53162 * 53163 * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month. 53164 * You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 53165 * 53166 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53167 * 53168 * @param date - The original date 53169 * @param format - The string of tokens 53170 * @param options - An object with options 53171 * 53172 * @returns The formatted date string 53173 * 53174 * @throws `date` must not be Invalid Date 53175 * @throws `options.locale` must contain `localize` property 53176 * @throws `options.locale` must contain `formatLong` property 53177 * @throws use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 53178 * @throws use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 53179 * @throws use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 53180 * @throws use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 53181 * @throws format string contains an unescaped latin alphabet character 53182 * 53183 * @example 53184 * // Represent 11 February 2014 in middle-endian format: 53185 * const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy') 53186 * //=> '02/11/2014' 53187 * 53188 * @example 53189 * // Represent 2 July 2014 in Esperanto: 53190 * import { eoLocale } from 'date-fns/locale/eo' 53191 * const result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", { 53192 * locale: eoLocale 53193 * }) 53194 * //=> '2-a de julio 2014' 53195 * 53196 * @example 53197 * // Escape string by single quote characters: 53198 * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'") 53199 * //=> "3 o'clock" 53200 */ 53201 function format(date, formatStr, options) { 53202 const defaultOptions = getDefaultOptions(); 53203 const locale = options?.locale ?? defaultOptions.locale ?? enUS; 53204 53205 const firstWeekContainsDate = 53206 options?.firstWeekContainsDate ?? 53207 options?.locale?.options?.firstWeekContainsDate ?? 53208 defaultOptions.firstWeekContainsDate ?? 53209 defaultOptions.locale?.options?.firstWeekContainsDate ?? 53210 1; 53211 53212 const weekStartsOn = 53213 options?.weekStartsOn ?? 53214 options?.locale?.options?.weekStartsOn ?? 53215 defaultOptions.weekStartsOn ?? 53216 defaultOptions.locale?.options?.weekStartsOn ?? 53217 0; 53218 53219 const originalDate = toDate(date); 53220 53221 if (!isValid(originalDate)) { 53222 throw new RangeError("Invalid time value"); 53223 } 53224 53225 let parts = formatStr 53226 .match(longFormattingTokensRegExp) 53227 .map((substring) => { 53228 const firstCharacter = substring[0]; 53229 if (firstCharacter === "p" || firstCharacter === "P") { 53230 const longFormatter = longFormatters[firstCharacter]; 53231 return longFormatter(substring, locale.formatLong); 53232 } 53233 return substring; 53234 }) 53235 .join("") 53236 .match(formattingTokensRegExp) 53237 .map((substring) => { 53238 // Replace two single quote characters with one single quote character 53239 if (substring === "''") { 53240 return { isToken: false, value: "'" }; 53241 } 53242 53243 const firstCharacter = substring[0]; 53244 if (firstCharacter === "'") { 53245 return { isToken: false, value: cleanEscapedString(substring) }; 53246 } 53247 53248 if (formatters[firstCharacter]) { 53249 return { isToken: true, value: substring }; 53250 } 53251 53252 if (firstCharacter.match(unescapedLatinCharacterRegExp)) { 53253 throw new RangeError( 53254 "Format string contains an unescaped latin alphabet character `" + 53255 firstCharacter + 53256 "`", 53257 ); 53258 } 53259 53260 return { isToken: false, value: substring }; 53261 }); 53262 53263 // invoke localize preprocessor (only for french locales at the moment) 53264 if (locale.localize.preprocessor) { 53265 parts = locale.localize.preprocessor(originalDate, parts); 53266 } 53267 53268 const formatterOptions = { 53269 firstWeekContainsDate, 53270 weekStartsOn, 53271 locale, 53272 }; 53273 53274 return parts 53275 .map((part) => { 53276 if (!part.isToken) return part.value; 53277 53278 const token = part.value; 53279 53280 if ( 53281 (!options?.useAdditionalWeekYearTokens && 53282 isProtectedWeekYearToken(token)) || 53283 (!options?.useAdditionalDayOfYearTokens && 53284 isProtectedDayOfYearToken(token)) 53285 ) { 53286 warnOrThrowProtectedError(token, formatStr, String(date)); 53287 } 53288 53289 const formatter = formatters[token[0]]; 53290 return formatter(originalDate, token, locale.localize, formatterOptions); 53291 }) 53292 .join(""); 53293 } 53294 53295 function cleanEscapedString(input) { 53296 const matched = input.match(escapedStringRegExp); 53297 53298 if (!matched) { 53299 return input; 53300 } 53301 53302 return matched[1].replace(doubleQuoteRegExp, "'"); 53303 } 53304 53305 // Fallback for modularized imports: 53306 /* harmony default export */ const date_fns_format = ((/* unused pure expression or super */ null && (format))); 53307 53308 ;// ./node_modules/date-fns/isSameMonth.mjs 53309 53310 53311 /** 53312 * @name isSameMonth 53313 * @category Month Helpers 53314 * @summary Are the given dates in the same month (and year)? 53315 * 53316 * @description 53317 * Are the given dates in the same month (and year)? 53318 * 53319 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53320 * 53321 * @param dateLeft - The first date to check 53322 * @param dateRight - The second date to check 53323 * 53324 * @returns The dates are in the same month (and year) 53325 * 53326 * @example 53327 * // Are 2 September 2014 and 25 September 2014 in the same month? 53328 * const result = isSameMonth(new Date(2014, 8, 2), new Date(2014, 8, 25)) 53329 * //=> true 53330 * 53331 * @example 53332 * // Are 2 September 2014 and 25 September 2015 in the same month? 53333 * const result = isSameMonth(new Date(2014, 8, 2), new Date(2015, 8, 25)) 53334 * //=> false 53335 */ 53336 function isSameMonth(dateLeft, dateRight) { 53337 const _dateLeft = toDate(dateLeft); 53338 const _dateRight = toDate(dateRight); 53339 return ( 53340 _dateLeft.getFullYear() === _dateRight.getFullYear() && 53341 _dateLeft.getMonth() === _dateRight.getMonth() 53342 ); 53343 } 53344 53345 // Fallback for modularized imports: 53346 /* harmony default export */ const date_fns_isSameMonth = ((/* unused pure expression or super */ null && (isSameMonth))); 53347 53348 ;// ./node_modules/date-fns/isEqual.mjs 53349 53350 53351 /** 53352 * @name isEqual 53353 * @category Common Helpers 53354 * @summary Are the given dates equal? 53355 * 53356 * @description 53357 * Are the given dates equal? 53358 * 53359 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53360 * 53361 * @param dateLeft - The first date to compare 53362 * @param dateRight - The second date to compare 53363 * 53364 * @returns The dates are equal 53365 * 53366 * @example 53367 * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal? 53368 * const result = isEqual( 53369 * new Date(2014, 6, 2, 6, 30, 45, 0), 53370 * new Date(2014, 6, 2, 6, 30, 45, 500) 53371 * ) 53372 * //=> false 53373 */ 53374 function isEqual(leftDate, rightDate) { 53375 const _dateLeft = toDate(leftDate); 53376 const _dateRight = toDate(rightDate); 53377 return +_dateLeft === +_dateRight; 53378 } 53379 53380 // Fallback for modularized imports: 53381 /* harmony default export */ const date_fns_isEqual = ((/* unused pure expression or super */ null && (isEqual))); 53382 53383 ;// ./node_modules/date-fns/isSameDay.mjs 53384 53385 53386 /** 53387 * @name isSameDay 53388 * @category Day Helpers 53389 * @summary Are the given dates in the same day (and year and month)? 53390 * 53391 * @description 53392 * Are the given dates in the same day (and year and month)? 53393 * 53394 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53395 * 53396 * @param dateLeft - The first date to check 53397 * @param dateRight - The second date to check 53398 53399 * @returns The dates are in the same day (and year and month) 53400 * 53401 * @example 53402 * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day? 53403 * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0)) 53404 * //=> true 53405 * 53406 * @example 53407 * // Are 4 September and 4 October in the same day? 53408 * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4)) 53409 * //=> false 53410 * 53411 * @example 53412 * // Are 4 September, 2014 and 4 September, 2015 in the same day? 53413 * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4)) 53414 * //=> false 53415 */ 53416 function isSameDay(dateLeft, dateRight) { 53417 const dateLeftStartOfDay = startOfDay(dateLeft); 53418 const dateRightStartOfDay = startOfDay(dateRight); 53419 53420 return +dateLeftStartOfDay === +dateRightStartOfDay; 53421 } 53422 53423 // Fallback for modularized imports: 53424 /* harmony default export */ const date_fns_isSameDay = ((/* unused pure expression or super */ null && (isSameDay))); 53425 53426 ;// ./node_modules/date-fns/addDays.mjs 53427 53428 53429 53430 /** 53431 * @name addDays 53432 * @category Day Helpers 53433 * @summary Add the specified number of days to the given date. 53434 * 53435 * @description 53436 * Add the specified number of days to the given date. 53437 * 53438 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53439 * 53440 * @param date - The date to be changed 53441 * @param amount - The amount of days to be added. 53442 * 53443 * @returns The new date with the days added 53444 * 53445 * @example 53446 * // Add 10 days to 1 September 2014: 53447 * const result = addDays(new Date(2014, 8, 1), 10) 53448 * //=> Thu Sep 11 2014 00:00:00 53449 */ 53450 function addDays(date, amount) { 53451 const _date = toDate(date); 53452 if (isNaN(amount)) return constructFrom(date, NaN); 53453 if (!amount) { 53454 // If 0 days, no-op to avoid changing times in the hour before end of DST 53455 return _date; 53456 } 53457 _date.setDate(_date.getDate() + amount); 53458 return _date; 53459 } 53460 53461 // Fallback for modularized imports: 53462 /* harmony default export */ const date_fns_addDays = ((/* unused pure expression or super */ null && (addDays))); 53463 53464 ;// ./node_modules/date-fns/addWeeks.mjs 53465 53466 53467 /** 53468 * @name addWeeks 53469 * @category Week Helpers 53470 * @summary Add the specified number of weeks to the given date. 53471 * 53472 * @description 53473 * Add the specified number of week to the given date. 53474 * 53475 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53476 * 53477 * @param date - The date to be changed 53478 * @param amount - The amount of weeks to be added. 53479 * 53480 * @returns The new date with the weeks added 53481 * 53482 * @example 53483 * // Add 4 weeks to 1 September 2014: 53484 * const result = addWeeks(new Date(2014, 8, 1), 4) 53485 * //=> Mon Sep 29 2014 00:00:00 53486 */ 53487 function addWeeks(date, amount) { 53488 const days = amount * 7; 53489 return addDays(date, days); 53490 } 53491 53492 // Fallback for modularized imports: 53493 /* harmony default export */ const date_fns_addWeeks = ((/* unused pure expression or super */ null && (addWeeks))); 53494 53495 ;// ./node_modules/date-fns/subWeeks.mjs 53496 53497 53498 /** 53499 * @name subWeeks 53500 * @category Week Helpers 53501 * @summary Subtract the specified number of weeks from the given date. 53502 * 53503 * @description 53504 * Subtract the specified number of weeks from the given date. 53505 * 53506 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53507 * 53508 * @param date - The date to be changed 53509 * @param amount - The amount of weeks to be subtracted. 53510 * 53511 * @returns The new date with the weeks subtracted 53512 * 53513 * @example 53514 * // Subtract 4 weeks from 1 September 2014: 53515 * const result = subWeeks(new Date(2014, 8, 1), 4) 53516 * //=> Mon Aug 04 2014 00:00:00 53517 */ 53518 function subWeeks(date, amount) { 53519 return addWeeks(date, -amount); 53520 } 53521 53522 // Fallback for modularized imports: 53523 /* harmony default export */ const date_fns_subWeeks = ((/* unused pure expression or super */ null && (subWeeks))); 53524 53525 ;// ./node_modules/date-fns/endOfWeek.mjs 53526 53527 53528 53529 /** 53530 * The {@link endOfWeek} function options. 53531 */ 53532 53533 /** 53534 * @name endOfWeek 53535 * @category Week Helpers 53536 * @summary Return the end of a week for the given date. 53537 * 53538 * @description 53539 * Return the end of a week for the given date. 53540 * The result will be in the local timezone. 53541 * 53542 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53543 * 53544 * @param date - The original date 53545 * @param options - An object with options 53546 * 53547 * @returns The end of a week 53548 * 53549 * @example 53550 * // The end of a week for 2 September 2014 11:55:00: 53551 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0)) 53552 * //=> Sat Sep 06 2014 23:59:59.999 53553 * 53554 * @example 53555 * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00: 53556 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) 53557 * //=> Sun Sep 07 2014 23:59:59.999 53558 */ 53559 function endOfWeek(date, options) { 53560 const defaultOptions = getDefaultOptions(); 53561 const weekStartsOn = 53562 options?.weekStartsOn ?? 53563 options?.locale?.options?.weekStartsOn ?? 53564 defaultOptions.weekStartsOn ?? 53565 defaultOptions.locale?.options?.weekStartsOn ?? 53566 0; 53567 53568 const _date = toDate(date); 53569 const day = _date.getDay(); 53570 const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); 53571 53572 _date.setDate(_date.getDate() + diff); 53573 _date.setHours(23, 59, 59, 999); 53574 return _date; 53575 } 53576 53577 // Fallback for modularized imports: 53578 /* harmony default export */ const date_fns_endOfWeek = ((/* unused pure expression or super */ null && (endOfWeek))); 53579 53580 ;// ./node_modules/@wordpress/icons/build-module/library/arrow-right.js 53581 /** 53582 * WordPress dependencies 53583 */ 53584 53585 53586 const arrowRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 53587 xmlns: "http://www.w3.org/2000/svg", 53588 viewBox: "0 0 24 24", 53589 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 53590 d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z" 53591 }) 53592 }); 53593 /* harmony default export */ const arrow_right = (arrowRight); 53594 53595 ;// ./node_modules/@wordpress/icons/build-module/library/arrow-left.js 53596 /** 53597 * WordPress dependencies 53598 */ 53599 53600 53601 const arrowLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 53602 xmlns: "http://www.w3.org/2000/svg", 53603 viewBox: "0 0 24 24", 53604 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 53605 d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z" 53606 }) 53607 }); 53608 /* harmony default export */ const arrow_left = (arrowLeft); 53609 53610 ;// external ["wp","date"] 53611 const external_wp_date_namespaceObject = window["wp"]["date"]; 53612 ;// ./node_modules/date-fns/isAfter.mjs 53613 53614 53615 /** 53616 * @name isAfter 53617 * @category Common Helpers 53618 * @summary Is the first date after the second one? 53619 * 53620 * @description 53621 * Is the first date after the second one? 53622 * 53623 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53624 * 53625 * @param date - The date that should be after the other one to return true 53626 * @param dateToCompare - The date to compare with 53627 * 53628 * @returns The first date is after the second date 53629 * 53630 * @example 53631 * // Is 10 July 1989 after 11 February 1987? 53632 * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11)) 53633 * //=> true 53634 */ 53635 function isAfter(date, dateToCompare) { 53636 const _date = toDate(date); 53637 const _dateToCompare = toDate(dateToCompare); 53638 return _date.getTime() > _dateToCompare.getTime(); 53639 } 53640 53641 // Fallback for modularized imports: 53642 /* harmony default export */ const date_fns_isAfter = ((/* unused pure expression or super */ null && (isAfter))); 53643 53644 ;// ./node_modules/date-fns/isBefore.mjs 53645 53646 53647 /** 53648 * @name isBefore 53649 * @category Common Helpers 53650 * @summary Is the first date before the second one? 53651 * 53652 * @description 53653 * Is the first date before the second one? 53654 * 53655 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53656 * 53657 * @param date - The date that should be before the other one to return true 53658 * @param dateToCompare - The date to compare with 53659 * 53660 * @returns The first date is before the second date 53661 * 53662 * @example 53663 * // Is 10 July 1989 before 11 February 1987? 53664 * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11)) 53665 * //=> false 53666 */ 53667 function isBefore(date, dateToCompare) { 53668 const _date = toDate(date); 53669 const _dateToCompare = toDate(dateToCompare); 53670 return +_date < +_dateToCompare; 53671 } 53672 53673 // Fallback for modularized imports: 53674 /* harmony default export */ const date_fns_isBefore = ((/* unused pure expression or super */ null && (isBefore))); 53675 53676 ;// ./node_modules/date-fns/getDaysInMonth.mjs 53677 53678 53679 53680 /** 53681 * @name getDaysInMonth 53682 * @category Month Helpers 53683 * @summary Get the number of days in a month of the given date. 53684 * 53685 * @description 53686 * Get the number of days in a month of the given date. 53687 * 53688 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53689 * 53690 * @param date - The given date 53691 * 53692 * @returns The number of days in a month 53693 * 53694 * @example 53695 * // How many days are in February 2000? 53696 * const result = getDaysInMonth(new Date(2000, 1)) 53697 * //=> 29 53698 */ 53699 function getDaysInMonth(date) { 53700 const _date = toDate(date); 53701 const year = _date.getFullYear(); 53702 const monthIndex = _date.getMonth(); 53703 const lastDayOfMonth = constructFrom(date, 0); 53704 lastDayOfMonth.setFullYear(year, monthIndex + 1, 0); 53705 lastDayOfMonth.setHours(0, 0, 0, 0); 53706 return lastDayOfMonth.getDate(); 53707 } 53708 53709 // Fallback for modularized imports: 53710 /* harmony default export */ const date_fns_getDaysInMonth = ((/* unused pure expression or super */ null && (getDaysInMonth))); 53711 53712 ;// ./node_modules/date-fns/setMonth.mjs 53713 53714 53715 53716 53717 /** 53718 * @name setMonth 53719 * @category Month Helpers 53720 * @summary Set the month to the given date. 53721 * 53722 * @description 53723 * Set the month to the given date. 53724 * 53725 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53726 * 53727 * @param date - The date to be changed 53728 * @param month - The month index to set (0-11) 53729 * 53730 * @returns The new date with the month set 53731 * 53732 * @example 53733 * // Set February to 1 September 2014: 53734 * const result = setMonth(new Date(2014, 8, 1), 1) 53735 * //=> Sat Feb 01 2014 00:00:00 53736 */ 53737 function setMonth(date, month) { 53738 const _date = toDate(date); 53739 const year = _date.getFullYear(); 53740 const day = _date.getDate(); 53741 53742 const dateWithDesiredMonth = constructFrom(date, 0); 53743 dateWithDesiredMonth.setFullYear(year, month, 15); 53744 dateWithDesiredMonth.setHours(0, 0, 0, 0); 53745 const daysInMonth = getDaysInMonth(dateWithDesiredMonth); 53746 // Set the last day of the new month 53747 // if the original date was the last day of the longer month 53748 _date.setMonth(month, Math.min(day, daysInMonth)); 53749 return _date; 53750 } 53751 53752 // Fallback for modularized imports: 53753 /* harmony default export */ const date_fns_setMonth = ((/* unused pure expression or super */ null && (setMonth))); 53754 53755 ;// ./node_modules/date-fns/set.mjs 53756 53757 53758 53759 53760 /** 53761 * @name set 53762 * @category Common Helpers 53763 * @summary Set date values to a given date. 53764 * 53765 * @description 53766 * Set date values to a given date. 53767 * 53768 * Sets time values to date from object `values`. 53769 * A value is not set if it is undefined or null or doesn't exist in `values`. 53770 * 53771 * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts 53772 * to use native `Date#setX` methods. If you use this function, you may not want to include the 53773 * other `setX` functions that date-fns provides if you are concerned about the bundle size. 53774 * 53775 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53776 * 53777 * @param date - The date to be changed 53778 * @param values - The date values to be set 53779 * 53780 * @returns The new date with options set 53781 * 53782 * @example 53783 * // Transform 1 September 2014 into 20 October 2015 in a single line: 53784 * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 }) 53785 * //=> Tue Oct 20 2015 00:00:00 53786 * 53787 * @example 53788 * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00: 53789 * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 }) 53790 * //=> Mon Sep 01 2014 12:23:45 53791 */ 53792 53793 function set(date, values) { 53794 let _date = toDate(date); 53795 53796 // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date 53797 if (isNaN(+_date)) { 53798 return constructFrom(date, NaN); 53799 } 53800 53801 if (values.year != null) { 53802 _date.setFullYear(values.year); 53803 } 53804 53805 if (values.month != null) { 53806 _date = setMonth(_date, values.month); 53807 } 53808 53809 if (values.date != null) { 53810 _date.setDate(values.date); 53811 } 53812 53813 if (values.hours != null) { 53814 _date.setHours(values.hours); 53815 } 53816 53817 if (values.minutes != null) { 53818 _date.setMinutes(values.minutes); 53819 } 53820 53821 if (values.seconds != null) { 53822 _date.setSeconds(values.seconds); 53823 } 53824 53825 if (values.milliseconds != null) { 53826 _date.setMilliseconds(values.milliseconds); 53827 } 53828 53829 return _date; 53830 } 53831 53832 // Fallback for modularized imports: 53833 /* harmony default export */ const date_fns_set = ((/* unused pure expression or super */ null && (set))); 53834 53835 ;// ./node_modules/date-fns/startOfToday.mjs 53836 53837 53838 /** 53839 * @name startOfToday 53840 * @category Day Helpers 53841 * @summary Return the start of today. 53842 * @pure false 53843 * 53844 * @description 53845 * Return the start of today. 53846 * 53847 * @returns The start of today 53848 * 53849 * @example 53850 * // If today is 6 October 2014: 53851 * const result = startOfToday() 53852 * //=> Mon Oct 6 2014 00:00:00 53853 */ 53854 function startOfToday() { 53855 return startOfDay(Date.now()); 53856 } 53857 53858 // Fallback for modularized imports: 53859 /* harmony default export */ const date_fns_startOfToday = ((/* unused pure expression or super */ null && (startOfToday))); 53860 53861 ;// ./node_modules/date-fns/setYear.mjs 53862 53863 53864 53865 /** 53866 * @name setYear 53867 * @category Year Helpers 53868 * @summary Set the year to the given date. 53869 * 53870 * @description 53871 * Set the year to the given date. 53872 * 53873 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53874 * 53875 * @param date - The date to be changed 53876 * @param year - The year of the new date 53877 * 53878 * @returns The new date with the year set 53879 * 53880 * @example 53881 * // Set year 2013 to 1 September 2014: 53882 * const result = setYear(new Date(2014, 8, 1), 2013) 53883 * //=> Sun Sep 01 2013 00:00:00 53884 */ 53885 function setYear(date, year) { 53886 const _date = toDate(date); 53887 53888 // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date 53889 if (isNaN(+_date)) { 53890 return constructFrom(date, NaN); 53891 } 53892 53893 _date.setFullYear(year); 53894 return _date; 53895 } 53896 53897 // Fallback for modularized imports: 53898 /* harmony default export */ const date_fns_setYear = ((/* unused pure expression or super */ null && (setYear))); 53899 53900 ;// ./node_modules/date-fns/addYears.mjs 53901 53902 53903 /** 53904 * @name addYears 53905 * @category Year Helpers 53906 * @summary Add the specified number of years to the given date. 53907 * 53908 * @description 53909 * Add the specified number of years to the given date. 53910 * 53911 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53912 * 53913 * @param date - The date to be changed 53914 * @param amount - The amount of years to be added. 53915 * 53916 * @returns The new date with the years added 53917 * 53918 * @example 53919 * // Add 5 years to 1 September 2014: 53920 * const result = addYears(new Date(2014, 8, 1), 5) 53921 * //=> Sun Sep 01 2019 00:00:00 53922 */ 53923 function addYears(date, amount) { 53924 return addMonths(date, amount * 12); 53925 } 53926 53927 // Fallback for modularized imports: 53928 /* harmony default export */ const date_fns_addYears = ((/* unused pure expression or super */ null && (addYears))); 53929 53930 ;// ./node_modules/date-fns/subYears.mjs 53931 53932 53933 /** 53934 * @name subYears 53935 * @category Year Helpers 53936 * @summary Subtract the specified number of years from the given date. 53937 * 53938 * @description 53939 * Subtract the specified number of years from the given date. 53940 * 53941 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53942 * 53943 * @param date - The date to be changed 53944 * @param amount - The amount of years to be subtracted. 53945 * 53946 * @returns The new date with the years subtracted 53947 * 53948 * @example 53949 * // Subtract 5 years from 1 September 2014: 53950 * const result = subYears(new Date(2014, 8, 1), 5) 53951 * //=> Tue Sep 01 2009 00:00:00 53952 */ 53953 function subYears(date, amount) { 53954 return addYears(date, -amount); 53955 } 53956 53957 // Fallback for modularized imports: 53958 /* harmony default export */ const date_fns_subYears = ((/* unused pure expression or super */ null && (subYears))); 53959 53960 ;// ./node_modules/date-fns/eachDayOfInterval.mjs 53961 53962 53963 /** 53964 * The {@link eachDayOfInterval} function options. 53965 */ 53966 53967 /** 53968 * @name eachDayOfInterval 53969 * @category Interval Helpers 53970 * @summary Return the array of dates within the specified time interval. 53971 * 53972 * @description 53973 * Return the array of dates within the specified time interval. 53974 * 53975 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 53976 * 53977 * @param interval - The interval. 53978 * @param options - An object with options. 53979 * 53980 * @returns The array with starts of days from the day of the interval start to the day of the interval end 53981 * 53982 * @example 53983 * // Each day between 6 October 2014 and 10 October 2014: 53984 * const result = eachDayOfInterval({ 53985 * start: new Date(2014, 9, 6), 53986 * end: new Date(2014, 9, 10) 53987 * }) 53988 * //=> [ 53989 * // Mon Oct 06 2014 00:00:00, 53990 * // Tue Oct 07 2014 00:00:00, 53991 * // Wed Oct 08 2014 00:00:00, 53992 * // Thu Oct 09 2014 00:00:00, 53993 * // Fri Oct 10 2014 00:00:00 53994 * // ] 53995 */ 53996 function eachDayOfInterval(interval, options) { 53997 const startDate = toDate(interval.start); 53998 const endDate = toDate(interval.end); 53999 54000 let reversed = +startDate > +endDate; 54001 const endTime = reversed ? +startDate : +endDate; 54002 const currentDate = reversed ? endDate : startDate; 54003 currentDate.setHours(0, 0, 0, 0); 54004 54005 let step = options?.step ?? 1; 54006 if (!step) return []; 54007 if (step < 0) { 54008 step = -step; 54009 reversed = !reversed; 54010 } 54011 54012 const dates = []; 54013 54014 while (+currentDate <= endTime) { 54015 dates.push(toDate(currentDate)); 54016 currentDate.setDate(currentDate.getDate() + step); 54017 currentDate.setHours(0, 0, 0, 0); 54018 } 54019 54020 return reversed ? dates.reverse() : dates; 54021 } 54022 54023 // Fallback for modularized imports: 54024 /* harmony default export */ const date_fns_eachDayOfInterval = ((/* unused pure expression or super */ null && (eachDayOfInterval))); 54025 54026 ;// ./node_modules/date-fns/eachMonthOfInterval.mjs 54027 54028 54029 /** 54030 * The {@link eachMonthOfInterval} function options. 54031 */ 54032 54033 /** 54034 * @name eachMonthOfInterval 54035 * @category Interval Helpers 54036 * @summary Return the array of months within the specified time interval. 54037 * 54038 * @description 54039 * Return the array of months within the specified time interval. 54040 * 54041 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 54042 * 54043 * @param interval - The interval 54044 * 54045 * @returns The array with starts of months from the month of the interval start to the month of the interval end 54046 * 54047 * @example 54048 * // Each month between 6 February 2014 and 10 August 2014: 54049 * const result = eachMonthOfInterval({ 54050 * start: new Date(2014, 1, 6), 54051 * end: new Date(2014, 7, 10) 54052 * }) 54053 * //=> [ 54054 * // Sat Feb 01 2014 00:00:00, 54055 * // Sat Mar 01 2014 00:00:00, 54056 * // Tue Apr 01 2014 00:00:00, 54057 * // Thu May 01 2014 00:00:00, 54058 * // Sun Jun 01 2014 00:00:00, 54059 * // Tue Jul 01 2014 00:00:00, 54060 * // Fri Aug 01 2014 00:00:00 54061 * // ] 54062 */ 54063 function eachMonthOfInterval(interval, options) { 54064 const startDate = toDate(interval.start); 54065 const endDate = toDate(interval.end); 54066 54067 let reversed = +startDate > +endDate; 54068 const endTime = reversed ? +startDate : +endDate; 54069 const currentDate = reversed ? endDate : startDate; 54070 currentDate.setHours(0, 0, 0, 0); 54071 currentDate.setDate(1); 54072 54073 let step = options?.step ?? 1; 54074 if (!step) return []; 54075 if (step < 0) { 54076 step = -step; 54077 reversed = !reversed; 54078 } 54079 54080 const dates = []; 54081 54082 while (+currentDate <= endTime) { 54083 dates.push(toDate(currentDate)); 54084 currentDate.setMonth(currentDate.getMonth() + step); 54085 } 54086 54087 return reversed ? dates.reverse() : dates; 54088 } 54089 54090 // Fallback for modularized imports: 54091 /* harmony default export */ const date_fns_eachMonthOfInterval = ((/* unused pure expression or super */ null && (eachMonthOfInterval))); 54092 54093 ;// ./node_modules/date-fns/startOfMonth.mjs 54094 54095 54096 /** 54097 * @name startOfMonth 54098 * @category Month Helpers 54099 * @summary Return the start of a month for the given date. 54100 * 54101 * @description 54102 * Return the start of a month for the given date. 54103 * The result will be in the local timezone. 54104 * 54105 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 54106 * 54107 * @param date - The original date 54108 * 54109 * @returns The start of a month 54110 * 54111 * @example 54112 * // The start of a month for 2 September 2014 11:55:00: 54113 * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0)) 54114 * //=> Mon Sep 01 2014 00:00:00 54115 */ 54116 function startOfMonth(date) { 54117 const _date = toDate(date); 54118 _date.setDate(1); 54119 _date.setHours(0, 0, 0, 0); 54120 return _date; 54121 } 54122 54123 // Fallback for modularized imports: 54124 /* harmony default export */ const date_fns_startOfMonth = ((/* unused pure expression or super */ null && (startOfMonth))); 54125 54126 ;// ./node_modules/date-fns/endOfMonth.mjs 54127 54128 54129 /** 54130 * @name endOfMonth 54131 * @category Month Helpers 54132 * @summary Return the end of a month for the given date. 54133 * 54134 * @description 54135 * Return the end of a month for the given date. 54136 * The result will be in the local timezone. 54137 * 54138 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 54139 * 54140 * @param date - The original date 54141 * 54142 * @returns The end of a month 54143 * 54144 * @example 54145 * // The end of a month for 2 September 2014 11:55:00: 54146 * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0)) 54147 * //=> Tue Sep 30 2014 23:59:59.999 54148 */ 54149 function endOfMonth(date) { 54150 const _date = toDate(date); 54151 const month = _date.getMonth(); 54152 _date.setFullYear(_date.getFullYear(), month + 1, 0); 54153 _date.setHours(23, 59, 59, 999); 54154 return _date; 54155 } 54156 54157 // Fallback for modularized imports: 54158 /* harmony default export */ const date_fns_endOfMonth = ((/* unused pure expression or super */ null && (endOfMonth))); 54159 54160 ;// ./node_modules/date-fns/eachWeekOfInterval.mjs 54161 54162 54163 54164 54165 /** 54166 * The {@link eachWeekOfInterval} function options. 54167 */ 54168 54169 /** 54170 * @name eachWeekOfInterval 54171 * @category Interval Helpers 54172 * @summary Return the array of weeks within the specified time interval. 54173 * 54174 * @description 54175 * Return the array of weeks within the specified time interval. 54176 * 54177 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 54178 * 54179 * @param interval - The interval. 54180 * @param options - An object with options. 54181 * 54182 * @returns The array with starts of weeks from the week of the interval start to the week of the interval end 54183 * 54184 * @example 54185 * // Each week within interval 6 October 2014 - 23 November 2014: 54186 * const result = eachWeekOfInterval({ 54187 * start: new Date(2014, 9, 6), 54188 * end: new Date(2014, 10, 23) 54189 * }) 54190 * //=> [ 54191 * // Sun Oct 05 2014 00:00:00, 54192 * // Sun Oct 12 2014 00:00:00, 54193 * // Sun Oct 19 2014 00:00:00, 54194 * // Sun Oct 26 2014 00:00:00, 54195 * // Sun Nov 02 2014 00:00:00, 54196 * // Sun Nov 09 2014 00:00:00, 54197 * // Sun Nov 16 2014 00:00:00, 54198 * // Sun Nov 23 2014 00:00:00 54199 * // ] 54200 */ 54201 function eachWeekOfInterval(interval, options) { 54202 const startDate = toDate(interval.start); 54203 const endDate = toDate(interval.end); 54204 54205 let reversed = +startDate > +endDate; 54206 const startDateWeek = reversed 54207 ? startOfWeek(endDate, options) 54208 : startOfWeek(startDate, options); 54209 const endDateWeek = reversed 54210 ? startOfWeek(startDate, options) 54211 : startOfWeek(endDate, options); 54212 54213 // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet 54214 startDateWeek.setHours(15); 54215 endDateWeek.setHours(15); 54216 54217 const endTime = +endDateWeek.getTime(); 54218 let currentDate = startDateWeek; 54219 54220 let step = options?.step ?? 1; 54221 if (!step) return []; 54222 if (step < 0) { 54223 step = -step; 54224 reversed = !reversed; 54225 } 54226 54227 const dates = []; 54228 54229 while (+currentDate <= endTime) { 54230 currentDate.setHours(0); 54231 dates.push(toDate(currentDate)); 54232 currentDate = addWeeks(currentDate, step); 54233 currentDate.setHours(15); 54234 } 54235 54236 return reversed ? dates.reverse() : dates; 54237 } 54238 54239 // Fallback for modularized imports: 54240 /* harmony default export */ const date_fns_eachWeekOfInterval = ((/* unused pure expression or super */ null && (eachWeekOfInterval))); 54241 54242 ;// ./node_modules/@wordpress/components/build-module/date-time/date/use-lilius/index.js 54243 /** 54244 * This source is a local copy of the use-lilius library, since the original 54245 * library is not actively maintained. 54246 * @see https://github.com/WordPress/gutenberg/discussions/64968 54247 * 54248 * use-lilius@2.0.5 54249 * https://github.com/Avarios/use-lilius 54250 * 54251 * The MIT License (MIT) 54252 * 54253 * Copyright (c) 2021-Present Danny Tatom 54254 * 54255 * Permission is hereby granted, free of charge, to any person obtaining a copy 54256 * of this software and associated documentation files (the "Software"), to deal 54257 * in the Software without restriction, including without limitation the rights 54258 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 54259 * copies of the Software, and to permit persons to whom the Software is 54260 * furnished to do so, subject to the following conditions: 54261 * 54262 * The above copyright notice and this permission notice shall be included in all 54263 * copies or substantial portions of the Software. 54264 * 54265 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 54266 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 54267 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 54268 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 54269 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 54270 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 54271 * SOFTWARE. 54272 */ 54273 54274 /** 54275 * External dependencies 54276 */ 54277 54278 54279 /** 54280 * WordPress dependencies 54281 */ 54282 54283 let Month = /*#__PURE__*/function (Month) { 54284 Month[Month["JANUARY"] = 0] = "JANUARY"; 54285 Month[Month["FEBRUARY"] = 1] = "FEBRUARY"; 54286 Month[Month["MARCH"] = 2] = "MARCH"; 54287 Month[Month["APRIL"] = 3] = "APRIL"; 54288 Month[Month["MAY"] = 4] = "MAY"; 54289 Month[Month["JUNE"] = 5] = "JUNE"; 54290 Month[Month["JULY"] = 6] = "JULY"; 54291 Month[Month["AUGUST"] = 7] = "AUGUST"; 54292 Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER"; 54293 Month[Month["OCTOBER"] = 9] = "OCTOBER"; 54294 Month[Month["NOVEMBER"] = 10] = "NOVEMBER"; 54295 Month[Month["DECEMBER"] = 11] = "DECEMBER"; 54296 return Month; 54297 }({}); 54298 let Day = /*#__PURE__*/function (Day) { 54299 Day[Day["SUNDAY"] = 0] = "SUNDAY"; 54300 Day[Day["MONDAY"] = 1] = "MONDAY"; 54301 Day[Day["TUESDAY"] = 2] = "TUESDAY"; 54302 Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY"; 54303 Day[Day["THURSDAY"] = 4] = "THURSDAY"; 54304 Day[Day["FRIDAY"] = 5] = "FRIDAY"; 54305 Day[Day["SATURDAY"] = 6] = "SATURDAY"; 54306 return Day; 54307 }({}); 54308 const inRange = (date, min, max) => (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max)); 54309 const use_lilius_clearTime = date => set(date, { 54310 hours: 0, 54311 minutes: 0, 54312 seconds: 0, 54313 milliseconds: 0 54314 }); 54315 const useLilius = ({ 54316 weekStartsOn = Day.SUNDAY, 54317 viewing: initialViewing = new Date(), 54318 selected: initialSelected = [], 54319 numberOfMonths = 1 54320 } = {}) => { 54321 const [viewing, setViewing] = (0,external_wp_element_namespaceObject.useState)(initialViewing); 54322 const viewToday = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(startOfToday()), [setViewing]); 54323 const viewMonth = (0,external_wp_element_namespaceObject.useCallback)(month => setViewing(v => setMonth(v, month)), []); 54324 const viewPreviousMonth = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => subMonths(v, 1)), []); 54325 const viewNextMonth = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => addMonths(v, 1)), []); 54326 const viewYear = (0,external_wp_element_namespaceObject.useCallback)(year => setViewing(v => setYear(v, year)), []); 54327 const viewPreviousYear = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => subYears(v, 1)), []); 54328 const viewNextYear = (0,external_wp_element_namespaceObject.useCallback)(() => setViewing(v => addYears(v, 1)), []); 54329 const [selected, setSelected] = (0,external_wp_element_namespaceObject.useState)(initialSelected.map(use_lilius_clearTime)); 54330 const clearSelected = () => setSelected([]); 54331 const isSelected = (0,external_wp_element_namespaceObject.useCallback)(date => selected.findIndex(s => isEqual(s, date)) > -1, [selected]); 54332 const select = (0,external_wp_element_namespaceObject.useCallback)((date, replaceExisting) => { 54333 if (replaceExisting) { 54334 setSelected(Array.isArray(date) ? date : [date]); 54335 } else { 54336 setSelected(selectedItems => selectedItems.concat(Array.isArray(date) ? date : [date])); 54337 } 54338 }, []); 54339 const deselect = (0,external_wp_element_namespaceObject.useCallback)(date => setSelected(selectedItems => Array.isArray(date) ? selectedItems.filter(s => !date.map(d => d.getTime()).includes(s.getTime())) : selectedItems.filter(s => !isEqual(s, date))), []); 54340 const toggle = (0,external_wp_element_namespaceObject.useCallback)((date, replaceExisting) => isSelected(date) ? deselect(date) : select(date, replaceExisting), [deselect, isSelected, select]); 54341 const selectRange = (0,external_wp_element_namespaceObject.useCallback)((start, end, replaceExisting) => { 54342 if (replaceExisting) { 54343 setSelected(eachDayOfInterval({ 54344 start, 54345 end 54346 })); 54347 } else { 54348 setSelected(selectedItems => selectedItems.concat(eachDayOfInterval({ 54349 start, 54350 end 54351 }))); 54352 } 54353 }, []); 54354 const deselectRange = (0,external_wp_element_namespaceObject.useCallback)((start, end) => { 54355 setSelected(selectedItems => selectedItems.filter(s => !eachDayOfInterval({ 54356 start, 54357 end 54358 }).map(d => d.getTime()).includes(s.getTime()))); 54359 }, []); 54360 const calendar = (0,external_wp_element_namespaceObject.useMemo)(() => eachMonthOfInterval({ 54361 start: startOfMonth(viewing), 54362 end: endOfMonth(addMonths(viewing, numberOfMonths - 1)) 54363 }).map(month => eachWeekOfInterval({ 54364 start: startOfMonth(month), 54365 end: endOfMonth(month) 54366 }, { 54367 weekStartsOn 54368 }).map(week => eachDayOfInterval({ 54369 start: startOfWeek(week, { 54370 weekStartsOn 54371 }), 54372 end: endOfWeek(week, { 54373 weekStartsOn 54374 }) 54375 }))), [viewing, weekStartsOn, numberOfMonths]); 54376 return { 54377 clearTime: use_lilius_clearTime, 54378 inRange, 54379 viewing, 54380 setViewing, 54381 viewToday, 54382 viewMonth, 54383 viewPreviousMonth, 54384 viewNextMonth, 54385 viewYear, 54386 viewPreviousYear, 54387 viewNextYear, 54388 selected, 54389 setSelected, 54390 clearSelected, 54391 isSelected, 54392 select, 54393 deselect, 54394 toggle, 54395 selectRange, 54396 deselectRange, 54397 calendar 54398 }; 54399 }; 54400 54401 ;// ./node_modules/@wordpress/components/build-module/date-time/date/styles.js 54402 54403 /** 54404 * External dependencies 54405 */ 54406 54407 /** 54408 * Internal dependencies 54409 */ 54410 54411 54412 54413 54414 54415 const styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54416 target: "e105ri6r5" 54417 } : 0)(boxSizingReset, ";" + ( true ? "" : 0)); 54418 const Navigator = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 54419 target: "e105ri6r4" 54420 } : 0)("margin-bottom:", space(4), ";" + ( true ? "" : 0)); 54421 const NavigatorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 54422 target: "e105ri6r3" 54423 } : 0)("font-size:", config_values.fontSize, ";font-weight:", config_values.fontWeight, ";strong{font-weight:", config_values.fontWeightHeading, ";}" + ( true ? "" : 0)); 54424 const Calendar = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54425 target: "e105ri6r2" 54426 } : 0)("column-gap:", space(2), ";display:grid;grid-template-columns:0.5fr repeat( 5, 1fr ) 0.5fr;justify-items:center;row-gap:", space(2), ";" + ( true ? "" : 0)); 54427 const DayOfWeek = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54428 target: "e105ri6r1" 54429 } : 0)("color:", COLORS.theme.gray[700], ";font-size:", config_values.fontSize, ";line-height:", config_values.fontLineHeightBase, ";&:nth-of-type( 1 ){justify-self:start;}&:nth-of-type( 7 ){justify-self:end;}" + ( true ? "" : 0)); 54430 const DayButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 54431 shouldForwardProp: prop => !['column', 'isSelected', 'isToday', 'hasEvents'].includes(prop), 54432 target: "e105ri6r0" 54433 } : 0)("grid-column:", props => props.column, ";position:relative;justify-content:center;", props => props.column === 1 && ` 54434 justify-self: start; 54435 `, " ", props => props.column === 7 && ` 54436 justify-self: end; 54437 `, " ", props => props.disabled && ` 54438 pointer-events: none; 54439 `, " &&&{border-radius:", config_values.radiusRound, ";height:", space(7), ";width:", space(7), ";", props => props.isSelected && ` 54440 background: $COLORS.theme.accent}; 54441 54442 &, 54443 &:hover:not(:disabled, [aria-disabled=true]) { 54444 color: $COLORS.theme.accentInverted}; 54445 } 54446 54447 &:focus:not(:disabled), 54448 &:focus:not(:disabled) { 54449 border: $config_values.borderWidthFocus} solid currentColor; 54450 } 54451 54452 /* Highlight the selected day for high-contrast mode */ 54453 &::after { 54454 content: ''; 54455 position: absolute; 54456 pointer-events: none; 54457 inset: 0; 54458 border-radius: inherit; 54459 border: 1px solid transparent; 54460 } 54461 `, " ", props => !props.isSelected && props.isToday && ` 54462 background: $COLORS.theme.gray[200]}; 54463 `, ";}", props => props.hasEvents && ` 54464 ::before { 54465 border: 2px solid $props.isSelected ? COLORS.theme.accentInverted : COLORS.theme.accent}; 54466 border-radius: $config_values.radiusRound}; 54467 content: " "; 54468 left: 50%; 54469 position: absolute; 54470 transform: translate(-50%, 9px); 54471 } 54472 `, ";" + ( true ? "" : 0)); 54473 54474 ;// ./node_modules/@wordpress/components/build-module/date-time/utils.js 54475 /** 54476 * External dependencies 54477 */ 54478 54479 54480 /** 54481 * Internal dependencies 54482 */ 54483 54484 54485 54486 /** 54487 * Like date-fn's toDate, but tries to guess the format when a string is 54488 * given. 54489 * 54490 * @param input Value to turn into a date. 54491 */ 54492 function inputToDate(input) { 54493 if (typeof input === 'string') { 54494 return new Date(input); 54495 } 54496 return toDate(input); 54497 } 54498 54499 /** 54500 * Converts a 12-hour time to a 24-hour time. 54501 * @param hours 54502 * @param isPm 54503 */ 54504 function from12hTo24h(hours, isPm) { 54505 return isPm ? (hours % 12 + 12) % 24 : hours % 12; 54506 } 54507 54508 /** 54509 * Converts a 24-hour time to a 12-hour time. 54510 * @param hours 54511 */ 54512 function from24hTo12h(hours) { 54513 return hours % 12 || 12; 54514 } 54515 54516 /** 54517 * Creates an InputControl reducer used to pad an input so that it is always a 54518 * given width. For example, the hours and minutes inputs are padded to 2 so 54519 * that '4' appears as '04'. 54520 * 54521 * @param pad How many digits the value should be. 54522 */ 54523 function buildPadInputStateReducer(pad) { 54524 return (state, action) => { 54525 const nextState = { 54526 ...state 54527 }; 54528 if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) { 54529 if (nextState.value !== undefined) { 54530 nextState.value = nextState.value.toString().padStart(pad, '0'); 54531 } 54532 } 54533 return nextState; 54534 }; 54535 } 54536 54537 /** 54538 * Validates the target of a React event to ensure it is an input element and 54539 * that the input is valid. 54540 * @param event 54541 */ 54542 function validateInputElementTarget(event) { 54543 var _ownerDocument$defaul; 54544 // `instanceof` checks need to get the instance definition from the 54545 // corresponding window object — therefore, the following logic makes 54546 // the component work correctly even when rendered inside an iframe. 54547 const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement; 54548 if (!(event.target instanceof HTMLInputElementInstance)) { 54549 return false; 54550 } 54551 return event.target.validity.valid; 54552 } 54553 54554 ;// ./node_modules/@wordpress/components/build-module/date-time/constants.js 54555 const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss"; 54556 54557 ;// ./node_modules/@wordpress/components/build-module/date-time/date/index.js 54558 /** 54559 * External dependencies 54560 */ 54561 54562 /** 54563 * WordPress dependencies 54564 */ 54565 54566 54567 54568 54569 54570 /** 54571 * Internal dependencies 54572 */ 54573 54574 54575 54576 54577 54578 54579 /** 54580 * DatePicker is a React component that renders a calendar for date selection. 54581 * 54582 * ```jsx 54583 * import { DatePicker } from '@wordpress/components'; 54584 * import { useState } from '@wordpress/element'; 54585 * 54586 * const MyDatePicker = () => { 54587 * const [ date, setDate ] = useState( new Date() ); 54588 * 54589 * return ( 54590 * <DatePicker 54591 * currentDate={ date } 54592 * onChange={ ( newDate ) => setDate( newDate ) } 54593 * /> 54594 * ); 54595 * }; 54596 * ``` 54597 */ 54598 54599 function DatePicker({ 54600 currentDate, 54601 onChange, 54602 events = [], 54603 isInvalidDate, 54604 onMonthPreviewed, 54605 startOfWeek: weekStartsOn = 0 54606 }) { 54607 const date = currentDate ? inputToDate(currentDate) : new Date(); 54608 const { 54609 calendar, 54610 viewing, 54611 setSelected, 54612 setViewing, 54613 isSelected, 54614 viewPreviousMonth, 54615 viewNextMonth 54616 } = useLilius({ 54617 selected: [startOfDay(date)], 54618 viewing: startOfDay(date), 54619 weekStartsOn 54620 }); 54621 54622 // Used to implement a roving tab index. Tracks the day that receives focus 54623 // when the user tabs into the calendar. 54624 const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay(date)); 54625 54626 // Allows us to only programmatically focus() a day when focus was already 54627 // within the calendar. This stops us stealing focus from e.g. a TimePicker 54628 // input. 54629 const [isFocusWithinCalendar, setIsFocusWithinCalendar] = (0,external_wp_element_namespaceObject.useState)(false); 54630 54631 // Update internal state when currentDate prop changes. 54632 const [prevCurrentDate, setPrevCurrentDate] = (0,external_wp_element_namespaceObject.useState)(currentDate); 54633 if (currentDate !== prevCurrentDate) { 54634 setPrevCurrentDate(currentDate); 54635 setSelected([startOfDay(date)]); 54636 setViewing(startOfDay(date)); 54637 setFocusable(startOfDay(date)); 54638 } 54639 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Wrapper, { 54640 className: "components-datetime__date", 54641 role: "application", 54642 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar'), 54643 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Navigator, { 54644 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 54645 icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left, 54646 variant: "tertiary", 54647 "aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'), 54648 onClick: () => { 54649 viewPreviousMonth(); 54650 setFocusable(subMonths(focusable, 1)); 54651 onMonthPreviewed?.(format(subMonths(viewing, 1), TIMEZONELESS_FORMAT)); 54652 }, 54653 size: "compact" 54654 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(NavigatorHeading, { 54655 level: 3, 54656 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", { 54657 children: (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset()) 54658 }), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())] 54659 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 54660 icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right, 54661 variant: "tertiary", 54662 "aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'), 54663 onClick: () => { 54664 viewNextMonth(); 54665 setFocusable(addMonths(focusable, 1)); 54666 onMonthPreviewed?.(format(addMonths(viewing, 1), TIMEZONELESS_FORMAT)); 54667 }, 54668 size: "compact" 54669 })] 54670 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Calendar, { 54671 onFocus: () => setIsFocusWithinCalendar(true), 54672 onBlur: () => setIsFocusWithinCalendar(false), 54673 children: [calendar[0][0].map(day => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayOfWeek, { 54674 children: (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset()) 54675 }, day.toString())), calendar[0].map(week => week.map((day, index) => { 54676 if (!isSameMonth(day, viewing)) { 54677 return null; 54678 } 54679 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_Day, { 54680 day: day, 54681 column: index + 1, 54682 isSelected: isSelected(day), 54683 isFocusable: isEqual(day, focusable), 54684 isFocusAllowed: isFocusWithinCalendar, 54685 isToday: isSameDay(day, new Date()), 54686 isInvalid: isInvalidDate ? isInvalidDate(day) : false, 54687 numEvents: events.filter(event => isSameDay(event.date, day)).length, 54688 onClick: () => { 54689 setSelected([day]); 54690 setFocusable(day); 54691 onChange?.(format( 54692 // Don't change the selected date's time fields. 54693 new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT)); 54694 }, 54695 onKeyDown: event => { 54696 let nextFocusable; 54697 if (event.key === 'ArrowLeft') { 54698 nextFocusable = addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1); 54699 } 54700 if (event.key === 'ArrowRight') { 54701 nextFocusable = addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1); 54702 } 54703 if (event.key === 'ArrowUp') { 54704 nextFocusable = subWeeks(day, 1); 54705 } 54706 if (event.key === 'ArrowDown') { 54707 nextFocusable = addWeeks(day, 1); 54708 } 54709 if (event.key === 'PageUp') { 54710 nextFocusable = subMonths(day, 1); 54711 } 54712 if (event.key === 'PageDown') { 54713 nextFocusable = addMonths(day, 1); 54714 } 54715 if (event.key === 'Home') { 54716 nextFocusable = startOfWeek(day); 54717 } 54718 if (event.key === 'End') { 54719 nextFocusable = startOfDay(endOfWeek(day)); 54720 } 54721 if (nextFocusable) { 54722 event.preventDefault(); 54723 setFocusable(nextFocusable); 54724 if (!isSameMonth(nextFocusable, viewing)) { 54725 setViewing(nextFocusable); 54726 onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT)); 54727 } 54728 } 54729 } 54730 }, day.toString()); 54731 }))] 54732 })] 54733 }); 54734 } 54735 function date_Day({ 54736 day, 54737 column, 54738 isSelected, 54739 isFocusable, 54740 isFocusAllowed, 54741 isToday, 54742 isInvalid, 54743 numEvents, 54744 onClick, 54745 onKeyDown 54746 }) { 54747 const ref = (0,external_wp_element_namespaceObject.useRef)(); 54748 54749 // Focus the day when it becomes focusable, e.g. because an arrow key is 54750 // pressed. Only do this if focus is allowed - this stops us stealing focus 54751 // from e.g. a TimePicker input. 54752 (0,external_wp_element_namespaceObject.useEffect)(() => { 54753 if (ref.current && isFocusable && isFocusAllowed) { 54754 ref.current.focus(); 54755 } 54756 // isFocusAllowed is not a dep as there is no point calling focus() on 54757 // an already focused element. 54758 }, [isFocusable]); 54759 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayButton, { 54760 __next40pxDefaultSize: true, 54761 ref: ref, 54762 className: "components-datetime__date__day" // Unused, for backwards compatibility. 54763 , 54764 disabled: isInvalid, 54765 tabIndex: isFocusable ? 0 : -1, 54766 "aria-label": getDayLabel(day, isSelected, numEvents), 54767 column: column, 54768 isSelected: isSelected, 54769 isToday: isToday, 54770 hasEvents: numEvents > 0, 54771 onClick: onClick, 54772 onKeyDown: onKeyDown, 54773 children: (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset()) 54774 }); 54775 } 54776 function getDayLabel(date, isSelected, numEvents) { 54777 const { 54778 formats 54779 } = (0,external_wp_date_namespaceObject.getSettings)(); 54780 const localizedDate = (0,external_wp_date_namespaceObject.dateI18n)(formats.date, date, -date.getTimezoneOffset()); 54781 if (isSelected && numEvents > 0) { 54782 return (0,external_wp_i18n_namespaceObject.sprintf)( 54783 // translators: 1: The calendar date. 2: Number of events on the calendar date. 54784 (0,external_wp_i18n_namespaceObject._n)('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents); 54785 } else if (isSelected) { 54786 return (0,external_wp_i18n_namespaceObject.sprintf)( 54787 // translators: %s: The calendar date. 54788 (0,external_wp_i18n_namespaceObject.__)('%1$s. Selected'), localizedDate); 54789 } else if (numEvents > 0) { 54790 return (0,external_wp_i18n_namespaceObject.sprintf)( 54791 // translators: 1: The calendar date. 2: Number of events on the calendar date. 54792 (0,external_wp_i18n_namespaceObject._n)('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents); 54793 } 54794 return localizedDate; 54795 } 54796 /* harmony default export */ const date = (DatePicker); 54797 54798 ;// ./node_modules/date-fns/startOfMinute.mjs 54799 54800 54801 /** 54802 * @name startOfMinute 54803 * @category Minute Helpers 54804 * @summary Return the start of a minute for the given date. 54805 * 54806 * @description 54807 * Return the start of a minute for the given date. 54808 * The result will be in the local timezone. 54809 * 54810 * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). 54811 * 54812 * @param date - The original date 54813 * 54814 * @returns The start of a minute 54815 * 54816 * @example 54817 * // The start of a minute for 1 December 2014 22:15:45.400: 54818 * const result = startOfMinute(new Date(2014, 11, 1, 22, 15, 45, 400)) 54819 * //=> Mon Dec 01 2014 22:15:00 54820 */ 54821 function startOfMinute(date) { 54822 const _date = toDate(date); 54823 _date.setSeconds(0, 0); 54824 return _date; 54825 } 54826 54827 // Fallback for modularized imports: 54828 /* harmony default export */ const date_fns_startOfMinute = ((/* unused pure expression or super */ null && (startOfMinute))); 54829 54830 ;// ./node_modules/@wordpress/components/build-module/date-time/time/styles.js 54831 54832 function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 54833 /** 54834 * External dependencies 54835 */ 54836 54837 54838 54839 /** 54840 * Internal dependencies 54841 */ 54842 54843 54844 54845 54846 const time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54847 target: "evcr2319" 54848 } : 0)("box-sizing:border-box;font-size:", config_values.fontSize, ";" + ( true ? "" : 0)); 54849 const Fieldset = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? { 54850 target: "evcr2318" 54851 } : 0)("border:0;margin:0 0 ", space(2 * 2), " 0;padding:0;&:last-child{margin-bottom:0;}" + ( true ? "" : 0)); 54852 const TimeWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54853 target: "evcr2317" 54854 } : 0)( true ? { 54855 name: "pd0mhc", 54856 styles: "direction:ltr;display:flex" 54857 } : 0); 54858 const baseInput = /*#__PURE__*/emotion_react_browser_esm_css("&&& ", Input, "{padding-left:", space(2), ";padding-right:", space(2), ";text-align:center;}" + ( true ? "" : 0), true ? "" : 0); 54859 const HoursInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 54860 target: "evcr2316" 54861 } : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-right:0;}&&& ", BackdropUI, "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}" + ( true ? "" : 0)); 54862 const TimeSeparator = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 54863 target: "evcr2315" 54864 } : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";font-size:", config_values.fontSize, ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0)); 54865 const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 54866 target: "evcr2314" 54867 } : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-left:0;}&&& ", BackdropUI, "{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;}" + ( true ? "" : 0)); 54868 54869 // Ideally we wouldn't need a wrapper, but can't otherwise target the 54870 // <BaseControl> in <SelectControl> 54871 const MonthSelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54872 target: "evcr2313" 54873 } : 0)( true ? { 54874 name: "1ff36h2", 54875 styles: "flex-grow:1" 54876 } : 0); 54877 const DayInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 54878 target: "evcr2312" 54879 } : 0)(baseInput, " width:", space(9), ";" + ( true ? "" : 0)); 54880 const YearInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 54881 target: "evcr2311" 54882 } : 0)(baseInput, " width:", space(14), ";" + ( true ? "" : 0)); 54883 const TimeZone = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 54884 target: "evcr2310" 54885 } : 0)( true ? { 54886 name: "ebu3jh", 54887 styles: "text-decoration:underline dotted" 54888 } : 0); 54889 54890 ;// ./node_modules/@wordpress/components/build-module/date-time/time/timezone.js 54891 /** 54892 * WordPress dependencies 54893 */ 54894 54895 54896 54897 /** 54898 * Internal dependencies 54899 */ 54900 54901 54902 54903 /** 54904 * Displays timezone information when user timezone is different from site 54905 * timezone. 54906 */ 54907 54908 const timezone_TimeZone = () => { 54909 const { 54910 timezone 54911 } = (0,external_wp_date_namespaceObject.getSettings)(); 54912 54913 // Convert timezone offset to hours. 54914 const userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60); 54915 54916 // System timezone and user timezone match, nothing needed. 54917 // Compare as numbers because it comes over as string. 54918 if (Number(timezone.offset) === userTimezoneOffset) { 54919 return null; 54920 } 54921 const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : ''; 54922 const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC$offsetSymbol}$timezone.offsetFormatted}`; 54923 54924 // Replace underscore with space in strings like `America/Costa_Rica`. 54925 const prettyTimezoneString = timezone.string.replace('_', ' '); 54926 const timezoneDetail = 'UTC' === timezone.string ? (0,external_wp_i18n_namespaceObject.__)('Coordinated Universal Time') : `($zoneAbbr}) $prettyTimezoneString}`; 54927 54928 // When the prettyTimezoneString is empty, there is no additional timezone 54929 // detail information to show in a Tooltip. 54930 const hasNoAdditionalTimezoneDetail = prettyTimezoneString.trim().length === 0; 54931 return hasNoAdditionalTimezoneDetail ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeZone, { 54932 className: "components-datetime__timezone", 54933 children: zoneAbbr 54934 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { 54935 placement: "top", 54936 text: timezoneDetail, 54937 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeZone, { 54938 className: "components-datetime__timezone", 54939 children: zoneAbbr 54940 }) 54941 }); 54942 }; 54943 /* harmony default export */ const timezone = (timezone_TimeZone); 54944 54945 ;// ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option/component.js 54946 /** 54947 * External dependencies 54948 */ 54949 54950 /** 54951 * WordPress dependencies 54952 */ 54953 54954 54955 /** 54956 * Internal dependencies 54957 */ 54958 54959 54960 54961 function UnforwardedToggleGroupControlOption(props, ref) { 54962 const { 54963 label, 54964 ...restProps 54965 } = props; 54966 const optionLabel = restProps['aria-label'] || label; 54967 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, { 54968 ...restProps, 54969 "aria-label": optionLabel, 54970 ref: ref, 54971 children: label 54972 }); 54973 } 54974 54975 /** 54976 * `ToggleGroupControlOption` is a form component and is meant to be used as a 54977 * child of `ToggleGroupControl`. 54978 * 54979 * ```jsx 54980 * import { 54981 * __experimentalToggleGroupControl as ToggleGroupControl, 54982 * __experimentalToggleGroupControlOption as ToggleGroupControlOption, 54983 * } from '@wordpress/components'; 54984 * 54985 * function Example() { 54986 * return ( 54987 * <ToggleGroupControl 54988 * label="my label" 54989 * value="vertical" 54990 * isBlock 54991 * __nextHasNoMarginBottom 54992 * __next40pxDefaultSize 54993 * > 54994 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 54995 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 54996 * </ToggleGroupControl> 54997 * ); 54998 * } 54999 * ``` 55000 */ 55001 const ToggleGroupControlOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOption); 55002 /* harmony default export */ const toggle_group_control_option_component = (ToggleGroupControlOption); 55003 55004 ;// ./node_modules/@wordpress/components/build-module/date-time/time/time-input/index.js 55005 /** 55006 * External dependencies 55007 */ 55008 55009 55010 /** 55011 * WordPress dependencies 55012 */ 55013 55014 55015 55016 /** 55017 * Internal dependencies 55018 */ 55019 55020 55021 55022 55023 55024 55025 55026 function TimeInput({ 55027 value: valueProp, 55028 defaultValue, 55029 is12Hour, 55030 label, 55031 minutesProps, 55032 onChange 55033 }) { 55034 const [value = { 55035 hours: new Date().getHours(), 55036 minutes: new Date().getMinutes() 55037 }, setValue] = useControlledValue({ 55038 value: valueProp, 55039 onChange, 55040 defaultValue 55041 }); 55042 const dayPeriod = parseDayPeriod(value.hours); 55043 const hours12Format = from24hTo12h(value.hours); 55044 const buildNumberControlChangeCallback = method => { 55045 return (_value, { 55046 event 55047 }) => { 55048 if (!validateInputElementTarget(event)) { 55049 return; 55050 } 55051 55052 // We can safely assume value is a number if target is valid. 55053 const numberValue = Number(_value); 55054 setValue({ 55055 ...value, 55056 [method]: method === 'hours' && is12Hour ? from12hTo24h(numberValue, dayPeriod === 'PM') : numberValue 55057 }); 55058 }; 55059 }; 55060 const buildAmPmChangeCallback = _value => { 55061 return () => { 55062 if (dayPeriod === _value) { 55063 return; 55064 } 55065 setValue({ 55066 ...value, 55067 hours: from12hTo24h(hours12Format, _value === 'PM') 55068 }); 55069 }; 55070 }; 55071 function parseDayPeriod(_hours) { 55072 return _hours < 12 ? 'AM' : 'PM'; 55073 } 55074 const Wrapper = label ? Fieldset : external_wp_element_namespaceObject.Fragment; 55075 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, { 55076 children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { 55077 as: "legend", 55078 children: label 55079 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 55080 alignment: "left", 55081 expanded: false, 55082 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TimeWrapper, { 55083 className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility. 55084 , 55085 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HoursInput, { 55086 className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility. 55087 , 55088 label: (0,external_wp_i18n_namespaceObject.__)('Hours'), 55089 hideLabelFromVision: true, 55090 __next40pxDefaultSize: true, 55091 value: String(is12Hour ? hours12Format : value.hours).padStart(2, '0'), 55092 step: 1, 55093 min: is12Hour ? 1 : 0, 55094 max: is12Hour ? 12 : 23, 55095 required: true, 55096 spinControls: "none", 55097 isPressEnterToChange: true, 55098 isDragEnabled: false, 55099 isShiftStepEnabled: false, 55100 onChange: buildNumberControlChangeCallback('hours'), 55101 __unstableStateReducer: buildPadInputStateReducer(2) 55102 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeSeparator, { 55103 className: "components-datetime__time-separator" // Unused, for backwards compatibility. 55104 , 55105 "aria-hidden": "true", 55106 children: ":" 55107 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MinutesInput, { 55108 className: dist_clsx('components-datetime__time-field-minutes-input', 55109 // Unused, for backwards compatibility. 55110 minutesProps?.className), 55111 label: (0,external_wp_i18n_namespaceObject.__)('Minutes'), 55112 hideLabelFromVision: true, 55113 __next40pxDefaultSize: true, 55114 value: String(value.minutes).padStart(2, '0'), 55115 step: 1, 55116 min: 0, 55117 max: 59, 55118 required: true, 55119 spinControls: "none", 55120 isPressEnterToChange: true, 55121 isDragEnabled: false, 55122 isShiftStepEnabled: false, 55123 onChange: (...args) => { 55124 buildNumberControlChangeCallback('minutes')(...args); 55125 minutesProps?.onChange?.(...args); 55126 }, 55127 __unstableStateReducer: buildPadInputStateReducer(2), 55128 ...minutesProps 55129 })] 55130 }), is12Hour && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(toggle_group_control_component, { 55131 __next40pxDefaultSize: true, 55132 __nextHasNoMarginBottom: true, 55133 isBlock: true, 55134 label: (0,external_wp_i18n_namespaceObject.__)('Select AM or PM'), 55135 hideLabelFromVision: true, 55136 value: dayPeriod, 55137 onChange: newValue => { 55138 buildAmPmChangeCallback(newValue)(); 55139 }, 55140 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_component, { 55141 value: "AM", 55142 label: (0,external_wp_i18n_namespaceObject.__)('AM') 55143 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_component, { 55144 value: "PM", 55145 label: (0,external_wp_i18n_namespaceObject.__)('PM') 55146 })] 55147 })] 55148 })] 55149 }); 55150 } 55151 /* harmony default export */ const time_input = ((/* unused pure expression or super */ null && (TimeInput))); 55152 55153 ;// ./node_modules/@wordpress/components/build-module/date-time/time/index.js 55154 /** 55155 * External dependencies 55156 */ 55157 55158 55159 /** 55160 * WordPress dependencies 55161 */ 55162 55163 55164 55165 /** 55166 * Internal dependencies 55167 */ 55168 55169 55170 55171 55172 55173 55174 55175 55176 55177 55178 55179 const VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd']; 55180 55181 /** 55182 * TimePicker is a React component that renders a clock for time selection. 55183 * 55184 * ```jsx 55185 * import { TimePicker } from '@wordpress/components'; 55186 * import { useState } from '@wordpress/element'; 55187 * 55188 * const MyTimePicker = () => { 55189 * const [ time, setTime ] = useState( new Date() ); 55190 * 55191 * return ( 55192 * <TimePicker 55193 * currentTime={ date } 55194 * onChange={ ( newTime ) => setTime( newTime ) } 55195 * is12Hour 55196 * /> 55197 * ); 55198 * }; 55199 * ``` 55200 */ 55201 function TimePicker({ 55202 is12Hour, 55203 currentTime, 55204 onChange, 55205 dateOrder: dateOrderProp, 55206 hideLabelFromVision = false 55207 }) { 55208 const [date, setDate] = (0,external_wp_element_namespaceObject.useState)(() => 55209 // Truncate the date at the minutes, see: #15495. 55210 currentTime ? startOfMinute(inputToDate(currentTime)) : new Date()); 55211 55212 // Reset the state when currentTime changed. 55213 // TODO: useEffect() shouldn't be used like this, causes an unnecessary render 55214 (0,external_wp_element_namespaceObject.useEffect)(() => { 55215 setDate(currentTime ? startOfMinute(inputToDate(currentTime)) : new Date()); 55216 }, [currentTime]); 55217 const monthOptions = [{ 55218 value: '01', 55219 label: (0,external_wp_i18n_namespaceObject.__)('January') 55220 }, { 55221 value: '02', 55222 label: (0,external_wp_i18n_namespaceObject.__)('February') 55223 }, { 55224 value: '03', 55225 label: (0,external_wp_i18n_namespaceObject.__)('March') 55226 }, { 55227 value: '04', 55228 label: (0,external_wp_i18n_namespaceObject.__)('April') 55229 }, { 55230 value: '05', 55231 label: (0,external_wp_i18n_namespaceObject.__)('May') 55232 }, { 55233 value: '06', 55234 label: (0,external_wp_i18n_namespaceObject.__)('June') 55235 }, { 55236 value: '07', 55237 label: (0,external_wp_i18n_namespaceObject.__)('July') 55238 }, { 55239 value: '08', 55240 label: (0,external_wp_i18n_namespaceObject.__)('August') 55241 }, { 55242 value: '09', 55243 label: (0,external_wp_i18n_namespaceObject.__)('September') 55244 }, { 55245 value: '10', 55246 label: (0,external_wp_i18n_namespaceObject.__)('October') 55247 }, { 55248 value: '11', 55249 label: (0,external_wp_i18n_namespaceObject.__)('November') 55250 }, { 55251 value: '12', 55252 label: (0,external_wp_i18n_namespaceObject.__)('December') 55253 }]; 55254 const { 55255 day, 55256 month, 55257 year, 55258 minutes, 55259 hours 55260 } = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 55261 day: format(date, 'dd'), 55262 month: format(date, 'MM'), 55263 year: format(date, 'yyyy'), 55264 minutes: format(date, 'mm'), 55265 hours: format(date, 'HH'), 55266 am: format(date, 'a') 55267 }), [date]); 55268 const buildNumberControlChangeCallback = method => { 55269 const callback = (value, { 55270 event 55271 }) => { 55272 if (!validateInputElementTarget(event)) { 55273 return; 55274 } 55275 55276 // We can safely assume value is a number if target is valid. 55277 const numberValue = Number(value); 55278 const newDate = set(date, { 55279 [method]: numberValue 55280 }); 55281 setDate(newDate); 55282 onChange?.(format(newDate, TIMEZONELESS_FORMAT)); 55283 }; 55284 return callback; 55285 }; 55286 const onTimeInputChangeCallback = ({ 55287 hours: newHours, 55288 minutes: newMinutes 55289 }) => { 55290 const newDate = set(date, { 55291 hours: newHours, 55292 minutes: newMinutes 55293 }); 55294 setDate(newDate); 55295 onChange?.(format(newDate, TIMEZONELESS_FORMAT)); 55296 }; 55297 const dayField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayInput, { 55298 className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility. 55299 , 55300 label: (0,external_wp_i18n_namespaceObject.__)('Day'), 55301 hideLabelFromVision: true, 55302 __next40pxDefaultSize: true, 55303 value: day, 55304 step: 1, 55305 min: 1, 55306 max: 31, 55307 required: true, 55308 spinControls: "none", 55309 isPressEnterToChange: true, 55310 isDragEnabled: false, 55311 isShiftStepEnabled: false, 55312 onChange: buildNumberControlChangeCallback('date') 55313 }, "day"); 55314 const monthField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MonthSelectWrapper, { 55315 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { 55316 className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility. 55317 , 55318 label: (0,external_wp_i18n_namespaceObject.__)('Month'), 55319 hideLabelFromVision: true, 55320 __next40pxDefaultSize: true, 55321 __nextHasNoMarginBottom: true, 55322 value: month, 55323 options: monthOptions, 55324 onChange: value => { 55325 const newDate = setMonth(date, Number(value) - 1); 55326 setDate(newDate); 55327 onChange?.(format(newDate, TIMEZONELESS_FORMAT)); 55328 } 55329 }) 55330 }, "month"); 55331 const yearField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(YearInput, { 55332 className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility. 55333 , 55334 label: (0,external_wp_i18n_namespaceObject.__)('Year'), 55335 hideLabelFromVision: true, 55336 __next40pxDefaultSize: true, 55337 value: year, 55338 step: 1, 55339 min: 1, 55340 max: 9999, 55341 required: true, 55342 spinControls: "none", 55343 isPressEnterToChange: true, 55344 isDragEnabled: false, 55345 isShiftStepEnabled: false, 55346 onChange: buildNumberControlChangeCallback('year'), 55347 __unstableStateReducer: buildPadInputStateReducer(4) 55348 }, "year"); 55349 const defaultDateOrder = is12Hour ? 'mdy' : 'dmy'; 55350 const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder; 55351 const fields = dateOrder.split('').map(field => { 55352 switch (field) { 55353 case 'd': 55354 return dayField; 55355 case 'm': 55356 return monthField; 55357 case 'y': 55358 return yearField; 55359 default: 55360 return null; 55361 } 55362 }); 55363 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(time_styles_Wrapper, { 55364 className: "components-datetime__time" // Unused, for backwards compatibility. 55365 , 55366 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Fieldset, { 55367 children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 55368 as: "legend", 55369 children: (0,external_wp_i18n_namespaceObject.__)('Time') 55370 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { 55371 as: "legend", 55372 className: "components-datetime__time-legend" // Unused, for backwards compatibility. 55373 , 55374 children: (0,external_wp_i18n_namespaceObject.__)('Time') 55375 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 55376 className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. 55377 , 55378 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeInput, { 55379 value: { 55380 hours: Number(hours), 55381 minutes: Number(minutes) 55382 }, 55383 is12Hour: is12Hour, 55384 onChange: onTimeInputChangeCallback 55385 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(timezone, {})] 55386 })] 55387 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Fieldset, { 55388 children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 55389 as: "legend", 55390 children: (0,external_wp_i18n_namespaceObject.__)('Date') 55391 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { 55392 as: "legend", 55393 className: "components-datetime__time-legend" // Unused, for backwards compatibility. 55394 , 55395 children: (0,external_wp_i18n_namespaceObject.__)('Date') 55396 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(h_stack_component, { 55397 className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. 55398 , 55399 children: fields 55400 })] 55401 })] 55402 }); 55403 } 55404 55405 /** 55406 * A component to input a time. 55407 * 55408 * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`). 55409 * 55410 * ```jsx 55411 * import { TimePicker } from '@wordpress/components'; 55412 * import { useState } from '@wordpress/element'; 55413 * 55414 * const MyTimeInput = () => { 55415 * const [ time, setTime ] = useState( { hours: 13, minutes: 30 } ); 55416 * 55417 * return ( 55418 * <TimePicker.TimeInput 55419 * value={ time } 55420 * onChange={ setTime } 55421 * label="Time" 55422 * /> 55423 * ); 55424 * }; 55425 * ``` 55426 */ 55427 TimePicker.TimeInput = TimeInput; 55428 Object.assign(TimePicker.TimeInput, { 55429 displayName: 'TimePicker.TimeInput' 55430 }); 55431 /* harmony default export */ const date_time_time = (TimePicker); 55432 55433 ;// ./node_modules/@wordpress/components/build-module/date-time/date-time/styles.js 55434 55435 function date_time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 55436 /** 55437 * External dependencies 55438 */ 55439 55440 /** 55441 * Internal dependencies 55442 */ 55443 55444 const date_time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm(v_stack_component, true ? { 55445 target: "e1p5onf00" 55446 } : 0)( true ? { 55447 name: "1khn195", 55448 styles: "box-sizing:border-box" 55449 } : 0); 55450 55451 ;// ./node_modules/@wordpress/components/build-module/date-time/date-time/index.js 55452 /** 55453 * External dependencies 55454 */ 55455 55456 /** 55457 * WordPress dependencies 55458 */ 55459 55460 55461 /** 55462 * Internal dependencies 55463 */ 55464 55465 55466 55467 55468 55469 const date_time_noop = () => {}; 55470 function UnforwardedDateTimePicker({ 55471 currentDate, 55472 is12Hour, 55473 dateOrder, 55474 isInvalidDate, 55475 onMonthPreviewed = date_time_noop, 55476 onChange, 55477 events, 55478 startOfWeek 55479 }, ref) { 55480 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_time_styles_Wrapper, { 55481 ref: ref, 55482 className: "components-datetime", 55483 spacing: 4, 55484 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 55485 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_time_time, { 55486 currentTime: currentDate, 55487 onChange: onChange, 55488 is12Hour: is12Hour, 55489 dateOrder: dateOrder 55490 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date, { 55491 currentDate: currentDate, 55492 onChange: onChange, 55493 isInvalidDate: isInvalidDate, 55494 events: events, 55495 onMonthPreviewed: onMonthPreviewed, 55496 startOfWeek: startOfWeek 55497 })] 55498 }) 55499 }); 55500 } 55501 55502 /** 55503 * DateTimePicker is a React component that renders a calendar and clock for 55504 * date and time selection. The calendar and clock components can be accessed 55505 * individually using the `DatePicker` and `TimePicker` components respectively. 55506 * 55507 * ```jsx 55508 * import { DateTimePicker } from '@wordpress/components'; 55509 * import { useState } from '@wordpress/element'; 55510 * 55511 * const MyDateTimePicker = () => { 55512 * const [ date, setDate ] = useState( new Date() ); 55513 * 55514 * return ( 55515 * <DateTimePicker 55516 * currentDate={ date } 55517 * onChange={ ( newDate ) => setDate( newDate ) } 55518 * is12Hour 55519 * /> 55520 * ); 55521 * }; 55522 * ``` 55523 */ 55524 const DateTimePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDateTimePicker); 55525 /* harmony default export */ const date_time = (DateTimePicker); 55526 55527 ;// ./node_modules/@wordpress/components/build-module/date-time/index.js 55528 /** 55529 * Internal dependencies 55530 */ 55531 55532 55533 55534 55535 /* harmony default export */ const build_module_date_time = (date_time); 55536 55537 ;// ./node_modules/@wordpress/components/build-module/dimension-control/sizes.js 55538 /** 55539 * Sizes 55540 * 55541 * defines the sizes used in dimension controls 55542 * all hardcoded `size` values are based on the value of 55543 * the Sass variable `$block-padding` from 55544 * `packages/block-editor/src/components/dimension-control/sizes.js`. 55545 */ 55546 55547 /** 55548 * WordPress dependencies 55549 */ 55550 55551 55552 /** 55553 * Internal dependencies 55554 */ 55555 55556 /** 55557 * Finds the correct size object from the provided sizes 55558 * table by size slug (eg: `medium`) 55559 * 55560 * @param sizes containing objects for each size definition. 55561 * @param slug a string representation of the size (eg: `medium`). 55562 */ 55563 const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug); 55564 /* harmony default export */ const dimension_control_sizes = ([{ 55565 name: (0,external_wp_i18n_namespaceObject._x)('None', 'Size of a UI element'), 55566 slug: 'none' 55567 }, { 55568 name: (0,external_wp_i18n_namespaceObject._x)('Small', 'Size of a UI element'), 55569 slug: 'small' 55570 }, { 55571 name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'Size of a UI element'), 55572 slug: 'medium' 55573 }, { 55574 name: (0,external_wp_i18n_namespaceObject._x)('Large', 'Size of a UI element'), 55575 slug: 'large' 55576 }, { 55577 name: (0,external_wp_i18n_namespaceObject._x)('Extra Large', 'Size of a UI element'), 55578 slug: 'xlarge' 55579 }]); 55580 55581 ;// ./node_modules/@wordpress/components/build-module/dimension-control/index.js 55582 /** 55583 * External dependencies 55584 */ 55585 55586 55587 /** 55588 * WordPress dependencies 55589 */ 55590 55591 55592 /** 55593 * Internal dependencies 55594 */ 55595 55596 55597 55598 55599 55600 55601 55602 const dimension_control_CONTEXT_VALUE = { 55603 BaseControl: { 55604 // Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName` 55605 // via the context system to override the value set by SelectControl. 55606 _overrides: { 55607 __associatedWPComponentName: 'DimensionControl' 55608 } 55609 } 55610 }; 55611 55612 /** 55613 * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. 55614 * 55615 * @deprecated 55616 * 55617 * ```jsx 55618 * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components'; 55619 * import { useState } from '@wordpress/element'; 55620 * 55621 * export default function MyCustomDimensionControl() { 55622 * const [ paddingSize, setPaddingSize ] = useState( '' ); 55623 * 55624 * return ( 55625 * <DimensionControl 55626 * __next40pxDefaultSize 55627 * __nextHasNoMarginBottom 55628 * label={ 'Padding' } 55629 * icon={ 'desktop' } 55630 * onChange={ ( value ) => setPaddingSize( value ) } 55631 * value={ paddingSize } 55632 * /> 55633 * ); 55634 * } 55635 * ``` 55636 */ 55637 function DimensionControl(props) { 55638 const { 55639 __next40pxDefaultSize = false, 55640 __nextHasNoMarginBottom = false, 55641 label, 55642 value, 55643 sizes = dimension_control_sizes, 55644 icon, 55645 onChange, 55646 className = '' 55647 } = props; 55648 external_wp_deprecated_default()('wp.components.DimensionControl', { 55649 since: '6.7', 55650 version: '7.0' 55651 }); 55652 maybeWarnDeprecated36pxSize({ 55653 componentName: 'DimensionControl', 55654 __next40pxDefaultSize, 55655 size: undefined 55656 }); 55657 const onChangeSpacingSize = val => { 55658 const theSize = findSizeBySlug(sizes, val); 55659 if (!theSize || value === theSize.slug) { 55660 onChange?.(undefined); 55661 } else if (typeof onChange === 'function') { 55662 onChange(theSize.slug); 55663 } 55664 }; 55665 const formatSizesAsOptions = theSizes => { 55666 const options = theSizes.map(({ 55667 name, 55668 slug 55669 }) => ({ 55670 label: name, 55671 value: slug 55672 })); 55673 return [{ 55674 label: (0,external_wp_i18n_namespaceObject.__)('Default'), 55675 value: '' 55676 }, ...options]; 55677 }; 55678 const selectLabel = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 55679 children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 55680 icon: icon 55681 }), label] 55682 }); 55683 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { 55684 value: dimension_control_CONTEXT_VALUE, 55685 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { 55686 __next40pxDefaultSize: __next40pxDefaultSize, 55687 __shouldNotWarnDeprecated36pxSize: true, 55688 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 55689 className: dist_clsx(className, 'block-editor-dimension-control'), 55690 label: selectLabel, 55691 hideLabelFromVision: false, 55692 value: value, 55693 onChange: onChangeSpacingSize, 55694 options: formatSizesAsOptions(sizes) 55695 }) 55696 }); 55697 } 55698 /* harmony default export */ const dimension_control = (DimensionControl); 55699 55700 ;// ./node_modules/@wordpress/components/build-module/disabled/styles/disabled-styles.js 55701 function disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 55702 /** 55703 * External dependencies 55704 */ 55705 55706 const disabled_styles_disabledStyles = true ? { 55707 name: "u2jump", 55708 styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}" 55709 } : 0; 55710 55711 ;// ./node_modules/@wordpress/components/build-module/disabled/index.js 55712 /** 55713 * WordPress dependencies 55714 */ 55715 55716 55717 /** 55718 * Internal dependencies 55719 */ 55720 55721 55722 55723 const Context = (0,external_wp_element_namespaceObject.createContext)(false); 55724 const { 55725 Consumer, 55726 Provider: disabled_Provider 55727 } = Context; 55728 55729 /** 55730 * `Disabled` is a component which disables descendant tabbable elements and 55731 * prevents pointer interaction. 55732 * 55733 * _Note: this component may not behave as expected in browsers that don't 55734 * support the `inert` HTML attribute. We recommend adding the official WICG 55735 * polyfill when using this component in your project._ 55736 * 55737 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert 55738 * 55739 * ```jsx 55740 * import { Button, Disabled, TextControl } from '@wordpress/components'; 55741 * import { useState } from '@wordpress/element'; 55742 * 55743 * const MyDisabled = () => { 55744 * const [ isDisabled, setIsDisabled ] = useState( true ); 55745 * 55746 * let input = ( 55747 * <TextControl 55748 * __next40pxDefaultSize 55749 * __nextHasNoMarginBottom 55750 * label="Input" 55751 * onChange={ () => {} } 55752 * /> 55753 * ); 55754 * if ( isDisabled ) { 55755 * input = <Disabled>{ input }</Disabled>; 55756 * } 55757 * 55758 * const toggleDisabled = () => { 55759 * setIsDisabled( ( state ) => ! state ); 55760 * }; 55761 * 55762 * return ( 55763 * <div> 55764 * { input } 55765 * <Button variant="primary" onClick={ toggleDisabled }> 55766 * Toggle Disabled 55767 * </Button> 55768 * </div> 55769 * ); 55770 * }; 55771 * ``` 55772 */ 55773 function Disabled({ 55774 className, 55775 children, 55776 isDisabled = true, 55777 ...props 55778 }) { 55779 const cx = useCx(); 55780 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(disabled_Provider, { 55781 value: isDisabled, 55782 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 55783 // @ts-ignore Reason: inert is a recent HTML attribute 55784 inert: isDisabled ? 'true' : undefined, 55785 className: isDisabled ? cx(disabled_styles_disabledStyles, className, 'components-disabled') : undefined, 55786 ...props, 55787 children: children 55788 }) 55789 }); 55790 } 55791 Disabled.Context = Context; 55792 Disabled.Consumer = Consumer; 55793 /* harmony default export */ const disabled = (Disabled); 55794 55795 ;// ./node_modules/@wordpress/components/build-module/disclosure/index.js 55796 /** 55797 * External dependencies 55798 */ 55799 55800 55801 /** 55802 * WordPress dependencies 55803 */ 55804 55805 55806 /** 55807 * Internal dependencies 55808 */ 55809 55810 /** 55811 * Accessible Disclosure component that controls visibility of a section of 55812 * content. It follows the WAI-ARIA Disclosure Pattern. 55813 */ 55814 const UnforwardedDisclosureContent = ({ 55815 visible, 55816 children, 55817 ...props 55818 }, ref) => { 55819 const disclosure = useDisclosureStore({ 55820 open: visible 55821 }); 55822 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DisclosureContent, { 55823 store: disclosure, 55824 ref: ref, 55825 ...props, 55826 children: children 55827 }); 55828 }; 55829 const disclosure_DisclosureContent = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDisclosureContent); 55830 /* harmony default export */ const disclosure = ((/* unused pure expression or super */ null && (disclosure_DisclosureContent))); 55831 55832 ;// ./node_modules/@wordpress/components/build-module/draggable/index.js 55833 /** 55834 * External dependencies 55835 */ 55836 55837 /** 55838 * WordPress dependencies 55839 */ 55840 55841 55842 55843 /** 55844 * Internal dependencies 55845 */ 55846 55847 const dragImageClass = 'components-draggable__invisible-drag-image'; 55848 const cloneWrapperClass = 'components-draggable__clone'; 55849 const clonePadding = 0; 55850 const bodyClass = 'is-dragging-components-draggable'; 55851 55852 /** 55853 * `Draggable` is a Component that provides a way to set up a cross-browser 55854 * (including IE) customizable drag image and the transfer data for the drag 55855 * event. It decouples the drag handle and the element to drag: use it by 55856 * wrapping the component that will become the drag handle and providing the DOM 55857 * ID of the element to drag. 55858 * 55859 * Note that the drag handle needs to declare the `draggable="true"` property 55860 * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event 55861 * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable` 55862 * takes care of the logic to setup the drag image and the transfer data, but is 55863 * not concerned with creating an actual DOM element that is draggable. 55864 * 55865 * ```jsx 55866 * import { Draggable, Panel, PanelBody } from '@wordpress/components'; 55867 * import { Icon, more } from '@wordpress/icons'; 55868 * 55869 * const MyDraggable = () => ( 55870 * <div id="draggable-panel"> 55871 * <Panel header="Draggable panel"> 55872 * <PanelBody> 55873 * <Draggable elementId="draggable-panel" transferData={ {} }> 55874 * { ( { onDraggableStart, onDraggableEnd } ) => ( 55875 * <div 55876 * className="example-drag-handle" 55877 * draggable 55878 * onDragStart={ onDraggableStart } 55879 * onDragEnd={ onDraggableEnd } 55880 * > 55881 * <Icon icon={ more } /> 55882 * </div> 55883 * ) } 55884 * </Draggable> 55885 * </PanelBody> 55886 * </Panel> 55887 * </div> 55888 * ); 55889 * ``` 55890 */ 55891 function Draggable({ 55892 children, 55893 onDragStart, 55894 onDragOver, 55895 onDragEnd, 55896 appendToOwnerDocument = false, 55897 cloneClassname, 55898 elementId, 55899 transferData, 55900 __experimentalTransferDataType: transferDataType = 'text', 55901 __experimentalDragComponent: dragComponent 55902 }) { 55903 const dragComponentRef = (0,external_wp_element_namespaceObject.useRef)(null); 55904 const cleanupRef = (0,external_wp_element_namespaceObject.useRef)(() => {}); 55905 55906 /** 55907 * Removes the element clone, resets cursor, and removes drag listener. 55908 * 55909 * @param event The non-custom DragEvent. 55910 */ 55911 function end(event) { 55912 event.preventDefault(); 55913 cleanupRef.current(); 55914 if (onDragEnd) { 55915 onDragEnd(event); 55916 } 55917 } 55918 55919 /** 55920 * This method does a couple of things: 55921 * 55922 * - Clones the current element and spawns clone over original element. 55923 * - Adds a fake temporary drag image to avoid browser defaults. 55924 * - Sets transfer data. 55925 * - Adds dragover listener. 55926 * 55927 * @param event The non-custom DragEvent. 55928 */ 55929 function start(event) { 55930 const { 55931 ownerDocument 55932 } = event.target; 55933 event.dataTransfer.setData(transferDataType, JSON.stringify(transferData)); 55934 const cloneWrapper = ownerDocument.createElement('div'); 55935 // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise. 55936 cloneWrapper.style.top = '0'; 55937 cloneWrapper.style.left = '0'; 55938 const dragImage = ownerDocument.createElement('div'); 55939 55940 // Set a fake drag image to avoid browser defaults. Remove from DOM 55941 // right after. event.dataTransfer.setDragImage is not supported yet in 55942 // IE, we need to check for its existence first. 55943 if ('function' === typeof event.dataTransfer.setDragImage) { 55944 dragImage.classList.add(dragImageClass); 55945 ownerDocument.body.appendChild(dragImage); 55946 event.dataTransfer.setDragImage(dragImage, 0, 0); 55947 } 55948 cloneWrapper.classList.add(cloneWrapperClass); 55949 if (cloneClassname) { 55950 cloneWrapper.classList.add(cloneClassname); 55951 } 55952 let x = 0; 55953 let y = 0; 55954 // If a dragComponent is defined, the following logic will clone the 55955 // HTML node and inject it into the cloneWrapper. 55956 if (dragComponentRef.current) { 55957 // Position dragComponent at the same position as the cursor. 55958 x = event.clientX; 55959 y = event.clientY; 55960 cloneWrapper.style.transform = `translate( $x}px, $y}px )`; 55961 const clonedDragComponent = ownerDocument.createElement('div'); 55962 clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML; 55963 cloneWrapper.appendChild(clonedDragComponent); 55964 55965 // Inject the cloneWrapper into the DOM. 55966 ownerDocument.body.appendChild(cloneWrapper); 55967 } else { 55968 const element = ownerDocument.getElementById(elementId); 55969 55970 // Prepare element clone and append to element wrapper. 55971 const elementRect = element.getBoundingClientRect(); 55972 const elementWrapper = element.parentNode; 55973 const elementTopOffset = elementRect.top; 55974 const elementLeftOffset = elementRect.left; 55975 cloneWrapper.style.width = `$elementRect.width + clonePadding * 2}px`; 55976 const clone = element.cloneNode(true); 55977 clone.id = `clone-$elementId}`; 55978 55979 // Position clone right over the original element (20px padding). 55980 x = elementLeftOffset - clonePadding; 55981 y = elementTopOffset - clonePadding; 55982 cloneWrapper.style.transform = `translate( $x}px, $y}px )`; 55983 55984 // Hack: Remove iFrames as it's causing the embeds drag clone to freeze. 55985 Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child)); 55986 cloneWrapper.appendChild(clone); 55987 55988 // Inject the cloneWrapper into the DOM. 55989 if (appendToOwnerDocument) { 55990 ownerDocument.body.appendChild(cloneWrapper); 55991 } else { 55992 elementWrapper?.appendChild(cloneWrapper); 55993 } 55994 } 55995 55996 // Mark the current cursor coordinates. 55997 let cursorLeft = event.clientX; 55998 let cursorTop = event.clientY; 55999 function over(e) { 56000 // Skip doing any work if mouse has not moved. 56001 if (cursorLeft === e.clientX && cursorTop === e.clientY) { 56002 return; 56003 } 56004 const nextX = x + e.clientX - cursorLeft; 56005 const nextY = y + e.clientY - cursorTop; 56006 cloneWrapper.style.transform = `translate( $nextX}px, $nextY}px )`; 56007 cursorLeft = e.clientX; 56008 cursorTop = e.clientY; 56009 x = nextX; 56010 y = nextY; 56011 if (onDragOver) { 56012 onDragOver(e); 56013 } 56014 } 56015 56016 // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead, 56017 // note that browsers may throttle raf below 60fps in certain conditions. 56018 // @ts-ignore 56019 const throttledDragOver = (0,external_wp_compose_namespaceObject.throttle)(over, 16); 56020 ownerDocument.addEventListener('dragover', throttledDragOver); 56021 56022 // Update cursor to 'grabbing', document wide. 56023 ownerDocument.body.classList.add(bodyClass); 56024 if (onDragStart) { 56025 onDragStart(event); 56026 } 56027 cleanupRef.current = () => { 56028 // Remove drag clone. 56029 if (cloneWrapper && cloneWrapper.parentNode) { 56030 cloneWrapper.parentNode.removeChild(cloneWrapper); 56031 } 56032 if (dragImage && dragImage.parentNode) { 56033 dragImage.parentNode.removeChild(dragImage); 56034 } 56035 56036 // Reset cursor. 56037 ownerDocument.body.classList.remove(bodyClass); 56038 ownerDocument.removeEventListener('dragover', throttledDragOver); 56039 }; 56040 } 56041 (0,external_wp_element_namespaceObject.useEffect)(() => () => { 56042 cleanupRef.current(); 56043 }, []); 56044 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 56045 children: [children({ 56046 onDraggableStart: start, 56047 onDraggableEnd: end 56048 }), dragComponent && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 56049 className: "components-draggable-drag-component-root", 56050 style: { 56051 display: 'none' 56052 }, 56053 ref: dragComponentRef, 56054 children: dragComponent 56055 })] 56056 }); 56057 } 56058 /* harmony default export */ const draggable = (Draggable); 56059 56060 ;// ./node_modules/@wordpress/icons/build-module/library/upload.js 56061 /** 56062 * WordPress dependencies 56063 */ 56064 56065 56066 const upload = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 56067 xmlns: "http://www.w3.org/2000/svg", 56068 viewBox: "0 0 24 24", 56069 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 56070 d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z" 56071 }) 56072 }); 56073 /* harmony default export */ const library_upload = (upload); 56074 56075 ;// ./node_modules/@wordpress/components/build-module/drop-zone/index.js 56076 /** 56077 * External dependencies 56078 */ 56079 56080 56081 /** 56082 * WordPress dependencies 56083 */ 56084 56085 56086 56087 56088 56089 56090 /** 56091 * Internal dependencies 56092 */ 56093 56094 /** 56095 * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event. 56096 * 56097 * ```jsx 56098 * import { DropZone } from '@wordpress/components'; 56099 * import { useState } from '@wordpress/element'; 56100 * 56101 * const MyDropZone = () => { 56102 * const [ hasDropped, setHasDropped ] = useState( false ); 56103 * 56104 * return ( 56105 * <div> 56106 * { hasDropped ? 'Dropped!' : 'Drop something here' } 56107 * <DropZone 56108 * onFilesDrop={ () => setHasDropped( true ) } 56109 * onHTMLDrop={ () => setHasDropped( true ) } 56110 * onDrop={ () => setHasDropped( true ) } 56111 * /> 56112 * </div> 56113 * ); 56114 * } 56115 * ``` 56116 */ 56117 function DropZoneComponent({ 56118 className, 56119 label, 56120 onFilesDrop, 56121 onHTMLDrop, 56122 onDrop, 56123 isEligible = () => true, 56124 ...restProps 56125 }) { 56126 const [isDraggingOverDocument, setIsDraggingOverDocument] = (0,external_wp_element_namespaceObject.useState)(); 56127 const [isDraggingOverElement, setIsDraggingOverElement] = (0,external_wp_element_namespaceObject.useState)(); 56128 const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(); 56129 const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({ 56130 onDrop(event) { 56131 if (!event.dataTransfer) { 56132 return; 56133 } 56134 const files = (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer); 56135 const html = event.dataTransfer.getData('text/html'); 56136 56137 /** 56138 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. 56139 * The order of the checks is important to recognize the HTML drop. 56140 */ 56141 if (html && onHTMLDrop) { 56142 onHTMLDrop(html); 56143 } else if (files.length && onFilesDrop) { 56144 onFilesDrop(files); 56145 } else if (onDrop) { 56146 onDrop(event); 56147 } 56148 }, 56149 onDragStart(event) { 56150 setIsDraggingOverDocument(true); 56151 if (!event.dataTransfer) { 56152 return; 56153 } 56154 56155 /** 56156 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. 56157 * The order of the checks is important to recognize the HTML drop. 56158 */ 56159 if (event.dataTransfer.types.includes('text/html')) { 56160 setIsActive(!!onHTMLDrop); 56161 } else if ( 56162 // Check for the types because sometimes the files themselves 56163 // are only available on drop. 56164 event.dataTransfer.types.includes('Files') || (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer).length > 0) { 56165 setIsActive(!!onFilesDrop); 56166 } else { 56167 setIsActive(!!onDrop && isEligible(event.dataTransfer)); 56168 } 56169 }, 56170 onDragEnd() { 56171 setIsDraggingOverElement(false); 56172 setIsDraggingOverDocument(false); 56173 setIsActive(undefined); 56174 }, 56175 onDragEnter() { 56176 setIsDraggingOverElement(true); 56177 }, 56178 onDragLeave() { 56179 setIsDraggingOverElement(false); 56180 } 56181 }); 56182 const classes = dist_clsx('components-drop-zone', className, { 56183 'is-active': isActive, 56184 'is-dragging-over-document': isDraggingOverDocument, 56185 'is-dragging-over-element': isDraggingOverElement 56186 }); 56187 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 56188 ...restProps, 56189 ref: ref, 56190 className: classes, 56191 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 56192 className: "components-drop-zone__content", 56193 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 56194 className: "components-drop-zone__content-inner", 56195 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 56196 icon: library_upload, 56197 className: "components-drop-zone__content-icon" 56198 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 56199 className: "components-drop-zone__content-text", 56200 children: label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload') 56201 })] 56202 }) 56203 }) 56204 }); 56205 } 56206 /* harmony default export */ const drop_zone = (DropZoneComponent); 56207 56208 ;// ./node_modules/@wordpress/components/build-module/drop-zone/provider.js 56209 /** 56210 * WordPress dependencies 56211 */ 56212 56213 function DropZoneProvider({ 56214 children 56215 }) { 56216 external_wp_deprecated_default()('wp.components.DropZoneProvider', { 56217 since: '5.8', 56218 hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.' 56219 }); 56220 return children; 56221 } 56222 56223 ;// ./node_modules/@wordpress/icons/build-module/library/swatch.js 56224 /** 56225 * WordPress dependencies 56226 */ 56227 56228 56229 const swatch = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 56230 xmlns: "http://www.w3.org/2000/svg", 56231 viewBox: "0 0 24 24", 56232 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 56233 d: "M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z" 56234 }) 56235 }); 56236 /* harmony default export */ const library_swatch = (swatch); 56237 56238 ;// ./node_modules/@wordpress/components/build-module/duotone-picker/utils.js 56239 /** 56240 * External dependencies 56241 */ 56242 56243 56244 56245 /** 56246 * Internal dependencies 56247 */ 56248 56249 k([names]); 56250 56251 /** 56252 * Object representation for a color. 56253 * 56254 * @typedef {Object} RGBColor 56255 * @property {number} r Red component of the color in the range [0,1]. 56256 * @property {number} g Green component of the color in the range [0,1]. 56257 * @property {number} b Blue component of the color in the range [0,1]. 56258 */ 56259 56260 /** 56261 * Calculate the brightest and darkest values from a color palette. 56262 * 56263 * @param palette Color palette for the theme. 56264 * 56265 * @return Tuple of the darkest color and brightest color. 56266 */ 56267 function getDefaultColors(palette) { 56268 // A default dark and light color are required. 56269 if (!palette || palette.length < 2) { 56270 return ['#000', '#fff']; 56271 } 56272 return palette.map(({ 56273 color 56274 }) => ({ 56275 color, 56276 brightness: w(color).brightness() 56277 })).reduce(([min, max], current) => { 56278 return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max]; 56279 }, [{ 56280 brightness: 1, 56281 color: '' 56282 }, { 56283 brightness: 0, 56284 color: '' 56285 }]).map(({ 56286 color 56287 }) => color); 56288 } 56289 56290 /** 56291 * Generate a duotone gradient from a list of colors. 56292 * 56293 * @param colors CSS color strings. 56294 * @param angle CSS gradient angle. 56295 * 56296 * @return CSS gradient string for the duotone swatch. 56297 */ 56298 function getGradientFromCSSColors(colors = [], angle = '90deg') { 56299 const l = 100 / colors.length; 56300 const stops = colors.map((c, i) => `$c} $i * l}%, $c} ${(i + 1) * l}%`).join(', '); 56301 return `linear-gradient( $angle}, $stops} )`; 56302 } 56303 56304 /** 56305 * Convert a color array to an array of color stops. 56306 * 56307 * @param colors CSS colors array 56308 * 56309 * @return Color stop information. 56310 */ 56311 function getColorStopsFromColors(colors) { 56312 return colors.map((color, i) => ({ 56313 position: i * 100 / (colors.length - 1), 56314 color 56315 })); 56316 } 56317 56318 /** 56319 * Convert a color stop array to an array colors. 56320 * 56321 * @param colorStops Color stop information. 56322 * 56323 * @return CSS colors array. 56324 */ 56325 function getColorsFromColorStops(colorStops = []) { 56326 return colorStops.map(({ 56327 color 56328 }) => color); 56329 } 56330 56331 ;// ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-swatch.js 56332 /** 56333 * WordPress dependencies 56334 */ 56335 56336 56337 /** 56338 * Internal dependencies 56339 */ 56340 56341 56342 56343 56344 function DuotoneSwatch({ 56345 values 56346 }) { 56347 return values ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, { 56348 colorValue: getGradientFromCSSColors(values, '135deg') 56349 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 56350 icon: library_swatch 56351 }); 56352 } 56353 /* harmony default export */ const duotone_swatch = (DuotoneSwatch); 56354 56355 ;// ./node_modules/@wordpress/components/build-module/duotone-picker/color-list-picker/index.js 56356 /** 56357 * WordPress dependencies 56358 */ 56359 56360 56361 56362 56363 /** 56364 * Internal dependencies 56365 */ 56366 56367 56368 56369 56370 56371 56372 function ColorOption({ 56373 label, 56374 value, 56375 colors, 56376 disableCustomColors, 56377 enableAlpha, 56378 onChange 56379 }) { 56380 const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(false); 56381 const idRoot = (0,external_wp_compose_namespaceObject.useInstanceId)(ColorOption, 'color-list-picker-option'); 56382 const labelId = `$idRoot}__label`; 56383 const contentId = `$idRoot}__content`; 56384 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 56385 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 56386 __next40pxDefaultSize: true, 56387 className: "components-color-list-picker__swatch-button", 56388 id: labelId, 56389 onClick: () => setIsOpen(prev => !prev), 56390 "aria-expanded": isOpen, 56391 "aria-controls": contentId, 56392 icon: value ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, { 56393 colorValue: value, 56394 className: "components-color-list-picker__swatch-color" 56395 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 56396 icon: library_swatch 56397 }), 56398 text: label 56399 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 56400 role: "group", 56401 id: contentId, 56402 "aria-labelledby": labelId, 56403 "aria-hidden": !isOpen, 56404 children: isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, { 56405 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Color options'), 56406 className: "components-color-list-picker__color-picker", 56407 colors: colors, 56408 value: value, 56409 clearable: false, 56410 onChange: onChange, 56411 disableCustomColors: disableCustomColors, 56412 enableAlpha: enableAlpha 56413 }) 56414 })] 56415 }); 56416 } 56417 function ColorListPicker({ 56418 colors, 56419 labels, 56420 value = [], 56421 disableCustomColors, 56422 enableAlpha, 56423 onChange 56424 }) { 56425 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 56426 className: "components-color-list-picker", 56427 children: labels.map((label, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorOption, { 56428 label: label, 56429 value: value[index], 56430 colors: colors, 56431 disableCustomColors: disableCustomColors, 56432 enableAlpha: enableAlpha, 56433 onChange: newColor => { 56434 const newColors = value.slice(); 56435 newColors[index] = newColor; 56436 onChange(newColors); 56437 } 56438 }, index)) 56439 }); 56440 } 56441 /* harmony default export */ const color_list_picker = (ColorListPicker); 56442 56443 ;// ./node_modules/@wordpress/components/build-module/duotone-picker/custom-duotone-bar.js 56444 /** 56445 * Internal dependencies 56446 */ 56447 56448 56449 56450 const PLACEHOLDER_VALUES = ['#333', '#CCC']; 56451 function CustomDuotoneBar({ 56452 value, 56453 onChange 56454 }) { 56455 const hasGradient = !!value; 56456 const values = hasGradient ? value : PLACEHOLDER_VALUES; 56457 const background = getGradientFromCSSColors(values); 56458 const controlPoints = getColorStopsFromColors(values); 56459 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomGradientBar, { 56460 disableInserter: true, 56461 background: background, 56462 hasGradient: hasGradient, 56463 value: controlPoints, 56464 onChange: newColorStops => { 56465 const newValue = getColorsFromColorStops(newColorStops); 56466 onChange(newValue); 56467 } 56468 }); 56469 } 56470 56471 ;// ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-picker.js 56472 /** 56473 * External dependencies 56474 */ 56475 56476 56477 /** 56478 * WordPress dependencies 56479 */ 56480 56481 56482 56483 /** 56484 * Internal dependencies 56485 */ 56486 56487 56488 56489 56490 56491 56492 56493 /** 56494 * ```jsx 56495 * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components'; 56496 * import { useState } from '@wordpress/element'; 56497 * 56498 * const DUOTONE_PALETTE = [ 56499 * { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' }, 56500 * { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' }, 56501 * ]; 56502 * 56503 * const COLOR_PALETTE = [ 56504 * { color: '#ff4747', name: 'Red', slug: 'red' }, 56505 * { color: '#fcff41', name: 'Yellow', slug: 'yellow' }, 56506 * { color: '#000097', name: 'Blue', slug: 'blue' }, 56507 * { color: '#8c00b7', name: 'Purple', slug: 'purple' }, 56508 * ]; 56509 * 56510 * const Example = () => { 56511 * const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] ); 56512 * return ( 56513 * <> 56514 * <DuotonePicker 56515 * duotonePalette={ DUOTONE_PALETTE } 56516 * colorPalette={ COLOR_PALETTE } 56517 * value={ duotone } 56518 * onChange={ setDuotone } 56519 * /> 56520 * <DuotoneSwatch values={ duotone } /> 56521 * </> 56522 * ); 56523 * }; 56524 * ``` 56525 */ 56526 function DuotonePicker({ 56527 asButtons, 56528 loop, 56529 clearable = true, 56530 unsetable = true, 56531 colorPalette, 56532 duotonePalette, 56533 disableCustomColors, 56534 disableCustomDuotone, 56535 value, 56536 onChange, 56537 'aria-label': ariaLabel, 56538 'aria-labelledby': ariaLabelledby, 56539 ...otherProps 56540 }) { 56541 const [defaultDark, defaultLight] = (0,external_wp_element_namespaceObject.useMemo)(() => getDefaultColors(colorPalette), [colorPalette]); 56542 const isUnset = value === 'unset'; 56543 const unsetOptionLabel = (0,external_wp_i18n_namespaceObject.__)('Unset'); 56544 const unsetOption = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { 56545 value: "unset", 56546 isSelected: isUnset, 56547 tooltipText: unsetOptionLabel, 56548 "aria-label": unsetOptionLabel, 56549 className: "components-duotone-picker__color-indicator", 56550 onClick: () => { 56551 onChange(isUnset ? undefined : 'unset'); 56552 } 56553 }, "unset"); 56554 const duotoneOptions = duotonePalette.map(({ 56555 colors, 56556 slug, 56557 name 56558 }) => { 56559 const style = { 56560 background: getGradientFromCSSColors(colors, '135deg'), 56561 color: 'transparent' 56562 }; 56563 const tooltipText = name !== null && name !== void 0 ? name : (0,external_wp_i18n_namespaceObject.sprintf)( 56564 // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". 56565 (0,external_wp_i18n_namespaceObject.__)('Duotone code: %s'), slug); 56566 const label = name ? (0,external_wp_i18n_namespaceObject.sprintf)( 56567 // translators: %s: The name of the option e.g: "Dark grayscale". 56568 (0,external_wp_i18n_namespaceObject.__)('Duotone: %s'), name) : tooltipText; 56569 const isSelected = es6_default()(colors, value); 56570 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { 56571 value: colors, 56572 isSelected: isSelected, 56573 "aria-label": label, 56574 tooltipText: tooltipText, 56575 style: style, 56576 onClick: () => { 56577 onChange(isSelected ? undefined : colors); 56578 } 56579 }, slug); 56580 }); 56581 const { 56582 metaProps, 56583 labelProps 56584 } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby); 56585 const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions; 56586 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, { 56587 ...otherProps, 56588 ...metaProps, 56589 ...labelProps, 56590 options: options, 56591 actions: !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, { 56592 onClick: () => onChange(undefined), 56593 accessibleWhenDisabled: true, 56594 disabled: !value, 56595 children: (0,external_wp_i18n_namespaceObject.__)('Clear') 56596 }), 56597 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 56598 paddingTop: options.length === 0 ? 0 : 4, 56599 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { 56600 spacing: 3, 56601 children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomDuotoneBar, { 56602 value: isUnset ? undefined : value, 56603 onChange: onChange 56604 }), !disableCustomDuotone && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_list_picker, { 56605 labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')], 56606 colors: colorPalette, 56607 value: isUnset ? undefined : value, 56608 disableCustomColors: disableCustomColors, 56609 enableAlpha: true, 56610 onChange: newColors => { 56611 if (!newColors[0]) { 56612 newColors[0] = defaultDark; 56613 } 56614 if (!newColors[1]) { 56615 newColors[1] = defaultLight; 56616 } 56617 const newValue = newColors.length >= 2 ? newColors : undefined; 56618 // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors, 56619 // but it's currently typed as a string[]. 56620 // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035 56621 onChange(newValue); 56622 } 56623 })] 56624 }) 56625 }) 56626 }); 56627 } 56628 /* harmony default export */ const duotone_picker = (DuotonePicker); 56629 56630 ;// ./node_modules/@wordpress/components/build-module/external-link/index.js 56631 /** 56632 * External dependencies 56633 */ 56634 56635 /** 56636 * WordPress dependencies 56637 */ 56638 56639 56640 56641 /** 56642 * Internal dependencies 56643 */ 56644 56645 function UnforwardedExternalLink(props, ref) { 56646 const { 56647 href, 56648 children, 56649 className, 56650 rel = '', 56651 ...additionalProps 56652 } = props; 56653 const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' '); 56654 const classes = dist_clsx('components-external-link', className); 56655 /* Anchor links are perceived as external links. 56656 This constant helps check for on page anchor links, 56657 to prevent them from being opened in the editor. */ 56658 const isInternalAnchor = !!href?.startsWith('#'); 56659 const onClickHandler = event => { 56660 if (isInternalAnchor) { 56661 event.preventDefault(); 56662 } 56663 if (props.onClick) { 56664 props.onClick(event); 56665 } 56666 }; 56667 return /*#__PURE__*/ /* eslint-disable react/jsx-no-target-blank */(0,external_ReactJSXRuntime_namespaceObject.jsxs)("a", { 56668 ...additionalProps, 56669 className: classes, 56670 href: href, 56671 onClick: onClickHandler, 56672 target: "_blank", 56673 rel: optimizedRel, 56674 ref: ref, 56675 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 56676 className: "components-external-link__contents", 56677 children: children 56678 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 56679 className: "components-external-link__icon", 56680 "aria-label": /* translators: accessibility text */ 56681 (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)'), 56682 children: "\u2197" 56683 })] 56684 }) 56685 /* eslint-enable react/jsx-no-target-blank */; 56686 } 56687 56688 /** 56689 * Link to an external resource. 56690 * 56691 * ```jsx 56692 * import { ExternalLink } from '@wordpress/components'; 56693 * 56694 * const MyExternalLink = () => ( 56695 * <ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink> 56696 * ); 56697 * ``` 56698 */ 56699 const ExternalLink = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedExternalLink); 56700 /* harmony default export */ const external_link = (ExternalLink); 56701 56702 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/utils.js 56703 const INITIAL_BOUNDS = { 56704 width: 200, 56705 height: 170 56706 }; 56707 const VIDEO_EXTENSIONS = ['avi', 'mpg', 'mpeg', 'mov', 'mp4', 'm4v', 'ogg', 'ogv', 'webm', 'wmv']; 56708 56709 /** 56710 * Gets the extension of a file name. 56711 * 56712 * @param filename The file name. 56713 * @return The extension of the file name. 56714 */ 56715 function getExtension(filename = '') { 56716 const parts = filename.split('.'); 56717 return parts[parts.length - 1]; 56718 } 56719 56720 /** 56721 * Checks if a file is a video. 56722 * 56723 * @param filename The file name. 56724 * @return Whether the file is a video. 56725 */ 56726 function isVideoType(filename = '') { 56727 if (!filename) { 56728 return false; 56729 } 56730 return filename.startsWith('data:video/') || VIDEO_EXTENSIONS.includes(getExtension(filename)); 56731 } 56732 56733 /** 56734 * Transforms a fraction value to a percentage value. 56735 * 56736 * @param fraction The fraction value. 56737 * @return A percentage value. 56738 */ 56739 function fractionToPercentage(fraction) { 56740 return Math.round(fraction * 100); 56741 } 56742 56743 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-picker-style.js 56744 56745 function focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 56746 /** 56747 * External dependencies 56748 */ 56749 56750 /** 56751 * Internal dependencies 56752 */ 56753 56754 56755 56756 56757 const MediaWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 56758 target: "eeew7dm8" 56759 } : 0)( true ? { 56760 name: "jqnsxy", 56761 styles: "background-color:transparent;display:flex;text-align:center;width:100%" 56762 } : 0); 56763 const MediaContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 56764 target: "eeew7dm7" 56765 } : 0)("align-items:center;border-radius:", config_values.radiusSmall, ";cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;&:after{border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );content:'';left:0;pointer-events:none;position:absolute;right:0;top:0;}img,video{border-radius:inherit;box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}" + ( true ? "" : 0)); 56766 const MediaPlaceholder = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 56767 target: "eeew7dm6" 56768 } : 0)("background:", COLORS.gray[100], ";border-radius:inherit;box-sizing:border-box;height:", INITIAL_BOUNDS.height, "px;max-width:280px;min-width:", INITIAL_BOUNDS.width, "px;width:100%;" + ( true ? "" : 0)); 56769 const focal_point_picker_style_StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { 56770 target: "eeew7dm5" 56771 } : 0)( true ? { 56772 name: "1d3w5wq", 56773 styles: "width:100%" 56774 } : 0); 56775 var focal_point_picker_style_ref2 = true ? { 56776 name: "1mn7kwb", 56777 styles: "padding-bottom:1em" 56778 } : 0; 56779 const deprecatedBottomMargin = ({ 56780 __nextHasNoMarginBottom 56781 }) => { 56782 return !__nextHasNoMarginBottom ? focal_point_picker_style_ref2 : undefined; 56783 }; 56784 var focal_point_picker_style_ref = true ? { 56785 name: "1mn7kwb", 56786 styles: "padding-bottom:1em" 56787 } : 0; 56788 const extraHelpTextMargin = ({ 56789 hasHelpText = false 56790 }) => { 56791 return hasHelpText ? focal_point_picker_style_ref : undefined; 56792 }; 56793 const ControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 56794 target: "eeew7dm4" 56795 } : 0)("max-width:320px;padding-top:1em;", extraHelpTextMargin, " ", deprecatedBottomMargin, ";" + ( true ? "" : 0)); 56796 const GridView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 56797 target: "eeew7dm3" 56798 } : 0)("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );z-index:1;@media not ( prefers-reduced-motion ){transition:opacity 100ms linear;}opacity:", ({ 56799 showOverlay 56800 }) => showOverlay ? 1 : 0, ";" + ( true ? "" : 0)); 56801 const GridLine = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 56802 target: "eeew7dm2" 56803 } : 0)( true ? { 56804 name: "1yzbo24", 56805 styles: "background:rgba( 255, 255, 255, 0.4 );backdrop-filter:blur( 16px ) saturate( 180% );position:absolute;transform:translateZ( 0 )" 56806 } : 0); 56807 const GridLineX = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? { 56808 target: "eeew7dm1" 56809 } : 0)( true ? { 56810 name: "1sw8ur", 56811 styles: "height:1px;left:1px;right:1px" 56812 } : 0); 56813 const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? { 56814 target: "eeew7dm0" 56815 } : 0)( true ? { 56816 name: "188vg4t", 56817 styles: "width:1px;top:1px;bottom:1px" 56818 } : 0); 56819 56820 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/controls.js 56821 /** 56822 * WordPress dependencies 56823 */ 56824 56825 56826 /** 56827 * Internal dependencies 56828 */ 56829 56830 56831 56832 const TEXTCONTROL_MIN = 0; 56833 const TEXTCONTROL_MAX = 100; 56834 const controls_noop = () => {}; 56835 function FocalPointPickerControls({ 56836 __nextHasNoMarginBottom, 56837 hasHelpText, 56838 onChange = controls_noop, 56839 point = { 56840 x: 0.5, 56841 y: 0.5 56842 } 56843 }) { 56844 const valueX = fractionToPercentage(point.x); 56845 const valueY = fractionToPercentage(point.y); 56846 const handleChange = (value, axis) => { 56847 if (value === undefined) { 56848 return; 56849 } 56850 const num = parseInt(value, 10); 56851 if (!isNaN(num)) { 56852 onChange({ 56853 ...point, 56854 [axis]: num / 100 56855 }); 56856 } 56857 }; 56858 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ControlWrapper, { 56859 className: "focal-point-picker__controls", 56860 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 56861 hasHelpText: hasHelpText, 56862 gap: 4, 56863 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointUnitControl, { 56864 label: (0,external_wp_i18n_namespaceObject.__)('Left'), 56865 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'), 56866 value: [valueX, '%'].join(''), 56867 onChange: next => handleChange(next, 'x'), 56868 dragDirection: "e" 56869 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointUnitControl, { 56870 label: (0,external_wp_i18n_namespaceObject.__)('Top'), 56871 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'), 56872 value: [valueY, '%'].join(''), 56873 onChange: next => handleChange(next, 'y'), 56874 dragDirection: "s" 56875 })] 56876 }); 56877 } 56878 function FocalPointUnitControl(props) { 56879 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(focal_point_picker_style_StyledUnitControl, { 56880 __next40pxDefaultSize: true, 56881 className: "focal-point-picker__controls-position-unit-control", 56882 labelPosition: "top", 56883 max: TEXTCONTROL_MAX, 56884 min: TEXTCONTROL_MIN, 56885 units: [{ 56886 value: '%', 56887 label: '%' 56888 }], 56889 ...props 56890 }); 56891 } 56892 56893 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-style.js 56894 56895 /** 56896 * External dependencies 56897 */ 56898 56899 /** 56900 * Internal dependencies 56901 */ 56902 56903 const PointerCircle = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 56904 target: "e19snlhg0" 56905 } : 0)("background-color:transparent;cursor:grab;height:40px;margin:-20px 0 0 -20px;position:absolute;user-select:none;width:40px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.4 );border:1px solid rgba( 255, 255, 255, 0.4 );border-radius:", config_values.radiusRound, ";backdrop-filter:blur( 16px ) saturate( 180% );box-shadow:rgb( 0 0 0 / 10% ) 0px 0px 8px;@media not ( prefers-reduced-motion ){transition:transform 100ms linear;}", ({ 56906 isDragging 56907 }) => isDragging && ` 56908 box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px; 56909 transform: scale( 1.1 ); 56910 cursor: grabbing; 56911 `, ";" + ( true ? "" : 0)); 56912 56913 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/focal-point.js 56914 /** 56915 * Internal dependencies 56916 */ 56917 56918 56919 /** 56920 * External dependencies 56921 */ 56922 56923 function FocalPoint({ 56924 left = '50%', 56925 top = '50%', 56926 ...props 56927 }) { 56928 const style = { 56929 left, 56930 top 56931 }; 56932 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PointerCircle, { 56933 ...props, 56934 className: "components-focal-point-picker__icon_container", 56935 style: style 56936 }); 56937 } 56938 56939 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/grid.js 56940 /** 56941 * Internal dependencies 56942 */ 56943 56944 56945 function FocalPointPickerGrid({ 56946 bounds, 56947 ...props 56948 }) { 56949 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(GridView, { 56950 ...props, 56951 className: "components-focal-point-picker__grid", 56952 style: { 56953 width: bounds.width, 56954 height: bounds.height 56955 }, 56956 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineX, { 56957 style: { 56958 top: '33%' 56959 } 56960 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineX, { 56961 style: { 56962 top: '66%' 56963 } 56964 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineY, { 56965 style: { 56966 left: '33%' 56967 } 56968 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineY, { 56969 style: { 56970 left: '66%' 56971 } 56972 })] 56973 }); 56974 } 56975 56976 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/media.js 56977 /** 56978 * External dependencies 56979 */ 56980 56981 /** 56982 * Internal dependencies 56983 */ 56984 56985 56986 56987 function media_Media({ 56988 alt, 56989 autoPlay, 56990 src, 56991 onLoad, 56992 mediaRef, 56993 // Exposing muted prop for test rendering purposes 56994 // https://github.com/testing-library/react-testing-library/issues/470 56995 muted = true, 56996 ...props 56997 }) { 56998 if (!src) { 56999 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaPlaceholder, { 57000 className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder", 57001 ref: mediaRef, 57002 ...props 57003 }); 57004 } 57005 const isVideo = isVideoType(src); 57006 return isVideo ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("video", { 57007 ...props, 57008 autoPlay: autoPlay, 57009 className: "components-focal-point-picker__media components-focal-point-picker__media--video", 57010 loop: true, 57011 muted: muted, 57012 onLoadedData: onLoad, 57013 ref: mediaRef, 57014 src: src 57015 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("img", { 57016 ...props, 57017 alt: alt, 57018 className: "components-focal-point-picker__media components-focal-point-picker__media--image", 57019 onLoad: onLoad, 57020 ref: mediaRef, 57021 src: src 57022 }); 57023 } 57024 57025 ;// ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js 57026 /** 57027 * External dependencies 57028 */ 57029 57030 57031 /** 57032 * WordPress dependencies 57033 */ 57034 57035 57036 57037 57038 /** 57039 * Internal dependencies 57040 */ 57041 57042 57043 57044 57045 57046 57047 57048 57049 57050 const GRID_OVERLAY_TIMEOUT = 600; 57051 57052 /** 57053 * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image. 57054 * 57055 * This component addresses a specific problem: with large background images it is common to see undesirable crops, 57056 * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of 57057 * the point with the most important visual information and returns it as a pair of numbers between 0 and 1. 57058 * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the 57059 * focal point is never cropped out, regardless of viewport. 57060 * 57061 * - Example focal point picker value: `{ x: 0.5, y: 0.1 }` 57062 * - Corresponding CSS: `background-position: 50% 10%;` 57063 * 57064 * ```jsx 57065 * import { FocalPointPicker } from '@wordpress/components'; 57066 * import { useState } from '@wordpress/element'; 57067 * 57068 * const Example = () => { 57069 * const [ focalPoint, setFocalPoint ] = useState( { 57070 * x: 0.5, 57071 * y: 0.5, 57072 * } ); 57073 * 57074 * const url = '/path/to/image'; 57075 * 57076 * // Example function to render the CSS styles based on Focal Point Picker value 57077 * const style = { 57078 * backgroundImage: `url(${ url })`, 57079 * backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`, 57080 * }; 57081 * 57082 * return ( 57083 * <> 57084 * <FocalPointPicker 57085 * __nextHasNoMarginBottom 57086 * url={ url } 57087 * value={ focalPoint } 57088 * onDragStart={ setFocalPoint } 57089 * onDrag={ setFocalPoint } 57090 * onChange={ setFocalPoint } 57091 * /> 57092 * <div style={ style } /> 57093 * </> 57094 * ); 57095 * }; 57096 * ``` 57097 */ 57098 function FocalPointPicker({ 57099 __nextHasNoMarginBottom, 57100 autoPlay = true, 57101 className, 57102 help, 57103 label, 57104 onChange, 57105 onDrag, 57106 onDragEnd, 57107 onDragStart, 57108 resolvePoint, 57109 url, 57110 value: valueProp = { 57111 x: 0.5, 57112 y: 0.5 57113 }, 57114 ...restProps 57115 }) { 57116 const [point, setPoint] = (0,external_wp_element_namespaceObject.useState)(valueProp); 57117 const [showGridOverlay, setShowGridOverlay] = (0,external_wp_element_namespaceObject.useState)(false); 57118 const { 57119 startDrag, 57120 endDrag, 57121 isDragging 57122 } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({ 57123 onDragStart: event => { 57124 dragAreaRef.current?.focus(); 57125 const value = getValueWithinDragArea(event); 57126 57127 // `value` can technically be undefined if getValueWithinDragArea() is 57128 // called before dragAreaRef is set, but this shouldn't happen in reality. 57129 if (!value) { 57130 return; 57131 } 57132 onDragStart?.(value, event); 57133 setPoint(value); 57134 }, 57135 onDragMove: event => { 57136 // Prevents text-selection when dragging. 57137 event.preventDefault(); 57138 const value = getValueWithinDragArea(event); 57139 if (!value) { 57140 return; 57141 } 57142 onDrag?.(value, event); 57143 setPoint(value); 57144 }, 57145 onDragEnd: () => { 57146 onDragEnd?.(); 57147 onChange?.(point); 57148 } 57149 }); 57150 57151 // Uses the internal point while dragging or else the value from props. 57152 const { 57153 x, 57154 y 57155 } = isDragging ? point : valueProp; 57156 const dragAreaRef = (0,external_wp_element_namespaceObject.useRef)(null); 57157 const [bounds, setBounds] = (0,external_wp_element_namespaceObject.useState)(INITIAL_BOUNDS); 57158 const refUpdateBounds = (0,external_wp_element_namespaceObject.useRef)(() => { 57159 if (!dragAreaRef.current) { 57160 return; 57161 } 57162 const { 57163 clientWidth: width, 57164 clientHeight: height 57165 } = dragAreaRef.current; 57166 // Falls back to initial bounds if the ref has no size. Since styles 57167 // give the drag area dimensions even when the media has not loaded 57168 // this should only happen in unit tests (jsdom). 57169 setBounds(width > 0 && height > 0 ? { 57170 width, 57171 height 57172 } : { 57173 ...INITIAL_BOUNDS 57174 }); 57175 }); 57176 (0,external_wp_element_namespaceObject.useEffect)(() => { 57177 const updateBounds = refUpdateBounds.current; 57178 if (!dragAreaRef.current) { 57179 return; 57180 } 57181 const { 57182 defaultView 57183 } = dragAreaRef.current.ownerDocument; 57184 defaultView?.addEventListener('resize', updateBounds); 57185 return () => defaultView?.removeEventListener('resize', updateBounds); 57186 }, []); 57187 57188 // Updates the bounds to cover cases of unspecified media or load failures. 57189 (0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []); 57190 57191 // TODO: Consider refactoring getValueWithinDragArea() into a pure function. 57192 // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173 57193 const getValueWithinDragArea = ({ 57194 clientX, 57195 clientY, 57196 shiftKey 57197 }) => { 57198 if (!dragAreaRef.current) { 57199 return; 57200 } 57201 const { 57202 top, 57203 left 57204 } = dragAreaRef.current.getBoundingClientRect(); 57205 let nextX = (clientX - left) / bounds.width; 57206 let nextY = (clientY - top) / bounds.height; 57207 // Enables holding shift to jump values by 10%. 57208 if (shiftKey) { 57209 nextX = Math.round(nextX / 0.1) * 0.1; 57210 nextY = Math.round(nextY / 0.1) * 0.1; 57211 } 57212 return getFinalValue({ 57213 x: nextX, 57214 y: nextY 57215 }); 57216 }; 57217 const getFinalValue = value => { 57218 var _resolvePoint; 57219 const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value; 57220 resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1)); 57221 resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1)); 57222 const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2; 57223 return { 57224 x: roundToTwoDecimalPlaces(resolvedValue.x), 57225 y: roundToTwoDecimalPlaces(resolvedValue.y) 57226 }; 57227 }; 57228 const arrowKeyStep = event => { 57229 const { 57230 code, 57231 shiftKey 57232 } = event; 57233 if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) { 57234 return; 57235 } 57236 event.preventDefault(); 57237 const value = { 57238 x, 57239 y 57240 }; 57241 const step = shiftKey ? 0.1 : 0.01; 57242 const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step; 57243 const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x'; 57244 value[axis] = value[axis] + delta; 57245 onChange?.(getFinalValue(value)); 57246 }; 57247 const focalPointPosition = { 57248 left: x !== undefined ? x * bounds.width : 0.5 * bounds.width, 57249 top: y !== undefined ? y * bounds.height : 0.5 * bounds.height 57250 }; 57251 const classes = dist_clsx('components-focal-point-picker-control', className); 57252 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FocalPointPicker); 57253 const id = `inspector-focal-point-picker-control-$instanceId}`; 57254 use_update_effect(() => { 57255 setShowGridOverlay(true); 57256 const timeout = window.setTimeout(() => { 57257 setShowGridOverlay(false); 57258 }, GRID_OVERLAY_TIMEOUT); 57259 return () => window.clearTimeout(timeout); 57260 }, [x, y]); 57261 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control, { 57262 ...restProps, 57263 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 57264 __associatedWPComponentName: "FocalPointPicker", 57265 label: label, 57266 id: id, 57267 help: help, 57268 className: classes, 57269 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaWrapper, { 57270 className: "components-focal-point-picker-wrapper", 57271 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MediaContainer, { 57272 className: "components-focal-point-picker", 57273 onKeyDown: arrowKeyStep, 57274 onMouseDown: startDrag, 57275 onBlur: () => { 57276 if (isDragging) { 57277 endDrag(); 57278 } 57279 }, 57280 ref: dragAreaRef, 57281 role: "button", 57282 tabIndex: -1, 57283 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointPickerGrid, { 57284 bounds: bounds, 57285 showOverlay: showGridOverlay 57286 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_Media, { 57287 alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'), 57288 autoPlay: autoPlay, 57289 onLoad: refUpdateBounds.current, 57290 src: url 57291 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPoint, { 57292 ...focalPointPosition, 57293 isDragging: isDragging 57294 })] 57295 }) 57296 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointPickerControls, { 57297 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 57298 hasHelpText: !!help, 57299 point: { 57300 x, 57301 y 57302 }, 57303 onChange: value => { 57304 onChange?.(getFinalValue(value)); 57305 } 57306 })] 57307 }); 57308 } 57309 /* harmony default export */ const focal_point_picker = (FocalPointPicker); 57310 57311 ;// ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js 57312 /** 57313 * WordPress dependencies 57314 */ 57315 57316 57317 /** 57318 * Internal dependencies 57319 */ 57320 57321 function FocusableIframe({ 57322 iframeRef, 57323 ...props 57324 }) { 57325 const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([iframeRef, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]); 57326 external_wp_deprecated_default()('wp.components.FocusableIframe', { 57327 since: '5.9', 57328 alternative: 'wp.compose.useFocusableIframe' 57329 }); 57330 // Disable reason: The rendered iframe is a pass-through component, 57331 // assigning props inherited from the rendering parent. It's the 57332 // responsibility of the parent to assign a title. 57333 // eslint-disable-next-line jsx-a11y/iframe-has-title 57334 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("iframe", { 57335 ref: ref, 57336 ...props 57337 }); 57338 } 57339 57340 ;// ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js 57341 /** 57342 * Internal dependencies 57343 */ 57344 57345 57346 57347 /** 57348 * Some themes use css vars for their font sizes, so until we 57349 * have the way of calculating them don't display them. 57350 * 57351 * @param value The value that is checked. 57352 * @return Whether the value is a simple css value. 57353 */ 57354 function isSimpleCssValue(value) { 57355 const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i; 57356 return sizeRegex.test(String(value)); 57357 } 57358 57359 /** 57360 * If all of the given font sizes have the same unit (e.g. 'px'), return that 57361 * unit. Otherwise return null. 57362 * 57363 * @param fontSizes List of font sizes. 57364 * @return The common unit, or null. 57365 */ 57366 function getCommonSizeUnit(fontSizes) { 57367 const [firstFontSize, ...otherFontSizes] = fontSizes; 57368 if (!firstFontSize) { 57369 return null; 57370 } 57371 const [, firstUnit] = parseQuantityAndUnitFromRawValue(firstFontSize.size); 57372 const areAllSizesSameUnit = otherFontSizes.every(fontSize => { 57373 const [, unit] = parseQuantityAndUnitFromRawValue(fontSize.size); 57374 return unit === firstUnit; 57375 }); 57376 return areAllSizesSameUnit ? firstUnit : null; 57377 } 57378 57379 ;// ./node_modules/@wordpress/components/build-module/font-size-picker/styles.js 57380 57381 function font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 57382 /** 57383 * External dependencies 57384 */ 57385 57386 /** 57387 * Internal dependencies 57388 */ 57389 57390 57391 57392 57393 57394 const styles_Container = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? { 57395 target: "e8tqeku4" 57396 } : 0)( true ? { 57397 name: "k2q51s", 57398 styles: "border:0;margin:0;padding:0;display:contents" 57399 } : 0); 57400 const styles_Header = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 57401 target: "e8tqeku3" 57402 } : 0)("height:", space(4), ";" + ( true ? "" : 0)); 57403 const HeaderToggle = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 57404 target: "e8tqeku2" 57405 } : 0)("margin-top:", space(-1), ";" + ( true ? "" : 0)); 57406 const HeaderLabel = /*#__PURE__*/emotion_styled_base_browser_esm(base_control.VisualLabel, true ? { 57407 target: "e8tqeku1" 57408 } : 0)("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + ( true ? "" : 0)); 57409 const HeaderHint = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 57410 target: "e8tqeku0" 57411 } : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0)); 57412 57413 ;// ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-select.js 57414 /** 57415 * WordPress dependencies 57416 */ 57417 57418 57419 /** 57420 * Internal dependencies 57421 */ 57422 57423 57424 57425 57426 const DEFAULT_OPTION = { 57427 key: 'default', 57428 name: (0,external_wp_i18n_namespaceObject.__)('Default'), 57429 value: undefined 57430 }; 57431 const FontSizePickerSelect = props => { 57432 var _options$find; 57433 const { 57434 __next40pxDefaultSize, 57435 fontSizes, 57436 value, 57437 size, 57438 onChange 57439 } = props; 57440 const areAllSizesSameUnit = !!getCommonSizeUnit(fontSizes); 57441 const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => { 57442 let hint; 57443 if (areAllSizesSameUnit) { 57444 const [quantity] = parseQuantityAndUnitFromRawValue(fontSize.size); 57445 if (quantity !== undefined) { 57446 hint = String(quantity); 57447 } 57448 } else if (isSimpleCssValue(fontSize.size)) { 57449 hint = String(fontSize.size); 57450 } 57451 return { 57452 key: fontSize.slug, 57453 name: fontSize.name || fontSize.slug, 57454 value: fontSize.size, 57455 hint 57456 }; 57457 })]; 57458 const selectedOption = (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION; 57459 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_select_control, { 57460 __next40pxDefaultSize: __next40pxDefaultSize, 57461 __shouldNotWarnDeprecated36pxSize: true, 57462 className: "components-font-size-picker__select", 57463 label: (0,external_wp_i18n_namespaceObject.__)('Font size'), 57464 hideLabelFromVision: true, 57465 describedBy: (0,external_wp_i18n_namespaceObject.sprintf)( 57466 // translators: %s: Currently selected font size. 57467 (0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name), 57468 options: options, 57469 value: selectedOption, 57470 showSelectedHint: true, 57471 onChange: ({ 57472 selectedItem 57473 }) => { 57474 onChange(selectedItem.value); 57475 }, 57476 size: size 57477 }); 57478 }; 57479 /* harmony default export */ const font_size_picker_select = (FontSizePickerSelect); 57480 57481 ;// ./node_modules/@wordpress/components/build-module/font-size-picker/constants.js 57482 /** 57483 * WordPress dependencies 57484 */ 57485 57486 57487 /** 57488 * List of T-shirt abbreviations. 57489 * 57490 * When there are 5 font sizes or fewer, we assume that the font sizes are 57491 * ordered by size and show T-shirt labels. 57492 */ 57493 const T_SHIRT_ABBREVIATIONS = [/* translators: S stands for 'small' and is a size label. */ 57494 (0,external_wp_i18n_namespaceObject.__)('S'), /* translators: M stands for 'medium' and is a size label. */ 57495 (0,external_wp_i18n_namespaceObject.__)('M'), /* translators: L stands for 'large' and is a size label. */ 57496 (0,external_wp_i18n_namespaceObject.__)('L'), /* translators: XL stands for 'extra large' and is a size label. */ 57497 (0,external_wp_i18n_namespaceObject.__)('XL'), /* translators: XXL stands for 'extra extra large' and is a size label. */ 57498 (0,external_wp_i18n_namespaceObject.__)('XXL')]; 57499 57500 /** 57501 * List of T-shirt names. 57502 * 57503 * When there are 5 font sizes or fewer, we assume that the font sizes are 57504 * ordered by size and show T-shirt labels. 57505 */ 57506 const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,external_wp_i18n_namespaceObject.__)('Medium'), (0,external_wp_i18n_namespaceObject.__)('Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Extra Large')]; 57507 57508 ;// ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-toggle-group.js 57509 /** 57510 * WordPress dependencies 57511 */ 57512 57513 57514 /** 57515 * Internal dependencies 57516 */ 57517 57518 57519 57520 const FontSizePickerToggleGroup = props => { 57521 const { 57522 fontSizes, 57523 value, 57524 __next40pxDefaultSize, 57525 size, 57526 onChange 57527 } = props; 57528 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_component, { 57529 __nextHasNoMarginBottom: true, 57530 __next40pxDefaultSize: __next40pxDefaultSize, 57531 __shouldNotWarnDeprecated36pxSize: true, 57532 label: (0,external_wp_i18n_namespaceObject.__)('Font size'), 57533 hideLabelFromVision: true, 57534 value: value, 57535 onChange: onChange, 57536 isBlock: true, 57537 size: size, 57538 children: fontSizes.map((fontSize, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_component, { 57539 value: fontSize.size, 57540 label: T_SHIRT_ABBREVIATIONS[index], 57541 "aria-label": fontSize.name || T_SHIRT_NAMES[index], 57542 showTooltip: true 57543 }, fontSize.slug)) 57544 }); 57545 }; 57546 /* harmony default export */ const font_size_picker_toggle_group = (FontSizePickerToggleGroup); 57547 57548 ;// ./node_modules/@wordpress/components/build-module/font-size-picker/index.js 57549 /** 57550 * External dependencies 57551 */ 57552 57553 /** 57554 * WordPress dependencies 57555 */ 57556 57557 57558 57559 57560 /** 57561 * Internal dependencies 57562 */ 57563 57564 57565 57566 57567 57568 57569 57570 57571 57572 57573 57574 57575 57576 const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh']; 57577 const MAX_TOGGLE_GROUP_SIZES = 5; 57578 const UnforwardedFontSizePicker = (props, ref) => { 57579 const { 57580 __next40pxDefaultSize = false, 57581 fallbackFontSize, 57582 fontSizes = [], 57583 disableCustomFontSizes = false, 57584 onChange, 57585 size = 'default', 57586 units: unitsProp = DEFAULT_UNITS, 57587 value, 57588 withSlider = false, 57589 withReset = true 57590 } = props; 57591 const units = useCustomUnits({ 57592 availableUnits: unitsProp 57593 }); 57594 const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value); 57595 const isCustomValue = !!value && !selectedFontSize; 57596 57597 // Initially request a custom picker if the value is not from the predef list. 57598 const [userRequestedCustom, setUserRequestedCustom] = (0,external_wp_element_namespaceObject.useState)(isCustomValue); 57599 let currentPickerType; 57600 if (!disableCustomFontSizes && userRequestedCustom) { 57601 // While showing the custom value picker, switch back to predef only if 57602 // `disableCustomFontSizes` is set to `true`. 57603 currentPickerType = 'custom'; 57604 } else { 57605 currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup'; 57606 } 57607 const headerHint = (0,external_wp_element_namespaceObject.useMemo)(() => { 57608 switch (currentPickerType) { 57609 case 'custom': 57610 return (0,external_wp_i18n_namespaceObject.__)('Custom'); 57611 case 'togglegroup': 57612 if (selectedFontSize) { 57613 return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)]; 57614 } 57615 break; 57616 case 'select': 57617 const commonUnit = getCommonSizeUnit(fontSizes); 57618 if (commonUnit) { 57619 return `($commonUnit})`; 57620 } 57621 break; 57622 } 57623 return ''; 57624 }, [currentPickerType, selectedFontSize, fontSizes]); 57625 if (fontSizes.length === 0 && disableCustomFontSizes) { 57626 return null; 57627 } 57628 57629 // If neither the value or first font size is a string, then FontSizePicker 57630 // operates in a legacy "unitless" mode where UnitControl can only be used 57631 // to select px values and onChange() is always called with number values. 57632 const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string'; 57633 const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units); 57634 const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit); 57635 const isDisabled = value === undefined; 57636 maybeWarnDeprecated36pxSize({ 57637 componentName: 'FontSizePicker', 57638 __next40pxDefaultSize, 57639 size 57640 }); 57641 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Container, { 57642 ref: ref, 57643 className: "components-font-size-picker", 57644 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 57645 as: "legend", 57646 children: (0,external_wp_i18n_namespaceObject.__)('Font size') 57647 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 57648 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Header, { 57649 className: "components-font-size-picker__header", 57650 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(HeaderLabel, { 57651 "aria-label": `${(0,external_wp_i18n_namespaceObject.__)('Size')} $headerHint || ''}`, 57652 children: [(0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeaderHint, { 57653 className: "components-font-size-picker__header__hint", 57654 children: headerHint 57655 })] 57656 }), !disableCustomFontSizes && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeaderToggle, { 57657 label: currentPickerType === 'custom' ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'), 57658 icon: library_settings, 57659 onClick: () => setUserRequestedCustom(!userRequestedCustom), 57660 isPressed: currentPickerType === 'custom', 57661 size: "small" 57662 })] 57663 }) 57664 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 57665 children: [currentPickerType === 'select' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_select, { 57666 __next40pxDefaultSize: __next40pxDefaultSize, 57667 fontSizes: fontSizes, 57668 value: value, 57669 disableCustomFontSizes: disableCustomFontSizes, 57670 size: size, 57671 onChange: newValue => { 57672 if (newValue === undefined) { 57673 onChange?.(undefined); 57674 } else { 57675 onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); 57676 } 57677 }, 57678 onSelectCustom: () => setUserRequestedCustom(true) 57679 }), currentPickerType === 'togglegroup' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_toggle_group, { 57680 fontSizes: fontSizes, 57681 value: value, 57682 __next40pxDefaultSize: __next40pxDefaultSize, 57683 size: size, 57684 onChange: newValue => { 57685 if (newValue === undefined) { 57686 onChange?.(undefined); 57687 } else { 57688 onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); 57689 } 57690 } 57691 }), currentPickerType === 'custom' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { 57692 className: "components-font-size-picker__custom-size-control", 57693 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 57694 isBlock: true, 57695 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_control, { 57696 __next40pxDefaultSize: __next40pxDefaultSize, 57697 __shouldNotWarnDeprecated36pxSize: true, 57698 label: (0,external_wp_i18n_namespaceObject.__)('Custom'), 57699 labelPosition: "top", 57700 hideLabelFromVision: true, 57701 value: value, 57702 onChange: newValue => { 57703 setUserRequestedCustom(true); 57704 if (newValue === undefined) { 57705 onChange?.(undefined); 57706 } else { 57707 onChange?.(hasUnits ? newValue : parseInt(newValue, 10)); 57708 } 57709 }, 57710 size: size, 57711 units: hasUnits ? units : [], 57712 min: 0 57713 }) 57714 }), withSlider && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 57715 isBlock: true, 57716 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 57717 marginX: 2, 57718 marginBottom: 0, 57719 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, { 57720 __nextHasNoMarginBottom: true, 57721 __next40pxDefaultSize: __next40pxDefaultSize, 57722 __shouldNotWarnDeprecated36pxSize: true, 57723 className: "components-font-size-picker__custom-input", 57724 label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'), 57725 hideLabelFromVision: true, 57726 value: valueQuantity, 57727 initialPosition: fallbackFontSize, 57728 withInputField: false, 57729 onChange: newValue => { 57730 setUserRequestedCustom(true); 57731 if (newValue === undefined) { 57732 onChange?.(undefined); 57733 } else if (hasUnits) { 57734 onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px')); 57735 } else { 57736 onChange?.(newValue); 57737 } 57738 }, 57739 min: 0, 57740 max: isValueUnitRelative ? 10 : 100, 57741 step: isValueUnitRelative ? 0.1 : 1 57742 }) 57743 }) 57744 }), withReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 57745 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Button, { 57746 disabled: isDisabled, 57747 accessibleWhenDisabled: true, 57748 onClick: () => { 57749 onChange?.(undefined); 57750 }, 57751 variant: "secondary", 57752 __next40pxDefaultSize: true, 57753 size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small', 57754 children: (0,external_wp_i18n_namespaceObject.__)('Reset') 57755 }) 57756 })] 57757 })] 57758 })] 57759 }); 57760 }; 57761 const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFontSizePicker); 57762 /* harmony default export */ const font_size_picker = (FontSizePicker); 57763 57764 ;// ./node_modules/@wordpress/components/build-module/form-file-upload/index.js 57765 /** 57766 * WordPress dependencies 57767 */ 57768 57769 57770 /** 57771 * Internal dependencies 57772 */ 57773 57774 57775 57776 /** 57777 * FormFileUpload allows users to select files from their local device. 57778 * 57779 * ```jsx 57780 * import { FormFileUpload } from '@wordpress/components'; 57781 * 57782 * const MyFormFileUpload = () => ( 57783 * <FormFileUpload 57784 * __next40pxDefaultSize 57785 * accept="image/*" 57786 * onChange={ ( event ) => console.log( event.currentTarget.files ) } 57787 * > 57788 * Upload 57789 * </FormFileUpload> 57790 * ); 57791 * ``` 57792 */ 57793 57794 function FormFileUpload({ 57795 accept, 57796 children, 57797 multiple = false, 57798 onChange, 57799 onClick, 57800 render, 57801 ...props 57802 }) { 57803 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 57804 const openFileDialog = () => { 57805 ref.current?.click(); 57806 }; 57807 if (!render) { 57808 maybeWarnDeprecated36pxSize({ 57809 componentName: 'FormFileUpload', 57810 __next40pxDefaultSize: props.__next40pxDefaultSize, 57811 // @ts-expect-error - We don't "officially" support all Button props but this likely happens. 57812 size: props.size 57813 }); 57814 } 57815 const ui = render ? render({ 57816 openFileDialog 57817 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 57818 onClick: openFileDialog, 57819 ...props, 57820 children: children 57821 }); 57822 // @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files 57823 // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4. 57824 // This can be removed once the Chromium fix is in the stable channel. 57825 // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute. 57826 const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium'); 57827 const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept; 57828 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 57829 className: "components-form-file-upload", 57830 children: [ui, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { 57831 type: "file", 57832 ref: ref, 57833 multiple: multiple, 57834 style: { 57835 display: 'none' 57836 }, 57837 accept: compatAccept, 57838 onChange: onChange, 57839 onClick: onClick, 57840 "data-testid": "form-file-upload-input" 57841 })] 57842 }); 57843 } 57844 /* harmony default export */ const form_file_upload = (FormFileUpload); 57845 57846 ;// ./node_modules/@wordpress/components/build-module/form-toggle/index.js 57847 /** 57848 * External dependencies 57849 */ 57850 57851 /** 57852 * WordPress dependencies 57853 */ 57854 57855 57856 /** 57857 * Internal dependencies 57858 */ 57859 57860 const form_toggle_noop = () => {}; 57861 function UnforwardedFormToggle(props, ref) { 57862 const { 57863 className, 57864 checked, 57865 id, 57866 disabled, 57867 onChange = form_toggle_noop, 57868 ...additionalProps 57869 } = props; 57870 const wrapperClasses = dist_clsx('components-form-toggle', className, { 57871 'is-checked': checked, 57872 'is-disabled': disabled 57873 }); 57874 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 57875 className: wrapperClasses, 57876 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { 57877 className: "components-form-toggle__input", 57878 id: id, 57879 type: "checkbox", 57880 checked: checked, 57881 onChange: onChange, 57882 disabled: disabled, 57883 ...additionalProps, 57884 ref: ref 57885 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 57886 className: "components-form-toggle__track" 57887 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 57888 className: "components-form-toggle__thumb" 57889 })] 57890 }); 57891 } 57892 57893 /** 57894 * FormToggle switches a single setting on or off. 57895 * 57896 * ```jsx 57897 * import { FormToggle } from '@wordpress/components'; 57898 * import { useState } from '@wordpress/element'; 57899 * 57900 * const MyFormToggle = () => { 57901 * const [ isChecked, setChecked ] = useState( true ); 57902 * 57903 * return ( 57904 * <FormToggle 57905 * checked={ isChecked } 57906 * onChange={ () => setChecked( ( state ) => ! state ) } 57907 * /> 57908 * ); 57909 * }; 57910 * ``` 57911 */ 57912 const FormToggle = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFormToggle); 57913 /* harmony default export */ const form_toggle = (FormToggle); 57914 57915 ;// ./node_modules/@wordpress/components/build-module/form-token-field/token.js 57916 /** 57917 * External dependencies 57918 */ 57919 57920 57921 /** 57922 * WordPress dependencies 57923 */ 57924 57925 57926 57927 57928 /** 57929 * Internal dependencies 57930 */ 57931 57932 57933 57934 const token_noop = () => {}; 57935 function Token({ 57936 value, 57937 status, 57938 title, 57939 displayTransform, 57940 isBorderless = false, 57941 disabled = false, 57942 onClickRemove = token_noop, 57943 onMouseEnter, 57944 onMouseLeave, 57945 messages, 57946 termPosition, 57947 termsCount 57948 }) { 57949 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Token); 57950 const tokenClasses = dist_clsx('components-form-token-field__token', { 57951 'is-error': 'error' === status, 57952 'is-success': 'success' === status, 57953 'is-validating': 'validating' === status, 57954 'is-borderless': isBorderless, 57955 'is-disabled': disabled 57956 }); 57957 const onClick = () => onClickRemove({ 57958 value 57959 }); 57960 const transformedValue = displayTransform(value); 57961 const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */ 57962 (0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount); 57963 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 57964 className: tokenClasses, 57965 onMouseEnter: onMouseEnter, 57966 onMouseLeave: onMouseLeave, 57967 title: title, 57968 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 57969 className: "components-form-token-field__token-text", 57970 id: `components-form-token-field__token-text-$instanceId}`, 57971 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 57972 as: "span", 57973 children: termPositionAndCount 57974 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 57975 "aria-hidden": "true", 57976 children: transformedValue 57977 })] 57978 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 57979 className: "components-form-token-field__remove-token", 57980 size: "small", 57981 icon: close_small, 57982 onClick: !disabled ? onClick : undefined 57983 // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence. 57984 // eslint-disable-next-line no-restricted-syntax 57985 , 57986 disabled: disabled, 57987 label: messages.remove, 57988 "aria-describedby": `components-form-token-field__token-text-$instanceId}` 57989 })] 57990 }); 57991 } 57992 57993 ;// ./node_modules/@wordpress/components/build-module/form-token-field/styles.js 57994 57995 /** 57996 * External dependencies 57997 */ 57998 57999 58000 58001 /** 58002 * Internal dependencies 58003 */ 58004 58005 58006 58007 const deprecatedPaddings = ({ 58008 __next40pxDefaultSize, 58009 hasTokens 58010 }) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("padding-top:", space(hasTokens ? 1 : 0.5), ";padding-bottom:", space(hasTokens ? 1 : 0.5), ";" + ( true ? "" : 0), true ? "" : 0); 58011 const TokensAndInputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 58012 target: "ehq8nmi0" 58013 } : 0)("padding:7px;", boxSizingReset, " ", deprecatedPaddings, ";" + ( true ? "" : 0)); 58014 58015 ;// ./node_modules/@wordpress/components/build-module/form-token-field/index.js 58016 /** 58017 * External dependencies 58018 */ 58019 58020 /** 58021 * WordPress dependencies 58022 */ 58023 58024 58025 58026 58027 58028 58029 58030 /** 58031 * Internal dependencies 58032 */ 58033 58034 58035 58036 58037 58038 58039 58040 58041 58042 58043 58044 const form_token_field_identity = value => value; 58045 58046 /** 58047 * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome, 58048 * or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens. 58049 * 58050 * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). 58051 * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key. 58052 * 58053 * The `value` property is handled in a manner similar to controlled form components. 58054 * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information. 58055 */ 58056 function FormTokenField(props) { 58057 const { 58058 autoCapitalize, 58059 autoComplete, 58060 maxLength, 58061 placeholder, 58062 label = (0,external_wp_i18n_namespaceObject.__)('Add item'), 58063 className, 58064 suggestions = [], 58065 maxSuggestions = 100, 58066 value = [], 58067 displayTransform = form_token_field_identity, 58068 saveTransform = token => token.trim(), 58069 onChange = () => {}, 58070 onInputChange = () => {}, 58071 onFocus = undefined, 58072 isBorderless = false, 58073 disabled = false, 58074 tokenizeOnSpace = false, 58075 messages = { 58076 added: (0,external_wp_i18n_namespaceObject.__)('Item added.'), 58077 removed: (0,external_wp_i18n_namespaceObject.__)('Item removed.'), 58078 remove: (0,external_wp_i18n_namespaceObject.__)('Remove item'), 58079 __experimentalInvalid: (0,external_wp_i18n_namespaceObject.__)('Invalid item') 58080 }, 58081 __experimentalRenderItem, 58082 __experimentalExpandOnFocus = false, 58083 __experimentalValidateInput = () => true, 58084 __experimentalShowHowTo = true, 58085 __next40pxDefaultSize = false, 58086 __experimentalAutoSelectFirstMatch = false, 58087 __nextHasNoMarginBottom = false, 58088 tokenizeOnBlur = false 58089 } = useDeprecated36pxDefaultSizeProp(props); 58090 if (!__nextHasNoMarginBottom) { 58091 external_wp_deprecated_default()('Bottom margin styles for wp.components.FormTokenField', { 58092 since: '6.7', 58093 version: '7.0', 58094 hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.' 58095 }); 58096 } 58097 maybeWarnDeprecated36pxSize({ 58098 componentName: 'FormTokenField', 58099 size: undefined, 58100 __next40pxDefaultSize 58101 }); 58102 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FormTokenField); 58103 58104 // We reset to these initial values again in the onBlur 58105 const [incompleteTokenValue, setIncompleteTokenValue] = (0,external_wp_element_namespaceObject.useState)(''); 58106 const [inputOffsetFromEnd, setInputOffsetFromEnd] = (0,external_wp_element_namespaceObject.useState)(0); 58107 const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false); 58108 const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false); 58109 const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0,external_wp_element_namespaceObject.useState)(-1); 58110 const [selectedSuggestionScroll, setSelectedSuggestionScroll] = (0,external_wp_element_namespaceObject.useState)(false); 58111 const prevSuggestions = (0,external_wp_compose_namespaceObject.usePrevious)(suggestions); 58112 const prevValue = (0,external_wp_compose_namespaceObject.usePrevious)(value); 58113 const input = (0,external_wp_element_namespaceObject.useRef)(null); 58114 const tokensAndInput = (0,external_wp_element_namespaceObject.useRef)(null); 58115 const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500); 58116 (0,external_wp_element_namespaceObject.useEffect)(() => { 58117 // Make sure to focus the input when the isActive state is true. 58118 if (isActive && !hasFocus()) { 58119 focus(); 58120 } 58121 }, [isActive]); 58122 (0,external_wp_element_namespaceObject.useEffect)(() => { 58123 const suggestionsDidUpdate = !external_wp_isShallowEqual_default()(suggestions, prevSuggestions || []); 58124 if (suggestionsDidUpdate || value !== prevValue) { 58125 updateSuggestions(suggestionsDidUpdate); 58126 } 58127 58128 // TODO: updateSuggestions() should first be refactored so its actual deps are clearer. 58129 }, [suggestions, prevSuggestions, value, prevValue]); 58130 (0,external_wp_element_namespaceObject.useEffect)(() => { 58131 updateSuggestions(); 58132 }, [incompleteTokenValue]); 58133 (0,external_wp_element_namespaceObject.useEffect)(() => { 58134 updateSuggestions(); 58135 }, [__experimentalAutoSelectFirstMatch]); 58136 if (disabled && isActive) { 58137 setIsActive(false); 58138 setIncompleteTokenValue(''); 58139 } 58140 function focus() { 58141 input.current?.focus(); 58142 } 58143 function hasFocus() { 58144 return input.current === input.current?.ownerDocument.activeElement; 58145 } 58146 function onFocusHandler(event) { 58147 // If focus is on the input or on the container, set the isActive state to true. 58148 if (hasFocus() || event.target === tokensAndInput.current) { 58149 setIsActive(true); 58150 setIsExpanded(__experimentalExpandOnFocus || isExpanded); 58151 } else { 58152 /* 58153 * Otherwise, focus is on one of the token "remove" buttons and we 58154 * set the isActive state to false to prevent the input to be 58155 * re-focused, see componentDidUpdate(). 58156 */ 58157 setIsActive(false); 58158 } 58159 if ('function' === typeof onFocus) { 58160 onFocus(event); 58161 } 58162 } 58163 function onBlur(event) { 58164 if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) { 58165 setIsActive(false); 58166 if (tokenizeOnBlur && inputHasValidValue()) { 58167 addNewToken(incompleteTokenValue); 58168 } 58169 } else { 58170 // Reset to initial state 58171 setIncompleteTokenValue(''); 58172 setInputOffsetFromEnd(0); 58173 setIsActive(false); 58174 if (__experimentalExpandOnFocus) { 58175 // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when 58176 // the user clicks on it (`tokensAndInput` will be the element that caused the blur). 58177 const hasFocusWithin = event.relatedTarget === tokensAndInput.current; 58178 setIsExpanded(hasFocusWithin); 58179 } else { 58180 // Else collapse the suggestion list. This will result in the suggestion list closing 58181 // after a suggestion has been submitted since that causes a blur. 58182 setIsExpanded(false); 58183 } 58184 setSelectedSuggestionIndex(-1); 58185 setSelectedSuggestionScroll(false); 58186 } 58187 } 58188 function onKeyDown(event) { 58189 let preventDefault = false; 58190 if (event.defaultPrevented) { 58191 return; 58192 } 58193 switch (event.key) { 58194 case 'Backspace': 58195 preventDefault = handleDeleteKey(deleteTokenBeforeInput); 58196 break; 58197 case 'Enter': 58198 preventDefault = addCurrentToken(); 58199 break; 58200 case 'ArrowLeft': 58201 preventDefault = handleLeftArrowKey(); 58202 break; 58203 case 'ArrowUp': 58204 preventDefault = handleUpArrowKey(); 58205 break; 58206 case 'ArrowRight': 58207 preventDefault = handleRightArrowKey(); 58208 break; 58209 case 'ArrowDown': 58210 preventDefault = handleDownArrowKey(); 58211 break; 58212 case 'Delete': 58213 preventDefault = handleDeleteKey(deleteTokenAfterInput); 58214 break; 58215 case 'Space': 58216 if (tokenizeOnSpace) { 58217 preventDefault = addCurrentToken(); 58218 } 58219 break; 58220 case 'Escape': 58221 preventDefault = handleEscapeKey(event); 58222 break; 58223 default: 58224 break; 58225 } 58226 if (preventDefault) { 58227 event.preventDefault(); 58228 } 58229 } 58230 function onKeyPress(event) { 58231 let preventDefault = false; 58232 switch (event.key) { 58233 case ',': 58234 preventDefault = handleCommaKey(); 58235 break; 58236 default: 58237 break; 58238 } 58239 if (preventDefault) { 58240 event.preventDefault(); 58241 } 58242 } 58243 function onContainerTouched(event) { 58244 // Prevent clicking/touching the tokensAndInput container from blurring 58245 // the input and adding the current token. 58246 if (event.target === tokensAndInput.current && isActive) { 58247 event.preventDefault(); 58248 } 58249 } 58250 function onTokenClickRemove(event) { 58251 deleteToken(event.value); 58252 focus(); 58253 } 58254 function onSuggestionHovered(suggestion) { 58255 const index = getMatchingSuggestions().indexOf(suggestion); 58256 if (index >= 0) { 58257 setSelectedSuggestionIndex(index); 58258 setSelectedSuggestionScroll(false); 58259 } 58260 } 58261 function onSuggestionSelected(suggestion) { 58262 addNewToken(suggestion); 58263 } 58264 function onInputChangeHandler(event) { 58265 const text = event.value; 58266 const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/; 58267 const items = text.split(separator); 58268 const tokenValue = items[items.length - 1] || ''; 58269 if (items.length > 1) { 58270 addNewTokens(items.slice(0, -1)); 58271 } 58272 setIncompleteTokenValue(tokenValue); 58273 onInputChange(tokenValue); 58274 } 58275 function handleDeleteKey(_deleteToken) { 58276 let preventDefault = false; 58277 if (hasFocus() && isInputEmpty()) { 58278 _deleteToken(); 58279 preventDefault = true; 58280 } 58281 return preventDefault; 58282 } 58283 function handleLeftArrowKey() { 58284 let preventDefault = false; 58285 if (isInputEmpty()) { 58286 moveInputBeforePreviousToken(); 58287 preventDefault = true; 58288 } 58289 return preventDefault; 58290 } 58291 function handleRightArrowKey() { 58292 let preventDefault = false; 58293 if (isInputEmpty()) { 58294 moveInputAfterNextToken(); 58295 preventDefault = true; 58296 } 58297 return preventDefault; 58298 } 58299 function handleUpArrowKey() { 58300 setSelectedSuggestionIndex(index => { 58301 return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1; 58302 }); 58303 setSelectedSuggestionScroll(true); 58304 return true; // PreventDefault. 58305 } 58306 function handleDownArrowKey() { 58307 setSelectedSuggestionIndex(index => { 58308 return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length; 58309 }); 58310 setSelectedSuggestionScroll(true); 58311 return true; // PreventDefault. 58312 } 58313 function handleEscapeKey(event) { 58314 if (event.target instanceof HTMLInputElement) { 58315 setIncompleteTokenValue(event.target.value); 58316 setIsExpanded(false); 58317 setSelectedSuggestionIndex(-1); 58318 setSelectedSuggestionScroll(false); 58319 } 58320 return true; // PreventDefault. 58321 } 58322 function handleCommaKey() { 58323 if (inputHasValidValue()) { 58324 addNewToken(incompleteTokenValue); 58325 } 58326 return true; // PreventDefault. 58327 } 58328 function moveInputToIndex(index) { 58329 setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1); 58330 } 58331 function moveInputBeforePreviousToken() { 58332 setInputOffsetFromEnd(prevInputOffsetFromEnd => { 58333 return Math.min(prevInputOffsetFromEnd + 1, value.length); 58334 }); 58335 } 58336 function moveInputAfterNextToken() { 58337 setInputOffsetFromEnd(prevInputOffsetFromEnd => { 58338 return Math.max(prevInputOffsetFromEnd - 1, 0); 58339 }); 58340 } 58341 function deleteTokenBeforeInput() { 58342 const index = getIndexOfInput() - 1; 58343 if (index > -1) { 58344 deleteToken(value[index]); 58345 } 58346 } 58347 function deleteTokenAfterInput() { 58348 const index = getIndexOfInput(); 58349 if (index < value.length) { 58350 deleteToken(value[index]); 58351 // Update input offset since it's the offset from the last token. 58352 moveInputToIndex(index); 58353 } 58354 } 58355 function addCurrentToken() { 58356 let preventDefault = false; 58357 const selectedSuggestion = getSelectedSuggestion(); 58358 if (selectedSuggestion) { 58359 addNewToken(selectedSuggestion); 58360 preventDefault = true; 58361 } else if (inputHasValidValue()) { 58362 addNewToken(incompleteTokenValue); 58363 preventDefault = true; 58364 } 58365 return preventDefault; 58366 } 58367 function addNewTokens(tokens) { 58368 const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))]; 58369 if (tokensToAdd.length > 0) { 58370 const newValue = [...value]; 58371 newValue.splice(getIndexOfInput(), 0, ...tokensToAdd); 58372 onChange(newValue); 58373 } 58374 } 58375 function addNewToken(token) { 58376 if (!__experimentalValidateInput(token)) { 58377 (0,external_wp_a11y_namespaceObject.speak)(messages.__experimentalInvalid, 'assertive'); 58378 return; 58379 } 58380 addNewTokens([token]); 58381 (0,external_wp_a11y_namespaceObject.speak)(messages.added, 'assertive'); 58382 setIncompleteTokenValue(''); 58383 setSelectedSuggestionIndex(-1); 58384 setSelectedSuggestionScroll(false); 58385 setIsExpanded(!__experimentalExpandOnFocus); 58386 if (isActive && !tokenizeOnBlur) { 58387 focus(); 58388 } 58389 } 58390 function deleteToken(token) { 58391 const newTokens = value.filter(item => { 58392 return getTokenValue(item) !== getTokenValue(token); 58393 }); 58394 onChange(newTokens); 58395 (0,external_wp_a11y_namespaceObject.speak)(messages.removed, 'assertive'); 58396 } 58397 function getTokenValue(token) { 58398 if ('object' === typeof token) { 58399 return token.value; 58400 } 58401 return token; 58402 } 58403 function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) { 58404 let match = _saveTransform(searchValue); 58405 const startsWithMatch = []; 58406 const containsMatch = []; 58407 const normalizedValue = _value.map(item => { 58408 if (typeof item === 'string') { 58409 return item; 58410 } 58411 return item.value; 58412 }); 58413 if (match.length === 0) { 58414 _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion)); 58415 } else { 58416 match = match.toLocaleLowerCase(); 58417 _suggestions.forEach(suggestion => { 58418 const index = suggestion.toLocaleLowerCase().indexOf(match); 58419 if (normalizedValue.indexOf(suggestion) === -1) { 58420 if (index === 0) { 58421 startsWithMatch.push(suggestion); 58422 } else if (index > 0) { 58423 containsMatch.push(suggestion); 58424 } 58425 } 58426 }); 58427 _suggestions = startsWithMatch.concat(containsMatch); 58428 } 58429 return _suggestions.slice(0, _maxSuggestions); 58430 } 58431 function getSelectedSuggestion() { 58432 if (selectedSuggestionIndex !== -1) { 58433 return getMatchingSuggestions()[selectedSuggestionIndex]; 58434 } 58435 return undefined; 58436 } 58437 function valueContainsToken(token) { 58438 return value.some(item => { 58439 return getTokenValue(token) === getTokenValue(item); 58440 }); 58441 } 58442 function getIndexOfInput() { 58443 return value.length - inputOffsetFromEnd; 58444 } 58445 function isInputEmpty() { 58446 return incompleteTokenValue.length === 0; 58447 } 58448 function inputHasValidValue() { 58449 return saveTransform(incompleteTokenValue).length > 0; 58450 } 58451 function updateSuggestions(resetSelectedSuggestion = true) { 58452 const inputHasMinimumChars = incompleteTokenValue.trim().length > 1; 58453 const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue); 58454 const hasMatchingSuggestions = matchingSuggestions.length > 0; 58455 const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus; 58456 setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions); 58457 if (resetSelectedSuggestion) { 58458 if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) { 58459 setSelectedSuggestionIndex(0); 58460 setSelectedSuggestionScroll(true); 58461 } else { 58462 setSelectedSuggestionIndex(-1); 58463 setSelectedSuggestionScroll(false); 58464 } 58465 } 58466 if (inputHasMinimumChars) { 58467 const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */ 58468 (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.'); 58469 debouncedSpeak(message, 'assertive'); 58470 } 58471 } 58472 function renderTokensAndInput() { 58473 const components = value.map(renderToken); 58474 components.splice(getIndexOfInput(), 0, renderInput()); 58475 return components; 58476 } 58477 function renderToken(token, index, tokens) { 58478 const _value = getTokenValue(token); 58479 const status = typeof token !== 'string' ? token.status : undefined; 58480 const termPosition = index + 1; 58481 const termsCount = tokens.length; 58482 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { 58483 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Token, { 58484 value: _value, 58485 status: status, 58486 title: typeof token !== 'string' ? token.title : undefined, 58487 displayTransform: displayTransform, 58488 onClickRemove: onTokenClickRemove, 58489 isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless, 58490 onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined, 58491 onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined, 58492 disabled: 'error' !== status && disabled, 58493 messages: messages, 58494 termsCount: termsCount, 58495 termPosition: termPosition 58496 }) 58497 }, 'token-' + _value); 58498 } 58499 function renderInput() { 58500 const inputProps = { 58501 instanceId, 58502 autoCapitalize, 58503 autoComplete, 58504 placeholder: value.length === 0 ? placeholder : '', 58505 disabled, 58506 value: incompleteTokenValue, 58507 onBlur, 58508 isExpanded, 58509 selectedSuggestionIndex 58510 }; 58511 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(token_input, { 58512 ...inputProps, 58513 onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined, 58514 ref: input 58515 }, "input"); 58516 } 58517 const classes = dist_clsx(className, 'components-form-token-field__input-container', { 58518 'is-active': isActive, 58519 'is-disabled': disabled 58520 }); 58521 let tokenFieldProps = { 58522 className: 'components-form-token-field', 58523 tabIndex: -1 58524 }; 58525 const matchingSuggestions = getMatchingSuggestions(); 58526 if (!disabled) { 58527 tokenFieldProps = Object.assign({}, tokenFieldProps, { 58528 onKeyDown: withIgnoreIMEEvents(onKeyDown), 58529 onKeyPress, 58530 onFocus: onFocusHandler 58531 }); 58532 } 58533 58534 // Disable reason: There is no appropriate role which describes the 58535 // input container intended accessible usability. 58536 // TODO: Refactor click detection to use blur to stop propagation. 58537 /* eslint-disable jsx-a11y/no-static-element-interactions */ 58538 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58539 ...tokenFieldProps, 58540 children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { 58541 htmlFor: `components-form-token-input-$instanceId}`, 58542 className: "components-form-token-field__label", 58543 children: label 58544 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58545 ref: tokensAndInput, 58546 className: classes, 58547 tabIndex: -1, 58548 onMouseDown: onContainerTouched, 58549 onTouchStart: onContainerTouched, 58550 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TokensAndInputWrapperFlex, { 58551 justify: "flex-start", 58552 align: "center", 58553 gap: 1, 58554 wrap: true, 58555 __next40pxDefaultSize: __next40pxDefaultSize, 58556 hasTokens: !!value.length, 58557 children: renderTokensAndInput() 58558 }), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, { 58559 instanceId: instanceId, 58560 match: saveTransform(incompleteTokenValue), 58561 displayTransform: displayTransform, 58562 suggestions: matchingSuggestions, 58563 selectedIndex: selectedSuggestionIndex, 58564 scrollIntoView: selectedSuggestionScroll, 58565 onHover: onSuggestionHovered, 58566 onSelect: onSuggestionSelected, 58567 __experimentalRenderItem: __experimentalRenderItem 58568 })] 58569 }), !__nextHasNoMarginBottom && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { 58570 marginBottom: 2 58571 }), __experimentalShowHowTo && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, { 58572 id: `components-form-token-suggestions-howto-$instanceId}`, 58573 className: "components-form-token-field__help", 58574 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 58575 children: tokenizeOnSpace ? (0,external_wp_i18n_namespaceObject.__)('Separate with commas, spaces, or the Enter key.') : (0,external_wp_i18n_namespaceObject.__)('Separate with commas or the Enter key.') 58576 })] 58577 }); 58578 /* eslint-enable jsx-a11y/no-static-element-interactions */ 58579 } 58580 /* harmony default export */ const form_token_field = (FormTokenField); 58581 58582 ;// ./node_modules/@wordpress/components/build-module/guide/icons.js 58583 /** 58584 * WordPress dependencies 58585 */ 58586 58587 58588 const PageControlIcon = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 58589 width: "8", 58590 height: "8", 58591 fill: "none", 58592 xmlns: "http://www.w3.org/2000/svg", 58593 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Circle, { 58594 cx: "4", 58595 cy: "4", 58596 r: "4" 58597 }) 58598 }); 58599 58600 ;// ./node_modules/@wordpress/components/build-module/guide/page-control.js 58601 /** 58602 * WordPress dependencies 58603 */ 58604 58605 58606 /** 58607 * Internal dependencies 58608 */ 58609 58610 58611 58612 function PageControl({ 58613 currentPage, 58614 numberOfPages, 58615 setCurrentPage 58616 }) { 58617 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", { 58618 className: "components-guide__page-control", 58619 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls'), 58620 children: Array.from({ 58621 length: numberOfPages 58622 }).map((_, page) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", { 58623 // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current 58624 "aria-current": page === currentPage ? 'step' : undefined, 58625 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 58626 size: "small", 58627 icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PageControlIcon, {}), 58628 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: 1: current page number 2: total number of pages */ 58629 (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages), 58630 onClick: () => setCurrentPage(page) 58631 }, page) 58632 }, page)) 58633 }); 58634 } 58635 58636 ;// ./node_modules/@wordpress/components/build-module/guide/index.js 58637 /** 58638 * External dependencies 58639 */ 58640 58641 58642 /** 58643 * WordPress dependencies 58644 */ 58645 58646 58647 58648 58649 /** 58650 * Internal dependencies 58651 */ 58652 58653 58654 58655 58656 /** 58657 * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide. 58658 * 58659 * ```jsx 58660 * function MyTutorial() { 58661 * const [ isOpen, setIsOpen ] = useState( true ); 58662 * 58663 * if ( ! isOpen ) { 58664 * return null; 58665 * } 58666 * 58667 * return ( 58668 * <Guide 58669 * onFinish={ () => setIsOpen( false ) } 58670 * pages={ [ 58671 * { 58672 * content: <p>Welcome to the ACME Store!</p>, 58673 * }, 58674 * { 58675 * image: <img src="https://acmestore.com/add-to-cart.png" />, 58676 * content: ( 58677 * <p> 58678 * Click <i>Add to Cart</i> to buy a product. 58679 * </p> 58680 * ), 58681 * }, 58682 * ] } 58683 * /> 58684 * ); 58685 * } 58686 * ``` 58687 */ 58688 function Guide({ 58689 children, 58690 className, 58691 contentLabel, 58692 finishButtonText = (0,external_wp_i18n_namespaceObject.__)('Finish'), 58693 onFinish, 58694 pages = [] 58695 }) { 58696 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 58697 const [currentPage, setCurrentPage] = (0,external_wp_element_namespaceObject.useState)(0); 58698 (0,external_wp_element_namespaceObject.useEffect)(() => { 58699 // Place focus at the top of the guide on mount and when the page changes. 58700 const frame = ref.current?.querySelector('.components-guide'); 58701 if (frame instanceof HTMLElement) { 58702 frame.focus(); 58703 } 58704 }, [currentPage]); 58705 (0,external_wp_element_namespaceObject.useEffect)(() => { 58706 if (external_wp_element_namespaceObject.Children.count(children)) { 58707 external_wp_deprecated_default()('Passing children to <Guide>', { 58708 since: '5.5', 58709 alternative: 'the `pages` prop' 58710 }); 58711 } 58712 }, [children]); 58713 if (external_wp_element_namespaceObject.Children.count(children)) { 58714 var _Children$map; 58715 pages = (_Children$map = external_wp_element_namespaceObject.Children.map(children, child => ({ 58716 content: child 58717 }))) !== null && _Children$map !== void 0 ? _Children$map : []; 58718 } 58719 const canGoBack = currentPage > 0; 58720 const canGoForward = currentPage < pages.length - 1; 58721 const goBack = () => { 58722 if (canGoBack) { 58723 setCurrentPage(currentPage - 1); 58724 } 58725 }; 58726 const goForward = () => { 58727 if (canGoForward) { 58728 setCurrentPage(currentPage + 1); 58729 } 58730 }; 58731 if (pages.length === 0) { 58732 return null; 58733 } 58734 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(modal, { 58735 className: dist_clsx('components-guide', className), 58736 contentLabel: contentLabel, 58737 isDismissible: pages.length > 1, 58738 onRequestClose: onFinish, 58739 onKeyDown: event => { 58740 if (event.code === 'ArrowLeft') { 58741 goBack(); 58742 // Do not scroll the modal's contents. 58743 event.preventDefault(); 58744 } else if (event.code === 'ArrowRight') { 58745 goForward(); 58746 // Do not scroll the modal's contents. 58747 event.preventDefault(); 58748 } 58749 }, 58750 ref: ref, 58751 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58752 className: "components-guide__container", 58753 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58754 className: "components-guide__page", 58755 children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PageControl, { 58756 currentPage: currentPage, 58757 numberOfPages: pages.length, 58758 setCurrentPage: setCurrentPage 58759 }), pages[currentPage].content] 58760 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58761 className: "components-guide__footer", 58762 children: [canGoBack && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 58763 className: "components-guide__back-button", 58764 variant: "tertiary", 58765 onClick: goBack, 58766 __next40pxDefaultSize: true, 58767 children: (0,external_wp_i18n_namespaceObject.__)('Previous') 58768 }), canGoForward && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 58769 className: "components-guide__forward-button", 58770 variant: "primary", 58771 onClick: goForward, 58772 __next40pxDefaultSize: true, 58773 children: (0,external_wp_i18n_namespaceObject.__)('Next') 58774 }), !canGoForward && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 58775 className: "components-guide__finish-button", 58776 variant: "primary", 58777 onClick: onFinish, 58778 __next40pxDefaultSize: true, 58779 children: finishButtonText 58780 })] 58781 })] 58782 }) 58783 }); 58784 } 58785 /* harmony default export */ const guide = (Guide); 58786 58787 ;// ./node_modules/@wordpress/components/build-module/guide/page.js 58788 /** 58789 * WordPress dependencies 58790 */ 58791 58792 58793 58794 /** 58795 * Internal dependencies 58796 */ 58797 58798 function GuidePage(props) { 58799 (0,external_wp_element_namespaceObject.useEffect)(() => { 58800 external_wp_deprecated_default()('<GuidePage>', { 58801 since: '5.5', 58802 alternative: 'the `pages` prop in <Guide>' 58803 }); 58804 }, []); 58805 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 58806 ...props 58807 }); 58808 } 58809 58810 ;// ./node_modules/@wordpress/components/build-module/button/deprecated.js 58811 /** 58812 * External dependencies 58813 */ 58814 58815 /** 58816 * WordPress dependencies 58817 */ 58818 58819 58820 58821 /** 58822 * Internal dependencies 58823 */ 58824 58825 58826 function UnforwardedIconButton({ 58827 label, 58828 labelPosition, 58829 size, 58830 tooltip, 58831 ...props 58832 }, ref) { 58833 external_wp_deprecated_default()('wp.components.IconButton', { 58834 since: '5.4', 58835 alternative: 'wp.components.Button', 58836 version: '6.2' 58837 }); 58838 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 58839 ...props, 58840 ref: ref, 58841 tooltipPosition: labelPosition, 58842 iconSize: size, 58843 showTooltip: tooltip !== undefined ? !!tooltip : undefined, 58844 label: tooltip || label 58845 }); 58846 } 58847 /* harmony default export */ const deprecated = ((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedIconButton)); 58848 58849 ;// ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js 58850 /** 58851 * WordPress dependencies 58852 */ 58853 58854 58855 58856 /** 58857 * Internal dependencies 58858 */ 58859 58860 function KeyboardShortcut({ 58861 target, 58862 callback, 58863 shortcut, 58864 bindGlobal, 58865 eventName 58866 }) { 58867 (0,external_wp_compose_namespaceObject.useKeyboardShortcut)(shortcut, callback, { 58868 bindGlobal, 58869 target, 58870 eventName 58871 }); 58872 return null; 58873 } 58874 58875 /** 58876 * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element. 58877 * 58878 * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document. 58879 * 58880 * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings. 58881 * 58882 * ```jsx 58883 * import { KeyboardShortcuts } from '@wordpress/components'; 58884 * import { useState } from '@wordpress/element'; 58885 * 58886 * const MyKeyboardShortcuts = () => { 58887 * const [ isAllSelected, setIsAllSelected ] = useState( false ); 58888 * const selectAll = () => { 58889 * setIsAllSelected( true ); 58890 * }; 58891 * 58892 * return ( 58893 * <div> 58894 * <KeyboardShortcuts 58895 * shortcuts={ { 58896 * 'mod+a': selectAll, 58897 * } } 58898 * /> 58899 * [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' } 58900 * </div> 58901 * ); 58902 * }; 58903 * ``` 58904 */ 58905 function KeyboardShortcuts({ 58906 children, 58907 shortcuts, 58908 bindGlobal, 58909 eventName 58910 }) { 58911 const target = (0,external_wp_element_namespaceObject.useRef)(null); 58912 const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(KeyboardShortcut, { 58913 shortcut: shortcut, 58914 callback: callback, 58915 bindGlobal: bindGlobal, 58916 eventName: eventName, 58917 target: target 58918 }, shortcut)); 58919 58920 // Render as non-visual if there are no children pressed. Keyboard 58921 // events will be bound to the document instead. 58922 if (!external_wp_element_namespaceObject.Children.count(children)) { 58923 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 58924 children: element 58925 }); 58926 } 58927 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58928 ref: target, 58929 children: [element, children] 58930 }); 58931 } 58932 /* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts); 58933 58934 ;// ./node_modules/@wordpress/components/build-module/menu-group/index.js 58935 /** 58936 * External dependencies 58937 */ 58938 58939 58940 /** 58941 * WordPress dependencies 58942 */ 58943 58944 58945 58946 /** 58947 * Internal dependencies 58948 */ 58949 58950 /** 58951 * `MenuGroup` wraps a series of related `MenuItem` components into a common 58952 * section. 58953 * 58954 * ```jsx 58955 * import { MenuGroup, MenuItem } from '@wordpress/components'; 58956 * 58957 * const MyMenuGroup = () => ( 58958 * <MenuGroup label="Settings"> 58959 * <MenuItem>Setting 1</MenuItem> 58960 * <MenuItem>Setting 2</MenuItem> 58961 * </MenuGroup> 58962 * ); 58963 * ``` 58964 */ 58965 function MenuGroup(props) { 58966 const { 58967 children, 58968 className = '', 58969 label, 58970 hideSeparator 58971 } = props; 58972 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MenuGroup); 58973 if (!external_wp_element_namespaceObject.Children.count(children)) { 58974 return null; 58975 } 58976 const labelId = `components-menu-group-label-$instanceId}`; 58977 const classNames = dist_clsx(className, 'components-menu-group', { 58978 'has-hidden-separator': hideSeparator 58979 }); 58980 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 58981 className: classNames, 58982 children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 58983 className: "components-menu-group__label", 58984 id: labelId, 58985 "aria-hidden": "true", 58986 children: label 58987 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 58988 role: "group", 58989 "aria-labelledby": label ? labelId : undefined, 58990 children: children 58991 })] 58992 }); 58993 } 58994 /* harmony default export */ const menu_group = (MenuGroup); 58995 58996 ;// ./node_modules/@wordpress/components/build-module/menu-item/index.js 58997 /** 58998 * External dependencies 58999 */ 59000 59001 59002 59003 /** 59004 * WordPress dependencies 59005 */ 59006 59007 59008 /** 59009 * Internal dependencies 59010 */ 59011 59012 59013 59014 59015 function UnforwardedMenuItem(props, ref) { 59016 let { 59017 children, 59018 info, 59019 className, 59020 icon, 59021 iconPosition = 'right', 59022 shortcut, 59023 isSelected, 59024 role = 'menuitem', 59025 suffix, 59026 ...buttonProps 59027 } = props; 59028 className = dist_clsx('components-menu-item__button', className); 59029 if (info) { 59030 children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 59031 className: "components-menu-item__info-wrapper", 59032 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 59033 className: "components-menu-item__item", 59034 children: children 59035 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 59036 className: "components-menu-item__info", 59037 children: info 59038 })] 59039 }); 59040 } 59041 if (icon && typeof icon !== 'string') { 59042 icon = (0,external_wp_element_namespaceObject.cloneElement)(icon, { 59043 className: dist_clsx('components-menu-items__item-icon', { 59044 'has-icon-right': iconPosition === 'right' 59045 }) 59046 }); 59047 } 59048 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(build_module_button, { 59049 __next40pxDefaultSize: true, 59050 ref: ref 59051 // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked 59052 , 59053 "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined, 59054 role: role, 59055 icon: iconPosition === 'left' ? icon : undefined, 59056 className: className, 59057 ...buttonProps, 59058 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 59059 className: "components-menu-item__item", 59060 children: children 59061 }), !suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_shortcut, { 59062 className: "components-menu-item__shortcut", 59063 shortcut: shortcut 59064 }), !suffix && icon && iconPosition === 'right' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 59065 icon: icon 59066 }), suffix] 59067 }); 59068 } 59069 59070 /** 59071 * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component. 59072 * 59073 * ```jsx 59074 * import { MenuItem } from '@wordpress/components'; 59075 * import { useState } from '@wordpress/element'; 59076 * 59077 * const MyMenuItem = () => { 59078 * const [ isActive, setIsActive ] = useState( true ); 59079 * 59080 * return ( 59081 * <MenuItem 59082 * icon={ isActive ? 'yes' : 'no' } 59083 * isSelected={ isActive } 59084 * role="menuitemcheckbox" 59085 * onClick={ () => setIsActive( ( state ) => ! state ) } 59086 * > 59087 * Toggle 59088 * </MenuItem> 59089 * ); 59090 * }; 59091 * ``` 59092 */ 59093 const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedMenuItem); 59094 /* harmony default export */ const menu_item = (MenuItem); 59095 59096 ;// ./node_modules/@wordpress/components/build-module/menu-items-choice/index.js 59097 /** 59098 * WordPress dependencies 59099 */ 59100 59101 59102 /** 59103 * Internal dependencies 59104 */ 59105 59106 59107 const menu_items_choice_noop = () => {}; 59108 59109 /** 59110 * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices. 59111 * 59112 * 59113 * ```jsx 59114 * import { MenuGroup, MenuItemsChoice } from '@wordpress/components'; 59115 * import { useState } from '@wordpress/element'; 59116 * 59117 * const MyMenuItemsChoice = () => { 59118 * const [ mode, setMode ] = useState( 'visual' ); 59119 * const choices = [ 59120 * { 59121 * value: 'visual', 59122 * label: 'Visual editor', 59123 * }, 59124 * { 59125 * value: 'text', 59126 * label: 'Code editor', 59127 * }, 59128 * ]; 59129 * 59130 * return ( 59131 * <MenuGroup label="Editor"> 59132 * <MenuItemsChoice 59133 * choices={ choices } 59134 * value={ mode } 59135 * onSelect={ ( newMode ) => setMode( newMode ) } 59136 * /> 59137 * </MenuGroup> 59138 * ); 59139 * }; 59140 * ``` 59141 */ 59142 function MenuItemsChoice({ 59143 choices = [], 59144 onHover = menu_items_choice_noop, 59145 onSelect, 59146 value 59147 }) { 59148 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 59149 children: choices.map(item => { 59150 const isSelected = value === item.value; 59151 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { 59152 role: "menuitemradio", 59153 disabled: item.disabled, 59154 icon: isSelected ? library_check : null, 59155 info: item.info, 59156 isSelected: isSelected, 59157 shortcut: item.shortcut, 59158 className: "components-menu-items-choice", 59159 onClick: () => { 59160 if (!isSelected) { 59161 onSelect(item.value); 59162 } 59163 }, 59164 onMouseEnter: () => onHover(item.value), 59165 onMouseLeave: () => onHover(null), 59166 "aria-label": item['aria-label'], 59167 children: item.label 59168 }, item.value); 59169 }) 59170 }); 59171 } 59172 /* harmony default export */ const menu_items_choice = (MenuItemsChoice); 59173 59174 ;// ./node_modules/@wordpress/components/build-module/navigable-container/tabbable.js 59175 /** 59176 * External dependencies 59177 */ 59178 59179 /** 59180 * WordPress dependencies 59181 */ 59182 59183 59184 /** 59185 * Internal dependencies 59186 */ 59187 59188 59189 function UnforwardedTabbableContainer({ 59190 eventToOffset, 59191 ...props 59192 }, ref) { 59193 const innerEventToOffset = evt => { 59194 const { 59195 code, 59196 shiftKey 59197 } = evt; 59198 if ('Tab' === code) { 59199 return shiftKey ? -1 : 1; 59200 } 59201 59202 // Allow custom handling of keys besides Tab. 59203 // 59204 // By default, TabbableContainer will move focus forward on Tab and 59205 // backward on Shift+Tab. The handler below will be used for all other 59206 // events. The semantics for `eventToOffset`'s return 59207 // values are the following: 59208 // 59209 // - +1: move focus forward 59210 // - -1: move focus backward 59211 // - 0: don't move focus, but acknowledge event and thus stop it 59212 // - undefined: do nothing, let the event propagate. 59213 if (eventToOffset) { 59214 return eventToOffset(evt); 59215 } 59216 return undefined; 59217 }; 59218 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(container, { 59219 ref: ref, 59220 stopNavigationEvents: true, 59221 onlyBrowserTabstops: true, 59222 eventToOffset: innerEventToOffset, 59223 ...props 59224 }); 59225 } 59226 59227 /** 59228 * A container for tabbable elements. 59229 * 59230 * ```jsx 59231 * import { 59232 * TabbableContainer, 59233 * Button, 59234 * } from '@wordpress/components'; 59235 * 59236 * function onNavigate( index, target ) { 59237 * console.log( `Navigates to ${ index }`, target ); 59238 * } 59239 * 59240 * const MyTabbableContainer = () => ( 59241 * <div> 59242 * <span>Tabbable Container:</span> 59243 * <TabbableContainer onNavigate={ onNavigate }> 59244 * <Button variant="secondary" tabIndex="0"> 59245 * Section 1 59246 * </Button> 59247 * <Button variant="secondary" tabIndex="0"> 59248 * Section 2 59249 * </Button> 59250 * <Button variant="secondary" tabIndex="0"> 59251 * Section 3 59252 * </Button> 59253 * <Button variant="secondary" tabIndex="0"> 59254 * Section 4 59255 * </Button> 59256 * </TabbableContainer> 59257 * </div> 59258 * ); 59259 * ``` 59260 */ 59261 const TabbableContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabbableContainer); 59262 /* harmony default export */ const tabbable = (TabbableContainer); 59263 59264 ;// ./node_modules/@wordpress/components/build-module/navigation/constants.js 59265 const ROOT_MENU = 'root'; 59266 const SEARCH_FOCUS_DELAY = 100; 59267 59268 ;// ./node_modules/@wordpress/components/build-module/navigation/context.js 59269 /** 59270 * WordPress dependencies 59271 */ 59272 59273 59274 /** 59275 * Internal dependencies 59276 */ 59277 59278 const context_noop = () => {}; 59279 const defaultIsEmpty = () => false; 59280 const defaultGetter = () => undefined; 59281 const NavigationContext = (0,external_wp_element_namespaceObject.createContext)({ 59282 activeItem: undefined, 59283 activeMenu: ROOT_MENU, 59284 setActiveMenu: context_noop, 59285 navigationTree: { 59286 items: {}, 59287 getItem: defaultGetter, 59288 addItem: context_noop, 59289 removeItem: context_noop, 59290 menus: {}, 59291 getMenu: defaultGetter, 59292 addMenu: context_noop, 59293 removeMenu: context_noop, 59294 childMenu: {}, 59295 traverseMenu: context_noop, 59296 isMenuEmpty: defaultIsEmpty 59297 } 59298 }); 59299 const useNavigationContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationContext); 59300 59301 ;// ./node_modules/@wordpress/components/build-module/navigation/styles/navigation-styles.js 59302 59303 function navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 59304 /** 59305 * External dependencies 59306 */ 59307 59308 /** 59309 * WordPress dependencies 59310 */ 59311 59312 59313 /** 59314 * Internal dependencies 59315 */ 59316 59317 59318 59319 59320 59321 59322 const NavigationUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 59323 target: "eeiismy11" 59324 } : 0)("width:100%;box-sizing:border-box;padding:0 ", space(4), ";overflow:hidden;" + ( true ? "" : 0)); 59325 const MenuUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 59326 target: "eeiismy10" 59327 } : 0)("margin-top:", space(6), ";margin-bottom:", space(6), ";display:flex;flex-direction:column;ul{padding:0;margin:0;list-style:none;}.components-navigation__back-button{margin-bottom:", space(6), ";}.components-navigation__group+.components-navigation__group{margin-top:", space(6), ";}" + ( true ? "" : 0)); 59328 const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 59329 target: "eeiismy9" 59330 } : 0)( true ? { 59331 name: "26l0q2", 59332 styles: "&.is-tertiary{color:inherit;opacity:0.7;&:hover:not( :disabled ){opacity:1;box-shadow:none;color:inherit;}&:active:not( :disabled ){background:transparent;opacity:1;color:inherit;}}" 59333 } : 0); 59334 const MenuTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 59335 target: "eeiismy8" 59336 } : 0)( true ? { 59337 name: "1aubja5", 59338 styles: "overflow:hidden;width:100%" 59339 } : 0); 59340 const MenuTitleSearchControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 59341 target: "eeiismy7" 59342 } : 0)( true ? { 59343 name: "rgorny", 59344 styles: "margin:11px 0;padding:1px" 59345 } : 0); 59346 const MenuTitleActionsUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 59347 target: "eeiismy6" 59348 } : 0)("height:", space(6), ";.components-button.is-small{color:inherit;opacity:0.7;margin-right:", space(1), ";padding:0;&:active:not( :disabled ){background:none;opacity:1;color:inherit;}&:hover:not( :disabled ){box-shadow:none;opacity:1;color:inherit;}}" + ( true ? "" : 0)); 59349 const GroupTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 59350 target: "eeiismy5" 59351 } : 0)("min-height:", space(12), ";align-items:center;color:inherit;display:flex;justify-content:space-between;margin-bottom:", space(2), ";padding:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? `$space(1)} $space(4)} $space(1)} $space(2)}` : `$space(1)} $space(2)} $space(1)} $space(4)}`, ";" + ( true ? "" : 0)); 59352 const ItemBaseUI = /*#__PURE__*/emotion_styled_base_browser_esm("li", true ? { 59353 target: "eeiismy4" 59354 } : 0)("border-radius:", config_values.radiusSmall, ";color:inherit;margin-bottom:0;>button,>a.components-button,>a{width:100%;color:inherit;opacity:0.7;padding:", space(2), " ", space(4), ";", rtl({ 59355 textAlign: 'left' 59356 }, { 59357 textAlign: 'right' 59358 }), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", COLORS.theme.accent, ";color:", COLORS.theme.accentInverted, ";>button,.components-button:hover,>a{color:", COLORS.theme.accentInverted, ";opacity:1;}}>svg path{color:", COLORS.gray[600], ";}" + ( true ? "" : 0)); 59359 const ItemUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 59360 target: "eeiismy3" 59361 } : 0)("display:flex;align-items:center;height:auto;min-height:40px;margin:0;padding:", space(1.5), " ", space(4), ";font-weight:400;line-height:20px;width:100%;color:inherit;opacity:0.7;" + ( true ? "" : 0)); 59362 const ItemIconUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 59363 target: "eeiismy2" 59364 } : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0)); 59365 const ItemBadgeUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 59366 target: "eeiismy1" 59367 } : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:", config_values.radiusSmall, ";@keyframes fade-in{from{opacity:0;}to{opacity:1;}}@media not ( prefers-reduced-motion ){animation:fade-in 250ms ease-out;}" + ( true ? "" : 0)); 59368 const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 59369 target: "eeiismy0" 59370 } : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0)); 59371 59372 ;// ./node_modules/@wordpress/components/build-module/navigation/use-navigation-tree-nodes.js 59373 /** 59374 * WordPress dependencies 59375 */ 59376 59377 function useNavigationTreeNodes() { 59378 const [nodes, setNodes] = (0,external_wp_element_namespaceObject.useState)({}); 59379 const getNode = key => nodes[key]; 59380 const addNode = (key, value) => { 59381 const { 59382 children, 59383 ...newNode 59384 } = value; 59385 return setNodes(original => ({ 59386 ...original, 59387 [key]: newNode 59388 })); 59389 }; 59390 const removeNode = key => { 59391 return setNodes(original => { 59392 const { 59393 [key]: removedNode, 59394 ...remainingNodes 59395 } = original; 59396 return remainingNodes; 59397 }); 59398 }; 59399 return { 59400 nodes, 59401 getNode, 59402 addNode, 59403 removeNode 59404 }; 59405 } 59406 59407 ;// ./node_modules/@wordpress/components/build-module/navigation/use-create-navigation-tree.js 59408 /** 59409 * WordPress dependencies 59410 */ 59411 59412 59413 /** 59414 * Internal dependencies 59415 */ 59416 59417 const useCreateNavigationTree = () => { 59418 const { 59419 nodes: items, 59420 getNode: getItem, 59421 addNode: addItem, 59422 removeNode: removeItem 59423 } = useNavigationTreeNodes(); 59424 const { 59425 nodes: menus, 59426 getNode: getMenu, 59427 addNode: addMenu, 59428 removeNode: removeMenu 59429 } = useNavigationTreeNodes(); 59430 59431 /** 59432 * Stores direct nested menus of menus 59433 * This makes it easy to traverse menu tree 59434 * 59435 * Key is the menu prop of the menu 59436 * Value is an array of menu keys 59437 */ 59438 const [childMenu, setChildMenu] = (0,external_wp_element_namespaceObject.useState)({}); 59439 const getChildMenu = menu => childMenu[menu] || []; 59440 const traverseMenu = (startMenu, callback) => { 59441 const visited = []; 59442 let queue = [startMenu]; 59443 let current; 59444 while (queue.length > 0) { 59445 // Type cast to string is safe because of the `length > 0` check above. 59446 current = getMenu(queue.shift()); 59447 if (!current || visited.includes(current.menu)) { 59448 continue; 59449 } 59450 visited.push(current.menu); 59451 queue = [...queue, ...getChildMenu(current.menu)]; 59452 if (callback(current) === false) { 59453 break; 59454 } 59455 } 59456 }; 59457 const isMenuEmpty = menuToCheck => { 59458 let isEmpty = true; 59459 traverseMenu(menuToCheck, current => { 59460 if (!current.isEmpty) { 59461 isEmpty = false; 59462 return false; 59463 } 59464 return undefined; 59465 }); 59466 return isEmpty; 59467 }; 59468 return { 59469 items, 59470 getItem, 59471 addItem, 59472 removeItem, 59473 menus, 59474 getMenu, 59475 addMenu: (key, value) => { 59476 setChildMenu(state => { 59477 const newState = { 59478 ...state 59479 }; 59480 if (!value.parentMenu) { 59481 return newState; 59482 } 59483 if (!newState[value.parentMenu]) { 59484 newState[value.parentMenu] = []; 59485 } 59486 newState[value.parentMenu].push(key); 59487 return newState; 59488 }); 59489 addMenu(key, value); 59490 }, 59491 removeMenu, 59492 childMenu, 59493 traverseMenu, 59494 isMenuEmpty 59495 }; 59496 }; 59497 59498 ;// ./node_modules/@wordpress/components/build-module/navigation/index.js 59499 /** 59500 * External dependencies 59501 */ 59502 59503 59504 /** 59505 * WordPress dependencies 59506 */ 59507 59508 59509 59510 59511 /** 59512 * Internal dependencies 59513 */ 59514 59515 59516 59517 59518 59519 59520 const navigation_noop = () => {}; 59521 59522 /** 59523 * Render a navigation list with optional groupings and hierarchy. 59524 * 59525 * @deprecated Use `Navigator` instead. 59526 * 59527 * ```jsx 59528 * import { 59529 * __experimentalNavigation as Navigation, 59530 * __experimentalNavigationGroup as NavigationGroup, 59531 * __experimentalNavigationItem as NavigationItem, 59532 * __experimentalNavigationMenu as NavigationMenu, 59533 * } from '@wordpress/components'; 59534 * 59535 * const MyNavigation = () => ( 59536 * <Navigation> 59537 * <NavigationMenu title="Home"> 59538 * <NavigationGroup title="Group 1"> 59539 * <NavigationItem item="item-1" title="Item 1" /> 59540 * <NavigationItem item="item-2" title="Item 2" /> 59541 * </NavigationGroup> 59542 * <NavigationGroup title="Group 2"> 59543 * <NavigationItem 59544 * item="item-3" 59545 * navigateToMenu="category" 59546 * title="Category" 59547 * /> 59548 * </NavigationGroup> 59549 * </NavigationMenu> 59550 * 59551 * <NavigationMenu 59552 * backButtonLabel="Home" 59553 * menu="category" 59554 * parentMenu="root" 59555 * title="Category" 59556 * > 59557 * <NavigationItem badge="1" item="child-1" title="Child 1" /> 59558 * <NavigationItem item="child-2" title="Child 2" /> 59559 * </NavigationMenu> 59560 * </Navigation> 59561 * ); 59562 * ``` 59563 */ 59564 function Navigation({ 59565 activeItem, 59566 activeMenu = ROOT_MENU, 59567 children, 59568 className, 59569 onActivateMenu = navigation_noop 59570 }) { 59571 const [menu, setMenu] = (0,external_wp_element_namespaceObject.useState)(activeMenu); 59572 const [slideOrigin, setSlideOrigin] = (0,external_wp_element_namespaceObject.useState)(); 59573 const navigationTree = useCreateNavigationTree(); 59574 const defaultSlideOrigin = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left'; 59575 external_wp_deprecated_default()('wp.components.Navigation (and all subcomponents)', { 59576 since: '6.8', 59577 version: '7.1', 59578 alternative: 'wp.components.Navigator' 59579 }); 59580 const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => { 59581 if (!navigationTree.getMenu(menuId)) { 59582 return; 59583 } 59584 setSlideOrigin(slideInOrigin); 59585 setMenu(menuId); 59586 onActivateMenu(menuId); 59587 }; 59588 59589 // Used to prevent the sliding animation on mount 59590 const isMountedRef = (0,external_wp_element_namespaceObject.useRef)(false); 59591 (0,external_wp_element_namespaceObject.useEffect)(() => { 59592 if (!isMountedRef.current) { 59593 isMountedRef.current = true; 59594 } 59595 }, []); 59596 (0,external_wp_element_namespaceObject.useEffect)(() => { 59597 if (activeMenu !== menu) { 59598 setActiveMenu(activeMenu); 59599 } 59600 // Not adding deps for now, as it would require either a larger refactor or some questionable workarounds. 59601 // See https://github.com/WordPress/gutenberg/pull/41612 for context. 59602 }, [activeMenu]); 59603 const context = { 59604 activeItem, 59605 activeMenu: menu, 59606 setActiveMenu, 59607 navigationTree 59608 }; 59609 const classes = dist_clsx('components-navigation', className); 59610 const animateClassName = getAnimateClassName({ 59611 type: 'slide-in', 59612 origin: slideOrigin 59613 }); 59614 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationUI, { 59615 className: classes, 59616 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 59617 className: animateClassName ? dist_clsx({ 59618 [animateClassName]: isMountedRef.current && slideOrigin 59619 }) : undefined, 59620 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationContext.Provider, { 59621 value: context, 59622 children: children 59623 }) 59624 }, menu) 59625 }); 59626 } 59627 /* harmony default export */ const navigation = (Navigation); 59628 59629 ;// ./node_modules/@wordpress/icons/build-module/library/chevron-right.js 59630 /** 59631 * WordPress dependencies 59632 */ 59633 59634 59635 const chevronRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 59636 xmlns: "http://www.w3.org/2000/svg", 59637 viewBox: "0 0 24 24", 59638 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 59639 d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" 59640 }) 59641 }); 59642 /* harmony default export */ const chevron_right = (chevronRight); 59643 59644 ;// ./node_modules/@wordpress/icons/build-module/library/chevron-left.js 59645 /** 59646 * WordPress dependencies 59647 */ 59648 59649 59650 const chevronLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 59651 xmlns: "http://www.w3.org/2000/svg", 59652 viewBox: "0 0 24 24", 59653 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 59654 d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" 59655 }) 59656 }); 59657 /* harmony default export */ const chevron_left = (chevronLeft); 59658 59659 ;// ./node_modules/@wordpress/components/build-module/navigation/back-button/index.js 59660 /** 59661 * External dependencies 59662 */ 59663 59664 /** 59665 * WordPress dependencies 59666 */ 59667 59668 59669 59670 59671 /** 59672 * Internal dependencies 59673 */ 59674 59675 59676 59677 function UnforwardedNavigationBackButton({ 59678 backButtonLabel, 59679 className, 59680 href, 59681 onClick, 59682 parentMenu 59683 }, ref) { 59684 const { 59685 setActiveMenu, 59686 navigationTree 59687 } = useNavigationContext(); 59688 const classes = dist_clsx('components-navigation__back-button', className); 59689 const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined; 59690 const handleOnClick = event => { 59691 if (typeof onClick === 'function') { 59692 onClick(event); 59693 } 59694 const animationDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'left' : 'right'; 59695 if (parentMenu && !event.defaultPrevented) { 59696 setActiveMenu(parentMenu, animationDirection); 59697 } 59698 }; 59699 const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left; 59700 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuBackButtonUI, { 59701 __next40pxDefaultSize: true, 59702 className: classes, 59703 href: href, 59704 variant: "tertiary", 59705 ref: ref, 59706 onClick: handleOnClick, 59707 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 59708 icon: icon 59709 }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back')] 59710 }); 59711 } 59712 59713 /** 59714 * @deprecated Use `Navigator` instead. 59715 */ 59716 const NavigationBackButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigationBackButton); 59717 /* harmony default export */ const back_button = (NavigationBackButton); 59718 59719 ;// ./node_modules/@wordpress/components/build-module/navigation/group/context.js 59720 /** 59721 * WordPress dependencies 59722 */ 59723 59724 59725 /** 59726 * Internal dependencies 59727 */ 59728 59729 const NavigationGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 59730 group: undefined 59731 }); 59732 const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext); 59733 59734 ;// ./node_modules/@wordpress/components/build-module/navigation/group/index.js 59735 /** 59736 * External dependencies 59737 */ 59738 59739 59740 /** 59741 * WordPress dependencies 59742 */ 59743 59744 59745 /** 59746 * Internal dependencies 59747 */ 59748 59749 59750 59751 59752 let uniqueId = 0; 59753 59754 /** 59755 * @deprecated Use `Navigator` instead. 59756 */ 59757 function NavigationGroup({ 59758 children, 59759 className, 59760 title 59761 }) { 59762 const [groupId] = (0,external_wp_element_namespaceObject.useState)(`group-${++uniqueId}`); 59763 const { 59764 navigationTree: { 59765 items 59766 } 59767 } = useNavigationContext(); 59768 const context = { 59769 group: groupId 59770 }; 59771 59772 // Keep the children rendered to make sure invisible items are included in the navigation tree. 59773 if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) { 59774 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationGroupContext.Provider, { 59775 value: context, 59776 children: children 59777 }); 59778 } 59779 const groupTitleId = `components-navigation__group-title-$groupId}`; 59780 const classes = dist_clsx('components-navigation__group', className); 59781 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationGroupContext.Provider, { 59782 value: context, 59783 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", { 59784 className: classes, 59785 children: [title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GroupTitleUI, { 59786 className: "components-navigation__group-title", 59787 id: groupTitleId, 59788 level: 3, 59789 children: title 59790 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", { 59791 "aria-labelledby": groupTitleId, 59792 role: "group", 59793 children: children 59794 })] 59795 }) 59796 }); 59797 } 59798 /* harmony default export */ const group = (NavigationGroup); 59799 59800 ;// ./node_modules/@wordpress/components/build-module/navigation/item/base-content.js 59801 /** 59802 * Internal dependencies 59803 */ 59804 59805 59806 function NavigationItemBaseContent(props) { 59807 const { 59808 badge, 59809 title 59810 } = props; 59811 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 59812 children: [title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemTitleUI, { 59813 className: "components-navigation__item-title", 59814 as: "span", 59815 children: title 59816 }), badge && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemBadgeUI, { 59817 className: "components-navigation__item-badge", 59818 children: badge 59819 })] 59820 }); 59821 } 59822 59823 ;// ./node_modules/@wordpress/components/build-module/navigation/menu/context.js 59824 /** 59825 * WordPress dependencies 59826 */ 59827 59828 59829 /** 59830 * Internal dependencies 59831 */ 59832 59833 const NavigationMenuContext = (0,external_wp_element_namespaceObject.createContext)({ 59834 menu: undefined, 59835 search: '' 59836 }); 59837 const useNavigationMenuContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationMenuContext); 59838 59839 ;// ./node_modules/@wordpress/components/build-module/navigation/utils.js 59840 /** 59841 * External dependencies 59842 */ 59843 59844 59845 // @see packages/block-editor/src/components/inserter/search-items.js 59846 const normalizeInput = input => remove_accents_default()(input).replace(/^\//, '').toLowerCase(); 59847 const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search)); 59848 59849 ;// ./node_modules/@wordpress/components/build-module/navigation/item/use-navigation-tree-item.js 59850 /** 59851 * WordPress dependencies 59852 */ 59853 59854 59855 /** 59856 * Internal dependencies 59857 */ 59858 59859 59860 59861 59862 const useNavigationTreeItem = (itemId, props) => { 59863 const { 59864 activeMenu, 59865 navigationTree: { 59866 addItem, 59867 removeItem 59868 } 59869 } = useNavigationContext(); 59870 const { 59871 group 59872 } = useNavigationGroupContext(); 59873 const { 59874 menu, 59875 search 59876 } = useNavigationMenuContext(); 59877 (0,external_wp_element_namespaceObject.useEffect)(() => { 59878 const isMenuActive = activeMenu === menu; 59879 const isItemVisible = !search || props.title !== undefined && normalizedSearch(props.title, search); 59880 addItem(itemId, { 59881 ...props, 59882 group, 59883 menu, 59884 _isVisible: isMenuActive && isItemVisible 59885 }); 59886 return () => { 59887 removeItem(itemId); 59888 }; 59889 // Not adding deps for now, as it would require either a larger refactor. 59890 // See https://github.com/WordPress/gutenberg/pull/41639 59891 }, [activeMenu, search]); 59892 }; 59893 59894 ;// ./node_modules/@wordpress/components/build-module/navigation/item/base.js 59895 /** 59896 * External dependencies 59897 */ 59898 59899 59900 /** 59901 * WordPress dependencies 59902 */ 59903 59904 59905 /** 59906 * Internal dependencies 59907 */ 59908 59909 59910 59911 59912 let base_uniqueId = 0; 59913 function NavigationItemBase(props) { 59914 // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component. 59915 const { 59916 children, 59917 className, 59918 title, 59919 href, 59920 ...restProps 59921 } = props; 59922 const [itemId] = (0,external_wp_element_namespaceObject.useState)(`item-${++base_uniqueId}`); 59923 useNavigationTreeItem(itemId, props); 59924 const { 59925 navigationTree 59926 } = useNavigationContext(); 59927 if (!navigationTree.getItem(itemId)?._isVisible) { 59928 return null; 59929 } 59930 const classes = dist_clsx('components-navigation__item', className); 59931 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemBaseUI, { 59932 className: classes, 59933 ...restProps, 59934 children: children 59935 }); 59936 } 59937 59938 ;// ./node_modules/@wordpress/components/build-module/navigation/item/index.js 59939 /** 59940 * External dependencies 59941 */ 59942 59943 59944 /** 59945 * WordPress dependencies 59946 */ 59947 59948 59949 59950 /** 59951 * Internal dependencies 59952 */ 59953 59954 59955 59956 59957 59958 59959 const item_noop = () => {}; 59960 59961 /** 59962 * @deprecated Use `Navigator` instead. 59963 */ 59964 function NavigationItem(props) { 59965 const { 59966 badge, 59967 children, 59968 className, 59969 href, 59970 item, 59971 navigateToMenu, 59972 onClick = item_noop, 59973 title, 59974 icon, 59975 hideIfTargetMenuEmpty, 59976 isText, 59977 ...restProps 59978 } = props; 59979 const { 59980 activeItem, 59981 setActiveMenu, 59982 navigationTree: { 59983 isMenuEmpty 59984 } 59985 } = useNavigationContext(); 59986 59987 // If hideIfTargetMenuEmpty prop is true 59988 // And the menu we are supposed to navigate to 59989 // Is marked as empty, then we skip rendering the item. 59990 if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) { 59991 return null; 59992 } 59993 const isActive = item && activeItem === item; 59994 const classes = dist_clsx(className, { 59995 'is-active': isActive 59996 }); 59997 const onItemClick = event => { 59998 if (navigateToMenu) { 59999 setActiveMenu(navigateToMenu); 60000 } 60001 onClick(event); 60002 }; 60003 const navigationIcon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right; 60004 const baseProps = children ? props : { 60005 ...props, 60006 onClick: undefined 60007 }; 60008 const itemProps = isText ? restProps : { 60009 as: build_module_button, 60010 __next40pxDefaultSize: 'as' in restProps ? restProps.as === undefined : true, 60011 href, 60012 onClick: onItemClick, 60013 'aria-current': isActive ? 'page' : undefined, 60014 ...restProps 60015 }; 60016 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationItemBase, { 60017 ...baseProps, 60018 className: classes, 60019 children: children || /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemUI, { 60020 ...itemProps, 60021 children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemIconUI, { 60022 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 60023 icon: icon 60024 }) 60025 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationItemBaseContent, { 60026 title: title, 60027 badge: badge 60028 }), navigateToMenu && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 60029 icon: navigationIcon 60030 })] 60031 }) 60032 }); 60033 } 60034 /* harmony default export */ const navigation_item = (NavigationItem); 60035 60036 ;// ./node_modules/@wordpress/components/build-module/navigation/menu/use-navigation-tree-menu.js 60037 /** 60038 * WordPress dependencies 60039 */ 60040 60041 60042 /** 60043 * Internal dependencies 60044 */ 60045 60046 60047 const useNavigationTreeMenu = props => { 60048 const { 60049 navigationTree: { 60050 addMenu, 60051 removeMenu 60052 } 60053 } = useNavigationContext(); 60054 const key = props.menu || ROOT_MENU; 60055 (0,external_wp_element_namespaceObject.useEffect)(() => { 60056 addMenu(key, { 60057 ...props, 60058 menu: key 60059 }); 60060 return () => { 60061 removeMenu(key); 60062 }; 60063 // Not adding deps for now, as it would require either a larger refactor 60064 // See https://github.com/WordPress/gutenberg/pull/44090 60065 }, []); 60066 }; 60067 60068 ;// ./node_modules/@wordpress/icons/build-module/library/search.js 60069 /** 60070 * WordPress dependencies 60071 */ 60072 60073 60074 const search = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 60075 xmlns: "http://www.w3.org/2000/svg", 60076 viewBox: "0 0 24 24", 60077 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 60078 d: "M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" 60079 }) 60080 }); 60081 /* harmony default export */ const library_search = (search); 60082 60083 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js 60084 /** 60085 * WordPress dependencies 60086 */ 60087 60088 60089 60090 /** @typedef {import('react').ComponentType} ComponentType */ 60091 60092 /** 60093 * A Higher Order Component used to provide speak and debounced speak functions. 60094 * 60095 * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak 60096 * 60097 * @param {ComponentType} Component The component to be wrapped. 60098 * 60099 * @return {ComponentType} The wrapped component. 60100 */ 60101 60102 /* harmony default export */ const with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 60103 ...props, 60104 speak: external_wp_a11y_namespaceObject.speak, 60105 debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500) 60106 }), 'withSpokenMessages')); 60107 60108 ;// ./node_modules/@wordpress/components/build-module/search-control/styles.js 60109 60110 /** 60111 * External dependencies 60112 */ 60113 60114 /** 60115 * Internal dependencies 60116 */ 60117 60118 60119 60120 const inlinePadding = ({ 60121 size 60122 }) => { 60123 return space(size === 'compact' ? 1 : 2); 60124 }; 60125 const SuffixItemWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 60126 target: "effl84m1" 60127 } : 0)("display:flex;padding-inline-end:", inlinePadding, ";svg{fill:currentColor;}" + ( true ? "" : 0)); 60128 const StyledInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 60129 target: "effl84m0" 60130 } : 0)("input[type='search']{&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}}&:not( :focus-within ){--wp-components-color-background:", COLORS.theme.gray[100], ";}" + ( true ? "" : 0)); 60131 60132 ;// ./node_modules/@wordpress/components/build-module/search-control/index.js 60133 /** 60134 * External dependencies 60135 */ 60136 60137 60138 /** 60139 * WordPress dependencies 60140 */ 60141 60142 60143 60144 60145 60146 60147 /** 60148 * Internal dependencies 60149 */ 60150 60151 60152 60153 60154 function SuffixItem({ 60155 searchRef, 60156 value, 60157 onChange, 60158 onClose 60159 }) { 60160 if (!onClose && !value) { 60161 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 60162 icon: library_search 60163 }); 60164 } 60165 if (onClose) { 60166 external_wp_deprecated_default()('`onClose` prop in wp.components.SearchControl', { 60167 since: '6.8' 60168 }); 60169 } 60170 const onReset = () => { 60171 onChange(''); 60172 searchRef.current?.focus(); 60173 }; 60174 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 60175 size: "small", 60176 icon: close_small, 60177 label: onClose ? (0,external_wp_i18n_namespaceObject.__)('Close search') : (0,external_wp_i18n_namespaceObject.__)('Reset search'), 60178 onClick: onClose !== null && onClose !== void 0 ? onClose : onReset 60179 }); 60180 } 60181 function UnforwardedSearchControl({ 60182 __nextHasNoMarginBottom = false, 60183 className, 60184 onChange, 60185 value, 60186 label = (0,external_wp_i18n_namespaceObject.__)('Search'), 60187 placeholder = (0,external_wp_i18n_namespaceObject.__)('Search'), 60188 hideLabelFromVision = true, 60189 onClose, 60190 size = 'default', 60191 ...restProps 60192 }, forwardedRef) { 60193 // @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component. 60194 // Work with the design team (@WordPress/gutenberg-design) if you need this feature. 60195 const { 60196 disabled, 60197 ...filteredRestProps 60198 } = restProps; 60199 const searchRef = (0,external_wp_element_namespaceObject.useRef)(null); 60200 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SearchControl, 'components-search-control'); 60201 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 60202 BaseControl: { 60203 // Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system 60204 // to provide backwards compatible margin for SearchControl. 60205 // (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.) 60206 _overrides: { 60207 __nextHasNoMarginBottom 60208 }, 60209 __associatedWPComponentName: 'SearchControl' 60210 }, 60211 // `isBorderless` is still experimental and not a public prop for InputControl yet. 60212 InputBase: { 60213 isBorderless: true 60214 } 60215 }), [__nextHasNoMarginBottom]); 60216 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { 60217 value: contextValue, 60218 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledInputControl, { 60219 __next40pxDefaultSize: true, 60220 id: instanceId, 60221 hideLabelFromVision: hideLabelFromVision, 60222 label: label, 60223 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([searchRef, forwardedRef]), 60224 type: "search", 60225 size: size, 60226 className: dist_clsx('components-search-control', className), 60227 onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''), 60228 autoComplete: "off", 60229 placeholder: placeholder, 60230 value: value !== null && value !== void 0 ? value : '', 60231 suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SuffixItemWrapper, { 60232 size: size, 60233 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SuffixItem, { 60234 searchRef: searchRef, 60235 value: value, 60236 onChange: onChange, 60237 onClose: onClose 60238 }) 60239 }), 60240 ...filteredRestProps 60241 }) 60242 }); 60243 } 60244 60245 /** 60246 * SearchControl components let users display a search control. 60247 * 60248 * ```jsx 60249 * import { SearchControl } from '@wordpress/components'; 60250 * import { useState } from '@wordpress/element'; 60251 * 60252 * function MySearchControl( { className, setState } ) { 60253 * const [ searchInput, setSearchInput ] = useState( '' ); 60254 * 60255 * return ( 60256 * <SearchControl 60257 * __nextHasNoMarginBottom 60258 * value={ searchInput } 60259 * onChange={ setSearchInput } 60260 * /> 60261 * ); 60262 * } 60263 * ``` 60264 */ 60265 const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSearchControl); 60266 /* harmony default export */ const search_control = (SearchControl); 60267 60268 ;// ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title-search.js 60269 /** 60270 * WordPress dependencies 60271 */ 60272 60273 60274 60275 /** 60276 * Internal dependencies 60277 */ 60278 60279 60280 60281 60282 60283 60284 60285 function MenuTitleSearch({ 60286 debouncedSpeak, 60287 onCloseSearch, 60288 onSearch, 60289 search, 60290 title 60291 }) { 60292 const { 60293 navigationTree: { 60294 items 60295 } 60296 } = useNavigationContext(); 60297 const { 60298 menu 60299 } = useNavigationMenuContext(); 60300 const inputRef = (0,external_wp_element_namespaceObject.useRef)(null); 60301 60302 // Wait for the slide-in animation to complete before autofocusing the input. 60303 // This prevents scrolling to the input during the animation. 60304 (0,external_wp_element_namespaceObject.useEffect)(() => { 60305 const delayedFocus = setTimeout(() => { 60306 inputRef.current?.focus(); 60307 }, SEARCH_FOCUS_DELAY); 60308 return () => { 60309 clearTimeout(delayedFocus); 60310 }; 60311 }, []); 60312 (0,external_wp_element_namespaceObject.useEffect)(() => { 60313 if (!search) { 60314 return; 60315 } 60316 const count = Object.values(items).filter(item => item._isVisible).length; 60317 const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: %d: number of results. */ 60318 (0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count); 60319 debouncedSpeak(resultsFoundMessage); 60320 // Not adding deps for now, as it would require either a larger refactor. 60321 // See https://github.com/WordPress/gutenberg/pull/44090 60322 }, [items, search]); 60323 const onClose = () => { 60324 onSearch?.(''); 60325 onCloseSearch(); 60326 }; 60327 const onKeyDown = event => { 60328 if (event.code === 'Escape' && !event.defaultPrevented) { 60329 event.preventDefault(); 60330 onClose(); 60331 } 60332 }; 60333 const inputId = `components-navigation__menu-title-search-$menu}`; 60334 const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)(/* translators: placeholder for menu search box. %s: menu title */ 60335 (0,external_wp_i18n_namespaceObject.__)('Search %s'), title?.toLowerCase()).trim(); 60336 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuTitleSearchControlWrapper, { 60337 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_control, { 60338 __nextHasNoMarginBottom: true, 60339 className: "components-navigation__menu-search-input", 60340 id: inputId, 60341 onChange: value => onSearch?.(value), 60342 onKeyDown: onKeyDown, 60343 placeholder: placeholder, 60344 onClose: onClose, 60345 ref: inputRef, 60346 value: search 60347 }) 60348 }); 60349 } 60350 /* harmony default export */ const menu_title_search = (with_spoken_messages(MenuTitleSearch)); 60351 60352 ;// ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title.js 60353 /** 60354 * WordPress dependencies 60355 */ 60356 60357 60358 60359 60360 /** 60361 * Internal dependencies 60362 */ 60363 60364 60365 60366 60367 60368 60369 60370 function NavigationMenuTitle({ 60371 hasSearch, 60372 onSearch, 60373 search, 60374 title, 60375 titleAction 60376 }) { 60377 const [isSearching, setIsSearching] = (0,external_wp_element_namespaceObject.useState)(false); 60378 const { 60379 menu 60380 } = useNavigationMenuContext(); 60381 const searchButtonRef = (0,external_wp_element_namespaceObject.useRef)(null); 60382 if (!title) { 60383 return null; 60384 } 60385 const onCloseSearch = () => { 60386 setIsSearching(false); 60387 60388 // Wait for the slide-in animation to complete before focusing the search button. 60389 // eslint-disable-next-line @wordpress/react-no-unsafe-timeout 60390 setTimeout(() => { 60391 searchButtonRef.current?.focus(); 60392 }, SEARCH_FOCUS_DELAY); 60393 }; 60394 const menuTitleId = `components-navigation__menu-title-$menu}`; 60395 /* translators: search button label for menu search box. %s: menu title */ 60396 const searchButtonLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Search in %s'), title); 60397 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuTitleUI, { 60398 className: "components-navigation__menu-title", 60399 children: [!isSearching && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(GroupTitleUI, { 60400 as: "h2", 60401 className: "components-navigation__menu-title-heading", 60402 level: 3, 60403 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 60404 id: menuTitleId, 60405 children: title 60406 }), (hasSearch || titleAction) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuTitleActionsUI, { 60407 children: [titleAction, hasSearch && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 60408 size: "small", 60409 variant: "tertiary", 60410 label: searchButtonLabel, 60411 onClick: () => setIsSearching(true), 60412 ref: searchButtonRef, 60413 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 60414 icon: library_search 60415 }) 60416 })] 60417 })] 60418 }), isSearching && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 60419 className: getAnimateClassName({ 60420 type: 'slide-in', 60421 origin: 'left' 60422 }), 60423 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_title_search, { 60424 onCloseSearch: onCloseSearch, 60425 onSearch: onSearch, 60426 search: search, 60427 title: title 60428 }) 60429 })] 60430 }); 60431 } 60432 60433 ;// ./node_modules/@wordpress/components/build-module/navigation/menu/search-no-results-found.js 60434 /** 60435 * WordPress dependencies 60436 */ 60437 60438 60439 /** 60440 * Internal dependencies 60441 */ 60442 60443 60444 60445 function NavigationSearchNoResultsFound({ 60446 search 60447 }) { 60448 const { 60449 navigationTree: { 60450 items 60451 } 60452 } = useNavigationContext(); 60453 const resultsCount = Object.values(items).filter(item => item._isVisible).length; 60454 if (!search || !!resultsCount) { 60455 return null; 60456 } 60457 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemBaseUI, { 60458 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemUI, { 60459 children: [(0,external_wp_i18n_namespaceObject.__)('No results found.'), " "] 60460 }) 60461 }); 60462 } 60463 60464 ;// ./node_modules/@wordpress/components/build-module/navigation/menu/index.js 60465 /** 60466 * External dependencies 60467 */ 60468 60469 60470 /** 60471 * WordPress dependencies 60472 */ 60473 60474 60475 /** 60476 * Internal dependencies 60477 */ 60478 60479 60480 60481 60482 60483 60484 60485 60486 60487 60488 /** 60489 * @deprecated Use `Navigator` instead. 60490 */ 60491 function NavigationMenu(props) { 60492 const { 60493 backButtonLabel, 60494 children, 60495 className, 60496 hasSearch, 60497 menu = ROOT_MENU, 60498 onBackButtonClick, 60499 onSearch: setControlledSearch, 60500 parentMenu, 60501 search: controlledSearch, 60502 isSearchDebouncing, 60503 title, 60504 titleAction 60505 } = props; 60506 const [uncontrolledSearch, setUncontrolledSearch] = (0,external_wp_element_namespaceObject.useState)(''); 60507 useNavigationTreeMenu(props); 60508 const { 60509 activeMenu 60510 } = useNavigationContext(); 60511 const context = { 60512 menu, 60513 search: uncontrolledSearch 60514 }; 60515 60516 // Keep the children rendered to make sure invisible items are included in the navigation tree. 60517 if (activeMenu !== menu) { 60518 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationMenuContext.Provider, { 60519 value: context, 60520 children: children 60521 }); 60522 } 60523 const isControlledSearch = !!setControlledSearch; 60524 const search = isControlledSearch ? controlledSearch : uncontrolledSearch; 60525 const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch; 60526 const menuTitleId = `components-navigation__menu-title-$menu}`; 60527 const classes = dist_clsx('components-navigation__menu', className); 60528 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationMenuContext.Provider, { 60529 value: context, 60530 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuUI, { 60531 className: classes, 60532 children: [(parentMenu || onBackButtonClick) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(back_button, { 60533 backButtonLabel: backButtonLabel, 60534 parentMenu: parentMenu, 60535 onClick: onBackButtonClick 60536 }), title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationMenuTitle, { 60537 hasSearch: hasSearch, 60538 onSearch: onSearch, 60539 search: search, 60540 title: title, 60541 titleAction: titleAction 60542 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(navigable_container_menu, { 60543 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("ul", { 60544 "aria-labelledby": menuTitleId, 60545 children: [children, search && !isSearchDebouncing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationSearchNoResultsFound, { 60546 search: search 60547 })] 60548 }) 60549 })] 60550 }) 60551 }); 60552 } 60553 /* harmony default export */ const navigation_menu = (NavigationMenu); 60554 60555 ;// ./node_modules/path-to-regexp/dist.es2015/index.js 60556 /** 60557 * Tokenize input string. 60558 */ 60559 function lexer(str) { 60560 var tokens = []; 60561 var i = 0; 60562 while (i < str.length) { 60563 var char = str[i]; 60564 if (char === "*" || char === "+" || char === "?") { 60565 tokens.push({ type: "MODIFIER", index: i, value: str[i++] }); 60566 continue; 60567 } 60568 if (char === "\\") { 60569 tokens.push({ type: "ESCAPED_CHAR", index: i++, value: str[i++] }); 60570 continue; 60571 } 60572 if (char === "{") { 60573 tokens.push({ type: "OPEN", index: i, value: str[i++] }); 60574 continue; 60575 } 60576 if (char === "}") { 60577 tokens.push({ type: "CLOSE", index: i, value: str[i++] }); 60578 continue; 60579 } 60580 if (char === ":") { 60581 var name = ""; 60582 var j = i + 1; 60583 while (j < str.length) { 60584 var code = str.charCodeAt(j); 60585 if ( 60586 // `0-9` 60587 (code >= 48 && code <= 57) || 60588 // `A-Z` 60589 (code >= 65 && code <= 90) || 60590 // `a-z` 60591 (code >= 97 && code <= 122) || 60592 // `_` 60593 code === 95) { 60594 name += str[j++]; 60595 continue; 60596 } 60597 break; 60598 } 60599 if (!name) 60600 throw new TypeError("Missing parameter name at ".concat(i)); 60601 tokens.push({ type: "NAME", index: i, value: name }); 60602 i = j; 60603 continue; 60604 } 60605 if (char === "(") { 60606 var count = 1; 60607 var pattern = ""; 60608 var j = i + 1; 60609 if (str[j] === "?") { 60610 throw new TypeError("Pattern cannot start with \"?\" at ".concat(j)); 60611 } 60612 while (j < str.length) { 60613 if (str[j] === "\\") { 60614 pattern += str[j++] + str[j++]; 60615 continue; 60616 } 60617 if (str[j] === ")") { 60618 count--; 60619 if (count === 0) { 60620 j++; 60621 break; 60622 } 60623 } 60624 else if (str[j] === "(") { 60625 count++; 60626 if (str[j + 1] !== "?") { 60627 throw new TypeError("Capturing groups are not allowed at ".concat(j)); 60628 } 60629 } 60630 pattern += str[j++]; 60631 } 60632 if (count) 60633 throw new TypeError("Unbalanced pattern at ".concat(i)); 60634 if (!pattern) 60635 throw new TypeError("Missing pattern at ".concat(i)); 60636 tokens.push({ type: "PATTERN", index: i, value: pattern }); 60637 i = j; 60638 continue; 60639 } 60640 tokens.push({ type: "CHAR", index: i, value: str[i++] }); 60641 } 60642 tokens.push({ type: "END", index: i, value: "" }); 60643 return tokens; 60644 } 60645 /** 60646 * Parse a string for the raw tokens. 60647 */ 60648 function dist_es2015_parse(str, options) { 60649 if (options === void 0) { options = {}; } 60650 var tokens = lexer(str); 60651 var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a, _b = options.delimiter, delimiter = _b === void 0 ? "/#?" : _b; 60652 var result = []; 60653 var key = 0; 60654 var i = 0; 60655 var path = ""; 60656 var tryConsume = function (type) { 60657 if (i < tokens.length && tokens[i].type === type) 60658 return tokens[i++].value; 60659 }; 60660 var mustConsume = function (type) { 60661 var value = tryConsume(type); 60662 if (value !== undefined) 60663 return value; 60664 var _a = tokens[i], nextType = _a.type, index = _a.index; 60665 throw new TypeError("Unexpected ".concat(nextType, " at ").concat(index, ", expected ").concat(type)); 60666 }; 60667 var consumeText = function () { 60668 var result = ""; 60669 var value; 60670 while ((value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR"))) { 60671 result += value; 60672 } 60673 return result; 60674 }; 60675 var isSafe = function (value) { 60676 for (var _i = 0, delimiter_1 = delimiter; _i < delimiter_1.length; _i++) { 60677 var char = delimiter_1[_i]; 60678 if (value.indexOf(char) > -1) 60679 return true; 60680 } 60681 return false; 60682 }; 60683 var safePattern = function (prefix) { 60684 var prev = result[result.length - 1]; 60685 var prevText = prefix || (prev && typeof prev === "string" ? prev : ""); 60686 if (prev && !prevText) { 60687 throw new TypeError("Must have text between two parameters, missing text after \"".concat(prev.name, "\"")); 60688 } 60689 if (!prevText || isSafe(prevText)) 60690 return "[^".concat(escapeString(delimiter), "]+?"); 60691 return "(?:(?!".concat(escapeString(prevText), ")[^").concat(escapeString(delimiter), "])+?"); 60692 }; 60693 while (i < tokens.length) { 60694 var char = tryConsume("CHAR"); 60695 var name = tryConsume("NAME"); 60696 var pattern = tryConsume("PATTERN"); 60697 if (name || pattern) { 60698 var prefix = char || ""; 60699 if (prefixes.indexOf(prefix) === -1) { 60700 path += prefix; 60701 prefix = ""; 60702 } 60703 if (path) { 60704 result.push(path); 60705 path = ""; 60706 } 60707 result.push({ 60708 name: name || key++, 60709 prefix: prefix, 60710 suffix: "", 60711 pattern: pattern || safePattern(prefix), 60712 modifier: tryConsume("MODIFIER") || "", 60713 }); 60714 continue; 60715 } 60716 var value = char || tryConsume("ESCAPED_CHAR"); 60717 if (value) { 60718 path += value; 60719 continue; 60720 } 60721 if (path) { 60722 result.push(path); 60723 path = ""; 60724 } 60725 var open = tryConsume("OPEN"); 60726 if (open) { 60727 var prefix = consumeText(); 60728 var name_1 = tryConsume("NAME") || ""; 60729 var pattern_1 = tryConsume("PATTERN") || ""; 60730 var suffix = consumeText(); 60731 mustConsume("CLOSE"); 60732 result.push({ 60733 name: name_1 || (pattern_1 ? key++ : ""), 60734 pattern: name_1 && !pattern_1 ? safePattern(prefix) : pattern_1, 60735 prefix: prefix, 60736 suffix: suffix, 60737 modifier: tryConsume("MODIFIER") || "", 60738 }); 60739 continue; 60740 } 60741 mustConsume("END"); 60742 } 60743 return result; 60744 } 60745 /** 60746 * Compile a string to a template function for the path. 60747 */ 60748 function dist_es2015_compile(str, options) { 60749 return tokensToFunction(dist_es2015_parse(str, options), options); 60750 } 60751 /** 60752 * Expose a method for transforming tokens into the path function. 60753 */ 60754 function tokensToFunction(tokens, options) { 60755 if (options === void 0) { options = {}; } 60756 var reFlags = flags(options); 60757 var _a = options.encode, encode = _a === void 0 ? function (x) { return x; } : _a, _b = options.validate, validate = _b === void 0 ? true : _b; 60758 // Compile all the tokens into regexps. 60759 var matches = tokens.map(function (token) { 60760 if (typeof token === "object") { 60761 return new RegExp("^(?:".concat(token.pattern, ")$"), reFlags); 60762 } 60763 }); 60764 return function (data) { 60765 var path = ""; 60766 for (var i = 0; i < tokens.length; i++) { 60767 var token = tokens[i]; 60768 if (typeof token === "string") { 60769 path += token; 60770 continue; 60771 } 60772 var value = data ? data[token.name] : undefined; 60773 var optional = token.modifier === "?" || token.modifier === "*"; 60774 var repeat = token.modifier === "*" || token.modifier === "+"; 60775 if (Array.isArray(value)) { 60776 if (!repeat) { 60777 throw new TypeError("Expected \"".concat(token.name, "\" to not repeat, but got an array")); 60778 } 60779 if (value.length === 0) { 60780 if (optional) 60781 continue; 60782 throw new TypeError("Expected \"".concat(token.name, "\" to not be empty")); 60783 } 60784 for (var j = 0; j < value.length; j++) { 60785 var segment = encode(value[j], token); 60786 if (validate && !matches[i].test(segment)) { 60787 throw new TypeError("Expected all \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\"")); 60788 } 60789 path += token.prefix + segment + token.suffix; 60790 } 60791 continue; 60792 } 60793 if (typeof value === "string" || typeof value === "number") { 60794 var segment = encode(String(value), token); 60795 if (validate && !matches[i].test(segment)) { 60796 throw new TypeError("Expected \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\"")); 60797 } 60798 path += token.prefix + segment + token.suffix; 60799 continue; 60800 } 60801 if (optional) 60802 continue; 60803 var typeOfMessage = repeat ? "an array" : "a string"; 60804 throw new TypeError("Expected \"".concat(token.name, "\" to be ").concat(typeOfMessage)); 60805 } 60806 return path; 60807 }; 60808 } 60809 /** 60810 * Create path match function from `path-to-regexp` spec. 60811 */ 60812 function dist_es2015_match(str, options) { 60813 var keys = []; 60814 var re = pathToRegexp(str, keys, options); 60815 return regexpToFunction(re, keys, options); 60816 } 60817 /** 60818 * Create a path match function from `path-to-regexp` output. 60819 */ 60820 function regexpToFunction(re, keys, options) { 60821 if (options === void 0) { options = {}; } 60822 var _a = options.decode, decode = _a === void 0 ? function (x) { return x; } : _a; 60823 return function (pathname) { 60824 var m = re.exec(pathname); 60825 if (!m) 60826 return false; 60827 var path = m[0], index = m.index; 60828 var params = Object.create(null); 60829 var _loop_1 = function (i) { 60830 if (m[i] === undefined) 60831 return "continue"; 60832 var key = keys[i - 1]; 60833 if (key.modifier === "*" || key.modifier === "+") { 60834 params[key.name] = m[i].split(key.prefix + key.suffix).map(function (value) { 60835 return decode(value, key); 60836 }); 60837 } 60838 else { 60839 params[key.name] = decode(m[i], key); 60840 } 60841 }; 60842 for (var i = 1; i < m.length; i++) { 60843 _loop_1(i); 60844 } 60845 return { path: path, index: index, params: params }; 60846 }; 60847 } 60848 /** 60849 * Escape a regular expression string. 60850 */ 60851 function escapeString(str) { 60852 return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1"); 60853 } 60854 /** 60855 * Get the flags for a regexp from the options. 60856 */ 60857 function flags(options) { 60858 return options && options.sensitive ? "" : "i"; 60859 } 60860 /** 60861 * Pull out keys from a regexp. 60862 */ 60863 function regexpToRegexp(path, keys) { 60864 if (!keys) 60865 return path; 60866 var groupsRegex = /\((?:\?<(.*?)>)?(?!\?)/g; 60867 var index = 0; 60868 var execResult = groupsRegex.exec(path.source); 60869 while (execResult) { 60870 keys.push({ 60871 // Use parenthesized substring match if available, index otherwise 60872 name: execResult[1] || index++, 60873 prefix: "", 60874 suffix: "", 60875 modifier: "", 60876 pattern: "", 60877 }); 60878 execResult = groupsRegex.exec(path.source); 60879 } 60880 return path; 60881 } 60882 /** 60883 * Transform an array into a regexp. 60884 */ 60885 function arrayToRegexp(paths, keys, options) { 60886 var parts = paths.map(function (path) { return pathToRegexp(path, keys, options).source; }); 60887 return new RegExp("(?:".concat(parts.join("|"), ")"), flags(options)); 60888 } 60889 /** 60890 * Create a path regexp from string input. 60891 */ 60892 function stringToRegexp(path, keys, options) { 60893 return tokensToRegexp(dist_es2015_parse(path, options), keys, options); 60894 } 60895 /** 60896 * Expose a function for taking tokens and returning a RegExp. 60897 */ 60898 function tokensToRegexp(tokens, keys, options) { 60899 if (options === void 0) { options = {}; } 60900 var _a = options.strict, strict = _a === void 0 ? false : _a, _b = options.start, start = _b === void 0 ? true : _b, _c = options.end, end = _c === void 0 ? true : _c, _d = options.encode, encode = _d === void 0 ? function (x) { return x; } : _d, _e = options.delimiter, delimiter = _e === void 0 ? "/#?" : _e, _f = options.endsWith, endsWith = _f === void 0 ? "" : _f; 60901 var endsWithRe = "[".concat(escapeString(endsWith), "]|$"); 60902 var delimiterRe = "[".concat(escapeString(delimiter), "]"); 60903 var route = start ? "^" : ""; 60904 // Iterate over the tokens and create our regexp string. 60905 for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) { 60906 var token = tokens_1[_i]; 60907 if (typeof token === "string") { 60908 route += escapeString(encode(token)); 60909 } 60910 else { 60911 var prefix = escapeString(encode(token.prefix)); 60912 var suffix = escapeString(encode(token.suffix)); 60913 if (token.pattern) { 60914 if (keys) 60915 keys.push(token); 60916 if (prefix || suffix) { 60917 if (token.modifier === "+" || token.modifier === "*") { 60918 var mod = token.modifier === "*" ? "?" : ""; 60919 route += "(?:".concat(prefix, "((?:").concat(token.pattern, ")(?:").concat(suffix).concat(prefix, "(?:").concat(token.pattern, "))*)").concat(suffix, ")").concat(mod); 60920 } 60921 else { 60922 route += "(?:".concat(prefix, "(").concat(token.pattern, ")").concat(suffix, ")").concat(token.modifier); 60923 } 60924 } 60925 else { 60926 if (token.modifier === "+" || token.modifier === "*") { 60927 throw new TypeError("Can not repeat \"".concat(token.name, "\" without a prefix and suffix")); 60928 } 60929 route += "(".concat(token.pattern, ")").concat(token.modifier); 60930 } 60931 } 60932 else { 60933 route += "(?:".concat(prefix).concat(suffix, ")").concat(token.modifier); 60934 } 60935 } 60936 } 60937 if (end) { 60938 if (!strict) 60939 route += "".concat(delimiterRe, "?"); 60940 route += !options.endsWith ? "$" : "(?=".concat(endsWithRe, ")"); 60941 } 60942 else { 60943 var endToken = tokens[tokens.length - 1]; 60944 var isEndDelimited = typeof endToken === "string" 60945 ? delimiterRe.indexOf(endToken[endToken.length - 1]) > -1 60946 : endToken === undefined; 60947 if (!strict) { 60948 route += "(?:".concat(delimiterRe, "(?=").concat(endsWithRe, "))?"); 60949 } 60950 if (!isEndDelimited) { 60951 route += "(?=".concat(delimiterRe, "|").concat(endsWithRe, ")"); 60952 } 60953 } 60954 return new RegExp(route, flags(options)); 60955 } 60956 /** 60957 * Normalize the given path string, returning a regular expression. 60958 * 60959 * An empty array can be passed in for the keys, which will hold the 60960 * placeholder key descriptions. For example, using `/user/:id`, `keys` will 60961 * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`. 60962 */ 60963 function pathToRegexp(path, keys, options) { 60964 if (path instanceof RegExp) 60965 return regexpToRegexp(path, keys); 60966 if (Array.isArray(path)) 60967 return arrayToRegexp(path, keys, options); 60968 return stringToRegexp(path, keys, options); 60969 } 60970 60971 ;// ./node_modules/@wordpress/components/build-module/navigator/utils/router.js 60972 /** 60973 * External dependencies 60974 */ 60975 60976 60977 /** 60978 * Internal dependencies 60979 */ 60980 60981 function matchPath(path, pattern) { 60982 const matchingFunction = dist_es2015_match(pattern, { 60983 decode: decodeURIComponent 60984 }); 60985 return matchingFunction(path); 60986 } 60987 function patternMatch(path, screens) { 60988 for (const screen of screens) { 60989 const matched = matchPath(path, screen.path); 60990 if (matched) { 60991 return { 60992 params: matched.params, 60993 id: screen.id 60994 }; 60995 } 60996 } 60997 return undefined; 60998 } 60999 function findParent(path, screens) { 61000 if (!path.startsWith('/')) { 61001 return undefined; 61002 } 61003 const pathParts = path.split('/'); 61004 let parentPath; 61005 while (pathParts.length > 1 && parentPath === undefined) { 61006 pathParts.pop(); 61007 const potentialParentPath = pathParts.join('/') === '' ? '/' : pathParts.join('/'); 61008 if (screens.find(screen => { 61009 return matchPath(potentialParentPath, screen.path) !== false; 61010 })) { 61011 parentPath = potentialParentPath; 61012 } 61013 } 61014 return parentPath; 61015 } 61016 61017 ;// ./node_modules/@wordpress/components/build-module/navigator/context.js 61018 /** 61019 * WordPress dependencies 61020 */ 61021 61022 61023 /** 61024 * Internal dependencies 61025 */ 61026 61027 const context_initialContextValue = { 61028 location: {}, 61029 goTo: () => {}, 61030 goBack: () => {}, 61031 goToParent: () => {}, 61032 addScreen: () => {}, 61033 removeScreen: () => {}, 61034 params: {} 61035 }; 61036 const NavigatorContext = (0,external_wp_element_namespaceObject.createContext)(context_initialContextValue); 61037 61038 ;// ./node_modules/@wordpress/components/build-module/navigator/styles.js 61039 function navigator_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 61040 /** 61041 * External dependencies 61042 */ 61043 61044 const navigatorWrapper = true ? { 61045 name: "1br0vvk", 61046 styles: "position:relative;overflow-x:clip;contain:layout;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:start" 61047 } : 0; 61048 const fadeIn = emotion_react_browser_esm_keyframes({ 61049 from: { 61050 opacity: 0 61051 } 61052 }); 61053 const fadeOut = emotion_react_browser_esm_keyframes({ 61054 to: { 61055 opacity: 0 61056 } 61057 }); 61058 const slideFromRight = emotion_react_browser_esm_keyframes({ 61059 from: { 61060 transform: 'translateX(100px)' 61061 } 61062 }); 61063 const slideToLeft = emotion_react_browser_esm_keyframes({ 61064 to: { 61065 transform: 'translateX(-80px)' 61066 } 61067 }); 61068 const slideFromLeft = emotion_react_browser_esm_keyframes({ 61069 from: { 61070 transform: 'translateX(-100px)' 61071 } 61072 }); 61073 const slideToRight = emotion_react_browser_esm_keyframes({ 61074 to: { 61075 transform: 'translateX(80px)' 61076 } 61077 }); 61078 const FADE = { 61079 DURATION: 70, 61080 EASING: 'linear', 61081 DELAY: { 61082 IN: 70, 61083 OUT: 40 61084 } 61085 }; 61086 const SLIDE = { 61087 DURATION: 300, 61088 EASING: 'cubic-bezier(0.33, 0, 0, 1)' 61089 }; 61090 const TOTAL_ANIMATION_DURATION = { 61091 IN: Math.max(FADE.DURATION + FADE.DELAY.IN, SLIDE.DURATION), 61092 OUT: Math.max(FADE.DURATION + FADE.DELAY.OUT, SLIDE.DURATION) 61093 }; 61094 const ANIMATION_END_NAMES = { 61095 end: { 61096 in: slideFromRight.name, 61097 out: slideToLeft.name 61098 }, 61099 start: { 61100 in: slideFromLeft.name, 61101 out: slideToRight.name 61102 } 61103 }; 61104 const ANIMATION = { 61105 end: { 61106 in: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.IN, "ms both ", fadeIn, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideFromRight, ";" + ( true ? "" : 0), true ? "" : 0), 61107 out: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.OUT, "ms both ", fadeOut, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideToLeft, ";" + ( true ? "" : 0), true ? "" : 0) 61108 }, 61109 start: { 61110 in: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.IN, "ms both ", fadeIn, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideFromLeft, ";" + ( true ? "" : 0), true ? "" : 0), 61111 out: /*#__PURE__*/emotion_react_browser_esm_css(FADE.DURATION, "ms ", FADE.EASING, " ", FADE.DELAY.OUT, "ms both ", fadeOut, ",", SLIDE.DURATION, "ms ", SLIDE.EASING, " both ", slideToRight, ";" + ( true ? "" : 0), true ? "" : 0) 61112 } 61113 }; 61114 const navigatorScreenAnimation = /*#__PURE__*/emotion_react_browser_esm_css("z-index:1;&[data-animation-type='out']{z-index:0;}@media not ( prefers-reduced-motion ){&:not( [data-skip-animation] ){", ['start', 'end'].map(direction => ['in', 'out'].map(type => /*#__PURE__*/emotion_react_browser_esm_css("&[data-animation-direction='", direction, "'][data-animation-type='", type, "']{animation:", ANIMATION[direction][type], ";}" + ( true ? "" : 0), true ? "" : 0))), ";}}" + ( true ? "" : 0), true ? "" : 0); 61115 const navigatorScreen = true ? { 61116 name: "14di7zd", 61117 styles: "overflow-x:auto;max-height:100%;box-sizing:border-box;position:relative;grid-column:1/-1;grid-row:1/-1" 61118 } : 0; 61119 61120 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator/component.js 61121 /** 61122 * External dependencies 61123 */ 61124 61125 /** 61126 * WordPress dependencies 61127 */ 61128 61129 61130 61131 61132 /** 61133 * Internal dependencies 61134 */ 61135 61136 61137 61138 61139 61140 61141 61142 61143 61144 function addScreen({ 61145 screens 61146 }, screen) { 61147 if (screens.some(s => s.path === screen.path)) { 61148 true ? external_wp_warning_default()(`Navigator: a screen with path $screen.path} already exists. 61149 The screen with id $screen.id} will not be added.`) : 0; 61150 return screens; 61151 } 61152 return [...screens, screen]; 61153 } 61154 function removeScreen({ 61155 screens 61156 }, screen) { 61157 return screens.filter(s => s.id !== screen.id); 61158 } 61159 function goTo(state, path, options = {}) { 61160 var _focusSelectorsCopy2; 61161 const { 61162 focusSelectors 61163 } = state; 61164 const currentLocation = { 61165 ...state.currentLocation 61166 }; 61167 const { 61168 // Default assignments 61169 isBack = false, 61170 skipFocus = false, 61171 // Extract to avoid forwarding 61172 replace, 61173 focusTargetSelector, 61174 // Rest 61175 ...restOptions 61176 } = options; 61177 if (currentLocation.path === path) { 61178 return { 61179 currentLocation, 61180 focusSelectors 61181 }; 61182 } 61183 let focusSelectorsCopy; 61184 function getFocusSelectorsCopy() { 61185 var _focusSelectorsCopy; 61186 focusSelectorsCopy = (_focusSelectorsCopy = focusSelectorsCopy) !== null && _focusSelectorsCopy !== void 0 ? _focusSelectorsCopy : new Map(state.focusSelectors); 61187 return focusSelectorsCopy; 61188 } 61189 61190 // Set a focus selector that will be used when navigating 61191 // back to the current location. 61192 if (focusTargetSelector && currentLocation.path) { 61193 getFocusSelectorsCopy().set(currentLocation.path, focusTargetSelector); 61194 } 61195 61196 // Get the focus selector for the new location. 61197 let currentFocusSelector; 61198 if (focusSelectors.get(path)) { 61199 if (isBack) { 61200 // Use the found focus selector only when navigating back. 61201 currentFocusSelector = focusSelectors.get(path); 61202 } 61203 // Make a copy of the focusSelectors map to remove the focus selector 61204 // only if necessary (ie. a focus selector was found). 61205 getFocusSelectorsCopy().delete(path); 61206 } 61207 return { 61208 currentLocation: { 61209 ...restOptions, 61210 isInitial: false, 61211 path, 61212 isBack, 61213 hasRestoredFocus: false, 61214 focusTargetSelector: currentFocusSelector, 61215 skipFocus 61216 }, 61217 focusSelectors: (_focusSelectorsCopy2 = focusSelectorsCopy) !== null && _focusSelectorsCopy2 !== void 0 ? _focusSelectorsCopy2 : focusSelectors 61218 }; 61219 } 61220 function goToParent(state, options = {}) { 61221 const { 61222 screens, 61223 focusSelectors 61224 } = state; 61225 const currentLocation = { 61226 ...state.currentLocation 61227 }; 61228 const currentPath = currentLocation.path; 61229 if (currentPath === undefined) { 61230 return { 61231 currentLocation, 61232 focusSelectors 61233 }; 61234 } 61235 const parentPath = findParent(currentPath, screens); 61236 if (parentPath === undefined) { 61237 return { 61238 currentLocation, 61239 focusSelectors 61240 }; 61241 } 61242 return goTo(state, parentPath, { 61243 ...options, 61244 isBack: true 61245 }); 61246 } 61247 function routerReducer(state, action) { 61248 let { 61249 screens, 61250 currentLocation, 61251 matchedPath, 61252 focusSelectors, 61253 ...restState 61254 } = state; 61255 switch (action.type) { 61256 case 'add': 61257 screens = addScreen(state, action.screen); 61258 break; 61259 case 'remove': 61260 screens = removeScreen(state, action.screen); 61261 break; 61262 case 'goto': 61263 ({ 61264 currentLocation, 61265 focusSelectors 61266 } = goTo(state, action.path, action.options)); 61267 break; 61268 case 'gotoparent': 61269 ({ 61270 currentLocation, 61271 focusSelectors 61272 } = goToParent(state, action.options)); 61273 break; 61274 } 61275 61276 // Return early in case there is no change 61277 if (screens === state.screens && currentLocation === state.currentLocation) { 61278 return state; 61279 } 61280 61281 // Compute the matchedPath 61282 const currentPath = currentLocation.path; 61283 matchedPath = currentPath !== undefined ? patternMatch(currentPath, screens) : undefined; 61284 61285 // If the new match is the same as the previous match, 61286 // return the previous one to keep immutability. 61287 if (matchedPath && state.matchedPath && matchedPath.id === state.matchedPath.id && external_wp_isShallowEqual_default()(matchedPath.params, state.matchedPath.params)) { 61288 matchedPath = state.matchedPath; 61289 } 61290 return { 61291 ...restState, 61292 screens, 61293 currentLocation, 61294 matchedPath, 61295 focusSelectors 61296 }; 61297 } 61298 function UnconnectedNavigator(props, forwardedRef) { 61299 const { 61300 initialPath: initialPathProp, 61301 children, 61302 className, 61303 ...otherProps 61304 } = useContextSystem(props, 'Navigator'); 61305 const [routerState, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(routerReducer, initialPathProp, path => ({ 61306 screens: [], 61307 currentLocation: { 61308 path, 61309 isInitial: true 61310 }, 61311 matchedPath: undefined, 61312 focusSelectors: new Map(), 61313 initialPath: initialPathProp 61314 })); 61315 61316 // The methods are constant forever, create stable references to them. 61317 const methods = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 61318 // Note: calling goBack calls `goToParent` internally, as it was established 61319 // that `goBack` should behave like `goToParent`, and `goToParent` should 61320 // be marked as deprecated. 61321 goBack: options => dispatch({ 61322 type: 'gotoparent', 61323 options 61324 }), 61325 goTo: (path, options) => dispatch({ 61326 type: 'goto', 61327 path, 61328 options 61329 }), 61330 goToParent: options => { 61331 external_wp_deprecated_default()(`wp.components.useNavigator().goToParent`, { 61332 since: '6.7', 61333 alternative: 'wp.components.useNavigator().goBack' 61334 }); 61335 dispatch({ 61336 type: 'gotoparent', 61337 options 61338 }); 61339 }, 61340 addScreen: screen => dispatch({ 61341 type: 'add', 61342 screen 61343 }), 61344 removeScreen: screen => dispatch({ 61345 type: 'remove', 61346 screen 61347 }) 61348 }), []); 61349 const { 61350 currentLocation, 61351 matchedPath 61352 } = routerState; 61353 const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 61354 var _matchedPath$params; 61355 return { 61356 location: currentLocation, 61357 params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {}, 61358 match: matchedPath?.id, 61359 ...methods 61360 }; 61361 }, [currentLocation, matchedPath, methods]); 61362 const cx = useCx(); 61363 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorWrapper, className), [className, cx]); 61364 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 61365 ref: forwardedRef, 61366 className: classes, 61367 ...otherProps, 61368 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigatorContext.Provider, { 61369 value: navigatorContextValue, 61370 children: children 61371 }) 61372 }); 61373 } 61374 const component_Navigator = contextConnect(UnconnectedNavigator, 'Navigator'); 61375 61376 ;// external ["wp","escapeHtml"] 61377 const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"]; 61378 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/use-screen-animate-presence.js 61379 /** 61380 * WordPress dependencies 61381 */ 61382 61383 61384 61385 61386 /** 61387 * Internal dependencies 61388 */ 61389 61390 61391 // Possible values: 61392 // - 'INITIAL': the initial state 61393 // - 'ANIMATING_IN': start enter animation 61394 // - 'IN': enter animation has ended 61395 // - 'ANIMATING_OUT': start exit animation 61396 // - 'OUT': the exit animation has ended 61397 61398 // Allow an extra 20% of the total animation duration to account for potential 61399 // event loop delays. 61400 const ANIMATION_TIMEOUT_MARGIN = 1.2; 61401 const isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_IN' && animationName === ANIMATION_END_NAMES[animationDirection].in; 61402 const isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_OUT' && animationName === ANIMATION_END_NAMES[animationDirection].out; 61403 function useScreenAnimatePresence({ 61404 isMatch, 61405 skipAnimation, 61406 isBack, 61407 onAnimationEnd 61408 }) { 61409 const isRTL = (0,external_wp_i18n_namespaceObject.isRTL)(); 61410 const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 61411 const [animationStatus, setAnimationStatus] = (0,external_wp_element_namespaceObject.useState)('INITIAL'); 61412 61413 // Start enter and exit animations when the screen is selected or deselected. 61414 // The animation status is set to `IN` or `OUT` immediately if the animation 61415 // should be skipped. 61416 const becameSelected = animationStatus !== 'ANIMATING_IN' && animationStatus !== 'IN' && isMatch; 61417 const becameUnselected = animationStatus !== 'ANIMATING_OUT' && animationStatus !== 'OUT' && !isMatch; 61418 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 61419 if (becameSelected) { 61420 setAnimationStatus(skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN'); 61421 } else if (becameUnselected) { 61422 setAnimationStatus(skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT'); 61423 } 61424 }, [becameSelected, becameUnselected, skipAnimation, prefersReducedMotion]); 61425 61426 // Animation attributes (derived state). 61427 const animationDirection = isRTL && isBack || !isRTL && !isBack ? 'end' : 'start'; 61428 const isAnimatingIn = animationStatus === 'ANIMATING_IN'; 61429 const isAnimatingOut = animationStatus === 'ANIMATING_OUT'; 61430 let animationType; 61431 if (isAnimatingIn) { 61432 animationType = 'in'; 61433 } else if (isAnimatingOut) { 61434 animationType = 'out'; 61435 } 61436 const onScreenAnimationEnd = (0,external_wp_element_namespaceObject.useCallback)(e => { 61437 onAnimationEnd?.(e); 61438 if (isExitAnimation(animationDirection, animationStatus, e.animationName)) { 61439 // When the exit animation ends on an unselected screen, set the 61440 // status to 'OUT' to remove the screen contents from the DOM. 61441 setAnimationStatus('OUT'); 61442 } else if (isEnterAnimation(animationDirection, animationStatus, e.animationName)) { 61443 // When the enter animation ends on a selected screen, set the 61444 // status to 'IN' to ensure the screen is rendered in the DOM. 61445 setAnimationStatus('IN'); 61446 } 61447 }, [onAnimationEnd, animationStatus, animationDirection]); 61448 61449 // Fallback timeout to ensure that the logic is applied even if the 61450 // `animationend` event is not triggered. 61451 (0,external_wp_element_namespaceObject.useEffect)(() => { 61452 let animationTimeout; 61453 if (isAnimatingOut) { 61454 animationTimeout = window.setTimeout(() => { 61455 setAnimationStatus('OUT'); 61456 animationTimeout = undefined; 61457 }, TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN); 61458 } else if (isAnimatingIn) { 61459 animationTimeout = window.setTimeout(() => { 61460 setAnimationStatus('IN'); 61461 animationTimeout = undefined; 61462 }, TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN); 61463 } 61464 return () => { 61465 if (animationTimeout) { 61466 window.clearTimeout(animationTimeout); 61467 animationTimeout = undefined; 61468 } 61469 }; 61470 }, [isAnimatingOut, isAnimatingIn]); 61471 return { 61472 animationStyles: navigatorScreenAnimation, 61473 // Render the screen's contents in the DOM not only when the screen is 61474 // selected, but also while it is animating out. 61475 shouldRenderScreen: isMatch || animationStatus === 'IN' || animationStatus === 'ANIMATING_OUT', 61476 screenProps: { 61477 onAnimationEnd: onScreenAnimationEnd, 61478 'data-animation-direction': animationDirection, 61479 'data-animation-type': animationType, 61480 'data-skip-animation': skipAnimation || undefined 61481 } 61482 }; 61483 } 61484 61485 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/component.js 61486 /** 61487 * External dependencies 61488 */ 61489 61490 /** 61491 * WordPress dependencies 61492 */ 61493 61494 61495 61496 61497 61498 61499 /** 61500 * Internal dependencies 61501 */ 61502 61503 61504 61505 61506 61507 61508 61509 61510 function UnconnectedNavigatorScreen(props, forwardedRef) { 61511 if (!/^\//.test(props.path)) { 61512 true ? external_wp_warning_default()('wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : 0; 61513 } 61514 const screenId = (0,external_wp_element_namespaceObject.useId)(); 61515 const { 61516 children, 61517 className, 61518 path, 61519 onAnimationEnd: onAnimationEndProp, 61520 ...otherProps 61521 } = useContextSystem(props, 'Navigator.Screen'); 61522 const { 61523 location, 61524 match, 61525 addScreen, 61526 removeScreen 61527 } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext); 61528 const { 61529 isInitial, 61530 isBack, 61531 focusTargetSelector, 61532 skipFocus 61533 } = location; 61534 const isMatch = match === screenId; 61535 const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null); 61536 const skipAnimationAndFocusRestoration = !!isInitial && !isBack; 61537 61538 // Register / unregister screen with the navigator context. 61539 (0,external_wp_element_namespaceObject.useEffect)(() => { 61540 const screen = { 61541 id: screenId, 61542 path: (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path) 61543 }; 61544 addScreen(screen); 61545 return () => removeScreen(screen); 61546 }, [screenId, path, addScreen, removeScreen]); 61547 61548 // Animation. 61549 const { 61550 animationStyles, 61551 shouldRenderScreen, 61552 screenProps 61553 } = useScreenAnimatePresence({ 61554 isMatch, 61555 isBack, 61556 onAnimationEnd: onAnimationEndProp, 61557 skipAnimation: skipAnimationAndFocusRestoration 61558 }); 61559 const cx = useCx(); 61560 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorScreen, animationStyles, className), [className, cx, animationStyles]); 61561 61562 // Focus restoration 61563 const locationRef = (0,external_wp_element_namespaceObject.useRef)(location); 61564 (0,external_wp_element_namespaceObject.useEffect)(() => { 61565 locationRef.current = location; 61566 }, [location]); 61567 (0,external_wp_element_namespaceObject.useEffect)(() => { 61568 const wrapperEl = wrapperRef.current; 61569 // Only attempt to restore focus: 61570 // - if the current location is not the initial one (to avoid moving focus on page load) 61571 // - when the screen becomes visible 61572 // - if the wrapper ref has been assigned 61573 // - if focus hasn't already been restored for the current location 61574 // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen. 61575 if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) { 61576 return; 61577 } 61578 const activeElement = wrapperEl.ownerDocument.activeElement; 61579 61580 // If an element is already focused within the wrapper do not focus the 61581 // element. This prevents inputs or buttons from losing focus unnecessarily. 61582 if (wrapperEl.contains(activeElement)) { 61583 return; 61584 } 61585 let elementToFocus = null; 61586 61587 // When navigating back, if a selector is provided, use it to look for the 61588 // target element (assumed to be a node inside the current NavigatorScreen) 61589 if (isBack && focusTargetSelector) { 61590 elementToFocus = wrapperEl.querySelector(focusTargetSelector); 61591 } 61592 61593 // If the previous query didn't run or find any element to focus, fallback 61594 // to the first tabbable element in the screen (or the screen itself). 61595 if (!elementToFocus) { 61596 const [firstTabbable] = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperEl); 61597 elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl; 61598 } 61599 locationRef.current.hasRestoredFocus = true; 61600 elementToFocus.focus(); 61601 }, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]); 61602 const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]); 61603 return shouldRenderScreen ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 61604 ref: mergedWrapperRef, 61605 className: classes, 61606 ...screenProps, 61607 ...otherProps, 61608 children: children 61609 }) : null; 61610 } 61611 const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'Navigator.Screen'); 61612 61613 ;// ./node_modules/@wordpress/components/build-module/navigator/use-navigator.js 61614 /** 61615 * WordPress dependencies 61616 */ 61617 61618 61619 /** 61620 * Internal dependencies 61621 */ 61622 61623 /** 61624 * Retrieves a `navigator` instance. This hook provides advanced functionality, 61625 * such as imperatively navigating to a new location (with options like 61626 * navigating back or skipping focus restoration) and accessing the current 61627 * location and path parameters. 61628 */ 61629 function useNavigator() { 61630 const { 61631 location, 61632 params, 61633 goTo, 61634 goBack, 61635 goToParent 61636 } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext); 61637 return { 61638 location, 61639 goTo, 61640 goBack, 61641 goToParent, 61642 params 61643 }; 61644 } 61645 61646 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-button/hook.js 61647 /** 61648 * WordPress dependencies 61649 */ 61650 61651 61652 61653 /** 61654 * Internal dependencies 61655 */ 61656 61657 61658 61659 61660 const cssSelectorForAttribute = (attrName, attrValue) => `[$attrName}="$attrValue}"]`; 61661 function useNavigatorButton(props) { 61662 const { 61663 path, 61664 onClick, 61665 as = build_module_button, 61666 attributeName = 'id', 61667 ...otherProps 61668 } = useContextSystem(props, 'Navigator.Button'); 61669 const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path); 61670 const { 61671 goTo 61672 } = useNavigator(); 61673 const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => { 61674 e.preventDefault(); 61675 goTo(escapedPath, { 61676 focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath) 61677 }); 61678 onClick?.(e); 61679 }, [goTo, onClick, attributeName, escapedPath]); 61680 return { 61681 as, 61682 onClick: handleClick, 61683 ...otherProps, 61684 [attributeName]: escapedPath 61685 }; 61686 } 61687 61688 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-button/component.js 61689 /** 61690 * External dependencies 61691 */ 61692 61693 /** 61694 * Internal dependencies 61695 */ 61696 61697 61698 61699 61700 61701 function UnconnectedNavigatorButton(props, forwardedRef) { 61702 const navigatorButtonProps = useNavigatorButton(props); 61703 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 61704 ref: forwardedRef, 61705 ...navigatorButtonProps 61706 }); 61707 } 61708 const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'Navigator.Button'); 61709 61710 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/hook.js 61711 /** 61712 * WordPress dependencies 61713 */ 61714 61715 61716 /** 61717 * Internal dependencies 61718 */ 61719 61720 61721 61722 61723 function useNavigatorBackButton(props) { 61724 const { 61725 onClick, 61726 as = build_module_button, 61727 ...otherProps 61728 } = useContextSystem(props, 'Navigator.BackButton'); 61729 const { 61730 goBack 61731 } = useNavigator(); 61732 const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => { 61733 e.preventDefault(); 61734 goBack(); 61735 onClick?.(e); 61736 }, [goBack, onClick]); 61737 return { 61738 as, 61739 onClick: handleClick, 61740 ...otherProps 61741 }; 61742 } 61743 61744 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/component.js 61745 /** 61746 * External dependencies 61747 */ 61748 61749 /** 61750 * Internal dependencies 61751 */ 61752 61753 61754 61755 61756 61757 function UnconnectedNavigatorBackButton(props, forwardedRef) { 61758 const navigatorBackButtonProps = useNavigatorBackButton(props); 61759 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 61760 ref: forwardedRef, 61761 ...navigatorBackButtonProps 61762 }); 61763 } 61764 const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'Navigator.BackButton'); 61765 61766 ;// ./node_modules/@wordpress/components/build-module/navigator/navigator-to-parent-button/component.js 61767 /** 61768 * WordPress dependencies 61769 */ 61770 61771 61772 /** 61773 * Internal dependencies 61774 */ 61775 61776 61777 61778 function UnconnectedNavigatorToParentButton(props, forwardedRef) { 61779 external_wp_deprecated_default()('wp.components.NavigatorToParentButton', { 61780 since: '6.7', 61781 alternative: 'wp.components.Navigator.BackButton' 61782 }); 61783 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigatorBackButton, { 61784 ref: forwardedRef, 61785 ...props 61786 }); 61787 } 61788 61789 /** 61790 * @deprecated 61791 */ 61792 const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'Navigator.ToParentButton'); 61793 61794 ;// ./node_modules/@wordpress/components/build-module/navigator/legacy.js 61795 /** 61796 * Internal dependencies 61797 */ 61798 61799 61800 61801 61802 61803 61804 61805 /** 61806 * The `NavigatorProvider` component allows rendering nested views/panels/menus 61807 * (via the `NavigatorScreen` component and navigate between them 61808 * (via the `NavigatorButton` and `NavigatorBackButton` components). 61809 * 61810 * ```jsx 61811 * import { 61812 * __experimentalNavigatorProvider as NavigatorProvider, 61813 * __experimentalNavigatorScreen as NavigatorScreen, 61814 * __experimentalNavigatorButton as NavigatorButton, 61815 * __experimentalNavigatorBackButton as NavigatorBackButton, 61816 * } from '@wordpress/components'; 61817 * 61818 * const MyNavigation = () => ( 61819 * <NavigatorProvider initialPath="/"> 61820 * <NavigatorScreen path="/"> 61821 * <p>This is the home screen.</p> 61822 * <NavigatorButton path="/child"> 61823 * Navigate to child screen. 61824 * </NavigatorButton> 61825 * </NavigatorScreen> 61826 * 61827 * <NavigatorScreen path="/child"> 61828 * <p>This is the child screen.</p> 61829 * <NavigatorBackButton> 61830 * Go back 61831 * </NavigatorBackButton> 61832 * </NavigatorScreen> 61833 * </NavigatorProvider> 61834 * ); 61835 * ``` 61836 */ 61837 const NavigatorProvider = Object.assign(component_Navigator, { 61838 displayName: 'NavigatorProvider' 61839 }); 61840 61841 /** 61842 * The `NavigatorScreen` component represents a single view/screen/panel and 61843 * should be used in combination with the `NavigatorProvider`, the 61844 * `NavigatorButton` and the `NavigatorBackButton` components. 61845 * 61846 * @example 61847 * ```jsx 61848 * import { 61849 * __experimentalNavigatorProvider as NavigatorProvider, 61850 * __experimentalNavigatorScreen as NavigatorScreen, 61851 * __experimentalNavigatorButton as NavigatorButton, 61852 * __experimentalNavigatorBackButton as NavigatorBackButton, 61853 * } from '@wordpress/components'; 61854 * 61855 * const MyNavigation = () => ( 61856 * <NavigatorProvider initialPath="/"> 61857 * <NavigatorScreen path="/"> 61858 * <p>This is the home screen.</p> 61859 * <NavigatorButton path="/child"> 61860 * Navigate to child screen. 61861 * </NavigatorButton> 61862 * </NavigatorScreen> 61863 * 61864 * <NavigatorScreen path="/child"> 61865 * <p>This is the child screen.</p> 61866 * <NavigatorBackButton> 61867 * Go back 61868 * </NavigatorBackButton> 61869 * </NavigatorScreen> 61870 * </NavigatorProvider> 61871 * ); 61872 * ``` 61873 */ 61874 const legacy_NavigatorScreen = Object.assign(NavigatorScreen, { 61875 displayName: 'NavigatorScreen' 61876 }); 61877 61878 /** 61879 * The `NavigatorButton` component can be used to navigate to a screen and should 61880 * be used in combination with the `NavigatorProvider`, the `NavigatorScreen` 61881 * and the `NavigatorBackButton` components. 61882 * 61883 * @example 61884 * ```jsx 61885 * import { 61886 * __experimentalNavigatorProvider as NavigatorProvider, 61887 * __experimentalNavigatorScreen as NavigatorScreen, 61888 * __experimentalNavigatorButton as NavigatorButton, 61889 * __experimentalNavigatorBackButton as NavigatorBackButton, 61890 * } from '@wordpress/components'; 61891 * 61892 * const MyNavigation = () => ( 61893 * <NavigatorProvider initialPath="/"> 61894 * <NavigatorScreen path="/"> 61895 * <p>This is the home screen.</p> 61896 * <NavigatorButton path="/child"> 61897 * Navigate to child screen. 61898 * </NavigatorButton> 61899 * </NavigatorScreen> 61900 * 61901 * <NavigatorScreen path="/child"> 61902 * <p>This is the child screen.</p> 61903 * <NavigatorBackButton> 61904 * Go back 61905 * </NavigatorBackButton> 61906 * </NavigatorScreen> 61907 * </NavigatorProvider> 61908 * ); 61909 * ``` 61910 */ 61911 const legacy_NavigatorButton = Object.assign(NavigatorButton, { 61912 displayName: 'NavigatorButton' 61913 }); 61914 61915 /** 61916 * The `NavigatorBackButton` component can be used to navigate to a screen and 61917 * should be used in combination with the `NavigatorProvider`, the 61918 * `NavigatorScreen` and the `NavigatorButton` components. 61919 * 61920 * @example 61921 * ```jsx 61922 * import { 61923 * __experimentalNavigatorProvider as NavigatorProvider, 61924 * __experimentalNavigatorScreen as NavigatorScreen, 61925 * __experimentalNavigatorButton as NavigatorButton, 61926 * __experimentalNavigatorBackButton as NavigatorBackButton, 61927 * } from '@wordpress/components'; 61928 * 61929 * const MyNavigation = () => ( 61930 * <NavigatorProvider initialPath="/"> 61931 * <NavigatorScreen path="/"> 61932 * <p>This is the home screen.</p> 61933 * <NavigatorButton path="/child"> 61934 * Navigate to child screen. 61935 * </NavigatorButton> 61936 * </NavigatorScreen> 61937 * 61938 * <NavigatorScreen path="/child"> 61939 * <p>This is the child screen.</p> 61940 * <NavigatorBackButton> 61941 * Go back (to parent) 61942 * </NavigatorBackButton> 61943 * </NavigatorScreen> 61944 * </NavigatorProvider> 61945 * ); 61946 * ``` 61947 */ 61948 const legacy_NavigatorBackButton = Object.assign(NavigatorBackButton, { 61949 displayName: 'NavigatorBackButton' 61950 }); 61951 61952 /** 61953 * _Note: this component is deprecated. Please use the `NavigatorBackButton` 61954 * component instead._ 61955 * 61956 * @deprecated 61957 */ 61958 const legacy_NavigatorToParentButton = Object.assign(NavigatorToParentButton, { 61959 displayName: 'NavigatorToParentButton' 61960 }); 61961 61962 ;// ./node_modules/@wordpress/components/build-module/navigator/index.js 61963 /** 61964 * Internal dependencies 61965 */ 61966 61967 61968 61969 61970 61971 61972 /** 61973 * The `Navigator` component allows rendering nested views/panels/menus 61974 * (via the `Navigator.Screen` component) and navigate between them 61975 * (via the `Navigator.Button` and `Navigator.BackButton` components). 61976 * 61977 * ```jsx 61978 * import { Navigator } from '@wordpress/components'; 61979 * 61980 * const MyNavigation = () => ( 61981 * <Navigator initialPath="/"> 61982 * <Navigator.Screen path="/"> 61983 * <p>This is the home screen.</p> 61984 * <Navigator.Button path="/child"> 61985 * Navigate to child screen. 61986 * </Navigator.Button> 61987 * </Navigator.Screen> 61988 * 61989 * <Navigator.Screen path="/child"> 61990 * <p>This is the child screen.</p> 61991 * <Navigator.BackButton> 61992 * Go back 61993 * </Navigator.BackButton> 61994 * </Navigator.Screen> 61995 * </Navigator> 61996 * ); 61997 * ``` 61998 */ 61999 const navigator_Navigator = Object.assign(component_Navigator, { 62000 /** 62001 * The `Navigator.Screen` component represents a single view/screen/panel and 62002 * should be used in combination with the `Navigator`, the `Navigator.Button` 62003 * and the `Navigator.BackButton` components. 62004 * 62005 * @example 62006 * ```jsx 62007 * import { Navigator } from '@wordpress/components'; 62008 * 62009 * const MyNavigation = () => ( 62010 * <Navigator initialPath="/"> 62011 * <Navigator.Screen path="/"> 62012 * <p>This is the home screen.</p> 62013 * <Navigator.Button path="/child"> 62014 * Navigate to child screen. 62015 * </Navigator.Button> 62016 * </Navigator.Screen> 62017 * 62018 * <Navigator.Screen path="/child"> 62019 * <p>This is the child screen.</p> 62020 * <Navigator.BackButton> 62021 * Go back 62022 * </Navigator.BackButton> 62023 * </Navigator.Screen> 62024 * </Navigator> 62025 * ); 62026 * ``` 62027 */ 62028 Screen: Object.assign(NavigatorScreen, { 62029 displayName: 'Navigator.Screen' 62030 }), 62031 /** 62032 * The `Navigator.Button` component can be used to navigate to a screen and 62033 * should be used in combination with the `Navigator`, the `Navigator.Screen` 62034 * and the `Navigator.BackButton` components. 62035 * 62036 * @example 62037 * ```jsx 62038 * import { Navigator } from '@wordpress/components'; 62039 * 62040 * const MyNavigation = () => ( 62041 * <Navigator initialPath="/"> 62042 * <Navigator.Screen path="/"> 62043 * <p>This is the home screen.</p> 62044 * <Navigator.Button path="/child"> 62045 * Navigate to child screen. 62046 * </Navigator.Button> 62047 * </Navigator.Screen> 62048 * 62049 * <Navigator.Screen path="/child"> 62050 * <p>This is the child screen.</p> 62051 * <Navigator.BackButton> 62052 * Go back 62053 * </Navigator.BackButton> 62054 * </Navigator.Screen> 62055 * </Navigator> 62056 * ); 62057 * ``` 62058 */ 62059 Button: Object.assign(NavigatorButton, { 62060 displayName: 'Navigator.Button' 62061 }), 62062 /** 62063 * The `Navigator.BackButton` component can be used to navigate to a screen and 62064 * should be used in combination with the `Navigator`, the `Navigator.Screen` 62065 * and the `Navigator.Button` components. 62066 * 62067 * @example 62068 * ```jsx 62069 * import { Navigator } from '@wordpress/components'; 62070 * 62071 * const MyNavigation = () => ( 62072 * <Navigator initialPath="/"> 62073 * <Navigator.Screen path="/"> 62074 * <p>This is the home screen.</p> 62075 * <Navigator.Button path="/child"> 62076 * Navigate to child screen. 62077 * </Navigator.Button> 62078 * </Navigator.Screen> 62079 * 62080 * <Navigator.Screen path="/child"> 62081 * <p>This is the child screen.</p> 62082 * <Navigator.BackButton> 62083 * Go back 62084 * </Navigator.BackButton> 62085 * </Navigator.Screen> 62086 * </Navigator> 62087 * ); 62088 * ``` 62089 */ 62090 BackButton: Object.assign(NavigatorBackButton, { 62091 displayName: 'Navigator.BackButton' 62092 }) 62093 }); 62094 62095 ;// ./node_modules/@wordpress/components/build-module/notice/index.js 62096 /** 62097 * External dependencies 62098 */ 62099 62100 62101 /** 62102 * WordPress dependencies 62103 */ 62104 62105 62106 62107 62108 62109 /** 62110 * Internal dependencies 62111 */ 62112 62113 62114 62115 const notice_noop = () => {}; 62116 62117 /** 62118 * Custom hook which announces the message with the given politeness, if a 62119 * valid message is provided. 62120 */ 62121 function useSpokenMessage(message, politeness) { 62122 const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message); 62123 (0,external_wp_element_namespaceObject.useEffect)(() => { 62124 if (spokenMessage) { 62125 (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness); 62126 } 62127 }, [spokenMessage, politeness]); 62128 } 62129 function getDefaultPoliteness(status) { 62130 switch (status) { 62131 case 'success': 62132 case 'warning': 62133 case 'info': 62134 return 'polite'; 62135 // The default will also catch the 'error' status. 62136 default: 62137 return 'assertive'; 62138 } 62139 } 62140 function getStatusLabel(status) { 62141 switch (status) { 62142 case 'warning': 62143 return (0,external_wp_i18n_namespaceObject.__)('Warning notice'); 62144 case 'info': 62145 return (0,external_wp_i18n_namespaceObject.__)('Information notice'); 62146 case 'error': 62147 return (0,external_wp_i18n_namespaceObject.__)('Error notice'); 62148 // The default will also catch the 'success' status. 62149 default: 62150 return (0,external_wp_i18n_namespaceObject.__)('Notice'); 62151 } 62152 } 62153 62154 /** 62155 * `Notice` is a component used to communicate feedback to the user. 62156 * 62157 *```jsx 62158 * import { Notice } from `@wordpress/components`; 62159 * 62160 * const MyNotice = () => ( 62161 * <Notice status="error">An unknown error occurred.</Notice> 62162 * ); 62163 * ``` 62164 */ 62165 function Notice({ 62166 className, 62167 status = 'info', 62168 children, 62169 spokenMessage = children, 62170 onRemove = notice_noop, 62171 isDismissible = true, 62172 actions = [], 62173 politeness = getDefaultPoliteness(status), 62174 __unstableHTML, 62175 // onDismiss is a callback executed when the notice is dismissed. 62176 // It is distinct from onRemove, which _looks_ like a callback but is 62177 // actually the function to call to remove the notice from the UI. 62178 onDismiss = notice_noop 62179 }) { 62180 useSpokenMessage(spokenMessage, politeness); 62181 const classes = dist_clsx(className, 'components-notice', 'is-' + status, { 62182 'is-dismissible': isDismissible 62183 }); 62184 if (__unstableHTML && typeof children === 'string') { 62185 children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_element_namespaceObject.RawHTML, { 62186 children: children 62187 }); 62188 } 62189 const onDismissNotice = () => { 62190 onDismiss(); 62191 onRemove(); 62192 }; 62193 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62194 className: classes, 62195 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 62196 children: getStatusLabel(status) 62197 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62198 className: "components-notice__content", 62199 children: [children, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 62200 className: "components-notice__actions", 62201 children: actions.map(({ 62202 className: buttonCustomClasses, 62203 label, 62204 isPrimary, 62205 variant, 62206 noDefaultClasses = false, 62207 onClick, 62208 url 62209 }, index) => { 62210 let computedVariant = variant; 62211 if (variant !== 'primary' && !noDefaultClasses) { 62212 computedVariant = !url ? 'secondary' : 'link'; 62213 } 62214 if (typeof computedVariant === 'undefined' && isPrimary) { 62215 computedVariant = 'primary'; 62216 } 62217 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 62218 __next40pxDefaultSize: true, 62219 href: url, 62220 variant: computedVariant, 62221 onClick: url ? undefined : onClick, 62222 className: dist_clsx('components-notice__action', buttonCustomClasses), 62223 children: label 62224 }, index); 62225 }) 62226 })] 62227 }), isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 62228 size: "small", 62229 className: "components-notice__dismiss", 62230 icon: library_close, 62231 label: (0,external_wp_i18n_namespaceObject.__)('Close'), 62232 onClick: onDismissNotice 62233 })] 62234 }); 62235 } 62236 /* harmony default export */ const build_module_notice = (Notice); 62237 62238 ;// ./node_modules/@wordpress/components/build-module/notice/list.js 62239 /** 62240 * External dependencies 62241 */ 62242 62243 62244 /** 62245 * Internal dependencies 62246 */ 62247 62248 62249 62250 const list_noop = () => {}; 62251 62252 /** 62253 * `NoticeList` is a component used to render a collection of notices. 62254 * 62255 *```jsx 62256 * import { Notice, NoticeList } from `@wordpress/components`; 62257 * 62258 * const MyNoticeList = () => { 62259 * const [ notices, setNotices ] = useState( [ 62260 * { 62261 * id: 'second-notice', 62262 * content: 'second notice content', 62263 * }, 62264 * { 62265 * id: 'fist-notice', 62266 * content: 'first notice content', 62267 * }, 62268 * ] ); 62269 * 62270 * const removeNotice = ( id ) => { 62271 * setNotices( notices.filter( ( notice ) => notice.id !== id ) ); 62272 * }; 62273 * 62274 * return <NoticeList notices={ notices } onRemove={ removeNotice } />; 62275 *}; 62276 *``` 62277 */ 62278 function NoticeList({ 62279 notices, 62280 onRemove = list_noop, 62281 className, 62282 children 62283 }) { 62284 const removeNotice = id => () => onRemove(id); 62285 className = dist_clsx('components-notice-list', className); 62286 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62287 className: className, 62288 children: [children, [...notices].reverse().map(notice => { 62289 const { 62290 content, 62291 ...restNotice 62292 } = notice; 62293 return /*#__PURE__*/(0,external_React_.createElement)(build_module_notice, { 62294 ...restNotice, 62295 key: notice.id, 62296 onRemove: removeNotice(notice.id) 62297 }, notice.content); 62298 })] 62299 }); 62300 } 62301 /* harmony default export */ const list = (NoticeList); 62302 62303 ;// ./node_modules/@wordpress/components/build-module/panel/header.js 62304 62305 /** 62306 * Internal dependencies 62307 */ 62308 62309 /** 62310 * `PanelHeader` renders the header for the `Panel`. 62311 * This is used by the `Panel` component under the hood, 62312 * so it does not typically need to be used. 62313 */ 62314 function PanelHeader({ 62315 label, 62316 children 62317 }) { 62318 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62319 className: "components-panel__header", 62320 children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", { 62321 children: label 62322 }), children] 62323 }); 62324 } 62325 /* harmony default export */ const panel_header = (PanelHeader); 62326 62327 ;// ./node_modules/@wordpress/components/build-module/panel/index.js 62328 /** 62329 * External dependencies 62330 */ 62331 62332 62333 /** 62334 * WordPress dependencies 62335 */ 62336 62337 62338 /** 62339 * Internal dependencies 62340 */ 62341 62342 62343 function UnforwardedPanel({ 62344 header, 62345 className, 62346 children 62347 }, ref) { 62348 const classNames = dist_clsx(className, 'components-panel'); 62349 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62350 className: classNames, 62351 ref: ref, 62352 children: [header && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel_header, { 62353 label: header 62354 }), children] 62355 }); 62356 } 62357 62358 /** 62359 * `Panel` expands and collapses multiple sections of content. 62360 * 62361 * ```jsx 62362 * import { Panel, PanelBody, PanelRow } from '@wordpress/components'; 62363 * import { more } from '@wordpress/icons'; 62364 * 62365 * const MyPanel = () => ( 62366 * <Panel header="My Panel"> 62367 * <PanelBody title="My Block Settings" icon={ more } initialOpen={ true }> 62368 * <PanelRow>My Panel Inputs and Labels</PanelRow> 62369 * </PanelBody> 62370 * </Panel> 62371 * ); 62372 * ``` 62373 */ 62374 const Panel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanel); 62375 /* harmony default export */ const panel = (Panel); 62376 62377 ;// ./node_modules/@wordpress/icons/build-module/library/chevron-up.js 62378 /** 62379 * WordPress dependencies 62380 */ 62381 62382 62383 const chevronUp = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 62384 viewBox: "0 0 24 24", 62385 xmlns: "http://www.w3.org/2000/svg", 62386 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 62387 d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" 62388 }) 62389 }); 62390 /* harmony default export */ const chevron_up = (chevronUp); 62391 62392 ;// ./node_modules/@wordpress/components/build-module/panel/body.js 62393 /** 62394 * External dependencies 62395 */ 62396 62397 62398 /** 62399 * WordPress dependencies 62400 */ 62401 62402 62403 62404 62405 /** 62406 * Internal dependencies 62407 */ 62408 62409 62410 62411 62412 62413 const body_noop = () => {}; 62414 function UnforwardedPanelBody(props, ref) { 62415 const { 62416 buttonProps = {}, 62417 children, 62418 className, 62419 icon, 62420 initialOpen, 62421 onToggle = body_noop, 62422 opened, 62423 title, 62424 scrollAfterOpen = true 62425 } = props; 62426 const [isOpened, setIsOpened] = use_controlled_state(opened, { 62427 initial: initialOpen === undefined ? true : initialOpen, 62428 fallback: false 62429 }); 62430 const nodeRef = (0,external_wp_element_namespaceObject.useRef)(null); 62431 62432 // Defaults to 'smooth' scrolling 62433 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView 62434 const scrollBehavior = (0,external_wp_compose_namespaceObject.useReducedMotion)() ? 'auto' : 'smooth'; 62435 const handleOnToggle = event => { 62436 event.preventDefault(); 62437 const next = !isOpened; 62438 setIsOpened(next); 62439 onToggle(next); 62440 }; 62441 62442 // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value. 62443 const scrollAfterOpenRef = (0,external_wp_element_namespaceObject.useRef)(); 62444 scrollAfterOpenRef.current = scrollAfterOpen; 62445 // Runs after initial render. 62446 use_update_effect(() => { 62447 if (isOpened && scrollAfterOpenRef.current && nodeRef.current?.scrollIntoView) { 62448 /* 62449 * Scrolls the content into view when visible. 62450 * This improves the UX when there are multiple stacking <PanelBody /> 62451 * components in a scrollable container. 62452 */ 62453 nodeRef.current.scrollIntoView({ 62454 inline: 'nearest', 62455 block: 'nearest', 62456 behavior: scrollBehavior 62457 }); 62458 } 62459 }, [isOpened, scrollBehavior]); 62460 const classes = dist_clsx('components-panel__body', className, { 62461 'is-opened': isOpened 62462 }); 62463 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62464 className: classes, 62465 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref]), 62466 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelBodyTitle, { 62467 icon: icon, 62468 isOpened: Boolean(isOpened), 62469 onClick: handleOnToggle, 62470 title: title, 62471 ...buttonProps 62472 }), typeof children === 'function' ? children({ 62473 opened: Boolean(isOpened) 62474 }) : isOpened && children] 62475 }); 62476 } 62477 const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)(({ 62478 isOpened, 62479 icon, 62480 title, 62481 ...props 62482 }, ref) => { 62483 if (!title) { 62484 return null; 62485 } 62486 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", { 62487 className: "components-panel__body-title", 62488 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(build_module_button, { 62489 __next40pxDefaultSize: true, 62490 className: "components-panel__body-toggle", 62491 "aria-expanded": isOpened, 62492 ref: ref, 62493 ...props, 62494 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 62495 "aria-hidden": "true", 62496 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 62497 className: "components-panel__arrow", 62498 icon: isOpened ? chevron_up : chevron_down 62499 }) 62500 }), title, icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 62501 icon: icon, 62502 className: "components-panel__icon", 62503 size: 20 62504 })] 62505 }) 62506 }); 62507 }); 62508 const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelBody); 62509 /* harmony default export */ const body = (PanelBody); 62510 62511 ;// ./node_modules/@wordpress/components/build-module/panel/row.js 62512 /** 62513 * External dependencies 62514 */ 62515 62516 62517 /** 62518 * WordPress dependencies 62519 */ 62520 62521 62522 /** 62523 * Internal dependencies 62524 */ 62525 62526 function UnforwardedPanelRow({ 62527 className, 62528 children 62529 }, ref) { 62530 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 62531 className: dist_clsx('components-panel__row', className), 62532 ref: ref, 62533 children: children 62534 }); 62535 } 62536 62537 /** 62538 * `PanelRow` is a generic container for rows within a `PanelBody`. 62539 * It is a flex container with a top margin for spacing. 62540 */ 62541 const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelRow); 62542 /* harmony default export */ const row = (PanelRow); 62543 62544 ;// ./node_modules/@wordpress/components/build-module/placeholder/index.js 62545 /** 62546 * External dependencies 62547 */ 62548 62549 62550 /** 62551 * WordPress dependencies 62552 */ 62553 62554 62555 62556 62557 62558 /** 62559 * Internal dependencies 62560 */ 62561 62562 62563 const PlaceholderIllustration = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 62564 className: "components-placeholder__illustration", 62565 fill: "none", 62566 xmlns: "http://www.w3.org/2000/svg", 62567 viewBox: "0 0 60 60", 62568 preserveAspectRatio: "none", 62569 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 62570 vectorEffect: "non-scaling-stroke", 62571 d: "M60 60 0 0" 62572 }) 62573 }); 62574 62575 /** 62576 * Renders a placeholder. Normally used by blocks to render their empty state. 62577 * 62578 * ```jsx 62579 * import { Placeholder } from '@wordpress/components'; 62580 * import { more } from '@wordpress/icons'; 62581 * 62582 * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />; 62583 * ``` 62584 */ 62585 function Placeholder(props) { 62586 const { 62587 icon, 62588 children, 62589 label, 62590 instructions, 62591 className, 62592 notices, 62593 preview, 62594 isColumnLayout, 62595 withIllustration, 62596 ...additionalProps 62597 } = props; 62598 const [resizeListener, { 62599 width 62600 }] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); 62601 62602 // Since `useResizeObserver` will report a width of `null` until after the 62603 // first render, avoid applying any modifier classes until width is known. 62604 let modifierClassNames; 62605 if (typeof width === 'number') { 62606 modifierClassNames = { 62607 'is-large': width >= 480, 62608 'is-medium': width >= 160 && width < 480, 62609 'is-small': width < 160 62610 }; 62611 } 62612 const classes = dist_clsx('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null); 62613 const fieldsetClasses = dist_clsx('components-placeholder__fieldset', { 62614 'is-column-layout': isColumnLayout 62615 }); 62616 (0,external_wp_element_namespaceObject.useEffect)(() => { 62617 if (instructions) { 62618 (0,external_wp_a11y_namespaceObject.speak)(instructions); 62619 } 62620 }, [instructions]); 62621 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62622 ...additionalProps, 62623 className: classes, 62624 children: [withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 62625 className: "components-placeholder__preview", 62626 children: preview 62627 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 62628 className: "components-placeholder__label", 62629 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 62630 icon: icon 62631 }), label] 62632 }), !!instructions && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 62633 className: "components-placeholder__instructions", 62634 children: instructions 62635 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 62636 className: fieldsetClasses, 62637 children: children 62638 })] 62639 }); 62640 } 62641 /* harmony default export */ const placeholder = (Placeholder); 62642 62643 ;// ./node_modules/@wordpress/components/build-module/progress-bar/styles.js 62644 62645 function progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 62646 /** 62647 * External dependencies 62648 */ 62649 62650 62651 62652 /** 62653 * WordPress dependencies 62654 */ 62655 62656 62657 /** 62658 * Internal dependencies 62659 */ 62660 62661 function animateProgressBar(isRtl = false) { 62662 const animationDirection = isRtl ? 'right' : 'left'; 62663 return emotion_react_browser_esm_keyframes({ 62664 '0%': { 62665 [animationDirection]: '-50%' 62666 }, 62667 '100%': { 62668 [animationDirection]: '100%' 62669 } 62670 }); 62671 } 62672 62673 // Width of the indicator for the indeterminate progress bar 62674 const INDETERMINATE_TRACK_WIDTH = 50; 62675 const styles_Track = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 62676 target: "e15u147w2" 62677 } : 0)("position:relative;overflow:hidden;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusFull, ";outline:2px solid transparent;outline-offset:2px;:where( & ){width:160px;}" + ( true ? "" : 0)); 62678 var progress_bar_styles_ref = true ? { 62679 name: "152sa26", 62680 styles: "width:var(--indicator-width);transition:width 0.4s ease-in-out" 62681 } : 0; 62682 const Indicator = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 62683 target: "e15u147w1" 62684 } : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusFull, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({ 62685 isIndeterminate 62686 }) => isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({ 62687 animationDuration: '1.5s', 62688 animationTimingFunction: 'ease-in-out', 62689 animationIterationCount: 'infinite', 62690 animationName: animateProgressBar((0,external_wp_i18n_namespaceObject.isRTL)()), 62691 width: `$INDETERMINATE_TRACK_WIDTH}%` 62692 }, true ? "" : 0, true ? "" : 0) : progress_bar_styles_ref, ";" + ( true ? "" : 0)); 62693 const ProgressElement = /*#__PURE__*/emotion_styled_base_browser_esm("progress", true ? { 62694 target: "e15u147w0" 62695 } : 0)( true ? { 62696 name: "11fb690", 62697 styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%" 62698 } : 0); 62699 62700 ;// ./node_modules/@wordpress/components/build-module/progress-bar/index.js 62701 /** 62702 * External dependencies 62703 */ 62704 62705 /** 62706 * WordPress dependencies 62707 */ 62708 62709 62710 62711 /** 62712 * Internal dependencies 62713 */ 62714 62715 62716 function UnforwardedProgressBar(props, ref) { 62717 const { 62718 className, 62719 value, 62720 ...progressProps 62721 } = props; 62722 const isIndeterminate = !Number.isFinite(value); 62723 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Track, { 62724 className: className, 62725 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Indicator, { 62726 style: { 62727 '--indicator-width': !isIndeterminate ? `$value}%` : undefined 62728 }, 62729 isIndeterminate: isIndeterminate 62730 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ProgressElement, { 62731 max: 100, 62732 value: value, 62733 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Loading …'), 62734 ref: ref, 62735 ...progressProps 62736 })] 62737 }); 62738 } 62739 62740 /** 62741 * A simple horizontal progress bar component. 62742 * 62743 * Supports two modes: determinate and indeterminate. A progress bar is determinate 62744 * when a specific progress value has been specified (from 0 to 100), and indeterminate 62745 * when a value hasn't been specified. 62746 * 62747 * ```jsx 62748 * import { ProgressBar } from '@wordpress/components'; 62749 * 62750 * const MyLoadingComponent = () => { 62751 * return <ProgressBar />; 62752 * }; 62753 * ``` 62754 */ 62755 const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar); 62756 /* harmony default export */ const progress_bar = (ProgressBar); 62757 62758 ;// ./node_modules/@wordpress/components/build-module/query-controls/terms.js 62759 /** 62760 * Internal dependencies 62761 */ 62762 62763 const ensureParentsAreDefined = terms => { 62764 return terms.every(term => term.parent !== null); 62765 }; 62766 /** 62767 * Returns terms in a tree form. 62768 * 62769 * @param flatTerms Array of terms in flat format. 62770 * 62771 * @return Terms in tree format. 62772 */ 62773 function buildTermsTree(flatTerms) { 62774 const flatTermsWithParentAndChildren = flatTerms.map(term => ({ 62775 children: [], 62776 parent: null, 62777 ...term, 62778 id: String(term.id) 62779 })); 62780 62781 // We use a custom type guard here to ensure that the parent property is 62782 // defined on all terms. The type of the `parent` property is `number | null` 62783 // and we need to ensure that it is `number`. This is because we use the 62784 // `parent` property as a key in the `termsByParent` object. 62785 if (!ensureParentsAreDefined(flatTermsWithParentAndChildren)) { 62786 return flatTermsWithParentAndChildren; 62787 } 62788 const termsByParent = flatTermsWithParentAndChildren.reduce((acc, term) => { 62789 const { 62790 parent 62791 } = term; 62792 if (!acc[parent]) { 62793 acc[parent] = []; 62794 } 62795 acc[parent].push(term); 62796 return acc; 62797 }, {}); 62798 const fillWithChildren = terms => { 62799 return terms.map(term => { 62800 const children = termsByParent[term.id]; 62801 return { 62802 ...term, 62803 children: children && children.length ? fillWithChildren(children) : [] 62804 }; 62805 }); 62806 }; 62807 return fillWithChildren(termsByParent['0'] || []); 62808 } 62809 62810 ;// external ["wp","htmlEntities"] 62811 const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"]; 62812 ;// ./node_modules/@wordpress/components/build-module/tree-select/index.js 62813 /** 62814 * WordPress dependencies 62815 */ 62816 62817 62818 62819 /** 62820 * Internal dependencies 62821 */ 62822 62823 62824 62825 62826 62827 const tree_select_CONTEXT_VALUE = { 62828 BaseControl: { 62829 // Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName` 62830 // via the context system to override the value set by SelectControl. 62831 _overrides: { 62832 __associatedWPComponentName: 'TreeSelect' 62833 } 62834 } 62835 }; 62836 function getSelectOptions(tree, level = 0) { 62837 return tree.flatMap(treeNode => [{ 62838 value: treeNode.id, 62839 label: '\u00A0'.repeat(level * 3) + (0,external_wp_htmlEntities_namespaceObject.decodeEntities)(treeNode.name) 62840 }, ...getSelectOptions(treeNode.children || [], level + 1)]); 62841 } 62842 62843 /** 62844 * Generates a hierarchical select input. 62845 * 62846 * ```jsx 62847 * import { useState } from 'react'; 62848 * import { TreeSelect } from '@wordpress/components'; 62849 * 62850 * const MyTreeSelect = () => { 62851 * const [ page, setPage ] = useState( 'p21' ); 62852 * 62853 * return ( 62854 * <TreeSelect 62855 * __nextHasNoMarginBottom 62856 * __next40pxDefaultSize 62857 * label="Parent page" 62858 * noOptionLabel="No parent page" 62859 * onChange={ ( newPage ) => setPage( newPage ) } 62860 * selectedId={ page } 62861 * tree={ [ 62862 * { 62863 * name: 'Page 1', 62864 * id: 'p1', 62865 * children: [ 62866 * { name: 'Descend 1 of page 1', id: 'p11' }, 62867 * { name: 'Descend 2 of page 1', id: 'p12' }, 62868 * ], 62869 * }, 62870 * { 62871 * name: 'Page 2', 62872 * id: 'p2', 62873 * children: [ 62874 * { 62875 * name: 'Descend 1 of page 2', 62876 * id: 'p21', 62877 * children: [ 62878 * { 62879 * name: 'Descend 1 of Descend 1 of page 2', 62880 * id: 'p211', 62881 * }, 62882 * ], 62883 * }, 62884 * ], 62885 * }, 62886 * ] } 62887 * /> 62888 * ); 62889 * } 62890 * ``` 62891 */ 62892 function TreeSelect(props) { 62893 const { 62894 label, 62895 noOptionLabel, 62896 onChange, 62897 selectedId, 62898 tree = [], 62899 ...restProps 62900 } = useDeprecated36pxDefaultSizeProp(props); 62901 const options = (0,external_wp_element_namespaceObject.useMemo)(() => { 62902 return [noOptionLabel && { 62903 value: '', 62904 label: noOptionLabel 62905 }, ...getSelectOptions(tree)].filter(option => !!option); 62906 }, [noOptionLabel, tree]); 62907 maybeWarnDeprecated36pxSize({ 62908 componentName: 'TreeSelect', 62909 size: restProps.size, 62910 __next40pxDefaultSize: restProps.__next40pxDefaultSize 62911 }); 62912 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { 62913 value: tree_select_CONTEXT_VALUE, 62914 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectControl, { 62915 __shouldNotWarnDeprecated36pxSize: true, 62916 label, 62917 options, 62918 onChange, 62919 value: selectedId, 62920 ...restProps 62921 }) 62922 }); 62923 } 62924 /* harmony default export */ const tree_select = (TreeSelect); 62925 62926 ;// ./node_modules/@wordpress/components/build-module/query-controls/author-select.js 62927 /** 62928 * Internal dependencies 62929 */ 62930 62931 62932 62933 function AuthorSelect({ 62934 __next40pxDefaultSize, 62935 label, 62936 noOptionLabel, 62937 authorList, 62938 selectedAuthorId, 62939 onChange: onChangeProp 62940 }) { 62941 if (!authorList) { 62942 return null; 62943 } 62944 const termsTree = buildTermsTree(authorList); 62945 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_select, { 62946 label, 62947 noOptionLabel, 62948 onChange: onChangeProp, 62949 tree: termsTree, 62950 selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined, 62951 __nextHasNoMarginBottom: true, 62952 __next40pxDefaultSize: __next40pxDefaultSize 62953 }); 62954 } 62955 62956 ;// ./node_modules/@wordpress/components/build-module/query-controls/category-select.js 62957 /** 62958 * Internal dependencies 62959 */ 62960 62961 62962 62963 /** 62964 * WordPress dependencies 62965 */ 62966 62967 62968 function CategorySelect({ 62969 __next40pxDefaultSize, 62970 label, 62971 noOptionLabel, 62972 categoriesList, 62973 selectedCategoryId, 62974 onChange: onChangeProp, 62975 ...props 62976 }) { 62977 const termsTree = (0,external_wp_element_namespaceObject.useMemo)(() => { 62978 return buildTermsTree(categoriesList); 62979 }, [categoriesList]); 62980 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_select, { 62981 label, 62982 noOptionLabel, 62983 onChange: onChangeProp, 62984 tree: termsTree, 62985 selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined, 62986 ...props, 62987 __nextHasNoMarginBottom: true, 62988 __next40pxDefaultSize: __next40pxDefaultSize 62989 }); 62990 } 62991 62992 ;// ./node_modules/@wordpress/components/build-module/query-controls/index.js 62993 /** 62994 * WordPress dependencies 62995 */ 62996 62997 62998 /** 62999 * Internal dependencies 63000 */ 63001 63002 63003 63004 63005 63006 63007 63008 const DEFAULT_MIN_ITEMS = 1; 63009 const DEFAULT_MAX_ITEMS = 100; 63010 const MAX_CATEGORIES_SUGGESTIONS = 20; 63011 function isSingleCategorySelection(props) { 63012 return 'categoriesList' in props; 63013 } 63014 function isMultipleCategorySelection(props) { 63015 return 'categorySuggestions' in props; 63016 } 63017 const defaultOrderByOptions = [{ 63018 label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'), 63019 value: 'date/desc' 63020 }, { 63021 label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'), 63022 value: 'date/asc' 63023 }, { 63024 /* translators: Label for ordering posts by title in ascending order. */ 63025 label: (0,external_wp_i18n_namespaceObject.__)('A → Z'), 63026 value: 'title/asc' 63027 }, { 63028 /* translators: Label for ordering posts by title in descending order. */ 63029 label: (0,external_wp_i18n_namespaceObject.__)('Z → A'), 63030 value: 'title/desc' 63031 }]; 63032 63033 /** 63034 * Controls to query for posts. 63035 * 63036 * ```jsx 63037 * const MyQueryControls = () => ( 63038 * <QueryControls 63039 * { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } } 63040 * onOrderByChange={ ( newOrderBy ) => { 63041 * updateQuery( { orderBy: newOrderBy } ) 63042 * } 63043 * onOrderChange={ ( newOrder ) => { 63044 * updateQuery( { order: newOrder } ) 63045 * } 63046 * categoriesList={ categories } 63047 * selectedCategoryId={ category } 63048 * onCategoryChange={ ( newCategory ) => { 63049 * updateQuery( { category: newCategory } ) 63050 * } 63051 * onNumberOfItemsChange={ ( newNumberOfItems ) => { 63052 * updateQuery( { numberOfItems: newNumberOfItems } ) 63053 * } } 63054 * /> 63055 * ); 63056 * ``` 63057 */ 63058 function QueryControls({ 63059 authorList, 63060 selectedAuthorId, 63061 numberOfItems, 63062 order, 63063 orderBy, 63064 orderByOptions = defaultOrderByOptions, 63065 maxItems = DEFAULT_MAX_ITEMS, 63066 minItems = DEFAULT_MIN_ITEMS, 63067 onAuthorChange, 63068 onNumberOfItemsChange, 63069 onOrderChange, 63070 onOrderByChange, 63071 // Props for single OR multiple category selection are not destructured here, 63072 // but instead are destructured inline where necessary. 63073 ...props 63074 }) { 63075 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { 63076 spacing: "4", 63077 className: "components-query-controls", 63078 children: [onOrderChange && onOrderByChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { 63079 __nextHasNoMarginBottom: true, 63080 __next40pxDefaultSize: true, 63081 label: (0,external_wp_i18n_namespaceObject.__)('Order by'), 63082 value: orderBy === undefined || order === undefined ? undefined : `$orderBy}/$order}`, 63083 options: orderByOptions, 63084 onChange: value => { 63085 if (typeof value !== 'string') { 63086 return; 63087 } 63088 const [newOrderBy, newOrder] = value.split('/'); 63089 if (newOrder !== order) { 63090 onOrderChange(newOrder); 63091 } 63092 if (newOrderBy !== orderBy) { 63093 onOrderByChange(newOrderBy); 63094 } 63095 } 63096 }, "query-controls-order-select"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CategorySelect, { 63097 __next40pxDefaultSize: true, 63098 categoriesList: props.categoriesList, 63099 label: (0,external_wp_i18n_namespaceObject.__)('Category'), 63100 noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'categories'), 63101 selectedCategoryId: props.selectedCategoryId, 63102 onChange: props.onCategoryChange 63103 }, "query-controls-category-select"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(form_token_field, { 63104 __next40pxDefaultSize: true, 63105 __nextHasNoMarginBottom: true, 63106 label: (0,external_wp_i18n_namespaceObject.__)('Categories'), 63107 value: props.selectedCategories && props.selectedCategories.map(item => ({ 63108 id: item.id, 63109 // Keeping the fallback to `item.value` for legacy reasons, 63110 // even if items of `selectedCategories` should not have a 63111 // `value` property. 63112 // @ts-expect-error 63113 value: item.name || item.value 63114 })), 63115 suggestions: Object.keys(props.categorySuggestions), 63116 onChange: props.onCategoryChange, 63117 maxSuggestions: MAX_CATEGORIES_SUGGESTIONS 63118 }, "query-controls-categories-select"), onAuthorChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AuthorSelect, { 63119 __next40pxDefaultSize: true, 63120 authorList: authorList, 63121 label: (0,external_wp_i18n_namespaceObject.__)('Author'), 63122 noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'authors'), 63123 selectedAuthorId: selectedAuthorId, 63124 onChange: onAuthorChange 63125 }, "query-controls-author-select"), onNumberOfItemsChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, { 63126 __nextHasNoMarginBottom: true, 63127 __next40pxDefaultSize: true, 63128 label: (0,external_wp_i18n_namespaceObject.__)('Number of items'), 63129 value: numberOfItems, 63130 onChange: onNumberOfItemsChange, 63131 min: minItems, 63132 max: maxItems, 63133 required: true 63134 }, "query-controls-range-control")] 63135 }); 63136 } 63137 /* harmony default export */ const query_controls = (QueryControls); 63138 63139 ;// ./node_modules/@wordpress/components/build-module/radio-group/context.js 63140 /** 63141 * External dependencies 63142 */ 63143 63144 /** 63145 * WordPress dependencies 63146 */ 63147 63148 const RadioGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 63149 store: undefined, 63150 disabled: undefined 63151 }); 63152 63153 ;// ./node_modules/@wordpress/components/build-module/radio-group/radio.js 63154 /** 63155 * WordPress dependencies 63156 */ 63157 63158 63159 /** 63160 * External dependencies 63161 */ 63162 63163 63164 /** 63165 * Internal dependencies 63166 */ 63167 63168 63169 63170 63171 function UnforwardedRadio({ 63172 value, 63173 children, 63174 ...props 63175 }, ref) { 63176 const { 63177 store, 63178 disabled 63179 } = (0,external_wp_element_namespaceObject.useContext)(RadioGroupContext); 63180 const selectedValue = useStoreState(store, 'value'); 63181 const isChecked = selectedValue !== undefined && selectedValue === value; 63182 maybeWarnDeprecated36pxSize({ 63183 componentName: 'Radio', 63184 size: undefined, 63185 __next40pxDefaultSize: props.__next40pxDefaultSize 63186 }); 63187 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, { 63188 disabled: disabled, 63189 store: store, 63190 ref: ref, 63191 value: value, 63192 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 63193 variant: isChecked ? 'primary' : 'secondary', 63194 ...props 63195 }), 63196 children: children || value 63197 }); 63198 } 63199 63200 /** 63201 * @deprecated Use `RadioControl` or `ToggleGroupControl` instead. 63202 */ 63203 const radio_Radio = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRadio); 63204 /* harmony default export */ const radio_group_radio = (radio_Radio); 63205 63206 ;// ./node_modules/@wordpress/components/build-module/radio-group/index.js 63207 /** 63208 * External dependencies 63209 */ 63210 63211 63212 /** 63213 * WordPress dependencies 63214 */ 63215 63216 63217 63218 63219 /** 63220 * Internal dependencies 63221 */ 63222 63223 63224 63225 function UnforwardedRadioGroup({ 63226 label, 63227 checked, 63228 defaultChecked, 63229 disabled, 63230 onChange, 63231 children, 63232 ...props 63233 }, ref) { 63234 const radioStore = useRadioStore({ 63235 value: checked, 63236 defaultValue: defaultChecked, 63237 setValue: newValue => { 63238 onChange?.(newValue !== null && newValue !== void 0 ? newValue : undefined); 63239 }, 63240 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 63241 }); 63242 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 63243 store: radioStore, 63244 disabled 63245 }), [radioStore, disabled]); 63246 external_wp_deprecated_default()('wp.components.__experimentalRadioGroup', { 63247 alternative: 'wp.components.RadioControl or wp.components.__experimentalToggleGroupControl', 63248 since: '6.8' 63249 }); 63250 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroupContext.Provider, { 63251 value: contextValue, 63252 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, { 63253 store: radioStore, 63254 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_group, { 63255 __shouldNotWarnDeprecated: true, 63256 children: children 63257 }), 63258 "aria-label": label, 63259 ref: ref, 63260 ...props 63261 }) 63262 }); 63263 } 63264 63265 /** 63266 * @deprecated Use `RadioControl` or `ToggleGroupControl` instead. 63267 */ 63268 const radio_group_RadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRadioGroup); 63269 /* harmony default export */ const radio_group = (radio_group_RadioGroup); 63270 63271 ;// ./node_modules/@wordpress/components/build-module/radio-control/index.js 63272 /** 63273 * External dependencies 63274 */ 63275 63276 /** 63277 * WordPress dependencies 63278 */ 63279 63280 63281 /** 63282 * Internal dependencies 63283 */ 63284 63285 63286 63287 63288 63289 function generateOptionDescriptionId(radioGroupId, index) { 63290 return `$radioGroupId}-$index}-option-description`; 63291 } 63292 function generateOptionId(radioGroupId, index) { 63293 return `$radioGroupId}-$index}`; 63294 } 63295 function generateHelpId(radioGroupId) { 63296 return `$radioGroupId}__help`; 63297 } 63298 63299 /** 63300 * Render a user interface to select the user type using radio inputs. 63301 * 63302 * ```jsx 63303 * import { RadioControl } from '@wordpress/components'; 63304 * import { useState } from '@wordpress/element'; 63305 * 63306 * const MyRadioControl = () => { 63307 * const [ option, setOption ] = useState( 'a' ); 63308 * 63309 * return ( 63310 * <RadioControl 63311 * label="User type" 63312 * help="The type of the current user" 63313 * selected={ option } 63314 * options={ [ 63315 * { label: 'Author', value: 'a' }, 63316 * { label: 'Editor', value: 'e' }, 63317 * ] } 63318 * onChange={ ( value ) => setOption( value ) } 63319 * /> 63320 * ); 63321 * }; 63322 * ``` 63323 */ 63324 function RadioControl(props) { 63325 const { 63326 label, 63327 className, 63328 selected, 63329 help, 63330 onChange, 63331 hideLabelFromVision, 63332 options = [], 63333 id: preferredId, 63334 ...additionalProps 63335 } = props; 63336 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl, 'inspector-radio-control', preferredId); 63337 const onChangeValue = event => onChange(event.target.value); 63338 if (!options?.length) { 63339 return null; 63340 } 63341 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", { 63342 id: id, 63343 className: dist_clsx(className, 'components-radio-control'), 63344 "aria-describedby": !!help ? generateHelpId(id) : undefined, 63345 children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { 63346 as: "legend", 63347 children: label 63348 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { 63349 as: "legend", 63350 children: label 63351 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { 63352 spacing: 3, 63353 className: dist_clsx('components-radio-control__group-wrapper', { 63354 'has-help': !!help 63355 }), 63356 children: options.map((option, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 63357 className: "components-radio-control__option", 63358 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { 63359 id: generateOptionId(id, index), 63360 className: "components-radio-control__input", 63361 type: "radio", 63362 name: id, 63363 value: option.value, 63364 onChange: onChangeValue, 63365 checked: option.value === selected, 63366 "aria-describedby": !!option.description ? generateOptionDescriptionId(id, index) : undefined, 63367 ...additionalProps 63368 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("label", { 63369 className: "components-radio-control__label", 63370 htmlFor: generateOptionId(id, index), 63371 children: option.label 63372 }), !!option.description ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, { 63373 __nextHasNoMarginBottom: true, 63374 id: generateOptionDescriptionId(id, index), 63375 className: "components-radio-control__option-description", 63376 children: option.description 63377 }) : null] 63378 }, generateOptionId(id, index))) 63379 }), !!help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, { 63380 __nextHasNoMarginBottom: true, 63381 id: generateHelpId(id), 63382 className: "components-base-control__help", 63383 children: help 63384 })] 63385 }); 63386 } 63387 /* harmony default export */ const radio_control = (RadioControl); 63388 63389 ;// ./node_modules/re-resizable/lib/resizer.js 63390 var resizer_extends = (undefined && undefined.__extends) || (function () { 63391 var extendStatics = function (d, b) { 63392 extendStatics = Object.setPrototypeOf || 63393 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 63394 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 63395 return extendStatics(d, b); 63396 }; 63397 return function (d, b) { 63398 extendStatics(d, b); 63399 function __() { this.constructor = d; } 63400 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 63401 }; 63402 })(); 63403 var resizer_assign = (undefined && undefined.__assign) || function () { 63404 resizer_assign = Object.assign || function(t) { 63405 for (var s, i = 1, n = arguments.length; i < n; i++) { 63406 s = arguments[i]; 63407 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 63408 t[p] = s[p]; 63409 } 63410 return t; 63411 }; 63412 return resizer_assign.apply(this, arguments); 63413 }; 63414 63415 var rowSizeBase = { 63416 width: '100%', 63417 height: '10px', 63418 top: '0px', 63419 left: '0px', 63420 cursor: 'row-resize', 63421 }; 63422 var colSizeBase = { 63423 width: '10px', 63424 height: '100%', 63425 top: '0px', 63426 left: '0px', 63427 cursor: 'col-resize', 63428 }; 63429 var edgeBase = { 63430 width: '20px', 63431 height: '20px', 63432 position: 'absolute', 63433 }; 63434 var resizer_styles = { 63435 top: resizer_assign(resizer_assign({}, rowSizeBase), { top: '-5px' }), 63436 right: resizer_assign(resizer_assign({}, colSizeBase), { left: undefined, right: '-5px' }), 63437 bottom: resizer_assign(resizer_assign({}, rowSizeBase), { top: undefined, bottom: '-5px' }), 63438 left: resizer_assign(resizer_assign({}, colSizeBase), { left: '-5px' }), 63439 topRight: resizer_assign(resizer_assign({}, edgeBase), { right: '-10px', top: '-10px', cursor: 'ne-resize' }), 63440 bottomRight: resizer_assign(resizer_assign({}, edgeBase), { right: '-10px', bottom: '-10px', cursor: 'se-resize' }), 63441 bottomLeft: resizer_assign(resizer_assign({}, edgeBase), { left: '-10px', bottom: '-10px', cursor: 'sw-resize' }), 63442 topLeft: resizer_assign(resizer_assign({}, edgeBase), { left: '-10px', top: '-10px', cursor: 'nw-resize' }), 63443 }; 63444 var Resizer = /** @class */ (function (_super) { 63445 resizer_extends(Resizer, _super); 63446 function Resizer() { 63447 var _this = _super !== null && _super.apply(this, arguments) || this; 63448 _this.onMouseDown = function (e) { 63449 _this.props.onResizeStart(e, _this.props.direction); 63450 }; 63451 _this.onTouchStart = function (e) { 63452 _this.props.onResizeStart(e, _this.props.direction); 63453 }; 63454 return _this; 63455 } 63456 Resizer.prototype.render = function () { 63457 return (external_React_.createElement("div", { className: this.props.className || '', style: resizer_assign(resizer_assign({ position: 'absolute', userSelect: 'none' }, resizer_styles[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children)); 63458 }; 63459 return Resizer; 63460 }(external_React_.PureComponent)); 63461 63462 63463 ;// ./node_modules/re-resizable/lib/index.js 63464 var lib_extends = (undefined && undefined.__extends) || (function () { 63465 var extendStatics = function (d, b) { 63466 extendStatics = Object.setPrototypeOf || 63467 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 63468 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 63469 return extendStatics(d, b); 63470 }; 63471 return function (d, b) { 63472 extendStatics(d, b); 63473 function __() { this.constructor = d; } 63474 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 63475 }; 63476 })(); 63477 var lib_assign = (undefined && undefined.__assign) || function () { 63478 lib_assign = Object.assign || function(t) { 63479 for (var s, i = 1, n = arguments.length; i < n; i++) { 63480 s = arguments[i]; 63481 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 63482 t[p] = s[p]; 63483 } 63484 return t; 63485 }; 63486 return lib_assign.apply(this, arguments); 63487 }; 63488 63489 63490 63491 var DEFAULT_SIZE = { 63492 width: 'auto', 63493 height: 'auto', 63494 }; 63495 var lib_clamp = function (n, min, max) { return Math.max(Math.min(n, max), min); }; 63496 var snap = function (n, size) { return Math.round(n / size) * size; }; 63497 var hasDirection = function (dir, target) { 63498 return new RegExp(dir, 'i').test(target); 63499 }; 63500 // INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`. 63501 var isTouchEvent = function (event) { 63502 return Boolean(event.touches && event.touches.length); 63503 }; 63504 var isMouseEvent = function (event) { 63505 return Boolean((event.clientX || event.clientX === 0) && 63506 (event.clientY || event.clientY === 0)); 63507 }; 63508 var findClosestSnap = function (n, snapArray, snapGap) { 63509 if (snapGap === void 0) { snapGap = 0; } 63510 var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0); 63511 var gap = Math.abs(snapArray[closestGapIndex] - n); 63512 return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n; 63513 }; 63514 var getStringSize = function (n) { 63515 n = n.toString(); 63516 if (n === 'auto') { 63517 return n; 63518 } 63519 if (n.endsWith('px')) { 63520 return n; 63521 } 63522 if (n.endsWith('%')) { 63523 return n; 63524 } 63525 if (n.endsWith('vh')) { 63526 return n; 63527 } 63528 if (n.endsWith('vw')) { 63529 return n; 63530 } 63531 if (n.endsWith('vmax')) { 63532 return n; 63533 } 63534 if (n.endsWith('vmin')) { 63535 return n; 63536 } 63537 return n + "px"; 63538 }; 63539 var getPixelSize = function (size, parentSize, innerWidth, innerHeight) { 63540 if (size && typeof size === 'string') { 63541 if (size.endsWith('px')) { 63542 return Number(size.replace('px', '')); 63543 } 63544 if (size.endsWith('%')) { 63545 var ratio = Number(size.replace('%', '')) / 100; 63546 return parentSize * ratio; 63547 } 63548 if (size.endsWith('vw')) { 63549 var ratio = Number(size.replace('vw', '')) / 100; 63550 return innerWidth * ratio; 63551 } 63552 if (size.endsWith('vh')) { 63553 var ratio = Number(size.replace('vh', '')) / 100; 63554 return innerHeight * ratio; 63555 } 63556 } 63557 return size; 63558 }; 63559 var calculateNewMax = function (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) { 63560 maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight); 63561 maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight); 63562 minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight); 63563 minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight); 63564 return { 63565 maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth), 63566 maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight), 63567 minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth), 63568 minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight), 63569 }; 63570 }; 63571 var definedProps = [ 63572 'as', 63573 'style', 63574 'className', 63575 'grid', 63576 'snap', 63577 'bounds', 63578 'boundsByDirection', 63579 'size', 63580 'defaultSize', 63581 'minWidth', 63582 'minHeight', 63583 'maxWidth', 63584 'maxHeight', 63585 'lockAspectRatio', 63586 'lockAspectRatioExtraWidth', 63587 'lockAspectRatioExtraHeight', 63588 'enable', 63589 'handleStyles', 63590 'handleClasses', 63591 'handleWrapperStyle', 63592 'handleWrapperClass', 63593 'children', 63594 'onResizeStart', 63595 'onResize', 63596 'onResizeStop', 63597 'handleComponent', 63598 'scale', 63599 'resizeRatio', 63600 'snapGap', 63601 ]; 63602 // HACK: This class is used to calculate % size. 63603 var baseClassName = '__resizable_base__'; 63604 var Resizable = /** @class */ (function (_super) { 63605 lib_extends(Resizable, _super); 63606 function Resizable(props) { 63607 var _this = _super.call(this, props) || this; 63608 _this.ratio = 1; 63609 _this.resizable = null; 63610 // For parent boundary 63611 _this.parentLeft = 0; 63612 _this.parentTop = 0; 63613 // For boundary 63614 _this.resizableLeft = 0; 63615 _this.resizableRight = 0; 63616 _this.resizableTop = 0; 63617 _this.resizableBottom = 0; 63618 // For target boundary 63619 _this.targetLeft = 0; 63620 _this.targetTop = 0; 63621 _this.appendBase = function () { 63622 if (!_this.resizable || !_this.window) { 63623 return null; 63624 } 63625 var parent = _this.parentNode; 63626 if (!parent) { 63627 return null; 63628 } 63629 var element = _this.window.document.createElement('div'); 63630 element.style.width = '100%'; 63631 element.style.height = '100%'; 63632 element.style.position = 'absolute'; 63633 element.style.transform = 'scale(0, 0)'; 63634 element.style.left = '0'; 63635 element.style.flex = '0 0 100%'; 63636 if (element.classList) { 63637 element.classList.add(baseClassName); 63638 } 63639 else { 63640 element.className += baseClassName; 63641 } 63642 parent.appendChild(element); 63643 return element; 63644 }; 63645 _this.removeBase = function (base) { 63646 var parent = _this.parentNode; 63647 if (!parent) { 63648 return; 63649 } 63650 parent.removeChild(base); 63651 }; 63652 _this.ref = function (c) { 63653 if (c) { 63654 _this.resizable = c; 63655 } 63656 }; 63657 _this.state = { 63658 isResizing: false, 63659 width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined' 63660 ? 'auto' 63661 : _this.propsSize && _this.propsSize.width, 63662 height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined' 63663 ? 'auto' 63664 : _this.propsSize && _this.propsSize.height, 63665 direction: 'right', 63666 original: { 63667 x: 0, 63668 y: 0, 63669 width: 0, 63670 height: 0, 63671 }, 63672 backgroundStyle: { 63673 height: '100%', 63674 width: '100%', 63675 backgroundColor: 'rgba(0,0,0,0)', 63676 cursor: 'auto', 63677 opacity: 0, 63678 position: 'fixed', 63679 zIndex: 9999, 63680 top: '0', 63681 left: '0', 63682 bottom: '0', 63683 right: '0', 63684 }, 63685 flexBasis: undefined, 63686 }; 63687 _this.onResizeStart = _this.onResizeStart.bind(_this); 63688 _this.onMouseMove = _this.onMouseMove.bind(_this); 63689 _this.onMouseUp = _this.onMouseUp.bind(_this); 63690 return _this; 63691 } 63692 Object.defineProperty(Resizable.prototype, "parentNode", { 63693 get: function () { 63694 if (!this.resizable) { 63695 return null; 63696 } 63697 return this.resizable.parentNode; 63698 }, 63699 enumerable: false, 63700 configurable: true 63701 }); 63702 Object.defineProperty(Resizable.prototype, "window", { 63703 get: function () { 63704 if (!this.resizable) { 63705 return null; 63706 } 63707 if (!this.resizable.ownerDocument) { 63708 return null; 63709 } 63710 return this.resizable.ownerDocument.defaultView; 63711 }, 63712 enumerable: false, 63713 configurable: true 63714 }); 63715 Object.defineProperty(Resizable.prototype, "propsSize", { 63716 get: function () { 63717 return this.props.size || this.props.defaultSize || DEFAULT_SIZE; 63718 }, 63719 enumerable: false, 63720 configurable: true 63721 }); 63722 Object.defineProperty(Resizable.prototype, "size", { 63723 get: function () { 63724 var width = 0; 63725 var height = 0; 63726 if (this.resizable && this.window) { 63727 var orgWidth = this.resizable.offsetWidth; 63728 var orgHeight = this.resizable.offsetHeight; 63729 // HACK: Set position `relative` to get parent size. 63730 // This is because when re-resizable set `absolute`, I can not get base width correctly. 63731 var orgPosition = this.resizable.style.position; 63732 if (orgPosition !== 'relative') { 63733 this.resizable.style.position = 'relative'; 63734 } 63735 // INFO: Use original width or height if set auto. 63736 width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth; 63737 height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight; 63738 // Restore original position 63739 this.resizable.style.position = orgPosition; 63740 } 63741 return { width: width, height: height }; 63742 }, 63743 enumerable: false, 63744 configurable: true 63745 }); 63746 Object.defineProperty(Resizable.prototype, "sizeStyle", { 63747 get: function () { 63748 var _this = this; 63749 var size = this.props.size; 63750 var getSize = function (key) { 63751 if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') { 63752 return 'auto'; 63753 } 63754 if (_this.propsSize && _this.propsSize[key] && _this.propsSize[key].toString().endsWith('%')) { 63755 if (_this.state[key].toString().endsWith('%')) { 63756 return _this.state[key].toString(); 63757 } 63758 var parentSize = _this.getParentSize(); 63759 var value = Number(_this.state[key].toString().replace('px', '')); 63760 var percent = (value / parentSize[key]) * 100; 63761 return percent + "%"; 63762 } 63763 return getStringSize(_this.state[key]); 63764 }; 63765 var width = size && typeof size.width !== 'undefined' && !this.state.isResizing 63766 ? getStringSize(size.width) 63767 : getSize('width'); 63768 var height = size && typeof size.height !== 'undefined' && !this.state.isResizing 63769 ? getStringSize(size.height) 63770 : getSize('height'); 63771 return { width: width, height: height }; 63772 }, 63773 enumerable: false, 63774 configurable: true 63775 }); 63776 Resizable.prototype.getParentSize = function () { 63777 if (!this.parentNode) { 63778 if (!this.window) { 63779 return { width: 0, height: 0 }; 63780 } 63781 return { width: this.window.innerWidth, height: this.window.innerHeight }; 63782 } 63783 var base = this.appendBase(); 63784 if (!base) { 63785 return { width: 0, height: 0 }; 63786 } 63787 // INFO: To calculate parent width with flex layout 63788 var wrapChanged = false; 63789 var wrap = this.parentNode.style.flexWrap; 63790 if (wrap !== 'wrap') { 63791 wrapChanged = true; 63792 this.parentNode.style.flexWrap = 'wrap'; 63793 // HACK: Use relative to get parent padding size 63794 } 63795 base.style.position = 'relative'; 63796 base.style.minWidth = '100%'; 63797 base.style.minHeight = '100%'; 63798 var size = { 63799 width: base.offsetWidth, 63800 height: base.offsetHeight, 63801 }; 63802 if (wrapChanged) { 63803 this.parentNode.style.flexWrap = wrap; 63804 } 63805 this.removeBase(base); 63806 return size; 63807 }; 63808 Resizable.prototype.bindEvents = function () { 63809 if (this.window) { 63810 this.window.addEventListener('mouseup', this.onMouseUp); 63811 this.window.addEventListener('mousemove', this.onMouseMove); 63812 this.window.addEventListener('mouseleave', this.onMouseUp); 63813 this.window.addEventListener('touchmove', this.onMouseMove, { 63814 capture: true, 63815 passive: false, 63816 }); 63817 this.window.addEventListener('touchend', this.onMouseUp); 63818 } 63819 }; 63820 Resizable.prototype.unbindEvents = function () { 63821 if (this.window) { 63822 this.window.removeEventListener('mouseup', this.onMouseUp); 63823 this.window.removeEventListener('mousemove', this.onMouseMove); 63824 this.window.removeEventListener('mouseleave', this.onMouseUp); 63825 this.window.removeEventListener('touchmove', this.onMouseMove, true); 63826 this.window.removeEventListener('touchend', this.onMouseUp); 63827 } 63828 }; 63829 Resizable.prototype.componentDidMount = function () { 63830 if (!this.resizable || !this.window) { 63831 return; 63832 } 63833 var computedStyle = this.window.getComputedStyle(this.resizable); 63834 this.setState({ 63835 width: this.state.width || this.size.width, 63836 height: this.state.height || this.size.height, 63837 flexBasis: computedStyle.flexBasis !== 'auto' ? computedStyle.flexBasis : undefined, 63838 }); 63839 }; 63840 Resizable.prototype.componentWillUnmount = function () { 63841 if (this.window) { 63842 this.unbindEvents(); 63843 } 63844 }; 63845 Resizable.prototype.createSizeForCssProperty = function (newSize, kind) { 63846 var propsSize = this.propsSize && this.propsSize[kind]; 63847 return this.state[kind] === 'auto' && 63848 this.state.original[kind] === newSize && 63849 (typeof propsSize === 'undefined' || propsSize === 'auto') 63850 ? 'auto' 63851 : newSize; 63852 }; 63853 Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) { 63854 var boundsByDirection = this.props.boundsByDirection; 63855 var direction = this.state.direction; 63856 var widthByDirection = boundsByDirection && hasDirection('left', direction); 63857 var heightByDirection = boundsByDirection && hasDirection('top', direction); 63858 var boundWidth; 63859 var boundHeight; 63860 if (this.props.bounds === 'parent') { 63861 var parent_1 = this.parentNode; 63862 if (parent_1) { 63863 boundWidth = widthByDirection 63864 ? this.resizableRight - this.parentLeft 63865 : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft); 63866 boundHeight = heightByDirection 63867 ? this.resizableBottom - this.parentTop 63868 : parent_1.offsetHeight + (this.parentTop - this.resizableTop); 63869 } 63870 } 63871 else if (this.props.bounds === 'window') { 63872 if (this.window) { 63873 boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft; 63874 boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop; 63875 } 63876 } 63877 else if (this.props.bounds) { 63878 boundWidth = widthByDirection 63879 ? this.resizableRight - this.targetLeft 63880 : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft); 63881 boundHeight = heightByDirection 63882 ? this.resizableBottom - this.targetTop 63883 : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop); 63884 } 63885 if (boundWidth && Number.isFinite(boundWidth)) { 63886 maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth; 63887 } 63888 if (boundHeight && Number.isFinite(boundHeight)) { 63889 maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight; 63890 } 63891 return { maxWidth: maxWidth, maxHeight: maxHeight }; 63892 }; 63893 Resizable.prototype.calculateNewSizeFromDirection = function (clientX, clientY) { 63894 var scale = this.props.scale || 1; 63895 var resizeRatio = this.props.resizeRatio || 1; 63896 var _a = this.state, direction = _a.direction, original = _a.original; 63897 var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth; 63898 var newWidth = original.width; 63899 var newHeight = original.height; 63900 var extraHeight = lockAspectRatioExtraHeight || 0; 63901 var extraWidth = lockAspectRatioExtraWidth || 0; 63902 if (hasDirection('right', direction)) { 63903 newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale; 63904 if (lockAspectRatio) { 63905 newHeight = (newWidth - extraWidth) / this.ratio + extraHeight; 63906 } 63907 } 63908 if (hasDirection('left', direction)) { 63909 newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale; 63910 if (lockAspectRatio) { 63911 newHeight = (newWidth - extraWidth) / this.ratio + extraHeight; 63912 } 63913 } 63914 if (hasDirection('bottom', direction)) { 63915 newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale; 63916 if (lockAspectRatio) { 63917 newWidth = (newHeight - extraHeight) * this.ratio + extraWidth; 63918 } 63919 } 63920 if (hasDirection('top', direction)) { 63921 newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale; 63922 if (lockAspectRatio) { 63923 newWidth = (newHeight - extraHeight) * this.ratio + extraWidth; 63924 } 63925 } 63926 return { newWidth: newWidth, newHeight: newHeight }; 63927 }; 63928 Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) { 63929 var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth; 63930 var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width; 63931 var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width; 63932 var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height; 63933 var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height; 63934 var extraHeight = lockAspectRatioExtraHeight || 0; 63935 var extraWidth = lockAspectRatioExtraWidth || 0; 63936 if (lockAspectRatio) { 63937 var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth; 63938 var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth; 63939 var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight; 63940 var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight; 63941 var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth); 63942 var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth); 63943 var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight); 63944 var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight); 63945 newWidth = lib_clamp(newWidth, lockedMinWidth, lockedMaxWidth); 63946 newHeight = lib_clamp(newHeight, lockedMinHeight, lockedMaxHeight); 63947 } 63948 else { 63949 newWidth = lib_clamp(newWidth, computedMinWidth, computedMaxWidth); 63950 newHeight = lib_clamp(newHeight, computedMinHeight, computedMaxHeight); 63951 } 63952 return { newWidth: newWidth, newHeight: newHeight }; 63953 }; 63954 Resizable.prototype.setBoundingClientRect = function () { 63955 // For parent boundary 63956 if (this.props.bounds === 'parent') { 63957 var parent_2 = this.parentNode; 63958 if (parent_2) { 63959 var parentRect = parent_2.getBoundingClientRect(); 63960 this.parentLeft = parentRect.left; 63961 this.parentTop = parentRect.top; 63962 } 63963 } 63964 // For target(html element) boundary 63965 if (this.props.bounds && typeof this.props.bounds !== 'string') { 63966 var targetRect = this.props.bounds.getBoundingClientRect(); 63967 this.targetLeft = targetRect.left; 63968 this.targetTop = targetRect.top; 63969 } 63970 // For boundary 63971 if (this.resizable) { 63972 var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom; 63973 this.resizableLeft = left; 63974 this.resizableRight = right; 63975 this.resizableTop = top_1; 63976 this.resizableBottom = bottom; 63977 } 63978 }; 63979 Resizable.prototype.onResizeStart = function (event, direction) { 63980 if (!this.resizable || !this.window) { 63981 return; 63982 } 63983 var clientX = 0; 63984 var clientY = 0; 63985 if (event.nativeEvent && isMouseEvent(event.nativeEvent)) { 63986 clientX = event.nativeEvent.clientX; 63987 clientY = event.nativeEvent.clientY; 63988 } 63989 else if (event.nativeEvent && isTouchEvent(event.nativeEvent)) { 63990 clientX = event.nativeEvent.touches[0].clientX; 63991 clientY = event.nativeEvent.touches[0].clientY; 63992 } 63993 if (this.props.onResizeStart) { 63994 if (this.resizable) { 63995 var startResize = this.props.onResizeStart(event, direction, this.resizable); 63996 if (startResize === false) { 63997 return; 63998 } 63999 } 64000 } 64001 // Fix #168 64002 if (this.props.size) { 64003 if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) { 64004 this.setState({ height: this.props.size.height }); 64005 } 64006 if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) { 64007 this.setState({ width: this.props.size.width }); 64008 } 64009 } 64010 // For lockAspectRatio case 64011 this.ratio = 64012 typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height; 64013 var flexBasis; 64014 var computedStyle = this.window.getComputedStyle(this.resizable); 64015 if (computedStyle.flexBasis !== 'auto') { 64016 var parent_3 = this.parentNode; 64017 if (parent_3) { 64018 var dir = this.window.getComputedStyle(parent_3).flexDirection; 64019 this.flexDir = dir.startsWith('row') ? 'row' : 'column'; 64020 flexBasis = computedStyle.flexBasis; 64021 } 64022 } 64023 // For boundary 64024 this.setBoundingClientRect(); 64025 this.bindEvents(); 64026 var state = { 64027 original: { 64028 x: clientX, 64029 y: clientY, 64030 width: this.size.width, 64031 height: this.size.height, 64032 }, 64033 isResizing: true, 64034 backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || 'auto' }), 64035 direction: direction, 64036 flexBasis: flexBasis, 64037 }; 64038 this.setState(state); 64039 }; 64040 Resizable.prototype.onMouseMove = function (event) { 64041 var _this = this; 64042 if (!this.state.isResizing || !this.resizable || !this.window) { 64043 return; 64044 } 64045 if (this.window.TouchEvent && isTouchEvent(event)) { 64046 try { 64047 event.preventDefault(); 64048 event.stopPropagation(); 64049 } 64050 catch (e) { 64051 // Ignore on fail 64052 } 64053 } 64054 var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight; 64055 var clientX = isTouchEvent(event) ? event.touches[0].clientX : event.clientX; 64056 var clientY = isTouchEvent(event) ? event.touches[0].clientY : event.clientY; 64057 var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height; 64058 var parentSize = this.getParentSize(); 64059 var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight); 64060 maxWidth = max.maxWidth; 64061 maxHeight = max.maxHeight; 64062 minWidth = max.minWidth; 64063 minHeight = max.minHeight; 64064 // Calculate new size 64065 var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth; 64066 // Calculate max size from boundary settings 64067 var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight); 64068 if (this.props.snap && this.props.snap.x) { 64069 newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap); 64070 } 64071 if (this.props.snap && this.props.snap.y) { 64072 newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap); 64073 } 64074 // Calculate new size from aspect ratio 64075 var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight }); 64076 newWidth = newSize.newWidth; 64077 newHeight = newSize.newHeight; 64078 if (this.props.grid) { 64079 var newGridWidth = snap(newWidth, this.props.grid[0]); 64080 var newGridHeight = snap(newHeight, this.props.grid[1]); 64081 var gap = this.props.snapGap || 0; 64082 newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth; 64083 newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight; 64084 } 64085 var delta = { 64086 width: newWidth - original.width, 64087 height: newHeight - original.height, 64088 }; 64089 if (width && typeof width === 'string') { 64090 if (width.endsWith('%')) { 64091 var percent = (newWidth / parentSize.width) * 100; 64092 newWidth = percent + "%"; 64093 } 64094 else if (width.endsWith('vw')) { 64095 var vw = (newWidth / this.window.innerWidth) * 100; 64096 newWidth = vw + "vw"; 64097 } 64098 else if (width.endsWith('vh')) { 64099 var vh = (newWidth / this.window.innerHeight) * 100; 64100 newWidth = vh + "vh"; 64101 } 64102 } 64103 if (height && typeof height === 'string') { 64104 if (height.endsWith('%')) { 64105 var percent = (newHeight / parentSize.height) * 100; 64106 newHeight = percent + "%"; 64107 } 64108 else if (height.endsWith('vw')) { 64109 var vw = (newHeight / this.window.innerWidth) * 100; 64110 newHeight = vw + "vw"; 64111 } 64112 else if (height.endsWith('vh')) { 64113 var vh = (newHeight / this.window.innerHeight) * 100; 64114 newHeight = vh + "vh"; 64115 } 64116 } 64117 var newState = { 64118 width: this.createSizeForCssProperty(newWidth, 'width'), 64119 height: this.createSizeForCssProperty(newHeight, 'height'), 64120 }; 64121 if (this.flexDir === 'row') { 64122 newState.flexBasis = newState.width; 64123 } 64124 else if (this.flexDir === 'column') { 64125 newState.flexBasis = newState.height; 64126 } 64127 // For v18, update state sync 64128 (0,external_ReactDOM_namespaceObject.flushSync)(function () { 64129 _this.setState(newState); 64130 }); 64131 if (this.props.onResize) { 64132 this.props.onResize(event, direction, this.resizable, delta); 64133 } 64134 }; 64135 Resizable.prototype.onMouseUp = function (event) { 64136 var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original; 64137 if (!isResizing || !this.resizable) { 64138 return; 64139 } 64140 var delta = { 64141 width: this.size.width - original.width, 64142 height: this.size.height - original.height, 64143 }; 64144 if (this.props.onResizeStop) { 64145 this.props.onResizeStop(event, direction, this.resizable, delta); 64146 } 64147 if (this.props.size) { 64148 this.setState(this.props.size); 64149 } 64150 this.unbindEvents(); 64151 this.setState({ 64152 isResizing: false, 64153 backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: 'auto' }), 64154 }); 64155 }; 64156 Resizable.prototype.updateSize = function (size) { 64157 this.setState({ width: size.width, height: size.height }); 64158 }; 64159 Resizable.prototype.renderResizer = function () { 64160 var _this = this; 64161 var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent; 64162 if (!enable) { 64163 return null; 64164 } 64165 var resizers = Object.keys(enable).map(function (dir) { 64166 if (enable[dir] !== false) { 64167 return (external_React_.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null)); 64168 } 64169 return null; 64170 }); 64171 // #93 Wrap the resize box in span (will not break 100% width/height) 64172 return (external_React_.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers)); 64173 }; 64174 Resizable.prototype.render = function () { 64175 var _this = this; 64176 var extendsProps = Object.keys(this.props).reduce(function (acc, key) { 64177 if (definedProps.indexOf(key) !== -1) { 64178 return acc; 64179 } 64180 acc[key] = _this.props[key]; 64181 return acc; 64182 }, {}); 64183 var style = lib_assign(lib_assign(lib_assign({ position: 'relative', userSelect: this.state.isResizing ? 'none' : 'auto' }, this.props.style), this.sizeStyle), { maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, minHeight: this.props.minHeight, boxSizing: 'border-box', flexShrink: 0 }); 64184 if (this.state.flexBasis) { 64185 style.flexBasis = this.state.flexBasis; 64186 } 64187 var Wrapper = this.props.as || 'div'; 64188 return (external_React_.createElement(Wrapper, lib_assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps), 64189 this.state.isResizing && external_React_.createElement("div", { style: this.state.backgroundStyle }), 64190 this.props.children, 64191 this.renderResizer())); 64192 }; 64193 Resizable.defaultProps = { 64194 as: 'div', 64195 onResizeStart: function () { }, 64196 onResize: function () { }, 64197 onResizeStop: function () { }, 64198 enable: { 64199 top: true, 64200 right: true, 64201 bottom: true, 64202 left: true, 64203 topRight: true, 64204 bottomRight: true, 64205 bottomLeft: true, 64206 topLeft: true, 64207 }, 64208 style: {}, 64209 grid: [1, 1], 64210 lockAspectRatio: false, 64211 lockAspectRatioExtraWidth: 0, 64212 lockAspectRatioExtraHeight: 0, 64213 scale: 1, 64214 resizeRatio: 1, 64215 snapGap: 0, 64216 }; 64217 return Resizable; 64218 }(external_React_.PureComponent)); 64219 64220 64221 ;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/utils.js 64222 /** 64223 * WordPress dependencies 64224 */ 64225 64226 64227 const utils_noop = () => {}; 64228 const POSITIONS = { 64229 bottom: 'bottom', 64230 corner: 'corner' 64231 }; 64232 /** 64233 * Custom hook that manages resize listener events. It also provides a label 64234 * based on current resize width x height values. 64235 * 64236 * @param props 64237 * @param props.axis Only shows the label corresponding to the axis. 64238 * @param props.fadeTimeout Duration (ms) before deactivating the resize label. 64239 * @param props.onResize Callback when a resize occurs. Provides { width, height } callback. 64240 * @param props.position Adjusts label value. 64241 * @param props.showPx Whether to add `PX` to the label. 64242 * 64243 * @return Properties for hook. 64244 */ 64245 function useResizeLabel({ 64246 axis, 64247 fadeTimeout = 180, 64248 onResize = utils_noop, 64249 position = POSITIONS.bottom, 64250 showPx = false 64251 }) { 64252 /* 64253 * The width/height values derive from this special useResizeObserver hook. 64254 * This custom hook uses the ResizeObserver API to listen for resize events. 64255 */ 64256 const [resizeListener, sizes] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); 64257 64258 /* 64259 * Indicates if the x/y axis is preferred. 64260 * If set, we will avoid resetting the moveX and moveY values. 64261 * This will allow for the preferred axis values to persist in the label. 64262 */ 64263 const isAxisControlled = !!axis; 64264 64265 /* 64266 * The moveX and moveY values are used to track whether the label should 64267 * display width, height, or width x height. 64268 */ 64269 const [moveX, setMoveX] = (0,external_wp_element_namespaceObject.useState)(false); 64270 const [moveY, setMoveY] = (0,external_wp_element_namespaceObject.useState)(false); 64271 64272 /* 64273 * Cached dimension values to check for width/height updates from the 64274 * sizes property from useResizeAware() 64275 */ 64276 const { 64277 width, 64278 height 64279 } = sizes; 64280 const heightRef = (0,external_wp_element_namespaceObject.useRef)(height); 64281 const widthRef = (0,external_wp_element_namespaceObject.useRef)(width); 64282 64283 /* 64284 * This timeout is used with setMoveX and setMoveY to determine of 64285 * both width and height values have changed at (roughly) the same time. 64286 */ 64287 const moveTimeoutRef = (0,external_wp_element_namespaceObject.useRef)(); 64288 const debounceUnsetMoveXY = (0,external_wp_element_namespaceObject.useCallback)(() => { 64289 const unsetMoveXY = () => { 64290 /* 64291 * If axis is controlled, we will avoid resetting the moveX and moveY values. 64292 * This will allow for the preferred axis values to persist in the label. 64293 */ 64294 if (isAxisControlled) { 64295 return; 64296 } 64297 setMoveX(false); 64298 setMoveY(false); 64299 }; 64300 if (moveTimeoutRef.current) { 64301 window.clearTimeout(moveTimeoutRef.current); 64302 } 64303 moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout); 64304 }, [fadeTimeout, isAxisControlled]); 64305 (0,external_wp_element_namespaceObject.useEffect)(() => { 64306 /* 64307 * On the initial render of useResizeAware, the height and width values are 64308 * null. They are calculated then set using via an internal useEffect hook. 64309 */ 64310 const isRendered = width !== null || height !== null; 64311 if (!isRendered) { 64312 return; 64313 } 64314 const didWidthChange = width !== widthRef.current; 64315 const didHeightChange = height !== heightRef.current; 64316 if (!didWidthChange && !didHeightChange) { 64317 return; 64318 } 64319 64320 /* 64321 * After the initial render, the useResizeAware will set the first 64322 * width and height values. We'll sync those values with our 64323 * width and height refs. However, we shouldn't render our Tooltip 64324 * label on this first cycle. 64325 */ 64326 if (width && !widthRef.current && height && !heightRef.current) { 64327 widthRef.current = width; 64328 heightRef.current = height; 64329 return; 64330 } 64331 64332 /* 64333 * After the first cycle, we can track width and height changes. 64334 */ 64335 if (didWidthChange) { 64336 setMoveX(true); 64337 widthRef.current = width; 64338 } 64339 if (didHeightChange) { 64340 setMoveY(true); 64341 heightRef.current = height; 64342 } 64343 onResize({ 64344 width, 64345 height 64346 }); 64347 debounceUnsetMoveXY(); 64348 }, [width, height, onResize, debounceUnsetMoveXY]); 64349 const label = getSizeLabel({ 64350 axis, 64351 height, 64352 moveX, 64353 moveY, 64354 position, 64355 showPx, 64356 width 64357 }); 64358 return { 64359 label, 64360 resizeListener 64361 }; 64362 } 64363 /** 64364 * Gets the resize label based on width and height values (as well as recent changes). 64365 * 64366 * @param props 64367 * @param props.axis Only shows the label corresponding to the axis. 64368 * @param props.height Height value. 64369 * @param props.moveX Recent width (x axis) changes. 64370 * @param props.moveY Recent width (y axis) changes. 64371 * @param props.position Adjusts label value. 64372 * @param props.showPx Whether to add `PX` to the label. 64373 * @param props.width Width value. 64374 * 64375 * @return The rendered label. 64376 */ 64377 function getSizeLabel({ 64378 axis, 64379 height, 64380 moveX = false, 64381 moveY = false, 64382 position = POSITIONS.bottom, 64383 showPx = false, 64384 width 64385 }) { 64386 if (!moveX && !moveY) { 64387 return undefined; 64388 } 64389 64390 /* 64391 * Corner position... 64392 * We want the label to appear like width x height. 64393 */ 64394 if (position === POSITIONS.corner) { 64395 return `$width} x $height}`; 64396 } 64397 64398 /* 64399 * Other POSITIONS... 64400 * The label will combine both width x height values if both 64401 * values have recently been changed. 64402 * 64403 * Otherwise, only width or height will be displayed. 64404 * The `PX` unit will be added, if specified by the `showPx` prop. 64405 */ 64406 const labelUnit = showPx ? ' px' : ''; 64407 if (axis) { 64408 if (axis === 'x' && moveX) { 64409 return `$width}$labelUnit}`; 64410 } 64411 if (axis === 'y' && moveY) { 64412 return `$height}$labelUnit}`; 64413 } 64414 } 64415 if (moveX && moveY) { 64416 return `$width} x $height}`; 64417 } 64418 if (moveX) { 64419 return `$width}$labelUnit}`; 64420 } 64421 if (moveY) { 64422 return `$height}$labelUnit}`; 64423 } 64424 return undefined; 64425 } 64426 64427 ;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js 64428 64429 function resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 64430 /** 64431 * External dependencies 64432 */ 64433 64434 /** 64435 * Internal dependencies 64436 */ 64437 64438 64439 const resize_tooltip_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 64440 target: "e1wq7y4k3" 64441 } : 0)( true ? { 64442 name: "1cd7zoc", 64443 styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0" 64444 } : 0); 64445 const TooltipWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 64446 target: "e1wq7y4k2" 64447 } : 0)( true ? { 64448 name: "ajymcs", 64449 styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear" 64450 } : 0); 64451 const resize_tooltip_styles_Tooltip = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 64452 target: "e1wq7y4k1" 64453 } : 0)("background:", COLORS.theme.foreground, ";border-radius:", config_values.radiusSmall, ";box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.theme.foregroundInverted, ";padding:4px 8px;position:relative;" + ( true ? "" : 0)); 64454 64455 // TODO: Resolve need to use &&& to increase specificity 64456 // https://github.com/WordPress/gutenberg/issues/18483 64457 64458 const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 64459 target: "e1wq7y4k0" 64460 } : 0)("&&&{color:", COLORS.theme.foregroundInverted, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0)); 64461 64462 ;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js 64463 /** 64464 * External dependencies 64465 */ 64466 64467 /** 64468 * WordPress dependencies 64469 */ 64470 64471 64472 64473 /** 64474 * Internal dependencies 64475 */ 64476 64477 64478 64479 64480 const CORNER_OFFSET = 4; 64481 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5; 64482 function resize_tooltip_label_Label({ 64483 label, 64484 position = POSITIONS.corner, 64485 zIndex = 1000, 64486 ...props 64487 }, ref) { 64488 const showLabel = !!label; 64489 const isBottom = position === POSITIONS.bottom; 64490 const isCorner = position === POSITIONS.corner; 64491 if (!showLabel) { 64492 return null; 64493 } 64494 let style = { 64495 opacity: showLabel ? 1 : undefined, 64496 zIndex 64497 }; 64498 let labelStyle = {}; 64499 if (isBottom) { 64500 style = { 64501 ...style, 64502 position: 'absolute', 64503 bottom: CURSOR_OFFSET_TOP * -1, 64504 left: '50%', 64505 transform: 'translate(-50%, 0)' 64506 }; 64507 labelStyle = { 64508 transform: `translate(0, 100%)` 64509 }; 64510 } 64511 if (isCorner) { 64512 style = { 64513 ...style, 64514 position: 'absolute', 64515 top: CORNER_OFFSET, 64516 right: (0,external_wp_i18n_namespaceObject.isRTL)() ? undefined : CORNER_OFFSET, 64517 left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined 64518 }; 64519 } 64520 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipWrapper, { 64521 "aria-hidden": "true", 64522 className: "components-resizable-tooltip__tooltip-wrapper", 64523 ref: ref, 64524 style: style, 64525 ...props, 64526 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip_styles_Tooltip, { 64527 className: "components-resizable-tooltip__tooltip", 64528 style: labelStyle, 64529 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LabelText, { 64530 as: "span", 64531 children: label 64532 }) 64533 }) 64534 }); 64535 } 64536 const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label); 64537 /* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent); 64538 64539 ;// ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js 64540 /** 64541 * External dependencies 64542 */ 64543 64544 /** 64545 * WordPress dependencies 64546 */ 64547 64548 64549 /** 64550 * Internal dependencies 64551 */ 64552 64553 64554 64555 64556 const resize_tooltip_noop = () => {}; 64557 function ResizeTooltip({ 64558 axis, 64559 className, 64560 fadeTimeout = 180, 64561 isVisible = true, 64562 labelRef, 64563 onResize = resize_tooltip_noop, 64564 position = POSITIONS.bottom, 64565 showPx = true, 64566 zIndex = 1000, 64567 ...props 64568 }, ref) { 64569 const { 64570 label, 64571 resizeListener 64572 } = useResizeLabel({ 64573 axis, 64574 fadeTimeout, 64575 onResize, 64576 showPx, 64577 position 64578 }); 64579 if (!isVisible) { 64580 return null; 64581 } 64582 const classes = dist_clsx('components-resize-tooltip', className); 64583 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(resize_tooltip_styles_Root, { 64584 "aria-hidden": "true", 64585 className: classes, 64586 ref: ref, 64587 ...props, 64588 children: [resizeListener, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip_label, { 64589 "aria-hidden": props['aria-hidden'], 64590 label: label, 64591 position: position, 64592 ref: labelRef, 64593 zIndex: zIndex 64594 })] 64595 }); 64596 } 64597 const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip); 64598 /* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent); 64599 64600 ;// ./node_modules/@wordpress/components/build-module/resizable-box/index.js 64601 /** 64602 * WordPress dependencies 64603 */ 64604 64605 64606 /** 64607 * External dependencies 64608 */ 64609 64610 64611 /** 64612 * Internal dependencies 64613 */ 64614 64615 64616 const HANDLE_CLASS_NAME = 'components-resizable-box__handle'; 64617 const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle'; 64618 const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle'; 64619 const HANDLE_CLASSES = { 64620 top: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'), 64621 right: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'), 64622 bottom: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'), 64623 left: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'), 64624 topLeft: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'), 64625 topRight: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'), 64626 bottomRight: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'), 64627 bottomLeft: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left') 64628 }; 64629 64630 // Removes the inline styles in the drag handles. 64631 const HANDLE_STYLES_OVERRIDES = { 64632 width: undefined, 64633 height: undefined, 64634 top: undefined, 64635 right: undefined, 64636 bottom: undefined, 64637 left: undefined 64638 }; 64639 const HANDLE_STYLES = { 64640 top: HANDLE_STYLES_OVERRIDES, 64641 right: HANDLE_STYLES_OVERRIDES, 64642 bottom: HANDLE_STYLES_OVERRIDES, 64643 left: HANDLE_STYLES_OVERRIDES, 64644 topLeft: HANDLE_STYLES_OVERRIDES, 64645 topRight: HANDLE_STYLES_OVERRIDES, 64646 bottomRight: HANDLE_STYLES_OVERRIDES, 64647 bottomLeft: HANDLE_STYLES_OVERRIDES 64648 }; 64649 function UnforwardedResizableBox({ 64650 className, 64651 children, 64652 showHandle = true, 64653 __experimentalShowTooltip: showTooltip = false, 64654 __experimentalTooltipProps: tooltipProps = {}, 64655 ...props 64656 }, ref) { 64657 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Resizable, { 64658 className: dist_clsx('components-resizable-box__container', showHandle && 'has-show-handle', className) 64659 // Add a focusable element within the drag handle. Unfortunately, 64660 // `re-resizable` does not make them properly focusable by default, 64661 // causing focus to move the the block wrapper which triggers block 64662 // drag. 64663 , 64664 handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 64665 tabIndex: -1 64666 }, key)])), 64667 handleClasses: HANDLE_CLASSES, 64668 handleStyles: HANDLE_STYLES, 64669 ref: ref, 64670 ...props, 64671 children: [children, showTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip, { 64672 ...tooltipProps 64673 })] 64674 }); 64675 } 64676 const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox); 64677 /* harmony default export */ const resizable_box = (ResizableBox); 64678 64679 ;// ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js 64680 /** 64681 * External dependencies 64682 */ 64683 64684 64685 /** 64686 * WordPress dependencies 64687 */ 64688 64689 64690 /** 64691 * Internal dependencies 64692 */ 64693 64694 /** 64695 * A wrapper component that maintains its aspect ratio when resized. 64696 * 64697 * ```jsx 64698 * import { ResponsiveWrapper } from '@wordpress/components'; 64699 * 64700 * const MyResponsiveWrapper = () => ( 64701 * <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }> 64702 * <img 64703 * src="https://s.w.org/style/images/about/WordPress-logotype-standard.png" 64704 * alt="WordPress" 64705 * /> 64706 * </ResponsiveWrapper> 64707 * ); 64708 * ``` 64709 */ 64710 function ResponsiveWrapper({ 64711 naturalWidth, 64712 naturalHeight, 64713 children, 64714 isInline = false 64715 }) { 64716 if (external_wp_element_namespaceObject.Children.count(children) !== 1) { 64717 return null; 64718 } 64719 const TagName = isInline ? 'span' : 'div'; 64720 let aspectRatio; 64721 if (naturalWidth && naturalHeight) { 64722 aspectRatio = `$naturalWidth} / $naturalHeight}`; 64723 } 64724 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TagName, { 64725 className: "components-responsive-wrapper", 64726 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 64727 children: (0,external_wp_element_namespaceObject.cloneElement)(children, { 64728 className: dist_clsx('components-responsive-wrapper__content', children.props.className), 64729 style: { 64730 ...children.props.style, 64731 aspectRatio 64732 } 64733 }) 64734 }) 64735 }); 64736 } 64737 /* harmony default export */ const responsive_wrapper = (ResponsiveWrapper); 64738 64739 ;// ./node_modules/@wordpress/components/build-module/sandbox/index.js 64740 /** 64741 * WordPress dependencies 64742 */ 64743 64744 64745 64746 /** 64747 * Internal dependencies 64748 */ 64749 64750 const observeAndResizeJS = function () { 64751 const { 64752 MutationObserver 64753 } = window; 64754 if (!MutationObserver || !document.body || !window.parent) { 64755 return; 64756 } 64757 function sendResize() { 64758 const clientBoundingRect = document.body.getBoundingClientRect(); 64759 window.parent.postMessage({ 64760 action: 'resize', 64761 width: clientBoundingRect.width, 64762 height: clientBoundingRect.height 64763 }, '*'); 64764 } 64765 const observer = new MutationObserver(sendResize); 64766 observer.observe(document.body, { 64767 attributes: true, 64768 attributeOldValue: false, 64769 characterData: true, 64770 characterDataOldValue: false, 64771 childList: true, 64772 subtree: true 64773 }); 64774 window.addEventListener('load', sendResize, true); 64775 64776 // Hack: Remove viewport unit styles, as these are relative 64777 // the iframe root and interfere with our mechanism for 64778 // determining the unconstrained page bounds. 64779 function removeViewportStyles(ruleOrNode) { 64780 if (ruleOrNode.style) { 64781 ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) { 64782 if (/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(ruleOrNode.style[style])) { 64783 ruleOrNode.style[style] = ''; 64784 } 64785 }); 64786 } 64787 } 64788 Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles); 64789 Array.prototype.forEach.call(document.styleSheets, function (stylesheet) { 64790 Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles); 64791 }); 64792 document.body.style.position = 'absolute'; 64793 document.body.style.width = '100%'; 64794 document.body.setAttribute('data-resizable-iframe-connected', ''); 64795 sendResize(); 64796 64797 // Resize events can change the width of elements with 100% width, but we don't 64798 // get an DOM mutations for that, so do the resize when the window is resized, too. 64799 window.addEventListener('resize', sendResize, true); 64800 }; 64801 64802 // TODO: These styles shouldn't be coupled with WordPress. 64803 const style = ` 64804 body { 64805 margin: 0; 64806 } 64807 html, 64808 body, 64809 body > div { 64810 width: 100%; 64811 } 64812 html.wp-has-aspect-ratio, 64813 body.wp-has-aspect-ratio, 64814 body.wp-has-aspect-ratio > div, 64815 body.wp-has-aspect-ratio > div iframe { 64816 width: 100%; 64817 height: 100%; 64818 overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */ 64819 } 64820 body > div > * { 64821 margin-top: 0 !important; /* Has to have !important to override inline styles. */ 64822 margin-bottom: 0 !important; 64823 } 64824 `; 64825 64826 /** 64827 * This component provides an isolated environment for arbitrary HTML via iframes. 64828 * 64829 * ```jsx 64830 * import { SandBox } from '@wordpress/components'; 64831 * 64832 * const MySandBox = () => ( 64833 * <SandBox html="<p>Content</p>" title="SandBox" type="embed" /> 64834 * ); 64835 * ``` 64836 */ 64837 function SandBox({ 64838 html = '', 64839 title = '', 64840 type, 64841 styles = [], 64842 scripts = [], 64843 onFocus, 64844 tabIndex 64845 }) { 64846 const ref = (0,external_wp_element_namespaceObject.useRef)(); 64847 const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(0); 64848 const [height, setHeight] = (0,external_wp_element_namespaceObject.useState)(0); 64849 function isFrameAccessible() { 64850 try { 64851 return !!ref.current?.contentDocument?.body; 64852 } catch (e) { 64853 return false; 64854 } 64855 } 64856 function trySandBox(forceRerender = false) { 64857 if (!isFrameAccessible()) { 64858 return; 64859 } 64860 const { 64861 contentDocument, 64862 ownerDocument 64863 } = ref.current; 64864 if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) { 64865 return; 64866 } 64867 64868 // Put the html snippet into a html document, and then write it to the iframe's document 64869 // we can use this in the future to inject custom styles or scripts. 64870 // Scripts go into the body rather than the head, to support embedded content such as Instagram 64871 // that expect the scripts to be part of the body. 64872 const htmlDoc = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("html", { 64873 lang: ownerDocument.documentElement.lang, 64874 className: type, 64875 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("head", { 64876 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("title", { 64877 children: title 64878 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", { 64879 dangerouslySetInnerHTML: { 64880 __html: style 64881 } 64882 }), styles.map((rules, i) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", { 64883 dangerouslySetInnerHTML: { 64884 __html: rules 64885 } 64886 }, i))] 64887 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("body", { 64888 "data-resizable-iframe-connected": "data-resizable-iframe-connected", 64889 className: type, 64890 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 64891 dangerouslySetInnerHTML: { 64892 __html: html 64893 } 64894 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("script", { 64895 type: "text/javascript", 64896 dangerouslySetInnerHTML: { 64897 __html: `($observeAndResizeJS.toString()})();` 64898 } 64899 }), scripts.map(src => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("script", { 64900 src: src 64901 }, src))] 64902 })] 64903 }); 64904 64905 // Writing the document like this makes it act in the same way as if it was 64906 // loaded over the network, so DOM creation and mutation, script execution, etc. 64907 // all work as expected. 64908 contentDocument.open(); 64909 contentDocument.write('<!DOCTYPE html>' + (0,external_wp_element_namespaceObject.renderToString)(htmlDoc)); 64910 contentDocument.close(); 64911 } 64912 (0,external_wp_element_namespaceObject.useEffect)(() => { 64913 trySandBox(); 64914 function tryNoForceSandBox() { 64915 trySandBox(false); 64916 } 64917 function checkMessageForResize(event) { 64918 const iframe = ref.current; 64919 64920 // Verify that the mounted element is the source of the message. 64921 if (!iframe || iframe.contentWindow !== event.source) { 64922 return; 64923 } 64924 64925 // Attempt to parse the message data as JSON if passed as string. 64926 let data = event.data || {}; 64927 if ('string' === typeof data) { 64928 try { 64929 data = JSON.parse(data); 64930 } catch (e) {} 64931 } 64932 64933 // Update the state only if the message is formatted as we expect, 64934 // i.e. as an object with a 'resize' action. 64935 if ('resize' !== data.action) { 64936 return; 64937 } 64938 setWidth(data.width); 64939 setHeight(data.height); 64940 } 64941 const iframe = ref.current; 64942 const defaultView = iframe?.ownerDocument?.defaultView; 64943 64944 // This used to be registered using <iframe onLoad={} />, but it made the iframe blank 64945 // after reordering the containing block. See these two issues for more details: 64946 // https://github.com/WordPress/gutenberg/issues/6146 64947 // https://github.com/facebook/react/issues/18752 64948 iframe?.addEventListener('load', tryNoForceSandBox, false); 64949 defaultView?.addEventListener('message', checkMessageForResize); 64950 return () => { 64951 iframe?.removeEventListener('load', tryNoForceSandBox, false); 64952 defaultView?.removeEventListener('message', checkMessageForResize); 64953 }; 64954 // Passing `exhaustive-deps` will likely involve a more detailed refactor. 64955 // See https://github.com/WordPress/gutenberg/pull/44378 64956 }, []); 64957 (0,external_wp_element_namespaceObject.useEffect)(() => { 64958 trySandBox(); 64959 // Passing `exhaustive-deps` will likely involve a more detailed refactor. 64960 // See https://github.com/WordPress/gutenberg/pull/44378 64961 }, [title, styles, scripts]); 64962 (0,external_wp_element_namespaceObject.useEffect)(() => { 64963 trySandBox(true); 64964 // Passing `exhaustive-deps` will likely involve a more detailed refactor. 64965 // See https://github.com/WordPress/gutenberg/pull/44378 64966 }, [html, type]); 64967 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("iframe", { 64968 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]), 64969 title: title, 64970 tabIndex: tabIndex, 64971 className: "components-sandbox", 64972 sandbox: "allow-scripts allow-same-origin allow-presentation", 64973 onFocus: onFocus, 64974 width: Math.ceil(width), 64975 height: Math.ceil(height) 64976 }); 64977 } 64978 /* harmony default export */ const sandbox = (SandBox); 64979 64980 ;// ./node_modules/@wordpress/components/build-module/snackbar/index.js 64981 /** 64982 * External dependencies 64983 */ 64984 64985 64986 64987 /** 64988 * WordPress dependencies 64989 */ 64990 64991 64992 64993 64994 64995 /** 64996 * Internal dependencies 64997 */ 64998 64999 65000 const NOTICE_TIMEOUT = 10000; 65001 65002 /** 65003 * Custom hook which announces the message with the given politeness, if a 65004 * valid message is provided. 65005 * 65006 * @param message Message to announce. 65007 * @param politeness Politeness to announce. 65008 */ 65009 function snackbar_useSpokenMessage(message, politeness) { 65010 const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message); 65011 (0,external_wp_element_namespaceObject.useEffect)(() => { 65012 if (spokenMessage) { 65013 (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness); 65014 } 65015 }, [spokenMessage, politeness]); 65016 } 65017 function UnforwardedSnackbar({ 65018 className, 65019 children, 65020 spokenMessage = children, 65021 politeness = 'polite', 65022 actions = [], 65023 onRemove, 65024 icon = null, 65025 explicitDismiss = false, 65026 // onDismiss is a callback executed when the snackbar is dismissed. 65027 // It is distinct from onRemove, which _looks_ like a callback but is 65028 // actually the function to call to remove the snackbar from the UI. 65029 onDismiss, 65030 listRef 65031 }, ref) { 65032 function dismissMe(event) { 65033 if (event && event.preventDefault) { 65034 event.preventDefault(); 65035 } 65036 65037 // Prevent focus loss by moving it to the list element. 65038 listRef?.current?.focus(); 65039 onDismiss?.(); 65040 onRemove?.(); 65041 } 65042 function onActionClick(event, onClick) { 65043 event.stopPropagation(); 65044 onRemove?.(); 65045 if (onClick) { 65046 onClick(event); 65047 } 65048 } 65049 snackbar_useSpokenMessage(spokenMessage, politeness); 65050 65051 // The `onDismiss/onRemove` can have unstable references, 65052 // trigger side-effect cleanup, and reset timers. 65053 const callbacksRef = (0,external_wp_element_namespaceObject.useRef)({ 65054 onDismiss, 65055 onRemove 65056 }); 65057 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 65058 callbacksRef.current = { 65059 onDismiss, 65060 onRemove 65061 }; 65062 }); 65063 (0,external_wp_element_namespaceObject.useEffect)(() => { 65064 // Only set up the timeout dismiss if we're not explicitly dismissing. 65065 const timeoutHandle = setTimeout(() => { 65066 if (!explicitDismiss) { 65067 callbacksRef.current.onDismiss?.(); 65068 callbacksRef.current.onRemove?.(); 65069 } 65070 }, NOTICE_TIMEOUT); 65071 return () => clearTimeout(timeoutHandle); 65072 }, [explicitDismiss]); 65073 const classes = dist_clsx(className, 'components-snackbar', { 65074 'components-snackbar-explicit-dismiss': !!explicitDismiss 65075 }); 65076 if (actions && actions.length > 1) { 65077 // We need to inform developers that snackbar only accepts 1 action. 65078 true ? external_wp_warning_default()('Snackbar can only have one action. Use Notice if your message requires many actions.') : 0; 65079 // return first element only while keeping it inside an array 65080 actions = [actions[0]]; 65081 } 65082 const snackbarContentClassnames = dist_clsx('components-snackbar__content', { 65083 'components-snackbar__content-with-icon': !!icon 65084 }); 65085 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 65086 ref: ref, 65087 className: classes, 65088 onClick: !explicitDismiss ? dismissMe : undefined, 65089 tabIndex: 0, 65090 role: !explicitDismiss ? 'button' : undefined, 65091 onKeyPress: !explicitDismiss ? dismissMe : undefined, 65092 "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : undefined, 65093 "data-testid": "snackbar", 65094 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 65095 className: snackbarContentClassnames, 65096 children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 65097 className: "components-snackbar__icon", 65098 children: icon 65099 }), children, actions.map(({ 65100 label, 65101 onClick, 65102 url 65103 }, index) => { 65104 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 65105 __next40pxDefaultSize: true, 65106 href: url, 65107 variant: "link", 65108 onClick: event => onActionClick(event, onClick), 65109 className: "components-snackbar__action", 65110 children: label 65111 }, index); 65112 }), explicitDismiss && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 65113 role: "button", 65114 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice'), 65115 tabIndex: 0, 65116 className: "components-snackbar__dismiss-button", 65117 onClick: dismissMe, 65118 onKeyPress: dismissMe, 65119 children: "\u2715" 65120 })] 65121 }) 65122 }); 65123 } 65124 65125 /** 65126 * A Snackbar displays a succinct message that is cleared out after a small delay. 65127 * 65128 * It can also offer the user options, like viewing a published post. 65129 * But these options should also be available elsewhere in the UI. 65130 * 65131 * ```jsx 65132 * const MySnackbarNotice = () => ( 65133 * <Snackbar>Post published successfully.</Snackbar> 65134 * ); 65135 * ``` 65136 */ 65137 const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSnackbar); 65138 /* harmony default export */ const snackbar = (Snackbar); 65139 65140 ;// ./node_modules/@wordpress/components/build-module/snackbar/list.js 65141 /** 65142 * External dependencies 65143 */ 65144 65145 65146 /** 65147 * WordPress dependencies 65148 */ 65149 65150 65151 65152 /** 65153 * Internal dependencies 65154 */ 65155 65156 65157 65158 const SNACKBAR_VARIANTS = { 65159 init: { 65160 height: 0, 65161 opacity: 0 65162 }, 65163 open: { 65164 height: 'auto', 65165 opacity: 1, 65166 transition: { 65167 height: { 65168 type: 'tween', 65169 duration: 0.3, 65170 ease: [0, 0, 0.2, 1] 65171 }, 65172 opacity: { 65173 type: 'tween', 65174 duration: 0.25, 65175 delay: 0.05, 65176 ease: [0, 0, 0.2, 1] 65177 } 65178 } 65179 }, 65180 exit: { 65181 opacity: 0, 65182 transition: { 65183 type: 'tween', 65184 duration: 0.1, 65185 ease: [0, 0, 0.2, 1] 65186 } 65187 } 65188 }; 65189 65190 /** 65191 * Renders a list of notices. 65192 * 65193 * ```jsx 65194 * const MySnackbarListNotice = () => ( 65195 * <SnackbarList 65196 * notices={ notices } 65197 * onRemove={ removeNotice } 65198 * /> 65199 * ); 65200 * ``` 65201 */ 65202 function SnackbarList({ 65203 notices, 65204 className, 65205 children, 65206 onRemove 65207 }) { 65208 const listRef = (0,external_wp_element_namespaceObject.useRef)(null); 65209 const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 65210 className = dist_clsx('components-snackbar-list', className); 65211 const removeNotice = notice => () => onRemove?.(notice.id); 65212 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 65213 className: className, 65214 tabIndex: -1, 65215 ref: listRef, 65216 "data-testid": "snackbar-list", 65217 children: [children, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatePresence, { 65218 children: notices.map(notice => { 65219 const { 65220 content, 65221 ...restNotice 65222 } = notice; 65223 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, { 65224 layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations 65225 , 65226 initial: "init", 65227 animate: "open", 65228 exit: "exit", 65229 variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS, 65230 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 65231 className: "components-snackbar-list__notice-container", 65232 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(snackbar, { 65233 ...restNotice, 65234 onRemove: removeNotice(notice), 65235 listRef: listRef, 65236 children: notice.content 65237 }) 65238 }) 65239 }, notice.id); 65240 }) 65241 })] 65242 }); 65243 } 65244 /* harmony default export */ const snackbar_list = (SnackbarList); 65245 65246 ;// ./node_modules/@wordpress/components/build-module/surface/component.js 65247 /** 65248 * External dependencies 65249 */ 65250 65251 /** 65252 * Internal dependencies 65253 */ 65254 65255 65256 65257 65258 function UnconnectedSurface(props, forwardedRef) { 65259 const surfaceProps = useSurface(props); 65260 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 65261 ...surfaceProps, 65262 ref: forwardedRef 65263 }); 65264 } 65265 65266 /** 65267 * `Surface` is a core component that renders a primary background color. 65268 * 65269 * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode). 65270 * 65271 * ```jsx 65272 * import { 65273 * __experimentalSurface as Surface, 65274 * __experimentalText as Text, 65275 * } from '@wordpress/components'; 65276 * 65277 * function Example() { 65278 * return ( 65279 * <Surface> 65280 * <Text>Code is Poetry</Text> 65281 * </Surface> 65282 * ); 65283 * } 65284 * ``` 65285 */ 65286 const component_Surface = contextConnect(UnconnectedSurface, 'Surface'); 65287 /* harmony default export */ const surface_component = (component_Surface); 65288 65289 ;// ./node_modules/@ariakit/core/esm/tab/tab-store.js 65290 "use client"; 65291 65292 65293 65294 65295 65296 65297 65298 65299 // src/tab/tab-store.ts 65300 function createTabStore(_a = {}) { 65301 var _b = _a, { 65302 composite: parentComposite, 65303 combobox 65304 } = _b, props = _3YLGPPWQ_objRest(_b, [ 65305 "composite", 65306 "combobox" 65307 ]); 65308 const independentKeys = [ 65309 "items", 65310 "renderedItems", 65311 "moves", 65312 "orientation", 65313 "virtualFocus", 65314 "includesBaseElement", 65315 "baseElement", 65316 "focusLoop", 65317 "focusShift", 65318 "focusWrap" 65319 ]; 65320 const store = mergeStore( 65321 props.store, 65322 omit2(parentComposite, independentKeys), 65323 omit2(combobox, independentKeys) 65324 ); 65325 const syncState = store == null ? void 0 : store.getState(); 65326 const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 65327 store, 65328 // We need to explicitly set the default value of `includesBaseElement` to 65329 // `false` since we don't want the composite store to default it to `true` 65330 // when the activeId state is null, which could be the case when rendering 65331 // combobox with tab. 65332 includesBaseElement: defaultValue( 65333 props.includesBaseElement, 65334 syncState == null ? void 0 : syncState.includesBaseElement, 65335 false 65336 ), 65337 orientation: defaultValue( 65338 props.orientation, 65339 syncState == null ? void 0 : syncState.orientation, 65340 "horizontal" 65341 ), 65342 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true) 65343 })); 65344 const panels = createCollectionStore(); 65345 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), { 65346 selectedId: defaultValue( 65347 props.selectedId, 65348 syncState == null ? void 0 : syncState.selectedId, 65349 props.defaultSelectedId 65350 ), 65351 selectOnMove: defaultValue( 65352 props.selectOnMove, 65353 syncState == null ? void 0 : syncState.selectOnMove, 65354 true 65355 ) 65356 }); 65357 const tab = createStore(initialState, composite, store); 65358 setup( 65359 tab, 65360 () => sync(tab, ["moves"], () => { 65361 const { activeId, selectOnMove } = tab.getState(); 65362 if (!selectOnMove) return; 65363 if (!activeId) return; 65364 const tabItem = composite.item(activeId); 65365 if (!tabItem) return; 65366 if (tabItem.dimmed) return; 65367 if (tabItem.disabled) return; 65368 tab.setState("selectedId", tabItem.id); 65369 }) 65370 ); 65371 let syncActiveId = true; 65372 setup( 65373 tab, 65374 () => batch(tab, ["selectedId"], (state, prev) => { 65375 if (!syncActiveId) { 65376 syncActiveId = true; 65377 return; 65378 } 65379 if (parentComposite && state.selectedId === prev.selectedId) return; 65380 tab.setState("activeId", state.selectedId); 65381 }) 65382 ); 65383 setup( 65384 tab, 65385 () => sync(tab, ["selectedId", "renderedItems"], (state) => { 65386 if (state.selectedId !== void 0) return; 65387 const { activeId, renderedItems } = tab.getState(); 65388 const tabItem = composite.item(activeId); 65389 if (tabItem && !tabItem.disabled && !tabItem.dimmed) { 65390 tab.setState("selectedId", tabItem.id); 65391 } else { 65392 const tabItem2 = renderedItems.find( 65393 (item) => !item.disabled && !item.dimmed 65394 ); 65395 tab.setState("selectedId", tabItem2 == null ? void 0 : tabItem2.id); 65396 } 65397 }) 65398 ); 65399 setup( 65400 tab, 65401 () => sync(tab, ["renderedItems"], (state) => { 65402 const tabs = state.renderedItems; 65403 if (!tabs.length) return; 65404 return sync(panels, ["renderedItems"], (state2) => { 65405 const items = state2.renderedItems; 65406 const hasOrphanPanels = items.some((panel) => !panel.tabId); 65407 if (!hasOrphanPanels) return; 65408 items.forEach((panel, i) => { 65409 if (panel.tabId) return; 65410 const tabItem = tabs[i]; 65411 if (!tabItem) return; 65412 panels.renderItem(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, panel), { tabId: tabItem.id })); 65413 }); 65414 }); 65415 }) 65416 ); 65417 let selectedIdFromSelectedValue = null; 65418 setup(tab, () => { 65419 const backupSelectedId = () => { 65420 selectedIdFromSelectedValue = tab.getState().selectedId; 65421 }; 65422 const restoreSelectedId = () => { 65423 syncActiveId = false; 65424 tab.setState("selectedId", selectedIdFromSelectedValue); 65425 }; 65426 if (parentComposite && "setSelectElement" in parentComposite) { 65427 return chain( 65428 sync(parentComposite, ["value"], backupSelectedId), 65429 sync(parentComposite, ["mounted"], restoreSelectedId) 65430 ); 65431 } 65432 if (!combobox) return; 65433 return chain( 65434 sync(combobox, ["selectedValue"], backupSelectedId), 65435 sync(combobox, ["mounted"], restoreSelectedId) 65436 ); 65437 }); 65438 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), tab), { 65439 panels, 65440 setSelectedId: (id) => tab.setState("selectedId", id), 65441 select: (id) => { 65442 tab.setState("selectedId", id); 65443 composite.move(id); 65444 } 65445 }); 65446 } 65447 65448 65449 ;// ./node_modules/@ariakit/react-core/esm/__chunks/PY4NZ6HS.js 65450 "use client"; 65451 65452 65453 65454 65455 65456 65457 65458 // src/tab/tab-store.ts 65459 65460 65461 function useTabStoreProps(store, update, props) { 65462 useUpdateEffect(update, [props.composite, props.combobox]); 65463 store = useCompositeStoreProps(store, update, props); 65464 useStoreProps(store, props, "selectedId", "setSelectedId"); 65465 useStoreProps(store, props, "selectOnMove"); 65466 const [panels, updatePanels] = YV4JVR4I_useStore(() => store.panels, {}); 65467 useUpdateEffect(updatePanels, [store, updatePanels]); 65468 return Object.assign( 65469 (0,external_React_.useMemo)(() => _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, store), { panels }), [store, panels]), 65470 { composite: props.composite, combobox: props.combobox } 65471 ); 65472 } 65473 function useTabStore(props = {}) { 65474 const combobox = useComboboxContext(); 65475 const composite = useSelectContext() || combobox; 65476 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 65477 composite: props.composite !== void 0 ? props.composite : composite, 65478 combobox: props.combobox !== void 0 ? props.combobox : combobox 65479 }); 65480 const [store, update] = YV4JVR4I_useStore(createTabStore, props); 65481 return useTabStoreProps(store, update, props); 65482 } 65483 65484 65485 65486 ;// ./node_modules/@ariakit/react-core/esm/__chunks/UYGDZTLQ.js 65487 "use client"; 65488 65489 65490 65491 // src/tab/tab-context.tsx 65492 var UYGDZTLQ_ctx = createStoreContext( 65493 [CompositeContextProvider], 65494 [CompositeScopedContextProvider] 65495 ); 65496 var useTabContext = UYGDZTLQ_ctx.useContext; 65497 var useTabScopedContext = UYGDZTLQ_ctx.useScopedContext; 65498 var useTabProviderContext = UYGDZTLQ_ctx.useProviderContext; 65499 var TabContextProvider = UYGDZTLQ_ctx.ContextProvider; 65500 var TabScopedContextProvider = UYGDZTLQ_ctx.ScopedContextProvider; 65501 65502 65503 65504 ;// ./node_modules/@ariakit/react-core/esm/tab/tab-list.js 65505 "use client"; 65506 65507 65508 65509 65510 65511 65512 65513 65514 65515 65516 65517 65518 // src/tab/tab-list.tsx 65519 65520 65521 var tab_list_TagName = "div"; 65522 var useTabList = createHook( 65523 function useTabList2(_a) { 65524 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 65525 const context = useTabProviderContext(); 65526 store = store || context; 65527 invariant( 65528 store, 65529 false && 0 65530 ); 65531 const orientation = store.useState( 65532 (state) => state.orientation === "both" ? void 0 : state.orientation 65533 ); 65534 props = useWrapElement( 65535 props, 65536 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }), 65537 [store] 65538 ); 65539 if (store.composite) { 65540 props = _3YLGPPWQ_spreadValues({ 65541 focusable: false 65542 }, props); 65543 } 65544 props = _3YLGPPWQ_spreadValues({ 65545 role: "tablist", 65546 "aria-orientation": orientation 65547 }, props); 65548 props = useComposite(_3YLGPPWQ_spreadValues({ store }, props)); 65549 return props; 65550 } 65551 ); 65552 var TabList = forwardRef2(function TabList2(props) { 65553 const htmlProps = useTabList(props); 65554 return LMDWO4NN_createElement(tab_list_TagName, htmlProps); 65555 }); 65556 65557 65558 ;// ./node_modules/@ariakit/react-core/esm/tab/tab.js 65559 "use client"; 65560 65561 65562 65563 65564 65565 65566 65567 65568 65569 65570 65571 65572 65573 65574 65575 // src/tab/tab.tsx 65576 65577 65578 65579 var tab_TagName = "button"; 65580 var useTab = createHook(function useTab2(_a) { 65581 var _b = _a, { 65582 store, 65583 getItem: getItemProp 65584 } = _b, props = __objRest(_b, [ 65585 "store", 65586 "getItem" 65587 ]); 65588 var _a2; 65589 const context = useTabScopedContext(); 65590 store = store || context; 65591 invariant( 65592 store, 65593 false && 0 65594 ); 65595 const defaultId = useId(); 65596 const id = props.id || defaultId; 65597 const dimmed = disabledFromProps(props); 65598 const getItem = (0,external_React_.useCallback)( 65599 (item) => { 65600 const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), { dimmed }); 65601 if (getItemProp) { 65602 return getItemProp(nextItem); 65603 } 65604 return nextItem; 65605 }, 65606 [dimmed, getItemProp] 65607 ); 65608 const onClickProp = props.onClick; 65609 const onClick = useEvent((event) => { 65610 onClickProp == null ? void 0 : onClickProp(event); 65611 if (event.defaultPrevented) return; 65612 store == null ? void 0 : store.setSelectedId(id); 65613 }); 65614 const panelId = store.panels.useState( 65615 (state) => { 65616 var _a3; 65617 return (_a3 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a3.id; 65618 } 65619 ); 65620 const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false; 65621 const isActive = store.useState((state) => !!id && state.activeId === id); 65622 const selected = store.useState((state) => !!id && state.selectedId === id); 65623 const hasActiveItem = store.useState((state) => !!store.item(state.activeId)); 65624 const canRegisterComposedItem = isActive || selected && !hasActiveItem; 65625 const accessibleWhenDisabled = selected || ((_a2 = props.accessibleWhenDisabled) != null ? _a2 : true); 65626 const isWithinVirtualFocusComposite = useStoreState( 65627 store.combobox || store.composite, 65628 "virtualFocus" 65629 ); 65630 if (isWithinVirtualFocusComposite) { 65631 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 65632 tabIndex: -1 65633 }); 65634 } 65635 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 65636 id, 65637 role: "tab", 65638 "aria-selected": selected, 65639 "aria-controls": panelId || void 0 65640 }, props), { 65641 onClick 65642 }); 65643 if (store.composite) { 65644 const defaultProps = { 65645 id, 65646 accessibleWhenDisabled, 65647 store: store.composite, 65648 shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem, 65649 rowId: props.rowId, 65650 render: props.render 65651 }; 65652 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 65653 render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( 65654 P2CTZE2T_CompositeItem, 65655 _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, defaultProps), { 65656 render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(P2CTZE2T_CompositeItem, _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, defaultProps), { store: store.combobox })) : defaultProps.render 65657 }) 65658 ) 65659 }); 65660 } 65661 props = useCompositeItem(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 65662 store 65663 }, props), { 65664 accessibleWhenDisabled, 65665 getItem, 65666 shouldRegisterItem 65667 })); 65668 return props; 65669 }); 65670 var Tab = memo2( 65671 forwardRef2(function Tab2(props) { 65672 const htmlProps = useTab(props); 65673 return LMDWO4NN_createElement(tab_TagName, htmlProps); 65674 }) 65675 ); 65676 65677 65678 ;// ./node_modules/@ariakit/react-core/esm/tab/tab-panel.js 65679 "use client"; 65680 65681 65682 65683 65684 65685 65686 65687 65688 65689 65690 65691 65692 65693 65694 65695 65696 // src/tab/tab-panel.tsx 65697 65698 65699 65700 65701 var tab_panel_TagName = "div"; 65702 var useTabPanel = createHook( 65703 function useTabPanel2(_a) { 65704 var _b = _a, { 65705 store, 65706 unmountOnHide, 65707 tabId: tabIdProp, 65708 getItem: getItemProp, 65709 scrollRestoration, 65710 scrollElement 65711 } = _b, props = __objRest(_b, [ 65712 "store", 65713 "unmountOnHide", 65714 "tabId", 65715 "getItem", 65716 "scrollRestoration", 65717 "scrollElement" 65718 ]); 65719 const context = useTabProviderContext(); 65720 store = store || context; 65721 invariant( 65722 store, 65723 false && 0 65724 ); 65725 const ref = (0,external_React_.useRef)(null); 65726 const id = useId(props.id); 65727 const tabId = useStoreState( 65728 store.panels, 65729 () => { 65730 var _a2; 65731 return tabIdProp || ((_a2 = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a2.tabId); 65732 } 65733 ); 65734 const open = useStoreState( 65735 store, 65736 (state) => !!tabId && state.selectedId === tabId 65737 ); 65738 const disclosure = useDisclosureStore({ open }); 65739 const mounted = useStoreState(disclosure, "mounted"); 65740 const scrollPositionRef = (0,external_React_.useRef)( 65741 /* @__PURE__ */ new Map() 65742 ); 65743 const getScrollElement = useEvent(() => { 65744 const panelElement = ref.current; 65745 if (!panelElement) return null; 65746 if (!scrollElement) return panelElement; 65747 if (typeof scrollElement === "function") { 65748 return scrollElement(panelElement); 65749 } 65750 if ("current" in scrollElement) { 65751 return scrollElement.current; 65752 } 65753 return scrollElement; 65754 }); 65755 (0,external_React_.useEffect)(() => { 65756 var _a2, _b2; 65757 if (!scrollRestoration) return; 65758 if (!mounted) return; 65759 const element = getScrollElement(); 65760 if (!element) return; 65761 if (scrollRestoration === "reset") { 65762 element.scroll(0, 0); 65763 return; 65764 } 65765 if (!tabId) return; 65766 const position = scrollPositionRef.current.get(tabId); 65767 element.scroll((_a2 = position == null ? void 0 : position.x) != null ? _a2 : 0, (_b2 = position == null ? void 0 : position.y) != null ? _b2 : 0); 65768 const onScroll = () => { 65769 scrollPositionRef.current.set(tabId, { 65770 x: element.scrollLeft, 65771 y: element.scrollTop 65772 }); 65773 }; 65774 element.addEventListener("scroll", onScroll); 65775 return () => { 65776 element.removeEventListener("scroll", onScroll); 65777 }; 65778 }, [scrollRestoration, mounted, tabId, getScrollElement, store]); 65779 const [hasTabbableChildren, setHasTabbableChildren] = (0,external_React_.useState)(false); 65780 (0,external_React_.useEffect)(() => { 65781 const element = ref.current; 65782 if (!element) return; 65783 const tabbable = getAllTabbableIn(element); 65784 setHasTabbableChildren(!!tabbable.length); 65785 }, []); 65786 const getItem = (0,external_React_.useCallback)( 65787 (item) => { 65788 const nextItem = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, item), { id: id || item.id, tabId: tabIdProp }); 65789 if (getItemProp) { 65790 return getItemProp(nextItem); 65791 } 65792 return nextItem; 65793 }, 65794 [id, tabIdProp, getItemProp] 65795 ); 65796 const onKeyDownProp = props.onKeyDown; 65797 const onKeyDown = useEvent((event) => { 65798 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 65799 if (event.defaultPrevented) return; 65800 if (!(store == null ? void 0 : store.composite)) return; 65801 const keyMap = { 65802 ArrowLeft: store.previous, 65803 ArrowRight: store.next, 65804 Home: store.first, 65805 End: store.last 65806 }; 65807 const action = keyMap[event.key]; 65808 if (!action) return; 65809 const { selectedId } = store.getState(); 65810 const nextId = action({ activeId: selectedId }); 65811 if (!nextId) return; 65812 event.preventDefault(); 65813 store.move(nextId); 65814 }); 65815 props = useWrapElement( 65816 props, 65817 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }), 65818 [store] 65819 ); 65820 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 65821 id, 65822 role: "tabpanel", 65823 "aria-labelledby": tabId || void 0 65824 }, props), { 65825 children: unmountOnHide && !mounted ? null : props.children, 65826 ref: useMergeRefs(ref, props.ref), 65827 onKeyDown 65828 }); 65829 props = useFocusable(_3YLGPPWQ_spreadValues({ 65830 // If the tab panel is rendered as part of another composite widget such 65831 // as combobox, it should not be focusable. 65832 focusable: !store.composite && !hasTabbableChildren 65833 }, props)); 65834 props = useDisclosureContent(_3YLGPPWQ_spreadValues({ store: disclosure }, props)); 65835 props = useCollectionItem(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ store: store.panels }, props), { getItem })); 65836 return props; 65837 } 65838 ); 65839 var TabPanel = forwardRef2(function TabPanel2(props) { 65840 const htmlProps = useTabPanel(props); 65841 return LMDWO4NN_createElement(tab_panel_TagName, htmlProps); 65842 }); 65843 65844 65845 ;// ./node_modules/@wordpress/components/build-module/tab-panel/index.js 65846 /** 65847 * External dependencies 65848 */ 65849 65850 65851 /** 65852 * WordPress dependencies 65853 */ 65854 65855 65856 65857 65858 /** 65859 * Internal dependencies 65860 */ 65861 65862 65863 65864 // Separate the actual tab name from the instance ID. This is 65865 // necessary because Ariakit internally uses the element ID when 65866 // a new tab is selected, but our implementation looks specifically 65867 // for the tab name to be passed to the `onSelect` callback. 65868 const extractTabName = id => { 65869 if (typeof id === 'undefined' || id === null) { 65870 return; 65871 } 65872 return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1]; 65873 }; 65874 65875 /** 65876 * TabPanel is an ARIA-compliant tabpanel. 65877 * 65878 * TabPanels organize content across different screens, data sets, and interactions. 65879 * It has two sections: a list of tabs, and the view to show when tabs are chosen. 65880 * 65881 * ```jsx 65882 * import { TabPanel } from '@wordpress/components'; 65883 * 65884 * const onSelect = ( tabName ) => { 65885 * console.log( 'Selecting tab', tabName ); 65886 * }; 65887 * 65888 * const MyTabPanel = () => ( 65889 * <TabPanel 65890 * className="my-tab-panel" 65891 * activeClass="active-tab" 65892 * onSelect={ onSelect } 65893 * tabs={ [ 65894 * { 65895 * name: 'tab1', 65896 * title: 'Tab 1', 65897 * className: 'tab-one', 65898 * }, 65899 * { 65900 * name: 'tab2', 65901 * title: 'Tab 2', 65902 * className: 'tab-two', 65903 * }, 65904 * ] } 65905 * > 65906 * { ( tab ) => <p>{ tab.title }</p> } 65907 * </TabPanel> 65908 * ); 65909 * ``` 65910 */ 65911 const UnforwardedTabPanel = ({ 65912 className, 65913 children, 65914 tabs, 65915 selectOnMove = true, 65916 initialTabName, 65917 orientation = 'horizontal', 65918 activeClass = 'is-active', 65919 onSelect 65920 }, ref) => { 65921 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(tab_panel_TabPanel, 'tab-panel'); 65922 const prependInstanceId = (0,external_wp_element_namespaceObject.useCallback)(tabName => { 65923 if (typeof tabName === 'undefined') { 65924 return; 65925 } 65926 return `$instanceId}-$tabName}`; 65927 }, [instanceId]); 65928 const tabStore = useTabStore({ 65929 setSelectedId: newTabValue => { 65930 if (typeof newTabValue === 'undefined' || newTabValue === null) { 65931 return; 65932 } 65933 const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue); 65934 if (newTab?.disabled || newTab === selectedTab) { 65935 return; 65936 } 65937 const simplifiedTabName = extractTabName(newTabValue); 65938 if (typeof simplifiedTabName === 'undefined') { 65939 return; 65940 } 65941 onSelect?.(simplifiedTabName); 65942 }, 65943 orientation, 65944 selectOnMove, 65945 defaultSelectedId: prependInstanceId(initialTabName), 65946 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 65947 }); 65948 const selectedTabName = extractTabName(useStoreState(tabStore, 'selectedId')); 65949 const setTabStoreSelectedId = (0,external_wp_element_namespaceObject.useCallback)(tabName => { 65950 tabStore.setState('selectedId', prependInstanceId(tabName)); 65951 }, [prependInstanceId, tabStore]); 65952 const selectedTab = tabs.find(({ 65953 name 65954 }) => name === selectedTabName); 65955 const previousSelectedTabName = (0,external_wp_compose_namespaceObject.usePrevious)(selectedTabName); 65956 65957 // Ensure `onSelect` is called when the initial tab is selected. 65958 (0,external_wp_element_namespaceObject.useEffect)(() => { 65959 if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) { 65960 onSelect?.(selectedTabName); 65961 } 65962 }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]); 65963 65964 // Handle selecting the initial tab. 65965 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 65966 // If there's a selected tab, don't override it. 65967 if (selectedTab) { 65968 return; 65969 } 65970 const initialTab = tabs.find(tab => tab.name === initialTabName); 65971 // Wait for the denoted initial tab to be declared before making a 65972 // selection. This ensures that if a tab is declared lazily it can 65973 // still receive initial selection. 65974 if (initialTabName && !initialTab) { 65975 return; 65976 } 65977 if (initialTab && !initialTab.disabled) { 65978 // Select the initial tab if it's not disabled. 65979 setTabStoreSelectedId(initialTab.name); 65980 } else { 65981 // Fallback to the first enabled tab when the initial tab is 65982 // disabled or it can't be found. 65983 const firstEnabledTab = tabs.find(tab => !tab.disabled); 65984 if (firstEnabledTab) { 65985 setTabStoreSelectedId(firstEnabledTab.name); 65986 } 65987 } 65988 }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]); 65989 65990 // Handle the currently selected tab becoming disabled. 65991 (0,external_wp_element_namespaceObject.useEffect)(() => { 65992 // This effect only runs when the selected tab is defined and becomes disabled. 65993 if (!selectedTab?.disabled) { 65994 return; 65995 } 65996 const firstEnabledTab = tabs.find(tab => !tab.disabled); 65997 // If the currently selected tab becomes disabled, select the first enabled tab. 65998 // (if there is one). 65999 if (firstEnabledTab) { 66000 setTabStoreSelectedId(firstEnabledTab.name); 66001 } 66002 }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]); 66003 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 66004 className: className, 66005 ref: ref, 66006 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabList, { 66007 store: tabStore, 66008 className: "components-tab-panel__tabs", 66009 children: tabs.map(tab => { 66010 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tab, { 66011 id: prependInstanceId(tab.name), 66012 className: dist_clsx('components-tab-panel__tabs-item', tab.className, { 66013 [activeClass]: tab.name === selectedTabName 66014 }), 66015 disabled: tab.disabled, 66016 "aria-controls": `$prependInstanceId(tab.name)}-view`, 66017 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 66018 __next40pxDefaultSize: true, 66019 icon: tab.icon, 66020 label: tab.icon && tab.title, 66021 showTooltip: !!tab.icon 66022 }), 66023 children: !tab.icon && tab.title 66024 }, tab.name); 66025 }) 66026 }), selectedTab && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabPanel, { 66027 id: `$prependInstanceId(selectedTab.name)}-view`, 66028 store: tabStore, 66029 tabId: prependInstanceId(selectedTab.name), 66030 className: "components-tab-panel__tab-content", 66031 children: children(selectedTab) 66032 })] 66033 }); 66034 }; 66035 const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabPanel); 66036 /* harmony default export */ const tab_panel = (tab_panel_TabPanel); 66037 66038 ;// ./node_modules/@wordpress/components/build-module/text-control/index.js 66039 /** 66040 * External dependencies 66041 */ 66042 66043 66044 66045 /** 66046 * WordPress dependencies 66047 */ 66048 66049 66050 66051 /** 66052 * Internal dependencies 66053 */ 66054 66055 66056 66057 function UnforwardedTextControl(props, ref) { 66058 const { 66059 __nextHasNoMarginBottom, 66060 __next40pxDefaultSize = false, 66061 label, 66062 hideLabelFromVision, 66063 value, 66064 help, 66065 id: idProp, 66066 className, 66067 onChange, 66068 type = 'text', 66069 ...additionalProps 66070 } = props; 66071 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl, 'inspector-text-control', idProp); 66072 const onChangeValue = event => onChange(event.target.value); 66073 maybeWarnDeprecated36pxSize({ 66074 componentName: 'TextControl', 66075 size: undefined, 66076 __next40pxDefaultSize 66077 }); 66078 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 66079 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 66080 __associatedWPComponentName: "TextControl", 66081 label: label, 66082 hideLabelFromVision: hideLabelFromVision, 66083 id: id, 66084 help: help, 66085 className: className, 66086 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { 66087 className: dist_clsx('components-text-control__input', { 66088 'is-next-40px-default-size': __next40pxDefaultSize 66089 }), 66090 type: type, 66091 id: id, 66092 value: value, 66093 onChange: onChangeValue, 66094 "aria-describedby": !!help ? id + '__help' : undefined, 66095 ref: ref, 66096 ...additionalProps 66097 }) 66098 }); 66099 } 66100 66101 /** 66102 * TextControl components let users enter and edit text. 66103 * 66104 * ```jsx 66105 * import { TextControl } from '@wordpress/components'; 66106 * import { useState } from '@wordpress/element'; 66107 * 66108 * const MyTextControl = () => { 66109 * const [ className, setClassName ] = useState( '' ); 66110 * 66111 * return ( 66112 * <TextControl 66113 * __nextHasNoMarginBottom 66114 * __next40pxDefaultSize 66115 * label="Additional CSS Class" 66116 * value={ className } 66117 * onChange={ ( value ) => setClassName( value ) } 66118 * /> 66119 * ); 66120 * }; 66121 * ``` 66122 */ 66123 const TextControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextControl); 66124 /* harmony default export */ const text_control = (TextControl); 66125 66126 ;// ./node_modules/@wordpress/components/build-module/utils/breakpoint-values.js 66127 /* harmony default export */ const breakpoint_values = ({ 66128 huge: '1440px', 66129 wide: '1280px', 66130 'x-large': '1080px', 66131 large: '960px', 66132 // admin sidebar auto folds 66133 medium: '782px', 66134 // Adminbar goes big. 66135 small: '600px', 66136 mobile: '480px', 66137 'zoomed-in': '280px' 66138 }); 66139 66140 ;// ./node_modules/@wordpress/components/build-module/utils/breakpoint.js 66141 /** 66142 * Internal dependencies 66143 */ 66144 66145 66146 /** 66147 * @param {keyof breakpoints} point 66148 * @return {string} Media query declaration. 66149 */ 66150 const breakpoint = point => `@media (min-width: $breakpoint_values[point]})`; 66151 66152 ;// ./node_modules/@wordpress/components/build-module/textarea-control/styles/textarea-control-styles.js 66153 66154 /** 66155 * External dependencies 66156 */ 66157 66158 66159 66160 /** 66161 * Internal dependencies 66162 */ 66163 66164 66165 66166 66167 const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;border-radius:", config_values.radiusSmall, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";@media not ( prefers-reduced-motion ){transition:box-shadow 0.1s linear;}" + ( true ? "" : 0), true ? "" : 0); 66168 const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0), true ? "" : 0); 66169 const StyledTextarea = /*#__PURE__*/emotion_styled_base_browser_esm("textarea", true ? { 66170 target: "e1w5nnrk0" 66171 } : 0)("width:100%;display:block;font-family:", font('default.fontFamily'), ";line-height:20px;padding:9px 11px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";", breakpoint('small'), "{font-size:", font('default.fontSize'), ";}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + ( true ? "" : 0)); 66172 66173 ;// ./node_modules/@wordpress/components/build-module/textarea-control/index.js 66174 /** 66175 * WordPress dependencies 66176 */ 66177 66178 66179 66180 /** 66181 * Internal dependencies 66182 */ 66183 66184 66185 66186 function UnforwardedTextareaControl(props, ref) { 66187 const { 66188 __nextHasNoMarginBottom, 66189 label, 66190 hideLabelFromVision, 66191 value, 66192 help, 66193 onChange, 66194 rows = 4, 66195 className, 66196 ...additionalProps 66197 } = props; 66198 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextareaControl); 66199 const id = `inspector-textarea-control-$instanceId}`; 66200 const onChangeValue = event => onChange(event.target.value); 66201 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 66202 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 66203 __associatedWPComponentName: "TextareaControl", 66204 label: label, 66205 hideLabelFromVision: hideLabelFromVision, 66206 id: id, 66207 help: help, 66208 className: className, 66209 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledTextarea, { 66210 className: "components-textarea-control__input", 66211 id: id, 66212 rows: rows, 66213 onChange: onChangeValue, 66214 "aria-describedby": !!help ? id + '__help' : undefined, 66215 value: value, 66216 ref: ref, 66217 ...additionalProps 66218 }) 66219 }); 66220 } 66221 66222 /** 66223 * TextareaControls are TextControls that allow for multiple lines of text, and 66224 * wrap overflow text onto a new line. They are a fixed height and scroll 66225 * vertically when the cursor reaches the bottom of the field. 66226 * 66227 * ```jsx 66228 * import { TextareaControl } from '@wordpress/components'; 66229 * import { useState } from '@wordpress/element'; 66230 * 66231 * const MyTextareaControl = () => { 66232 * const [ text, setText ] = useState( '' ); 66233 * 66234 * return ( 66235 * <TextareaControl 66236 * __nextHasNoMarginBottom 66237 * label="Text" 66238 * help="Enter some text" 66239 * value={ text } 66240 * onChange={ ( value ) => setText( value ) } 66241 * /> 66242 * ); 66243 * }; 66244 * ``` 66245 */ 66246 const TextareaControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextareaControl); 66247 /* harmony default export */ const textarea_control = (TextareaControl); 66248 66249 ;// ./node_modules/@wordpress/components/build-module/text-highlight/index.js 66250 /** 66251 * WordPress dependencies 66252 */ 66253 66254 66255 /** 66256 * Internal dependencies 66257 */ 66258 66259 66260 /** 66261 * Highlights occurrences of a given string within another string of text. Wraps 66262 * each match with a `<mark>` tag which provides browser default styling. 66263 * 66264 * ```jsx 66265 * import { TextHighlight } from '@wordpress/components'; 66266 * 66267 * const MyTextHighlight = () => ( 66268 * <TextHighlight 66269 * text="Why do we like Gutenberg? Because Gutenberg is the best!" 66270 * highlight="Gutenberg" 66271 * /> 66272 * ); 66273 * ``` 66274 */ 66275 const TextHighlight = props => { 66276 const { 66277 text = '', 66278 highlight = '' 66279 } = props; 66280 const trimmedHighlightText = highlight.trim(); 66281 if (!trimmedHighlightText) { 66282 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 66283 children: text 66284 }); 66285 } 66286 const regex = new RegExp(`($escapeRegExp(trimmedHighlightText)})`, 'gi'); 66287 return (0,external_wp_element_namespaceObject.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), { 66288 mark: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("mark", {}) 66289 }); 66290 }; 66291 /* harmony default export */ const text_highlight = (TextHighlight); 66292 66293 ;// ./node_modules/@wordpress/icons/build-module/library/tip.js 66294 /** 66295 * WordPress dependencies 66296 */ 66297 66298 66299 const tip = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 66300 xmlns: "http://www.w3.org/2000/svg", 66301 viewBox: "0 0 24 24", 66302 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 66303 d: "M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" 66304 }) 66305 }); 66306 /* harmony default export */ const library_tip = (tip); 66307 66308 ;// ./node_modules/@wordpress/components/build-module/tip/index.js 66309 /** 66310 * WordPress dependencies 66311 */ 66312 66313 66314 /** 66315 * Internal dependencies 66316 */ 66317 66318 function Tip(props) { 66319 const { 66320 children 66321 } = props; 66322 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 66323 className: "components-tip", 66324 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 66325 icon: library_tip 66326 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", { 66327 children: children 66328 })] 66329 }); 66330 } 66331 /* harmony default export */ const build_module_tip = (Tip); 66332 66333 ;// ./node_modules/@wordpress/components/build-module/toggle-control/index.js 66334 /** 66335 * External dependencies 66336 */ 66337 66338 66339 66340 66341 /** 66342 * WordPress dependencies 66343 */ 66344 66345 66346 66347 66348 /** 66349 * Internal dependencies 66350 */ 66351 66352 66353 66354 66355 66356 66357 66358 function UnforwardedToggleControl({ 66359 __nextHasNoMarginBottom, 66360 label, 66361 checked, 66362 help, 66363 className, 66364 onChange, 66365 disabled 66366 }, ref) { 66367 function onChangeToggle(event) { 66368 onChange(event.target.checked); 66369 } 66370 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleControl); 66371 const id = `inspector-toggle-control-$instanceId}`; 66372 const cx = useCx(); 66373 const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css({ 66374 marginBottom: space(3) 66375 }, true ? "" : 0, true ? "" : 0)); 66376 if (!__nextHasNoMarginBottom) { 66377 external_wp_deprecated_default()('Bottom margin styles for wp.components.ToggleControl', { 66378 since: '6.7', 66379 version: '7.0', 66380 hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.' 66381 }); 66382 } 66383 let describedBy, helpLabel; 66384 if (help) { 66385 if (typeof help === 'function') { 66386 // `help` as a function works only for controlled components where 66387 // `checked` is passed down from parent component. Uncontrolled 66388 // component can show only a static help label. 66389 if (checked !== undefined) { 66390 helpLabel = help(checked); 66391 } 66392 } else { 66393 helpLabel = help; 66394 } 66395 if (helpLabel) { 66396 describedBy = id + '__help'; 66397 } 66398 } 66399 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { 66400 id: id, 66401 help: helpLabel && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 66402 className: "components-toggle-control__help", 66403 children: helpLabel 66404 }), 66405 className: classes, 66406 __nextHasNoMarginBottom: true, 66407 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 66408 justify: "flex-start", 66409 spacing: 2, 66410 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(form_toggle, { 66411 id: id, 66412 checked: checked, 66413 onChange: onChangeToggle, 66414 "aria-describedby": describedBy, 66415 disabled: disabled, 66416 ref: ref 66417 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, { 66418 as: "label", 66419 htmlFor: id, 66420 className: dist_clsx('components-toggle-control__label', { 66421 'is-disabled': disabled 66422 }), 66423 children: label 66424 })] 66425 }) 66426 }); 66427 } 66428 66429 /** 66430 * ToggleControl is used to generate a toggle user interface. 66431 * 66432 * ```jsx 66433 * import { ToggleControl } from '@wordpress/components'; 66434 * import { useState } from '@wordpress/element'; 66435 * 66436 * const MyToggleControl = () => { 66437 * const [ value, setValue ] = useState( false ); 66438 * 66439 * return ( 66440 * <ToggleControl 66441 * __nextHasNoMarginBottom 66442 * label="Fixed Background" 66443 * checked={ value } 66444 * onChange={ () => setValue( ( state ) => ! state ) } 66445 * /> 66446 * ); 66447 * }; 66448 * ``` 66449 */ 66450 const ToggleControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleControl); 66451 /* harmony default export */ const toggle_control = (ToggleControl); 66452 66453 ;// ./node_modules/@ariakit/react-core/esm/__chunks/A3WPL2ZJ.js 66454 "use client"; 66455 66456 66457 66458 // src/toolbar/toolbar-context.tsx 66459 var A3WPL2ZJ_ctx = createStoreContext( 66460 [CompositeContextProvider], 66461 [CompositeScopedContextProvider] 66462 ); 66463 var useToolbarContext = A3WPL2ZJ_ctx.useContext; 66464 var useToolbarScopedContext = A3WPL2ZJ_ctx.useScopedContext; 66465 var useToolbarProviderContext = A3WPL2ZJ_ctx.useProviderContext; 66466 var ToolbarContextProvider = A3WPL2ZJ_ctx.ContextProvider; 66467 var ToolbarScopedContextProvider = A3WPL2ZJ_ctx.ScopedContextProvider; 66468 66469 66470 66471 ;// ./node_modules/@ariakit/react-core/esm/__chunks/BOLVLGVE.js 66472 "use client"; 66473 66474 66475 66476 66477 66478 // src/toolbar/toolbar-item.tsx 66479 var BOLVLGVE_TagName = "button"; 66480 var useToolbarItem = createHook( 66481 function useToolbarItem2(_a) { 66482 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 66483 const context = useToolbarContext(); 66484 store = store || context; 66485 props = useCompositeItem(_3YLGPPWQ_spreadValues({ store }, props)); 66486 return props; 66487 } 66488 ); 66489 var ToolbarItem = memo2( 66490 forwardRef2(function ToolbarItem2(props) { 66491 const htmlProps = useToolbarItem(props); 66492 return LMDWO4NN_createElement(BOLVLGVE_TagName, htmlProps); 66493 }) 66494 ); 66495 66496 66497 66498 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-context/index.js 66499 /** 66500 * External dependencies 66501 */ 66502 66503 /** 66504 * WordPress dependencies 66505 */ 66506 66507 const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 66508 /* harmony default export */ const toolbar_context = (ToolbarContext); 66509 66510 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-item/index.js 66511 /** 66512 * External dependencies 66513 */ 66514 66515 /** 66516 * WordPress dependencies 66517 */ 66518 66519 66520 66521 /** 66522 * Internal dependencies 66523 */ 66524 66525 66526 function toolbar_item_ToolbarItem({ 66527 children, 66528 as: Component, 66529 ...props 66530 }, ref) { 66531 const accessibleToolbarStore = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 66532 const isRenderProp = typeof children === 'function'; 66533 if (!isRenderProp && !Component) { 66534 true ? external_wp_warning_default()('`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' + 'See https://developer.wordpress.org/block-editor/components/toolbar-item/') : 0; 66535 return null; 66536 } 66537 const allProps = { 66538 ...props, 66539 ref, 66540 'data-toolbar-item': true 66541 }; 66542 if (!accessibleToolbarStore) { 66543 if (Component) { 66544 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 66545 ...allProps, 66546 children: children 66547 }); 66548 } 66549 if (!isRenderProp) { 66550 return null; 66551 } 66552 return children(allProps); 66553 } 66554 const render = isRenderProp ? children : Component && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 66555 children: children 66556 }); 66557 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolbarItem, { 66558 accessibleWhenDisabled: true, 66559 ...allProps, 66560 store: accessibleToolbarStore, 66561 render: render 66562 }); 66563 } 66564 /* harmony default export */ const toolbar_item = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_item_ToolbarItem)); 66565 66566 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/toolbar-button-container.js 66567 66568 /** 66569 * Internal dependencies 66570 */ 66571 66572 const ToolbarButtonContainer = ({ 66573 children, 66574 className 66575 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 66576 className: className, 66577 children: children 66578 }); 66579 /* harmony default export */ const toolbar_button_container = (ToolbarButtonContainer); 66580 66581 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/index.js 66582 /** 66583 * External dependencies 66584 */ 66585 66586 /** 66587 * WordPress dependencies 66588 */ 66589 66590 66591 /** 66592 * Internal dependencies 66593 */ 66594 66595 66596 66597 66598 66599 function toolbar_button_useDeprecatedProps({ 66600 isDisabled, 66601 ...otherProps 66602 }) { 66603 return { 66604 disabled: isDisabled, 66605 ...otherProps 66606 }; 66607 } 66608 function UnforwardedToolbarButton(props, ref) { 66609 const { 66610 children, 66611 className, 66612 containerClassName, 66613 extraProps, 66614 isActive, 66615 title, 66616 ...restProps 66617 } = toolbar_button_useDeprecatedProps(props); 66618 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 66619 if (!accessibleToolbarState) { 66620 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_button_container, { 66621 className: containerClassName, 66622 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 66623 ref: ref, 66624 icon: restProps.icon, 66625 size: "compact", 66626 label: title, 66627 shortcut: restProps.shortcut, 66628 "data-subscript": restProps.subscript, 66629 onClick: event => { 66630 event.stopPropagation(); 66631 // TODO: Possible bug; maybe use onClick instead of restProps.onClick. 66632 if (restProps.onClick) { 66633 restProps.onClick(event); 66634 } 66635 }, 66636 className: dist_clsx('components-toolbar__control', className), 66637 isPressed: isActive, 66638 accessibleWhenDisabled: true, 66639 "data-toolbar-item": true, 66640 ...extraProps, 66641 ...restProps, 66642 children: children 66643 }) 66644 }); 66645 } 66646 66647 // ToobarItem will pass all props to the render prop child, which will pass 66648 // all props to Button. This means that ToolbarButton has the same API as 66649 // Button. 66650 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, { 66651 className: dist_clsx('components-toolbar-button', className), 66652 ...extraProps, 66653 ...restProps, 66654 ref: ref, 66655 children: toolbarItemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { 66656 size: "compact", 66657 label: title, 66658 isPressed: isActive, 66659 ...toolbarItemProps, 66660 children: children 66661 }) 66662 }); 66663 } 66664 66665 /** 66666 * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar 66667 * or ToolbarGroup when used to create general interfaces. 66668 * 66669 * ```jsx 66670 * import { Toolbar, ToolbarButton } from '@wordpress/components'; 66671 * import { edit } from '@wordpress/icons'; 66672 * 66673 * function MyToolbar() { 66674 * return ( 66675 * <Toolbar label="Options"> 66676 * <ToolbarButton 66677 * icon={ edit } 66678 * label="Edit" 66679 * onClick={ () => alert( 'Editing' ) } 66680 * /> 66681 * </Toolbar> 66682 * ); 66683 * } 66684 * ``` 66685 */ 66686 const ToolbarButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarButton); 66687 /* harmony default export */ const toolbar_button = (ToolbarButton); 66688 66689 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-container.js 66690 66691 /** 66692 * Internal dependencies 66693 */ 66694 66695 const ToolbarGroupContainer = ({ 66696 className, 66697 children, 66698 ...props 66699 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 66700 className: className, 66701 ...props, 66702 children: children 66703 }); 66704 /* harmony default export */ const toolbar_group_container = (ToolbarGroupContainer); 66705 66706 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js 66707 /** 66708 * WordPress dependencies 66709 */ 66710 66711 66712 /** 66713 * Internal dependencies 66714 */ 66715 66716 66717 66718 66719 function ToolbarGroupCollapsed({ 66720 controls = [], 66721 toggleProps, 66722 ...props 66723 }) { 66724 // It'll contain state if `ToolbarGroup` is being used within 66725 // `<Toolbar label="label" />` 66726 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 66727 const renderDropdownMenu = internalToggleProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { 66728 controls: controls, 66729 toggleProps: { 66730 ...internalToggleProps, 66731 'data-toolbar-item': true 66732 }, 66733 ...props 66734 }); 66735 if (accessibleToolbarState) { 66736 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, { 66737 ...toggleProps, 66738 children: renderDropdownMenu 66739 }); 66740 } 66741 return renderDropdownMenu(toggleProps); 66742 } 66743 /* harmony default export */ const toolbar_group_collapsed = (ToolbarGroupCollapsed); 66744 66745 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/index.js 66746 /** 66747 * External dependencies 66748 */ 66749 66750 66751 /** 66752 * WordPress dependencies 66753 */ 66754 66755 66756 /** 66757 * Internal dependencies 66758 */ 66759 66760 66761 66762 66763 66764 function isNestedArray(arr) { 66765 return Array.isArray(arr) && Array.isArray(arr[0]); 66766 } 66767 66768 /** 66769 * Renders a collapsible group of controls 66770 * 66771 * The `controls` prop accepts an array of sets. A set is an array of controls. 66772 * Controls have the following shape: 66773 * 66774 * ``` 66775 * { 66776 * icon: string, 66777 * title: string, 66778 * subscript: string, 66779 * onClick: Function, 66780 * isActive: boolean, 66781 * isDisabled: boolean 66782 * } 66783 * ``` 66784 * 66785 * For convenience it is also possible to pass only an array of controls. It is 66786 * then assumed this is the only set. 66787 * 66788 * Either `controls` or `children` is required, otherwise this components 66789 * renders nothing. 66790 * 66791 * @param props Component props. 66792 * @param [props.controls] The controls to render in this toolbar. 66793 * @param [props.children] Any other things to render inside the toolbar besides the controls. 66794 * @param [props.className] Class to set on the container div. 66795 * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu. 66796 * @param [props.title] ARIA label for dropdown menu if is collapsed. 66797 */ 66798 function ToolbarGroup({ 66799 controls = [], 66800 children, 66801 className, 66802 isCollapsed, 66803 title, 66804 ...props 66805 }) { 66806 // It'll contain state if `ToolbarGroup` is being used within 66807 // `<Toolbar label="label" />` 66808 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 66809 if ((!controls || !controls.length) && !children) { 66810 return null; 66811 } 66812 const finalClassName = dist_clsx( 66813 // Unfortunately, there's legacy code referencing to `.components-toolbar` 66814 // So we can't get rid of it 66815 accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className); 66816 66817 // Normalize controls to nested array of objects (sets of controls) 66818 let controlSets; 66819 if (isNestedArray(controls)) { 66820 controlSets = controls; 66821 } else { 66822 controlSets = [controls]; 66823 } 66824 if (isCollapsed) { 66825 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_group_collapsed, { 66826 label: title, 66827 controls: controlSets, 66828 className: finalClassName, 66829 children: children, 66830 ...props 66831 }); 66832 } 66833 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(toolbar_group_container, { 66834 className: finalClassName, 66835 ...props, 66836 children: [controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_button, { 66837 containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined, 66838 ...control 66839 }, [indexOfSet, indexOfControl].join()))), children] 66840 }); 66841 } 66842 /* harmony default export */ const toolbar_group = (ToolbarGroup); 66843 66844 ;// ./node_modules/@ariakit/core/esm/toolbar/toolbar-store.js 66845 "use client"; 66846 66847 66848 66849 66850 66851 66852 66853 66854 // src/toolbar/toolbar-store.ts 66855 function createToolbarStore(props = {}) { 66856 var _a; 66857 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 66858 return createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 66859 orientation: defaultValue( 66860 props.orientation, 66861 syncState == null ? void 0 : syncState.orientation, 66862 "horizontal" 66863 ), 66864 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true) 66865 })); 66866 } 66867 66868 66869 ;// ./node_modules/@ariakit/react-core/esm/__chunks/7M5THDKH.js 66870 "use client"; 66871 66872 66873 66874 // src/toolbar/toolbar-store.ts 66875 66876 function useToolbarStoreProps(store, update, props) { 66877 return useCompositeStoreProps(store, update, props); 66878 } 66879 function useToolbarStore(props = {}) { 66880 const [store, update] = YV4JVR4I_useStore(createToolbarStore, props); 66881 return useToolbarStoreProps(store, update, props); 66882 } 66883 66884 66885 66886 ;// ./node_modules/@ariakit/react-core/esm/toolbar/toolbar.js 66887 "use client"; 66888 66889 66890 66891 66892 66893 66894 66895 66896 66897 66898 66899 66900 66901 66902 66903 66904 // src/toolbar/toolbar.tsx 66905 66906 var toolbar_TagName = "div"; 66907 var useToolbar = createHook( 66908 function useToolbar2(_a) { 66909 var _b = _a, { 66910 store: storeProp, 66911 orientation: orientationProp, 66912 virtualFocus, 66913 focusLoop, 66914 rtl 66915 } = _b, props = __objRest(_b, [ 66916 "store", 66917 "orientation", 66918 "virtualFocus", 66919 "focusLoop", 66920 "rtl" 66921 ]); 66922 const context = useToolbarProviderContext(); 66923 storeProp = storeProp || context; 66924 const store = useToolbarStore({ 66925 store: storeProp, 66926 orientation: orientationProp, 66927 virtualFocus, 66928 focusLoop, 66929 rtl 66930 }); 66931 const orientation = store.useState( 66932 (state) => state.orientation === "both" ? void 0 : state.orientation 66933 ); 66934 props = useWrapElement( 66935 props, 66936 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolbarScopedContextProvider, { value: store, children: element }), 66937 [store] 66938 ); 66939 props = _3YLGPPWQ_spreadValues({ 66940 role: "toolbar", 66941 "aria-orientation": orientation 66942 }, props); 66943 props = useComposite(_3YLGPPWQ_spreadValues({ store }, props)); 66944 return props; 66945 } 66946 ); 66947 var Toolbar = forwardRef2(function Toolbar2(props) { 66948 const htmlProps = useToolbar(props); 66949 return LMDWO4NN_createElement(toolbar_TagName, htmlProps); 66950 }); 66951 66952 66953 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar/toolbar-container.js 66954 /** 66955 * External dependencies 66956 */ 66957 66958 /** 66959 * WordPress dependencies 66960 */ 66961 66962 66963 66964 /** 66965 * Internal dependencies 66966 */ 66967 66968 66969 function UnforwardedToolbarContainer({ 66970 label, 66971 ...props 66972 }, ref) { 66973 const toolbarStore = useToolbarStore({ 66974 focusLoop: true, 66975 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 66976 }); 66977 return ( 66978 /*#__PURE__*/ 66979 // This will provide state for `ToolbarButton`'s 66980 (0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_context.Provider, { 66981 value: toolbarStore, 66982 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Toolbar, { 66983 ref: ref, 66984 "aria-label": label, 66985 store: toolbarStore, 66986 ...props 66987 }) 66988 }) 66989 ); 66990 } 66991 const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarContainer); 66992 /* harmony default export */ const toolbar_container = (ToolbarContainer); 66993 66994 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar/index.js 66995 /** 66996 * External dependencies 66997 */ 66998 66999 /** 67000 * WordPress dependencies 67001 */ 67002 67003 67004 67005 /** 67006 * Internal dependencies 67007 */ 67008 67009 67010 67011 67012 function UnforwardedToolbar({ 67013 className, 67014 label, 67015 variant, 67016 ...props 67017 }, ref) { 67018 const isVariantDefined = variant !== undefined; 67019 const contextSystemValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 67020 if (isVariantDefined) { 67021 return {}; 67022 } 67023 return { 67024 DropdownMenu: { 67025 variant: 'toolbar' 67026 }, 67027 Dropdown: { 67028 variant: 'toolbar' 67029 }, 67030 Menu: { 67031 variant: 'toolbar' 67032 } 67033 }; 67034 }, [isVariantDefined]); 67035 if (!label) { 67036 external_wp_deprecated_default()('Using Toolbar without label prop', { 67037 since: '5.6', 67038 alternative: 'ToolbarGroup component', 67039 link: 'https://developer.wordpress.org/block-editor/components/toolbar/' 67040 }); 67041 // Extracting title from `props` because `ToolbarGroup` doesn't accept it. 67042 const { 67043 title: _title, 67044 ...restProps 67045 } = props; 67046 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_group, { 67047 isCollapsed: false, 67048 ...restProps, 67049 className: className 67050 }); 67051 } 67052 // `ToolbarGroup` already uses components-toolbar for compatibility reasons. 67053 const finalClassName = dist_clsx('components-accessible-toolbar', className, variant && `is-$variant}`); 67054 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { 67055 value: contextSystemValue, 67056 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_container, { 67057 className: finalClassName, 67058 label: label, 67059 ref: ref, 67060 ...props 67061 }) 67062 }); 67063 } 67064 67065 /** 67066 * Renders a toolbar. 67067 * 67068 * To add controls, simply pass `ToolbarButton` components as children. 67069 * 67070 * ```jsx 67071 * import { Toolbar, ToolbarButton } from '@wordpress/components'; 67072 * import { formatBold, formatItalic, link } from '@wordpress/icons'; 67073 * 67074 * function MyToolbar() { 67075 * return ( 67076 * <Toolbar label="Options"> 67077 * <ToolbarButton icon={ formatBold } label="Bold" /> 67078 * <ToolbarButton icon={ formatItalic } label="Italic" /> 67079 * <ToolbarButton icon={ link } label="Link" /> 67080 * </Toolbar> 67081 * ); 67082 * } 67083 * ``` 67084 */ 67085 const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbar); 67086 /* harmony default export */ const toolbar = (toolbar_Toolbar); 67087 67088 ;// ./node_modules/@wordpress/components/build-module/toolbar/toolbar-dropdown-menu/index.js 67089 /** 67090 * WordPress dependencies 67091 */ 67092 67093 67094 /** 67095 * External dependencies 67096 */ 67097 67098 /** 67099 * Internal dependencies 67100 */ 67101 67102 67103 67104 67105 function ToolbarDropdownMenu(props, ref) { 67106 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 67107 if (!accessibleToolbarState) { 67108 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { 67109 ...props 67110 }); 67111 } 67112 67113 // ToolbarItem will pass all props to the render prop child, which will pass 67114 // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu 67115 // has the same API as DropdownMenu. 67116 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, { 67117 ref: ref, 67118 ...props.toggleProps, 67119 children: toolbarItemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { 67120 ...props, 67121 popoverProps: { 67122 ...props.popoverProps 67123 }, 67124 toggleProps: toolbarItemProps 67125 }) 67126 }); 67127 } 67128 /* harmony default export */ const toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu)); 67129 67130 ;// ./node_modules/@wordpress/components/build-module/tools-panel/styles.js 67131 67132 function tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 67133 /** 67134 * External dependencies 67135 */ 67136 67137 67138 67139 /** 67140 * Internal dependencies 67141 */ 67142 67143 67144 67145 67146 const toolsPanelGrid = { 67147 columns: columns => /*#__PURE__*/emotion_react_browser_esm_css("grid-template-columns:", `repeat( $columns}, minmax(0, 1fr) )`, ";" + ( true ? "" : 0), true ? "" : 0), 67148 spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(4), ";row-gap:", space(4), ";" + ( true ? "" : 0), true ? "" : 0), 67149 item: { 67150 fullWidth: true ? { 67151 name: "18iuzk9", 67152 styles: "grid-column:1/-1" 67153 } : 0 67154 } 67155 }; 67156 const ToolsPanel = columns => /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.columns(columns), " ", toolsPanelGrid.spacing, " border-top:", config_values.borderWidth, " solid ", COLORS.gray[300], ";margin-top:-1px;padding:", space(4), ";" + ( true ? "" : 0), true ? "" : 0); 67157 67158 /** 67159 * Items injected into a ToolsPanel via a virtual bubbling slot will require 67160 * an inner dom element to be injected. The following rule allows for the 67161 * CSS grid display to be re-established. 67162 */ 67163 67164 const ToolsPanelWithInnerWrapper = columns => { 67165 return /*#__PURE__*/emotion_react_browser_esm_css(">div:not( :first-of-type ){display:grid;", toolsPanelGrid.columns(columns), " ", toolsPanelGrid.spacing, " ", toolsPanelGrid.item.fullWidth, ";}" + ( true ? "" : 0), true ? "" : 0); 67166 }; 67167 const ToolsPanelHiddenInnerWrapper = true ? { 67168 name: "huufmu", 67169 styles: ">div:not( :first-of-type ){display:none;}" 67170 } : 0; 67171 const ToolsPanelHeader = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, " gap:", space(2), ";.components-dropdown-menu{margin:", space(-1), " 0;line-height:0;}&&&& .components-dropdown-menu__toggle{padding:0;min-width:", space(6), ";}" + ( true ? "" : 0), true ? "" : 0); 67172 const ToolsPanelHeading = true ? { 67173 name: "1pmxm02", 67174 styles: "font-size:inherit;font-weight:500;line-height:normal;&&{margin:0;}" 67175 } : 0; 67176 const ToolsPanelItem = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, "&>div,&>fieldset{padding-bottom:0;margin-bottom:0;max-width:100%;}&& ", Wrapper, "{margin-bottom:0;", StyledField, ":last-child{margin-bottom:0;}}", StyledHelp, "{margin-bottom:0;}&& ", LabelWrapper, "{label{line-height:1.4em;}}" + ( true ? "" : 0), true ? "" : 0); 67177 const ToolsPanelItemPlaceholder = true ? { 67178 name: "eivff4", 67179 styles: "display:none" 67180 } : 0; 67181 const styles_DropdownMenu = true ? { 67182 name: "16gsvie", 67183 styles: "min-width:200px" 67184 } : 0; 67185 const ResetLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 67186 target: "ews648u0" 67187 } : 0)("color:", COLORS.theme.accentDarker10, ";font-size:11px;font-weight:500;line-height:1.4;", rtl({ 67188 marginLeft: space(3) 67189 }), " text-transform:uppercase;" + ( true ? "" : 0)); 67190 const DefaultControlsItem = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&&[aria-disabled='true']{color:", COLORS.gray[700], ";opacity:1;&:hover{color:", COLORS.gray[700], ";}", ResetLabel, "{opacity:0.3;}}" + ( true ? "" : 0), true ? "" : 0); 67191 67192 ;// ./node_modules/@wordpress/components/build-module/tools-panel/context.js 67193 /** 67194 * WordPress dependencies 67195 */ 67196 67197 67198 /** 67199 * Internal dependencies 67200 */ 67201 67202 const tools_panel_context_noop = () => undefined; 67203 const ToolsPanelContext = (0,external_wp_element_namespaceObject.createContext)({ 67204 menuItems: { 67205 default: {}, 67206 optional: {} 67207 }, 67208 hasMenuItems: false, 67209 isResetting: false, 67210 shouldRenderPlaceholderItems: false, 67211 registerPanelItem: tools_panel_context_noop, 67212 deregisterPanelItem: tools_panel_context_noop, 67213 flagItemCustomization: tools_panel_context_noop, 67214 registerResetAllFilter: tools_panel_context_noop, 67215 deregisterResetAllFilter: tools_panel_context_noop, 67216 areAllOptionalControlsHidden: true 67217 }); 67218 const useToolsPanelContext = () => (0,external_wp_element_namespaceObject.useContext)(ToolsPanelContext); 67219 67220 ;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/hook.js 67221 /** 67222 * WordPress dependencies 67223 */ 67224 67225 67226 /** 67227 * Internal dependencies 67228 */ 67229 67230 67231 67232 67233 function useToolsPanelHeader(props) { 67234 const { 67235 className, 67236 headingLevel = 2, 67237 ...otherProps 67238 } = useContextSystem(props, 'ToolsPanelHeader'); 67239 const cx = useCx(); 67240 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 67241 return cx(ToolsPanelHeader, className); 67242 }, [className, cx]); 67243 const dropdownMenuClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 67244 return cx(styles_DropdownMenu); 67245 }, [cx]); 67246 const headingClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 67247 return cx(ToolsPanelHeading); 67248 }, [cx]); 67249 const defaultControlsItemClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 67250 return cx(DefaultControlsItem); 67251 }, [cx]); 67252 const { 67253 menuItems, 67254 hasMenuItems, 67255 areAllOptionalControlsHidden 67256 } = useToolsPanelContext(); 67257 return { 67258 ...otherProps, 67259 areAllOptionalControlsHidden, 67260 defaultControlsItemClassName, 67261 dropdownMenuClassName, 67262 hasMenuItems, 67263 headingClassName, 67264 headingLevel, 67265 menuItems, 67266 className: classes 67267 }; 67268 } 67269 67270 ;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/component.js 67271 /** 67272 * External dependencies 67273 */ 67274 67275 /** 67276 * WordPress dependencies 67277 */ 67278 67279 67280 67281 67282 /** 67283 * Internal dependencies 67284 */ 67285 67286 67287 67288 67289 67290 67291 67292 67293 67294 const DefaultControlsGroup = ({ 67295 itemClassName, 67296 items, 67297 toggleItem 67298 }) => { 67299 if (!items.length) { 67300 return null; 67301 } 67302 const resetSuffix = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetLabel, { 67303 "aria-hidden": true, 67304 children: (0,external_wp_i18n_namespaceObject.__)('Reset') 67305 }); 67306 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 67307 children: items.map(([label, hasValue]) => { 67308 if (hasValue) { 67309 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { 67310 className: itemClassName, 67311 role: "menuitem", 67312 label: (0,external_wp_i18n_namespaceObject.sprintf)( 67313 // translators: %s: The name of the control being reset e.g. "Padding". 67314 (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label), 67315 onClick: () => { 67316 toggleItem(label); 67317 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( 67318 // translators: %s: The name of the control being reset e.g. "Padding". 67319 (0,external_wp_i18n_namespaceObject.__)('%s reset to default'), label), 'assertive'); 67320 }, 67321 suffix: resetSuffix, 67322 children: label 67323 }, label); 67324 } 67325 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { 67326 icon: library_check, 67327 className: itemClassName, 67328 role: "menuitemcheckbox", 67329 isSelected: true, 67330 "aria-disabled": true, 67331 children: label 67332 }, label); 67333 }) 67334 }); 67335 }; 67336 const OptionalControlsGroup = ({ 67337 items, 67338 toggleItem 67339 }) => { 67340 if (!items.length) { 67341 return null; 67342 } 67343 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 67344 children: items.map(([label, isSelected]) => { 67345 const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)( 67346 // translators: %s: The name of the control being hidden and reset e.g. "Padding". 67347 (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)( 67348 // translators: %s: The name of the control to display e.g. "Padding". 67349 (0,external_wp_i18n_namespaceObject._x)('Show %s', 'input control'), label); 67350 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { 67351 icon: isSelected ? library_check : null, 67352 isSelected: isSelected, 67353 label: itemLabel, 67354 onClick: () => { 67355 if (isSelected) { 67356 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( 67357 // translators: %s: The name of the control being reset e.g. "Padding". 67358 (0,external_wp_i18n_namespaceObject.__)('%s hidden and reset to default'), label), 'assertive'); 67359 } else { 67360 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( 67361 // translators: %s: The name of the control being reset e.g. "Padding". 67362 (0,external_wp_i18n_namespaceObject.__)('%s is now visible'), label), 'assertive'); 67363 } 67364 toggleItem(label); 67365 }, 67366 role: "menuitemcheckbox", 67367 children: label 67368 }, label); 67369 }) 67370 }); 67371 }; 67372 const component_ToolsPanelHeader = (props, forwardedRef) => { 67373 const { 67374 areAllOptionalControlsHidden, 67375 defaultControlsItemClassName, 67376 dropdownMenuClassName, 67377 hasMenuItems, 67378 headingClassName, 67379 headingLevel = 2, 67380 label: labelText, 67381 menuItems, 67382 resetAll, 67383 toggleItem, 67384 dropdownMenuProps, 67385 ...headerProps 67386 } = useToolsPanelHeader(props); 67387 if (!labelText) { 67388 return null; 67389 } 67390 const defaultItems = Object.entries(menuItems?.default || {}); 67391 const optionalItems = Object.entries(menuItems?.optional || {}); 67392 const dropDownMenuIcon = areAllOptionalControlsHidden ? library_plus : more_vertical; 67393 const dropDownMenuLabelText = (0,external_wp_i18n_namespaceObject.sprintf)( 67394 // translators: %s: The name of the tool e.g. "Color" or "Typography". 67395 (0,external_wp_i18n_namespaceObject._x)('%s options', 'Button label to reveal tool panel options'), labelText); 67396 const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0,external_wp_i18n_namespaceObject.__)('All options are currently hidden') : undefined; 67397 const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected); 67398 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { 67399 ...headerProps, 67400 ref: forwardedRef, 67401 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(heading_component, { 67402 level: headingLevel, 67403 className: headingClassName, 67404 children: labelText 67405 }), hasMenuItems && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { 67406 ...dropdownMenuProps, 67407 icon: dropDownMenuIcon, 67408 label: dropDownMenuLabelText, 67409 menuProps: { 67410 className: dropdownMenuClassName 67411 }, 67412 toggleProps: { 67413 size: 'small', 67414 description: dropdownMenuDescriptionText 67415 }, 67416 children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 67417 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(menu_group, { 67418 label: labelText, 67419 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultControlsGroup, { 67420 items: defaultItems, 67421 toggleItem: toggleItem, 67422 itemClassName: defaultControlsItemClassName 67423 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionalControlsGroup, { 67424 items: optionalItems, 67425 toggleItem: toggleItem 67426 })] 67427 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_group, { 67428 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { 67429 "aria-disabled": !canResetAll 67430 // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem, 67431 // we should rename it and explicitly allow it as an official API. All the other Button variants 67432 // don't make sense in a MenuItem context, and should be disallowed. 67433 , 67434 variant: "tertiary", 67435 onClick: () => { 67436 if (canResetAll) { 67437 resetAll(); 67438 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('All options reset'), 'assertive'); 67439 } 67440 }, 67441 children: (0,external_wp_i18n_namespaceObject.__)('Reset all') 67442 }) 67443 })] 67444 }) 67445 })] 67446 }); 67447 }; 67448 const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader'); 67449 /* harmony default export */ const tools_panel_header_component = (ConnectedToolsPanelHeader); 67450 67451 ;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/hook.js 67452 /** 67453 * WordPress dependencies 67454 */ 67455 67456 67457 /** 67458 * Internal dependencies 67459 */ 67460 67461 67462 67463 const DEFAULT_COLUMNS = 2; 67464 function emptyMenuItems() { 67465 return { 67466 default: {}, 67467 optional: {} 67468 }; 67469 } 67470 function emptyState() { 67471 return { 67472 panelItems: [], 67473 menuItemOrder: [], 67474 menuItems: emptyMenuItems() 67475 }; 67476 } 67477 const generateMenuItems = ({ 67478 panelItems, 67479 shouldReset, 67480 currentMenuItems, 67481 menuItemOrder 67482 }) => { 67483 const newMenuItems = emptyMenuItems(); 67484 const menuItems = emptyMenuItems(); 67485 panelItems.forEach(({ 67486 hasValue, 67487 isShownByDefault, 67488 label 67489 }) => { 67490 const group = isShownByDefault ? 'default' : 'optional'; 67491 67492 // If a menu item for this label has already been flagged as customized 67493 // (for default controls), or toggled on (for optional controls), do not 67494 // overwrite its value as those controls would lose that state. 67495 const existingItemValue = currentMenuItems?.[group]?.[label]; 67496 const value = existingItemValue ? existingItemValue : hasValue(); 67497 newMenuItems[group][label] = shouldReset ? false : value; 67498 }); 67499 67500 // Loop the known, previously registered items first to maintain menu order. 67501 menuItemOrder.forEach(key => { 67502 if (newMenuItems.default.hasOwnProperty(key)) { 67503 menuItems.default[key] = newMenuItems.default[key]; 67504 } 67505 if (newMenuItems.optional.hasOwnProperty(key)) { 67506 menuItems.optional[key] = newMenuItems.optional[key]; 67507 } 67508 }); 67509 67510 // Loop newMenuItems object adding any that aren't in the known items order. 67511 Object.keys(newMenuItems.default).forEach(key => { 67512 if (!menuItems.default.hasOwnProperty(key)) { 67513 menuItems.default[key] = newMenuItems.default[key]; 67514 } 67515 }); 67516 Object.keys(newMenuItems.optional).forEach(key => { 67517 if (!menuItems.optional.hasOwnProperty(key)) { 67518 menuItems.optional[key] = newMenuItems.optional[key]; 67519 } 67520 }); 67521 return menuItems; 67522 }; 67523 function panelItemsReducer(panelItems, action) { 67524 switch (action.type) { 67525 case 'REGISTER_PANEL': 67526 { 67527 const newItems = [...panelItems]; 67528 // If an item with this label has already been registered, remove it 67529 // first. This can happen when an item is moved between the default 67530 // and optional groups. 67531 const existingIndex = newItems.findIndex(oldItem => oldItem.label === action.item.label); 67532 if (existingIndex !== -1) { 67533 newItems.splice(existingIndex, 1); 67534 } 67535 newItems.push(action.item); 67536 return newItems; 67537 } 67538 case 'UNREGISTER_PANEL': 67539 { 67540 const index = panelItems.findIndex(item => item.label === action.label); 67541 if (index !== -1) { 67542 const newItems = [...panelItems]; 67543 newItems.splice(index, 1); 67544 return newItems; 67545 } 67546 return panelItems; 67547 } 67548 default: 67549 return panelItems; 67550 } 67551 } 67552 function menuItemOrderReducer(menuItemOrder, action) { 67553 switch (action.type) { 67554 case 'REGISTER_PANEL': 67555 { 67556 // Track the initial order of item registration. This is used for 67557 // maintaining menu item order later. 67558 if (menuItemOrder.includes(action.item.label)) { 67559 return menuItemOrder; 67560 } 67561 return [...menuItemOrder, action.item.label]; 67562 } 67563 default: 67564 return menuItemOrder; 67565 } 67566 } 67567 function menuItemsReducer(state, action) { 67568 switch (action.type) { 67569 case 'REGISTER_PANEL': 67570 case 'UNREGISTER_PANEL': 67571 // generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder` 67572 return generateMenuItems({ 67573 currentMenuItems: state.menuItems, 67574 panelItems: state.panelItems, 67575 menuItemOrder: state.menuItemOrder, 67576 shouldReset: false 67577 }); 67578 case 'RESET_ALL': 67579 return generateMenuItems({ 67580 panelItems: state.panelItems, 67581 menuItemOrder: state.menuItemOrder, 67582 shouldReset: true 67583 }); 67584 case 'UPDATE_VALUE': 67585 { 67586 const oldValue = state.menuItems[action.group][action.label]; 67587 if (action.value === oldValue) { 67588 return state.menuItems; 67589 } 67590 return { 67591 ...state.menuItems, 67592 [action.group]: { 67593 ...state.menuItems[action.group], 67594 [action.label]: action.value 67595 } 67596 }; 67597 } 67598 case 'TOGGLE_VALUE': 67599 { 67600 const currentItem = state.panelItems.find(item => item.label === action.label); 67601 if (!currentItem) { 67602 return state.menuItems; 67603 } 67604 const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional'; 67605 const newMenuItems = { 67606 ...state.menuItems, 67607 [menuGroup]: { 67608 ...state.menuItems[menuGroup], 67609 [action.label]: !state.menuItems[menuGroup][action.label] 67610 } 67611 }; 67612 return newMenuItems; 67613 } 67614 default: 67615 return state.menuItems; 67616 } 67617 } 67618 function panelReducer(state, action) { 67619 const panelItems = panelItemsReducer(state.panelItems, action); 67620 const menuItemOrder = menuItemOrderReducer(state.menuItemOrder, action); 67621 // `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems` 67622 // and the updated `panelItems` and `menuItemOrder`. 67623 const menuItems = menuItemsReducer({ 67624 panelItems, 67625 menuItemOrder, 67626 menuItems: state.menuItems 67627 }, action); 67628 return { 67629 panelItems, 67630 menuItemOrder, 67631 menuItems 67632 }; 67633 } 67634 function resetAllFiltersReducer(filters, action) { 67635 switch (action.type) { 67636 case 'REGISTER': 67637 return [...filters, action.filter]; 67638 case 'UNREGISTER': 67639 return filters.filter(f => f !== action.filter); 67640 default: 67641 return filters; 67642 } 67643 } 67644 const isMenuItemTypeEmpty = obj => Object.keys(obj).length === 0; 67645 function useToolsPanel(props) { 67646 const { 67647 className, 67648 headingLevel = 2, 67649 resetAll, 67650 panelId, 67651 hasInnerWrapper = false, 67652 shouldRenderPlaceholderItems = false, 67653 __experimentalFirstVisibleItemClass, 67654 __experimentalLastVisibleItemClass, 67655 ...otherProps 67656 } = useContextSystem(props, 'ToolsPanel'); 67657 const isResettingRef = (0,external_wp_element_namespaceObject.useRef)(false); 67658 const wasResetting = isResettingRef.current; 67659 67660 // `isResettingRef` is cleared via this hook to effectively batch together 67661 // the resetAll task. Without this, the flag is cleared after the first 67662 // control updates and forces a rerender with subsequent controls then 67663 // believing they need to reset, unfortunately using stale data. 67664 (0,external_wp_element_namespaceObject.useEffect)(() => { 67665 if (wasResetting) { 67666 isResettingRef.current = false; 67667 } 67668 }, [wasResetting]); 67669 67670 // Allow panel items to register themselves. 67671 const [{ 67672 panelItems, 67673 menuItems 67674 }, panelDispatch] = (0,external_wp_element_namespaceObject.useReducer)(panelReducer, undefined, emptyState); 67675 const [resetAllFilters, dispatchResetAllFilters] = (0,external_wp_element_namespaceObject.useReducer)(resetAllFiltersReducer, []); 67676 const registerPanelItem = (0,external_wp_element_namespaceObject.useCallback)(item => { 67677 // Add item to panel items. 67678 panelDispatch({ 67679 type: 'REGISTER_PANEL', 67680 item 67681 }); 67682 }, []); 67683 67684 // Panels need to deregister on unmount to avoid orphans in menu state. 67685 // This is an issue when panel items are being injected via SlotFills. 67686 const deregisterPanelItem = (0,external_wp_element_namespaceObject.useCallback)(label => { 67687 // When switching selections between components injecting matching 67688 // controls, e.g. both panels have a "padding" control, the 67689 // deregistration of the first panel doesn't occur until after the 67690 // registration of the next. 67691 panelDispatch({ 67692 type: 'UNREGISTER_PANEL', 67693 label 67694 }); 67695 }, []); 67696 const registerResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filter => { 67697 dispatchResetAllFilters({ 67698 type: 'REGISTER', 67699 filter 67700 }); 67701 }, []); 67702 const deregisterResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filter => { 67703 dispatchResetAllFilters({ 67704 type: 'UNREGISTER', 67705 filter 67706 }); 67707 }, []); 67708 67709 // Updates the status of the panel’s menu items. For default items the 67710 // value represents whether it differs from the default and for optional 67711 // items whether the item is shown. 67712 const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((value, label, group = 'default') => { 67713 panelDispatch({ 67714 type: 'UPDATE_VALUE', 67715 group, 67716 label, 67717 value 67718 }); 67719 }, []); 67720 67721 // Whether all optional menu items are hidden or not must be tracked 67722 // in order to later determine if the panel display is empty and handle 67723 // conditional display of a plus icon to indicate the presence of further 67724 // menu items. 67725 const areAllOptionalControlsHidden = (0,external_wp_element_namespaceObject.useMemo)(() => { 67726 return isMenuItemTypeEmpty(menuItems.default) && !isMenuItemTypeEmpty(menuItems.optional) && Object.values(menuItems.optional).every(isSelected => !isSelected); 67727 }, [menuItems]); 67728 const cx = useCx(); 67729 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 67730 const wrapperStyle = hasInnerWrapper && ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS); 67731 const emptyStyle = areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper; 67732 return cx(ToolsPanel(DEFAULT_COLUMNS), wrapperStyle, emptyStyle, className); 67733 }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper]); 67734 67735 // Toggle the checked state of a menu item which is then used to determine 67736 // display of the item within the panel. 67737 const toggleItem = (0,external_wp_element_namespaceObject.useCallback)(label => { 67738 panelDispatch({ 67739 type: 'TOGGLE_VALUE', 67740 label 67741 }); 67742 }, []); 67743 67744 // Resets display of children and executes resetAll callback if available. 67745 const resetAllItems = (0,external_wp_element_namespaceObject.useCallback)(() => { 67746 if (typeof resetAll === 'function') { 67747 isResettingRef.current = true; 67748 resetAll(resetAllFilters); 67749 } 67750 67751 // Turn off display of all non-default items. 67752 panelDispatch({ 67753 type: 'RESET_ALL' 67754 }); 67755 }, [resetAllFilters, resetAll]); 67756 67757 // Assist ItemGroup styling when there are potentially hidden placeholder 67758 // items by identifying first & last items that are toggled on for display. 67759 const getFirstVisibleItemLabel = items => { 67760 const optionalItems = menuItems.optional || {}; 67761 const firstItem = items.find(item => item.isShownByDefault || optionalItems[item.label]); 67762 return firstItem?.label; 67763 }; 67764 const firstDisplayedItem = getFirstVisibleItemLabel(panelItems); 67765 const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse()); 67766 const hasMenuItems = panelItems.length > 0; 67767 const panelContext = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 67768 areAllOptionalControlsHidden, 67769 deregisterPanelItem, 67770 deregisterResetAllFilter, 67771 firstDisplayedItem, 67772 flagItemCustomization, 67773 hasMenuItems, 67774 isResetting: isResettingRef.current, 67775 lastDisplayedItem, 67776 menuItems, 67777 panelId, 67778 registerPanelItem, 67779 registerResetAllFilter, 67780 shouldRenderPlaceholderItems, 67781 __experimentalFirstVisibleItemClass, 67782 __experimentalLastVisibleItemClass 67783 }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, hasMenuItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]); 67784 return { 67785 ...otherProps, 67786 headingLevel, 67787 panelContext, 67788 resetAllItems, 67789 toggleItem, 67790 className: classes 67791 }; 67792 } 67793 67794 ;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/component.js 67795 /** 67796 * External dependencies 67797 */ 67798 67799 /** 67800 * Internal dependencies 67801 */ 67802 67803 67804 67805 67806 67807 67808 const UnconnectedToolsPanel = (props, forwardedRef) => { 67809 const { 67810 children, 67811 label, 67812 panelContext, 67813 resetAllItems, 67814 toggleItem, 67815 headingLevel, 67816 dropdownMenuProps, 67817 ...toolsPanelProps 67818 } = useToolsPanel(props); 67819 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(grid_component, { 67820 ...toolsPanelProps, 67821 columns: 2, 67822 ref: forwardedRef, 67823 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ToolsPanelContext.Provider, { 67824 value: panelContext, 67825 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tools_panel_header_component, { 67826 label: label, 67827 resetAll: resetAllItems, 67828 toggleItem: toggleItem, 67829 headingLevel: headingLevel, 67830 dropdownMenuProps: dropdownMenuProps 67831 }), children] 67832 }) 67833 }); 67834 }; 67835 67836 /** 67837 * The `ToolsPanel` is a container component that displays its children preceded 67838 * by a header. The header includes a dropdown menu which is automatically 67839 * generated from the panel's inner `ToolsPanelItems`. 67840 * 67841 * ```jsx 67842 * import { __ } from '@wordpress/i18n'; 67843 * import { 67844 * __experimentalToolsPanel as ToolsPanel, 67845 * __experimentalToolsPanelItem as ToolsPanelItem, 67846 * __experimentalUnitControl as UnitControl 67847 * } from '@wordpress/components'; 67848 * 67849 * function Example() { 67850 * const [ height, setHeight ] = useState(); 67851 * const [ width, setWidth ] = useState(); 67852 * 67853 * const resetAll = () => { 67854 * setHeight(); 67855 * setWidth(); 67856 * } 67857 * 67858 * return ( 67859 * <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }> 67860 * <ToolsPanelItem 67861 * hasValue={ () => !! height } 67862 * label={ __( 'Height' ) } 67863 * onDeselect={ () => setHeight() } 67864 * > 67865 * <UnitControl 67866 * __next40pxDefaultSize 67867 * label={ __( 'Height' ) } 67868 * onChange={ setHeight } 67869 * value={ height } 67870 * /> 67871 * </ToolsPanelItem> 67872 * <ToolsPanelItem 67873 * hasValue={ () => !! width } 67874 * label={ __( 'Width' ) } 67875 * onDeselect={ () => setWidth() } 67876 * > 67877 * <UnitControl 67878 * __next40pxDefaultSize 67879 * label={ __( 'Width' ) } 67880 * onChange={ setWidth } 67881 * value={ width } 67882 * /> 67883 * </ToolsPanelItem> 67884 * </ToolsPanel> 67885 * ); 67886 * } 67887 * ``` 67888 */ 67889 const component_ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel'); 67890 /* harmony default export */ const tools_panel_component = (component_ToolsPanel); 67891 67892 ;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/hook.js 67893 /** 67894 * WordPress dependencies 67895 */ 67896 67897 67898 67899 /** 67900 * Internal dependencies 67901 */ 67902 67903 67904 67905 67906 const hook_noop = () => {}; 67907 function useToolsPanelItem(props) { 67908 const { 67909 className, 67910 hasValue, 67911 isShownByDefault = false, 67912 label, 67913 panelId, 67914 resetAllFilter = hook_noop, 67915 onDeselect, 67916 onSelect, 67917 ...otherProps 67918 } = useContextSystem(props, 'ToolsPanelItem'); 67919 const { 67920 panelId: currentPanelId, 67921 menuItems, 67922 registerResetAllFilter, 67923 deregisterResetAllFilter, 67924 registerPanelItem, 67925 deregisterPanelItem, 67926 flagItemCustomization, 67927 isResetting, 67928 shouldRenderPlaceholderItems: shouldRenderPlaceholder, 67929 firstDisplayedItem, 67930 lastDisplayedItem, 67931 __experimentalFirstVisibleItemClass, 67932 __experimentalLastVisibleItemClass 67933 } = useToolsPanelContext(); 67934 67935 // hasValue is a new function on every render, so do not add it as a 67936 // dependency to the useCallback hook! If needed, we should use a ref. 67937 const hasValueCallback = (0,external_wp_element_namespaceObject.useCallback)(hasValue, [panelId]); 67938 // resetAllFilter is a new function on every render, so do not add it as a 67939 // dependency to the useCallback hook! If needed, we should use a ref. 67940 const resetAllFilterCallback = (0,external_wp_element_namespaceObject.useCallback)(resetAllFilter, [panelId]); 67941 const previousPanelId = (0,external_wp_compose_namespaceObject.usePrevious)(currentPanelId); 67942 const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null; 67943 67944 // Registering the panel item allows the panel to include it in its 67945 // automatically generated menu and determine its initial checked status. 67946 // 67947 // This is performed in a layout effect to ensure that the panel item 67948 // is registered before it is rendered preventing a rendering glitch. 67949 // See: https://github.com/WordPress/gutenberg/issues/56470 67950 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 67951 if (hasMatchingPanel && previousPanelId !== null) { 67952 registerPanelItem({ 67953 hasValue: hasValueCallback, 67954 isShownByDefault, 67955 label, 67956 panelId 67957 }); 67958 } 67959 return () => { 67960 if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) { 67961 deregisterPanelItem(label); 67962 } 67963 }; 67964 }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]); 67965 (0,external_wp_element_namespaceObject.useEffect)(() => { 67966 if (hasMatchingPanel) { 67967 registerResetAllFilter(resetAllFilterCallback); 67968 } 67969 return () => { 67970 if (hasMatchingPanel) { 67971 deregisterResetAllFilter(resetAllFilterCallback); 67972 } 67973 }; 67974 }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]); 67975 67976 // Note: `label` is used as a key when building menu item state in 67977 // `ToolsPanel`. 67978 const menuGroup = isShownByDefault ? 'default' : 'optional'; 67979 const isMenuItemChecked = menuItems?.[menuGroup]?.[label]; 67980 const wasMenuItemChecked = (0,external_wp_compose_namespaceObject.usePrevious)(isMenuItemChecked); 67981 const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined; 67982 const isValueSet = hasValue(); 67983 // Notify the panel when an item's value has changed except for optional 67984 // items without value because the item should not cause itself to hide. 67985 (0,external_wp_element_namespaceObject.useEffect)(() => { 67986 if (!isShownByDefault && !isValueSet) { 67987 return; 67988 } 67989 flagItemCustomization(isValueSet, label, menuGroup); 67990 }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]); 67991 67992 // Determine if the panel item's corresponding menu is being toggled and 67993 // trigger appropriate callback if it is. 67994 (0,external_wp_element_namespaceObject.useEffect)(() => { 67995 // We check whether this item is currently registered as items rendered 67996 // via fills can persist through the parent panel being remounted. 67997 // See: https://github.com/WordPress/gutenberg/pull/45673 67998 if (!isRegistered || isResetting || !hasMatchingPanel) { 67999 return; 68000 } 68001 if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) { 68002 onSelect?.(); 68003 } 68004 if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) { 68005 onDeselect?.(); 68006 } 68007 }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]); 68008 68009 // The item is shown if it is a default control regardless of whether it 68010 // has a value. Optional items are shown when they are checked or have 68011 // a value. 68012 const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked; 68013 const cx = useCx(); 68014 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 68015 const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown; 68016 const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass; 68017 const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass; 68018 return cx(ToolsPanelItem, shouldApplyPlaceholderStyles && ToolsPanelItemPlaceholder, !shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle); 68019 }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]); 68020 return { 68021 ...otherProps, 68022 isShown, 68023 shouldRenderPlaceholder, 68024 className: classes 68025 }; 68026 } 68027 68028 ;// ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/component.js 68029 /** 68030 * External dependencies 68031 */ 68032 68033 /** 68034 * Internal dependencies 68035 */ 68036 68037 68038 68039 68040 // This wraps controls to be conditionally displayed within a tools panel. It 68041 // prevents props being applied to HTML elements that would make them invalid. 68042 const UnconnectedToolsPanelItem = (props, forwardedRef) => { 68043 const { 68044 children, 68045 isShown, 68046 shouldRenderPlaceholder, 68047 ...toolsPanelItemProps 68048 } = useToolsPanelItem(props); 68049 if (!isShown) { 68050 return shouldRenderPlaceholder ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 68051 ...toolsPanelItemProps, 68052 ref: forwardedRef 68053 }) : null; 68054 } 68055 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { 68056 ...toolsPanelItemProps, 68057 ref: forwardedRef, 68058 children: children 68059 }); 68060 }; 68061 const component_ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, 'ToolsPanelItem'); 68062 /* harmony default export */ const tools_panel_item_component = (component_ToolsPanelItem); 68063 68064 ;// ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-context.js 68065 /** 68066 * WordPress dependencies 68067 */ 68068 68069 const RovingTabIndexContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 68070 const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.useContext)(RovingTabIndexContext); 68071 const RovingTabIndexProvider = RovingTabIndexContext.Provider; 68072 68073 ;// ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js 68074 /** 68075 * WordPress dependencies 68076 */ 68077 68078 68079 /** 68080 * Internal dependencies 68081 */ 68082 68083 68084 /** 68085 * Provider for adding roving tab index behaviors to tree grid structures. 68086 * 68087 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md 68088 */ 68089 68090 function RovingTabIndex({ 68091 children 68092 }) { 68093 const [lastFocusedElement, setLastFocusedElement] = (0,external_wp_element_namespaceObject.useState)(); 68094 68095 // Use `useMemo` to avoid creation of a new object for the providerValue 68096 // on every render. Only create a new object when the `lastFocusedElement` 68097 // value changes. 68098 const providerValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 68099 lastFocusedElement, 68100 setLastFocusedElement 68101 }), [lastFocusedElement]); 68102 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RovingTabIndexProvider, { 68103 value: providerValue, 68104 children: children 68105 }); 68106 } 68107 68108 ;// ./node_modules/@wordpress/components/build-module/tree-grid/index.js 68109 /** 68110 * WordPress dependencies 68111 */ 68112 68113 68114 68115 68116 /** 68117 * Internal dependencies 68118 */ 68119 68120 68121 /** 68122 * Return focusables in a row element, excluding those from other branches 68123 * nested within the row. 68124 * 68125 * @param rowElement The DOM element representing the row. 68126 * 68127 * @return The array of focusables in the row. 68128 */ 68129 function getRowFocusables(rowElement) { 68130 const focusablesInRow = external_wp_dom_namespaceObject.focus.focusable.find(rowElement, { 68131 sequential: true 68132 }); 68133 return focusablesInRow.filter(focusable => { 68134 return focusable.closest('[role="row"]') === rowElement; 68135 }); 68136 } 68137 68138 /** 68139 * Renders both a table and tbody element, used to create a tree hierarchy. 68140 * 68141 */ 68142 function UnforwardedTreeGrid({ 68143 children, 68144 onExpandRow = () => {}, 68145 onCollapseRow = () => {}, 68146 onFocusRow = () => {}, 68147 applicationAriaLabel, 68148 ...props 68149 }, /** A ref to the underlying DOM table element. */ 68150 ref) { 68151 const onKeyDown = (0,external_wp_element_namespaceObject.useCallback)(event => { 68152 const { 68153 keyCode, 68154 metaKey, 68155 ctrlKey, 68156 altKey 68157 } = event; 68158 68159 // The shift key is intentionally absent from the following list, 68160 // to enable shift + up/down to select items from the list. 68161 const hasModifierKeyPressed = metaKey || ctrlKey || altKey; 68162 if (hasModifierKeyPressed || ![external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT, external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END].includes(keyCode)) { 68163 return; 68164 } 68165 68166 // The event will be handled, stop propagation. 68167 event.stopPropagation(); 68168 const { 68169 activeElement 68170 } = document; 68171 const { 68172 currentTarget: treeGridElement 68173 } = event; 68174 if (!activeElement || !treeGridElement.contains(activeElement)) { 68175 return; 68176 } 68177 68178 // Calculate the columnIndex of the active element. 68179 const activeRow = activeElement.closest('[role="row"]'); 68180 if (!activeRow) { 68181 return; 68182 } 68183 const focusablesInRow = getRowFocusables(activeRow); 68184 const currentColumnIndex = focusablesInRow.indexOf(activeElement); 68185 const canExpandCollapse = 0 === currentColumnIndex; 68186 const cannotFocusNextColumn = canExpandCollapse && (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') && keyCode === external_wp_keycodes_namespaceObject.RIGHT; 68187 if ([external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT].includes(keyCode)) { 68188 // Calculate to the next element. 68189 let nextIndex; 68190 if (keyCode === external_wp_keycodes_namespaceObject.LEFT) { 68191 nextIndex = Math.max(0, currentColumnIndex - 1); 68192 } else { 68193 nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1); 68194 } 68195 68196 // Focus is at the left most column. 68197 if (canExpandCollapse) { 68198 if (keyCode === external_wp_keycodes_namespaceObject.LEFT) { 68199 var _activeRow$getAttribu; 68200 // Left: 68201 // If a row is focused, and it is expanded, collapses the current row. 68202 if (activeRow.getAttribute('data-expanded') === 'true' || activeRow.getAttribute('aria-expanded') === 'true') { 68203 onCollapseRow(activeRow); 68204 event.preventDefault(); 68205 return; 68206 } 68207 // If a row is focused, and it is collapsed, moves to the parent row (if there is one). 68208 const level = Math.max(parseInt((_activeRow$getAttribu = activeRow?.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : '1', 10) - 1, 1); 68209 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 68210 let parentRow = activeRow; 68211 const currentRowIndex = rows.indexOf(activeRow); 68212 for (let i = currentRowIndex; i >= 0; i--) { 68213 const ariaLevel = rows[i].getAttribute('aria-level'); 68214 if (ariaLevel !== null && parseInt(ariaLevel, 10) === level) { 68215 parentRow = rows[i]; 68216 break; 68217 } 68218 } 68219 getRowFocusables(parentRow)?.[0]?.focus(); 68220 } 68221 if (keyCode === external_wp_keycodes_namespaceObject.RIGHT) { 68222 // Right: 68223 // If a row is focused, and it is collapsed, expands the current row. 68224 if (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') { 68225 onExpandRow(activeRow); 68226 event.preventDefault(); 68227 return; 68228 } 68229 // If a row is focused, and it is expanded, focuses the next cell in the row. 68230 const focusableItems = getRowFocusables(activeRow); 68231 if (focusableItems.length > 0) { 68232 focusableItems[nextIndex]?.focus(); 68233 } 68234 } 68235 // Prevent key use for anything else. For example, Voiceover 68236 // will start reading text on continued use of left/right arrow 68237 // keys. 68238 event.preventDefault(); 68239 return; 68240 } 68241 68242 // Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed. 68243 if (cannotFocusNextColumn) { 68244 return; 68245 } 68246 focusablesInRow[nextIndex].focus(); 68247 68248 // Prevent key use for anything else. This ensures Voiceover 68249 // doesn't try to handle key navigation. 68250 event.preventDefault(); 68251 } else if ([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN].includes(keyCode)) { 68252 // Calculate the rowIndex of the next row. 68253 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 68254 const currentRowIndex = rows.indexOf(activeRow); 68255 let nextRowIndex; 68256 if (keyCode === external_wp_keycodes_namespaceObject.UP) { 68257 nextRowIndex = Math.max(0, currentRowIndex - 1); 68258 } else { 68259 nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1); 68260 } 68261 68262 // Focus is either at the top or bottom edge of the grid. Do nothing. 68263 if (nextRowIndex === currentRowIndex) { 68264 // Prevent key use for anything else. For example, Voiceover 68265 // will start navigating horizontally when reaching the vertical 68266 // bounds of a table. 68267 event.preventDefault(); 68268 return; 68269 } 68270 68271 // Get the focusables in the next row. 68272 const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); 68273 68274 // If for some reason there are no focusables in the next row, do nothing. 68275 if (!focusablesInNextRow || !focusablesInNextRow.length) { 68276 // Prevent key use for anything else. For example, Voiceover 68277 // will still focus text when using arrow keys, while this 68278 // component should limit navigation to focusables. 68279 event.preventDefault(); 68280 return; 68281 } 68282 68283 // Try to focus the element in the next row that's at a similar column to the activeElement. 68284 const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1); 68285 focusablesInNextRow[nextIndex].focus(); 68286 68287 // Let consumers know the row that was originally focused, 68288 // and the row that is now in focus. 68289 onFocusRow(event, activeRow, rows[nextRowIndex]); 68290 68291 // Prevent key use for anything else. This ensures Voiceover 68292 // doesn't try to handle key navigation. 68293 event.preventDefault(); 68294 } else if ([external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END].includes(keyCode)) { 68295 // Calculate the rowIndex of the next row. 68296 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 68297 const currentRowIndex = rows.indexOf(activeRow); 68298 let nextRowIndex; 68299 if (keyCode === external_wp_keycodes_namespaceObject.HOME) { 68300 nextRowIndex = 0; 68301 } else { 68302 nextRowIndex = rows.length - 1; 68303 } 68304 68305 // Focus is either at the top or bottom edge of the grid. Do nothing. 68306 if (nextRowIndex === currentRowIndex) { 68307 // Prevent key use for anything else. For example, Voiceover 68308 // will start navigating horizontally when reaching the vertical 68309 // bounds of a table. 68310 event.preventDefault(); 68311 return; 68312 } 68313 68314 // Get the focusables in the next row. 68315 const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); 68316 68317 // If for some reason there are no focusables in the next row, do nothing. 68318 if (!focusablesInNextRow || !focusablesInNextRow.length) { 68319 // Prevent key use for anything else. For example, Voiceover 68320 // will still focus text when using arrow keys, while this 68321 // component should limit navigation to focusables. 68322 event.preventDefault(); 68323 return; 68324 } 68325 68326 // Try to focus the element in the next row that's at a similar column to the activeElement. 68327 const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1); 68328 focusablesInNextRow[nextIndex].focus(); 68329 68330 // Let consumers know the row that was originally focused, 68331 // and the row that is now in focus. 68332 onFocusRow(event, activeRow, rows[nextRowIndex]); 68333 68334 // Prevent key use for anything else. This ensures Voiceover 68335 // doesn't try to handle key navigation. 68336 event.preventDefault(); 68337 } 68338 }, [onExpandRow, onCollapseRow, onFocusRow]); 68339 68340 /* Disable reason: A treegrid is implemented using a table element. */ 68341 /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */ 68342 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RovingTabIndex, { 68343 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 68344 role: "application", 68345 "aria-label": applicationAriaLabel, 68346 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("table", { 68347 ...props, 68348 role: "treegrid", 68349 onKeyDown: onKeyDown, 68350 ref: ref, 68351 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tbody", { 68352 children: children 68353 }) 68354 }) 68355 }) 68356 }); 68357 /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */ 68358 } 68359 68360 /** 68361 * `TreeGrid` is used to create a tree hierarchy. 68362 * It is not a visually styled component, but instead helps with adding 68363 * keyboard navigation and roving tab index behaviors to tree grid structures. 68364 * 68365 * A tree grid is a hierarchical 2 dimensional UI component, for example it could be 68366 * used to implement a file system browser. 68367 * 68368 * A tree grid allows the user to navigate using arrow keys. 68369 * Up/down to navigate vertically across rows, and left/right to navigate horizontally 68370 * between focusables in a row. 68371 * 68372 * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used 68373 * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid. 68374 * 68375 * ```jsx 68376 * function TreeMenu() { 68377 * return ( 68378 * <TreeGrid> 68379 * <TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }> 68380 * <TreeGridCell> 68381 * { ( props ) => ( 68382 * <Button onClick={ onSelect } { ...props }>Select</Button> 68383 * ) } 68384 * </TreeGridCell> 68385 * <TreeGridCell> 68386 * { ( props ) => ( 68387 * <Button onClick={ onMove } { ...props }>Move</Button> 68388 * ) } 68389 * </TreeGridCell> 68390 * </TreeGridRow> 68391 * <TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }> 68392 * <TreeGridCell> 68393 * { ( props ) => ( 68394 * <Button onClick={ onSelect } { ...props }>Select</Button> 68395 * ) } 68396 * </TreeGridCell> 68397 * <TreeGridCell> 68398 * { ( props ) => ( 68399 * <Button onClick={ onMove } { ...props }>Move</Button> 68400 * ) } 68401 * </TreeGridCell> 68402 * </TreeGridRow> 68403 * <TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }> 68404 * <TreeGridCell> 68405 * { ( props ) => ( 68406 * <Button onClick={ onSelect } { ...props }>Select</Button> 68407 * ) } 68408 * </TreeGridCell> 68409 * <TreeGridCell> 68410 * { ( props ) => ( 68411 * <Button onClick={ onMove } { ...props }>Move</Button> 68412 * ) } 68413 * </TreeGridCell> 68414 * </TreeGridRow> 68415 * </TreeGrid> 68416 * ); 68417 * } 68418 * ``` 68419 * 68420 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 68421 */ 68422 const TreeGrid = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGrid); 68423 /* harmony default export */ const tree_grid = (TreeGrid); 68424 68425 68426 68427 68428 ;// ./node_modules/@wordpress/components/build-module/tree-grid/row.js 68429 /** 68430 * WordPress dependencies 68431 */ 68432 68433 68434 /** 68435 * Internal dependencies 68436 */ 68437 68438 function UnforwardedTreeGridRow({ 68439 children, 68440 level, 68441 positionInSet, 68442 setSize, 68443 isExpanded, 68444 ...props 68445 }, ref) { 68446 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tr", { 68447 ...props, 68448 ref: ref, 68449 role: "row", 68450 "aria-level": level, 68451 "aria-posinset": positionInSet, 68452 "aria-setsize": setSize, 68453 "aria-expanded": isExpanded, 68454 children: children 68455 }); 68456 } 68457 68458 /** 68459 * `TreeGridRow` is used to create a tree hierarchy. 68460 * It is not a visually styled component, but instead helps with adding 68461 * keyboard navigation and roving tab index behaviors to tree grid structures. 68462 * 68463 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 68464 */ 68465 const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridRow); 68466 /* harmony default export */ const tree_grid_row = (TreeGridRow); 68467 68468 ;// ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js 68469 /** 68470 * WordPress dependencies 68471 */ 68472 68473 68474 /** 68475 * Internal dependencies 68476 */ 68477 68478 68479 const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(function UnforwardedRovingTabIndexItem({ 68480 children, 68481 as: Component, 68482 ...props 68483 }, forwardedRef) { 68484 const localRef = (0,external_wp_element_namespaceObject.useRef)(); 68485 const ref = forwardedRef || localRef; 68486 // @ts-expect-error - We actually want to throw an error if this is undefined. 68487 const { 68488 lastFocusedElement, 68489 setLastFocusedElement 68490 } = useRovingTabIndexContext(); 68491 let tabIndex; 68492 if (lastFocusedElement) { 68493 tabIndex = lastFocusedElement === ( 68494 // TODO: The original implementation simply used `ref.current` here, assuming 68495 // that a forwarded ref would always be an object, which is not necessarily true. 68496 // This workaround maintains the original runtime behavior in a type-safe way, 68497 // but should be revisited. 68498 'current' in ref ? ref.current : undefined) ? 0 : -1; 68499 } 68500 const onFocus = event => setLastFocusedElement?.(event.target); 68501 const allProps = { 68502 ref, 68503 tabIndex, 68504 onFocus, 68505 ...props 68506 }; 68507 if (typeof children === 'function') { 68508 return children(allProps); 68509 } 68510 if (!Component) { 68511 return null; 68512 } 68513 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 68514 ...allProps, 68515 children: children 68516 }); 68517 }); 68518 /* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem); 68519 68520 ;// ./node_modules/@wordpress/components/build-module/tree-grid/item.js 68521 /** 68522 * WordPress dependencies 68523 */ 68524 68525 68526 /** 68527 * Internal dependencies 68528 */ 68529 68530 68531 function UnforwardedTreeGridItem({ 68532 children, 68533 ...props 68534 }, ref) { 68535 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(roving_tab_index_item, { 68536 ref: ref, 68537 ...props, 68538 children: children 68539 }); 68540 } 68541 68542 /** 68543 * `TreeGridItem` is used to create a tree hierarchy. 68544 * It is not a visually styled component, but instead helps with adding 68545 * keyboard navigation and roving tab index behaviors to tree grid structures. 68546 * 68547 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 68548 */ 68549 const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridItem); 68550 /* harmony default export */ const tree_grid_item = (TreeGridItem); 68551 68552 ;// ./node_modules/@wordpress/components/build-module/tree-grid/cell.js 68553 /** 68554 * WordPress dependencies 68555 */ 68556 68557 68558 /** 68559 * Internal dependencies 68560 */ 68561 68562 68563 function UnforwardedTreeGridCell({ 68564 children, 68565 withoutGridItem = false, 68566 ...props 68567 }, ref) { 68568 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("td", { 68569 ...props, 68570 role: "gridcell", 68571 children: withoutGridItem ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { 68572 children: typeof children === 'function' ? children({ 68573 ...props, 68574 ref 68575 }) : children 68576 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_grid_item, { 68577 ref: ref, 68578 children: children 68579 }) 68580 }); 68581 } 68582 68583 /** 68584 * `TreeGridCell` is used to create a tree hierarchy. 68585 * It is not a visually styled component, but instead helps with adding 68586 * keyboard navigation and roving tab index behaviors to tree grid structures. 68587 * 68588 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 68589 */ 68590 const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridCell); 68591 /* harmony default export */ const cell = (TreeGridCell); 68592 68593 ;// ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js 68594 /** 68595 * External dependencies 68596 */ 68597 68598 /** 68599 * WordPress dependencies 68600 */ 68601 68602 68603 68604 function stopPropagation(event) { 68605 event.stopPropagation(); 68606 } 68607 const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => { 68608 external_wp_deprecated_default()('wp.components.IsolatedEventContainer', { 68609 since: '5.7' 68610 }); 68611 68612 // Disable reason: this stops certain events from propagating outside of the component. 68613 // - onMouseDown is disabled as this can cause interactions with other DOM elements. 68614 /* eslint-disable jsx-a11y/no-static-element-interactions */ 68615 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 68616 ...props, 68617 ref: ref, 68618 onMouseDown: stopPropagation 68619 }); 68620 /* eslint-enable jsx-a11y/no-static-element-interactions */ 68621 }); 68622 /* harmony default export */ const isolated_event_container = (IsolatedEventContainer); 68623 68624 ;// ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js 68625 /** 68626 * WordPress dependencies 68627 */ 68628 68629 68630 68631 /** 68632 * Internal dependencies 68633 */ 68634 68635 function useSlotFills(name) { 68636 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 68637 return (0,external_wp_compose_namespaceObject.useObservableValue)(registry.fills, name); 68638 } 68639 68640 ;// ./node_modules/@wordpress/components/build-module/z-stack/styles.js 68641 68642 function z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 68643 /** 68644 * External dependencies 68645 */ 68646 68647 const ZStackChildView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 68648 target: "ebn2ljm1" 68649 } : 0)("&:not( :first-of-type ){", ({ 68650 offsetAmount 68651 }) => /*#__PURE__*/emotion_react_browser_esm_css({ 68652 marginInlineStart: offsetAmount 68653 }, true ? "" : 0, true ? "" : 0), ";}", ({ 68654 zIndex 68655 }) => /*#__PURE__*/emotion_react_browser_esm_css({ 68656 zIndex 68657 }, true ? "" : 0, true ? "" : 0), ";" + ( true ? "" : 0)); 68658 var z_stack_styles_ref = true ? { 68659 name: "rs0gp6", 68660 styles: "grid-row-start:1;grid-column-start:1" 68661 } : 0; 68662 const ZStackView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 68663 target: "ebn2ljm0" 68664 } : 0)("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({ 68665 isLayered 68666 }) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell 68667 z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0)); 68668 68669 ;// ./node_modules/@wordpress/components/build-module/z-stack/component.js 68670 /** 68671 * External dependencies 68672 */ 68673 68674 /** 68675 * WordPress dependencies 68676 */ 68677 68678 68679 /** 68680 * Internal dependencies 68681 */ 68682 68683 68684 68685 68686 function UnconnectedZStack(props, forwardedRef) { 68687 const { 68688 children, 68689 className, 68690 isLayered = true, 68691 isReversed = false, 68692 offset = 0, 68693 ...otherProps 68694 } = useContextSystem(props, 'ZStack'); 68695 const validChildren = getValidChildren(children); 68696 const childrenLastIndex = validChildren.length - 1; 68697 const clonedChildren = validChildren.map((child, index) => { 68698 const zIndex = isReversed ? childrenLastIndex - index : index; 68699 // Only when the component is layered, the offset needs to be multiplied by 68700 // the item's index, so that items can correctly stack at the right distance 68701 const offsetAmount = isLayered ? offset * index : offset; 68702 const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index; 68703 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZStackChildView, { 68704 offsetAmount: offsetAmount, 68705 zIndex: zIndex, 68706 children: child 68707 }, key); 68708 }); 68709 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZStackView, { 68710 ...otherProps, 68711 className: className, 68712 isLayered: isLayered, 68713 ref: forwardedRef, 68714 children: clonedChildren 68715 }); 68716 } 68717 68718 /** 68719 * `ZStack` allows you to stack things along the Z-axis. 68720 * 68721 * ```jsx 68722 * import { __experimentalZStack as ZStack } from '@wordpress/components'; 68723 * 68724 * function Example() { 68725 * return ( 68726 * <ZStack offset={ 20 } isLayered> 68727 * <ExampleImage /> 68728 * <ExampleImage /> 68729 * <ExampleImage /> 68730 * </ZStack> 68731 * ); 68732 * } 68733 * ``` 68734 */ 68735 const ZStack = contextConnect(UnconnectedZStack, 'ZStack'); 68736 /* harmony default export */ const z_stack_component = (ZStack); 68737 68738 ;// ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js 68739 /** 68740 * WordPress dependencies 68741 */ 68742 68743 68744 68745 68746 const defaultShortcuts = { 68747 previous: [{ 68748 modifier: 'ctrlShift', 68749 character: '`' 68750 }, { 68751 modifier: 'ctrlShift', 68752 character: '~' 68753 }, { 68754 modifier: 'access', 68755 character: 'p' 68756 }], 68757 next: [{ 68758 modifier: 'ctrl', 68759 character: '`' 68760 }, { 68761 modifier: 'access', 68762 character: 'n' 68763 }] 68764 }; 68765 function useNavigateRegions(shortcuts = defaultShortcuts) { 68766 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 68767 const [isFocusingRegions, setIsFocusingRegions] = (0,external_wp_element_namespaceObject.useState)(false); 68768 function focusRegion(offset) { 68769 var _ref$current$querySel; 68770 const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []); 68771 if (!regions.length) { 68772 return; 68773 } 68774 let nextRegion = regions[0]; 68775 // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want. 68776 const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]'); 68777 const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1; 68778 if (selectedIndex !== -1) { 68779 let nextIndex = selectedIndex + offset; 68780 nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex; 68781 nextIndex = nextIndex === regions.length ? 0 : nextIndex; 68782 nextRegion = regions[nextIndex]; 68783 } 68784 nextRegion.focus(); 68785 setIsFocusingRegions(true); 68786 } 68787 const clickRef = (0,external_wp_compose_namespaceObject.useRefEffect)(element => { 68788 function onClick() { 68789 setIsFocusingRegions(false); 68790 } 68791 element.addEventListener('click', onClick); 68792 return () => { 68793 element.removeEventListener('click', onClick); 68794 }; 68795 }, [setIsFocusingRegions]); 68796 return { 68797 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, clickRef]), 68798 className: isFocusingRegions ? 'is-focusing-regions' : '', 68799 onKeyDown(event) { 68800 if (shortcuts.previous.some(({ 68801 modifier, 68802 character 68803 }) => { 68804 return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character); 68805 })) { 68806 focusRegion(-1); 68807 } else if (shortcuts.next.some(({ 68808 modifier, 68809 character 68810 }) => { 68811 return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character); 68812 })) { 68813 focusRegion(1); 68814 } 68815 } 68816 }; 68817 } 68818 68819 /** 68820 * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) 68821 * adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region"). 68822 * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility, 68823 * these elements must be properly labelled to briefly describe the purpose of the content in the region. 68824 * For more details, see "Landmark Roles" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/) 68825 * and "Landmark Regions" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/). 68826 * 68827 * ```jsx 68828 * import { navigateRegions } from '@wordpress/components'; 68829 * 68830 * const MyComponentWithNavigateRegions = navigateRegions( () => ( 68831 * <div> 68832 * <div role="region" tabIndex="-1" aria-label="Header"> 68833 * Header 68834 * </div> 68835 * <div role="region" tabIndex="-1" aria-label="Content"> 68836 * Content 68837 * </div> 68838 * <div role="region" tabIndex="-1" aria-label="Sidebar"> 68839 * Sidebar 68840 * </div> 68841 * </div> 68842 * ) ); 68843 * ``` 68844 */ 68845 /* harmony default export */ const navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => ({ 68846 shortcuts, 68847 ...props 68848 }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 68849 ...useNavigateRegions(shortcuts), 68850 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { 68851 ...props 68852 }) 68853 }), 'navigateRegions')); 68854 68855 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js 68856 /** 68857 * WordPress dependencies 68858 */ 68859 68860 68861 /** 68862 * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) 68863 * adding the ability to constrain keyboard navigation with the Tab key within a component. 68864 * For accessibility reasons, some UI components need to constrain Tab navigation, for example 68865 * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to 68866 * navigate away from the wrapped component is implemented by other means, usually by pressing 68867 * the Escape key or using a specific UI control, e.g. a "Close" button. 68868 */ 68869 68870 const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) { 68871 const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); 68872 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 68873 ref: ref, 68874 tabIndex: -1, 68875 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { 68876 ...props 68877 }) 68878 }); 68879 }, 'withConstrainedTabbing'); 68880 /* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing); 68881 68882 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js 68883 /** 68884 * External dependencies 68885 */ 68886 68887 68888 /** 68889 * WordPress dependencies 68890 */ 68891 68892 68893 68894 /* harmony default export */ const with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => { 68895 return class extends external_wp_element_namespaceObject.Component { 68896 constructor(props) { 68897 super(props); 68898 this.nodeRef = this.props.node; 68899 this.state = { 68900 fallbackStyles: undefined, 68901 grabStylesCompleted: false 68902 }; 68903 this.bindRef = this.bindRef.bind(this); 68904 } 68905 bindRef(node) { 68906 if (!node) { 68907 return; 68908 } 68909 this.nodeRef = node; 68910 } 68911 componentDidMount() { 68912 this.grabFallbackStyles(); 68913 } 68914 componentDidUpdate() { 68915 this.grabFallbackStyles(); 68916 } 68917 grabFallbackStyles() { 68918 const { 68919 grabStylesCompleted, 68920 fallbackStyles 68921 } = this.state; 68922 if (this.nodeRef && !grabStylesCompleted) { 68923 const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props); 68924 if (!es6_default()(newFallbackStyles, fallbackStyles)) { 68925 this.setState({ 68926 fallbackStyles: newFallbackStyles, 68927 grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean) 68928 }); 68929 } 68930 } 68931 } 68932 render() { 68933 const wrappedComponent = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { 68934 ...this.props, 68935 ...this.state.fallbackStyles 68936 }); 68937 return this.props.node ? wrappedComponent : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { 68938 ref: this.bindRef, 68939 children: [" ", wrappedComponent, " "] 68940 }); 68941 } 68942 }; 68943 }, 'withFallbackStyles')); 68944 68945 ;// external ["wp","hooks"] 68946 const external_wp_hooks_namespaceObject = window["wp"]["hooks"]; 68947 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-filters/index.js 68948 /** 68949 * WordPress dependencies 68950 */ 68951 68952 68953 68954 68955 const ANIMATION_FRAME_PERIOD = 16; 68956 68957 /** 68958 * Creates a higher-order component which adds filtering capability to the 68959 * wrapped component. Filters get applied when the original component is about 68960 * to be mounted. When a filter is added or removed that matches the hook name, 68961 * the wrapped component re-renders. 68962 * 68963 * @param hookName Hook name exposed to be used by filters. 68964 * 68965 * @return Higher-order component factory. 68966 * 68967 * ```jsx 68968 * import { withFilters } from '@wordpress/components'; 68969 * import { addFilter } from '@wordpress/hooks'; 68970 * 68971 * const MyComponent = ( { title } ) => <h1>{ title }</h1>; 68972 * 68973 * const ComponentToAppend = () => <div>Appended component</div>; 68974 * 68975 * function withComponentAppended( FilteredComponent ) { 68976 * return ( props ) => ( 68977 * <> 68978 * <FilteredComponent { ...props } /> 68979 * <ComponentToAppend /> 68980 * </> 68981 * ); 68982 * } 68983 * 68984 * addFilter( 68985 * 'MyHookName', 68986 * 'my-plugin/with-component-appended', 68987 * withComponentAppended 68988 * ); 68989 * 68990 * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent ); 68991 * ``` 68992 */ 68993 function withFilters(hookName) { 68994 return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => { 68995 const namespace = 'core/with-filters/' + hookName; 68996 68997 /** 68998 * The component definition with current filters applied. Each instance 68999 * reuse this shared reference as an optimization to avoid excessive 69000 * calls to `applyFilters` when many instances exist. 69001 */ 69002 let FilteredComponent; 69003 69004 /** 69005 * Initializes the FilteredComponent variable once, if not already 69006 * assigned. Subsequent calls are effectively a noop. 69007 */ 69008 function ensureFilteredComponent() { 69009 if (FilteredComponent === undefined) { 69010 FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent); 69011 } 69012 } 69013 class FilteredComponentRenderer extends external_wp_element_namespaceObject.Component { 69014 constructor(props) { 69015 super(props); 69016 ensureFilteredComponent(); 69017 } 69018 componentDidMount() { 69019 FilteredComponentRenderer.instances.push(this); 69020 69021 // If there were previously no mounted instances for components 69022 // filtered on this hook, add the hook handler. 69023 if (FilteredComponentRenderer.instances.length === 1) { 69024 (0,external_wp_hooks_namespaceObject.addAction)('hookRemoved', namespace, onHooksUpdated); 69025 (0,external_wp_hooks_namespaceObject.addAction)('hookAdded', namespace, onHooksUpdated); 69026 } 69027 } 69028 componentWillUnmount() { 69029 FilteredComponentRenderer.instances = FilteredComponentRenderer.instances.filter(instance => instance !== this); 69030 69031 // If this was the last of the mounted components filtered on 69032 // this hook, remove the hook handler. 69033 if (FilteredComponentRenderer.instances.length === 0) { 69034 (0,external_wp_hooks_namespaceObject.removeAction)('hookRemoved', namespace); 69035 (0,external_wp_hooks_namespaceObject.removeAction)('hookAdded', namespace); 69036 } 69037 } 69038 render() { 69039 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FilteredComponent, { 69040 ...this.props 69041 }); 69042 } 69043 } 69044 FilteredComponentRenderer.instances = []; 69045 69046 /** 69047 * Updates the FilteredComponent definition, forcing a render for each 69048 * mounted instance. This occurs a maximum of once per animation frame. 69049 */ 69050 const throttledForceUpdate = (0,external_wp_compose_namespaceObject.debounce)(() => { 69051 // Recreate the filtered component, only after delay so that it's 69052 // computed once, even if many filters added. 69053 FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent); 69054 69055 // Force each instance to render. 69056 FilteredComponentRenderer.instances.forEach(instance => { 69057 instance.forceUpdate(); 69058 }); 69059 }, ANIMATION_FRAME_PERIOD); 69060 69061 /** 69062 * When a filter is added or removed for the matching hook name, each 69063 * mounted instance should re-render with the new filters having been 69064 * applied to the original component. 69065 * 69066 * @param updatedHookName Name of the hook that was updated. 69067 */ 69068 function onHooksUpdated(updatedHookName) { 69069 if (updatedHookName === hookName) { 69070 throttledForceUpdate(); 69071 } 69072 } 69073 return FilteredComponentRenderer; 69074 }, 'withFilters'); 69075 } 69076 69077 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-focus-return/index.js 69078 /** 69079 * WordPress dependencies 69080 */ 69081 69082 69083 69084 69085 /** 69086 * Returns true if the given object is component-like. An object is component- 69087 * like if it is an instance of wp.element.Component, or is a function. 69088 * 69089 * @param object Object to test. 69090 * 69091 * @return Whether object is component-like. 69092 */ 69093 69094 function isComponentLike(object) { 69095 return object instanceof external_wp_element_namespaceObject.Component || typeof object === 'function'; 69096 } 69097 /** 69098 * Higher Order Component used to be used to wrap disposable elements like 69099 * sidebars, modals, dropdowns. When mounting the wrapped component, we track a 69100 * reference to the current active element so we know where to restore focus 69101 * when the component is unmounted. 69102 * 69103 * @param options The component to be enhanced with 69104 * focus return behavior, or an object 69105 * describing the component and the 69106 * focus return characteristics. 69107 * 69108 * @return Higher Order Component with the focus restoration behaviour. 69109 */ 69110 /* harmony default export */ const with_focus_return = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)( 69111 // @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types 69112 options => { 69113 const HoC = ({ 69114 onFocusReturn 69115 } = {}) => WrappedComponent => { 69116 const WithFocusReturn = props => { 69117 const ref = (0,external_wp_compose_namespaceObject.useFocusReturn)(onFocusReturn); 69118 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 69119 ref: ref, 69120 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { 69121 ...props 69122 }) 69123 }); 69124 }; 69125 return WithFocusReturn; 69126 }; 69127 if (isComponentLike(options)) { 69128 const WrappedComponent = options; 69129 return HoC()(WrappedComponent); 69130 } 69131 return HoC(options); 69132 }, 'withFocusReturn')); 69133 const with_focus_return_Provider = ({ 69134 children 69135 }) => { 69136 external_wp_deprecated_default()('wp.components.FocusReturnProvider component', { 69137 since: '5.7', 69138 hint: 'This provider is not used anymore. You can just remove it from your codebase' 69139 }); 69140 return children; 69141 }; 69142 69143 ;// ./node_modules/@wordpress/components/build-module/higher-order/with-notices/index.js 69144 /** 69145 * External dependencies 69146 */ 69147 69148 69149 /** 69150 * WordPress dependencies 69151 */ 69152 69153 69154 69155 /** 69156 * Internal dependencies 69157 */ 69158 69159 69160 /** 69161 * Override the default edit UI to include notices if supported. 69162 * 69163 * Wrapping the original component with `withNotices` encapsulates the component 69164 * with the additional props `noticeOperations` and `noticeUI`. 69165 * 69166 * ```jsx 69167 * import { withNotices, Button } from '@wordpress/components'; 69168 * 69169 * const MyComponentWithNotices = withNotices( 69170 * ( { noticeOperations, noticeUI } ) => { 69171 * const addError = () => 69172 * noticeOperations.createErrorNotice( 'Error message' ); 69173 * return ( 69174 * <div> 69175 * { noticeUI } 69176 * <Button variant="secondary" onClick={ addError }> 69177 * Add error 69178 * </Button> 69179 * </div> 69180 * ); 69181 * } 69182 * ); 69183 * ``` 69184 * 69185 * @param OriginalComponent Original component. 69186 * 69187 * @return Wrapped component. 69188 */ 69189 /* harmony default export */ const with_notices = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => { 69190 function Component(props, ref) { 69191 const [noticeList, setNoticeList] = (0,external_wp_element_namespaceObject.useState)([]); 69192 const noticeOperations = (0,external_wp_element_namespaceObject.useMemo)(() => { 69193 const createNotice = notice => { 69194 const noticeToAdd = notice.id ? notice : { 69195 ...notice, 69196 id: esm_browser_v4() 69197 }; 69198 setNoticeList(current => [...current, noticeToAdd]); 69199 }; 69200 return { 69201 createNotice, 69202 createErrorNotice: msg => { 69203 // @ts-expect-error TODO: Missing `id`, potentially a bug 69204 createNotice({ 69205 status: 'error', 69206 content: msg 69207 }); 69208 }, 69209 removeNotice: id => { 69210 setNoticeList(current => current.filter(notice => notice.id !== id)); 69211 }, 69212 removeAllNotices: () => { 69213 setNoticeList([]); 69214 } 69215 }; 69216 }, []); 69217 const propsOut = { 69218 ...props, 69219 noticeList, 69220 noticeOperations, 69221 noticeUI: noticeList.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(list, { 69222 className: "components-with-notices-ui", 69223 notices: noticeList, 69224 onRemove: noticeOperations.removeNotice 69225 }) 69226 }; 69227 return isForwardRef ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalComponent, { 69228 ...propsOut, 69229 ref: ref 69230 }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalComponent, { 69231 ...propsOut 69232 }); 69233 } 69234 let isForwardRef; 69235 // @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef(). 69236 const { 69237 render 69238 } = OriginalComponent; 69239 // Returns a forwardRef if OriginalComponent appears to be a forwardRef. 69240 if (typeof render === 'function') { 69241 isForwardRef = true; 69242 return (0,external_wp_element_namespaceObject.forwardRef)(Component); 69243 } 69244 return Component; 69245 }, 'withNotices')); 69246 69247 ;// ./node_modules/@ariakit/react-core/esm/__chunks/B2J376ND.js 69248 "use client"; 69249 69250 69251 69252 69253 69254 // src/menu/menu-context.tsx 69255 69256 var B2J376ND_menu = createStoreContext( 69257 [CompositeContextProvider, HovercardContextProvider], 69258 [CompositeScopedContextProvider, HovercardScopedContextProvider] 69259 ); 69260 var useMenuContext = B2J376ND_menu.useContext; 69261 var useMenuScopedContext = B2J376ND_menu.useScopedContext; 69262 var useMenuProviderContext = B2J376ND_menu.useProviderContext; 69263 var MenuContextProvider = B2J376ND_menu.ContextProvider; 69264 var MenuScopedContextProvider = B2J376ND_menu.ScopedContextProvider; 69265 var useMenuBarContext = (/* unused pure expression or super */ null && (useMenubarContext)); 69266 var useMenuBarScopedContext = (/* unused pure expression or super */ null && (useMenubarScopedContext)); 69267 var useMenuBarProviderContext = (/* unused pure expression or super */ null && (useMenubarProviderContext)); 69268 var MenuBarContextProvider = (/* unused pure expression or super */ null && (MenubarContextProvider)); 69269 var MenuBarScopedContextProvider = (/* unused pure expression or super */ null && (MenubarScopedContextProvider)); 69270 var MenuItemCheckedContext = (0,external_React_.createContext)( 69271 void 0 69272 ); 69273 69274 69275 69276 ;// ./node_modules/@ariakit/react-core/esm/__chunks/62UHHO2X.js 69277 "use client"; 69278 69279 69280 69281 // src/menubar/menubar-context.tsx 69282 69283 var menubar = createStoreContext( 69284 [CompositeContextProvider], 69285 [CompositeScopedContextProvider] 69286 ); 69287 var _62UHHO2X_useMenubarContext = menubar.useContext; 69288 var _62UHHO2X_useMenubarScopedContext = menubar.useScopedContext; 69289 var _62UHHO2X_useMenubarProviderContext = menubar.useProviderContext; 69290 var _62UHHO2X_MenubarContextProvider = menubar.ContextProvider; 69291 var _62UHHO2X_MenubarScopedContextProvider = menubar.ScopedContextProvider; 69292 var _62UHHO2X_MenuItemCheckedContext = (0,external_React_.createContext)( 69293 void 0 69294 ); 69295 69296 69297 69298 ;// ./node_modules/@ariakit/core/esm/menu/menu-store.js 69299 "use client"; 69300 69301 69302 69303 69304 69305 69306 69307 69308 69309 69310 69311 69312 // src/menu/menu-store.ts 69313 function createMenuStore(_a = {}) { 69314 var _b = _a, { 69315 combobox, 69316 parent, 69317 menubar 69318 } = _b, props = _3YLGPPWQ_objRest(_b, [ 69319 "combobox", 69320 "parent", 69321 "menubar" 69322 ]); 69323 const parentIsMenubar = !!menubar && !parent; 69324 const store = mergeStore( 69325 props.store, 69326 pick2(parent, ["values"]), 69327 omit2(combobox, [ 69328 "arrowElement", 69329 "anchorElement", 69330 "contentElement", 69331 "popoverElement", 69332 "disclosureElement" 69333 ]) 69334 ); 69335 throwOnConflictingProps(props, store); 69336 const syncState = store.getState(); 69337 const composite = createCompositeStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 69338 store, 69339 orientation: defaultValue( 69340 props.orientation, 69341 syncState.orientation, 69342 "vertical" 69343 ) 69344 })); 69345 const hovercard = createHovercardStore(_chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, props), { 69346 store, 69347 placement: defaultValue( 69348 props.placement, 69349 syncState.placement, 69350 "bottom-start" 69351 ), 69352 timeout: defaultValue( 69353 props.timeout, 69354 syncState.timeout, 69355 parentIsMenubar ? 0 : 150 69356 ), 69357 hideTimeout: defaultValue(props.hideTimeout, syncState.hideTimeout, 0) 69358 })); 69359 const initialState = _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite.getState()), hovercard.getState()), { 69360 initialFocus: defaultValue(syncState.initialFocus, "container"), 69361 values: defaultValue( 69362 props.values, 69363 syncState.values, 69364 props.defaultValues, 69365 {} 69366 ) 69367 }); 69368 const menu = createStore(initialState, composite, hovercard, store); 69369 setup( 69370 menu, 69371 () => sync(menu, ["mounted"], (state) => { 69372 if (state.mounted) return; 69373 menu.setState("activeId", null); 69374 }) 69375 ); 69376 setup( 69377 menu, 69378 () => sync(parent, ["orientation"], (state) => { 69379 menu.setState( 69380 "placement", 69381 state.orientation === "vertical" ? "right-start" : "bottom-start" 69382 ); 69383 }) 69384 ); 69385 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues(_chunks_3YLGPPWQ_spreadValues({}, composite), hovercard), menu), { 69386 combobox, 69387 parent, 69388 menubar, 69389 hideAll: () => { 69390 hovercard.hide(); 69391 parent == null ? void 0 : parent.hideAll(); 69392 }, 69393 setInitialFocus: (value) => menu.setState("initialFocus", value), 69394 setValues: (values) => menu.setState("values", values), 69395 setValue: (name, value) => { 69396 if (name === "__proto__") return; 69397 if (name === "constructor") return; 69398 if (Array.isArray(name)) return; 69399 menu.setState("values", (values) => { 69400 const prevValue = values[name]; 69401 const nextValue = applyState(value, prevValue); 69402 if (nextValue === prevValue) return values; 69403 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, values), { 69404 [name]: nextValue !== void 0 && nextValue 69405 }); 69406 }); 69407 } 69408 }); 69409 } 69410 69411 69412 ;// ./node_modules/@ariakit/react-core/esm/__chunks/MRTXKBQF.js 69413 "use client"; 69414 69415 69416 69417 69418 69419 69420 69421 69422 69423 // src/menu/menu-store.ts 69424 69425 function useMenuStoreProps(store, update, props) { 69426 useUpdateEffect(update, [props.combobox, props.parent, props.menubar]); 69427 useStoreProps(store, props, "values", "setValues"); 69428 return Object.assign( 69429 useHovercardStoreProps( 69430 useCompositeStoreProps(store, update, props), 69431 update, 69432 props 69433 ), 69434 { 69435 combobox: props.combobox, 69436 parent: props.parent, 69437 menubar: props.menubar 69438 } 69439 ); 69440 } 69441 function useMenuStore(props = {}) { 69442 const parent = useMenuContext(); 69443 const menubar = _62UHHO2X_useMenubarContext(); 69444 const combobox = useComboboxProviderContext(); 69445 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 69446 parent: props.parent !== void 0 ? props.parent : parent, 69447 menubar: props.menubar !== void 0 ? props.menubar : menubar, 69448 combobox: props.combobox !== void 0 ? props.combobox : combobox 69449 }); 69450 const [store, update] = YV4JVR4I_useStore(createMenuStore, props); 69451 return useMenuStoreProps(store, update, props); 69452 } 69453 69454 69455 69456 ;// ./node_modules/@wordpress/components/build-module/menu/context.js 69457 /** 69458 * WordPress dependencies 69459 */ 69460 69461 69462 /** 69463 * Internal dependencies 69464 */ 69465 69466 const context_Context = (0,external_wp_element_namespaceObject.createContext)(undefined); 69467 69468 ;// ./node_modules/@ariakit/react-core/esm/__chunks/MVIULMNR.js 69469 "use client"; 69470 69471 69472 69473 69474 69475 69476 69477 69478 69479 // src/menu/menu-item.tsx 69480 69481 69482 69483 69484 var MVIULMNR_TagName = "div"; 69485 function menuHasFocus(baseElement, items, currentTarget) { 69486 var _a; 69487 if (!baseElement) return false; 69488 if (hasFocusWithin(baseElement)) return true; 69489 const expandedItem = items == null ? void 0 : items.find((item) => { 69490 var _a2; 69491 if (item.element === currentTarget) return false; 69492 return ((_a2 = item.element) == null ? void 0 : _a2.getAttribute("aria-expanded")) === "true"; 69493 }); 69494 const expandedMenuId = (_a = expandedItem == null ? void 0 : expandedItem.element) == null ? void 0 : _a.getAttribute("aria-controls"); 69495 if (!expandedMenuId) return false; 69496 const doc = getDocument(baseElement); 69497 const expandedMenu = doc.getElementById(expandedMenuId); 69498 if (!expandedMenu) return false; 69499 if (hasFocusWithin(expandedMenu)) return true; 69500 return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]"); 69501 } 69502 var useMenuItem = createHook( 69503 function useMenuItem2(_a) { 69504 var _b = _a, { 69505 store, 69506 hideOnClick = true, 69507 preventScrollOnKeyDown = true, 69508 focusOnHover, 69509 blurOnHoverEnd 69510 } = _b, props = __objRest(_b, [ 69511 "store", 69512 "hideOnClick", 69513 "preventScrollOnKeyDown", 69514 "focusOnHover", 69515 "blurOnHoverEnd" 69516 ]); 69517 const menuContext = useMenuScopedContext(true); 69518 const menubarContext = _62UHHO2X_useMenubarScopedContext(); 69519 store = store || menuContext || menubarContext; 69520 invariant( 69521 store, 69522 false && 0 69523 ); 69524 const onClickProp = props.onClick; 69525 const hideOnClickProp = useBooleanEvent(hideOnClick); 69526 const hideMenu = "hideAll" in store ? store.hideAll : void 0; 69527 const isWithinMenu = !!hideMenu; 69528 const onClick = useEvent((event) => { 69529 onClickProp == null ? void 0 : onClickProp(event); 69530 if (event.defaultPrevented) return; 69531 if (isDownloading(event)) return; 69532 if (isOpeningInNewTab(event)) return; 69533 if (!hideMenu) return; 69534 const popupType = event.currentTarget.getAttribute("aria-haspopup"); 69535 if (popupType === "menu") return; 69536 if (!hideOnClickProp(event)) return; 69537 hideMenu(); 69538 }); 69539 const contentElement = useStoreState( 69540 store, 69541 (state) => "contentElement" in state ? state.contentElement : null 69542 ); 69543 const role = getPopupItemRole(contentElement, "menuitem"); 69544 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 69545 role 69546 }, props), { 69547 onClick 69548 }); 69549 props = useCompositeItem(_3YLGPPWQ_spreadValues({ 69550 store, 69551 preventScrollOnKeyDown 69552 }, props)); 69553 props = useCompositeHover(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 69554 store 69555 }, props), { 69556 focusOnHover(event) { 69557 const getFocusOnHover = () => { 69558 if (typeof focusOnHover === "function") return focusOnHover(event); 69559 if (focusOnHover != null) return focusOnHover; 69560 return true; 69561 }; 69562 if (!store) return false; 69563 if (!getFocusOnHover()) return false; 69564 const { baseElement, items } = store.getState(); 69565 if (isWithinMenu) { 69566 if (event.currentTarget.hasAttribute("aria-expanded")) { 69567 event.currentTarget.focus(); 69568 } 69569 return true; 69570 } 69571 if (menuHasFocus(baseElement, items, event.currentTarget)) { 69572 event.currentTarget.focus(); 69573 return true; 69574 } 69575 return false; 69576 }, 69577 blurOnHoverEnd(event) { 69578 if (typeof blurOnHoverEnd === "function") return blurOnHoverEnd(event); 69579 if (blurOnHoverEnd != null) return blurOnHoverEnd; 69580 return isWithinMenu; 69581 } 69582 })); 69583 return props; 69584 } 69585 ); 69586 var MVIULMNR_MenuItem = memo2( 69587 forwardRef2(function MenuItem2(props) { 69588 const htmlProps = useMenuItem(props); 69589 return LMDWO4NN_createElement(MVIULMNR_TagName, htmlProps); 69590 }) 69591 ); 69592 69593 69594 69595 ;// ./node_modules/@ariakit/react-core/esm/__chunks/RNCDFVMF.js 69596 "use client"; 69597 69598 69599 // src/checkbox/checkbox-context.tsx 69600 var RNCDFVMF_ctx = createStoreContext(); 69601 var useCheckboxContext = RNCDFVMF_ctx.useContext; 69602 var useCheckboxScopedContext = RNCDFVMF_ctx.useScopedContext; 69603 var useCheckboxProviderContext = RNCDFVMF_ctx.useProviderContext; 69604 var CheckboxContextProvider = RNCDFVMF_ctx.ContextProvider; 69605 var CheckboxScopedContextProvider = RNCDFVMF_ctx.ScopedContextProvider; 69606 69607 69608 69609 ;// ./node_modules/@ariakit/react-core/esm/__chunks/ASMQKSDT.js 69610 "use client"; 69611 69612 69613 69614 69615 69616 69617 69618 69619 // src/checkbox/checkbox.tsx 69620 69621 69622 69623 var ASMQKSDT_TagName = "input"; 69624 function setMixed(element, mixed) { 69625 if (mixed) { 69626 element.indeterminate = true; 69627 } else if (element.indeterminate) { 69628 element.indeterminate = false; 69629 } 69630 } 69631 function isNativeCheckbox(tagName, type) { 69632 return tagName === "input" && (!type || type === "checkbox"); 69633 } 69634 function getPrimitiveValue(value) { 69635 if (Array.isArray(value)) { 69636 return value.toString(); 69637 } 69638 return value; 69639 } 69640 var useCheckbox = createHook( 69641 function useCheckbox2(_a) { 69642 var _b = _a, { 69643 store, 69644 name, 69645 value: valueProp, 69646 checked: checkedProp, 69647 defaultChecked 69648 } = _b, props = __objRest(_b, [ 69649 "store", 69650 "name", 69651 "value", 69652 "checked", 69653 "defaultChecked" 69654 ]); 69655 const context = useCheckboxContext(); 69656 store = store || context; 69657 const [_checked, setChecked] = (0,external_React_.useState)(defaultChecked != null ? defaultChecked : false); 69658 const checked = useStoreState(store, (state) => { 69659 if (checkedProp !== void 0) return checkedProp; 69660 if ((state == null ? void 0 : state.value) === void 0) return _checked; 69661 if (valueProp != null) { 69662 if (Array.isArray(state.value)) { 69663 const primitiveValue = getPrimitiveValue(valueProp); 69664 return state.value.includes(primitiveValue); 69665 } 69666 return state.value === valueProp; 69667 } 69668 if (Array.isArray(state.value)) return false; 69669 if (typeof state.value === "boolean") return state.value; 69670 return false; 69671 }); 69672 const ref = (0,external_React_.useRef)(null); 69673 const tagName = useTagName(ref, ASMQKSDT_TagName); 69674 const nativeCheckbox = isNativeCheckbox(tagName, props.type); 69675 const mixed = checked ? checked === "mixed" : void 0; 69676 const isChecked = checked === "mixed" ? false : checked; 69677 const disabled = disabledFromProps(props); 69678 const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate(); 69679 (0,external_React_.useEffect)(() => { 69680 const element = ref.current; 69681 if (!element) return; 69682 setMixed(element, mixed); 69683 if (nativeCheckbox) return; 69684 element.checked = isChecked; 69685 if (name !== void 0) { 69686 element.name = name; 69687 } 69688 if (valueProp !== void 0) { 69689 element.value = `$valueProp}`; 69690 } 69691 }, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]); 69692 const onChangeProp = props.onChange; 69693 const onChange = useEvent((event) => { 69694 if (disabled) { 69695 event.stopPropagation(); 69696 event.preventDefault(); 69697 return; 69698 } 69699 setMixed(event.currentTarget, mixed); 69700 if (!nativeCheckbox) { 69701 event.currentTarget.checked = !event.currentTarget.checked; 69702 schedulePropertyUpdate(); 69703 } 69704 onChangeProp == null ? void 0 : onChangeProp(event); 69705 if (event.defaultPrevented) return; 69706 const elementChecked = event.currentTarget.checked; 69707 setChecked(elementChecked); 69708 store == null ? void 0 : store.setValue((prevValue) => { 69709 if (valueProp == null) return elementChecked; 69710 const primitiveValue = getPrimitiveValue(valueProp); 69711 if (!Array.isArray(prevValue)) { 69712 return prevValue === primitiveValue ? false : primitiveValue; 69713 } 69714 if (elementChecked) { 69715 if (prevValue.includes(primitiveValue)) { 69716 return prevValue; 69717 } 69718 return [...prevValue, primitiveValue]; 69719 } 69720 return prevValue.filter((v) => v !== primitiveValue); 69721 }); 69722 }); 69723 const onClickProp = props.onClick; 69724 const onClick = useEvent((event) => { 69725 onClickProp == null ? void 0 : onClickProp(event); 69726 if (event.defaultPrevented) return; 69727 if (nativeCheckbox) return; 69728 onChange(event); 69729 }); 69730 props = useWrapElement( 69731 props, 69732 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CheckboxCheckedContext.Provider, { value: isChecked, children: element }), 69733 [isChecked] 69734 ); 69735 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 69736 role: !nativeCheckbox ? "checkbox" : void 0, 69737 type: nativeCheckbox ? "checkbox" : void 0, 69738 "aria-checked": checked 69739 }, props), { 69740 ref: useMergeRefs(ref, props.ref), 69741 onChange, 69742 onClick 69743 }); 69744 props = useCommand(_3YLGPPWQ_spreadValues({ clickOnEnter: !nativeCheckbox }, props)); 69745 return removeUndefinedValues(_3YLGPPWQ_spreadValues({ 69746 name: nativeCheckbox ? name : void 0, 69747 value: nativeCheckbox ? valueProp : void 0, 69748 checked: isChecked 69749 }, props)); 69750 } 69751 ); 69752 var Checkbox = forwardRef2(function Checkbox2(props) { 69753 const htmlProps = useCheckbox(props); 69754 return LMDWO4NN_createElement(ASMQKSDT_TagName, htmlProps); 69755 }); 69756 69757 69758 69759 ;// ./node_modules/@ariakit/core/esm/checkbox/checkbox-store.js 69760 "use client"; 69761 69762 69763 69764 69765 // src/checkbox/checkbox-store.ts 69766 function createCheckboxStore(props = {}) { 69767 var _a; 69768 throwOnConflictingProps(props, props.store); 69769 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 69770 const initialState = { 69771 value: defaultValue( 69772 props.value, 69773 syncState == null ? void 0 : syncState.value, 69774 props.defaultValue, 69775 false 69776 ) 69777 }; 69778 const checkbox = createStore(initialState, props.store); 69779 return _chunks_3YLGPPWQ_spreadProps(_chunks_3YLGPPWQ_spreadValues({}, checkbox), { 69780 setValue: (value) => checkbox.setState("value", value) 69781 }); 69782 } 69783 69784 69785 ;// ./node_modules/@ariakit/react-core/esm/__chunks/HAVBGUA3.js 69786 "use client"; 69787 69788 69789 69790 // src/checkbox/checkbox-store.ts 69791 69792 function useCheckboxStoreProps(store, update, props) { 69793 useUpdateEffect(update, [props.store]); 69794 useStoreProps(store, props, "value", "setValue"); 69795 return store; 69796 } 69797 function useCheckboxStore(props = {}) { 69798 const [store, update] = YV4JVR4I_useStore(createCheckboxStore, props); 69799 return useCheckboxStoreProps(store, update, props); 69800 } 69801 69802 69803 69804 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-item-checkbox.js 69805 "use client"; 69806 69807 69808 69809 69810 69811 69812 69813 69814 69815 69816 69817 69818 69819 69820 69821 69822 69823 69824 69825 69826 69827 69828 69829 69830 69831 69832 // src/menu/menu-item-checkbox.tsx 69833 69834 69835 var menu_item_checkbox_TagName = "div"; 69836 function menu_item_checkbox_getPrimitiveValue(value) { 69837 if (Array.isArray(value)) { 69838 return value.toString(); 69839 } 69840 return value; 69841 } 69842 function getValue(storeValue, value, checked) { 69843 if (value === void 0) { 69844 if (Array.isArray(storeValue)) return storeValue; 69845 return !!checked; 69846 } 69847 const primitiveValue = menu_item_checkbox_getPrimitiveValue(value); 69848 if (!Array.isArray(storeValue)) { 69849 if (checked) { 69850 return primitiveValue; 69851 } 69852 return storeValue === primitiveValue ? false : storeValue; 69853 } 69854 if (checked) { 69855 if (storeValue.includes(primitiveValue)) { 69856 return storeValue; 69857 } 69858 return [...storeValue, primitiveValue]; 69859 } 69860 return storeValue.filter((v) => v !== primitiveValue); 69861 } 69862 var useMenuItemCheckbox = createHook( 69863 function useMenuItemCheckbox2(_a) { 69864 var _b = _a, { 69865 store, 69866 name, 69867 value, 69868 checked, 69869 defaultChecked: defaultCheckedProp, 69870 hideOnClick = false 69871 } = _b, props = __objRest(_b, [ 69872 "store", 69873 "name", 69874 "value", 69875 "checked", 69876 "defaultChecked", 69877 "hideOnClick" 69878 ]); 69879 const context = useMenuScopedContext(); 69880 store = store || context; 69881 invariant( 69882 store, 69883 false && 0 69884 ); 69885 const defaultChecked = useInitialValue(defaultCheckedProp); 69886 (0,external_React_.useEffect)(() => { 69887 store == null ? void 0 : store.setValue(name, (prevValue = []) => { 69888 if (!defaultChecked) return prevValue; 69889 return getValue(prevValue, value, true); 69890 }); 69891 }, [store, name, value, defaultChecked]); 69892 (0,external_React_.useEffect)(() => { 69893 if (checked === void 0) return; 69894 store == null ? void 0 : store.setValue(name, (prevValue) => { 69895 return getValue(prevValue, value, checked); 69896 }); 69897 }, [store, name, value, checked]); 69898 const checkboxStore = useCheckboxStore({ 69899 value: store.useState((state) => state.values[name]), 69900 setValue(internalValue) { 69901 store == null ? void 0 : store.setValue(name, () => { 69902 if (checked === void 0) return internalValue; 69903 const nextValue = getValue(internalValue, value, checked); 69904 if (!Array.isArray(nextValue)) return nextValue; 69905 if (!Array.isArray(internalValue)) return nextValue; 69906 if (shallowEqual(internalValue, nextValue)) return internalValue; 69907 return nextValue; 69908 }); 69909 } 69910 }); 69911 props = _3YLGPPWQ_spreadValues({ 69912 role: "menuitemcheckbox" 69913 }, props); 69914 props = useCheckbox(_3YLGPPWQ_spreadValues({ 69915 store: checkboxStore, 69916 name, 69917 value, 69918 checked 69919 }, props)); 69920 props = useMenuItem(_3YLGPPWQ_spreadValues({ store, hideOnClick }, props)); 69921 return props; 69922 } 69923 ); 69924 var MenuItemCheckbox = memo2( 69925 forwardRef2(function MenuItemCheckbox2(props) { 69926 const htmlProps = useMenuItemCheckbox(props); 69927 return LMDWO4NN_createElement(menu_item_checkbox_TagName, htmlProps); 69928 }) 69929 ); 69930 69931 69932 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-item-radio.js 69933 "use client"; 69934 69935 69936 69937 69938 69939 69940 69941 69942 69943 69944 69945 69946 69947 69948 69949 69950 69951 69952 69953 69954 69955 69956 69957 69958 // src/menu/menu-item-radio.tsx 69959 69960 69961 69962 var menu_item_radio_TagName = "div"; 69963 function menu_item_radio_getValue(prevValue, value, checked) { 69964 if (checked === void 0) return prevValue; 69965 if (checked) return value; 69966 return prevValue; 69967 } 69968 var useMenuItemRadio = createHook( 69969 function useMenuItemRadio2(_a) { 69970 var _b = _a, { 69971 store, 69972 name, 69973 value, 69974 checked, 69975 onChange: onChangeProp, 69976 hideOnClick = false 69977 } = _b, props = __objRest(_b, [ 69978 "store", 69979 "name", 69980 "value", 69981 "checked", 69982 "onChange", 69983 "hideOnClick" 69984 ]); 69985 const context = useMenuScopedContext(); 69986 store = store || context; 69987 invariant( 69988 store, 69989 false && 0 69990 ); 69991 const defaultChecked = useInitialValue(props.defaultChecked); 69992 (0,external_React_.useEffect)(() => { 69993 store == null ? void 0 : store.setValue(name, (prevValue = false) => { 69994 return menu_item_radio_getValue(prevValue, value, defaultChecked); 69995 }); 69996 }, [store, name, value, defaultChecked]); 69997 (0,external_React_.useEffect)(() => { 69998 if (checked === void 0) return; 69999 store == null ? void 0 : store.setValue(name, (prevValue) => { 70000 return menu_item_radio_getValue(prevValue, value, checked); 70001 }); 70002 }, [store, name, value, checked]); 70003 const isChecked = store.useState((state) => state.values[name] === value); 70004 props = useWrapElement( 70005 props, 70006 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheckedContext.Provider, { value: !!isChecked, children: element }), 70007 [isChecked] 70008 ); 70009 props = _3YLGPPWQ_spreadValues({ 70010 role: "menuitemradio" 70011 }, props); 70012 props = useRadio(_3YLGPPWQ_spreadValues({ 70013 name, 70014 value, 70015 checked: isChecked, 70016 onChange(event) { 70017 onChangeProp == null ? void 0 : onChangeProp(event); 70018 if (event.defaultPrevented) return; 70019 const element = event.currentTarget; 70020 store == null ? void 0 : store.setValue(name, (prevValue) => { 70021 return menu_item_radio_getValue(prevValue, value, checked != null ? checked : element.checked); 70022 }); 70023 } 70024 }, props)); 70025 props = useMenuItem(_3YLGPPWQ_spreadValues({ store, hideOnClick }, props)); 70026 return props; 70027 } 70028 ); 70029 var MenuItemRadio = memo2( 70030 forwardRef2(function MenuItemRadio2(props) { 70031 const htmlProps = useMenuItemRadio(props); 70032 return LMDWO4NN_createElement(menu_item_radio_TagName, htmlProps); 70033 }) 70034 ); 70035 70036 70037 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-group.js 70038 "use client"; 70039 70040 70041 70042 70043 70044 70045 70046 70047 // src/menu/menu-group.tsx 70048 var menu_group_TagName = "div"; 70049 var useMenuGroup = createHook( 70050 function useMenuGroup2(props) { 70051 props = useCompositeGroup(props); 70052 return props; 70053 } 70054 ); 70055 var menu_group_MenuGroup = forwardRef2(function MenuGroup2(props) { 70056 const htmlProps = useMenuGroup(props); 70057 return LMDWO4NN_createElement(menu_group_TagName, htmlProps); 70058 }); 70059 70060 70061 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-group-label.js 70062 "use client"; 70063 70064 70065 70066 70067 70068 70069 70070 70071 // src/menu/menu-group-label.tsx 70072 var menu_group_label_TagName = "div"; 70073 var useMenuGroupLabel = createHook( 70074 function useMenuGroupLabel2(props) { 70075 props = useCompositeGroupLabel(props); 70076 return props; 70077 } 70078 ); 70079 var MenuGroupLabel = forwardRef2(function MenuGroupLabel2(props) { 70080 const htmlProps = useMenuGroupLabel(props); 70081 return LMDWO4NN_createElement(menu_group_label_TagName, htmlProps); 70082 }); 70083 70084 70085 ;// ./node_modules/@ariakit/react-core/esm/__chunks/TP7N7UIH.js 70086 "use client"; 70087 70088 70089 70090 70091 70092 // src/composite/composite-separator.tsx 70093 70094 var TP7N7UIH_TagName = "hr"; 70095 var useCompositeSeparator = createHook(function useCompositeSeparator2(_a) { 70096 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 70097 const context = useCompositeContext(); 70098 store = store || context; 70099 invariant( 70100 store, 70101 false && 0 70102 ); 70103 const orientation = store.useState( 70104 (state) => state.orientation === "horizontal" ? "vertical" : "horizontal" 70105 ); 70106 props = useSeparator(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { orientation })); 70107 return props; 70108 }); 70109 var CompositeSeparator = forwardRef2(function CompositeSeparator2(props) { 70110 const htmlProps = useCompositeSeparator(props); 70111 return LMDWO4NN_createElement(TP7N7UIH_TagName, htmlProps); 70112 }); 70113 70114 70115 70116 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-separator.js 70117 "use client"; 70118 70119 70120 70121 70122 70123 70124 70125 70126 70127 70128 70129 70130 70131 70132 70133 // src/menu/menu-separator.tsx 70134 var menu_separator_TagName = "hr"; 70135 var useMenuSeparator = createHook( 70136 function useMenuSeparator2(_a) { 70137 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 70138 const context = useMenuContext(); 70139 store = store || context; 70140 props = useCompositeSeparator(_3YLGPPWQ_spreadValues({ store }, props)); 70141 return props; 70142 } 70143 ); 70144 var MenuSeparator = forwardRef2(function MenuSeparator2(props) { 70145 const htmlProps = useMenuSeparator(props); 70146 return LMDWO4NN_createElement(menu_separator_TagName, htmlProps); 70147 }); 70148 70149 70150 ;// ./node_modules/@wordpress/components/build-module/menu/styles.js 70151 70152 function menu_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 70153 /** 70154 * External dependencies 70155 */ 70156 70157 70158 /** 70159 * Internal dependencies 70160 */ 70161 70162 70163 70164 70165 const styles_ANIMATION_PARAMS = { 70166 SCALE_AMOUNT_OUTER: 0.82, 70167 SCALE_AMOUNT_CONTENT: 0.9, 70168 DURATION: { 70169 IN: '400ms', 70170 OUT: '200ms' 70171 }, 70172 EASING: 'cubic-bezier(0.33, 0, 0, 1)' 70173 }; 70174 const CONTENT_WRAPPER_PADDING = space(1); 70175 const ITEM_PADDING_BLOCK = space(2); 70176 const ITEM_PADDING_INLINE = space(3); 70177 70178 // TODO: 70179 // - border color and divider color are different from COLORS.theme variables 70180 // - lighter text color is not defined in COLORS.theme, should it be? 70181 // - lighter background color is not defined in COLORS.theme, should it be? 70182 const DEFAULT_BORDER_COLOR = COLORS.theme.gray[300]; 70183 const DIVIDER_COLOR = COLORS.theme.gray[200]; 70184 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[700]; 70185 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[100]; 70186 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground; 70187 const DEFAULT_BOX_SHADOW = `0 0 0 $config_values.borderWidth} $DEFAULT_BORDER_COLOR}, $config_values.elevationMedium}`; 70188 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 $config_values.borderWidth} $TOOLBAR_VARIANT_BORDER_COLOR}`; 70189 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr'; 70190 const PopoverOuterWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 70191 target: "e1wg7tti14" 70192 } : 0)("position:relative;background-color:", COLORS.ui.background, ";border-radius:", config_values.radiusMedium, ";", props => /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", props.variant === 'toolbar' ? TOOLBAR_VARIANT_BOX_SHADOW : DEFAULT_BOX_SHADOW, ";" + ( true ? "" : 0), true ? "" : 0), " overflow:hidden;@media not ( prefers-reduced-motion ){transition-property:transform,opacity;transition-timing-function:", styles_ANIMATION_PARAMS.EASING, ";transition-duration:", styles_ANIMATION_PARAMS.DURATION.IN, ";will-change:transform,opacity;opacity:0;&:has( [data-enter] ){opacity:1;}&:has( [data-leave] ){transition-duration:", styles_ANIMATION_PARAMS.DURATION.OUT, ";}&:has( [data-side='bottom'] ),&:has( [data-side='top'] ){transform:scaleY( ", styles_ANIMATION_PARAMS.SCALE_AMOUNT_OUTER, " );}&:has( [data-side='bottom'] ){transform-origin:top;}&:has( [data-side='top'] ){transform-origin:bottom;}&:has( [data-enter][data-side='bottom'] ),&:has( [data-enter][data-side='top'] ),&:has( [data-leave][data-side='bottom'] ),&:has( [data-leave][data-side='top'] ){transform:scaleY( 1 );}}" + ( true ? "" : 0)); 70193 const PopoverInnerWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 70194 target: "e1wg7tti13" 70195 } : 0)("position:relative;z-index:1000000;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";grid-template-rows:auto;box-sizing:border-box;min-width:160px;max-width:320px;max-height:var( --popover-available-height );padding:", CONTENT_WRAPPER_PADDING, ";overscroll-behavior:contain;overflow:auto;outline:2px solid transparent!important;@media not ( prefers-reduced-motion ){transition:inherit;transform-origin:inherit;&[data-side='bottom'],&[data-side='top']{transform:scaleY(\n\t\t\t\tcalc(\n\t\t\t\t\t1 / ", styles_ANIMATION_PARAMS.SCALE_AMOUNT_OUTER, " *\n\t\t\t\t\t\t", styles_ANIMATION_PARAMS.SCALE_AMOUNT_CONTENT, "\n\t\t\t\t)\n\t\t\t);}&[data-enter][data-side='bottom'],&[data-enter][data-side='top'],&[data-leave][data-side='bottom'],&[data-leave][data-side='top']{transform:scaleY( 1 );}}" + ( true ? "" : 0)); 70196 const baseItem = /*#__PURE__*/emotion_react_browser_esm_css("all:unset;position:relative;min-height:", space(10), ";box-sizing:border-box;grid-column:1/-1;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";align-items:center;@supports ( grid-template-columns: subgrid ){grid-template-columns:subgrid;}font-size:", font('default.fontSize'), ";font-family:inherit;font-weight:normal;line-height:20px;color:", COLORS.theme.foreground, ";border-radius:", config_values.radiusSmall, ";padding-block:", ITEM_PADDING_BLOCK, ";padding-inline:", ITEM_PADDING_INLINE, ";scroll-margin:", CONTENT_WRAPPER_PADDING, ";user-select:none;outline:none;&[aria-disabled='true']{color:", COLORS.ui.textDisabled, ";cursor:not-allowed;}&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t){background-color:", COLORS.theme.accent, ";color:", COLORS.theme.accentInverted, ";}&[data-focus-visible]{box-shadow:0 0 0 1.5px ", COLORS.theme.accent, ";outline:2px solid transparent;}&:active,&[data-active]{}", PopoverInnerWrapper, ":not(:focus) &:not(:focus)[aria-expanded=\"true\"]{background-color:", LIGHT_BACKGROUND_COLOR, ";color:", COLORS.theme.foreground, ";}svg{fill:currentColor;}" + ( true ? "" : 0), true ? "" : 0); 70197 const styles_Item = /*#__PURE__*/emotion_styled_base_browser_esm(MVIULMNR_MenuItem, true ? { 70198 target: "e1wg7tti12" 70199 } : 0)(baseItem, ";" + ( true ? "" : 0)); 70200 const styles_CheckboxItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemCheckbox, true ? { 70201 target: "e1wg7tti11" 70202 } : 0)(baseItem, ";" + ( true ? "" : 0)); 70203 const styles_RadioItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemRadio, true ? { 70204 target: "e1wg7tti10" 70205 } : 0)(baseItem, ";" + ( true ? "" : 0)); 70206 const ItemPrefixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 70207 target: "e1wg7tti9" 70208 } : 0)("grid-column:1;", styles_CheckboxItem, ">&,", styles_RadioItem, ">&{min-width:", space(6), ";}", styles_CheckboxItem, ">&,", styles_RadioItem, ">&,&:not( :empty ){margin-inline-end:", space(2), ";}display:flex;align-items:center;justify-content:center;color:", LIGHTER_TEXT_COLOR, ";[data-active-item]:not( [data-focus-visible] )>&,[aria-disabled='true']>&{color:inherit;}" + ( true ? "" : 0)); 70209 const ItemContentWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 70210 target: "e1wg7tti8" 70211 } : 0)("grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:", space(3), ";pointer-events:none;" + ( true ? "" : 0)); 70212 const ItemChildrenWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 70213 target: "e1wg7tti7" 70214 } : 0)("flex:1;display:inline-flex;flex-direction:column;gap:", space(1), ";" + ( true ? "" : 0)); 70215 const ItemSuffixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 70216 target: "e1wg7tti6" 70217 } : 0)("flex:0 1 fit-content;min-width:0;width:fit-content;display:flex;align-items:center;justify-content:center;gap:", space(3), ";color:", LIGHTER_TEXT_COLOR, ";[data-active-item]:not( [data-focus-visible] ) *:not(", PopoverInnerWrapper, ") &,[aria-disabled='true'] *:not(", PopoverInnerWrapper, ") &{color:inherit;}" + ( true ? "" : 0)); 70218 const styles_Group = /*#__PURE__*/emotion_styled_base_browser_esm(menu_group_MenuGroup, true ? { 70219 target: "e1wg7tti5" 70220 } : 0)( true ? { 70221 name: "49aokf", 70222 styles: "display:contents" 70223 } : 0); 70224 const styles_GroupLabel = /*#__PURE__*/emotion_styled_base_browser_esm(MenuGroupLabel, true ? { 70225 target: "e1wg7tti4" 70226 } : 0)("grid-column:1/-1;padding-block-start:", space(3), ";padding-block-end:", space(2), ";padding-inline:", ITEM_PADDING_INLINE, ";" + ( true ? "" : 0)); 70227 const styles_Separator = /*#__PURE__*/emotion_styled_base_browser_esm(MenuSeparator, true ? { 70228 target: "e1wg7tti3" 70229 } : 0)("grid-column:1/-1;border:none;height:", config_values.borderWidth, ";background-color:", props => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR : DIVIDER_COLOR, ";margin-block:", space(2), ";margin-inline:", ITEM_PADDING_INLINE, ";outline:2px solid transparent;" + ( true ? "" : 0)); 70230 const SubmenuChevronIcon = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon, true ? { 70231 target: "e1wg7tti2" 70232 } : 0)("width:", space(1.5), ";", rtl({ 70233 transform: `scaleX(1)` 70234 }, { 70235 transform: `scaleX(-1)` 70236 }), ";" + ( true ? "" : 0)); 70237 const styles_ItemLabel = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component, true ? { 70238 target: "e1wg7tti1" 70239 } : 0)("font-size:", font('default.fontSize'), ";line-height:20px;color:inherit;" + ( true ? "" : 0)); 70240 const styles_ItemHelpText = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component, true ? { 70241 target: "e1wg7tti0" 70242 } : 0)("font-size:", font('helpText.fontSize'), ";line-height:16px;color:", LIGHTER_TEXT_COLOR, ";overflow-wrap:anywhere;[data-active-item]:not( [data-focus-visible] ) *:not( ", PopoverInnerWrapper, " ) &,[aria-disabled='true'] *:not( ", PopoverInnerWrapper, " ) &{color:inherit;}" + ( true ? "" : 0)); 70243 70244 ;// ./node_modules/@wordpress/components/build-module/menu/item.js 70245 /** 70246 * WordPress dependencies 70247 */ 70248 70249 70250 /** 70251 * Internal dependencies 70252 */ 70253 70254 70255 70256 70257 const item_Item = (0,external_wp_element_namespaceObject.forwardRef)(function Item({ 70258 prefix, 70259 suffix, 70260 children, 70261 disabled = false, 70262 hideOnClick = true, 70263 store, 70264 ...props 70265 }, ref) { 70266 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70267 if (!menuContext?.store) { 70268 throw new Error('Menu.Item can only be rendered inside a Menu component'); 70269 } 70270 70271 // In most cases, the menu store will be retrieved from context (ie. the store 70272 // created by the top-level menu component). But in rare cases (ie. 70273 // `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is 70274 // why the component accepts a `store` prop to override the context store. 70275 const computedStore = store !== null && store !== void 0 ? store : menuContext.store; 70276 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Item, { 70277 ref: ref, 70278 ...props, 70279 accessibleWhenDisabled: true, 70280 disabled: disabled, 70281 hideOnClick: hideOnClick, 70282 store: computedStore, 70283 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, { 70284 children: prefix 70285 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemContentWrapper, { 70286 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemChildrenWrapper, { 70287 children: children 70288 }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, { 70289 children: suffix 70290 })] 70291 })] 70292 }); 70293 }); 70294 70295 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-item-check.js 70296 "use client"; 70297 70298 70299 70300 70301 70302 70303 70304 70305 70306 70307 70308 70309 70310 70311 70312 // src/menu/menu-item-check.tsx 70313 70314 var menu_item_check_TagName = "span"; 70315 var useMenuItemCheck = createHook( 70316 function useMenuItemCheck2(_a) { 70317 var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]); 70318 const context = (0,external_React_.useContext)(MenuItemCheckedContext); 70319 checked = checked != null ? checked : context; 70320 props = useCheckboxCheck(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { checked })); 70321 return props; 70322 } 70323 ); 70324 var MenuItemCheck = forwardRef2(function MenuItemCheck2(props) { 70325 const htmlProps = useMenuItemCheck(props); 70326 return LMDWO4NN_createElement(menu_item_check_TagName, htmlProps); 70327 }); 70328 70329 70330 ;// ./node_modules/@wordpress/components/build-module/menu/checkbox-item.js 70331 /** 70332 * External dependencies 70333 */ 70334 70335 70336 /** 70337 * WordPress dependencies 70338 */ 70339 70340 70341 70342 /** 70343 * Internal dependencies 70344 */ 70345 70346 70347 70348 70349 const CheckboxItem = (0,external_wp_element_namespaceObject.forwardRef)(function CheckboxItem({ 70350 suffix, 70351 children, 70352 disabled = false, 70353 hideOnClick = false, 70354 ...props 70355 }, ref) { 70356 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70357 if (!menuContext?.store) { 70358 throw new Error('Menu.CheckboxItem can only be rendered inside a Menu component'); 70359 } 70360 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_CheckboxItem, { 70361 ref: ref, 70362 ...props, 70363 accessibleWhenDisabled: true, 70364 disabled: disabled, 70365 hideOnClick: hideOnClick, 70366 store: menuContext.store, 70367 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, { 70368 store: menuContext.store, 70369 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {}) 70370 // Override some ariakit inline styles 70371 , 70372 style: { 70373 width: 'auto', 70374 height: 'auto' 70375 }, 70376 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 70377 icon: library_check, 70378 size: 24 70379 }) 70380 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemContentWrapper, { 70381 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemChildrenWrapper, { 70382 children: children 70383 }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, { 70384 children: suffix 70385 })] 70386 })] 70387 }); 70388 }); 70389 70390 ;// ./node_modules/@wordpress/components/build-module/menu/radio-item.js 70391 /** 70392 * External dependencies 70393 */ 70394 70395 70396 /** 70397 * WordPress dependencies 70398 */ 70399 70400 70401 70402 /** 70403 * Internal dependencies 70404 */ 70405 70406 70407 70408 70409 70410 const radioCheck = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 70411 xmlns: "http://www.w3.org/2000/svg", 70412 viewBox: "0 0 24 24", 70413 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Circle, { 70414 cx: 12, 70415 cy: 12, 70416 r: 3 70417 }) 70418 }); 70419 const RadioItem = (0,external_wp_element_namespaceObject.forwardRef)(function RadioItem({ 70420 suffix, 70421 children, 70422 disabled = false, 70423 hideOnClick = false, 70424 ...props 70425 }, ref) { 70426 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70427 if (!menuContext?.store) { 70428 throw new Error('Menu.RadioItem can only be rendered inside a Menu component'); 70429 } 70430 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_RadioItem, { 70431 ref: ref, 70432 ...props, 70433 accessibleWhenDisabled: true, 70434 disabled: disabled, 70435 hideOnClick: hideOnClick, 70436 store: menuContext.store, 70437 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, { 70438 store: menuContext.store, 70439 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {}) 70440 // Override some ariakit inline styles 70441 , 70442 style: { 70443 width: 'auto', 70444 height: 'auto' 70445 }, 70446 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { 70447 icon: radioCheck, 70448 size: 24 70449 }) 70450 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemContentWrapper, { 70451 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemChildrenWrapper, { 70452 children: children 70453 }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, { 70454 children: suffix 70455 })] 70456 })] 70457 }); 70458 }); 70459 70460 ;// ./node_modules/@wordpress/components/build-module/menu/group.js 70461 /** 70462 * WordPress dependencies 70463 */ 70464 70465 70466 /** 70467 * Internal dependencies 70468 */ 70469 70470 70471 70472 70473 const group_Group = (0,external_wp_element_namespaceObject.forwardRef)(function Group(props, ref) { 70474 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70475 if (!menuContext?.store) { 70476 throw new Error('Menu.Group can only be rendered inside a Menu component'); 70477 } 70478 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Group, { 70479 ref: ref, 70480 ...props, 70481 store: menuContext.store 70482 }); 70483 }); 70484 70485 ;// ./node_modules/@wordpress/components/build-module/menu/group-label.js 70486 /** 70487 * WordPress dependencies 70488 */ 70489 70490 70491 /** 70492 * Internal dependencies 70493 */ 70494 70495 70496 70497 70498 70499 const group_label_GroupLabel = (0,external_wp_element_namespaceObject.forwardRef)(function Group(props, ref) { 70500 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70501 if (!menuContext?.store) { 70502 throw new Error('Menu.GroupLabel can only be rendered inside a Menu component'); 70503 } 70504 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_GroupLabel, { 70505 ref: ref, 70506 render: 70507 /*#__PURE__*/ 70508 // @ts-expect-error The `children` prop is passed 70509 (0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, { 70510 upperCase: true, 70511 variant: "muted", 70512 size: "11px", 70513 weight: 500, 70514 lineHeight: "16px" 70515 }), 70516 ...props, 70517 store: menuContext.store 70518 }); 70519 }); 70520 70521 ;// ./node_modules/@wordpress/components/build-module/menu/separator.js 70522 /** 70523 * WordPress dependencies 70524 */ 70525 70526 70527 /** 70528 * Internal dependencies 70529 */ 70530 70531 70532 70533 70534 const separator_Separator = (0,external_wp_element_namespaceObject.forwardRef)(function Separator(props, ref) { 70535 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70536 if (!menuContext?.store) { 70537 throw new Error('Menu.Separator can only be rendered inside a Menu component'); 70538 } 70539 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Separator, { 70540 ref: ref, 70541 ...props, 70542 store: menuContext.store, 70543 variant: menuContext.variant 70544 }); 70545 }); 70546 70547 ;// ./node_modules/@wordpress/components/build-module/menu/item-label.js 70548 /** 70549 * WordPress dependencies 70550 */ 70551 70552 70553 /** 70554 * Internal dependencies 70555 */ 70556 70557 70558 70559 70560 const ItemLabel = (0,external_wp_element_namespaceObject.forwardRef)(function ItemLabel(props, ref) { 70561 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70562 if (!menuContext?.store) { 70563 throw new Error('Menu.ItemLabel can only be rendered inside a Menu component'); 70564 } 70565 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_ItemLabel, { 70566 numberOfLines: 1, 70567 ref: ref, 70568 ...props 70569 }); 70570 }); 70571 70572 ;// ./node_modules/@wordpress/components/build-module/menu/item-help-text.js 70573 /** 70574 * WordPress dependencies 70575 */ 70576 70577 70578 /** 70579 * Internal dependencies 70580 */ 70581 70582 70583 70584 70585 const ItemHelpText = (0,external_wp_element_namespaceObject.forwardRef)(function ItemHelpText(props, ref) { 70586 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70587 if (!menuContext?.store) { 70588 throw new Error('Menu.ItemHelpText can only be rendered inside a Menu component'); 70589 } 70590 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_ItemHelpText, { 70591 numberOfLines: 2, 70592 ref: ref, 70593 ...props 70594 }); 70595 }); 70596 70597 ;// ./node_modules/@ariakit/react-core/esm/menu/menu-button.js 70598 "use client"; 70599 70600 70601 70602 70603 70604 70605 70606 70607 70608 70609 70610 70611 70612 70613 70614 70615 70616 70617 70618 70619 70620 70621 70622 70623 70624 70625 // src/menu/menu-button.tsx 70626 70627 70628 70629 70630 var menu_button_TagName = "button"; 70631 function getInitialFocus(event, dir) { 70632 const keyMap = { 70633 ArrowDown: dir === "bottom" || dir === "top" ? "first" : false, 70634 ArrowUp: dir === "bottom" || dir === "top" ? "last" : false, 70635 ArrowRight: dir === "right" ? "first" : false, 70636 ArrowLeft: dir === "left" ? "first" : false 70637 }; 70638 return keyMap[event.key]; 70639 } 70640 function hasActiveItem(items, excludeElement) { 70641 return !!(items == null ? void 0 : items.some((item) => { 70642 if (!item.element) return false; 70643 if (item.element === excludeElement) return false; 70644 return item.element.getAttribute("aria-expanded") === "true"; 70645 })); 70646 } 70647 var useMenuButton = createHook( 70648 function useMenuButton2(_a) { 70649 var _b = _a, { 70650 store, 70651 focusable, 70652 accessibleWhenDisabled, 70653 showOnHover 70654 } = _b, props = __objRest(_b, [ 70655 "store", 70656 "focusable", 70657 "accessibleWhenDisabled", 70658 "showOnHover" 70659 ]); 70660 const context = useMenuProviderContext(); 70661 store = store || context; 70662 invariant( 70663 store, 70664 false && 0 70665 ); 70666 const ref = (0,external_React_.useRef)(null); 70667 const parentMenu = store.parent; 70668 const parentMenubar = store.menubar; 70669 const hasParentMenu = !!parentMenu; 70670 const parentIsMenubar = !!parentMenubar && !hasParentMenu; 70671 const disabled = disabledFromProps(props); 70672 const showMenu = () => { 70673 const trigger = ref.current; 70674 if (!trigger) return; 70675 store == null ? void 0 : store.setDisclosureElement(trigger); 70676 store == null ? void 0 : store.setAnchorElement(trigger); 70677 store == null ? void 0 : store.show(); 70678 }; 70679 const onFocusProp = props.onFocus; 70680 const onFocus = useEvent((event) => { 70681 onFocusProp == null ? void 0 : onFocusProp(event); 70682 if (disabled) return; 70683 if (event.defaultPrevented) return; 70684 store == null ? void 0 : store.setAutoFocusOnShow(false); 70685 store == null ? void 0 : store.setActiveId(null); 70686 if (!parentMenubar) return; 70687 if (!parentIsMenubar) return; 70688 const { items } = parentMenubar.getState(); 70689 if (hasActiveItem(items, event.currentTarget)) { 70690 showMenu(); 70691 } 70692 }); 70693 const dir = useStoreState( 70694 store, 70695 (state) => state.placement.split("-")[0] 70696 ); 70697 const onKeyDownProp = props.onKeyDown; 70698 const onKeyDown = useEvent((event) => { 70699 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 70700 if (disabled) return; 70701 if (event.defaultPrevented) return; 70702 const initialFocus = getInitialFocus(event, dir); 70703 if (initialFocus) { 70704 event.preventDefault(); 70705 showMenu(); 70706 store == null ? void 0 : store.setAutoFocusOnShow(true); 70707 store == null ? void 0 : store.setInitialFocus(initialFocus); 70708 } 70709 }); 70710 const onClickProp = props.onClick; 70711 const onClick = useEvent((event) => { 70712 onClickProp == null ? void 0 : onClickProp(event); 70713 if (event.defaultPrevented) return; 70714 if (!store) return; 70715 const isKeyboardClick = !event.detail; 70716 const { open } = store.getState(); 70717 if (!open || isKeyboardClick) { 70718 if (!hasParentMenu || isKeyboardClick) { 70719 store.setAutoFocusOnShow(true); 70720 } 70721 store.setInitialFocus(isKeyboardClick ? "first" : "container"); 70722 } 70723 if (hasParentMenu) { 70724 showMenu(); 70725 } 70726 }); 70727 props = useWrapElement( 70728 props, 70729 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuContextProvider, { value: store, children: element }), 70730 [store] 70731 ); 70732 if (hasParentMenu) { 70733 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 70734 render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role.div, { render: props.render }) 70735 }); 70736 } 70737 const id = useId(props.id); 70738 const parentContentElement = useStoreState( 70739 (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu, 70740 "contentElement" 70741 ); 70742 const role = hasParentMenu || parentIsMenubar ? getPopupItemRole(parentContentElement, "menuitem") : void 0; 70743 const contentElement = store.useState("contentElement"); 70744 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 70745 id, 70746 role, 70747 "aria-haspopup": getPopupRole(contentElement, "menu") 70748 }, props), { 70749 ref: useMergeRefs(ref, props.ref), 70750 onFocus, 70751 onKeyDown, 70752 onClick 70753 }); 70754 props = useHovercardAnchor(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 70755 store, 70756 focusable, 70757 accessibleWhenDisabled 70758 }, props), { 70759 showOnHover: (event) => { 70760 const getShowOnHover = () => { 70761 if (typeof showOnHover === "function") return showOnHover(event); 70762 if (showOnHover != null) return showOnHover; 70763 if (hasParentMenu) return true; 70764 if (!parentMenubar) return false; 70765 const { items } = parentMenubar.getState(); 70766 return parentIsMenubar && hasActiveItem(items); 70767 }; 70768 const canShowOnHover = getShowOnHover(); 70769 if (!canShowOnHover) return false; 70770 const parent = parentIsMenubar ? parentMenubar : parentMenu; 70771 if (!parent) return true; 70772 parent.setActiveId(event.currentTarget.id); 70773 return true; 70774 } 70775 })); 70776 props = usePopoverDisclosure(_3YLGPPWQ_spreadValues({ 70777 store, 70778 toggleOnClick: !hasParentMenu, 70779 focusable, 70780 accessibleWhenDisabled 70781 }, props)); 70782 props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ 70783 store, 70784 typeahead: parentIsMenubar 70785 }, props)); 70786 return props; 70787 } 70788 ); 70789 var MenuButton = forwardRef2(function MenuButton2(props) { 70790 const htmlProps = useMenuButton(props); 70791 return LMDWO4NN_createElement(menu_button_TagName, htmlProps); 70792 }); 70793 70794 70795 ;// ./node_modules/@wordpress/components/build-module/menu/trigger-button.js 70796 /** 70797 * External dependencies 70798 */ 70799 70800 70801 /** 70802 * WordPress dependencies 70803 */ 70804 70805 70806 /** 70807 * Internal dependencies 70808 */ 70809 70810 70811 70812 const TriggerButton = (0,external_wp_element_namespaceObject.forwardRef)(function TriggerButton({ 70813 children, 70814 disabled = false, 70815 ...props 70816 }, ref) { 70817 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70818 if (!menuContext?.store) { 70819 throw new Error('Menu.TriggerButton can only be rendered inside a Menu component'); 70820 } 70821 if (menuContext.store.parent) { 70822 throw new Error('Menu.TriggerButton should not be rendered inside a nested Menu component. Use Menu.SubmenuTriggerItem instead.'); 70823 } 70824 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuButton, { 70825 ref: ref, 70826 ...props, 70827 disabled: disabled, 70828 store: menuContext.store, 70829 children: children 70830 }); 70831 }); 70832 70833 ;// ./node_modules/@wordpress/icons/build-module/library/chevron-right-small.js 70834 /** 70835 * WordPress dependencies 70836 */ 70837 70838 70839 const chevronRightSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 70840 xmlns: "http://www.w3.org/2000/svg", 70841 viewBox: "0 0 24 24", 70842 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 70843 d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z" 70844 }) 70845 }); 70846 /* harmony default export */ const chevron_right_small = (chevronRightSmall); 70847 70848 ;// ./node_modules/@wordpress/components/build-module/menu/submenu-trigger-item.js 70849 /** 70850 * External dependencies 70851 */ 70852 70853 70854 /** 70855 * WordPress dependencies 70856 */ 70857 70858 70859 70860 /** 70861 * Internal dependencies 70862 */ 70863 70864 70865 70866 70867 70868 const SubmenuTriggerItem = (0,external_wp_element_namespaceObject.forwardRef)(function SubmenuTriggerItem({ 70869 suffix, 70870 ...otherProps 70871 }, ref) { 70872 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 70873 if (!menuContext?.store.parent) { 70874 throw new Error('Menu.SubmenuTriggerItem can only be rendered inside a nested Menu component'); 70875 } 70876 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuButton, { 70877 ref: ref, 70878 accessibleWhenDisabled: true, 70879 store: menuContext.store, 70880 render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_Item, { 70881 ...otherProps, 70882 // The menu item needs to register and be part of the parent menu. 70883 // Without specifying the store explicitly, the `Item` component 70884 // would otherwise read the store via context and pick up the one from 70885 // the sub-menu `Menu` component. 70886 store: menuContext.store.parent, 70887 suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { 70888 children: [suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SubmenuChevronIcon, { 70889 "aria-hidden": "true", 70890 icon: chevron_right_small, 70891 size: 24, 70892 preserveAspectRatio: "xMidYMid slice" 70893 })] 70894 }) 70895 }) 70896 }); 70897 }); 70898 70899 ;// ./node_modules/@ariakit/react-core/esm/__chunks/ASGALOAX.js 70900 "use client"; 70901 70902 70903 70904 70905 70906 70907 70908 70909 70910 // src/menu/menu-list.tsx 70911 70912 70913 70914 var ASGALOAX_TagName = "div"; 70915 function useAriaLabelledBy(_a) { 70916 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 70917 const [id, setId] = (0,external_React_.useState)(void 0); 70918 const label = props["aria-label"]; 70919 const disclosureElement = useStoreState(store, "disclosureElement"); 70920 const contentElement = useStoreState(store, "contentElement"); 70921 (0,external_React_.useEffect)(() => { 70922 const disclosure = disclosureElement; 70923 if (!disclosure) return; 70924 const menu = contentElement; 70925 if (!menu) return; 70926 const menuLabel = label || menu.hasAttribute("aria-label"); 70927 if (menuLabel) { 70928 setId(void 0); 70929 } else if (disclosure.id) { 70930 setId(disclosure.id); 70931 } 70932 }, [label, disclosureElement, contentElement]); 70933 return id; 70934 } 70935 var useMenuList = createHook( 70936 function useMenuList2(_a) { 70937 var _b = _a, { store, alwaysVisible, composite } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]); 70938 const context = useMenuProviderContext(); 70939 store = store || context; 70940 invariant( 70941 store, 70942 false && 0 70943 ); 70944 const parentMenu = store.parent; 70945 const parentMenubar = store.menubar; 70946 const hasParentMenu = !!parentMenu; 70947 const id = useId(props.id); 70948 const onKeyDownProp = props.onKeyDown; 70949 const dir = store.useState( 70950 (state) => state.placement.split("-")[0] 70951 ); 70952 const orientation = store.useState( 70953 (state) => state.orientation === "both" ? void 0 : state.orientation 70954 ); 70955 const isHorizontal = orientation !== "vertical"; 70956 const isMenubarHorizontal = useStoreState( 70957 parentMenubar, 70958 (state) => !!state && state.orientation !== "vertical" 70959 ); 70960 const onKeyDown = useEvent((event) => { 70961 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 70962 if (event.defaultPrevented) return; 70963 if (hasParentMenu || parentMenubar && !isHorizontal) { 70964 const hideMap = { 70965 ArrowRight: () => dir === "left" && !isHorizontal, 70966 ArrowLeft: () => dir === "right" && !isHorizontal, 70967 ArrowUp: () => dir === "bottom" && isHorizontal, 70968 ArrowDown: () => dir === "top" && isHorizontal 70969 }; 70970 const action = hideMap[event.key]; 70971 if (action == null ? void 0 : action()) { 70972 event.stopPropagation(); 70973 event.preventDefault(); 70974 return store == null ? void 0 : store.hide(); 70975 } 70976 } 70977 if (parentMenubar) { 70978 const keyMap = { 70979 ArrowRight: () => { 70980 if (!isMenubarHorizontal) return; 70981 return parentMenubar.next(); 70982 }, 70983 ArrowLeft: () => { 70984 if (!isMenubarHorizontal) return; 70985 return parentMenubar.previous(); 70986 }, 70987 ArrowDown: () => { 70988 if (isMenubarHorizontal) return; 70989 return parentMenubar.next(); 70990 }, 70991 ArrowUp: () => { 70992 if (isMenubarHorizontal) return; 70993 return parentMenubar.previous(); 70994 } 70995 }; 70996 const action = keyMap[event.key]; 70997 const id2 = action == null ? void 0 : action(); 70998 if (id2 !== void 0) { 70999 event.stopPropagation(); 71000 event.preventDefault(); 71001 parentMenubar.move(id2); 71002 } 71003 } 71004 }); 71005 props = useWrapElement( 71006 props, 71007 (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuScopedContextProvider, { value: store, children: element }), 71008 [store] 71009 ); 71010 const ariaLabelledBy = useAriaLabelledBy(_3YLGPPWQ_spreadValues({ store }, props)); 71011 const mounted = store.useState("mounted"); 71012 const hidden = isHidden(mounted, props.hidden, alwaysVisible); 71013 const style = hidden ? _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props.style), { display: "none" }) : props.style; 71014 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 71015 id, 71016 "aria-labelledby": ariaLabelledBy, 71017 hidden 71018 }, props), { 71019 ref: useMergeRefs(id ? store.setContentElement : null, props.ref), 71020 style, 71021 onKeyDown 71022 }); 71023 const hasCombobox = !!store.combobox; 71024 composite = composite != null ? composite : !hasCombobox; 71025 if (composite) { 71026 props = _3YLGPPWQ_spreadValues({ 71027 role: "menu", 71028 "aria-orientation": orientation 71029 }, props); 71030 } 71031 props = useComposite(_3YLGPPWQ_spreadValues({ store, composite }, props)); 71032 props = useCompositeTypeahead(_3YLGPPWQ_spreadValues({ store, typeahead: !hasCombobox }, props)); 71033 return props; 71034 } 71035 ); 71036 var MenuList = forwardRef2(function MenuList2(props) { 71037 const htmlProps = useMenuList(props); 71038 return LMDWO4NN_createElement(ASGALOAX_TagName, htmlProps); 71039 }); 71040 71041 71042 71043 ;// ./node_modules/@ariakit/react-core/esm/menu/menu.js 71044 "use client"; 71045 71046 71047 71048 71049 71050 71051 71052 71053 71054 71055 71056 71057 71058 71059 71060 71061 71062 71063 71064 71065 71066 71067 71068 71069 71070 71071 71072 71073 71074 71075 71076 71077 71078 71079 71080 71081 71082 71083 71084 71085 71086 71087 71088 71089 71090 71091 71092 71093 71094 71095 // src/menu/menu.tsx 71096 71097 71098 71099 71100 var menu_TagName = "div"; 71101 var useMenu = createHook(function useMenu2(_a) { 71102 var _b = _a, { 71103 store, 71104 modal: modalProp = false, 71105 portal = !!modalProp, 71106 hideOnEscape = true, 71107 autoFocusOnShow = true, 71108 hideOnHoverOutside, 71109 alwaysVisible 71110 } = _b, props = __objRest(_b, [ 71111 "store", 71112 "modal", 71113 "portal", 71114 "hideOnEscape", 71115 "autoFocusOnShow", 71116 "hideOnHoverOutside", 71117 "alwaysVisible" 71118 ]); 71119 const context = useMenuProviderContext(); 71120 store = store || context; 71121 invariant( 71122 store, 71123 false && 0 71124 ); 71125 const ref = (0,external_React_.useRef)(null); 71126 const parentMenu = store.parent; 71127 const parentMenubar = store.menubar; 71128 const hasParentMenu = !!parentMenu; 71129 const parentIsMenubar = !!parentMenubar && !hasParentMenu; 71130 props = _3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({}, props), { 71131 ref: useMergeRefs(ref, props.ref) 71132 }); 71133 const _a2 = useMenuList(_3YLGPPWQ_spreadValues({ 71134 store, 71135 alwaysVisible 71136 }, props)), { "aria-labelledby": ariaLabelledBy } = _a2, menuListProps = __objRest(_a2, ["aria-labelledby"]); 71137 props = menuListProps; 71138 const [initialFocusRef, setInitialFocusRef] = (0,external_React_.useState)(); 71139 const autoFocusOnShowState = store.useState("autoFocusOnShow"); 71140 const initialFocus = store.useState("initialFocus"); 71141 const baseElement = store.useState("baseElement"); 71142 const items = store.useState("renderedItems"); 71143 (0,external_React_.useEffect)(() => { 71144 let cleaning = false; 71145 setInitialFocusRef((prevInitialFocusRef) => { 71146 var _a3, _b2, _c; 71147 if (cleaning) return; 71148 if (!autoFocusOnShowState) return; 71149 if ((_a3 = prevInitialFocusRef == null ? void 0 : prevInitialFocusRef.current) == null ? void 0 : _a3.isConnected) return prevInitialFocusRef; 71150 const ref2 = (0,external_React_.createRef)(); 71151 switch (initialFocus) { 71152 case "first": 71153 ref2.current = ((_b2 = items.find((item) => !item.disabled && item.element)) == null ? void 0 : _b2.element) || null; 71154 break; 71155 case "last": 71156 ref2.current = ((_c = [...items].reverse().find((item) => !item.disabled && item.element)) == null ? void 0 : _c.element) || null; 71157 break; 71158 default: 71159 ref2.current = baseElement; 71160 } 71161 return ref2; 71162 }); 71163 return () => { 71164 cleaning = true; 71165 }; 71166 }, [store, autoFocusOnShowState, initialFocus, items, baseElement]); 71167 const modal = hasParentMenu ? false : modalProp; 71168 const mayAutoFocusOnShow = !!autoFocusOnShow; 71169 const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!modal; 71170 const contentElement = useStoreState( 71171 store.combobox || store, 71172 "contentElement" 71173 ); 71174 const parentContentElement = useStoreState( 71175 (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu, 71176 "contentElement" 71177 ); 71178 const preserveTabOrderAnchor = (0,external_React_.useMemo)(() => { 71179 if (!parentContentElement) return; 71180 if (!contentElement) return; 71181 const role = contentElement.getAttribute("role"); 71182 const parentRole = parentContentElement.getAttribute("role"); 71183 const parentIsMenuOrMenubar = parentRole === "menu" || parentRole === "menubar"; 71184 if (parentIsMenuOrMenubar && role === "menu") return; 71185 return parentContentElement; 71186 }, [contentElement, parentContentElement]); 71187 if (preserveTabOrderAnchor !== void 0) { 71188 props = _3YLGPPWQ_spreadValues({ 71189 preserveTabOrderAnchor 71190 }, props); 71191 } 71192 props = useHovercard(_3YLGPPWQ_spreadProps(_3YLGPPWQ_spreadValues({ 71193 store, 71194 alwaysVisible, 71195 initialFocus: initialFocusRef, 71196 autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || !!modal 71197 }, props), { 71198 hideOnEscape(event) { 71199 if (isFalsyBooleanCallback(hideOnEscape, event)) return false; 71200 store == null ? void 0 : store.hideAll(); 71201 return true; 71202 }, 71203 hideOnHoverOutside(event) { 71204 const disclosureElement = store == null ? void 0 : store.getState().disclosureElement; 71205 const getHideOnHoverOutside = () => { 71206 if (typeof hideOnHoverOutside === "function") { 71207 return hideOnHoverOutside(event); 71208 } 71209 if (hideOnHoverOutside != null) return hideOnHoverOutside; 71210 if (hasParentMenu) return true; 71211 if (!parentIsMenubar) return false; 71212 if (!disclosureElement) return true; 71213 if (hasFocusWithin(disclosureElement)) return false; 71214 return true; 71215 }; 71216 if (!getHideOnHoverOutside()) return false; 71217 if (event.defaultPrevented) return true; 71218 if (!hasParentMenu) return true; 71219 if (!disclosureElement) return true; 71220 fireEvent(disclosureElement, "mouseout", event); 71221 if (!hasFocusWithin(disclosureElement)) return true; 71222 requestAnimationFrame(() => { 71223 if (hasFocusWithin(disclosureElement)) return; 71224 store == null ? void 0 : store.hide(); 71225 }); 71226 return false; 71227 }, 71228 modal, 71229 portal, 71230 backdrop: hasParentMenu ? false : props.backdrop 71231 })); 71232 props = _3YLGPPWQ_spreadValues({ 71233 "aria-labelledby": ariaLabelledBy 71234 }, props); 71235 return props; 71236 }); 71237 var Menu = createDialogComponent( 71238 forwardRef2(function Menu2(props) { 71239 const htmlProps = useMenu(props); 71240 return LMDWO4NN_createElement(menu_TagName, htmlProps); 71241 }), 71242 useMenuProviderContext 71243 ); 71244 71245 71246 ;// ./node_modules/@wordpress/components/build-module/menu/popover.js 71247 /** 71248 * External dependencies 71249 */ 71250 71251 71252 /** 71253 * WordPress dependencies 71254 */ 71255 71256 71257 /** 71258 * Internal dependencies 71259 */ 71260 71261 71262 71263 71264 const menu_popover_Popover = (0,external_wp_element_namespaceObject.forwardRef)(function Popover({ 71265 gutter, 71266 children, 71267 shift, 71268 modal = true, 71269 ...otherProps 71270 }, ref) { 71271 const menuContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 71272 71273 // Extract the side from the applied placement — useful for animations. 71274 // Using `currentPlacement` instead of `placement` to make sure that we 71275 // use the final computed placement (including "flips" etc). 71276 const appliedPlacementSide = useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0]; 71277 const hideOnEscape = (0,external_wp_element_namespaceObject.useCallback)(event => { 71278 // Pressing Escape can cause unexpected consequences (ie. exiting 71279 // full screen mode on MacOs, close parent modals...). 71280 event.preventDefault(); 71281 // Returning `true` causes the menu to hide. 71282 return true; 71283 }, []); 71284 const computedDirection = useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr'; 71285 const wrapperProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 71286 dir: computedDirection, 71287 style: { 71288 direction: computedDirection 71289 } 71290 }), [computedDirection]); 71291 if (!menuContext?.store) { 71292 throw new Error('Menu.Popover can only be rendered inside a Menu component'); 71293 } 71294 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Menu, { 71295 ...otherProps, 71296 ref: ref, 71297 modal: modal, 71298 store: menuContext.store 71299 // Root menu has an 8px distance from its trigger, 71300 // otherwise 0 (which causes the submenu to slightly overlap) 71301 , 71302 gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8 71303 // Align nested menu by the same (but opposite) amount 71304 // as the menu container's padding. 71305 , 71306 shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0, 71307 hideOnHoverOutside: false, 71308 "data-side": appliedPlacementSide, 71309 wrapperProps: wrapperProps, 71310 hideOnEscape: hideOnEscape, 71311 unmountOnHide: true, 71312 render: renderProps => 71313 /*#__PURE__*/ 71314 // Two wrappers are needed for the entry animation, where the menu 71315 // container scales with a different factor than its contents. 71316 // The {...renderProps} are passed to the inner wrapper, so that the 71317 // menu element is the direct parent of the menu item elements. 71318 (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverOuterWrapper, { 71319 variant: menuContext.variant, 71320 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverInnerWrapper, { 71321 ...renderProps 71322 }) 71323 }), 71324 children: children 71325 }); 71326 }); 71327 71328 ;// ./node_modules/@wordpress/components/build-module/menu/index.js 71329 /** 71330 * External dependencies 71331 */ 71332 71333 71334 /** 71335 * WordPress dependencies 71336 */ 71337 71338 71339 71340 /** 71341 * Internal dependencies 71342 */ 71343 71344 71345 71346 71347 71348 71349 71350 71351 71352 71353 71354 71355 71356 71357 const UnconnectedMenu = props => { 71358 const { 71359 children, 71360 defaultOpen = false, 71361 open, 71362 onOpenChange, 71363 placement, 71364 // From internal components context 71365 variant 71366 } = useContextSystem(props, 'Menu'); 71367 const parentContext = (0,external_wp_element_namespaceObject.useContext)(context_Context); 71368 const rtl = (0,external_wp_i18n_namespaceObject.isRTL)(); 71369 71370 // If an explicit value for the `placement` prop is not passed, 71371 // apply a default placement of `bottom-start` for the root menu popover, 71372 // and of `right-start` for nested menu popovers. 71373 let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? 'right-start' : 'bottom-start'; 71374 // Swap left/right in case of RTL direction 71375 if (rtl) { 71376 if (/right/.test(computedPlacement)) { 71377 computedPlacement = computedPlacement.replace('right', 'left'); 71378 } else if (/left/.test(computedPlacement)) { 71379 computedPlacement = computedPlacement.replace('left', 'right'); 71380 } 71381 } 71382 const menuStore = useMenuStore({ 71383 parent: parentContext?.store, 71384 open, 71385 defaultOpen, 71386 placement: computedPlacement, 71387 focusLoop: true, 71388 setOpen(willBeOpen) { 71389 onOpenChange?.(willBeOpen); 71390 }, 71391 rtl 71392 }); 71393 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 71394 store: menuStore, 71395 variant 71396 }), [menuStore, variant]); 71397 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context_Context.Provider, { 71398 value: contextValue, 71399 children: children 71400 }); 71401 }; 71402 71403 /** 71404 * Menu is a collection of React components that combine to render 71405 * ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and 71406 * [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns. 71407 * 71408 * `Menu` itself is a wrapper component and context provider. 71409 * It is responsible for managing the state of the menu and its items, and for 71410 * rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`) 71411 * component, and the `Menu.Popover` component. 71412 */ 71413 const menu_Menu = Object.assign(contextConnectWithoutRef(UnconnectedMenu, 'Menu'), { 71414 Context: Object.assign(context_Context, { 71415 displayName: 'Menu.Context' 71416 }), 71417 /** 71418 * Renders a menu item inside the `Menu.Popover` or `Menu.Group` components. 71419 * 71420 * It can optionally contain one instance of the `Menu.ItemLabel` component 71421 * and one instance of the `Menu.ItemHelpText` component. 71422 */ 71423 Item: Object.assign(item_Item, { 71424 displayName: 'Menu.Item' 71425 }), 71426 /** 71427 * Renders a radio menu item inside the `Menu.Popover` or `Menu.Group` 71428 * components. 71429 * 71430 * It can optionally contain one instance of the `Menu.ItemLabel` component 71431 * and one instance of the `Menu.ItemHelpText` component. 71432 */ 71433 RadioItem: Object.assign(RadioItem, { 71434 displayName: 'Menu.RadioItem' 71435 }), 71436 /** 71437 * Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group` 71438 * components. 71439 * 71440 * It can optionally contain one instance of the `Menu.ItemLabel` component 71441 * and one instance of the `Menu.ItemHelpText` component. 71442 */ 71443 CheckboxItem: Object.assign(CheckboxItem, { 71444 displayName: 'Menu.CheckboxItem' 71445 }), 71446 /** 71447 * Renders a group for menu items. 71448 * 71449 * It should contain one instance of `Menu.GroupLabel` and one or more 71450 * instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`. 71451 */ 71452 Group: Object.assign(group_Group, { 71453 displayName: 'Menu.Group' 71454 }), 71455 /** 71456 * Renders a label in a menu group. 71457 * 71458 * This component should be wrapped with `Menu.Group` so the 71459 * `aria-labelledby` is correctly set on the group element. 71460 */ 71461 GroupLabel: Object.assign(group_label_GroupLabel, { 71462 displayName: 'Menu.GroupLabel' 71463 }), 71464 /** 71465 * Renders a divider between menu items or menu groups. 71466 */ 71467 Separator: Object.assign(separator_Separator, { 71468 displayName: 'Menu.Separator' 71469 }), 71470 /** 71471 * Renders a menu item's label text. It should be wrapped with `Menu.Item`, 71472 * `Menu.RadioItem`, or `Menu.CheckboxItem`. 71473 */ 71474 ItemLabel: Object.assign(ItemLabel, { 71475 displayName: 'Menu.ItemLabel' 71476 }), 71477 /** 71478 * Renders a menu item's help text. It should be wrapped with `Menu.Item`, 71479 * `Menu.RadioItem`, or `Menu.CheckboxItem`. 71480 */ 71481 ItemHelpText: Object.assign(ItemHelpText, { 71482 displayName: 'Menu.ItemHelpText' 71483 }), 71484 /** 71485 * Renders a dropdown menu element that's controlled by a sibling 71486 * `Menu.TriggerButton` component. It renders a popover and automatically 71487 * focuses on items when the menu is shown. 71488 * 71489 * The only valid children of `Menu.Popover` are `Menu.Item`, 71490 * `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`, 71491 * and `Menu` (for nested dropdown menus). 71492 */ 71493 Popover: Object.assign(menu_popover_Popover, { 71494 displayName: 'Menu.Popover' 71495 }), 71496 /** 71497 * Renders a menu button that toggles the visibility of a sibling 71498 * `Menu.Popover` component when clicked or when using arrow keys. 71499 */ 71500 TriggerButton: Object.assign(TriggerButton, { 71501 displayName: 'Menu.TriggerButton' 71502 }), 71503 /** 71504 * Renders a menu item that toggles the visibility of a sibling 71505 * `Menu.Popover` component when clicked or when using arrow keys. 71506 * 71507 * This component is used to create a nested dropdown menu. 71508 */ 71509 SubmenuTriggerItem: Object.assign(SubmenuTriggerItem, { 71510 displayName: 'Menu.SubmenuTriggerItem' 71511 }) 71512 }); 71513 /* harmony default export */ const build_module_menu = ((/* unused pure expression or super */ null && (menu_Menu))); 71514 71515 ;// ./node_modules/@wordpress/components/build-module/theme/styles.js 71516 71517 function theme_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 71518 /** 71519 * External dependencies 71520 */ 71521 71522 71523 71524 /** 71525 * Internal dependencies 71526 */ 71527 71528 const colorVariables = ({ 71529 colors 71530 }) => { 71531 const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-$k}: $v};`).join(''); 71532 return [/*#__PURE__*/emotion_react_browser_esm_css("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + ( true ? "" : 0), true ? "" : 0)]; 71533 }; 71534 const theme_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { 71535 target: "e1krjpvb0" 71536 } : 0)( true ? { 71537 name: "1a3idx0", 71538 styles: "color:var( --wp-components-color-foreground, currentColor )" 71539 } : 0); 71540 71541 ;// ./node_modules/@wordpress/components/build-module/theme/color-algorithms.js 71542 /** 71543 * External dependencies 71544 */ 71545 71546 71547 71548 71549 /** 71550 * WordPress dependencies 71551 */ 71552 71553 71554 /** 71555 * Internal dependencies 71556 */ 71557 71558 71559 k([names, a11y]); 71560 function generateThemeVariables(inputs) { 71561 validateInputs(inputs); 71562 const generatedColors = { 71563 ...generateAccentDependentColors(inputs.accent), 71564 ...generateBackgroundDependentColors(inputs.background) 71565 }; 71566 warnContrastIssues(checkContrasts(inputs, generatedColors)); 71567 return { 71568 colors: generatedColors 71569 }; 71570 } 71571 function validateInputs(inputs) { 71572 for (const [key, value] of Object.entries(inputs)) { 71573 if (typeof value !== 'undefined' && !w(value).isValid()) { 71574 true ? external_wp_warning_default()(`wp.components.Theme: "$value}" is not a valid color value for the '$key}' prop.`) : 0; 71575 } 71576 } 71577 } 71578 function checkContrasts(inputs, outputs) { 71579 const background = inputs.background || COLORS.white; 71580 const accent = inputs.accent || '#3858e9'; 71581 const foreground = outputs.foreground || COLORS.gray[900]; 71582 const gray = outputs.gray || COLORS.gray; 71583 return { 71584 accent: w(background).isReadable(accent) ? undefined : `The background color ("$background}") does not have sufficient contrast against the accent color ("$accent}").`, 71585 foreground: w(background).isReadable(foreground) ? undefined : `The background color provided ("$background}") does not have sufficient contrast against the standard foreground colors.`, 71586 grays: w(background).contrast(gray[600]) >= 3 && w(background).contrast(gray[700]) >= 4.5 ? undefined : `The background color provided ("$background}") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.` 71587 }; 71588 } 71589 function warnContrastIssues(issues) { 71590 for (const error of Object.values(issues)) { 71591 if (error) { 71592 true ? external_wp_warning_default()('wp.components.Theme: ' + error) : 0; 71593 } 71594 } 71595 } 71596 function generateAccentDependentColors(accent) { 71597 if (!accent) { 71598 return {}; 71599 } 71600 return { 71601 accent, 71602 accentDarker10: w(accent).darken(0.1).toHex(), 71603 accentDarker20: w(accent).darken(0.2).toHex(), 71604 accentInverted: getForegroundForColor(accent) 71605 }; 71606 } 71607 function generateBackgroundDependentColors(background) { 71608 if (!background) { 71609 return {}; 71610 } 71611 const foreground = getForegroundForColor(background); 71612 return { 71613 background, 71614 foreground, 71615 foregroundInverted: getForegroundForColor(foreground), 71616 gray: generateShades(background, foreground) 71617 }; 71618 } 71619 function getForegroundForColor(color) { 71620 return w(color).isDark() ? COLORS.white : COLORS.gray[900]; 71621 } 71622 function generateShades(background, foreground) { 71623 // How much darkness you need to add to #fff to get the COLORS.gray[n] color 71624 const SHADES = { 71625 100: 0.06, 71626 200: 0.121, 71627 300: 0.132, 71628 400: 0.2, 71629 600: 0.42, 71630 700: 0.543, 71631 800: 0.821 71632 }; 71633 71634 // Darkness of COLORS.gray[ 900 ], relative to #fff 71635 const limit = 0.884; 71636 const direction = w(background).isDark() ? 'lighten' : 'darken'; 71637 71638 // Lightness delta between the background and foreground colors 71639 const range = Math.abs(w(background).toHsl().l - w(foreground).toHsl().l) / 100; 71640 const result = {}; 71641 Object.entries(SHADES).forEach(([key, value]) => { 71642 result[parseInt(key)] = w(background)[direction](value / limit * range).toHex(); 71643 }); 71644 return result; 71645 } 71646 71647 ;// ./node_modules/@wordpress/components/build-module/theme/index.js 71648 /** 71649 * WordPress dependencies 71650 */ 71651 71652 71653 /** 71654 * Internal dependencies 71655 */ 71656 71657 71658 71659 71660 71661 /** 71662 * `Theme` allows defining theme variables for components in the `@wordpress/components` package. 71663 * 71664 * Multiple `Theme` components can be nested in order to override specific theme variables. 71665 * 71666 * 71667 * ```jsx 71668 * const Example = () => { 71669 * return ( 71670 * <Theme accent="red"> 71671 * <Button variant="primary">I'm red</Button> 71672 * <Theme accent="blue"> 71673 * <Button variant="primary">I'm blue</Button> 71674 * </Theme> 71675 * </Theme> 71676 * ); 71677 * }; 71678 * ``` 71679 */ 71680 71681 function Theme({ 71682 accent, 71683 background, 71684 className, 71685 ...props 71686 }) { 71687 const cx = useCx(); 71688 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(...colorVariables(generateThemeVariables({ 71689 accent, 71690 background 71691 })), className), [accent, background, className, cx]); 71692 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(theme_styles_Wrapper, { 71693 className: classes, 71694 ...props 71695 }); 71696 } 71697 /* harmony default export */ const theme = (Theme); 71698 71699 ;// ./node_modules/@wordpress/components/build-module/tabs/context.js 71700 /** 71701 * WordPress dependencies 71702 */ 71703 71704 71705 /** 71706 * Internal dependencies 71707 */ 71708 71709 const TabsContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 71710 const useTabsContext = () => (0,external_wp_element_namespaceObject.useContext)(TabsContext); 71711 71712 ;// ./node_modules/@wordpress/components/build-module/tabs/styles.js 71713 71714 function tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 71715 /** 71716 * External dependencies 71717 */ 71718 71719 71720 71721 /** 71722 * Internal dependencies 71723 */ 71724 71725 71726 71727 const StyledTabList = /*#__PURE__*/emotion_styled_base_browser_esm(TabList, true ? { 71728 target: "enfox0g4" 71729 } : 0)("display:flex;align-items:stretch;overflow-x:auto;&[aria-orientation='vertical']{flex-direction:column;}:where( [aria-orientation='horizontal'] ){width:fit-content;}--direction-factor:1;--direction-start:left;--direction-end:right;--selected-start:var( --selected-left, 0 );&:dir( rtl ){--direction-factor:-1;--direction-start:right;--direction-end:left;--selected-start:var( --selected-right, 0 );}@media not ( prefers-reduced-motion ){&[data-indicator-animated]::before{transition-property:transform,border-radius,border-block;transition-duration:0.2s;transition-timing-function:ease-out;}}position:relative;&::before{content:'';position:absolute;pointer-events:none;transform-origin:var( --direction-start ) top;outline:2px solid transparent;outline-offset:-1px;}--antialiasing-factor:100;&[aria-orientation='horizontal']{--fade-width:4rem;--fade-gradient-base:transparent 0%,black var( --fade-width );--fade-gradient-composed:var( --fade-gradient-base ),black 60%,transparent 50%;&.is-overflowing-first{mask-image:linear-gradient(\n\t\t\t\tto var( --direction-end ),\n\t\t\t\tvar( --fade-gradient-base )\n\t\t\t);}&.is-overflowing-last{mask-image:linear-gradient(\n\t\t\t\tto var( --direction-start ),\n\t\t\t\tvar( --fade-gradient-base )\n\t\t\t);}&.is-overflowing-first.is-overflowing-last{mask-image:linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\tvar( --fade-gradient-composed )\n\t\t\t\t),linear-gradient( to left, var( --fade-gradient-composed ) );}&::before{bottom:0;height:0;width:calc( var( --antialiasing-factor ) * 1px );transform:translateX(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --selected-start ) * var( --direction-factor ) *\n\t\t\t\t\t\t\t1px\n\t\t\t\t\t)\n\t\t\t\t) scaleX(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --selected-width, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t\t);border-bottom:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}}&[aria-orientation='vertical']{&::before{border-radius:", config_values.radiusSmall, "/calc(\n\t\t\t\t\t", config_values.radiusSmall, " /\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tvar( --selected-height, 0 ) /\n\t\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t\t)\n\t\t\t\t);top:0;left:0;width:100%;height:calc( var( --antialiasing-factor ) * 1px );transform:translateY( calc( var( --selected-top, 0 ) * 1px ) ) scaleY(\n\t\t\t\t\tcalc(\n\t\t\t\t\t\tvar( --selected-height, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t\t);background-color:color-mix(\n\t\t\t\tin srgb,\n\t\t\t\t", COLORS.theme.accent, ",\n\t\t\t\ttransparent 96%\n\t\t\t);}&[data-select-on-move='true']:has(\n\t\t\t\t:is( :focus-visible, [data-focus-visible] )\n\t\t\t)::before{box-sizing:border-box;border:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";border-block-width:calc(\n\t\t\t\tvar( --wp-admin-border-width-focus, 1px ) /\n\t\t\t\t\t(\n\t\t\t\t\t\tvar( --selected-height, 0 ) /\n\t\t\t\t\t\t\tvar( --antialiasing-factor )\n\t\t\t\t\t)\n\t\t\t);}}" + ( true ? "" : 0)); 71730 const styles_Tab = /*#__PURE__*/emotion_styled_base_browser_esm(Tab, true ? { 71731 target: "enfox0g3" 71732 } : 0)("&{border-radius:0;background:transparent;border:none;box-shadow:none;flex:1 0 auto;white-space:nowrap;display:flex;align-items:center;cursor:pointer;line-height:1.2;font-weight:400;color:", COLORS.theme.foreground, ";position:relative;&[aria-disabled='true']{cursor:default;color:", COLORS.ui.textDisabled, ";}&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ){color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){box-shadow:none;outline:none;}&::after{position:absolute;pointer-events:none;outline:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";border-radius:", config_values.radiusSmall, ";opacity:0;@media not ( prefers-reduced-motion ){transition:opacity 0.1s linear;}}&[data-focus-visible]::after{opacity:1;}}[aria-orientation='horizontal'] &{padding-inline:", space(4), ";height:", space(12), ";scroll-margin:24px;&::after{content:'';inset:", space(3), ";}}[aria-orientation='vertical'] &{padding:", space(2), " ", space(3), ";min-height:", space(10), ";&[aria-selected='true']{color:", COLORS.theme.accent, ";fill:currentColor;}}[aria-orientation='vertical'][data-select-on-move='false'] &::after{content:'';inset:var( --wp-admin-border-width-focus );}" + ( true ? "" : 0)); 71733 const TabChildren = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { 71734 target: "enfox0g2" 71735 } : 0)( true ? { 71736 name: "9at4z3", 71737 styles: "flex-grow:1;display:flex;align-items:center;[aria-orientation='horizontal'] &{justify-content:center;}[aria-orientation='vertical'] &{justify-content:start;}" 71738 } : 0); 71739 const TabChevron = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon, true ? { 71740 target: "enfox0g1" 71741 } : 0)("flex-shrink:0;margin-inline-end:", space(-1), ";[aria-orientation='horizontal'] &{display:none;}opacity:0;[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) &{opacity:1;}@media not ( prefers-reduced-motion ){[data-select-on-move='true'] [role='tab']:is( [aria-selected='true'], ) &{transition:opacity 0.15s 0.15s linear;}}&:dir( rtl ){rotate:180deg;}" + ( true ? "" : 0)); 71742 const styles_TabPanel = /*#__PURE__*/emotion_styled_base_browser_esm(TabPanel, true ? { 71743 target: "enfox0g0" 71744 } : 0)("&:focus{box-shadow:none;outline:none;}&[data-focus-visible]{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0)); 71745 71746 ;// ./node_modules/@wordpress/components/build-module/tabs/tab.js 71747 /** 71748 * WordPress dependencies 71749 */ 71750 71751 71752 71753 /** 71754 * Internal dependencies 71755 */ 71756 71757 71758 71759 71760 71761 71762 const tab_Tab = (0,external_wp_element_namespaceObject.forwardRef)(function Tab({ 71763 children, 71764 tabId, 71765 disabled, 71766 render, 71767 ...otherProps 71768 }, ref) { 71769 var _useTabsContext; 71770 const { 71771 store, 71772 instanceId 71773 } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {}; 71774 if (!store) { 71775 true ? external_wp_warning_default()('`Tabs.Tab` must be wrapped in a `Tabs` component.') : 0; 71776 return null; 71777 } 71778 const instancedTabId = `$instanceId}-$tabId}`; 71779 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Tab, { 71780 ref: ref, 71781 store: store, 71782 id: instancedTabId, 71783 disabled: disabled, 71784 render: render, 71785 ...otherProps, 71786 children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabChildren, { 71787 children: children 71788 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabChevron, { 71789 icon: chevron_right 71790 })] 71791 }); 71792 }); 71793 71794 ;// ./node_modules/@wordpress/components/build-module/tabs/use-track-overflow.js 71795 /* eslint-disable jsdoc/require-param */ 71796 /** 71797 * WordPress dependencies 71798 */ 71799 71800 71801 71802 /** 71803 * Tracks if an element contains overflow and on which end by tracking the 71804 * first and last child elements with an `IntersectionObserver` in relation 71805 * to the parent element. 71806 * 71807 * Note that the returned value will only indicate whether the first or last 71808 * element is currently "going out of bounds" but not whether it happens on 71809 * the X or Y axis. 71810 */ 71811 function useTrackOverflow(parent, children) { 71812 const [first, setFirst] = (0,external_wp_element_namespaceObject.useState)(false); 71813 const [last, setLast] = (0,external_wp_element_namespaceObject.useState)(false); 71814 const [observer, setObserver] = (0,external_wp_element_namespaceObject.useState)(); 71815 const callback = (0,external_wp_compose_namespaceObject.useEvent)(entries => { 71816 for (const entry of entries) { 71817 if (entry.target === children.first) { 71818 setFirst(!entry.isIntersecting); 71819 } 71820 if (entry.target === children.last) { 71821 setLast(!entry.isIntersecting); 71822 } 71823 } 71824 }); 71825 (0,external_wp_element_namespaceObject.useEffect)(() => { 71826 if (!parent || !window.IntersectionObserver) { 71827 return; 71828 } 71829 const newObserver = new IntersectionObserver(callback, { 71830 root: parent, 71831 threshold: 0.9 71832 }); 71833 setObserver(newObserver); 71834 return () => newObserver.disconnect(); 71835 }, [callback, parent]); 71836 (0,external_wp_element_namespaceObject.useEffect)(() => { 71837 if (!observer) { 71838 return; 71839 } 71840 if (children.first) { 71841 observer.observe(children.first); 71842 } 71843 if (children.last) { 71844 observer.observe(children.last); 71845 } 71846 return () => { 71847 if (children.first) { 71848 observer.unobserve(children.first); 71849 } 71850 if (children.last) { 71851 observer.unobserve(children.last); 71852 } 71853 }; 71854 }, [children.first, children.last, observer]); 71855 return { 71856 first, 71857 last 71858 }; 71859 } 71860 /* eslint-enable jsdoc/require-param */ 71861 71862 ;// ./node_modules/@wordpress/components/build-module/tabs/tablist.js 71863 /** 71864 * External dependencies 71865 */ 71866 71867 71868 71869 /** 71870 * WordPress dependencies 71871 */ 71872 71873 71874 71875 71876 /** 71877 * Internal dependencies 71878 */ 71879 71880 71881 71882 71883 71884 71885 71886 const DEFAULT_SCROLL_MARGIN = 24; 71887 71888 /** 71889 * Scrolls a given parent element so that a given rect is visible. 71890 * 71891 * The scroll is updated initially and whenever the rect changes. 71892 */ 71893 function useScrollRectIntoView(parent, rect, { 71894 margin = DEFAULT_SCROLL_MARGIN 71895 } = {}) { 71896 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 71897 if (!parent || !rect) { 71898 return; 71899 } 71900 const { 71901 scrollLeft: parentScroll 71902 } = parent; 71903 const parentWidth = parent.getBoundingClientRect().width; 71904 const { 71905 left: childLeft, 71906 width: childWidth 71907 } = rect; 71908 const parentRightEdge = parentScroll + parentWidth; 71909 const childRightEdge = childLeft + childWidth; 71910 const rightOverflow = childRightEdge + margin - parentRightEdge; 71911 const leftOverflow = parentScroll - (childLeft - margin); 71912 let scrollLeft = null; 71913 if (leftOverflow > 0) { 71914 scrollLeft = parentScroll - leftOverflow; 71915 } else if (rightOverflow > 0) { 71916 scrollLeft = parentScroll + rightOverflow; 71917 } 71918 if (scrollLeft !== null) { 71919 /** 71920 * The optional chaining is used here to avoid unit test failures. 71921 * It can be removed when JSDOM supports `Element` scroll methods. 71922 * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096 71923 */ 71924 parent.scroll?.({ 71925 left: scrollLeft 71926 }); 71927 } 71928 }, [margin, parent, rect]); 71929 } 71930 const tablist_TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabList({ 71931 children, 71932 ...otherProps 71933 }, ref) { 71934 var _useTabsContext; 71935 const { 71936 store 71937 } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {}; 71938 const selectedId = useStoreState(store, 'selectedId'); 71939 const activeId = useStoreState(store, 'activeId'); 71940 const selectOnMove = useStoreState(store, 'selectOnMove'); 71941 const items = useStoreState(store, 'items'); 71942 const [parent, setParent] = (0,external_wp_element_namespaceObject.useState)(); 71943 const refs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setParent]); 71944 const selectedItem = store?.item(selectedId); 71945 const renderedItems = useStoreState(store, 'renderedItems'); 71946 const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1; 71947 // Use selectedItemIndex as a dependency to force recalculation when the 71948 // selected item index changes (elements are swapped / added / removed). 71949 const selectedRect = useTrackElementOffsetRect(selectedItem?.element, [selectedItemIndex]); 71950 71951 // Track overflow to show scroll hints. 71952 const overflow = useTrackOverflow(parent, { 71953 first: items?.at(0)?.element, 71954 last: items?.at(-1)?.element 71955 }); 71956 71957 // Size, position, and animate the indicator. 71958 useAnimatedOffsetRect(parent, selectedRect, { 71959 prefix: 'selected', 71960 dataAttribute: 'indicator-animated', 71961 transitionEndFilter: event => event.pseudoElement === '::before', 71962 roundRect: true 71963 }); 71964 71965 // Make sure selected tab is scrolled into view. 71966 useScrollRectIntoView(parent, selectedRect); 71967 const onBlur = () => { 71968 if (!selectOnMove) { 71969 return; 71970 } 71971 71972 // When automatic tab selection is on, make sure that the active tab is up 71973 // to date with the selected tab when leaving the tablist. This makes sure 71974 // that the selected tab will receive keyboard focus when tabbing back into 71975 // the tablist. 71976 if (selectedId !== activeId) { 71977 store?.setActiveId(selectedId); 71978 } 71979 }; 71980 if (!store) { 71981 true ? external_wp_warning_default()('`Tabs.TabList` must be wrapped in a `Tabs` component.') : 0; 71982 return null; 71983 } 71984 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledTabList, { 71985 ref: refs, 71986 store: store, 71987 render: props => { 71988 var _props$tabIndex; 71989 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { 71990 ...props, 71991 // Fallback to -1 to prevent browsers from making the tablist 71992 // tabbable when it is a scrolling container. 71993 tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1 71994 }); 71995 }, 71996 onBlur: onBlur, 71997 "data-select-on-move": selectOnMove ? 'true' : 'false', 71998 ...otherProps, 71999 className: dist_clsx(overflow.first && 'is-overflowing-first', overflow.last && 'is-overflowing-last', otherProps.className), 72000 children: children 72001 }); 72002 }); 72003 72004 ;// ./node_modules/@wordpress/components/build-module/tabs/tabpanel.js 72005 /** 72006 * External dependencies 72007 */ 72008 72009 72010 /** 72011 * WordPress dependencies 72012 */ 72013 72014 72015 /** 72016 * Internal dependencies 72017 */ 72018 72019 72020 72021 72022 72023 const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(function TabPanel({ 72024 children, 72025 tabId, 72026 focusable = true, 72027 ...otherProps 72028 }, ref) { 72029 const context = useTabsContext(); 72030 const selectedId = useStoreState(context?.store, 'selectedId'); 72031 if (!context) { 72032 true ? external_wp_warning_default()('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : 0; 72033 return null; 72034 } 72035 const { 72036 store, 72037 instanceId 72038 } = context; 72039 const instancedTabId = `$instanceId}-$tabId}`; 72040 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_TabPanel, { 72041 ref: ref, 72042 store: store 72043 // For TabPanel, the id passed here is the id attribute of the DOM 72044 // element. 72045 // `tabId` is the id of the tab that controls this panel. 72046 , 72047 id: `$instancedTabId}-view`, 72048 tabId: instancedTabId, 72049 focusable: focusable, 72050 ...otherProps, 72051 children: selectedId === instancedTabId && children 72052 }); 72053 }); 72054 72055 ;// ./node_modules/@wordpress/components/build-module/tabs/index.js 72056 /** 72057 * External dependencies 72058 */ 72059 72060 72061 /** 72062 * WordPress dependencies 72063 */ 72064 72065 72066 72067 72068 /** 72069 * Internal dependencies 72070 */ 72071 72072 72073 72074 72075 72076 72077 function externalToInternalTabId(externalId, instanceId) { 72078 return externalId && `$instanceId}-$externalId}`; 72079 } 72080 function internalToExternalTabId(internalId, instanceId) { 72081 return typeof internalId === 'string' ? internalId.replace(`$instanceId}-`, '') : internalId; 72082 } 72083 72084 /** 72085 * Tabs is a collection of React components that combine to render 72086 * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). 72087 * 72088 * Tabs organizes content across different screens, data sets, and interactions. 72089 * It has two sections: a list of tabs, and the view to show when a tab is chosen. 72090 * 72091 * `Tabs` itself is a wrapper component and context provider. 72092 * It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component. 72093 */ 72094 const Tabs = Object.assign(function Tabs({ 72095 selectOnMove = true, 72096 defaultTabId, 72097 orientation = 'horizontal', 72098 onSelect, 72099 children, 72100 selectedTabId, 72101 activeTabId, 72102 defaultActiveTabId, 72103 onActiveTabIdChange 72104 }) { 72105 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Tabs, 'tabs'); 72106 const store = useTabStore({ 72107 selectOnMove, 72108 orientation, 72109 defaultSelectedId: externalToInternalTabId(defaultTabId, instanceId), 72110 setSelectedId: newSelectedId => { 72111 onSelect?.(internalToExternalTabId(newSelectedId, instanceId)); 72112 }, 72113 selectedId: externalToInternalTabId(selectedTabId, instanceId), 72114 defaultActiveId: externalToInternalTabId(defaultActiveTabId, instanceId), 72115 setActiveId: newActiveId => { 72116 onActiveTabIdChange?.(internalToExternalTabId(newActiveId, instanceId)); 72117 }, 72118 activeId: externalToInternalTabId(activeTabId, instanceId), 72119 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 72120 }); 72121 const { 72122 items, 72123 activeId 72124 } = useStoreState(store); 72125 const { 72126 setActiveId 72127 } = store; 72128 (0,external_wp_element_namespaceObject.useEffect)(() => { 72129 requestAnimationFrame(() => { 72130 const focusedElement = items?.[0]?.element?.ownerDocument.activeElement; 72131 if (!focusedElement || !items.some(item => focusedElement === item.element)) { 72132 return; // Return early if no tabs are focused. 72133 } 72134 72135 // If, after ariakit re-computes the active tab, that tab doesn't match 72136 // the currently focused tab, then we force an update to ariakit to avoid 72137 // any mismatches, especially when navigating to previous/next tab with 72138 // arrow keys. 72139 if (activeId !== focusedElement.id) { 72140 setActiveId(focusedElement.id); 72141 } 72142 }); 72143 }, [activeId, items, setActiveId]); 72144 const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 72145 store, 72146 instanceId 72147 }), [store, instanceId]); 72148 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabsContext.Provider, { 72149 value: contextValue, 72150 children: children 72151 }); 72152 }, { 72153 /** 72154 * Renders a single tab. 72155 * 72156 * The currently active tab receives default styling that can be 72157 * overridden with CSS targeting `[aria-selected="true"]`. 72158 */ 72159 Tab: Object.assign(tab_Tab, { 72160 displayName: 'Tabs.Tab' 72161 }), 72162 /** 72163 * A wrapper component for the `Tab` components. 72164 * 72165 * It is responsible for rendering the list of tabs. 72166 */ 72167 TabList: Object.assign(tablist_TabList, { 72168 displayName: 'Tabs.TabList' 72169 }), 72170 /** 72171 * Renders the content to display for a single tab once that tab is selected. 72172 */ 72173 TabPanel: Object.assign(tabpanel_TabPanel, { 72174 displayName: 'Tabs.TabPanel' 72175 }), 72176 Context: Object.assign(TabsContext, { 72177 displayName: 'Tabs.Context' 72178 }) 72179 }); 72180 72181 ;// external ["wp","privateApis"] 72182 const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"]; 72183 ;// ./node_modules/@wordpress/components/build-module/lock-unlock.js 72184 /** 72185 * WordPress dependencies 72186 */ 72187 72188 const { 72189 lock, 72190 unlock 72191 } = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', '@wordpress/components'); 72192 72193 ;// ./node_modules/@wordpress/icons/build-module/library/info.js 72194 /** 72195 * WordPress dependencies 72196 */ 72197 72198 72199 const info = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 72200 viewBox: "0 0 24 24", 72201 xmlns: "http://www.w3.org/2000/svg", 72202 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 72203 fillRule: "evenodd", 72204 clipRule: "evenodd", 72205 d: "M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm.75 4v1.5h-1.5V8h1.5Zm0 8v-5h-1.5v5h1.5Z" 72206 }) 72207 }); 72208 /* harmony default export */ const library_info = (info); 72209 72210 ;// ./node_modules/@wordpress/icons/build-module/library/published.js 72211 /** 72212 * WordPress dependencies 72213 */ 72214 72215 72216 const published = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 72217 xmlns: "http://www.w3.org/2000/svg", 72218 viewBox: "0 0 24 24", 72219 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 72220 fillRule: "evenodd", 72221 clipRule: "evenodd", 72222 d: "M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm11.53-1.47-1.06-1.06L11 12.94l-1.47-1.47-1.06 1.06L11 15.06l4.53-4.53Z" 72223 }) 72224 }); 72225 /* harmony default export */ const library_published = (published); 72226 72227 ;// ./node_modules/@wordpress/icons/build-module/library/caution.js 72228 /** 72229 * WordPress dependencies 72230 */ 72231 72232 72233 const caution = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 72234 viewBox: "0 0 24 24", 72235 xmlns: "http://www.w3.org/2000/svg", 72236 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 72237 fillRule: "evenodd", 72238 clipRule: "evenodd", 72239 d: "M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 12v-1.5h1.5V16h-1.5Zm0-8v5h1.5V8h-1.5Z" 72240 }) 72241 }); 72242 /* harmony default export */ const library_caution = (caution); 72243 72244 ;// ./node_modules/@wordpress/icons/build-module/library/error.js 72245 /** 72246 * WordPress dependencies 72247 */ 72248 72249 72250 const error = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { 72251 viewBox: "0 0 24 24", 72252 xmlns: "http://www.w3.org/2000/svg", 72253 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { 72254 fillRule: "evenodd", 72255 clipRule: "evenodd", 72256 d: "M12.218 5.377a.25.25 0 0 0-.436 0l-7.29 12.96a.25.25 0 0 0 .218.373h14.58a.25.25 0 0 0 .218-.372l-7.29-12.96Zm-1.743-.735c.669-1.19 2.381-1.19 3.05 0l7.29 12.96a1.75 1.75 0 0 1-1.525 2.608H4.71a1.75 1.75 0 0 1-1.525-2.608l7.29-12.96ZM12.75 17.46h-1.5v-1.5h1.5v1.5Zm-1.5-3h1.5v-5h-1.5v5Z" 72257 }) 72258 }); 72259 /* harmony default export */ const library_error = (error); 72260 72261 ;// ./node_modules/@wordpress/components/build-module/badge/index.js 72262 /** 72263 * External dependencies 72264 */ 72265 72266 72267 /** 72268 * WordPress dependencies 72269 */ 72270 72271 72272 /** 72273 * Internal dependencies 72274 */ 72275 72276 72277 72278 /** 72279 * Returns an icon based on the badge context. 72280 * 72281 * @return The corresponding icon for the provided context. 72282 */ 72283 72284 function contextBasedIcon(intent = 'default') { 72285 switch (intent) { 72286 case 'info': 72287 return library_info; 72288 case 'success': 72289 return library_published; 72290 case 'warning': 72291 return library_caution; 72292 case 'error': 72293 return library_error; 72294 default: 72295 return null; 72296 } 72297 } 72298 function Badge({ 72299 className, 72300 intent = 'default', 72301 children, 72302 ...props 72303 }) { 72304 const icon = contextBasedIcon(intent); 72305 const hasIcon = !!icon; 72306 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { 72307 className: dist_clsx('components-badge', className, { 72308 [`is-$intent}`]: intent, 72309 'has-icon': hasIcon 72310 }), 72311 ...props, 72312 children: [hasIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { 72313 icon: icon, 72314 size: 16, 72315 fill: "currentColor", 72316 className: "components-badge__icon" 72317 }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { 72318 className: "components-badge__content", 72319 children: children 72320 })] 72321 }); 72322 } 72323 /* harmony default export */ const badge = (Badge); 72324 72325 ;// ./node_modules/@wordpress/components/build-module/private-apis.js 72326 /** 72327 * Internal dependencies 72328 */ 72329 72330 72331 72332 72333 72334 72335 72336 72337 const privateApis = {}; 72338 lock(privateApis, { 72339 __experimentalPopoverLegacyPositionToPlacement: positionToPlacement, 72340 ComponentsContext: ComponentsContext, 72341 Tabs: Tabs, 72342 Theme: theme, 72343 Menu: menu_Menu, 72344 kebabCase: kebabCase, 72345 Badge: badge 72346 }); 72347 72348 ;// ./node_modules/@wordpress/components/build-module/index.js 72349 // Primitives. 72350 72351 72352 // Components. 72353 72354 72355 72356 72357 72358 72359 72360 72361 72362 72363 72364 72365 72366 72367 72368 72369 72370 72371 72372 72373 72374 72375 72376 72377 72378 72379 72380 72381 72382 72383 72384 72385 72386 72387 72388 72389 72390 72391 72392 72393 72394 72395 72396 72397 72398 72399 72400 72401 72402 72403 72404 72405 72406 72407 72408 72409 72410 72411 72412 72413 72414 72415 72416 72417 72418 72419 72420 72421 72422 72423 72424 72425 72426 72427 72428 72429 72430 72431 72432 72433 72434 72435 72436 72437 72438 72439 72440 72441 72442 72443 72444 72445 72446 72447 72448 72449 72450 72451 72452 72453 72454 72455 72456 72457 72458 72459 72460 72461 72462 72463 72464 72465 72466 72467 72468 72469 72470 72471 72472 72473 72474 // Higher-Order Components. 72475 72476 72477 72478 72479 72480 72481 72482 72483 72484 // Private APIs. 72485 72486 72487 })(); 72488 72489 (window.wp = window.wp || {}).components = __webpack_exports__; 72490 /******/ })() 72491 ;
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Thu May 1 08:20:01 2025 | Cross-referenced by PHPXref |