@mdn/fred 1.3.2 → 1.4.0

package/out/static/client/{styles-content-section.e0bbadd0c4bc857d.css.map → styles-content-section.2f0727a030110fc9.css.map}

@@ -1 +1 @@
-{"version":3,"file":"styles-content-section.e0bbadd0c4bc857d.css","sources":["webpack://@mdn/fred/./components/code-example/common.css","webpack://@mdn/fred/./components/prev-next/index.css","webpack://@mdn/fred/./components/notecard/index.css","webpack://@mdn/fred/./components/code-example/prism.css","webpack://@mdn/fred/./components/content-section/server.css"],"sourcesContent":[".code-example {\n  --border: 1px solid var(--color-border-primary);\n  overflow: hidden;\n  border: var(--border);\n  border-radius: 0.25rem;\n}.code-example .example-header {\n    display: flex;\n\n    align-items: center;\n\n    min-height: 3.1rem;\n\n    padding: 0.5rem 1rem;\n\n    line-height: var(--font-line-ui);\n\n    border-bottom: var(--border);\n  }:is(.code-example .example-header) .language-name {\n      text-transform: uppercase;\n    }.code-example pre {\n    display: flex;\n\n    margin: 0;\n\n    white-space: pre-wrap;\n\n    background-color: var(--color-background-secondary);\n  }:is(.code-example pre) code {\n      flex-grow: 1;\n      flex-shrink: 1;\n\n      padding: 1rem;\n\n      overflow: auto;\n\n      font-family: var(--font-family-code);\n\n      background-color: transparent;\n    }.hidden:is(.code-example pre),[class*=\"interactive-example\"]:is(.code-example pre) {\n      display: none;\n    }:is(.example-good:is(.code-example pre),.example-bad:is(.code-example pre))::after {\n        display: inline-block;\n\n        flex-shrink: 0;\n\n        width: 1.24rem;\n        height: 1.24rem;\n\n        margin: 1.255rem 1rem;\n\n        content: \"\";\n\n        -webkit-mask-size: cover;\n\n                mask-size: cover;\n      }.example-good:is(.code-example pre) {\n      background-color: var(--color-background-green);\n    }.example-good:is(.code-example pre)::after {\n        background-color: var(--color-text-green);\n        -webkit-mask-image: url(\"../icon/circle-check.svg\");\n                mask-image: url(\"../icon/circle-check.svg\");\n      }.example-bad:is(.code-example pre) {\n      background-color: var(--color-background-red);\n    }.example-bad:is(.code-example pre)::after {\n        background-color: var(--color-text-red);\n        -webkit-mask-image: url(\"../icon/circle-x.svg\");\n                mask-image: url(\"../icon/circle-x.svg\");\n      }.code-example:has(.hidden,[class*=\"interactive-example\"]) {\n    /* TODO: we might want to fix this in rari */\n    display: none;\n  }.code-example iframe,.code-example mdn-play-runner {\n    box-sizing: content-box;\n    display: block;\n\n    padding: 1rem;\n\n    border: none;\n  }\n","/* Tutorial nav. */\n.prev-next {\n  display: flex;\n\n  flex-wrap: nowrap;\n\n  gap: 1rem;\n  justify-content: space-between;\n\n  width: 100%;\n\n  padding: 0.5rem;\n  margin: 0;\n\n  list-style: none;\n\n  border: 1px solid var(--color-border-primary);\n  border-width: 1px 0;\n}\n.prev-next a {\n    color: var(--color-link-normal) !important;\n    text-wrap: balance;\n  }\n:is(.prev-next a):visited {\n      color: var(--color-link-visited) !important;\n    }\n@media (width <= 426px) {\n.prev-next {\n    display: grid;\n    grid-template-areas:\n      \"title title\"\n      \"prev next\";\n}\n\n    .prev-next li.menu {\n      grid-area: title;\n      justify-self: center;\n    }\n\n    .prev-next li.prev {\n      grid-area: prev;\n      justify-self: start;\n    }\n\n    .prev-next li.next {\n      grid-area: next;\n      justify-self: end;\n    }\n  }\n.prev-next .prev a,.prev-next .next a {\n    display: flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n.prev-next li {\n    display: flex;\n\n    flex-wrap: nowrap;\n\n    place-items: center;\n\n    background: none;\n  }\n:is(.prev-next li) .button {\n      color: inherit;\n      background-color: inherit;\n      border: inherit;\n    }\n:is(:is(.prev-next li) .button):hover {\n        -webkit-text-decoration: underline;\n        text-decoration: underline;\n      }\n.prev:is(.prev-next li) a::before,.next:is(.prev-next li) a::after {\n      display: inline-block;\n\n      width: 1em;\n      height: 1em;\n\n      vertical-align: middle;\n\n      content: \"\";\n\n      background-color: currentcolor;\n\n      -webkit-mask-size: cover;\n\n              mask-size: cover;\n    }\n.prev:is(.prev-next li) {\n      margin-right: auto;\n    }\n.prev:is(.prev-next li) a::before {\n        -webkit-mask-image: url(\"../icon/arrow-left.svg\");\n                mask-image: url(\"../icon/arrow-left.svg\");\n      }\n.prev:is(.prev-next li) ~ .menu:is(.prev-next li) {\n      margin-right: auto;\n      margin-left: auto;\n      text-align: center;\n    }\n.next:is(.prev-next li) {\n      margin-left: auto;\n    }\n.next:is(.prev-next li) a::after {\n        -webkit-mask-image: url(\"../icon/arrow-right.svg\");\n                mask-image: url(\"../icon/arrow-right.svg\");\n      }\n",".notecard,\n.callout {\n  position: relative;\n\n  padding-block: 1px;\n  padding-inline: 1em;\n  padding-inline-start: 3em;\n  margin-block: 1em;\n\n  color: var(--color-text-primary);\n\n  background-color: var(--color-background-secondary);\n  border-inline-start: 2px solid\n    var(--accent-color, var(--color-text-secondary));\n  border-radius: 0.25em;\n}.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.experimental:is(.notecard,.callout) {\n    background-color: var(--color-background-blue);\n    --accent-color: var(--color-text-blue);\n  }.warning:is(.notecard,.callout),.deprecated:is(.notecard,.callout),.nonstandard:is(.notecard,.callout) {\n    background-color: var(--color-background-red);\n    --accent-color: var(--color-text-red);\n  }.tip:is(.notecard,.callout) {\n    background-color: var(--color-background-green);\n    --accent-color: var(--color-text-green);\n  }:is(.deprecated:is(.notecard,.callout),.experimental:is(.notecard,.callout),.nonstandard:is(.notecard,.callout),.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.tip:is(.notecard,.callout),.warning:is(.notecard,.callout),.worker:is(.notecard,.callout))::before {\n      position: absolute;\n      top: 1.45em;\n      left: 1em;\n\n      display: block;\n\n      width: 1em;\n      height: 1em;\n\n      content: \"\";\n\n      background-color: var(--accent-color, var(--color-text-secondary));\n\n      -webkit-mask-size: cover;\n\n              mask-size: cover;\n    }.deprecated:is(.notecard,.callout)::before {\n    /* e.g. Window: blur() method */\n    -webkit-mask-image: url(\"../icon/trash-2.svg\");\n            mask-image: url(\"../icon/trash-2.svg\");\n  }.experimental:is(.notecard,.callout)::before {\n    /* e.g. Barcode Detection API */\n    -webkit-mask-image: url(\"../icon/flask-conical.svg\");\n            mask-image: url(\"../icon/flask-conical.svg\");\n  }.nonstandard:is(.notecard,.callout)::before {\n    /* e.g. Document: caretRangeFromPoint() method */\n    -webkit-mask-image: url(\"../icon/triangle-alert.svg\");\n            mask-image: url(\"../icon/triangle-alert.svg\");\n  }.note:is(.notecard,.callout)::before {\n    /* e.g. Barcode Detection API */\n    -webkit-mask-image: url(\"../icon/info.svg\");\n            mask-image: url(\"../icon/info.svg\");\n  }.secure:is(.notecard,.callout)::before {\n    /* e.g. Barcode Detection API */\n    -webkit-mask-image: url(\"../icon/lock.svg\");\n            mask-image: url(\"../icon/lock.svg\");\n  }.tip:is(.notecard,.callout)::before {\n    /* (Not used in content yet) */\n    -webkit-mask-image: url(\"../icon/lightbulb.svg\");\n            mask-image: url(\"../icon/lightbulb.svg\");\n  }.warning:is(.notecard,.callout)::before {\n    /* e.g. Navigator: scheduling property */\n    -webkit-mask-image: url(\"../icon/triangle-alert.svg\");\n            mask-image: url(\"../icon/triangle-alert.svg\");\n  }.worker:is(.notecard,.callout)::before {\n    /* e.g. Worker: Worker() constructor (needs rari change) */\n    -webkit-mask-image: url(\"../icon/cog.svg\");\n            mask-image: url(\"../icon/cog.svg\");\n  }\n","\n  :is(.code-example,.css-formal-syntax) .token.comment,:is(.code-example,.css-formal-syntax) .token.prolog,:is(.code-example,.css-formal-syntax) .token.doctype,:is(.code-example,.css-formal-syntax) .token.cdata {\n    --csstools-light-dark-toggle-360cf513-0: var(--csstools-color-scheme--light) #b3b3b3;\n    color: var(--csstools-light-dark-toggle-360cf513-0, #51565d);\n    color: light-dark(#51565d, #b3b3b3);\n  }:is(.code-example,.css-formal-syntax) .token.punctuation {\n    --csstools-light-dark-toggle-360cf513-1: var(--csstools-color-scheme--light) #b3b3b3;\n    color: var(--csstools-light-dark-toggle-360cf513-1, #51565d);\n    color: light-dark(#51565d, #b3b3b3);\n  }:is(.code-example,.css-formal-syntax) .token.attr-name,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.inserted,:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.property,:is(.code-example,.css-formal-syntax) .token.class-name,:is(.code-example,.css-formal-syntax) .token.function {\n    --csstools-light-dark-toggle-360cf513-2: var(--csstools-color-scheme--light) #ff97a0;\n    color: var(--csstools-light-dark-toggle-360cf513-2, #d30038);\n    color: light-dark(#d30038, #ff97a0);\n  }:is(.code-example,.css-formal-syntax) .token.atrule,:is(.code-example,.css-formal-syntax) .token.attr-value {\n    --csstools-light-dark-toggle-360cf513-3: var(--csstools-color-scheme--light) #00d061;\n    color: var(--csstools-light-dark-toggle-360cf513-3, #007936);\n    color: light-dark(#007936, #00d061);\n  }:is(.code-example,.css-formal-syntax) .token.keyword {\n    --csstools-light-dark-toggle-360cf513-4: var(--csstools-color-scheme--light) #c1cff1;\n    color: var(--csstools-light-dark-toggle-360cf513-4, #0069c2);\n    color: light-dark(#0069c2, #c1cff1);\n  }:is(.code-example,.css-formal-syntax) .token.tag,:is(.code-example,.css-formal-syntax) .token.char,:is(.code-example,.css-formal-syntax) .token.string,:is(.code-example,.css-formal-syntax) .token.boolean,:is(.code-example,.css-formal-syntax) .token.number,:is(.code-example,.css-formal-syntax) .token.constant,:is(.code-example,.css-formal-syntax) .token.symbol,:is(.code-example,.css-formal-syntax) .token.deleted {\n    --csstools-light-dark-toggle-360cf513-5: var(--csstools-color-scheme--light) #00d061;\n    color: var(--csstools-light-dark-toggle-360cf513-5, #007936);\n    color: light-dark(#007936, #00d061);\n  }:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.template-string > .token.string,:is(.code-example,.css-formal-syntax) .token.inserted {\n    --csstools-light-dark-toggle-360cf513-6: var(--csstools-color-scheme--light) #bea5ff;\n    color: var(--csstools-light-dark-toggle-360cf513-6, #872bff);\n    color: light-dark(#872bff, #bea5ff);\n  }:is(.code-example,.css-formal-syntax) .token.important,:is(.code-example,.css-formal-syntax) .token.bold {\n    font-weight: bold;\n  }:is(.code-example,.css-formal-syntax) .token.italic {\n    font-style: italic;\n  }:is(.code-example,.css-formal-syntax) .token.entity {\n    cursor: help;\n  }\n","@import url(\"../code-example/common.css\");\n@import url(\"../prev-next/index.css\");\n@import url(\"../notecard/index.css\");\n@import url(\"../code-example/prism.css\");\n\n.content-section {\n  line-height: var(--font-line-content);\n}\n\n.content-section :target {\n    scroll-margin-top: var(--sticky-header-height);\n  }\n\n.content-section h1,.content-section h2,.content-section h3,.content-section h4,.content-section h5,.content-section h6 {\n    margin: 1rem 0 0;\n    font-weight: var(--font-weight-normal);\n  }\n\n.content-section h1 {\n    margin-top: 0;\n    font-size: var(--font-size-largest);\n  }\n\n.content-section h2 {\n    font-size: var(--font-size-larger);\n  }\n\n.content-section h3 {\n    font-size: var(--font-size-large);\n  }\n\n.content-section h4 {\n    font-size: var(--font-size-normal);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n.content-section h5,.content-section h6 {\n    font-size: var(--font-size-normal);\n    font-weight: var(--font-weight-bold);\n  }\n\n:is(.content-section a):visited {\n      color: var(--color-link-visited);\n    }\n\n/* Regular links */\n\n:is(.content-section a):not([href^=\"#\"]) {\n      -webkit-text-decoration: underline;\n      text-decoration: underline;\n    }\n\n:is(.content-section a):not([href^=\"#\"]):hover {\n        -webkit-text-decoration: none;\n        text-decoration: none;\n      }\n\n/* Anchor links */\n\n[href^=\"#\"]:is(.content-section a) {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n[href^=\"#\"]:is(.content-section a):hover {\n        -webkit-text-decoration: underline;\n        text-decoration: underline;\n      }\n\n.content-section blockquote {\n    margin-inline: 0;\n    color: var(--color-text-secondary);\n    border-inline-start: 0.25rem solid var(--color-border-primary);\n  }\n\n:is(.content-section blockquote)  > p {\n      padding: 1rem 2rem;\n    }\n\n.content-section pre,.content-section code {\n    font-family: var(--font-family-code);\n    white-space: pre-wrap;\n    background-color: var(--color-background-secondary);\n  }\n\n.content-section pre:not(.code-example pre) {\n    padding: 1rem;\n\n    overflow: auto;\n\n    border: 1px solid var(--color-border-primary);\n    border-radius: 0.25rem;\n  }\n\n.css-formal-syntax:is(.content-section pre:not(.code-example pre)) {\n      margin-bottom: 0;\n\n      text-wrap: wrap;\n\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n.css-formal-syntax:is(.content-section pre:not(.code-example pre))  ~ footer {\n        padding: 0.5rem 1rem;\n        margin-bottom: 1rem;\n\n        border: 1px solid var(--color-border-primary);\n        border-top: 0;\n        border-bottom-right-radius: 0.25rem;\n        border-bottom-left-radius: 0.25rem;\n      }\n\n.content-section code {\n    padding: 0.125em 0.25em;\n    border-radius: 0.25em;\n  }\n\n.content-section img {\n    display: block;\n\n    margin: 2rem auto;\n\n    background-color: var(--color-background-secondary);\n    border: 1px solid var(--color-border-primary);\n    border-radius: 0.25rem;\n  }\n\n.content-section table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n:is(.content-section table) tr {\n      background-color: var(--color-background-primary);\n    }\n\n:is(.content-section table) thead tr,:is(.content-section table) tr:nth-of-type(2n) {\n      background-color: var(--color-background-page);\n    }\n\n:is(.content-section table) th,:is(.content-section table) td {\n      padding: 0.5rem 0.75rem;\n      border: 1px solid var(--color-border-primary);\n    }\n\n:is(.content-section table) th {\n      font-weight: var(--font-weight-normal);\n      text-align: left;\n    }\n\n.properties:is(.content-section table) th,.properties:is(.content-section table) td {\n        border-width: 1px 0;\n      }\n\n.properties:is(.content-section table) th {\n        font-weight: var(--font-weight-bold);\n        background-color: transparent;\n      }\n\n.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result {\n    margin: 1rem 0;\n  }\n\n:is(.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result) + :is(.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result) {\n      margin-top: 1.5rem;\n    }\n\n.content-section interactive-example {\n    display: block;\n    height: 375px;\n    margin: 1rem 0;\n  }\n\n[name^=\"JavaScript Demo:\" i]:is(.content-section interactive-example) {\n      height: 444px;\n    }\n\n[height=\"shorter\"]:is(.content-section interactive-example) {\n      height: 364px;\n    }\n\n[height=\"taller\"]:is(.content-section interactive-example) {\n      height: 654px;\n    }\n\n[height=\"tabbed-shorter\"]:is(.content-section interactive-example) {\n      height: 351px;\n      margin-top: 1.5rem;\n    }\n\n[height=\"tabbed-standard\"]:is(.content-section interactive-example) {\n      height: 421px;\n    }\n\n[height=\"tabbed-taller\"]:is(.content-section interactive-example) {\n      height: 631px;\n    }\n\n@media (width <= 992px) {\n\n.content-section interactive-example {\n      height: 675px;\n  }\n\n      [name^=\"JavaScript Demo:\" i]:is(.content-section interactive-example) {\n        height: 513px;\n      }\n\n      [height=\"shorter\"]:is(.content-section interactive-example) {\n        height: 433px;\n      }\n\n      [height=\"taller\"]:is(.content-section interactive-example) {\n        height: 725px;\n      }\n\n      [height=\"tabbed-shorter\"]:is(.content-section interactive-example) {\n        height: 487px;\n      }\n\n      [height=\"tabbed-standard\"]:is(.content-section interactive-example) {\n        height: 548px;\n      }\n\n      [height=\"tabbed-taller\"]:is(.content-section interactive-example) {\n        height: 774px;\n      }\n    }\n\n/* Definition list */\n\n:is(.content-section dl) dl {\n      padding-left: 1rem;\n      border-left: 1px solid var(--color-border-primary);\n    }\n\n:is(.content-section dl) dd {\n      margin-left: 1rem;\n\n      /* Move description closer to term. */\n    }\n\n:is(:is(.content-section dl) dd) p:first-child {\n        margin-top: 0.5rem;\n      }\n\n:is(.content-section dl) ul {\n      margin: 1rem 0 2rem;\n    }\n\n:is(.content-section dl) a[href^=\"#\"] {\n      color: inherit;\n    }\n\n:is(:is(.content-section dl) a[href^=\"#\"]):hover::before {\n        position: absolute;\n\n        margin-top: 0.3em;\n        margin-left: -0.9em;\n\n        font-size: var(--font-size-small);\n\n        color: var(--color-text-secondary);\n\n        content: \"#\";\n      }\n\n:is(.content-section ul.specifications-list) li:has(details) {\n      margin-left: -1.25rem;\n      list-style: none;\n    }\n\n:is(.content-section ul.specifications-list) details {\n      width: 100%;\n    }\n\n[open]:is(:is(.content-section ul.specifications-list) details)  > summary {\n          margin-bottom: 0.5rem;\n        }\n\n:is([open]:is(:is(.content-section ul.specifications-list) details) > summary)::before {\n            transform: rotate(90deg);\n          }\n\n:is(:is(.content-section ul.specifications-list) details) summary {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n      }\n\n:is(:is(:is(.content-section ul.specifications-list) details) summary)::before {\n          display: inline-block;\n\n          flex-shrink: 0;\n\n          width: 1rem;\n          height: 1rem;\n\n          margin: 0.125rem;\n\n          content: \"\";\n\n          background-color: currentcolor;\n\n          -webkit-mask-image: url(\"../icon/chevron-right.svg\");\n\n                  mask-image: url(\"../icon/chevron-right.svg\");\n          -webkit-mask-size: cover;\n                  mask-size: cover;\n        }\n\n:is(:is(:is(.content-section ul.specifications-list) details) summary):hover {\n          background-color: var(--color-background-secondary);\n        }\n\n:is(:is(:is(.content-section ul.specifications-list) details) summary):hover:has(a:hover) {\n            /* Don't highlight, as link click doesn't toggle. */\n            background-color: unset;\n          }\n\n/* Article footer */\n\n.content-section.article-footer {\n    margin: 2rem 0;\n  }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles-content-section.2f0727a030110fc9.css","sources":["webpack://@mdn/fred/./components/code-example/common.css","webpack://@mdn/fred/./components/prev-next/index.css","webpack://@mdn/fred/./components/notecard/index.css","webpack://@mdn/fred/./components/code-example/prism.css","webpack://@mdn/fred/./components/content-section/server.css"],"sourcesContent":[".code-example {\n  --border: 1px solid var(--color-border-primary);\n  overflow: hidden;\n  border: var(--border);\n  border-radius: 0.25rem;\n}.code-example .example-header {\n    display: flex;\n\n    align-items: center;\n\n    min-height: 3.1rem;\n\n    padding: 0.5rem 1rem;\n\n    line-height: var(--font-line-ui);\n\n    border-bottom: var(--border);\n  }:is(.code-example .example-header) .language-name {\n      text-transform: uppercase;\n    }.code-example pre {\n    display: flex;\n\n    margin: 0;\n\n    white-space: pre-wrap;\n\n    background-color: var(--color-background-secondary);\n  }:is(.code-example pre) code {\n      flex-grow: 1;\n      flex-shrink: 1;\n\n      padding: 1rem;\n\n      overflow: auto;\n\n      font-family: var(--font-family-code);\n\n      background-color: transparent;\n    }.hidden:is(.code-example pre),[class*=\"interactive-example\"]:is(.code-example pre) {\n      display: none;\n    }:is(.example-good:is(.code-example pre),.example-bad:is(.code-example pre))::after {\n        display: inline-block;\n\n        flex-shrink: 0;\n\n        width: 1.24rem;\n        height: 1.24rem;\n\n        margin: 1.255rem 1rem;\n\n        content: \"\";\n\n        -webkit-mask-size: cover;\n\n                mask-size: cover;\n      }.example-good:is(.code-example pre) {\n      background-color: var(--color-background-green);\n    }.example-good:is(.code-example pre)::after {\n        background-color: var(--color-text-green);\n        -webkit-mask-image: url(\"../icon/circle-check.svg\");\n                mask-image: url(\"../icon/circle-check.svg\");\n      }.example-bad:is(.code-example pre) {\n      background-color: var(--color-background-red);\n    }.example-bad:is(.code-example pre)::after {\n        background-color: var(--color-text-red);\n        -webkit-mask-image: url(\"../icon/circle-x.svg\");\n                mask-image: url(\"../icon/circle-x.svg\");\n      }.code-example:has(.hidden,[class*=\"interactive-example\"]) {\n    /* TODO: we might want to fix this in rari */\n    display: none;\n  }.code-example iframe,.code-example mdn-play-runner {\n    box-sizing: content-box;\n    display: block;\n\n    padding: 1rem;\n\n    border: none;\n  }\n","/* Tutorial nav. */\n.prev-next {\n  display: flex;\n\n  flex-wrap: nowrap;\n\n  gap: 1rem;\n  justify-content: space-between;\n\n  width: 100%;\n\n  padding: 0.5rem;\n  margin: 0;\n\n  list-style: none;\n\n  border: 1px solid var(--color-border-primary);\n  border-width: 1px 0;\n}\n.prev-next a {\n    color: var(--color-link-normal) !important;\n    text-wrap: balance;\n  }\n:is(.prev-next a):visited {\n      color: var(--color-link-visited) !important;\n    }\n@media (width <= 426px) {\n.prev-next {\n    display: grid;\n    grid-template-areas:\n      \"title title\"\n      \"prev next\";\n}\n\n    .prev-next li.menu {\n      grid-area: title;\n      justify-self: center;\n    }\n\n    .prev-next li.prev {\n      grid-area: prev;\n      justify-self: start;\n    }\n\n    .prev-next li.next {\n      grid-area: next;\n      justify-self: end;\n    }\n  }\n.prev-next .prev a,.prev-next .next a {\n    display: flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n.prev-next li {\n    display: flex;\n\n    flex-wrap: nowrap;\n\n    place-items: center;\n\n    background: none;\n  }\n:is(.prev-next li) .button {\n      color: inherit;\n      background-color: inherit;\n      border: inherit;\n    }\n:is(:is(.prev-next li) .button):hover {\n        -webkit-text-decoration: underline;\n        text-decoration: underline;\n      }\n.prev:is(.prev-next li) a::before,.next:is(.prev-next li) a::after {\n      display: inline-block;\n\n      width: 1em;\n      height: 1em;\n\n      vertical-align: middle;\n\n      content: \"\";\n\n      background-color: currentcolor;\n\n      -webkit-mask-size: cover;\n\n              mask-size: cover;\n    }\n.prev:is(.prev-next li) {\n      margin-right: auto;\n    }\n.prev:is(.prev-next li) a::before {\n        -webkit-mask-image: url(\"../icon/arrow-left.svg\");\n                mask-image: url(\"../icon/arrow-left.svg\");\n      }\n.prev:is(.prev-next li) ~ .menu:is(.prev-next li) {\n      margin-right: auto;\n      margin-left: auto;\n      text-align: center;\n    }\n.next:is(.prev-next li) {\n      margin-left: auto;\n    }\n.next:is(.prev-next li) a::after {\n        -webkit-mask-image: url(\"../icon/arrow-right.svg\");\n                mask-image: url(\"../icon/arrow-right.svg\");\n      }\n",".notecard,\n.callout {\n  position: relative;\n\n  padding-block: 1px;\n  padding-inline: 1em;\n  padding-inline-start: 3em;\n  margin-block: 1em;\n\n  color: var(--color-text-primary);\n\n  background-color: var(--color-background-secondary);\n  border-inline-start: 2px solid\n    var(--accent-color, var(--color-text-secondary));\n  border-radius: 0.25em;\n}.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.experimental:is(.notecard,.callout) {\n    background-color: var(--color-background-blue);\n    --accent-color: var(--color-text-blue);\n  }.warning:is(.notecard,.callout),.deprecated:is(.notecard,.callout),.nonstandard:is(.notecard,.callout) {\n    background-color: var(--color-background-red);\n    --accent-color: var(--color-text-red);\n  }.tip:is(.notecard,.callout) {\n    background-color: var(--color-background-green);\n    --accent-color: var(--color-text-green);\n  }:is(.deprecated:is(.notecard,.callout),.experimental:is(.notecard,.callout),.nonstandard:is(.notecard,.callout),.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.tip:is(.notecard,.callout),.warning:is(.notecard,.callout),.worker:is(.notecard,.callout))::before {\n      position: absolute;\n      top: 1.45em;\n      left: 1em;\n\n      display: block;\n\n      width: 1em;\n      height: 1em;\n\n      content: \"\";\n\n      background-color: var(--accent-color, var(--color-text-secondary));\n\n      -webkit-mask-size: cover;\n\n              mask-size: cover;\n    }.deprecated:is(.notecard,.callout)::before {\n    /* e.g. Window: blur() method */\n    -webkit-mask-image: url(\"../icon/trash-2.svg\");\n            mask-image: url(\"../icon/trash-2.svg\");\n  }.experimental:is(.notecard,.callout)::before {\n    /* e.g. Barcode Detection API */\n    -webkit-mask-image: url(\"../icon/flask-conical.svg\");\n            mask-image: url(\"../icon/flask-conical.svg\");\n  }.nonstandard:is(.notecard,.callout)::before {\n    /* e.g. Document: caretRangeFromPoint() method */\n    -webkit-mask-image: url(\"../icon/triangle-alert.svg\");\n            mask-image: url(\"../icon/triangle-alert.svg\");\n  }.note:is(.notecard,.callout)::before {\n    /* e.g. Barcode Detection API */\n    -webkit-mask-image: url(\"../icon/info.svg\");\n            mask-image: url(\"../icon/info.svg\");\n  }.secure:is(.notecard,.callout)::before {\n    /* e.g. Barcode Detection API */\n    -webkit-mask-image: url(\"../icon/lock.svg\");\n            mask-image: url(\"../icon/lock.svg\");\n  }.tip:is(.notecard,.callout)::before {\n    /* (Not used in content yet) */\n    -webkit-mask-image: url(\"../icon/lightbulb.svg\");\n            mask-image: url(\"../icon/lightbulb.svg\");\n  }.warning:is(.notecard,.callout)::before {\n    /* e.g. Navigator: scheduling property */\n    -webkit-mask-image: url(\"../icon/triangle-alert.svg\");\n            mask-image: url(\"../icon/triangle-alert.svg\");\n  }.worker:is(.notecard,.callout)::before {\n    /* e.g. Worker: Worker() constructor (needs rari change) */\n    -webkit-mask-image: url(\"../icon/cog.svg\");\n            mask-image: url(\"../icon/cog.svg\");\n  }\n","\n  :is(.code-example,.css-formal-syntax) .token.comment,:is(.code-example,.css-formal-syntax) .token.prolog,:is(.code-example,.css-formal-syntax) .token.doctype,:is(.code-example,.css-formal-syntax) .token.cdata {\n    --csstools-light-dark-toggle-360cf513-0: var(--csstools-color-scheme--light) #b3b3b3;\n    color: var(--csstools-light-dark-toggle-360cf513-0, #51565d);\n    color: light-dark(#51565d, #b3b3b3);\n  }:is(.code-example,.css-formal-syntax) .token.punctuation {\n    --csstools-light-dark-toggle-360cf513-1: var(--csstools-color-scheme--light) #b3b3b3;\n    color: var(--csstools-light-dark-toggle-360cf513-1, #51565d);\n    color: light-dark(#51565d, #b3b3b3);\n  }:is(.code-example,.css-formal-syntax) .token.attr-name,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.inserted,:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.property,:is(.code-example,.css-formal-syntax) .token.class-name,:is(.code-example,.css-formal-syntax) .token.function {\n    --csstools-light-dark-toggle-360cf513-2: var(--csstools-color-scheme--light) #ff97a0;\n    color: var(--csstools-light-dark-toggle-360cf513-2, #d30038);\n    color: light-dark(#d30038, #ff97a0);\n  }:is(.code-example,.css-formal-syntax) .token.atrule,:is(.code-example,.css-formal-syntax) .token.attr-value {\n    --csstools-light-dark-toggle-360cf513-3: var(--csstools-color-scheme--light) #00d061;\n    color: var(--csstools-light-dark-toggle-360cf513-3, #007936);\n    color: light-dark(#007936, #00d061);\n  }:is(.code-example,.css-formal-syntax) .token.keyword {\n    --csstools-light-dark-toggle-360cf513-4: var(--csstools-color-scheme--light) #c1cff1;\n    color: var(--csstools-light-dark-toggle-360cf513-4, #0069c2);\n    color: light-dark(#0069c2, #c1cff1);\n  }:is(.code-example,.css-formal-syntax) .token.tag,:is(.code-example,.css-formal-syntax) .token.char,:is(.code-example,.css-formal-syntax) .token.string,:is(.code-example,.css-formal-syntax) .token.boolean,:is(.code-example,.css-formal-syntax) .token.number,:is(.code-example,.css-formal-syntax) .token.constant,:is(.code-example,.css-formal-syntax) .token.symbol,:is(.code-example,.css-formal-syntax) .token.deleted {\n    --csstools-light-dark-toggle-360cf513-5: var(--csstools-color-scheme--light) #00d061;\n    color: var(--csstools-light-dark-toggle-360cf513-5, #007936);\n    color: light-dark(#007936, #00d061);\n  }:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.template-string > .token.string,:is(.code-example,.css-formal-syntax) .token.inserted {\n    --csstools-light-dark-toggle-360cf513-6: var(--csstools-color-scheme--light) #bea5ff;\n    color: var(--csstools-light-dark-toggle-360cf513-6, #872bff);\n    color: light-dark(#872bff, #bea5ff);\n  }:is(.code-example,.css-formal-syntax) .token.important,:is(.code-example,.css-formal-syntax) .token.bold {\n    font-weight: bold;\n  }:is(.code-example,.css-formal-syntax) .token.italic {\n    font-style: italic;\n  }:is(.code-example,.css-formal-syntax) .token.entity {\n    cursor: help;\n  }\n","@import url(\"../code-example/common.css\");\n@import url(\"../prev-next/index.css\");\n@import url(\"../notecard/index.css\");\n@import url(\"../code-example/prism.css\");\n\n.content-section {\n  line-height: var(--font-line-content);\n}\n\n.content-section :target {\n    scroll-margin-top: var(--sticky-header-height);\n  }\n\n.content-section h1,.content-section h2,.content-section h3,.content-section h4,.content-section h5,.content-section h6 {\n    margin: 1rem 0 0;\n    font-weight: var(--font-weight-normal);\n  }\n\n.content-section h1 {\n    margin-top: 0;\n    font-size: var(--font-size-largest);\n  }\n\n.content-section h2 {\n    font-size: var(--font-size-larger);\n  }\n\n.content-section h3 {\n    font-size: var(--font-size-large);\n  }\n\n.content-section h4 {\n    font-size: var(--font-size-normal);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n.content-section h5,.content-section h6 {\n    font-size: var(--font-size-normal);\n    font-weight: var(--font-weight-bold);\n  }\n\n:is(.content-section a):visited {\n      color: var(--color-link-visited);\n    }\n\n/* Regular links */\n\n:is(.content-section a):not([href^=\"#\"]) {\n      -webkit-text-decoration: underline;\n      text-decoration: underline;\n    }\n\n:is(.content-section a):not([href^=\"#\"]):hover {\n        -webkit-text-decoration: none;\n        text-decoration: none;\n      }\n\n/* Anchor links */\n\n[href^=\"#\"]:is(.content-section a) {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n[href^=\"#\"]:is(.content-section a):hover {\n        -webkit-text-decoration: underline;\n        text-decoration: underline;\n      }\n\n.content-section blockquote {\n    margin-inline: 0;\n    color: var(--color-text-secondary);\n    border-inline-start: 0.25rem solid var(--color-border-primary);\n  }\n\n:is(.content-section blockquote)  > p {\n      padding: 1rem 2rem;\n    }\n\n.content-section pre,.content-section code {\n    font-family: var(--font-family-code);\n    white-space: pre-wrap;\n    background-color: var(--color-background-secondary);\n  }\n\n.content-section pre:not(.code-example pre) {\n    padding: 1rem;\n\n    overflow: auto;\n\n    border: 1px solid var(--color-border-primary);\n    border-radius: 0.25rem;\n  }\n\n.css-formal-syntax:is(.content-section pre:not(.code-example pre)) {\n      margin-bottom: 0;\n\n      text-wrap: wrap;\n\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n.css-formal-syntax:is(.content-section pre:not(.code-example pre))  ~ footer {\n        padding: 0.5rem 1rem;\n        margin-bottom: 1rem;\n\n        border: 1px solid var(--color-border-primary);\n        border-top: 0;\n        border-bottom-right-radius: 0.25rem;\n        border-bottom-left-radius: 0.25rem;\n      }\n\n.content-section code {\n    padding: 0.125em 0.25em;\n    border-radius: 0.25em;\n  }\n\n.content-section img {\n    display: block;\n\n    margin: 2rem auto;\n\n    background-color: var(--color-background-secondary);\n    border: 1px solid var(--color-border-primary);\n    border-radius: 0.25rem;\n  }\n\n.content-section table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n:is(.content-section table) tr {\n      background-color: var(--color-background-primary);\n    }\n\n:is(.content-section table) thead tr,:is(.content-section table) tr:nth-of-type(2n) {\n      background-color: var(--color-background-page);\n    }\n\n:is(.content-section table) th,:is(.content-section table) td {\n      padding: 0.5rem 0.75rem;\n      border: 1px solid var(--color-border-primary);\n    }\n\n:is(.content-section table) th {\n      font-weight: var(--font-weight-normal);\n      text-align: left;\n    }\n\n.properties:is(.content-section table) th,.properties:is(.content-section table) td {\n        border-width: 1px 0;\n      }\n\n.properties:is(.content-section table) th {\n        font-weight: var(--font-weight-bold);\n        background-color: transparent;\n      }\n\n.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result {\n    margin: 1rem 0;\n  }\n\n:is(.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result) + :is(.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result) {\n      margin-top: 1.5rem;\n    }\n\n.content-section interactive-example {\n    display: block;\n    height: 375px;\n    margin: 1rem 0;\n  }\n\n[name^=\"JavaScript Demo:\" i]:is(.content-section interactive-example) {\n      height: 444px;\n    }\n\n[height=\"shorter\"]:is(.content-section interactive-example) {\n      height: 364px;\n    }\n\n[height=\"taller\"]:is(.content-section interactive-example) {\n      height: 654px;\n    }\n\n[height=\"tabbed-shorter\"]:is(.content-section interactive-example) {\n      height: 351px;\n      margin-top: 1.5rem;\n    }\n\n[height=\"tabbed-standard\"]:is(.content-section interactive-example) {\n      height: 421px;\n    }\n\n[height=\"tabbed-taller\"]:is(.content-section interactive-example) {\n      height: 631px;\n    }\n\n@media (width <= 992px) {\n\n.content-section interactive-example {\n      height: 675px;\n  }\n\n      [name^=\"JavaScript Demo:\" i]:is(.content-section interactive-example) {\n        height: 513px;\n      }\n\n      [height=\"shorter\"]:is(.content-section interactive-example) {\n        height: 433px;\n      }\n\n      [height=\"taller\"]:is(.content-section interactive-example) {\n        height: 725px;\n      }\n\n      [height=\"tabbed-shorter\"]:is(.content-section interactive-example) {\n        height: 487px;\n      }\n\n      [height=\"tabbed-standard\"]:is(.content-section interactive-example) {\n        height: 548px;\n      }\n\n      [height=\"tabbed-taller\"]:is(.content-section interactive-example) {\n        height: 774px;\n      }\n    }\n\n/* Definition list */\n\n:is(.content-section dl) dl {\n      padding-left: 1rem;\n      border-left: 1px solid var(--color-border-primary);\n    }\n\n:is(.content-section dl) dd {\n      margin-left: 1rem;\n\n      /* Move description closer to term. */\n    }\n\n:is(:is(.content-section dl) dd) p:first-child {\n        margin-top: 0.5rem;\n      }\n\n:is(.content-section dl) ul {\n      margin: 1rem 0 2rem;\n    }\n\n:is(.content-section dl) dt a[href^=\"#\"] {\n      color: inherit;\n    }\n\n:is(:is(.content-section dl) dt a[href^=\"#\"]):hover::before {\n        position: absolute;\n\n        margin-top: 0.3em;\n        margin-left: -0.9em;\n\n        font-size: var(--font-size-small);\n\n        color: var(--color-text-secondary);\n\n        content: \"#\";\n      }\n\n:is(.content-section ul.specifications-list) li:has(details) {\n      margin-left: -1.25rem;\n      list-style: none;\n    }\n\n:is(.content-section ul.specifications-list) details {\n      width: 100%;\n    }\n\n[open]:is(:is(.content-section ul.specifications-list) details)  > summary {\n          margin-bottom: 0.5rem;\n        }\n\n:is([open]:is(:is(.content-section ul.specifications-list) details) > summary)::before {\n            transform: rotate(90deg);\n          }\n\n:is(:is(.content-section ul.specifications-list) details) summary {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n      }\n\n:is(:is(:is(.content-section ul.specifications-list) details) summary)::before {\n          display: inline-block;\n\n          flex-shrink: 0;\n\n          width: 1rem;\n          height: 1rem;\n\n          margin: 0.125rem;\n\n          content: \"\";\n\n          background-color: currentcolor;\n\n          -webkit-mask-image: url(\"../icon/chevron-right.svg\");\n\n                  mask-image: url(\"../icon/chevron-right.svg\");\n          -webkit-mask-size: cover;\n                  mask-size: cover;\n        }\n\n:is(:is(:is(.content-section ul.specifications-list) details) summary):hover {\n          background-color: var(--color-background-secondary);\n        }\n\n:is(:is(:is(.content-section ul.specifications-list) details) summary):hover:has(a:hover) {\n            /* Don't highlight, as link click doesn't toggle. */\n            background-color: unset;\n          }\n\n/* Article footer */\n\n.content-section.article-footer {\n    margin: 2rem 0;\n  }\n"],"names":[],"mappings":"AAAA,cACE,8CAA+C,CAE/C,oBAAqB,CACrB,oBAAsB,CAFtB,eAGF,CAAC,8BAGG,kBAAmB,CAQnB,2BAA4B,CAV5B,YAAa,CAQb,+BAAgC,CAJhC,iBAAkB,CAElB,kBAKF,CAAC,kDACG,wBACF,CAAC,kBAOD,kDAAmD,CANnD,YAAa,CAEb,QAAS,CAET,oBAGF,CAAC,4BAUG,wBAA6B,CAT7B,WAAY,CACZ,aAAc,CAMd,mCAAoC,CAFpC,aAAc,CAFd,YAOF,CAAC,iFACC,YACF,CAAC,kFAUG,UAAW,CATX,oBAAqB,CAErB,aAAc,CAGd,cAAe,CAEf,oBAAqB,CAIrB,uBAAwB,CAEhB,eAAgB,CATxB,aAUF,CAAC,oCACD,8CACF,CAAC,0CACG,wCAAyC,CACzC,wEAAmD,CAC3C,gEACV,CAAC,mCACD,4CACF,CAAC,yCACG,sCAAuC,CACvC,oEAA+C,CACvC,4DACV,CAAC,wDAEH,YACF,CAAC,mDAMC,WAAY,CALZ,kBAAuB,CACvB,aAAc,CAEd,YAGF,CC5EF,WAeE,gBAA6C,CAC7C,mDAAmB,CAAnB,+CAAmB,CAAnB,gDAAmB,CAAnB,gDAAmB,CAfnB,YAAa,CAEb,gBAAiB,CAEjB,QAAS,CACT,6BAA8B,CAO9B,eAAgB,CAFhB,QAAS,CADT,aAAe,CAFf,UASF,CACA,aACI,wCAA0C,CAC1C,iBACF,CACF,0BACM,yCACF,CACJ,wBACA,WACI,YAAa,CACb,6CAGJ,CAEI,mBACE,eAAgB,CAChB,mBACF,CAEA,mBACE,cAAe,CACf,kBACF,CAEA,mBACE,cAAe,CACf,gBACF,CACF,CACF,sCAGI,kBAAmB,CAFnB,YAAa,CACb,UAEF,CACF,cAOI,eAAgB,CANhB,YAAa,CAEb,gBAAiB,CAEjB,kBAGF,CACF,2BAEM,wBAAyB,CACzB,cAAe,CAFf,aAGF,CACJ,sCACQ,iCAAkC,CAClC,yBACF,CACN,iEAUM,6BAA8B,CAF9B,UAAW,CAPX,oBAAqB,CAGrB,UAAW,CAQX,uBAAwB,CAEhB,eAAgB,CARxB,qBAAsB,CAHtB,SAYF,CACJ,wBACM,iBACF,CACJ,iCACQ,sEAAiD,CACzC,8DACV,CACN,gDAEM,gBAAiB,CADjB,iBAAkB,CAElB,iBACF,CACJ,wBACM,gBACF,CACJ,gCACQ,uEAAkD,CAC1C,+DACV,CC1GN,mBAWE,kDAAmD,CACnD,6EACkD,CAClD,mBAAqB,CALrB,+BAAgC,CAFhC,gBAAiB,CAHjB,iBAAkB,CAClB,kBAAmB,CACnB,wBAAyB,CAJzB,iBAaF,CAAC,iGACG,6CAA8C,CAC9C,qCACF,CAAC,uGACC,4CAA6C,CAC7C,oCACF,CAAC,4BACC,8CAA+C,CAC/C,sCACF,CAAC,+QAYG,gEAAkE,CAFlE,UAAW,CALX,aAAc,CAGd,UAAW,CALX,QAAS,CAWT,uBAAwB,CAEhB,eAAgB,CAfxB,iBAAkB,CAClB,UAAW,CAKX,SAUF,CAAC,0CAED,mEAA8C,CACtC,2DACV,CAAC,4CAEC,yEAAoD,CAC5C,iEACV,CAAC,2CAEC,0EAAqD,CAC7C,kEACV,CAAC,oCAEC,gEAA2C,CACnC,wDACV,CAAC,sCAEC,gEAA2C,CACnC,wDACV,CAAC,mCAEC,qEAAgD,CACxC,6DACV,CAAC,uCAEC,0EAAqD,CAC7C,kEACV,CAAC,sCAEC,+DAA0C,CAClC,uDACV,CCxEA,iNACE,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,yDACC,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,4XACC,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,4GACC,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,qDACC,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,+ZACC,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,4OACC,mFAAoF,CACpF,0DAA4D,CAC5D,iCACF,CAAC,yGACC,eACF,CAAC,oDACC,iBACF,CAAC,oDACC,WACF,CC9BF,iBACE,oCACF,CAEA,yBACI,6CACF,CAEF,wHAEI,qCAAsC,CADtC,eAEF,CAEF,oBAEI,kCAAmC,CADnC,YAEF,CAEF,oBACI,iCACF,CAEF,oBACI,gCACF,CAEF,oBACI,iCAAkC,CAElC,oBAAsB,CADtB,wBAEF,CAEF,wCACI,iCAAkC,CAClC,mCACF,CAEF,gCACM,+BACF,CAIJ,yCACM,iCAAkC,CAClC,yBACF,CASJ,kFACM,4BAA6B,CAC7B,oBACF,CAEJ,yCACQ,iCAAkC,CAClC,yBACF,CAEN,4BAGI,4DAA8D,CAD9D,iCAAkC,CADlC,eAGF,CAEF,mCACM,iBACF,CAEJ,2CAGI,kDAAmD,CAFnD,mCAAoC,CACpC,oBAEF,CAEF,4CAKI,4CAA6C,CAC7C,oBAAsB,CAHtB,aAAc,CAFd,YAMF,CAEF,mEAMM,2BAA4B,CAD5B,4BAA6B,CAJ7B,eAAgB,CAEhB,cAIF,CAEJ,0EAKQ,4CAAa,CAEb,gCAAkC,CADlC,iCAAmC,CADnC,YAAa,CAHb,kBAAmB,CADnB,kBAOF,CAEN,sBAEI,mBAAqB,CADrB,oBAEF,CAEF,qBAKI,kDAAmD,CACnD,4CAA6C,CAC7C,oBAAsB,CANtB,aAAc,CAEd,gBAKF,CAEF,uBAEI,wBAAyB,CADzB,UAEF,CAEF,+BACM,gDACF,CAEJ,oFACM,6CACF,CAEJ,8DAEM,4CAA6C,CAD7C,oBAEF,CAEJ,+BACM,qCAAsC,CACtC,eACF,CAEJ,oFACQ,kBACF,CAEN,0CAEQ,wBAA6B,CAD7B,mCAEF,CAEN,yGACI,aACF,CAEF,4NACM,iBACF,CAEJ,qCACI,aAAc,CACd,YAAa,CACb,aACF,CAEF,sEACM,YACF,CAEJ,0DACM,YACF,CAEJ,yDACM,YACF,CAEJ,iEACM,YAAa,CACb,iBACF,CAEJ,kEACM,YACF,CAEJ,gEACM,YACF,CAEJ,wBAEA,qCACM,YACJ,CAEI,sEACE,YACF,CAEA,0DACE,YACF,CAEA,yDACE,YACF,CAEA,iEACE,YACF,CAEA,kEACE,YACF,CAEA,gEACE,YACF,CACF,CAIJ,4BAEM,iDAAkD,CADlD,iBAEF,CAEJ,4BACM,gBAGF,CAEJ,+CACQ,gBACF,CAEN,4BACM,kBACF,CAEJ,yCACM,aACF,CAEJ,2DAQQ,iCAAkC,CAElC,WAAY,CAJZ,gCAAiC,CAFjC,iBAAmB,CADnB,eAAiB,CAFjB,iBAUF,CAEN,6DAEM,eAAgB,CADhB,oBAEF,CAEJ,qDACM,UACF,CAEJ,wEACU,mBACF,CAER,oFACY,uBACF,CAEV,kEAEQ,kBAAmB,CACnB,cAAe,CAFf,YAGF,CAEN,8EAYU,6BAA8B,CAF9B,UAAW,CATX,oBAAqB,CAErB,aAAc,CAGd,WAAY,CAEZ,cAAgB,CAMhB,yEAAoD,CAE5C,iEAA4C,CACpD,uBAAwB,CAChB,eAAgB,CAbxB,UAcF,CAER,6EACU,kDACF,CAER,0FAEY,sBACF,CAIV,gCACI,aACF"}

package/out/static/legacy/{1289.71de08e7375881e1.js → 1289.61e3f0658b3b42f6.js}

@@ -1,2 +1,2 @@
-export const __webpack_id__="1289";export const __webpack_ids__=["1289"];export const __webpack_modules__={94160:function(e,t,n){n.r(t),n.d(t,{default:()=>_});var r=n(96540),a=n(60274),l=n(40377),o=n(28166),c=n(90134),u=n(94615),i=n(65318),s=n(5592),f=n(3053),d=n(47263),m=n(56114),p=n(96540);function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function y(e,t,n,r,a,l,o){try{var c=e[l](o),u=c.value}catch(e){n(e);return}c.done?t(u):Promise.resolve(u).then(r,a)}function b(e){return function(){var t=this,n=arguments;return new Promise(function(r,a){var l=e.apply(t,n);function o(e){y(l,r,a,o,c,"next",e)}function c(e){y(l,r,a,o,c,"throw",e)}o(void 0)})}}function v(e,t){var n,r,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=c(0),o.throw=c(1),o.return=c(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(c){return function(u){var i=[c,u];if(n)throw TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(l=0)),l;)try{if(n=1,r&&(a=2&i[0]?r.return:i[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;switch(r=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,r=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(a=(a=l.trys).length>0&&a[a.length-1])&&(6===i[0]||2===i[0])){l=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){l.label=i[1];break}if(6===i[0]&&l.label<a[1]){l.label=a[1],a=i;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(i);break}a[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],r=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}}}function g(e){var t=e.gistId;return p.createElement("form",{className:"flag"},p.createElement("span",null,"Report this malicious or inappropriate shared playground. Can you please share some details on what's wrong with this content:"),p.createElement("textarea",{id:"flagReason"}),p.createElement("div",{className:"buttons"},p.createElement(o.$,{id:"flag-cancel",value:"cancel",type:"secondary",buttonType:"submit",formMethod:"dialog"},"Cancel"),p.createElement(o.$,{id:"flag-send",onClickHandler:function(e){return b(function(){var n,r;return v(this,function(a){switch(a.label){case 0:return e.preventDefault(),[4,fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:t,reason:document.getElementById("flagReason").value})})];case 1:return a.sent(),null==(r=document.getElementById("flag-send"))||null==(n=r.closest("dialog"))||n.close(),[2]}})})()},value:"default"},"Report")))}function E(e){var t,n=e.url,a=e.share,l=e.code,c=(0,s.P_)(),y=(0,f.db)(),g=(t=(0,r.useState)(!1),function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n,r,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l=[],o=!0,c=!1;try{for(a=a.call(e);!(o=(n=a.next()).done)&&(l.push(n.value),l.length!==t);o=!0);}catch(e){c=!0,r=e}finally{try{o||null==a.return||a.return()}finally{if(c)throw r}}return l}}(t,2)||function(e,t){if(e){if("string"==typeof e)return h(e,2);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return h(e,t)}}(t,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),E=g[0],w=g[1];return p.createElement("form",{className:"share"},p.createElement(o.$,{id:"share-cancel",title:"Cancel",extraClasses:"action",value:"cancel",icon:"cancel",buttonType:"submit",formMethod:"dialog"}),p.createElement("section",null,p.createElement("span",null,"Share Markdown"),p.createElement(o.$,{type:"secondary",onClickHandler:function(){return b(function(){return v(this,function(e){switch(e.label){case 0:if(y("".concat(d.aE,": share-markdown")),!l)return[3,2];return[4,navigator.clipboard.writeText((0,u.Oo)(l()))];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"Copy markdown to clipboard")),p.createElement("section",{id:"share-link"},p.createElement("span",null,"Share your code via Permalink"),(null==c?void 0:c.isAuthenticated)?p.createElement(p.Fragment,null,n?E?p.createElement(i.R,null):p.createElement(p.Fragment,null,p.createElement("input",{value:n.toString()}),p.createElement(o.$,{type:"secondary",onClickHandler:function(){return b(function(){return v(this,function(e){switch(e.label){case 0:if(!n)return[3,2];return[4,navigator.clipboard.writeText(n.toString())];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"Copy to clipboard")):p.createElement(o.$,{onClickHandler:function(){return b(function(){return v(this,function(e){switch(e.label){case 0:return w(!0),y("".concat(d.aE,": share-permalink")),[4,null==a?void 0:a()];case 1:return e.sent(),w(!1),[2]}})})()}},"Create link")):p.createElement(m.W,{className:"share-get-plus",gleanPrefix:d.aE},"Want to share this playground via link?",p.createElement("br",null))))}var w=n(36333),k=n(5402),S=n(92113),C=n(63739),j=n(96540);function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function x(e,t,n,r,a,l,o){try{var c=e[l](o),u=c.value}catch(e){n(e);return}c.done?t(u):Promise.resolve(u).then(r,a)}function I(e){return function(){var t=this,n=arguments;return new Promise(function(r,a){var l=e.apply(t,n);function o(e){x(l,r,a,o,c,"next",e)}function c(e){x(l,r,a,o,c,"throw",e)}o(void 0)})}}function N(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n,r,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l=[],o=!0,c=!1;try{for(a=a.call(e);!(o=(n=a.next()).done)&&(l.push(n.value),!t||l.length!==t);o=!0);}catch(e){c=!0,r=e}finally{try{o||null==a.return||a.return()}finally{if(c)throw r}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return O(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return O(e,t)}}(e,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,t){var n,r,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=c(0),o.throw=c(1),o.return=c(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(c){return function(u){var i=[c,u];if(n)throw TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(l=0)),l;)try{if(n=1,r&&(a=2&i[0]?r.return:i[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;switch(r=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,r=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(a=(a=l.trys).length>0&&a[a.length-1])&&(6===i[0]||2===i[0])){l=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){l.label=i[1];break}if(6===i[0]&&l.label<a[1]){l.label=a[1],a=i;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(i);break}a[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],r=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}}}function A(e,t){sessionStorage.setItem(e,JSON.stringify(t))}function _(){var e,t,n=(0,f.db)(),i=N((0,a.ok)(),2),s=i[0],m=i[1],p=s.get("id"),h=s.get("state"),y=N((0,r.useState)(0),2),b=y[0],v=y[1],O=N((0,r.useState)(!1),2),x=O[0],_=O[1],T=N((0,r.useState)(null),2),R=T[0],$=T[1],H=N((0,r.useState)(0),2),U=H[0],D=H[1],J=N((0,r.useState)(!0),2),M=J[0],F=J[1],B=N((0,r.useState)(!0),2),X=B[0],G=B[1],L=N((0,r.useState)(null),2),W=L[0],z=L[1],V=(0,l.A)(h||x||!p?null:"/api/v1/play/".concat(encodeURIComponent(p)),function(e){return I(function(){var t,r;return P(this,function(a){switch(a.label){case 0:return[4,fetch(e)];case 1:if(!(t=a.sent()).ok)throw Error(t.statusText);return n("".concat(d.aE,": load-shared")),[4,t.json()];case 2:if(r=a.sent())return D(2),[2,r];return[2,null]}})})()},{fallbackData:!h&&!p&&0===U&&(e=u.FX,{html:(null==(t=JSON.parse(sessionStorage.getItem(e)||"{}"))?void 0:t.html)||"",css:(null==t?void 0:t.css)||"",js:(null==t?void 0:t.js)||"",src:null==t?void 0:t.src})||void 0}).data,q=(0,r.useRef)(null),K=(0,r.useRef)(null);(0,r.useEffect)(function(){V&&(A(u.FX,V),Object.values(V).some(Boolean)&&z(structuredClone(V)))},[V,z]);var Q=(0,r.useCallback)(function(){var e,t,n;return{html:(null==(e=q.current)?void 0:e.code.html)||"",css:(null==(t=q.current)?void 0:t.code.css)||"",js:(null==(n=q.current)?void 0:n.code.js)||"",src:(null==V?void 0:V.src)||(null==W?void 0:W.src)}},[null==W?void 0:W.src,null==V?void 0:V.src]),Y=(0,r.useCallback)(function(e){var t=e.html,n=e.css,r=e.js;F(!t.trim()&&!n.trim()&&!r.trim()),G(!t&&!n&&!r)},[]),Z=(0,r.useCallback)(function(e){q.current&&(q.current.code=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},e),e.src&&(q.current.srcPrefix=e.src),Y(e),A(u.FX,e))},[Y]);(0,r.useEffect)(function(){I(function(){var e;return P(this,function(t){switch(t.label){case 0:if(0!==U&&2!==U)return[3,8];if(!(V&&Object.values(V).some(Boolean)))return[3,1];return Z(V),p||null==(e=q.current)||e.run(),[3,7];case 1:if(!h)return[3,6];t.label=2;case 2:return t.trys.push([2,4,,5]),[4,(0,u.ps)(h)];case 3:return Z(JSON.parse(t.sent().state||"{}")),[3,5];case 4:return console.error(t.sent()),[3,5];case 5:return[3,7];case 6:Z({html:"",css:"",js:""}),t.label=7;case 7:D(1),t.label=8;case 8:return[2]}})})()},[V,U,p,h,Z]);var ee=function(){var e,t,n;null==(t=document.getElementById("run"))||null==(e=t.firstElementChild)||e.animate([{},{backgroundColor:"var(--background-mark-green)"},{}],{duration:1e3,iterations:1}),null==(n=q.current)||n.run()},et=(0,r.useCallback)(function(){return I(function(){var e,t;return P(this,function(n){switch(n.label){case 0:var r;return[4,(r=Q(),I(function(){var e,t;return P(this,function(n){switch(n.label){case 0:return[4,fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)})];case 1:return[4,n.sent().json()];case 2:return e=n.sent().id,(t=new URL(document.URL)).search=new URLSearchParams([["id",e]]).toString(),[2,{url:t,id:e}]}})})())];case 1:return t=(e=n.sent()).url,m([["id",e.id]],{replace:!0}),_(!0),$(t),[2]}})})()},[m,$,_,Q]),en=function(){var e=Q();Y(e),A(u.FX,e)};return j.createElement(w.s,{ref:q,runOnChange:!0},j.createElement("main",{className:"play container"},j.createElement("dialog",{id:"playDialog",ref:K,onClose:function(){1===b&&$(null)}},2===b&&j.createElement(g,{gistId:p}),1===b&&j.createElement(E,{url:R,code:Q,share:et})),j.createElement("section",{className:"editors"},j.createElement("aside",null,j.createElement("h1",null,"Playground"),j.createElement("menu",null,j.createElement(o.$,{type:"secondary",id:"format",onClickHandler:function(){return I(function(){var e;return P(this,function(t){switch(t.label){case 0:return[4,null==(e=q.current)?void 0:e.format()];case 1:return t.sent(),[2]}})})()}},"format"),j.createElement(o.$,{type:"secondary",id:"run",onClickHandler:ee},"run"),j.createElement(o.$,{type:"secondary",id:"share",isDisabled:M,onClickHandler:function(){var e;n("".concat(d.aE,": share-click")),v(1),null==(e=K.current)||e.showModal()}},"share"),j.createElement(o.$,{type:"secondary",isDisabled:X,id:"clear",extraClasses:"red",onClickHandler:function(){return I(function(){return P(this,function(e){switch(e.label){case 0:if(!window.confirm("Do you really want to clear everything?"))return[3,2];return n("".concat(d.aE,": reset-click")),[4,I(function(){return P(this,function(e){return m([],{replace:!0}),z(null),Z({html:"",css:"",js:"",src:void 0}),ee(),[2]})})()];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"clear"),W&&j.createElement(o.$,{type:"secondary",id:"reset",extraClasses:"red",onClickHandler:function(){return I(function(){return P(this,function(e){switch(e.label){case 0:if(!window.confirm("Do you really want to revert your changes?"))return[3,2];return n("".concat(d.aE,": revert-click")),[4,I(function(){return P(this,function(e){return Z({html:(null==W?void 0:W.html)||"",css:(null==W?void 0:W.css)||"",js:(null==W?void 0:W.js)||""}),ee(),[2]})})()];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"reset"))),j.createElement("details",{className:"editor-container",open:!0},j.createElement("summary",null,"HTML"),j.createElement(k.J,{language:"html",onUpdate:en})),j.createElement("details",{className:"editor-container",open:!0},j.createElement("summary",null,"CSS"),j.createElement(k.J,{language:"css",onUpdate:en})),j.createElement("details",{className:"editor-container",open:!0},j.createElement("summary",null,"JAVASCRIPT"),j.createElement(k.J,{language:"js",onUpdate:en}))),j.createElement("section",{className:"preview"},p&&j.createElement("button",{className:"flag-example",onClick:function(e){var t;e.preventDefault(),n("".concat(d.aE,": flag-click")),v(2),null==(t=K.current)||t.showModal()}},"Seeing something inappropriate?"),j.createElement(C.S,null),j.createElement("div",{id:"play-console"},j.createElement("span",null,"Console"),j.createElement(S.H,null)),j.createElement(c.Xp,{extraClasses:["horizontal"]}))))}},56114:function(e,t,n){n.d(t,{W:()=>c});var r=n(3053),a=n(72817),l=n(41102),o=n(96540);function c(e){var t=e.children,n=e.className,c=e.gleanPrefix,u=(0,l.B)(),i=(0,r.db)();return o.createElement("div",{className:void 0===n?"login-banner":n},o.createElement("span",null,o.createElement("span",null,t)," ",o.createElement("strong",null,"Upgrade to"," ",o.createElement("a",{className:"plus-link",href:u,onClick:function(){return i("".concat(c,": banner-link"))}},"MDN Plus")," ","for free.")),o.createElement(a._,{logInGleanContext:"".concat(c,": banner-login"),signUpGleanContext:"".concat(c,": banner-signup")}))}},40377:function(e,t,n){n.d(t,{A:()=>a});var r=n(18761);let a=(0,n(5257).Ht)(r.Ay,e=>(t,n,r)=>(r.revalidateOnFocus=!1,r.revalidateIfStale=!1,r.revalidateOnReconnect=!1,e(t,n,r)))}};
-//# sourceMappingURL=1289.71de08e7375881e1.js.map
+export const __webpack_id__="1289";export const __webpack_ids__=["1289"];export const __webpack_modules__={94160:function(e,t,n){n.r(t),n.d(t,{default:()=>_});var r=n(96540),a=n(39330),l=n(40377),o=n(28166),c=n(90134),u=n(94615),i=n(65318),s=n(5592),f=n(7874),d=n(47263),m=n(56114),p=n(96540);function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function y(e,t,n,r,a,l,o){try{var c=e[l](o),u=c.value}catch(e){n(e);return}c.done?t(u):Promise.resolve(u).then(r,a)}function b(e){return function(){var t=this,n=arguments;return new Promise(function(r,a){var l=e.apply(t,n);function o(e){y(l,r,a,o,c,"next",e)}function c(e){y(l,r,a,o,c,"throw",e)}o(void 0)})}}function v(e,t){var n,r,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=c(0),o.throw=c(1),o.return=c(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(c){return function(u){var i=[c,u];if(n)throw TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(l=0)),l;)try{if(n=1,r&&(a=2&i[0]?r.return:i[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;switch(r=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,r=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(a=(a=l.trys).length>0&&a[a.length-1])&&(6===i[0]||2===i[0])){l=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){l.label=i[1];break}if(6===i[0]&&l.label<a[1]){l.label=a[1],a=i;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(i);break}a[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],r=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}}}function g(e){var t=e.gistId;return p.createElement("form",{className:"flag"},p.createElement("span",null,"Report this malicious or inappropriate shared playground. Can you please share some details on what's wrong with this content:"),p.createElement("textarea",{id:"flagReason"}),p.createElement("div",{className:"buttons"},p.createElement(o.$,{id:"flag-cancel",value:"cancel",type:"secondary",buttonType:"submit",formMethod:"dialog"},"Cancel"),p.createElement(o.$,{id:"flag-send",onClickHandler:function(e){return b(function(){var n,r;return v(this,function(a){switch(a.label){case 0:return e.preventDefault(),[4,fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:t,reason:document.getElementById("flagReason").value})})];case 1:return a.sent(),null==(r=document.getElementById("flag-send"))||null==(n=r.closest("dialog"))||n.close(),[2]}})})()},value:"default"},"Report")))}function E(e){var t,n=e.url,a=e.share,l=e.code,c=(0,s.P_)(),y=(0,f.db)(),g=(t=(0,r.useState)(!1),function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n,r,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l=[],o=!0,c=!1;try{for(a=a.call(e);!(o=(n=a.next()).done)&&(l.push(n.value),l.length!==t);o=!0);}catch(e){c=!0,r=e}finally{try{o||null==a.return||a.return()}finally{if(c)throw r}}return l}}(t,2)||function(e,t){if(e){if("string"==typeof e)return h(e,2);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return h(e,t)}}(t,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),E=g[0],w=g[1];return p.createElement("form",{className:"share"},p.createElement(o.$,{id:"share-cancel",title:"Cancel",extraClasses:"action",value:"cancel",icon:"cancel",buttonType:"submit",formMethod:"dialog"}),p.createElement("section",null,p.createElement("span",null,"Share Markdown"),p.createElement(o.$,{type:"secondary",onClickHandler:function(){return b(function(){return v(this,function(e){switch(e.label){case 0:if(y("".concat(d.aE,": share-markdown")),!l)return[3,2];return[4,navigator.clipboard.writeText((0,u.Oo)(l()))];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"Copy markdown to clipboard")),p.createElement("section",{id:"share-link"},p.createElement("span",null,"Share your code via Permalink"),(null==c?void 0:c.isAuthenticated)?p.createElement(p.Fragment,null,n?E?p.createElement(i.R,null):p.createElement(p.Fragment,null,p.createElement("input",{value:n.toString()}),p.createElement(o.$,{type:"secondary",onClickHandler:function(){return b(function(){return v(this,function(e){switch(e.label){case 0:if(!n)return[3,2];return[4,navigator.clipboard.writeText(n.toString())];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"Copy to clipboard")):p.createElement(o.$,{onClickHandler:function(){return b(function(){return v(this,function(e){switch(e.label){case 0:return w(!0),y("".concat(d.aE,": share-permalink")),[4,null==a?void 0:a()];case 1:return e.sent(),w(!1),[2]}})})()}},"Create link")):p.createElement(m.W,{className:"share-get-plus",gleanPrefix:d.aE},"Want to share this playground via link?",p.createElement("br",null))))}var w=n(36333),k=n(5402),S=n(92113),C=n(63739),j=n(96540);function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function x(e,t,n,r,a,l,o){try{var c=e[l](o),u=c.value}catch(e){n(e);return}c.done?t(u):Promise.resolve(u).then(r,a)}function I(e){return function(){var t=this,n=arguments;return new Promise(function(r,a){var l=e.apply(t,n);function o(e){x(l,r,a,o,c,"next",e)}function c(e){x(l,r,a,o,c,"throw",e)}o(void 0)})}}function N(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n,r,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l=[],o=!0,c=!1;try{for(a=a.call(e);!(o=(n=a.next()).done)&&(l.push(n.value),!t||l.length!==t);o=!0);}catch(e){c=!0,r=e}finally{try{o||null==a.return||a.return()}finally{if(c)throw r}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return O(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return O(e,t)}}(e,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,t){var n,r,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=c(0),o.throw=c(1),o.return=c(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(c){return function(u){var i=[c,u];if(n)throw TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(l=0)),l;)try{if(n=1,r&&(a=2&i[0]?r.return:i[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;switch(r=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,r=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(a=(a=l.trys).length>0&&a[a.length-1])&&(6===i[0]||2===i[0])){l=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){l.label=i[1];break}if(6===i[0]&&l.label<a[1]){l.label=a[1],a=i;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(i);break}a[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],r=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}}}function A(e,t){sessionStorage.setItem(e,JSON.stringify(t))}function _(){var e,t,n=(0,f.db)(),i=N((0,a.ok)(),2),s=i[0],m=i[1],p=s.get("id"),h=s.get("state"),y=N((0,r.useState)(0),2),b=y[0],v=y[1],O=N((0,r.useState)(!1),2),x=O[0],_=O[1],T=N((0,r.useState)(null),2),R=T[0],$=T[1],H=N((0,r.useState)(0),2),U=H[0],D=H[1],J=N((0,r.useState)(!0),2),M=J[0],F=J[1],B=N((0,r.useState)(!0),2),X=B[0],G=B[1],L=N((0,r.useState)(null),2),W=L[0],z=L[1],V=(0,l.A)(h||x||!p?null:"/api/v1/play/".concat(encodeURIComponent(p)),function(e){return I(function(){var t,r;return P(this,function(a){switch(a.label){case 0:return[4,fetch(e)];case 1:if(!(t=a.sent()).ok)throw Error(t.statusText);return n("".concat(d.aE,": load-shared")),[4,t.json()];case 2:if(r=a.sent())return D(2),[2,r];return[2,null]}})})()},{fallbackData:!h&&!p&&0===U&&(e=u.FX,{html:(null==(t=JSON.parse(sessionStorage.getItem(e)||"{}"))?void 0:t.html)||"",css:(null==t?void 0:t.css)||"",js:(null==t?void 0:t.js)||"",src:null==t?void 0:t.src})||void 0}).data,q=(0,r.useRef)(null),K=(0,r.useRef)(null);(0,r.useEffect)(function(){V&&(A(u.FX,V),Object.values(V).some(Boolean)&&z(structuredClone(V)))},[V,z]);var Q=(0,r.useCallback)(function(){var e,t,n;return{html:(null==(e=q.current)?void 0:e.code.html)||"",css:(null==(t=q.current)?void 0:t.code.css)||"",js:(null==(n=q.current)?void 0:n.code.js)||"",src:(null==V?void 0:V.src)||(null==W?void 0:W.src)}},[null==W?void 0:W.src,null==V?void 0:V.src]),Y=(0,r.useCallback)(function(e){var t=e.html,n=e.css,r=e.js;F(!t.trim()&&!n.trim()&&!r.trim()),G(!t&&!n&&!r)},[]),Z=(0,r.useCallback)(function(e){q.current&&(q.current.code=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},e),e.src&&(q.current.srcPrefix=e.src),Y(e),A(u.FX,e))},[Y]);(0,r.useEffect)(function(){I(function(){var e;return P(this,function(t){switch(t.label){case 0:if(0!==U&&2!==U)return[3,8];if(!(V&&Object.values(V).some(Boolean)))return[3,1];return Z(V),p||null==(e=q.current)||e.run(),[3,7];case 1:if(!h)return[3,6];t.label=2;case 2:return t.trys.push([2,4,,5]),[4,(0,u.ps)(h)];case 3:return Z(JSON.parse(t.sent().state||"{}")),[3,5];case 4:return console.error(t.sent()),[3,5];case 5:return[3,7];case 6:Z({html:"",css:"",js:""}),t.label=7;case 7:D(1),t.label=8;case 8:return[2]}})})()},[V,U,p,h,Z]);var ee=function(){var e,t,n;null==(t=document.getElementById("run"))||null==(e=t.firstElementChild)||e.animate([{},{backgroundColor:"var(--background-mark-green)"},{}],{duration:1e3,iterations:1}),null==(n=q.current)||n.run()},et=(0,r.useCallback)(function(){return I(function(){var e,t;return P(this,function(n){switch(n.label){case 0:var r;return[4,(r=Q(),I(function(){var e,t;return P(this,function(n){switch(n.label){case 0:return[4,fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)})];case 1:return[4,n.sent().json()];case 2:return e=n.sent().id,(t=new URL(document.URL)).search=new URLSearchParams([["id",e]]).toString(),[2,{url:t,id:e}]}})})())];case 1:return t=(e=n.sent()).url,m([["id",e.id]],{replace:!0}),_(!0),$(t),[2]}})})()},[m,$,_,Q]),en=function(){var e=Q();Y(e),A(u.FX,e)};return j.createElement(w.s,{ref:q,runOnChange:!0},j.createElement("main",{className:"play container"},j.createElement("dialog",{id:"playDialog",ref:K,onClose:function(){1===b&&$(null)}},2===b&&j.createElement(g,{gistId:p}),1===b&&j.createElement(E,{url:R,code:Q,share:et})),j.createElement("section",{className:"editors"},j.createElement("aside",null,j.createElement("h1",null,"Playground"),j.createElement("menu",null,j.createElement(o.$,{type:"secondary",id:"format",onClickHandler:function(){return I(function(){var e;return P(this,function(t){switch(t.label){case 0:return[4,null==(e=q.current)?void 0:e.format()];case 1:return t.sent(),[2]}})})()}},"format"),j.createElement(o.$,{type:"secondary",id:"run",onClickHandler:ee},"run"),j.createElement(o.$,{type:"secondary",id:"share",isDisabled:M,onClickHandler:function(){var e;n("".concat(d.aE,": share-click")),v(1),null==(e=K.current)||e.showModal()}},"share"),j.createElement(o.$,{type:"secondary",isDisabled:X,id:"clear",extraClasses:"red",onClickHandler:function(){return I(function(){return P(this,function(e){switch(e.label){case 0:if(!window.confirm("Do you really want to clear everything?"))return[3,2];return n("".concat(d.aE,": reset-click")),[4,I(function(){return P(this,function(e){return m([],{replace:!0}),z(null),Z({html:"",css:"",js:"",src:void 0}),ee(),[2]})})()];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"clear"),W&&j.createElement(o.$,{type:"secondary",id:"reset",extraClasses:"red",onClickHandler:function(){return I(function(){return P(this,function(e){switch(e.label){case 0:if(!window.confirm("Do you really want to revert your changes?"))return[3,2];return n("".concat(d.aE,": revert-click")),[4,I(function(){return P(this,function(e){return Z({html:(null==W?void 0:W.html)||"",css:(null==W?void 0:W.css)||"",js:(null==W?void 0:W.js)||""}),ee(),[2]})})()];case 1:e.sent(),e.label=2;case 2:return[2]}})})()}},"reset"))),j.createElement("details",{className:"editor-container",open:!0},j.createElement("summary",null,"HTML"),j.createElement(k.J,{language:"html",onUpdate:en})),j.createElement("details",{className:"editor-container",open:!0},j.createElement("summary",null,"CSS"),j.createElement(k.J,{language:"css",onUpdate:en})),j.createElement("details",{className:"editor-container",open:!0},j.createElement("summary",null,"JAVASCRIPT"),j.createElement(k.J,{language:"js",onUpdate:en}))),j.createElement("section",{className:"preview"},p&&j.createElement("button",{className:"flag-example",onClick:function(e){var t;e.preventDefault(),n("".concat(d.aE,": flag-click")),v(2),null==(t=K.current)||t.showModal()}},"Seeing something inappropriate?"),j.createElement(C.S,null),j.createElement("div",{id:"play-console"},j.createElement("span",null,"Console"),j.createElement(S.H,null)),j.createElement(c.Xp,{extraClasses:["horizontal"]}))))}},56114:function(e,t,n){n.d(t,{W:()=>c});var r=n(7874),a=n(72817),l=n(41102),o=n(96540);function c(e){var t=e.children,n=e.className,c=e.gleanPrefix,u=(0,l.B)(),i=(0,r.db)();return o.createElement("div",{className:void 0===n?"login-banner":n},o.createElement("span",null,o.createElement("span",null,t)," ",o.createElement("strong",null,"Upgrade to"," ",o.createElement("a",{className:"plus-link",href:u,onClick:function(){return i("".concat(c,": banner-link"))}},"MDN Plus")," ","for free.")),o.createElement(a._,{logInGleanContext:"".concat(c,": banner-login"),signUpGleanContext:"".concat(c,": banner-signup")}))}},40377:function(e,t,n){n.d(t,{A:()=>a});var r=n(18761);let a=(0,n(5257).Ht)(r.Ay,e=>(t,n,r)=>(r.revalidateOnFocus=!1,r.revalidateIfStale=!1,r.revalidateOnReconnect=!1,e(t,n,r)))}};
+//# sourceMappingURL=1289.61e3f0658b3b42f6.js.map

package/out/static/legacy/{1289.71de08e7375881e1.js.map → 1289.61e3f0658b3b42f6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"1289.71de08e7375881e1.js","sources":["webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/playground/forms.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/playground/index.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/common/login-banner.tsx","webpack://@mdn/fred/./node_modules/swr/dist/immutable/index.mjs"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"../ui/atoms/button\";\nimport { EditorContent, codeToMarkdown } from \"./utils\";\nimport { Loading } from \"../ui/atoms/loading\";\nimport { useUserData } from \"../user-context\";\nimport { useGleanClick } from \"../telemetry/glean-context\";\nimport { PLAYGROUND } from \"../telemetry/constants\";\nimport { PlusLoginBanner } from \"../plus/common/login-banner\";\n\nexport function FlagForm({ gistId }: { gistId: string | null }) {\n  return (\n    <form className=\"flag\">\n      <span>\n        Report this malicious or inappropriate shared playground. Can you please\n        share some details on what's wrong with this content:\n      </span>\n      <textarea id=\"flagReason\"></textarea>\n      <div className=\"buttons\">\n        <Button\n          id=\"flag-cancel\"\n          value=\"cancel\"\n          type=\"secondary\"\n          buttonType=\"submit\"\n          formMethod=\"dialog\"\n        >\n          Cancel\n        </Button>\n        <Button\n          id=\"flag-send\"\n          onClickHandler={async (e) => {\n            e.preventDefault();\n            await fetch(\"/api/v1/play/flag\", {\n              method: \"POST\",\n              headers: {\n                \"Content-Type\": \"application/json\",\n              },\n              body: JSON.stringify({\n                id: gistId,\n                reason: (\n                  document.getElementById(\"flagReason\") as HTMLTextAreaElement\n                ).value,\n              }),\n            });\n            document.getElementById(\"flag-send\")?.closest(\"dialog\")?.close();\n          }}\n          value=\"default\"\n        >\n          Report\n        </Button>\n      </div>\n    </form>\n  );\n}\n\nexport function ShareForm({\n  url,\n  share,\n  code,\n}: {\n  url: URL | null;\n  share?: () => Promise<void>;\n  code?: () => EditorContent;\n  extraClasses?: string;\n}) {\n  let userData = useUserData();\n  const gleanClick = useGleanClick();\n  let [loading, setLoading] = useState(false);\n  return (\n    <form className=\"share\">\n      <Button\n        id=\"share-cancel\"\n        title=\"Cancel\"\n        extraClasses=\"action\"\n        value=\"cancel\"\n        icon=\"cancel\"\n        buttonType=\"submit\"\n        formMethod=\"dialog\"\n      ></Button>\n      <section>\n        <span>Share Markdown</span>\n        <Button\n          type=\"secondary\"\n          onClickHandler={async () => {\n            gleanClick(`${PLAYGROUND}: share-markdown`);\n            code &&\n              (await navigator.clipboard.writeText(codeToMarkdown(code())));\n          }}\n        >\n          Copy markdown to clipboard\n        </Button>\n      </section>\n      <section id=\"share-link\">\n        <span>Share your code via Permalink</span>\n        {userData?.isAuthenticated ? (\n          <>\n            {url ? (\n              loading ? (\n                <Loading />\n              ) : (\n                <>\n                  <input value={url.toString()} />\n                  <Button\n                    type=\"secondary\"\n                    onClickHandler={async () => {\n                      url &&\n                        (await navigator.clipboard.writeText(url.toString()));\n                    }}\n                  >\n                    Copy to clipboard\n                  </Button>\n                </>\n              )\n            ) : (\n              <Button\n                onClickHandler={async () => {\n                  setLoading(true);\n                  gleanClick(`${PLAYGROUND}: share-permalink`);\n                  await share?.();\n                  setLoading(false);\n                }}\n              >\n                Create link\n              </Button>\n            )}\n          </>\n        ) : (\n          <PlusLoginBanner className=\"share-get-plus\" gleanPrefix={PLAYGROUND}>\n            Want to share this playground via link?\n            <br />\n          </PlusLoginBanner>\n        )}\n      </section>\n    </form>\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useSearchParams } from \"react-router-dom\";\nimport useSWRImmutable from \"swr/immutable\";\nimport { Button } from \"../ui/atoms/button\";\nimport { SidePlacement } from \"../ui/organisms/placement\";\nimport { decompressFromBase64, EditorContent, SESSION_KEY } from \"./utils\";\n\nimport \"./index.scss\";\nimport { FlagForm, ShareForm } from \"./forms\";\nimport { PlayController, ReactPlayController } from \"../lit/play/controller\";\nimport { ReactPlayEditor } from \"../lit/play/editor\";\nimport { ReactPlayConsole } from \"../lit/play/console\";\nimport { ReactPlayRunner } from \"../lit/play/runner\";\nimport { useGleanClick } from \"../telemetry/glean-context\";\nimport { PLAYGROUND } from \"../telemetry/constants\";\n\nconst HTML_DEFAULT = \"\";\nconst CSS_DEFAULT = \"\";\nconst JS_DEFAULT = \"\";\n\nenum State {\n  initial,\n  ready,\n  remote,\n}\n\nenum DialogState {\n  none,\n  share,\n  flag,\n}\n\nasync function save(editorContent: EditorContent) {\n  const res = await fetch(\"/api/v1/play/\", {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify(editorContent),\n  });\n  let { id } = await res.json();\n  let url = new URL(document.URL);\n  url.search = new URLSearchParams([[\"id\", id]]).toString();\n  return { url, id };\n}\n\nfunction store(session: string, editorContent: EditorContent) {\n  sessionStorage.setItem(session, JSON.stringify(editorContent));\n}\n\nfunction load(session: string) {\n  let code = JSON.parse(sessionStorage.getItem(session) || \"{}\");\n  return {\n    html: code?.html || HTML_DEFAULT,\n    css: code?.css || CSS_DEFAULT,\n    js: code?.js || JS_DEFAULT,\n    src: code?.src,\n  };\n}\n\nexport default function Playground() {\n  const gleanClick = useGleanClick();\n  let [searchParams, setSearchParams] = useSearchParams();\n  const gistId = searchParams.get(\"id\");\n  const stateParam = searchParams.get(\"state\");\n  let [dialogState, setDialogState] = useState(DialogState.none);\n  let [shared, setShared] = useState(false);\n  let [shareUrl, setShareUrl] = useState<URL | null>(null);\n  let [state, setState] = useState(State.initial);\n  const [isShareable, setIsShareable] = useState<boolean>(true);\n  const [isClearable, setIsClearable] = useState<boolean>(true);\n  const [initialContent, setInitialContent] = useState<EditorContent | null>(\n    null\n  );\n  let { data: initialCode } = useSWRImmutable<EditorContent>(\n    !stateParam && !shared && gistId\n      ? `/api/v1/play/${encodeURIComponent(gistId)}`\n      : null,\n    async (url) => {\n      const response = await fetch(url);\n\n      if (!response.ok) {\n        throw Error(response.statusText);\n      }\n      gleanClick(`${PLAYGROUND}: load-shared`);\n\n      const code = await response.json();\n      if (code) {\n        setState(State.remote);\n        return code;\n      }\n      return null;\n    },\n    {\n      fallbackData:\n        (!stateParam &&\n          !gistId &&\n          state === State.initial &&\n          load(SESSION_KEY)) ||\n        undefined,\n    }\n  );\n  const controller = useRef<PlayController | null>(null);\n  const diaRef = useRef<HTMLDialogElement | null>(null);\n\n  useEffect(() => {\n    if (initialCode) {\n      store(SESSION_KEY, initialCode);\n      if (Object.values(initialCode).some(Boolean)) {\n        setInitialContent(structuredClone(initialCode));\n      }\n    }\n  }, [initialCode, setInitialContent]);\n\n  const getEditorContent = useCallback(() => {\n    return {\n      html: controller.current?.code.html || HTML_DEFAULT,\n      css: controller.current?.code.css || CSS_DEFAULT,\n      js: controller.current?.code.js || JS_DEFAULT,\n      src: initialCode?.src || initialContent?.src,\n    };\n  }, [initialContent?.src, initialCode?.src]);\n\n  const setIsEmpty = useCallback((content: EditorContent) => {\n    const { html, css, js } = content;\n    setIsShareable(!html.trim() && !css.trim() && !js.trim());\n    setIsClearable(!html && !css && !js);\n  }, []);\n\n  const setEditorContent = useCallback(\n    (content: EditorContent) => {\n      if (controller.current) {\n        controller.current.code = { ...content };\n        if (content.src) {\n          controller.current.srcPrefix = content.src;\n        }\n        setIsEmpty(content);\n        store(SESSION_KEY, content);\n      }\n    },\n    [setIsEmpty]\n  );\n\n  useEffect(() => {\n    (async () => {\n      if (state === State.initial || state === State.remote) {\n        if (initialCode && Object.values(initialCode).some(Boolean)) {\n          setEditorContent(initialCode);\n          if (!gistId) {\n            // don't auto run shared code\n            controller.current?.run();\n          }\n        } else if (stateParam) {\n          try {\n            let { state } = await decompressFromBase64(stateParam);\n            let code = JSON.parse(state || \"{}\") as EditorContent;\n            setEditorContent(code);\n          } catch (e) {\n            console.error(e);\n          }\n        } else {\n          setEditorContent({\n            html: HTML_DEFAULT,\n            css: CSS_DEFAULT,\n            js: JS_DEFAULT,\n          });\n        }\n        setState(State.ready);\n      }\n    })();\n  }, [initialCode, state, gistId, stateParam, setEditorContent]);\n\n  const clear = async () => {\n    setSearchParams([], { replace: true });\n    setInitialContent(null);\n    setEditorContent({\n      html: HTML_DEFAULT,\n      css: CSS_DEFAULT,\n      js: JS_DEFAULT,\n      src: undefined,\n    });\n\n    run();\n  };\n\n  const reset = async () => {\n    setEditorContent({\n      html: initialContent?.html || HTML_DEFAULT,\n      css: initialContent?.css || CSS_DEFAULT,\n      js: initialContent?.js || JS_DEFAULT,\n    });\n\n    run();\n  };\n\n  const clearConfirm = async () => {\n    if (window.confirm(\"Do you really want to clear everything?\")) {\n      gleanClick(`${PLAYGROUND}: reset-click`);\n      await clear();\n    }\n  };\n\n  const resetConfirm = async () => {\n    if (window.confirm(\"Do you really want to revert your changes?\")) {\n      gleanClick(`${PLAYGROUND}: revert-click`);\n      await reset();\n    }\n  };\n\n  const run = () => {\n    const loading = [\n      {},\n      {\n        backgroundColor: \"var(--background-mark-green)\",\n      },\n      {},\n    ];\n    const timing = {\n      duration: 1000,\n      iterations: 1,\n    };\n    document.getElementById(\"run\")?.firstElementChild?.animate(loading, timing);\n    controller.current?.run();\n  };\n\n  const format = async () => {\n    await controller.current?.format();\n  };\n\n  const share = useCallback(async () => {\n    const { url, id } = await save(getEditorContent());\n    setSearchParams([[\"id\", id]], { replace: true });\n    setShared(true);\n    setShareUrl(url);\n  }, [setSearchParams, setShareUrl, setShared, getEditorContent]);\n\n  const cleanDialog = () => {\n    if (dialogState === DialogState.share) {\n      setShareUrl(null);\n    }\n  };\n\n  const onEditorUpdate = () => {\n    const code = getEditorContent();\n    setIsEmpty(code);\n    store(SESSION_KEY, code);\n  };\n\n  return (\n    <ReactPlayController ref={controller} runOnChange={true}>\n      <main className=\"play container\">\n        <dialog id=\"playDialog\" ref={diaRef} onClose={cleanDialog}>\n          {dialogState === DialogState.flag && <FlagForm gistId={gistId} />}\n          {dialogState === DialogState.share && (\n            <ShareForm url={shareUrl} code={getEditorContent} share={share} />\n          )}\n        </dialog>\n        <section className=\"editors\">\n          <aside>\n            <h1>Playground</h1>\n            <menu>\n              <Button type=\"secondary\" id=\"format\" onClickHandler={format}>\n                format\n              </Button>\n              <Button type=\"secondary\" id=\"run\" onClickHandler={run}>\n                run\n              </Button>\n              <Button\n                type=\"secondary\"\n                id=\"share\"\n                isDisabled={isShareable}\n                onClickHandler={() => {\n                  gleanClick(`${PLAYGROUND}: share-click`);\n                  setDialogState(DialogState.share);\n                  diaRef.current?.showModal();\n                }}\n              >\n                share\n              </Button>\n              <Button\n                type=\"secondary\"\n                isDisabled={isClearable}\n                id=\"clear\"\n                extraClasses=\"red\"\n                onClickHandler={clearConfirm}\n              >\n                clear\n              </Button>\n              {initialContent && (\n                <Button\n                  type=\"secondary\"\n                  id=\"reset\"\n                  extraClasses=\"red\"\n                  onClickHandler={resetConfirm}\n                >\n                  reset\n                </Button>\n              )}\n            </menu>\n          </aside>\n          <details className=\"editor-container\" open={true}>\n            <summary>HTML</summary>\n            <ReactPlayEditor\n              language=\"html\"\n              onUpdate={onEditorUpdate}\n            ></ReactPlayEditor>\n          </details>\n          <details className=\"editor-container\" open={true}>\n            <summary>CSS</summary>\n            <ReactPlayEditor\n              language=\"css\"\n              onUpdate={onEditorUpdate}\n            ></ReactPlayEditor>\n          </details>\n          <details className=\"editor-container\" open={true}>\n            <summary>JAVASCRIPT</summary>\n            <ReactPlayEditor\n              language=\"js\"\n              onUpdate={onEditorUpdate}\n            ></ReactPlayEditor>\n          </details>\n        </section>\n        <section className=\"preview\">\n          {gistId && (\n            <button\n              className=\"flag-example\"\n              onClick={(e) => {\n                e.preventDefault();\n                gleanClick(`${PLAYGROUND}: flag-click`);\n                setDialogState(DialogState.flag);\n                diaRef.current?.showModal();\n              }}\n            >\n              Seeing something inappropriate?\n            </button>\n          )}\n          <ReactPlayRunner />\n          <div id=\"play-console\">\n            <span>Console</span>\n            <ReactPlayConsole />\n          </div>\n          <SidePlacement extraClasses={[\"horizontal\"]} />\n        </section>\n      </main>\n    </ReactPlayController>\n  );\n}\n","import { useGleanClick } from \"../../telemetry/glean-context\";\nimport { AuthContainer } from \"../../ui/molecules/auth-container\";\nimport { usePlusUrl } from \"../utils\";\nimport \"./login-banner.scss\";\n\nexport function PlusLoginBanner({\n  children,\n  className = \"login-banner\",\n  gleanPrefix,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  gleanPrefix: string;\n}) {\n  const href = usePlusUrl();\n  const gleanClick = useGleanClick();\n\n  return (\n    <div className={className}>\n      <span>\n        <span>{children}</span>{\" \"}\n        <strong>\n          Upgrade to{\" \"}\n          <a\n            className=\"plus-link\"\n            href={href}\n            onClick={() => gleanClick(`${gleanPrefix}: banner-link`)}\n          >\n            MDN Plus\n          </a>{\" \"}\n          for free.\n        </strong>\n      </span>\n      <AuthContainer\n        logInGleanContext={`${gleanPrefix}: banner-login`}\n        signUpGleanContext={`${gleanPrefix}: banner-signup`}\n      />\n    </div>\n  );\n}\n","import useSWR from '../index/index.mjs';\nimport { withMiddleware } from '../_internal/index.mjs';\n\nconst immutable = (useSWRNext)=>(key, fetcher, config)=>{\n        // Always override all revalidate options.\n        config.revalidateOnFocus = false;\n        config.revalidateIfStale = false;\n        config.revalidateOnReconnect = false;\n        return useSWRNext(key, fetcher, config);\n    };\nconst useSWRImmutable = withMiddleware(useSWR, immutable);\n\nexport { useSWRImmutable as default, immutable };\n"],"names":["FlagForm","param","gistId","Button","e","_document_getElementById_closest","fetch","JSON","document","a","ShareForm","url","share","code","userData","useUserData","gleanClick","useGleanClick","_useState","loading","setLoading","PLAYGROUND","navigator","codeToMarkdown","Loading","PlusLoginBanner","store","session","editorContent","sessionStorage","Playground","_useSearchParams","searchParams","setSearchParams","stateParam","dialogState","setDialogState","_useState1","shared","setShared","_useState2","shareUrl","setShareUrl","_useState3","state","setState","_useState4","isShareable","setIsShareable","_useState5","isClearable","setIsClearable","_useState6","initialContent","setInitialContent","initialCode","_useSWRImmutable","encodeURIComponent","response","Error","SESSION_KEY","undefined","controller","useRef","diaRef","useEffect","Object","Boolean","structuredClone","getEditorContent","useCallback","_controller_current","_controller_current1","_controller_current2","setIsEmpty","content","html","css","js","setEditorContent","decompressFromBase64","state1","console","run","_document_getElementById_firstElementChild","_ref","id","res","URL","URLSearchParams","onEditorUpdate","ReactPlayController","_diaRef_current","window","ReactPlayEditor","ReactPlayRunner","ReactPlayConsole","SidePlacement","children","className","gleanPrefix","href","usePlusUrl","AuthContainer"],"mappings":"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"}
+{"version":3,"file":"1289.61e3f0658b3b42f6.js","sources":["webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/playground/forms.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/playground/index.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/common/login-banner.tsx","webpack://@mdn/fred/./node_modules/swr/dist/immutable/index.mjs"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"../ui/atoms/button\";\nimport { EditorContent, codeToMarkdown } from \"./utils\";\nimport { Loading } from \"../ui/atoms/loading\";\nimport { useUserData } from \"../user-context\";\nimport { useGleanClick } from \"../telemetry/glean-context\";\nimport { PLAYGROUND } from \"../telemetry/constants\";\nimport { PlusLoginBanner } from \"../plus/common/login-banner\";\n\nexport function FlagForm({ gistId }: { gistId: string | null }) {\n  return (\n    <form className=\"flag\">\n      <span>\n        Report this malicious or inappropriate shared playground. Can you please\n        share some details on what's wrong with this content:\n      </span>\n      <textarea id=\"flagReason\"></textarea>\n      <div className=\"buttons\">\n        <Button\n          id=\"flag-cancel\"\n          value=\"cancel\"\n          type=\"secondary\"\n          buttonType=\"submit\"\n          formMethod=\"dialog\"\n        >\n          Cancel\n        </Button>\n        <Button\n          id=\"flag-send\"\n          onClickHandler={async (e) => {\n            e.preventDefault();\n            await fetch(\"/api/v1/play/flag\", {\n              method: \"POST\",\n              headers: {\n                \"Content-Type\": \"application/json\",\n              },\n              body: JSON.stringify({\n                id: gistId,\n                reason: (\n                  document.getElementById(\"flagReason\") as HTMLTextAreaElement\n                ).value,\n              }),\n            });\n            document.getElementById(\"flag-send\")?.closest(\"dialog\")?.close();\n          }}\n          value=\"default\"\n        >\n          Report\n        </Button>\n      </div>\n    </form>\n  );\n}\n\nexport function ShareForm({\n  url,\n  share,\n  code,\n}: {\n  url: URL | null;\n  share?: () => Promise<void>;\n  code?: () => EditorContent;\n  extraClasses?: string;\n}) {\n  let userData = useUserData();\n  const gleanClick = useGleanClick();\n  let [loading, setLoading] = useState(false);\n  return (\n    <form className=\"share\">\n      <Button\n        id=\"share-cancel\"\n        title=\"Cancel\"\n        extraClasses=\"action\"\n        value=\"cancel\"\n        icon=\"cancel\"\n        buttonType=\"submit\"\n        formMethod=\"dialog\"\n      ></Button>\n      <section>\n        <span>Share Markdown</span>\n        <Button\n          type=\"secondary\"\n          onClickHandler={async () => {\n            gleanClick(`${PLAYGROUND}: share-markdown`);\n            code &&\n              (await navigator.clipboard.writeText(codeToMarkdown(code())));\n          }}\n        >\n          Copy markdown to clipboard\n        </Button>\n      </section>\n      <section id=\"share-link\">\n        <span>Share your code via Permalink</span>\n        {userData?.isAuthenticated ? (\n          <>\n            {url ? (\n              loading ? (\n                <Loading />\n              ) : (\n                <>\n                  <input value={url.toString()} />\n                  <Button\n                    type=\"secondary\"\n                    onClickHandler={async () => {\n                      url &&\n                        (await navigator.clipboard.writeText(url.toString()));\n                    }}\n                  >\n                    Copy to clipboard\n                  </Button>\n                </>\n              )\n            ) : (\n              <Button\n                onClickHandler={async () => {\n                  setLoading(true);\n                  gleanClick(`${PLAYGROUND}: share-permalink`);\n                  await share?.();\n                  setLoading(false);\n                }}\n              >\n                Create link\n              </Button>\n            )}\n          </>\n        ) : (\n          <PlusLoginBanner className=\"share-get-plus\" gleanPrefix={PLAYGROUND}>\n            Want to share this playground via link?\n            <br />\n          </PlusLoginBanner>\n        )}\n      </section>\n    </form>\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useSearchParams } from \"react-router-dom\";\nimport useSWRImmutable from \"swr/immutable\";\nimport { Button } from \"../ui/atoms/button\";\nimport { SidePlacement } from \"../ui/organisms/placement\";\nimport { decompressFromBase64, EditorContent, SESSION_KEY } from \"./utils\";\n\nimport \"./index.scss\";\nimport { FlagForm, ShareForm } from \"./forms\";\nimport { PlayController, ReactPlayController } from \"../lit/play/controller\";\nimport { ReactPlayEditor } from \"../lit/play/editor\";\nimport { ReactPlayConsole } from \"../lit/play/console\";\nimport { ReactPlayRunner } from \"../lit/play/runner\";\nimport { useGleanClick } from \"../telemetry/glean-context\";\nimport { PLAYGROUND } from \"../telemetry/constants\";\n\nconst HTML_DEFAULT = \"\";\nconst CSS_DEFAULT = \"\";\nconst JS_DEFAULT = \"\";\n\nenum State {\n  initial,\n  ready,\n  remote,\n}\n\nenum DialogState {\n  none,\n  share,\n  flag,\n}\n\nasync function save(editorContent: EditorContent) {\n  const res = await fetch(\"/api/v1/play/\", {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify(editorContent),\n  });\n  let { id } = await res.json();\n  let url = new URL(document.URL);\n  url.search = new URLSearchParams([[\"id\", id]]).toString();\n  return { url, id };\n}\n\nfunction store(session: string, editorContent: EditorContent) {\n  sessionStorage.setItem(session, JSON.stringify(editorContent));\n}\n\nfunction load(session: string) {\n  let code = JSON.parse(sessionStorage.getItem(session) || \"{}\");\n  return {\n    html: code?.html || HTML_DEFAULT,\n    css: code?.css || CSS_DEFAULT,\n    js: code?.js || JS_DEFAULT,\n    src: code?.src,\n  };\n}\n\nexport default function Playground() {\n  const gleanClick = useGleanClick();\n  let [searchParams, setSearchParams] = useSearchParams();\n  const gistId = searchParams.get(\"id\");\n  const stateParam = searchParams.get(\"state\");\n  let [dialogState, setDialogState] = useState(DialogState.none);\n  let [shared, setShared] = useState(false);\n  let [shareUrl, setShareUrl] = useState<URL | null>(null);\n  let [state, setState] = useState(State.initial);\n  const [isShareable, setIsShareable] = useState<boolean>(true);\n  const [isClearable, setIsClearable] = useState<boolean>(true);\n  const [initialContent, setInitialContent] = useState<EditorContent | null>(\n    null\n  );\n  let { data: initialCode } = useSWRImmutable<EditorContent>(\n    !stateParam && !shared && gistId\n      ? `/api/v1/play/${encodeURIComponent(gistId)}`\n      : null,\n    async (url) => {\n      const response = await fetch(url);\n\n      if (!response.ok) {\n        throw Error(response.statusText);\n      }\n      gleanClick(`${PLAYGROUND}: load-shared`);\n\n      const code = await response.json();\n      if (code) {\n        setState(State.remote);\n        return code;\n      }\n      return null;\n    },\n    {\n      fallbackData:\n        (!stateParam &&\n          !gistId &&\n          state === State.initial &&\n          load(SESSION_KEY)) ||\n        undefined,\n    }\n  );\n  const controller = useRef<PlayController | null>(null);\n  const diaRef = useRef<HTMLDialogElement | null>(null);\n\n  useEffect(() => {\n    if (initialCode) {\n      store(SESSION_KEY, initialCode);\n      if (Object.values(initialCode).some(Boolean)) {\n        setInitialContent(structuredClone(initialCode));\n      }\n    }\n  }, [initialCode, setInitialContent]);\n\n  const getEditorContent = useCallback(() => {\n    return {\n      html: controller.current?.code.html || HTML_DEFAULT,\n      css: controller.current?.code.css || CSS_DEFAULT,\n      js: controller.current?.code.js || JS_DEFAULT,\n      src: initialCode?.src || initialContent?.src,\n    };\n  }, [initialContent?.src, initialCode?.src]);\n\n  const setIsEmpty = useCallback((content: EditorContent) => {\n    const { html, css, js } = content;\n    setIsShareable(!html.trim() && !css.trim() && !js.trim());\n    setIsClearable(!html && !css && !js);\n  }, []);\n\n  const setEditorContent = useCallback(\n    (content: EditorContent) => {\n      if (controller.current) {\n        controller.current.code = { ...content };\n        if (content.src) {\n          controller.current.srcPrefix = content.src;\n        }\n        setIsEmpty(content);\n        store(SESSION_KEY, content);\n      }\n    },\n    [setIsEmpty]\n  );\n\n  useEffect(() => {\n    (async () => {\n      if (state === State.initial || state === State.remote) {\n        if (initialCode && Object.values(initialCode).some(Boolean)) {\n          setEditorContent(initialCode);\n          if (!gistId) {\n            // don't auto run shared code\n            controller.current?.run();\n          }\n        } else if (stateParam) {\n          try {\n            let { state } = await decompressFromBase64(stateParam);\n            let code = JSON.parse(state || \"{}\") as EditorContent;\n            setEditorContent(code);\n          } catch (e) {\n            console.error(e);\n          }\n        } else {\n          setEditorContent({\n            html: HTML_DEFAULT,\n            css: CSS_DEFAULT,\n            js: JS_DEFAULT,\n          });\n        }\n        setState(State.ready);\n      }\n    })();\n  }, [initialCode, state, gistId, stateParam, setEditorContent]);\n\n  const clear = async () => {\n    setSearchParams([], { replace: true });\n    setInitialContent(null);\n    setEditorContent({\n      html: HTML_DEFAULT,\n      css: CSS_DEFAULT,\n      js: JS_DEFAULT,\n      src: undefined,\n    });\n\n    run();\n  };\n\n  const reset = async () => {\n    setEditorContent({\n      html: initialContent?.html || HTML_DEFAULT,\n      css: initialContent?.css || CSS_DEFAULT,\n      js: initialContent?.js || JS_DEFAULT,\n    });\n\n    run();\n  };\n\n  const clearConfirm = async () => {\n    if (window.confirm(\"Do you really want to clear everything?\")) {\n      gleanClick(`${PLAYGROUND}: reset-click`);\n      await clear();\n    }\n  };\n\n  const resetConfirm = async () => {\n    if (window.confirm(\"Do you really want to revert your changes?\")) {\n      gleanClick(`${PLAYGROUND}: revert-click`);\n      await reset();\n    }\n  };\n\n  const run = () => {\n    const loading = [\n      {},\n      {\n        backgroundColor: \"var(--background-mark-green)\",\n      },\n      {},\n    ];\n    const timing = {\n      duration: 1000,\n      iterations: 1,\n    };\n    document.getElementById(\"run\")?.firstElementChild?.animate(loading, timing);\n    controller.current?.run();\n  };\n\n  const format = async () => {\n    await controller.current?.format();\n  };\n\n  const share = useCallback(async () => {\n    const { url, id } = await save(getEditorContent());\n    setSearchParams([[\"id\", id]], { replace: true });\n    setShared(true);\n    setShareUrl(url);\n  }, [setSearchParams, setShareUrl, setShared, getEditorContent]);\n\n  const cleanDialog = () => {\n    if (dialogState === DialogState.share) {\n      setShareUrl(null);\n    }\n  };\n\n  const onEditorUpdate = () => {\n    const code = getEditorContent();\n    setIsEmpty(code);\n    store(SESSION_KEY, code);\n  };\n\n  return (\n    <ReactPlayController ref={controller} runOnChange={true}>\n      <main className=\"play container\">\n        <dialog id=\"playDialog\" ref={diaRef} onClose={cleanDialog}>\n          {dialogState === DialogState.flag && <FlagForm gistId={gistId} />}\n          {dialogState === DialogState.share && (\n            <ShareForm url={shareUrl} code={getEditorContent} share={share} />\n          )}\n        </dialog>\n        <section className=\"editors\">\n          <aside>\n            <h1>Playground</h1>\n            <menu>\n              <Button type=\"secondary\" id=\"format\" onClickHandler={format}>\n                format\n              </Button>\n              <Button type=\"secondary\" id=\"run\" onClickHandler={run}>\n                run\n              </Button>\n              <Button\n                type=\"secondary\"\n                id=\"share\"\n                isDisabled={isShareable}\n                onClickHandler={() => {\n                  gleanClick(`${PLAYGROUND}: share-click`);\n                  setDialogState(DialogState.share);\n                  diaRef.current?.showModal();\n                }}\n              >\n                share\n              </Button>\n              <Button\n                type=\"secondary\"\n                isDisabled={isClearable}\n                id=\"clear\"\n                extraClasses=\"red\"\n                onClickHandler={clearConfirm}\n              >\n                clear\n              </Button>\n              {initialContent && (\n                <Button\n                  type=\"secondary\"\n                  id=\"reset\"\n                  extraClasses=\"red\"\n                  onClickHandler={resetConfirm}\n                >\n                  reset\n                </Button>\n              )}\n            </menu>\n          </aside>\n          <details className=\"editor-container\" open={true}>\n            <summary>HTML</summary>\n            <ReactPlayEditor\n              language=\"html\"\n              onUpdate={onEditorUpdate}\n            ></ReactPlayEditor>\n          </details>\n          <details className=\"editor-container\" open={true}>\n            <summary>CSS</summary>\n            <ReactPlayEditor\n              language=\"css\"\n              onUpdate={onEditorUpdate}\n            ></ReactPlayEditor>\n          </details>\n          <details className=\"editor-container\" open={true}>\n            <summary>JAVASCRIPT</summary>\n            <ReactPlayEditor\n              language=\"js\"\n              onUpdate={onEditorUpdate}\n            ></ReactPlayEditor>\n          </details>\n        </section>\n        <section className=\"preview\">\n          {gistId && (\n            <button\n              className=\"flag-example\"\n              onClick={(e) => {\n                e.preventDefault();\n                gleanClick(`${PLAYGROUND}: flag-click`);\n                setDialogState(DialogState.flag);\n                diaRef.current?.showModal();\n              }}\n            >\n              Seeing something inappropriate?\n            </button>\n          )}\n          <ReactPlayRunner />\n          <div id=\"play-console\">\n            <span>Console</span>\n            <ReactPlayConsole />\n          </div>\n          <SidePlacement extraClasses={[\"horizontal\"]} />\n        </section>\n      </main>\n    </ReactPlayController>\n  );\n}\n","import { useGleanClick } from \"../../telemetry/glean-context\";\nimport { AuthContainer } from \"../../ui/molecules/auth-container\";\nimport { usePlusUrl } from \"../utils\";\nimport \"./login-banner.scss\";\n\nexport function PlusLoginBanner({\n  children,\n  className = \"login-banner\",\n  gleanPrefix,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  gleanPrefix: string;\n}) {\n  const href = usePlusUrl();\n  const gleanClick = useGleanClick();\n\n  return (\n    <div className={className}>\n      <span>\n        <span>{children}</span>{\" \"}\n        <strong>\n          Upgrade to{\" \"}\n          <a\n            className=\"plus-link\"\n            href={href}\n            onClick={() => gleanClick(`${gleanPrefix}: banner-link`)}\n          >\n            MDN Plus\n          </a>{\" \"}\n          for free.\n        </strong>\n      </span>\n      <AuthContainer\n        logInGleanContext={`${gleanPrefix}: banner-login`}\n        signUpGleanContext={`${gleanPrefix}: banner-signup`}\n      />\n    </div>\n  );\n}\n","import useSWR from '../index/index.mjs';\nimport { withMiddleware } from '../_internal/index.mjs';\n\nconst immutable = (useSWRNext)=>(key, fetcher, config)=>{\n        // Always override all revalidate options.\n        config.revalidateOnFocus = false;\n        config.revalidateIfStale = false;\n        config.revalidateOnReconnect = false;\n        return useSWRNext(key, fetcher, config);\n    };\nconst useSWRImmutable = withMiddleware(useSWR, immutable);\n\nexport { useSWRImmutable as default, immutable };\n"],"names":["FlagForm","param","gistId","Button","e","_document_getElementById_closest","fetch","JSON","document","a","ShareForm","url","share","code","userData","useUserData","gleanClick","useGleanClick","_useState","loading","setLoading","PLAYGROUND","navigator","codeToMarkdown","Loading","PlusLoginBanner","store","session","editorContent","sessionStorage","Playground","_useSearchParams","searchParams","setSearchParams","stateParam","dialogState","setDialogState","_useState1","shared","setShared","_useState2","shareUrl","setShareUrl","_useState3","state","setState","_useState4","isShareable","setIsShareable","_useState5","isClearable","setIsClearable","_useState6","initialContent","setInitialContent","initialCode","_useSWRImmutable","encodeURIComponent","response","Error","SESSION_KEY","undefined","controller","useRef","diaRef","useEffect","Object","Boolean","structuredClone","getEditorContent","useCallback","_controller_current","_controller_current1","_controller_current2","setIsEmpty","content","html","css","js","setEditorContent","decompressFromBase64","state1","console","run","_document_getElementById_firstElementChild","_ref","id","res","URL","URLSearchParams","onEditorUpdate","ReactPlayController","_diaRef_current","window","ReactPlayEditor","ReactPlayRunner","ReactPlayConsole","SidePlacement","children","className","gleanPrefix","href","usePlusUrl","AuthContainer"],"mappings":"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"}

package/out/static/legacy/{2090.29b77e88722868ff.js → 2090.5996133ea26ddd0a.js}

@@ -1,2 +1,2 @@
-export const __webpack_id__="2090";export const __webpack_ids__=["2090"];export const __webpack_modules__={6549:function(e,t,n){e.exports=n(41281)},41281:function(e,t,n){var r=n(96540);t.default=function(e,t){var n=r.useRef();r.useEffect(function(){n.current=e},[e]),r.useEffect(function(){if(null!==t){var e=setInterval(function(){return n.current.apply(n,arguments)},t);return function(){return clearInterval(e)}}},[t])}},26097:function(e,t,n){n.r(t),n.d(t,{default:()=>N});var r=n(29494),l=n(28387),a=n(6549),o=n(96540),u=n(14132),i=n(96540);function c(e){var t,n,r,l,a,o=e.updateStatus,c=e.update,s=e.disabled,d=void 0!==s&&s,f=(null==o||null==(t=o.local)?void 0:t.date)&&"Last updated: ".concat(Intl.DateTimeFormat([],{dateStyle:"medium"}).format(Date.parse(null==o||null==(n=o.local)?void 0:n.date))),m=null;switch(null==o?void 0:o.phase){case u.Jz.INITIAL:r="Checking for updates";break;case u.Jz.IDLE:(null==o||null==(l=o.local)?void 0:l.version)===(null==o||null==(a=o.remote)?void 0:a.latest)?(r="Your content is up to date",m=i.createElement("button",{disabled:!0},"Up to date")):(null==o?void 0:o.local)?(r="Update available",m=i.createElement("button",{className:"button",onClick:c,disabled:d}," ","Update now")):(r="Start using MDN Offline by downloading the latest version of MDN Web Docs",m=i.createElement("button",{className:"button",onClick:c,disabled:d}," ","Download"));break;case u.Jz.DOWNLOAD:r=(null==o?void 0:o.local)?"Update in progress…":"Download in progress…",m=i.createElement("button",{disabled:d},"Downloading…");break;case u.Jz.UNPACK:r=(null==o?void 0:o.local)?"Update in progress…":"Download in progress…";var p=100*((null==o?void 0:o.progress)||0);m=i.createElement("button",{disabled:d},"Unpacking…"," ",null==p?void 0:p.toLocaleString(void 0,{maximumFractionDigits:0}),"%");break;case u.Jz.CLEAR:r="Clearing…"}return i.createElement("section",{"aria-labelledby":"update-status"},i.createElement("h3",{id:"update-status"},"Update status"),i.createElement("div",{className:"setting-row"},i.createElement("span",null,f,f&&i.createElement("br",null),r),m))}var s=n(96540);function d(e){var t,n=e.updateStatus,r=e.clear,l=e.disabled;return t=(null==n?void 0:n.phase)===u.Jz.IDLE&&(null==n?void 0:n.local)?s.createElement("button",{className:"button",onClick:r,disabled:void 0!==l&&l},"Clear data"):(null==n?void 0:n.phase)===u.Jz.CLEAR?s.createElement("button",{disabled:!0},"Clearing…"):s.createElement("button",{className:"button",disabled:!0},"Clear data"),s.createElement(s.Fragment,null,t)}var f=n(20773),m=n(40967),p=n(5592),b=n(23425),v=n(47263),g=n(3053),E=n(96540);function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function y(e,t,n,r,l,a,o){try{var u=e[a](o),i=u.value}catch(e){n(e);return}u.done?t(i):Promise.resolve(i).then(r,l)}function w(e){return function(){var t=this,n=arguments;return new Promise(function(r,l){var a=e.apply(t,n);function o(e){y(a,r,l,o,u,"next",e)}function u(e){y(a,r,l,o,u,"throw",e)}o(void 0)})}}function k(){return(k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function D(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n,r,l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var a=[],o=!0,u=!1;try{for(l=l.call(e);!(o=(n=l.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){u=!0,r=e}finally{try{o||null==l.return||l.return()}finally{if(u)throw r}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return h(e,t)}}(e,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(e,t){var n,r,l,a={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=u(0),o.throw=u(1),o.return=u(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function u(u){return function(i){var c=[u,i];if(n)throw TypeError("Generator is already executing.");for(;o&&(o=0,c[0]&&(a=0)),a;)try{if(n=1,r&&(l=2&c[0]?r.return:c[0]?r.throw||((l=r.return)&&l.call(r),0):r.next)&&!(l=l.call(r,c[1])).done)return l;switch(r=0,l&&(c=[2&c[0],l.value]),c[0]){case 0:case 1:l=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,r=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!(l=(l=a.trys).length>0&&l[l.length-1])&&(6===c[0]||2===c[0])){a=0;continue}if(3===c[0]&&(!l||c[1]>l[0]&&c[1]<l[3])){a.label=c[1];break}if(6===c[0]&&a.label<l[1]){a.label=l[1],l=c;break}if(l&&a.label<l[2]){a.label=l[2],a.ops.push(c);break}l[2]&&a.ops.pop(),a.trys.pop();continue}c=t.call(e,a)}catch(e){c=[6,e],r=0}finally{n=l=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}function N(e){k({},function(e){if(null==e)throw TypeError("Cannot destructure "+e);return e}(e));var t,n,r=null==(n=window)||null==(t=n.navigator)?void 0:t.serviceWorker,l=(0,p.P_)(),a=(0,b.Ym)();return E.createElement("section",{className:"field-group"},E.createElement("h2",null,"Offline Access"),(null==l?void 0:l.isSubscriber)?r?E.createElement(O,null):E.createElement(E.Fragment,null,E.createElement("h3",null,"Offline mode is unavailable ")," ",E.createElement("p",null,"Please make sure that you are not using a private or incognito window.")):E.createElement(E.Fragment,null,"MDN Offline is only available to MDN Plus subscribers."," ",E.createElement("a",{href:"/".concat(a,"/plus#subscribe")},"Learn more")," about our plans."))}function O(){document.title="Settings | ".concat(m.U6);var e,t,n,i,s,p=D((0,o.useState)(),2),b=p[0],h=p[1],y=D((0,o.useState)(!0),2),k=y[0],N=y[1],O=D((0,o.useState)(null),2),I=O[0],A=O[1],C=D((0,o.useState)(),2),M=C[0],_=C[1],U=(0,o.useRef)(!1),x=(0,g.db)();(0,o.useEffect)(function(){w(function(){var e,t,n,r;return S(this,function(a){switch(a.label){case 0:return[4,(r=(0,l.getMDNWorker)()).offlineSettings()];case 1:return _.apply(void 0,[a.sent()]),[4,null==(n=navigator)||null==(t=n.storage)||null==(e=t.estimate)?void 0:e.call(t)];case 2:return A.apply(void 0,[a.sent()]),r.checkForUpdate(),[2]}})})().then(function(){})},[]),(0,o.useEffect)(function(){w(function(){return S(this,function(e){return N(!1),[2]})})()},[M]),(0,o.useEffect)(function(){var e=(0,l.getMDNWorker)(),t=null!=b&&!!b.phase&&![u.Jz.INITIAL,u.Jz.IDLE].includes(null==b?void 0:b.phase);if(e.toggleKeepAlive(t),t){var n=function(e){e.preventDefault(),e.returnValue=""};return window.addEventListener("beforeunload",n),function(){return window.removeEventListener("beforeunload",n)}}},[null==b?void 0:b.phase]);var L=function(e){return w(function(){return S(this,function(t){switch(t.label){case 0:return N(!0),[4,(0,l.getMDNWorker)().setOfflineSettings(e)];case 1:return _(t.sent()),[2]}})})()};(0,a.default)(function(){return w(function(){return S(this,function(e){switch(e.label){case 0:return[4,(0,l.getMDNWorker)().status()];case 1:return h(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},e.sent())),[2]}})})()},500);var j=function(){(0,l.getMDNWorker)().update(),h(b)};(null==M?void 0:M.autoUpdates)&&(null==b||null==(n=b.remote)?void 0:n.latest)!==(null==b||null==(i=b.local)?void 0:i.version)&&!U.current&&(j(),U.current=!0);var P=I&&(e=I.usage,I.quota,t=Math.round((void 0===e?0:e)/1048576),"".concat(t," MiB"));return E.createElement("ul",null,E.createElement("li",null,E.createElement("section",{"aria-labelledby":"offline-storage"},E.createElement("h3",{id:"offline-storage"},"MDN Offline Storage"),E.createElement("div",{className:"setting-row"},E.createElement("span",null,"Enable storage to allow MDN content download for offline reading."),!0===k&&E.createElement(f.y,{extraClasses:"loading"})||E.createElement(r.d,{name:"offline",checked:(null==M?void 0:M.offline)||!1,toggle:function(e){x(e.target.checked?v.wF:v.l5),L({offline:e.target.checked})}})))),(null==M?void 0:M.offline)&&E.createElement(E.Fragment,null,E.createElement("li",null,E.createElement("section",{"aria-labelledby":"prefer-online-content"},E.createElement("h3",null,"Prefer online content"),E.createElement("div",{className:"setting-row"},E.createElement("span",null,"Do not use offline content while connected to the internet"),!0===k&&E.createElement(f.y,{extraClasses:"loading"})||E.createElement(r.d,{name:"prefer-online",checked:(null==M?void 0:M.preferOnline)||!1,toggle:function(e){return L({preferOnline:e.target.checked})}})))),E.createElement("li",null,E.createElement(c,{disabled:k,updateStatus:b||null,update:j})),E.createElement("li",null,E.createElement("section",{"aria-labelledby":"enable-auto-update"},E.createElement("h3",{id:"enable-auto-update"},"Enable auto-update"),E.createElement("div",{className:"setting-row"},E.createElement("span",null,"Automatically download updates to content enabled for download"),!0===k&&E.createElement(f.y,{extraClasses:"loading"})||E.createElement(r.d,{name:"auto-update",checked:(null==M?void 0:M.autoUpdates)||!1,toggle:function(e){return L({autoUpdates:e.target.checked})}})))),(null==(s=window)?void 0:s.location.hash)==="#debug"&&E.createElement("li",null,E.createElement("section",{"aria-labelledby":"offline-debug"},E.createElement("h3",{id:"offline-debug"},"Debug"),E.createElement("span",{style:{fontFamily:"monospace",whiteSpace:"pre"}},JSON.stringify(b,null,2)))),P&&E.createElement("li",null,E.createElement("section",{"aria-labelledby":"storage-used"},E.createElement("h3",{id:"storage-used"},"Storage used"),E.createElement("span",null,"MDN Offline currently uses ",E.createElement("b",null,P)))),E.createElement("li",null,E.createElement(d,{disabled:k,updateStatus:b||null,clear:function(){return w(function(){return S(this,function(e){return window.confirm("All downloaded content will be removed from your device")&&((0,l.getMDNWorker)().clear(),h(b)),[2]})})()}}))))}}};
-//# sourceMappingURL=2090.29b77e88722868ff.js.map
+export const __webpack_id__="2090";export const __webpack_ids__=["2090"];export const __webpack_modules__={6549:function(e,t,n){e.exports=n(41281)},41281:function(e,t,n){var r=n(96540);t.default=function(e,t){var n=r.useRef();r.useEffect(function(){n.current=e},[e]),r.useEffect(function(){if(null!==t){var e=setInterval(function(){return n.current.apply(n,arguments)},t);return function(){return clearInterval(e)}}},[t])}},26097:function(e,t,n){n.r(t),n.d(t,{default:()=>N});var r=n(29494),l=n(28387),a=n(6549),o=n(96540),u=n(14132),i=n(96540);function c(e){var t,n,r,l,a,o=e.updateStatus,c=e.update,s=e.disabled,d=void 0!==s&&s,f=(null==o||null==(t=o.local)?void 0:t.date)&&"Last updated: ".concat(Intl.DateTimeFormat([],{dateStyle:"medium"}).format(Date.parse(null==o||null==(n=o.local)?void 0:n.date))),m=null;switch(null==o?void 0:o.phase){case u.Jz.INITIAL:r="Checking for updates";break;case u.Jz.IDLE:(null==o||null==(l=o.local)?void 0:l.version)===(null==o||null==(a=o.remote)?void 0:a.latest)?(r="Your content is up to date",m=i.createElement("button",{disabled:!0},"Up to date")):(null==o?void 0:o.local)?(r="Update available",m=i.createElement("button",{className:"button",onClick:c,disabled:d}," ","Update now")):(r="Start using MDN Offline by downloading the latest version of MDN Web Docs",m=i.createElement("button",{className:"button",onClick:c,disabled:d}," ","Download"));break;case u.Jz.DOWNLOAD:r=(null==o?void 0:o.local)?"Update in progress…":"Download in progress…",m=i.createElement("button",{disabled:d},"Downloading…");break;case u.Jz.UNPACK:r=(null==o?void 0:o.local)?"Update in progress…":"Download in progress…";var p=100*((null==o?void 0:o.progress)||0);m=i.createElement("button",{disabled:d},"Unpacking…"," ",null==p?void 0:p.toLocaleString(void 0,{maximumFractionDigits:0}),"%");break;case u.Jz.CLEAR:r="Clearing…"}return i.createElement("section",{"aria-labelledby":"update-status"},i.createElement("h3",{id:"update-status"},"Update status"),i.createElement("div",{className:"setting-row"},i.createElement("span",null,f,f&&i.createElement("br",null),r),m))}var s=n(96540);function d(e){var t,n=e.updateStatus,r=e.clear,l=e.disabled;return t=(null==n?void 0:n.phase)===u.Jz.IDLE&&(null==n?void 0:n.local)?s.createElement("button",{className:"button",onClick:r,disabled:void 0!==l&&l},"Clear data"):(null==n?void 0:n.phase)===u.Jz.CLEAR?s.createElement("button",{disabled:!0},"Clearing…"):s.createElement("button",{className:"button",disabled:!0},"Clear data"),s.createElement(s.Fragment,null,t)}var f=n(20773),m=n(40967),p=n(5592),b=n(23425),v=n(47263),g=n(7874),E=n(96540);function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function y(e,t,n,r,l,a,o){try{var u=e[a](o),i=u.value}catch(e){n(e);return}u.done?t(i):Promise.resolve(i).then(r,l)}function w(e){return function(){var t=this,n=arguments;return new Promise(function(r,l){var a=e.apply(t,n);function o(e){y(a,r,l,o,u,"next",e)}function u(e){y(a,r,l,o,u,"throw",e)}o(void 0)})}}function k(){return(k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function D(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n,r,l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var a=[],o=!0,u=!1;try{for(l=l.call(e);!(o=(n=l.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){u=!0,r=e}finally{try{o||null==l.return||l.return()}finally{if(u)throw r}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return h(e,t)}}(e,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(e,t){var n,r,l,a={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=u(0),o.throw=u(1),o.return=u(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function u(u){return function(i){var c=[u,i];if(n)throw TypeError("Generator is already executing.");for(;o&&(o=0,c[0]&&(a=0)),a;)try{if(n=1,r&&(l=2&c[0]?r.return:c[0]?r.throw||((l=r.return)&&l.call(r),0):r.next)&&!(l=l.call(r,c[1])).done)return l;switch(r=0,l&&(c=[2&c[0],l.value]),c[0]){case 0:case 1:l=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,r=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!(l=(l=a.trys).length>0&&l[l.length-1])&&(6===c[0]||2===c[0])){a=0;continue}if(3===c[0]&&(!l||c[1]>l[0]&&c[1]<l[3])){a.label=c[1];break}if(6===c[0]&&a.label<l[1]){a.label=l[1],l=c;break}if(l&&a.label<l[2]){a.label=l[2],a.ops.push(c);break}l[2]&&a.ops.pop(),a.trys.pop();continue}c=t.call(e,a)}catch(e){c=[6,e],r=0}finally{n=l=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}function N(e){k({},function(e){if(null==e)throw TypeError("Cannot destructure "+e);return e}(e));var t,n,r=null==(n=window)||null==(t=n.navigator)?void 0:t.serviceWorker,l=(0,p.P_)(),a=(0,b.Ym)();return E.createElement("section",{className:"field-group"},E.createElement("h2",null,"Offline Access"),(null==l?void 0:l.isSubscriber)?r?E.createElement(O,null):E.createElement(E.Fragment,null,E.createElement("h3",null,"Offline mode is unavailable ")," ",E.createElement("p",null,"Please make sure that you are not using a private or incognito window.")):E.createElement(E.Fragment,null,"MDN Offline is only available to MDN Plus subscribers."," ",E.createElement("a",{href:"/".concat(a,"/plus#subscribe")},"Learn more")," about our plans."))}function O(){document.title="Settings | ".concat(m.U6);var e,t,n,i,s,p=D((0,o.useState)(),2),b=p[0],h=p[1],y=D((0,o.useState)(!0),2),k=y[0],N=y[1],O=D((0,o.useState)(null),2),I=O[0],A=O[1],C=D((0,o.useState)(),2),M=C[0],_=C[1],U=(0,o.useRef)(!1),x=(0,g.db)();(0,o.useEffect)(function(){w(function(){var e,t,n,r;return S(this,function(a){switch(a.label){case 0:return[4,(r=(0,l.getMDNWorker)()).offlineSettings()];case 1:return _.apply(void 0,[a.sent()]),[4,null==(n=navigator)||null==(t=n.storage)||null==(e=t.estimate)?void 0:e.call(t)];case 2:return A.apply(void 0,[a.sent()]),r.checkForUpdate(),[2]}})})().then(function(){})},[]),(0,o.useEffect)(function(){w(function(){return S(this,function(e){return N(!1),[2]})})()},[M]),(0,o.useEffect)(function(){var e=(0,l.getMDNWorker)(),t=null!=b&&!!b.phase&&![u.Jz.INITIAL,u.Jz.IDLE].includes(null==b?void 0:b.phase);if(e.toggleKeepAlive(t),t){var n=function(e){e.preventDefault(),e.returnValue=""};return window.addEventListener("beforeunload",n),function(){return window.removeEventListener("beforeunload",n)}}},[null==b?void 0:b.phase]);var L=function(e){return w(function(){return S(this,function(t){switch(t.label){case 0:return N(!0),[4,(0,l.getMDNWorker)().setOfflineSettings(e)];case 1:return _(t.sent()),[2]}})})()};(0,a.default)(function(){return w(function(){return S(this,function(e){switch(e.label){case 0:return[4,(0,l.getMDNWorker)().status()];case 1:return h(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){var r;r=n[t],t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r})}return e}({},e.sent())),[2]}})})()},500);var j=function(){(0,l.getMDNWorker)().update(),h(b)};(null==M?void 0:M.autoUpdates)&&(null==b||null==(n=b.remote)?void 0:n.latest)!==(null==b||null==(i=b.local)?void 0:i.version)&&!U.current&&(j(),U.current=!0);var P=I&&(e=I.usage,I.quota,t=Math.round((void 0===e?0:e)/1048576),"".concat(t," MiB"));return E.createElement("ul",null,E.createElement("li",null,E.createElement("section",{"aria-labelledby":"offline-storage"},E.createElement("h3",{id:"offline-storage"},"MDN Offline Storage"),E.createElement("div",{className:"setting-row"},E.createElement("span",null,"Enable storage to allow MDN content download for offline reading."),!0===k&&E.createElement(f.y,{extraClasses:"loading"})||E.createElement(r.d,{name:"offline",checked:(null==M?void 0:M.offline)||!1,toggle:function(e){x(e.target.checked?v.wF:v.l5),L({offline:e.target.checked})}})))),(null==M?void 0:M.offline)&&E.createElement(E.Fragment,null,E.createElement("li",null,E.createElement("section",{"aria-labelledby":"prefer-online-content"},E.createElement("h3",null,"Prefer online content"),E.createElement("div",{className:"setting-row"},E.createElement("span",null,"Do not use offline content while connected to the internet"),!0===k&&E.createElement(f.y,{extraClasses:"loading"})||E.createElement(r.d,{name:"prefer-online",checked:(null==M?void 0:M.preferOnline)||!1,toggle:function(e){return L({preferOnline:e.target.checked})}})))),E.createElement("li",null,E.createElement(c,{disabled:k,updateStatus:b||null,update:j})),E.createElement("li",null,E.createElement("section",{"aria-labelledby":"enable-auto-update"},E.createElement("h3",{id:"enable-auto-update"},"Enable auto-update"),E.createElement("div",{className:"setting-row"},E.createElement("span",null,"Automatically download updates to content enabled for download"),!0===k&&E.createElement(f.y,{extraClasses:"loading"})||E.createElement(r.d,{name:"auto-update",checked:(null==M?void 0:M.autoUpdates)||!1,toggle:function(e){return L({autoUpdates:e.target.checked})}})))),(null==(s=window)?void 0:s.location.hash)==="#debug"&&E.createElement("li",null,E.createElement("section",{"aria-labelledby":"offline-debug"},E.createElement("h3",{id:"offline-debug"},"Debug"),E.createElement("span",{style:{fontFamily:"monospace",whiteSpace:"pre"}},JSON.stringify(b,null,2)))),P&&E.createElement("li",null,E.createElement("section",{"aria-labelledby":"storage-used"},E.createElement("h3",{id:"storage-used"},"Storage used"),E.createElement("span",null,"MDN Offline currently uses ",E.createElement("b",null,P)))),E.createElement("li",null,E.createElement(d,{disabled:k,updateStatus:b||null,clear:function(){return w(function(){return S(this,function(e){return window.confirm("All downloaded content will be removed from your device")&&((0,l.getMDNWorker)().clear(),h(b)),[2]})})()}}))))}}};
+//# sourceMappingURL=2090.5996133ea26ddd0a.js.map

package/out/static/legacy/{2090.29b77e88722868ff.js.map → 2090.5996133ea26ddd0a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"2090.29b77e88722868ff.js","sources":["webpack://@mdn/fred/./node_modules/@use-it/interval/dist/index.js","webpack://@mdn/fred/./node_modules/@use-it/interval/dist/interval.cjs.production.min.js","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/update.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/clear.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/offline-settings.tsx"],"sourcesContent":["\n'use strict'\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./interval.cjs.production.min.js')\n} else {\n  module.exports = require('./interval.cjs.development.js')\n}\n","\"use strict\";Object.defineProperty(exports,\"__esModule\",{value:!0});var e=require(\"react\");exports.default=function(r,t){var n=e.useRef();e.useEffect((function(){n.current=r}),[r]),e.useEffect((function(){if(null!==t){var e=setInterval((function(){return n.current.apply(n,arguments)}),t);return function(){return clearInterval(e)}}}),[t])};\n//# sourceMappingURL=interval.cjs.production.min.js.map\n","import { ContentStatus, ContentStatusPhase } from \"./db\";\n\nexport default function UpdateButton({\n  updateStatus,\n  update,\n  disabled = false,\n}: {\n  updateStatus: ContentStatus | null;\n  update: () => void;\n  disabled?: boolean;\n}) {\n  const current =\n    updateStatus?.local?.date &&\n    `Last updated: ${Intl.DateTimeFormat([], { dateStyle: \"medium\" }).format(\n      Date.parse(updateStatus?.local?.date)\n    )}`;\n  let button: JSX.Element | null = null;\n  let info: string | undefined;\n\n  switch (updateStatus?.phase) {\n    case ContentStatusPhase.INITIAL:\n      info = \"Checking for updates\";\n      break;\n\n    case ContentStatusPhase.IDLE:\n      if (updateStatus?.local?.version === updateStatus?.remote?.latest) {\n        info = \"Your content is up to date\";\n        button = <button disabled>Up to date</button>;\n      } else {\n        if (updateStatus?.local) {\n          info = \"Update available\";\n          button = (\n            <button className=\"button\" onClick={update} disabled={disabled}>\n              {\" \"}\n              Update now\n            </button>\n          );\n        } else {\n          info =\n            \"Start using MDN Offline by downloading the latest version of MDN Web Docs\";\n          button = (\n            <button className=\"button\" onClick={update} disabled={disabled}>\n              {\" \"}\n              Download\n            </button>\n          );\n        }\n      }\n      break;\n\n    case ContentStatusPhase.DOWNLOAD:\n      if (updateStatus?.local) {\n        info = \"Update in progress…\";\n      } else {\n        info = \"Download in progress…\";\n      }\n      button = <button disabled={disabled}>Downloading…</button>;\n      break;\n\n    case ContentStatusPhase.UNPACK:\n      if (updateStatus?.local) {\n        info = \"Update in progress…\";\n      } else {\n        info = \"Download in progress…\";\n      }\n      const progress = (updateStatus?.progress || 0) * 100;\n      button = (\n        <button disabled={disabled}>\n          Unpacking…{\" \"}\n          {progress?.toLocaleString(undefined, {\n            maximumFractionDigits: 0,\n          })}\n          %\n        </button>\n      );\n      break;\n\n    case ContentStatusPhase.CLEAR:\n      info = \"Clearing…\";\n      break;\n  }\n\n  return (\n    <section aria-labelledby=\"update-status\">\n      <h3 id=\"update-status\">Update status</h3>\n      <div className=\"setting-row\">\n        <span>\n          {current}\n          {current && <br />}\n          {info}\n        </span>\n        {button}\n      </div>\n    </section>\n  );\n}\n","import { ContentStatus, ContentStatusPhase } from \"./db\";\n\nexport default function ClearButton({\n  updateStatus,\n  clear,\n  disabled = false,\n}: {\n  updateStatus: ContentStatus | null;\n  clear: () => void;\n  disabled?: boolean;\n}) {\n  let button;\n  if (updateStatus?.phase === ContentStatusPhase.IDLE && updateStatus?.local) {\n    button = (\n      <button className=\"button\" onClick={clear} disabled={disabled}>\n        Clear data\n      </button>\n    );\n  } else if (updateStatus?.phase === ContentStatusPhase.CLEAR) {\n    button = <button disabled>Clearing…</button>;\n  } else {\n    button = (\n      <button className=\"button\" disabled>\n        Clear data\n      </button>\n    );\n  }\n\n  return <>{button}</>;\n}\n","import { Switch } from \"../ui/atoms/switch\";\nimport { getMDNWorker } from \"./mdn-worker\";\nimport useInterval from \"@use-it/interval\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport UpdateButton from \"./update\";\nimport ClearButton from \"./clear\";\nimport { Spinner } from \"../ui/atoms/spinner\";\nimport { MDN_PLUS_TITLE } from \"../constants\";\nimport { ContentStatus, ContentStatusPhase } from \"./db\";\nimport { OfflineSettingsData, useUserData } from \"../user-context\";\nimport { useLocale } from \"../hooks\";\nimport {\n  TOGGLE_PLUS_OFFLINE_DISABLED,\n  TOGGLE_PLUS_OFFLINE_ENABLED,\n} from \"../telemetry/constants\";\nimport { useGleanClick } from \"../telemetry/glean-context\";\n\nfunction displayEstimate({ usage = 0, quota = Infinity }: StorageEstimate) {\n  const usageInMib = Math.round(usage / (1024 * 1024));\n\n  return `${usageInMib} MiB`;\n}\n\nexport default function OfflineSettings({ ...appProps }) {\n  const serviceWorkerAvailable = window?.navigator?.serviceWorker;\n  const user = useUserData();\n  const locale = useLocale();\n\n  return (\n    <section className=\"field-group\">\n      <h2>Offline Access</h2>\n      {user?.isSubscriber ? (\n        serviceWorkerAvailable ? (\n          <Settings />\n        ) : (\n          <>\n            <h3>Offline mode is unavailable </h3>{\" \"}\n            <p>\n              Please make sure that you are not using a private or incognito\n              window.\n            </p>\n          </>\n        )\n      ) : (\n        <>\n          MDN Offline is only available to MDN Plus subscribers.{\" \"}\n          <a href={`/${locale}/plus#subscribe`}>Learn more</a> about our plans.\n        </>\n      )}\n    </section>\n  );\n}\n\nfunction Settings() {\n  document.title = `Settings | ${MDN_PLUS_TITLE}`;\n  const [status, setStatus] = useState<ContentStatus>();\n  const [saving, setSaving] = useState<boolean>(true);\n\n  const [estimate, setEstimate] = useState<StorageEstimate | null>(null);\n  const [settings, setSettings] = useState<OfflineSettingsData>();\n  // Workaround to avoid \"Error: Too many re-renders.\" (https://github.com/mdn/yari/pull/5744).\n  const updateTriggered = useRef(false);\n  const gleanClick = useGleanClick();\n\n  useEffect(() => {\n    const init = async () => {\n      const mdnWorker = getMDNWorker();\n      setSettings(await mdnWorker.offlineSettings());\n      setEstimate(await navigator?.storage?.estimate?.());\n      mdnWorker.checkForUpdate();\n    };\n    init().then(() => {});\n  }, []);\n  useEffect(() => {\n    const init = async () => {\n      setSaving(false);\n    };\n    init();\n  }, [settings]);\n\n  useEffect(() => {\n    const mdnWorker = getMDNWorker();\n    const isWorkerBusy = status?.phase\n      ? ![ContentStatusPhase.INITIAL, ContentStatusPhase.IDLE].includes(\n          status?.phase\n        )\n      : false;\n    mdnWorker.toggleKeepAlive(isWorkerBusy);\n\n    if (isWorkerBusy) {\n      // Warn when leaving page.\n      const listener = (e) => {\n        e.preventDefault();\n        e.returnValue = \"\";\n      };\n      window.addEventListener(\"beforeunload\", listener);\n\n      return () => window.removeEventListener(\"beforeunload\", listener);\n    }\n  }, [status?.phase]);\n\n  const updateSettings = async (change: Partial<OfflineSettingsData>) => {\n    setSaving(true);\n    const mdnWorker = getMDNWorker();\n    let newSettings = await mdnWorker.setOfflineSettings(change);\n    setSettings(newSettings);\n  };\n\n  useInterval(async () => {\n    const mdnWorker = getMDNWorker();\n    const next = await mdnWorker.status();\n    setStatus({ ...next });\n  }, 500);\n\n  const update = () => {\n    const mdnWorker = getMDNWorker();\n    mdnWorker.update();\n    setStatus(status);\n  };\n\n  const clear = async () => {\n    if (\n      window.confirm(\"All downloaded content will be removed from your device\")\n    ) {\n      const mdnWorker = getMDNWorker();\n      mdnWorker.clear();\n      setStatus(status);\n    }\n  };\n\n  if (\n    settings?.autoUpdates &&\n    status?.remote?.latest !== status?.local?.version &&\n    !updateTriggered.current\n  ) {\n    update();\n    updateTriggered.current = true;\n  }\n\n  const usage = estimate && displayEstimate(estimate);\n  return (\n    <ul>\n      <li>\n        <section aria-labelledby=\"offline-storage\">\n          <h3 id=\"offline-storage\">MDN Offline Storage</h3>\n          <div className=\"setting-row\">\n            <span>\n              Enable storage to allow MDN content download for offline reading.\n            </span>\n            {(saving === true && <Spinner extraClasses=\"loading\" />) || (\n              <Switch\n                name=\"offline\"\n                checked={settings?.offline || false}\n                toggle={(e) => {\n                  const source = e.target.checked\n                    ? TOGGLE_PLUS_OFFLINE_ENABLED\n                    : TOGGLE_PLUS_OFFLINE_DISABLED;\n                  gleanClick(source);\n                  updateSettings({\n                    offline: e.target.checked,\n                  });\n                }}\n              ></Switch>\n            )}\n          </div>\n        </section>\n      </li>\n      {settings?.offline && (\n        <>\n          <li>\n            <section aria-labelledby=\"prefer-online-content\">\n              <h3>Prefer online content</h3>\n              <div className=\"setting-row\">\n                <span>\n                  Do not use offline content while connected to the internet\n                </span>\n                {(saving === true && <Spinner extraClasses=\"loading\" />) || (\n                  <Switch\n                    name=\"prefer-online\"\n                    checked={settings?.preferOnline || false}\n                    toggle={(e) =>\n                      updateSettings({\n                        preferOnline: e.target.checked,\n                      })\n                    }\n                  ></Switch>\n                )}\n              </div>\n            </section>\n          </li>\n          <li>\n            <UpdateButton\n              disabled={saving}\n              updateStatus={status || null}\n              update={update}\n            />\n          </li>\n          <li>\n            <section aria-labelledby=\"enable-auto-update\">\n              <h3 id=\"enable-auto-update\">Enable auto-update</h3>\n              <div className=\"setting-row\">\n                <span>\n                  Automatically download updates to content enabled for download\n                </span>\n                {(saving === true && <Spinner extraClasses=\"loading\" />) || (\n                  <Switch\n                    name=\"auto-update\"\n                    checked={settings?.autoUpdates || false}\n                    toggle={(e) =>\n                      updateSettings({\n                        autoUpdates: e.target.checked,\n                      })\n                    }\n                  ></Switch>\n                )}\n              </div>\n            </section>\n          </li>\n          {window?.location.hash === \"#debug\" && (\n            <li>\n              <section aria-labelledby=\"offline-debug\">\n                <h3 id=\"offline-debug\">Debug</h3>\n                <span style={{ fontFamily: \"monospace\", whiteSpace: \"pre\" }}>\n                  {JSON.stringify(status, null, 2)}\n                </span>\n              </section>\n            </li>\n          )}\n          {usage && (\n            <li>\n              <section aria-labelledby=\"storage-used\">\n                <h3 id=\"storage-used\">Storage used</h3>\n                <span>\n                  MDN Offline currently uses <b>{usage}</b>\n                </span>\n              </section>\n            </li>\n          )}\n          <li>\n            <ClearButton\n              disabled={saving}\n              updateStatus={status || null}\n              clear={clear}\n            />\n          </li>\n        </>\n      )}\n    </ul>\n  );\n}\n"],"names":["t","n","e","setInterval","arguments","clearInterval","UpdateButton","param","_updateStatus_local","_updateStatus_local1","info","_updateStatus_local2","_updateStatus_remote","updateStatus","update","disabled","current","Intl","Date","button","ContentStatusPhase","progress","undefined","ClearButton","clear","OfflineSettings","_param","appProps","_window_navigator","serviceWorkerAvailable","user","useUserData","locale","useLocale","Settings","document","MDN_PLUS_TITLE","usageInMib","_status_remote","_status_local","_window","_useState","status","setStatus","_useState1","saving","setSaving","_useState2","estimate","setEstimate","_useState3","settings","setSettings","updateTriggered","useRef","gleanClick","useGleanClick","useEffect","init","_navigator_storage","mdnWorker","getMDNWorker","a","isWorkerBusy","listener","window","updateSettings","change","useInterval","usage","quota","Math","Spinner","Switch","TOGGLE_PLUS_OFFLINE_ENABLED","TOGGLE_PLUS_OFFLINE_DISABLED","JSON"],"mappings":"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"}
+{"version":3,"file":"2090.5996133ea26ddd0a.js","sources":["webpack://@mdn/fred/./node_modules/@use-it/interval/dist/index.js","webpack://@mdn/fred/./node_modules/@use-it/interval/dist/interval.cjs.production.min.js","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/update.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/clear.tsx","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/offline-settings.tsx"],"sourcesContent":["\n'use strict'\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./interval.cjs.production.min.js')\n} else {\n  module.exports = require('./interval.cjs.development.js')\n}\n","\"use strict\";Object.defineProperty(exports,\"__esModule\",{value:!0});var e=require(\"react\");exports.default=function(r,t){var n=e.useRef();e.useEffect((function(){n.current=r}),[r]),e.useEffect((function(){if(null!==t){var e=setInterval((function(){return n.current.apply(n,arguments)}),t);return function(){return clearInterval(e)}}}),[t])};\n//# sourceMappingURL=interval.cjs.production.min.js.map\n","import { ContentStatus, ContentStatusPhase } from \"./db\";\n\nexport default function UpdateButton({\n  updateStatus,\n  update,\n  disabled = false,\n}: {\n  updateStatus: ContentStatus | null;\n  update: () => void;\n  disabled?: boolean;\n}) {\n  const current =\n    updateStatus?.local?.date &&\n    `Last updated: ${Intl.DateTimeFormat([], { dateStyle: \"medium\" }).format(\n      Date.parse(updateStatus?.local?.date)\n    )}`;\n  let button: JSX.Element | null = null;\n  let info: string | undefined;\n\n  switch (updateStatus?.phase) {\n    case ContentStatusPhase.INITIAL:\n      info = \"Checking for updates\";\n      break;\n\n    case ContentStatusPhase.IDLE:\n      if (updateStatus?.local?.version === updateStatus?.remote?.latest) {\n        info = \"Your content is up to date\";\n        button = <button disabled>Up to date</button>;\n      } else {\n        if (updateStatus?.local) {\n          info = \"Update available\";\n          button = (\n            <button className=\"button\" onClick={update} disabled={disabled}>\n              {\" \"}\n              Update now\n            </button>\n          );\n        } else {\n          info =\n            \"Start using MDN Offline by downloading the latest version of MDN Web Docs\";\n          button = (\n            <button className=\"button\" onClick={update} disabled={disabled}>\n              {\" \"}\n              Download\n            </button>\n          );\n        }\n      }\n      break;\n\n    case ContentStatusPhase.DOWNLOAD:\n      if (updateStatus?.local) {\n        info = \"Update in progress…\";\n      } else {\n        info = \"Download in progress…\";\n      }\n      button = <button disabled={disabled}>Downloading…</button>;\n      break;\n\n    case ContentStatusPhase.UNPACK:\n      if (updateStatus?.local) {\n        info = \"Update in progress…\";\n      } else {\n        info = \"Download in progress…\";\n      }\n      const progress = (updateStatus?.progress || 0) * 100;\n      button = (\n        <button disabled={disabled}>\n          Unpacking…{\" \"}\n          {progress?.toLocaleString(undefined, {\n            maximumFractionDigits: 0,\n          })}\n          %\n        </button>\n      );\n      break;\n\n    case ContentStatusPhase.CLEAR:\n      info = \"Clearing…\";\n      break;\n  }\n\n  return (\n    <section aria-labelledby=\"update-status\">\n      <h3 id=\"update-status\">Update status</h3>\n      <div className=\"setting-row\">\n        <span>\n          {current}\n          {current && <br />}\n          {info}\n        </span>\n        {button}\n      </div>\n    </section>\n  );\n}\n","import { ContentStatus, ContentStatusPhase } from \"./db\";\n\nexport default function ClearButton({\n  updateStatus,\n  clear,\n  disabled = false,\n}: {\n  updateStatus: ContentStatus | null;\n  clear: () => void;\n  disabled?: boolean;\n}) {\n  let button;\n  if (updateStatus?.phase === ContentStatusPhase.IDLE && updateStatus?.local) {\n    button = (\n      <button className=\"button\" onClick={clear} disabled={disabled}>\n        Clear data\n      </button>\n    );\n  } else if (updateStatus?.phase === ContentStatusPhase.CLEAR) {\n    button = <button disabled>Clearing…</button>;\n  } else {\n    button = (\n      <button className=\"button\" disabled>\n        Clear data\n      </button>\n    );\n  }\n\n  return <>{button}</>;\n}\n","import { Switch } from \"../ui/atoms/switch\";\nimport { getMDNWorker } from \"./mdn-worker\";\nimport useInterval from \"@use-it/interval\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport UpdateButton from \"./update\";\nimport ClearButton from \"./clear\";\nimport { Spinner } from \"../ui/atoms/spinner\";\nimport { MDN_PLUS_TITLE } from \"../constants\";\nimport { ContentStatus, ContentStatusPhase } from \"./db\";\nimport { OfflineSettingsData, useUserData } from \"../user-context\";\nimport { useLocale } from \"../hooks\";\nimport {\n  TOGGLE_PLUS_OFFLINE_DISABLED,\n  TOGGLE_PLUS_OFFLINE_ENABLED,\n} from \"../telemetry/constants\";\nimport { useGleanClick } from \"../telemetry/glean-context\";\n\nfunction displayEstimate({ usage = 0, quota = Infinity }: StorageEstimate) {\n  const usageInMib = Math.round(usage / (1024 * 1024));\n\n  return `${usageInMib} MiB`;\n}\n\nexport default function OfflineSettings({ ...appProps }) {\n  const serviceWorkerAvailable = window?.navigator?.serviceWorker;\n  const user = useUserData();\n  const locale = useLocale();\n\n  return (\n    <section className=\"field-group\">\n      <h2>Offline Access</h2>\n      {user?.isSubscriber ? (\n        serviceWorkerAvailable ? (\n          <Settings />\n        ) : (\n          <>\n            <h3>Offline mode is unavailable </h3>{\" \"}\n            <p>\n              Please make sure that you are not using a private or incognito\n              window.\n            </p>\n          </>\n        )\n      ) : (\n        <>\n          MDN Offline is only available to MDN Plus subscribers.{\" \"}\n          <a href={`/${locale}/plus#subscribe`}>Learn more</a> about our plans.\n        </>\n      )}\n    </section>\n  );\n}\n\nfunction Settings() {\n  document.title = `Settings | ${MDN_PLUS_TITLE}`;\n  const [status, setStatus] = useState<ContentStatus>();\n  const [saving, setSaving] = useState<boolean>(true);\n\n  const [estimate, setEstimate] = useState<StorageEstimate | null>(null);\n  const [settings, setSettings] = useState<OfflineSettingsData>();\n  // Workaround to avoid \"Error: Too many re-renders.\" (https://github.com/mdn/yari/pull/5744).\n  const updateTriggered = useRef(false);\n  const gleanClick = useGleanClick();\n\n  useEffect(() => {\n    const init = async () => {\n      const mdnWorker = getMDNWorker();\n      setSettings(await mdnWorker.offlineSettings());\n      setEstimate(await navigator?.storage?.estimate?.());\n      mdnWorker.checkForUpdate();\n    };\n    init().then(() => {});\n  }, []);\n  useEffect(() => {\n    const init = async () => {\n      setSaving(false);\n    };\n    init();\n  }, [settings]);\n\n  useEffect(() => {\n    const mdnWorker = getMDNWorker();\n    const isWorkerBusy = status?.phase\n      ? ![ContentStatusPhase.INITIAL, ContentStatusPhase.IDLE].includes(\n          status?.phase\n        )\n      : false;\n    mdnWorker.toggleKeepAlive(isWorkerBusy);\n\n    if (isWorkerBusy) {\n      // Warn when leaving page.\n      const listener = (e) => {\n        e.preventDefault();\n        e.returnValue = \"\";\n      };\n      window.addEventListener(\"beforeunload\", listener);\n\n      return () => window.removeEventListener(\"beforeunload\", listener);\n    }\n  }, [status?.phase]);\n\n  const updateSettings = async (change: Partial<OfflineSettingsData>) => {\n    setSaving(true);\n    const mdnWorker = getMDNWorker();\n    let newSettings = await mdnWorker.setOfflineSettings(change);\n    setSettings(newSettings);\n  };\n\n  useInterval(async () => {\n    const mdnWorker = getMDNWorker();\n    const next = await mdnWorker.status();\n    setStatus({ ...next });\n  }, 500);\n\n  const update = () => {\n    const mdnWorker = getMDNWorker();\n    mdnWorker.update();\n    setStatus(status);\n  };\n\n  const clear = async () => {\n    if (\n      window.confirm(\"All downloaded content will be removed from your device\")\n    ) {\n      const mdnWorker = getMDNWorker();\n      mdnWorker.clear();\n      setStatus(status);\n    }\n  };\n\n  if (\n    settings?.autoUpdates &&\n    status?.remote?.latest !== status?.local?.version &&\n    !updateTriggered.current\n  ) {\n    update();\n    updateTriggered.current = true;\n  }\n\n  const usage = estimate && displayEstimate(estimate);\n  return (\n    <ul>\n      <li>\n        <section aria-labelledby=\"offline-storage\">\n          <h3 id=\"offline-storage\">MDN Offline Storage</h3>\n          <div className=\"setting-row\">\n            <span>\n              Enable storage to allow MDN content download for offline reading.\n            </span>\n            {(saving === true && <Spinner extraClasses=\"loading\" />) || (\n              <Switch\n                name=\"offline\"\n                checked={settings?.offline || false}\n                toggle={(e) => {\n                  const source = e.target.checked\n                    ? TOGGLE_PLUS_OFFLINE_ENABLED\n                    : TOGGLE_PLUS_OFFLINE_DISABLED;\n                  gleanClick(source);\n                  updateSettings({\n                    offline: e.target.checked,\n                  });\n                }}\n              ></Switch>\n            )}\n          </div>\n        </section>\n      </li>\n      {settings?.offline && (\n        <>\n          <li>\n            <section aria-labelledby=\"prefer-online-content\">\n              <h3>Prefer online content</h3>\n              <div className=\"setting-row\">\n                <span>\n                  Do not use offline content while connected to the internet\n                </span>\n                {(saving === true && <Spinner extraClasses=\"loading\" />) || (\n                  <Switch\n                    name=\"prefer-online\"\n                    checked={settings?.preferOnline || false}\n                    toggle={(e) =>\n                      updateSettings({\n                        preferOnline: e.target.checked,\n                      })\n                    }\n                  ></Switch>\n                )}\n              </div>\n            </section>\n          </li>\n          <li>\n            <UpdateButton\n              disabled={saving}\n              updateStatus={status || null}\n              update={update}\n            />\n          </li>\n          <li>\n            <section aria-labelledby=\"enable-auto-update\">\n              <h3 id=\"enable-auto-update\">Enable auto-update</h3>\n              <div className=\"setting-row\">\n                <span>\n                  Automatically download updates to content enabled for download\n                </span>\n                {(saving === true && <Spinner extraClasses=\"loading\" />) || (\n                  <Switch\n                    name=\"auto-update\"\n                    checked={settings?.autoUpdates || false}\n                    toggle={(e) =>\n                      updateSettings({\n                        autoUpdates: e.target.checked,\n                      })\n                    }\n                  ></Switch>\n                )}\n              </div>\n            </section>\n          </li>\n          {window?.location.hash === \"#debug\" && (\n            <li>\n              <section aria-labelledby=\"offline-debug\">\n                <h3 id=\"offline-debug\">Debug</h3>\n                <span style={{ fontFamily: \"monospace\", whiteSpace: \"pre\" }}>\n                  {JSON.stringify(status, null, 2)}\n                </span>\n              </section>\n            </li>\n          )}\n          {usage && (\n            <li>\n              <section aria-labelledby=\"storage-used\">\n                <h3 id=\"storage-used\">Storage used</h3>\n                <span>\n                  MDN Offline currently uses <b>{usage}</b>\n                </span>\n              </section>\n            </li>\n          )}\n          <li>\n            <ClearButton\n              disabled={saving}\n              updateStatus={status || null}\n              clear={clear}\n            />\n          </li>\n        </>\n      )}\n    </ul>\n  );\n}\n"],"names":["t","n","e","setInterval","arguments","clearInterval","UpdateButton","param","_updateStatus_local","_updateStatus_local1","info","_updateStatus_local2","_updateStatus_remote","updateStatus","update","disabled","current","Intl","Date","button","ContentStatusPhase","progress","undefined","ClearButton","clear","OfflineSettings","_param","appProps","_window_navigator","serviceWorkerAvailable","user","useUserData","locale","useLocale","Settings","document","MDN_PLUS_TITLE","usageInMib","_status_remote","_status_local","_window","_useState","status","setStatus","_useState1","saving","setSaving","_useState2","estimate","setEstimate","_useState3","settings","setSettings","updateTriggered","useRef","gleanClick","useGleanClick","useEffect","init","_navigator_storage","mdnWorker","getMDNWorker","a","isWorkerBusy","listener","window","updateSettings","change","useInterval","usage","quota","Math","Spinner","Switch","TOGGLE_PLUS_OFFLINE_ENABLED","TOGGLE_PLUS_OFFLINE_DISABLED","JSON"],"mappings":"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"}

package/out/static/legacy/2235.b99812e73c08ee51.js

@@ -0,0 +1,2 @@
+export const __webpack_id__="2235";export const __webpack_ids__=["2235"];export const __webpack_modules__={89238:function(e,t,r){r.r(t),r.d(t,{default:()=>d});var n=r(96540),l=r(39330),a=r(25572),o=r.n(a),c=r(19806),u=r.n(c),i=r(23425);function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function d(){var e,t=(0,i.TU)(),r=(e=n.useState(void 0),function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r,n,l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var a=[],o=!0,c=!1;try{for(l=l.call(e);!(o=(r=l.next()).done)&&(a.push(r.value),a.length!==t);o=!0);}catch(e){c=!0,n=e}finally{try{o||null==l.return||l.return()}finally{if(c)throw n}}return a}}(e,2)||function(e,t){if(e){if("string"==typeof e)return m(e,2);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return m(e,t)}}(e,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=r[0],c=r[1];return n.useEffect(function(){if(t)try{var e=localStorage.getItem("viewed-documents"),r=JSON.parse(e||"[]"),n=[],l=!0,a=!1,o=void 0;try{for(var u,i=r[Symbol.iterator]();!(l=(u=i.next()).done);l=!0){var m=u.value;n.push({url:m.url,title:m.title,timestamp:m.timestamp})}}catch(e){a=!0,o=e}finally{try{l||null==i.return||i.return()}finally{if(a)throw o}}c(n)}catch(e){console.warn("Failed to read recently viewed documents from localStorage",e),c(null)}},[t]),n.createElement("article",{id:"recently-viewed-documents","aria-labelledby":"recently-viewed-documents"},n.createElement("h3",null,"Recently viewed documents"),void 0===a?n.createElement(s,null,"Loading recently viewed documents"):null===a?n.createElement(s,null,"This feature requires cookies"):a.length?n.createElement("table",null,n.createElement("thead",null,n.createElement("tr",null,n.createElement("th",null,"Document"),n.createElement("th",null,"When"))),n.createElement("tbody",null,a.map(function(e){return n.createElement("tr",{key:e.url},n.createElement("td",null,n.createElement(l.N_,{to:e.url},e.title," ",n.createElement("small",null,e.url))),n.createElement("td",null,o()(new Date(e.timestamp)).fromNow()))}))):n.createElement(s,null,"No recently viewed documents at the moment"))}function s(e){var t=e.children;return n.createElement("p",{className:"notification"},t)}o().extend(u())}};
+//# sourceMappingURL=2235.b99812e73c08ee51.js.map

package/out/static/legacy/{2235.c0e6904b64ea18fe.js.map → 2235.b99812e73c08ee51.js.map}

@@ -1 +1 @@
-{"version":3,"file":"2235.c0e6904b64ea18fe.js","sources":["webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/writers-homepage/viewed-documents.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\n\nimport \"./viewed-documents.scss\";\nimport { usePageVisibility } from \"../hooks\";\n\ndayjs.extend(relativeTime);\n\ntype Entry = {\n  url: string;\n  title: string;\n  timestamp: number;\n};\n\nexport default function ViewedDocuments() {\n  const isVisible = usePageVisibility();\n  // undefined - list is still being loaded\n  // null - list could not be loaded (e.g., if localStorage is disabled)\n  // Entry[] - list was loaded (but could be empty)\n  const [entries, setEntries] = React.useState<Entry[] | null | undefined>(\n    undefined\n  );\n\n  const VIEWED_DOCUMENTS_STORAGE_KEY = \"viewed-documents\";\n\n  React.useEffect(() => {\n    if (isVisible) {\n      try {\n        const data = localStorage.getItem(VIEWED_DOCUMENTS_STORAGE_KEY);\n        const previousVisits = JSON.parse(data || \"[]\");\n        const newEntries: Entry[] = [];\n        for (const visit of previousVisits) {\n          newEntries.push({\n            url: visit.url,\n            title: visit.title,\n            timestamp: visit.timestamp,\n          });\n        }\n\n        setEntries(newEntries);\n      } catch (err) {\n        // If localStorage is not supported, there are no viewed documents\n        console.warn(\n          \"Failed to read recently viewed documents from localStorage\",\n          err\n        );\n        setEntries(null);\n      }\n    }\n  }, [isVisible]);\n\n  return (\n    <article\n      id=\"recently-viewed-documents\"\n      aria-labelledby=\"recently-viewed-documents\"\n    >\n      <h3>Recently viewed documents</h3>\n      {entries === undefined ? (\n        <Banner>Loading recently viewed documents</Banner>\n      ) : entries === null ? (\n        <Banner>This feature requires cookies</Banner>\n      ) : entries.length ? (\n        <table>\n          <thead>\n            <tr>\n              <th>Document</th>\n              <th>When</th>\n            </tr>\n          </thead>\n          <tbody>\n            {entries.map((entry) => {\n              return (\n                <tr key={entry.url}>\n                  <td>\n                    <Link to={entry.url}>\n                      {entry.title} <small>{entry.url}</small>\n                    </Link>\n                  </td>\n                  <td>{dayjs(new Date(entry.timestamp)).fromNow()}</td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      ) : (\n        <Banner>No recently viewed documents at the moment</Banner>\n      )}\n    </article>\n  );\n}\n\nfunction Banner({ children }) {\n  return <p className=\"notification\">{children}</p>;\n}\n"],"names":["ViewedDocuments","isVisible","usePageVisibility","_React_useState","undefined","entries","setEntries","React","data","localStorage","previousVisits","JSON","newEntries","_iteratorError","visit","err","console","Banner","entry","Link","dayjs","Date","param","children","relativeTime"],"mappings":"iVAgBe,SAASA,IACtB,I,EAAMC,EAAYC,AAAAA,GAAAA,EAAAA,EAAAA,AAAAA,IAIYC,G,EAAAA,EAAAA,QAAc,CAC1CC,Q,mWAAAA,I,qDAAAA,G,8OAAAA,I,6KADKC,EAAuBF,CAAAA,CAAAA,EAAAA,CAAdG,EAAcH,CAAAA,CAAAA,EAAAA,CAgC9B,OA1BAI,EAAAA,SAAe,CAAC,WACd,GAAIN,EACF,GAAI,CACF,IAAMO,EAAOC,aAAa,OAAO,CALF,oBAMzBC,EAAiBC,KAAK,KAAK,CAACH,GAAQ,MACpCI,EAAsB,EAAE,CACzBC,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,O,IAAL,QAAKA,EAAAA,EAAeH,CAAc,CAAdA,OAAAA,QAAAA,CAAAA,GAAfG,CAAAA,CAAAA,EAAAA,AAAAA,CAAAA,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,IAAAA,AAAAA,EAAAA,EAAAA,GAA+B,CAA/BA,IAAMC,EAAND,EAAAA,KAAAA,CACHD,EAAW,IAAI,CAAC,CACd,IAAKE,EAAM,GAAG,CACd,MAAOA,EAAM,KAAK,CAClB,UAAWA,EAAM,SAAS,AAC5B,EACF,C,UANKD,EAAAA,GAAAA,EAAAA,C,aAAAA,GAAAA,AAAAA,MAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,E,YAAAA,E,MAAAA,C,EAQLP,EAAWM,EACb,CAAE,MAAOG,EAAK,CAEZC,QAAQ,IAAI,CACV,6DACAD,GAEFT,EAAW,KACb,CAEJ,EAAG,CAACL,EAAU,EAGZ,gBAAC,WACC,GAAG,4BACH,kBAAgB,2B,EAEhB,gBAAC,UAAG,6BACHI,AAAYD,SAAZC,EACC,gBAACY,EAAAA,KAAO,qCACNZ,AAAY,OAAZA,EACF,gBAACY,EAAAA,KAAO,iCACNZ,EAAQ,MAAM,CAChB,gBAAC,aACC,gBAAC,aACC,gBAAC,UACC,gBAAC,UAAG,YACJ,gBAAC,UAAG,UAGR,gBAAC,aACEA,EAAQ,GAAG,CAAC,SAACa,CAAK,EACjB,OACE,gBAAC,MAAG,IAAKA,EAAM,GAAG,A,EAChB,gBAAC,UACC,gBAACC,EAAAA,EAAIA,CAAAA,CAAC,GAAID,EAAM,GAAG,A,EAChBA,EAAM,KAAK,CAAC,IAAC,gBAAC,aAAOA,EAAM,GAAG,IAGnC,gBAAC,UAAIE,IAAM,IAAIC,KAAKH,EAAM,SAAS,GAAG,OAAO,IAGnD,KAIJ,gBAACD,EAAAA,KAAO,8CAIhB,CAEA,SAASA,EAAOK,CAAY,E,IAAVC,EAAFD,EAAEC,QAAQ,CACxB,OAAO,gBAAC,KAAE,UAAU,c,EAAgBA,EACtC,CAvFAH,IAAAA,MAAY,CAACI,I"}
+{"version":3,"file":"2235.b99812e73c08ee51.js","sources":["webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/writers-homepage/viewed-documents.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\n\nimport \"./viewed-documents.scss\";\nimport { usePageVisibility } from \"../hooks\";\n\ndayjs.extend(relativeTime);\n\ntype Entry = {\n  url: string;\n  title: string;\n  timestamp: number;\n};\n\nexport default function ViewedDocuments() {\n  const isVisible = usePageVisibility();\n  // undefined - list is still being loaded\n  // null - list could not be loaded (e.g., if localStorage is disabled)\n  // Entry[] - list was loaded (but could be empty)\n  const [entries, setEntries] = React.useState<Entry[] | null | undefined>(\n    undefined\n  );\n\n  const VIEWED_DOCUMENTS_STORAGE_KEY = \"viewed-documents\";\n\n  React.useEffect(() => {\n    if (isVisible) {\n      try {\n        const data = localStorage.getItem(VIEWED_DOCUMENTS_STORAGE_KEY);\n        const previousVisits = JSON.parse(data || \"[]\");\n        const newEntries: Entry[] = [];\n        for (const visit of previousVisits) {\n          newEntries.push({\n            url: visit.url,\n            title: visit.title,\n            timestamp: visit.timestamp,\n          });\n        }\n\n        setEntries(newEntries);\n      } catch (err) {\n        // If localStorage is not supported, there are no viewed documents\n        console.warn(\n          \"Failed to read recently viewed documents from localStorage\",\n          err\n        );\n        setEntries(null);\n      }\n    }\n  }, [isVisible]);\n\n  return (\n    <article\n      id=\"recently-viewed-documents\"\n      aria-labelledby=\"recently-viewed-documents\"\n    >\n      <h3>Recently viewed documents</h3>\n      {entries === undefined ? (\n        <Banner>Loading recently viewed documents</Banner>\n      ) : entries === null ? (\n        <Banner>This feature requires cookies</Banner>\n      ) : entries.length ? (\n        <table>\n          <thead>\n            <tr>\n              <th>Document</th>\n              <th>When</th>\n            </tr>\n          </thead>\n          <tbody>\n            {entries.map((entry) => {\n              return (\n                <tr key={entry.url}>\n                  <td>\n                    <Link to={entry.url}>\n                      {entry.title} <small>{entry.url}</small>\n                    </Link>\n                  </td>\n                  <td>{dayjs(new Date(entry.timestamp)).fromNow()}</td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      ) : (\n        <Banner>No recently viewed documents at the moment</Banner>\n      )}\n    </article>\n  );\n}\n\nfunction Banner({ children }) {\n  return <p className=\"notification\">{children}</p>;\n}\n"],"names":["ViewedDocuments","isVisible","usePageVisibility","_React_useState","undefined","entries","setEntries","React","data","localStorage","previousVisits","JSON","newEntries","_iteratorError","visit","err","console","Banner","entry","Link","dayjs","Date","param","children","relativeTime"],"mappings":"kVAgBe,SAASA,IACtB,I,EAAMC,EAAYC,AAAAA,GAAAA,EAAAA,EAAAA,AAAAA,IAIYC,G,EAAAA,EAAAA,QAAc,CAC1CC,Q,mWAAAA,I,qDAAAA,G,8OAAAA,I,6KADKC,EAAuBF,CAAAA,CAAAA,EAAAA,CAAdG,EAAcH,CAAAA,CAAAA,EAAAA,CAgC9B,OA1BAI,EAAAA,SAAe,CAAC,WACd,GAAIN,EACF,GAAI,CACF,IAAMO,EAAOC,aAAa,OAAO,CALF,oBAMzBC,EAAiBC,KAAK,KAAK,CAACH,GAAQ,MACpCI,EAAsB,EAAE,CACzBC,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,O,IAAL,QAAKA,EAAAA,EAAeH,CAAc,CAAdA,OAAAA,QAAAA,CAAAA,GAAfG,CAAAA,CAAAA,EAAAA,AAAAA,CAAAA,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,IAAAA,AAAAA,EAAAA,EAAAA,GAA+B,CAA/BA,IAAMC,EAAND,EAAAA,KAAAA,CACHD,EAAW,IAAI,CAAC,CACd,IAAKE,EAAM,GAAG,CACd,MAAOA,EAAM,KAAK,CAClB,UAAWA,EAAM,SAAS,AAC5B,EACF,C,UANKD,EAAAA,GAAAA,EAAAA,C,aAAAA,GAAAA,AAAAA,MAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,E,YAAAA,E,MAAAA,C,EAQLP,EAAWM,EACb,CAAE,MAAOG,EAAK,CAEZC,QAAQ,IAAI,CACV,6DACAD,GAEFT,EAAW,KACb,CAEJ,EAAG,CAACL,EAAU,EAGZ,gBAAC,WACC,GAAG,4BACH,kBAAgB,2B,EAEhB,gBAAC,UAAG,6BACHI,AAAYD,SAAZC,EACC,gBAACY,EAAAA,KAAO,qCACNZ,AAAY,OAAZA,EACF,gBAACY,EAAAA,KAAO,iCACNZ,EAAQ,MAAM,CAChB,gBAAC,aACC,gBAAC,aACC,gBAAC,UACC,gBAAC,UAAG,YACJ,gBAAC,UAAG,UAGR,gBAAC,aACEA,EAAQ,GAAG,CAAC,SAACa,CAAK,EACjB,OACE,gBAAC,MAAG,IAAKA,EAAM,GAAG,A,EAChB,gBAAC,UACC,gBAACC,EAAAA,EAAIA,CAAAA,CAAC,GAAID,EAAM,GAAG,A,EAChBA,EAAM,KAAK,CAAC,IAAC,gBAAC,aAAOA,EAAM,GAAG,IAGnC,gBAAC,UAAIE,IAAM,IAAIC,KAAKH,EAAM,SAAS,GAAG,OAAO,IAGnD,KAIJ,gBAACD,EAAAA,KAAO,8CAIhB,CAEA,SAASA,EAAOK,CAAY,E,IAAVC,EAAFD,EAAEC,QAAQ,CACxB,OAAO,gBAAC,KAAE,UAAU,c,EAAgBA,EACtC,CAvFAH,IAAAA,MAAY,CAACI,I"}