@canonical/maas-react-components 1.3.0 → 1.4.0

package/README.md

@@ -62,3 +62,15 @@ To see the changes you make to `maas-react-components` reflected in a consuming
    ```
 
 4. As you make changes to `maas-react-components` they will be automatically built and reflected in the consuming app.
+
+### Creating a new component
+
+Make sure to read our **[React Components Guidelines](GUIDELINES.md)** before you proceed.
+
+Run the following command from the root of the project:
+
+`npm run create-component`
+
+The script will prompt you to enter details of the new component.
+
+It will create a new directory and files based on the details you provided. New files will contain a basic setup for your new component, including a basic test and a storybook story.

package/dist/@canonical/maas-react-components.es.js

@@ -1,10 +1,10 @@
-import { jsxs as _, jsx as d, Fragment as $ } from "react/jsx-runtime";
-import { useRef as E, useState as j, useEffect as O, useCallback as B } from "react";
-import { useListener as M, Link as D } from "@canonical/react-components";
-function L(e) {
+import { jsxs as C, jsx as n, Fragment as L } from "react/jsx-runtime";
+import { useRef as I, useState as M, useEffect as T, useCallback as j, cloneElement as D } from "react";
+import { useListener as O, Link as W, Tooltip as A, Button as S, Icon as $ } from "@canonical/react-components";
+function R(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var y = { exports: {} };
+var B = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -12,37 +12,37 @@ var y = { exports: {} };
 */
 (function(e) {
   (function() {
-    var r = {}.hasOwnProperty;
-    function s() {
-      for (var n = [], o = 0; o < arguments.length; o++) {
-        var t = arguments[o];
-        if (t) {
-          var l = typeof t;
-          if (l === "string" || l === "number")
-            n.push(t);
-          else if (Array.isArray(t)) {
-            if (t.length) {
-              var i = s.apply(null, t);
-              i && n.push(i);
+    var t = {}.hasOwnProperty;
+    function a() {
+      for (var s = [], r = 0; r < arguments.length; r++) {
+        var o = arguments[r];
+        if (o) {
+          var p = typeof o;
+          if (p === "string" || p === "number")
+            s.push(o);
+          else if (Array.isArray(o)) {
+            if (o.length) {
+              var d = a.apply(null, o);
+              d && s.push(d);
             }
-          } else if (l === "object") {
-            if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]")) {
-              n.push(t.toString());
+          } else if (p === "object") {
+            if (o.toString !== Object.prototype.toString && !o.toString.toString().includes("[native code]")) {
+              s.push(o.toString());
               continue;
             }
-            for (var u in t)
-              r.call(t, u) && t[u] && n.push(u);
+            for (var u in o)
+              t.call(o, u) && o[u] && s.push(u);
           }
         }
       }
-      return n.join(" ");
+      return s.join(" ");
     }
-    e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
+    e.exports ? (a.default = a, e.exports = a) : window.classNames = a;
   })();
-})(y);
-var W = y.exports;
-const k = /* @__PURE__ */ L(W);
-const f = {
+})(B);
+var z = B.exports;
+const c = /* @__PURE__ */ R(z);
+const v = {
   caution: "#F99B11",
   light: "#F7F7F7",
   linkFaded: "#D3E4ED",
@@ -51,139 +51,210 @@ const f = {
   positiveFaded: "#B7CCB9",
   positiveMid: "#4DAB4D",
   positive: "#0E8420"
-}, J = [
-  f.link,
-  f.positive,
-  f.negative,
-  f.caution
-], A = f.linkFaded, R = f.caution, z = f.light, C = 2, w = 1, S = (e, r, s) => {
-  var t, l;
-  const n = ((l = (t = e == null ? void 0 : e.current) == null ? void 0 : t.getBoundingClientRect()) == null ? void 0 : l.width) || 0, o = n > r * C ? n / r : C;
-  s(o);
-}, p = {
+}, _e = [
+  v.link,
+  v.positive,
+  v.negative,
+  v.caution
+], H = v.linkFaded, P = v.caution, q = v.light, k = 2, w = 1, x = (e, t, a) => {
+  var o, p;
+  const s = ((p = (o = e == null ? void 0 : e.current) == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : p.width) || 0, r = s > t * k ? s / t : k;
+  a(r);
+}, _ = {
   bar: "meter-bar",
   container: "meter-container",
   filled: "meter-filled",
   label: "meter-label",
   meteroverflow: "meter-overflow",
   segments: "meter-segments"
-}, I = ({
+}, G = ({
   data: e,
-  datumWidths: r,
-  maximum: s,
-  overColor: n,
-  segmentWidth: o,
-  separatorColor: t
+  datumWidths: t,
+  maximum: a,
+  overColor: s,
+  segmentWidth: r,
+  separatorColor: o
 }) => {
-  const l = () => e.reduce((m, a) => m + a.value, 0) > s, i = (m, a) => ({
-    backgroundColor: m.color,
-    left: `${r.reduce(
-      (v, c, h) => a > h ? v + c : v,
+  const p = () => e.reduce((g, l) => g + l.value, 0) > a, d = (g, l) => ({
+    backgroundColor: g.color,
+    left: `${t.reduce(
+      (f, m, h) => l > h ? f + m : f,
       0
     )}%`,
-    width: `${r[a]}%`
+    width: `${t[l]}%`
   }), u = () => ({
     background: `repeating-linear-gradient(
       to right,
       transparent 0,
-      transparent ${o - w}px,
-      ${t} ${o - w}px,
-      ${t} ${o}px
+      transparent ${r - w}px,
+      ${o} ${r - w}px,
+      ${o} ${r}px
     )`
   });
-  return /* @__PURE__ */ _($, { children: [
-    l() ? /* @__PURE__ */ d(
+  return /* @__PURE__ */ C(L, { children: [
+    p() ? /* @__PURE__ */ n(
       "div",
       {
         className: "p-meter__filled",
-        "data-testid": p.meteroverflow,
-        style: { backgroundColor: n, width: "100%" }
+        "data-testid": _.meteroverflow,
+        style: { backgroundColor: s, width: "100%" }
       }
-    ) : e.map((m, a) => /* @__PURE__ */ d(
+    ) : e.map((g, l) => /* @__PURE__ */ n(
       "div",
       {
         className: "p-meter__filled",
-        "data-testid": p.filled,
-        style: i(m, a)
+        "data-testid": _.filled,
+        style: d(g, l)
       },
-      `meter-${a}`
+      `meter-${l}`
     )),
-    o > 0 && /* @__PURE__ */ d(
+    r > 0 && /* @__PURE__ */ n(
       "div",
       {
         className: "p-meter__separators",
-        "data-testid": p.segments,
+        "data-testid": _.segments,
         style: u()
       }
     )
   ] });
-}, P = ({
+}, J = ({
   labelClassName: e,
-  label: r
-}) => /* @__PURE__ */ d(
+  label: t
+}) => /* @__PURE__ */ n(
   "div",
   {
-    className: k("p-meter__label", e),
-    "data-testid": p.label,
-    children: r
+    className: c("p-meter__label", e),
+    "data-testid": _.label,
+    children: t
   }
-), K = ({
+), fe = ({
   className: e,
-  data: r,
-  emptyColor: s = A,
-  label: n,
-  labelClassName: o,
-  max: t,
-  overColor: l = R,
-  segmented: i = !1,
-  separatorColor: u = z,
-  small: m = !1
+  data: t,
+  emptyColor: a = H,
+  label: s,
+  labelClassName: r,
+  max: o,
+  overColor: p = P,
+  segmented: d = !1,
+  separatorColor: u = q,
+  small: g = !1
 }) => {
-  const a = E(null), v = r.reduce((g, N) => g + N.value, 0), c = t || v, h = r.map((g) => g.value / c * 100), [F, b] = j(0);
-  O(() => {
-    i && S(a, c, b);
-  }, [c, i]);
-  const x = B(() => {
-    S(a, c, b);
-  }, [a, c, b]);
-  return M(window, x, "resize", !0, i), /* @__PURE__ */ _(
+  const l = I(null), f = t.reduce((b, E) => b + E.value, 0), m = o || f, h = t.map((b) => b.value / m * 100), [F, N] = M(0);
+  T(() => {
+    d && x(l, m, N);
+  }, [m, d]);
+  const y = j(() => {
+    x(l, m, N);
+  }, [l, m, N]);
+  return O(window, y, "resize", !0, d), /* @__PURE__ */ C(
     "div",
     {
-      className: k("p-meter", { "p-meter--small": m }, e),
-      "data-testid": p.container,
-      ref: a,
+      className: c("p-meter", { "p-meter--small": g }, e),
+      "data-testid": _.container,
+      ref: l,
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ n(
           "div",
           {
             className: "p-meter__bar",
-            "data-testid": p.bar,
-            style: { backgroundColor: s },
-            children: /* @__PURE__ */ d(
-              I,
+            "data-testid": _.bar,
+            style: { backgroundColor: a },
+            children: /* @__PURE__ */ n(
+              G,
               {
-                data: r,
+                data: t,
                 datumWidths: h,
-                maximum: c,
-                overColor: l,
+                maximum: m,
+                overColor: p,
                 segmentWidth: F,
                 separatorColor: u
               }
             )
           }
         ),
-        n && /* @__PURE__ */ d(P, { label: n, labelClassName: o })
+        s && /* @__PURE__ */ n(J, { label: s, labelClassName: r })
       ]
     }
   );
-}, Q = ({ children: e, to: r, ...s }) => /* @__PURE__ */ d(D, { ...s, href: r, rel: "noreferrer noopener", target: "_blank", children: e });
+}, he = ({ children: e, to: t, ...a }) => /* @__PURE__ */ n(W, { ...a, href: t, rel: "noreferrer noopener", target: "_blank", children: e }), K = ({ children: e }) => /* @__PURE__ */ n(L, { children: e }), Q = ({
+  isCollapsed: e,
+  setIsCollapsed: t,
+  className: a
+}) => /* @__PURE__ */ n(
+  A,
+  {
+    className: "p-side-navigation__tooltip-wrapper",
+    message: /* @__PURE__ */ C(L, { children: [
+      e ? "expand" : "collapse",
+      "( ",
+      /* @__PURE__ */ n("code", { children: "[" }),
+      " )"
+    ] }),
+    position: "right",
+    tooltipClassName: "p-side-navigation__tooltip",
+    children: /* @__PURE__ */ n(
+      S,
+      {
+        appearance: "base",
+        "aria-label": `${e ? "expand" : "collapse"} main navigation`,
+        className: c(
+          "is-dense has-icon is-dark u-no-margin l-navigation-collapse-toggle",
+          a
+        ),
+        onClick: (s) => {
+          t(!e), s.stopPropagation(), s.currentTarget.blur();
+        },
+        children: /* @__PURE__ */ n($, { light: !0, name: "sidebar-toggle" })
+      }
+    )
+  }
+), U = ({ children: e }) => /* @__PURE__ */ n("div", { className: "p-panel__content", children: /* @__PURE__ */ n("nav", { className: "p-side-navigation--icons is-dark", children: e }) }), V = ({ children: e }) => /* @__PURE__ */ n("div", { className: "p-panel__controls u-no-margin--top", children: e }), X = ({ children: e }) => /* @__PURE__ */ n("div", { className: "l-navigation__drawer", children: /* @__PURE__ */ n("div", { className: "p-panel is-dark", children: e }) }), Y = ({ children: e }) => /* @__PURE__ */ n("div", { className: "p-panel__footer", children: e }), Z = ({ children: e }) => /* @__PURE__ */ n("div", { className: "p-panel__header", children: e }), ee = ({ light: e = !0, name: t }) => /* @__PURE__ */ n($, { className: "p-side-navigation__icon", light: e, name: t }), te = ({ children: e, className: t, hasActiveChild: a }) => /* @__PURE__ */ n("li", { className: c("p-side-navigation__item", t, { "has-active-child": a }), children: e }), ne = ({ children: e, id: t, variant: a = "base" }) => /* @__PURE__ */ n("span", { className: c("p-side-navigation__label", { "p-side-navigation__label--group": a === "group" }), id: t, children: e }), ae = ({
+  as: e,
+  ...t
+}) => /* @__PURE__ */ n(
+  e || "a",
+  {
+    className: c("p-side-navigation__link", t.className),
+    ...t
+  }
+), oe = ({ children: e, className: t }) => /* @__PURE__ */ n("ul", { className: c("p-side-navigation__list", t), children: e }), se = ({ as: e, children: t, className: a, ...s }) => /* @__PURE__ */ n(e || "a", { className: c("p-panel__logo", a), ...s, children: /* @__PURE__ */ n("div", { className: "p-navigation__tagged-logo", children: t }) }), ie = ({ children: e }) => D(e, { className: "p-panel__logo-icon p-navigation__logo-icon" }), re = ({ children: e, variant: t = "base" }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: c("p-panel__logo-name is-fading-when-collapsed", {
+      "p-panel__logo-name--small": t === "small"
+    }),
+    children: e
+  }
+), le = ({ children: e }) => /* @__PURE__ */ n("div", { className: "p-navigation__logo-tag", children: e }), ce = ({ children: e }) => /* @__PURE__ */ n("span", { className: "p-panel__logo-text", children: e }), pe = ({ children: e, className: t, onClick: a }) => /* @__PURE__ */ n(S, { appearance: "base", className: c("p-side-navigation__button--menu has-icon is-dark", t), onClick: a, children: e }), de = ({ children: e }) => /* @__PURE__ */ n("span", { className: "p-side-navigation__text", children: e });
+const i = ({ children: e, className: t, isCollapsed: a }) => /* @__PURE__ */ n("header", { "aria-label": "main navigation", className: c("l-navigation is-maas", t, { "is-collapsed": a, "is-pinned": !a }), children: e }), me = ({ children: e, className: t }) => /* @__PURE__ */ n("header", { "aria-label": "navigation", className: "l-navigation-bar", children: /* @__PURE__ */ n("div", { className: c("p-panel is-dark", t), children: e }) });
+i.Header = Z;
+i.Banner = K;
+i.Drawer = X;
+i.Controls = V;
+i.CollapseToggle = Q;
+i.Content = U;
+i.Footer = Y;
+i.List = oe;
+i.Item = te;
+i.Link = ae;
+i.Text = de;
+i.Icon = ee;
+i.Label = ne;
+i.Logo = se;
+i.LogoTag = le;
+i.LogoIcon = ie;
+i.LogoName = re;
+i.LogoText = ce;
+me.MenuButton = pe;
 export {
-  Q as ExternalLink,
-  K as Meter,
-  A as defaultEmptyColor,
-  J as defaultFilledColors,
-  R as defaultOverColor,
-  z as defaultSeparatorColor,
-  f as meterColor,
-  p as testIds
+  he as ExternalLink,
+  fe as Meter,
+  i as Navigation,
+  me as NavigationBar,
+  H as defaultEmptyColor,
+  _e as defaultFilledColors,
+  P as defaultOverColor,
+  q as defaultSeparatorColor,
+  v as meterColor,
+  _ as testIds
 };

package/dist/@canonical/maas-react-components.umd.js

@@ -1,11 +1,11 @@
-(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@canonical/react-components")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@canonical/react-components"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n["@canonical/maas-react-components"]={},n["react/jsx-runtime"],n.React,n["@canonical/react-components"]))})(this,function(n,r,h,S){"use strict";function $(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var w={exports:{}};/*!
+(function(r,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react"),require("@canonical/react-components")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@canonical/react-components"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r["@canonical/maas-react-components"]={},r["react/jsx-runtime"],r.React,r["@canonical/react-components"]))})(this,function(r,a,N,f){"use strict";function I(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var w={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/(function(e){(function(){var s={}.hasOwnProperty;function o(){for(var a=[],l=0;l<arguments.length;l++){var t=arguments[l];if(t){var c=typeof t;if(c==="string"||c==="number")a.push(t);else if(Array.isArray(t)){if(t.length){var u=o.apply(null,t);u&&a.push(u)}}else if(c==="object"){if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]")){a.push(t.toString());continue}for(var m in t)s.call(t,m)&&t[m]&&a.push(m)}}}return a.join(" ")}e.exports?(o.default=o,e.exports=o):window.classNames=o})()})(w);var M=w.exports;const _=$(M),I="",d={caution:"#F99B11",light:"#F7F7F7",linkFaded:"#D3E4ED",link:"#0066CC",negative:"#C7162B",positiveFaded:"#B7CCB9",positiveMid:"#4DAB4D",positive:"#0E8420"},B=[d.link,d.positive,d.negative,d.caution],k=d.linkFaded,F=d.caution,j=d.light,E=2,N=1,O=(e,s,o)=>{var t,c;const a=((c=(t=e==null?void 0:e.current)==null?void 0:t.getBoundingClientRect())==null?void 0:c.width)||0,l=a>s*E?a/s:E;o(l)},p={bar:"meter-bar",container:"meter-container",filled:"meter-filled",label:"meter-label",meteroverflow:"meter-overflow",segments:"meter-segments"},x=({data:e,datumWidths:s,maximum:o,overColor:a,segmentWidth:l,separatorColor:t})=>{const c=()=>e.reduce((v,i)=>v+i.value,0)>o,u=(v,i)=>({backgroundColor:v.color,left:`${s.reduce((b,f,C)=>i>C?b+f:b,0)}%`,width:`${s[i]}%`}),m=()=>({background:`repeating-linear-gradient(
+*/(function(e){(function(){var t={}.hasOwnProperty;function n(){for(var l=[],i=0;i<arguments.length;i++){var o=arguments[i];if(o){var p=typeof o;if(p==="string"||p==="number")l.push(o);else if(Array.isArray(o)){if(o.length){var u=n.apply(null,o);u&&l.push(u)}}else if(p==="object"){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){l.push(o.toString());continue}for(var _ in o)t.call(o,_)&&o[_]&&l.push(_)}}}return l.join(" ")}e.exports?(n.default=n,e.exports=n):window.classNames=n})()})(w);var M=w.exports;const c=I(M),le="",g={caution:"#F99B11",light:"#F7F7F7",linkFaded:"#D3E4ED",link:"#0066CC",negative:"#C7162B",positiveFaded:"#B7CCB9",positiveMid:"#4DAB4D",positive:"#0E8420"},x=[g.link,g.positive,g.negative,g.caution],y=g.linkFaded,S=g.caution,F=g.light,B=2,E=1,T=(e,t,n)=>{var o,p;const l=((p=(o=e==null?void 0:e.current)==null?void 0:o.getBoundingClientRect())==null?void 0:p.width)||0,i=l>t*B?l/t:B;n(i)},m={bar:"meter-bar",container:"meter-container",filled:"meter-filled",label:"meter-label",meteroverflow:"meter-overflow",segments:"meter-segments"},O=({data:e,datumWidths:t,maximum:n,overColor:l,segmentWidth:i,separatorColor:o})=>{const p=()=>e.reduce((h,d)=>h+d.value,0)>n,u=(h,d)=>({backgroundColor:h.color,left:`${t.reduce((b,v,C)=>d>C?b+v:b,0)}%`,width:`${t[d]}%`}),_=()=>({background:`repeating-linear-gradient(
       to right,
       transparent 0,
-      transparent ${l-N}px,
-      ${t} ${l-N}px,
-      ${t} ${l}px
-    )`});return r.jsxs(r.Fragment,{children:[c()?r.jsx("div",{className:"p-meter__filled","data-testid":p.meteroverflow,style:{backgroundColor:a,width:"100%"}}):e.map((v,i)=>r.jsx("div",{className:"p-meter__filled","data-testid":p.filled,style:u(v,i)},`meter-${i}`)),l>0&&r.jsx("div",{className:"p-meter__separators","data-testid":p.segments,style:m()})]})},D=({labelClassName:e,label:s})=>r.jsx("div",{className:_("p-meter__label",e),"data-testid":p.label,children:s}),L=({className:e,data:s,emptyColor:o=k,label:a,labelClassName:l,max:t,overColor:c=F,segmented:u=!1,separatorColor:m=j,small:v=!1})=>{const i=h.useRef(null),b=s.reduce((y,z)=>y+z.value,0),f=t||b,C=s.map(y=>y.value/f*100),[q,g]=h.useState(0);h.useEffect(()=>{u&&O(i,f,g)},[f,u]);const A=h.useCallback(()=>{O(i,f,g)},[i,f,g]);return S.useListener(window,A,"resize",!0,u),r.jsxs("div",{className:_("p-meter",{"p-meter--small":v},e),"data-testid":p.container,ref:i,children:[r.jsx("div",{className:"p-meter__bar","data-testid":p.bar,style:{backgroundColor:o},children:r.jsx(x,{data:s,datumWidths:C,maximum:f,overColor:c,segmentWidth:q,separatorColor:m})}),a&&r.jsx(D,{label:a,labelClassName:l})]})},W=({children:e,to:s,...o})=>r.jsx(S.Link,{...o,href:s,rel:"noreferrer noopener",target:"_blank",children:e});n.ExternalLink=W,n.Meter=L,n.defaultEmptyColor=k,n.defaultFilledColors=B,n.defaultOverColor=F,n.defaultSeparatorColor=j,n.meterColor=d,n.testIds=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+      transparent ${i-E}px,
+      ${o} ${i-E}px,
+      ${o} ${i}px
+    )`});return a.jsxs(a.Fragment,{children:[p()?a.jsx("div",{className:"p-meter__filled","data-testid":m.meteroverflow,style:{backgroundColor:l,width:"100%"}}):e.map((h,d)=>a.jsx("div",{className:"p-meter__filled","data-testid":m.filled,style:u(h,d)},`meter-${d}`)),i>0&&a.jsx("div",{className:"p-meter__separators","data-testid":m.segments,style:_()})]})},j=({labelClassName:e,label:t})=>a.jsx("div",{className:c("p-meter__label",e),"data-testid":m.label,children:t}),D=({className:e,data:t,emptyColor:n=y,label:l,labelClassName:i,max:o,overColor:p=S,segmented:u=!1,separatorColor:_=F,small:h=!1})=>{const d=N.useRef(null),b=t.reduce((k,re)=>k+re.value,0),v=o||b,C=t.map(k=>k.value/v*100),[oe,L]=N.useState(0);N.useEffect(()=>{u&&T(d,v,L)},[v,u]);const se=N.useCallback(()=>{T(d,v,L)},[d,v,L]);return f.useListener(window,se,"resize",!0,u),a.jsxs("div",{className:c("p-meter",{"p-meter--small":h},e),"data-testid":m.container,ref:d,children:[a.jsx("div",{className:"p-meter__bar","data-testid":m.bar,style:{backgroundColor:n},children:a.jsx(O,{data:t,datumWidths:C,maximum:v,overColor:p,segmentWidth:oe,separatorColor:_})}),l&&a.jsx(j,{label:l,labelClassName:i})]})},W=({children:e,to:t,...n})=>a.jsx(f.Link,{...n,href:t,rel:"noreferrer noopener",target:"_blank",children:e}),q=({children:e})=>a.jsx(a.Fragment,{children:e}),A=({isCollapsed:e,setIsCollapsed:t,className:n})=>a.jsx(f.Tooltip,{className:"p-side-navigation__tooltip-wrapper",message:a.jsxs(a.Fragment,{children:[e?"expand":"collapse","( ",a.jsx("code",{children:"["})," )"]}),position:"right",tooltipClassName:"p-side-navigation__tooltip",children:a.jsx(f.Button,{appearance:"base","aria-label":`${e?"expand":"collapse"} main navigation`,className:c("is-dense has-icon is-dark u-no-margin l-navigation-collapse-toggle",n),onClick:l=>{t(!e),l.stopPropagation(),l.currentTarget.blur()},children:a.jsx(f.Icon,{light:!0,name:"sidebar-toggle"})})}),P=({children:e})=>a.jsx("div",{className:"p-panel__content",children:a.jsx("nav",{className:"p-side-navigation--icons is-dark",children:e})}),z=({children:e})=>a.jsx("div",{className:"p-panel__controls u-no-margin--top",children:e}),H=({children:e})=>a.jsx("div",{className:"l-navigation__drawer",children:a.jsx("div",{className:"p-panel is-dark",children:e})}),G=({children:e})=>a.jsx("div",{className:"p-panel__footer",children:e}),J=({children:e})=>a.jsx("div",{className:"p-panel__header",children:e}),K=({light:e=!0,name:t})=>a.jsx(f.Icon,{className:"p-side-navigation__icon",light:e,name:t}),Q=({children:e,className:t,hasActiveChild:n})=>a.jsx("li",{className:c("p-side-navigation__item",t,{"has-active-child":n}),children:e}),U=({children:e,id:t,variant:n="base"})=>a.jsx("span",{className:c("p-side-navigation__label",{"p-side-navigation__label--group":n==="group"}),id:t,children:e}),V=({as:e,...t})=>{const n=e||"a";return a.jsx(n,{className:c("p-side-navigation__link",t.className),...t})},X=({children:e,className:t})=>a.jsx("ul",{className:c("p-side-navigation__list",t),children:e}),Y=({as:e,children:t,className:n,...l})=>{const i=e||"a";return a.jsx(i,{className:c("p-panel__logo",n),...l,children:a.jsx("div",{className:"p-navigation__tagged-logo",children:t})})},Z=({children:e})=>N.cloneElement(e,{className:"p-panel__logo-icon p-navigation__logo-icon"}),R=({children:e,variant:t="base"})=>a.jsx("div",{className:c("p-panel__logo-name is-fading-when-collapsed",{"p-panel__logo-name--small":t==="small"}),children:e}),ee=({children:e})=>a.jsx("div",{className:"p-navigation__logo-tag",children:e}),ae=({children:e})=>a.jsx("span",{className:"p-panel__logo-text",children:e}),te=({children:e,className:t,onClick:n})=>a.jsx(f.Button,{appearance:"base",className:c("p-side-navigation__button--menu has-icon is-dark",t),onClick:n,children:e}),ne=({children:e})=>a.jsx("span",{className:"p-side-navigation__text",children:e}),ie="",s=({children:e,className:t,isCollapsed:n})=>a.jsx("header",{"aria-label":"main navigation",className:c("l-navigation is-maas",t,{"is-collapsed":n,"is-pinned":!n}),children:e}),$=({children:e,className:t})=>a.jsx("header",{"aria-label":"navigation",className:"l-navigation-bar",children:a.jsx("div",{className:c("p-panel is-dark",t),children:e})});s.Header=J,s.Banner=q,s.Drawer=H,s.Controls=z,s.CollapseToggle=A,s.Content=P,s.Footer=G,s.List=X,s.Item=Q,s.Link=V,s.Text=ne,s.Icon=K,s.Label=U,s.Logo=Y,s.LogoTag=ee,s.LogoIcon=Z,s.LogoName=R,s.LogoText=ae,$.MenuButton=te,r.ExternalLink=W,r.Meter=D,r.Navigation=s,r.NavigationBar=$,r.defaultEmptyColor=y,r.defaultFilledColors=x,r.defaultOverColor=S,r.defaultSeparatorColor=F,r.meterColor=g,r.testIds=m,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/dist/src/lib/elements/Meter/Meter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const meterColor: {
     readonly caution: "#F99B11";
     readonly light: "#F7F7F7";

package/dist/src/lib/index.d.ts

@@ -1 +1,2 @@
 export * from "./elements";
+export * from "./sections";

package/dist/src/lib/sections/Navigation/Banner/Banner.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationBannerProps {
+    children: ReactNode;
+}
+export declare const Banner: ({ children }: NavigationBannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Banner/Banner.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Banner>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Banner/Banner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/CollapseToggle/CollapseToggle.d.ts

@@ -0,0 +1,6 @@
+export interface NavigationCollapseToggleProps {
+    isCollapsed: boolean;
+    setIsCollapsed: (isCollapsed: boolean) => void;
+    className?: string;
+}
+export declare const CollapseToggle: ({ isCollapsed, setIsCollapsed, className, }: NavigationCollapseToggleProps) => JSX.Element;

package/dist/src/lib/sections/Navigation/CollapseToggle/CollapseToggle.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.CollapseToggle>;
+export default meta;
+export declare const Example: {
+    args: {
+        isCollapsed: boolean;
+        setIsCollapsed: () => void;
+    };
+};

package/dist/src/lib/sections/Navigation/CollapseToggle/CollapseToggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Content/Content.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationContentProps {
+    children: ReactNode;
+}
+export declare const Content: ({ children }: NavigationContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Content/Content.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Content>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Content/Content.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Controls/Controls.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationPanelControlsProps {
+    children: ReactNode;
+}
+export declare const Controls: ({ children }: NavigationPanelControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Controls/Controls.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Controls>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Controls/Controls.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Drawer/Drawer.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationDrawerProps {
+    children: ReactNode;
+}
+export declare const Drawer: ({ children }: NavigationDrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Drawer>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Footer/Footer.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationFooterProps {
+    children: ReactNode;
+}
+export declare const Footer: ({ children }: NavigationFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Footer/Footer.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Footer>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Footer/Footer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Header/Header.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationHeaderProps {
+    children: ReactNode;
+}
+export declare const Header: ({ children }: NavigationHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Header/Header.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Header>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Header/Header.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Icon/Icon.d.ts

@@ -0,0 +1,5 @@
+export interface NavigationIconProps {
+    light?: boolean;
+    name: string;
+}
+export declare const Icon: ({ light, name }: NavigationIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Icon/Icon.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Icon>;
+export default meta;
+export declare const Example: {
+    args: {
+        name: string;
+    };
+};

package/dist/src/lib/sections/Navigation/Icon/Icon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Item/Item.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface NavigationItemProps {
+    children: ReactNode;
+    className?: string;
+    hasActiveChild?: boolean;
+}
+export declare const Item: ({ children, className, hasActiveChild }: NavigationItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Item/Item.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Item>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+        hasActiveChild: boolean;
+    };
+};
+export declare const GroupExample: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+        hasActiveChild: boolean;
+    };
+};

package/dist/src/lib/sections/Navigation/Item/Item.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Label/Label.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface NavigationLabelProps {
+    children: ReactNode;
+    id?: string;
+    variant?: "base" | "group";
+}
+export declare const Label: ({ children, id, variant }: NavigationLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Label/Label.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Label>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: string;
+        variant: string;
+    };
+};

package/dist/src/lib/sections/Navigation/Label/Label.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Link/Link.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, ElementType } from "react";
+import { AsProp } from '../../../../lib/sections/Navigation/types';
+export interface NavigationLinkProps extends ComponentProps<typeof Link> {
+}
+export declare const Link: <C extends ElementType = "a", T extends ComponentProps<C> = ComponentProps<C>>({ as, ...props }: AsProp<C> & Omit<T, "as">) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Link/Link.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Link>;
+export default meta;
+export declare const Example: {
+    args: {
+        as: string;
+        href: string;
+        "aria-current": string;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const ButtonExample: {
+    args: {
+        as: <P>({ appearance, children, className, dense, disabled, element: Component, hasIcon, inline, onClick, small, ...buttonProps }: import("@canonical/react-components").ButtonProps<P>) => JSX.Element;
+        appearance: string;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Link/Link.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/List/List.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface NavigationListProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const List: ({ children, className }: NavigationListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/List/List.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.List>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/List/List.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Logo/Logo.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, ElementType, ReactNode } from "react";
+import { AsProp } from '../../../../lib/sections/Navigation/types';
+export interface NavigationLogoProps extends ComponentProps<typeof Logo> {
+    children: ReactNode;
+}
+export declare const Logo: <C extends ElementType = "a", T extends ComponentProps<C> = ComponentProps<C>>({ as, children, className, ...props }: AsProp<C> & Omit<T, "as">) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Logo/Logo.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.Logo>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/Logo/Logo.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/LogoIcon/LogoIcon.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from "react";
+export interface NavigationLogoIconProps {
+    children: ReactElement;
+}
+export declare const LogoIcon: ({ children }: NavigationLogoIconProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/src/lib/sections/Navigation/LogoIcon/LogoIcon.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.LogoIcon>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/LogoIcon/LogoIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/LogoName/LogoName.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface NavigationLogoNameProps {
+    children: ReactNode;
+    variant?: "base" | "small";
+}
+export declare const LogoName: ({ children, variant }: NavigationLogoNameProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/LogoName/LogoName.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.LogoName>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: string;
+        variant: string;
+    };
+};
+export declare const SmallExample: {
+    args: {
+        children: string;
+        variant: string;
+    };
+};

package/dist/src/lib/sections/Navigation/LogoName/LogoName.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/LogoTag/LogoTag.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationLogoTagProps {
+    children: ReactNode;
+}
+export declare const LogoTag: ({ children }: NavigationLogoTagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/LogoTag/LogoTag.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from '../../../../lib/sections/Navigation/Navigation';
+declare const meta: Meta<typeof Navigation.LogoTag>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/src/lib/sections/Navigation/LogoTag/LogoTag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/LogoText/LogoText.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationTextProps {
+    children: ReactNode;
+}
+export declare const LogoText: ({ children }: NavigationTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/LogoText/LogoText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/MenuButton/MenuButton.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "@canonical/react-components";
+export interface NavigationMenuButtonProps {
+    children: ReactNode;
+    className?: string;
+    onClick: ButtonProps["onClick"];
+}
+export declare const MenuButton: ({ children, className, onClick }: NavigationMenuButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/MenuButton/MenuButton.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import { NavigationBar } from '../../../../lib/sections/Navigation';
+declare const meta: Meta<typeof NavigationBar.MenuButton>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: string;
+        onClick: () => void;
+    };
+};

package/dist/src/lib/sections/Navigation/MenuButton/MenuButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Navigation.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+export interface NavigationProps {
+    children: ReactNode;
+    className?: string;
+    isCollapsed: boolean;
+}
+export declare const Navigation: {
+    ({ children, className, isCollapsed }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children }: import("./Header/Header").NavigationHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Banner: ({ children }: import("./Banner/Banner").NavigationBannerProps) => import("react/jsx-runtime").JSX.Element;
+    Drawer: ({ children }: import("./Drawer/Drawer").NavigationDrawerProps) => import("react/jsx-runtime").JSX.Element;
+    Controls: ({ children }: import("./Controls/Controls").NavigationPanelControlsProps) => import("react/jsx-runtime").JSX.Element;
+    CollapseToggle: ({ isCollapsed, setIsCollapsed, className, }: import("./CollapseToggle/CollapseToggle").NavigationCollapseToggleProps) => JSX.Element;
+    Content: ({ children }: import("./Content/Content").NavigationContentProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children }: import("./Footer/Footer").NavigationFooterProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, className }: import("./List/List").NavigationListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, className, hasActiveChild }: import("./Item/Item").NavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+    Link: <C extends import("react").ElementType = "a", T extends import("react").ComponentProps<C> = import("react").ComponentProps<C>>({ as, ...props }: import("./types").AsProp<C> & Omit<T, "as">) => import("react/jsx-runtime").JSX.Element;
+    Text: ({ children }: import("./Text/Text").NavigationTextProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ light, name }: import("./Icon/Icon").NavigationIconProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, id, variant }: import("./Label/Label").NavigationLabelProps) => import("react/jsx-runtime").JSX.Element;
+    Logo: <C_1 extends import("react").ElementType = "a", T_1 extends import("react").ComponentProps<C_1> = import("react").ComponentProps<C_1>>({ as, children, className, ...props }: import("./types").AsProp<C_1> & Omit<T_1, "as">) => import("react/jsx-runtime").JSX.Element;
+    LogoTag: ({ children }: import("./LogoTag/LogoTag").NavigationLogoTagProps) => import("react/jsx-runtime").JSX.Element;
+    LogoIcon: ({ children }: import("./LogoIcon/LogoIcon").NavigationLogoIconProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    LogoName: ({ children, variant }: import("./LogoName/LogoName").NavigationLogoNameProps) => import("react/jsx-runtime").JSX.Element;
+    LogoText: ({ children }: import("./LogoText/LogoText").NavigationTextProps) => import("react/jsx-runtime").JSX.Element;
+};
+export interface NavigationBarProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const NavigationBar: {
+    ({ children, className }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+    MenuButton: ({ children, className, onClick }: import("./MenuButton/MenuButton").NavigationMenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/src/lib/sections/Navigation/Navigation.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { Navigation } from "./Navigation";
+declare const meta: Meta<typeof Navigation>;
+export default meta;
+export declare const Example: {
+    args: {
+        isCollapsed: boolean;
+    };
+};

package/dist/src/lib/sections/Navigation/Navigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/NavigationBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/Text/Text.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationTextProps {
+    children: ReactNode;
+}
+export declare const Text: ({ children }: NavigationTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/sections/Navigation/Text/Text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Navigation/index.d.ts

@@ -0,0 +1 @@
+export * from "./Navigation";

package/dist/src/lib/sections/Navigation/types.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from "react";
+export interface AsProp<C extends ElementType> {
+    as?: C;
+}

package/dist/src/lib/sections/index.d.ts

@@ -0,0 +1 @@
+export * from "./Navigation";

package/dist/style.css

@@ -1 +1 @@
-.p-meter{margin-bottom:.75rem;padding-top:.375rem}.p-meter__bar{border-radius:.875rem;height:.875rem;overflow:hidden;position:relative;width:100%;border:1px solid #999}.p-meter__label{display:flex;justify-content:space-between;margin-bottom:-.125rem;padding-top:.25rem}.p-meter__filled{height:100%;position:absolute;width:0%}.p-meter__separators{height:100%;position:absolute;width:100%;z-index:1}.p-meter--small{margin-bottom:.875rem;padding-top:.375rem}.p-meter--small .p-meter__bar{border-radius:.75rem;height:.75rem;margin-bottom:.375rem}.p-meter--small .p-meter__label{margin-bottom:0;padding-top:0}
+.p-meter{margin-bottom:.75rem;padding-top:.375rem}.p-meter__bar{border-radius:.875rem;height:.875rem;overflow:hidden;position:relative;width:100%;border:1px solid #999}.p-meter__label{display:flex;justify-content:space-between;margin-bottom:-.125rem;padding-top:.25rem}.p-meter__filled{height:100%;position:absolute;width:0%}.p-meter__separators{height:100%;position:absolute;width:100%;z-index:1}.p-meter--small{margin-bottom:.875rem;padding-top:.375rem}.p-meter--small .p-meter__bar{border-radius:.75rem;height:.75rem;margin-bottom:.375rem}.p-meter--small .p-meter__label{margin-bottom:0;padding-top:0}hr.is-fixed-width{margin-left:auto;margin-right:auto;max-width:78rem;width:calc(100% - 2rem)}@media (min-width: 620px){hr.is-fixed-width{max-width:77rem;width:calc(100% - 3rem)}}.row hr.is-fixed-width,.u-fixed-width hr.is-fixed-width{width:100%}/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}h4.is-accent,h3.is-accent,h2.is-accent,h1.is-accent{color:#0f95a1}h2,h1{font-size:2rem;font-style:normal;font-weight:180;line-height:2.5rem;margin-bottom:.95rem;margin-top:0;max-width:40em;padding-top:.55rem}@media (min-width: 1036px){h2,h1{font-size:2.5rem;line-height:3rem;margin-bottom:.95rem;padding-top:.55rem}}h1{font-weight:550}h3{font-size:1.5rem;font-style:normal;font-weight:550;line-height:2rem;margin-bottom:1.05rem;margin-top:0;max-width:40em;padding-top:.45rem}@media (min-width: 1036px){h3{font-size:1.5rem;line-height:2rem;margin-bottom:1.05rem;padding-top:.45rem}}h4{font-size:1.5rem;font-style:normal;font-weight:275;line-height:2rem;margin-bottom:1.05rem;margin-top:0;max-width:40em;padding-top:.45rem}@media (min-width: 1036px){h4{font-size:1.5rem;line-height:2rem;margin-bottom:1.05rem;padding-top:.45rem}}@media (min-width: 1681px){h4{margin-bottom:1.05rem;padding-top:.45rem}}h5{font-size:1rem;font-style:normal;font-weight:550;line-height:1.5rem;margin-bottom:1.1rem;margin-top:0;max-width:40em;padding-top:.4rem}h6{font-size:1rem;font-style:italic;font-weight:400;line-height:1.5rem;margin-bottom:1.1rem;margin-top:0;max-width:40em;padding-top:.4rem}@media (min-width: 1681px){h6{padding-top:.4rem}}summary,p,dt,dd,cite,.p-text--default,.p-text--small-caps,.p-text--x-small-capitalised{line-height:1.5rem;margin-top:0;padding-top:.4rem}dt,dd,cite,.p-text--default,.p-text--small-caps,.p-text--x-small-capitalised{font-size:1rem;font-weight:400;margin-bottom:.1rem}p{margin-bottom:1.1rem}p:not([class*=p-heading--]):not([class*=p-muted-heading])+p{margin-top:-.5rem}small,.p-text--small{font-size:.875rem;line-height:1.25rem;margin-bottom:.95rem;padding-top:.05rem}@media (min-width: 1681px){small,.p-text--small{padding-top:.05rem}}.p-text--x-small,.l-navigation .p-side-navigation__label--group,thead th{font-size:.75rem;font-weight:550;line-height:1rem;margin-bottom:.75rem;padding-top:.25rem}@media (min-width: 1681px){.p-text--x-small,.l-navigation .p-side-navigation__label--group,thead th{padding-top:.25rem}}.p-text--small-caps,.p-text--x-small-capitalised{font-variant-caps:all-small-caps;font-variant-numeric:oldstyle-nums;letter-spacing:.05em;margin-bottom:.6rem}.u-align-text--x-small-to-default.p-text--small-caps,.u-align-text--x-small-to-default.p-text--x-small-capitalised{padding-top:.4rem}.l-navigation .p-side-navigation__label--group,thead th{text-transform:uppercase}dt,b,strong{font-weight:550}p:not([class*=p-heading--]):not([class*=p-muted-heading])+h1,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--1{padding-top:2.05rem}@media (min-width: 1036px){p:not([class*=p-heading--]):not([class*=p-muted-heading])+h1,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--1{padding-top:2.05rem}}p:not([class*=p-heading--]):not([class*=p-muted-heading])+h2,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--2{padding-top:2.05rem}@media (min-width: 1036px){p:not([class*=p-heading--]):not([class*=p-muted-heading])+h2,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--2{padding-top:2.05rem}}p:not([class*=p-heading--]):not([class*=p-muted-heading])+h3,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--3{padding-top:1.95rem}@media (min-width: 1036px){p:not([class*=p-heading--]):not([class*=p-muted-heading])+h3,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--3{padding-top:1.95rem}}p:not([class*=p-heading--]):not([class*=p-muted-heading])+h4,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--4{padding-top:1.95rem}@media (min-width: 1036px){p:not([class*=p-heading--]):not([class*=p-muted-heading])+h4,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--4{padding-top:1.95rem}}p:not([class*=p-heading--]):not([class*=p-muted-heading])+h5,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--5,p:not([class*=p-heading--]):not([class*=p-muted-heading])+h6,p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-heading--6{padding-top:1.9rem}p:not([class*=p-heading--]):not([class*=p-muted-heading])+.p-muted-heading{padding-top:1.55rem}fieldset{border:1.5px solid #d9d9d9}fieldset{background-color:#fff;color:#000}fieldset{overflow:auto;padding:1rem}fieldset{margin-bottom:1.5rem;overflow:auto;padding:1rem}td,th{padding-bottom:.5rem;padding-top:calc(.5rem - 1px)}hr{border:0;height:1px;margin-top:0;position:relative;width:100%}.p-panel__header .p-icon--sidebar-toggle,.p-icon--submit-bug,.p-icon--profile,.p-icon--units,.p-icon--tag,.p-icon--settings,.p-icon--connected,.p-icon--pods,.p-icon--machines{overflow:hidden;text-indent:110vw;white-space:nowrap}h2.u-no-margin--bottom,h1.u-no-margin--bottom{margin-bottom:-.55rem!important}@media (min-width: 1036px){h2.u-no-margin--bottom,h1.u-no-margin--bottom{margin-bottom:-.55rem!important}}h3.u-no-margin--bottom{margin-bottom:.05rem!important}@media (min-width: 1036px){h3.u-no-margin--bottom{margin-bottom:-.45rem!important}}h4.u-no-margin--bottom{margin-bottom:.05rem!important}@media (min-width: 1036px){h4.u-no-margin--bottom{margin-bottom:-.45rem!important}}@media (min-width: 1681px){h4.u-no-margin--bottom{margin-bottom:-.45rem!important}}h5.u-no-margin--bottom,h6.u-no-margin--bottom,p.u-no-margin--bottom,.u-no-margin--bottom.p-text--small-caps,.u-no-margin--bottom.p-text--x-small-capitalised{margin-bottom:.1rem!important}small.u-no-margin--bottom,.u-no-margin--bottom.p-text--small,.u-no-margin--bottom.p-text--x-small,.l-navigation .u-no-margin--bottom.p-side-navigation__label--group,thead th.u-no-margin--bottom{margin-bottom:-.05rem!important}hr.u-no-margin--bottom{margin-bottom:-1px!important;z-index:2}.p-panel__header .p-icon--sidebar-toggle,.p-icon--submit-bug,.p-icon--profile,.p-icon--units,.p-icon--tag,.p-icon--settings,.p-icon--connected,.p-icon--pods,.p-icon--machines{background-size:contain;height:1rem;width:1rem;background-position:center;background-repeat:no-repeat;display:inline-block;font-size:inherit;margin:0;padding:0;position:relative;vertical-align:calc(.5px + .3465em - .5rem)}body{background:#fff}body.is-paper{background:#f3f3f3}@font-face{font-family:Ubuntu variable;font-stretch:100%;font-style:normal;font-weight:100 800;src:url(https://assets.ubuntu.com/v1/f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2) format("woff2-variations")}@font-face{font-family:Ubuntu variable;font-stretch:100%;font-style:italic;font-weight:100 800;src:url(https://assets.ubuntu.com/v1/90b59210-Ubuntu-Italic%5Bwdth,wght%5D-latin-v0.896a.woff2) format("woff2-variations")}@font-face{font-family:Ubuntu Mono variable;font-style:normal;font-weight:100 800;src:url(https://assets.ubuntu.com/v1/d5fc1819-UbuntuMono%5Bwght%5D-latin-v0.869.woff2) format("woff2-variations")}html{color:#000;font-family:Ubuntu variable,Ubuntu,-apple-system,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.5rem;font-size:1rem}@media (min-width: 1681px){html{font-size:1.125rem;line-height:1.6875rem}}p{max-width:40em}small.dense,.p-text--small.dense{margin-bottom:1.2rem}.p-text--small-caps,.p-text--x-small-capitalised{font-weight:550}p:not([class*=p-heading--]):not([class*=p-muted-heading]):empty{line-height:0;margin:0;padding:0}sub,sup{line-height:0;position:relative;vertical-align:baseline}abbr[title]{border-bottom:.1em dotted;cursor:help;text-decoration:none}blockquote{border-left:2px solid #666;margin-bottom:1.5rem;margin-left:0;margin-top:0;overflow:auto;padding-bottom:.5rem;padding-left:1.5rem}blockquote>:last-child{margin-bottom:.1rem}blockquote>cite{display:block;font-style:normal}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}button{background-color:#fff;border-color:#0000008f;color:#000}button:visited{color:#000}button:hover{background-color:#f2f2f2;border-color:#0000008f}button:active,button[aria-pressed=true],button[aria-selected=true],button[aria-expanded=true]{background-color:#ebebeb;border-color:#0000008f;transition-duration:0s}button:disabled:active,button:disabled[aria-pressed=true],button:disabled[aria-selected=true],button:disabled[aria-expanded=true],button:disabled:hover,button.is-disabled:active,button.is-disabled[aria-pressed=true],button.is-disabled[aria-selected=true],button.is-disabled[aria-expanded=true],button.is-disabled:hover{background-color:transparent;border-color:#0000008f}button.is-dense{padding-bottom:calc(.15rem - 1.5px);padding-top:calc(.15rem - 1.5px)}button{transition-duration:.1s;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.55,.055,.675,.19);border-style:solid;border-width:1.5px;cursor:pointer;display:inline-block;font-size:1rem;font-weight:400;justify-content:center;line-height:1.5rem;margin:0 1rem 1.2rem 0;padding:calc(.4rem - 1px) 1rem;text-align:center;text-decoration:none}button:focus{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}button:focus-visible{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}button:focus:not(:focus-visible){outline:0;outline-offset:0}button:active,button:focus,button:hover{text-decoration:none}button:disabled,button.is-disabled{cursor:not-allowed;opacity:.33}button:last-child{margin-right:0}button.is-dense{margin-bottom:.1rem}button.is-small{font-size:.875rem;line-height:1.25rem;margin-bottom:.7rem;padding:calc(.05rem - 1.5px) .5rem}button.is-small.is-dense{margin-bottom:.1rem;padding-bottom:calc(.15rem - 1.5px);padding-top:calc(.15rem - 1.5px)}p button{margin-bottom:.6rem;margin-top:-.4rem}p+p>button{margin-top:.1rem}code,kbd,pre,samp{font-family:Ubuntu Mono variable,Ubuntu Mono,Consolas,Monaco,Courier,monospace;font-weight:400;text-align:left}code b,code strong,kbd b,kbd strong,pre b,pre strong,samp b,samp strong{font-weight:550}code,kbd,samp{background-color:#00000008;-webkit-box-decoration-break:slice;box-decoration-break:slice;color:inherit;line-height:1.25rem;padding:calc(.25rem - 1.5px) .25rem}code,pre{direction:ltr;-webkit-hyphens:none;hyphens:none;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-spacing:normal;word-wrap:break-word}pre code{background:none;box-shadow:none;display:inline-block;line-height:1.5rem;margin-left:0;margin-right:0;padding:0}pre{background-color:#00000008;color:#000;display:block;margin-bottom:1.5rem;margin-top:0;overflow:auto;padding:.5rem 1rem;text-align:left;text-shadow:none;white-space:pre}[class*=--dark] code,code.is-dark{background-color:#ffffff4d;color:#fff}details{margin-bottom:1.5rem;overflow:auto}summary{margin-bottom:.4rem;max-width:40em;padding-bottom:.6rem}summary:focus{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}summary:focus-visible{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}summary:focus:not(:focus-visible){outline:0;outline-offset:0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.1875rem;margin:.5rem 0;padding:0;width:100%}input[type=range]::-webkit-slider-runnable-track{border-radius:.1875rem;height:.1875rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:1.5px solid #666;border-radius:50%;box-shadow:0 0 .1875rem 1px #0003;height:1rem;margin-top:-.40625rem;width:1rem}input[type=range]::-webkit-slider-thumb:hover{cursor:pointer}input[type=range]::-moz-range-track{background:#d9d9d9;border-radius:.1875rem;height:.1875rem}input[type=range]::-moz-range-progress{background-color:#06c;border-radius:.1875rem;height:.1875rem}input[type=range]::-moz-range-thumb{background:#fff;border:1.5px solid #666;border-radius:50%;box-shadow:0 0 .1875rem 1px #0003;height:1rem;width:1rem}input[type=range]::-moz-range-thumb:hover{cursor:pointer}input[type=range]::-moz-focus-outer{border:0}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-thumb{outline:.1875rem solid #2e96ff}input[type=range]:focus::-moz-range-thumb{outline:.1875rem solid #2e96ff}input[type=range]:disabled{opacity:.5}[type=file],textarea,[type=text],[type=date],[type=datetime],[type=datetime-local],[type=month],[type=time],[type=week],[type=number],[type=search],[type=password],[type=email],[type=url],[type=tel],select{padding-bottom:calc(.4rem - 1px);padding-top:calc(.4rem - 1px)}textarea,[type=text],[type=date],[type=datetime],[type=datetime-local],[type=month],[type=time],[type=week],[type=number],[type=search],[type=password],[type=email],[type=url],[type=tel],select{transition-duration:.165s;transition-property:background-color;transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;border:0 solid transparent;border-bottom:1.5px solid #000;border-radius:0;font-family:Ubuntu variable,Ubuntu,-apple-system,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;font-weight:400;line-height:1.5rem;margin-bottom:1.2rem;min-width:8em;padding-left:.5rem;padding-right:.5rem;vertical-align:baseline;width:100%;background-color:#f5f5f5;border-color:#000;color:#000}textarea:focus,[type=text]:focus,[type=date]:focus,[type=datetime]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=time]:focus,[type=week]:focus,[type=number]:focus,[type=search]:focus,[type=password]:focus,[type=email]:focus,[type=url]:focus,[type=tel]:focus,select:focus{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}textarea:focus-visible,[type=text]:focus-visible,[type=date]:focus-visible,[type=datetime]:focus-visible,[type=datetime-local]:focus-visible,[type=month]:focus-visible,[type=time]:focus-visible,[type=week]:focus-visible,[type=number]:focus-visible,[type=search]:focus-visible,[type=password]:focus-visible,[type=email]:focus-visible,[type=url]:focus-visible,[type=tel]:focus-visible,select:focus-visible{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}textarea:focus:not(:focus-visible),[type=text]:focus:not(:focus-visible),[type=date]:focus:not(:focus-visible),[type=datetime]:focus:not(:focus-visible),[type=datetime-local]:focus:not(:focus-visible),[type=month]:focus:not(:focus-visible),[type=time]:focus:not(:focus-visible),[type=week]:focus:not(:focus-visible),[type=number]:focus:not(:focus-visible),[type=search]:focus:not(:focus-visible),[type=password]:focus:not(:focus-visible),[type=email]:focus:not(:focus-visible),[type=url]:focus:not(:focus-visible),[type=tel]:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:0;outline-offset:0}.is-error textarea:focus,.is-error [type=text]:focus,.is-error [type=date]:focus,.is-error [type=datetime]:focus,.is-error [type=datetime-local]:focus,.is-error [type=month]:focus,.is-error [type=time]:focus,.is-error [type=week]:focus,.is-error [type=number]:focus,.is-error [type=search]:focus,.is-error [type=password]:focus,.is-error [type=email]:focus,.is-error [type=url]:focus,.is-error [type=tel]:focus,.is-error select:focus{outline-color:#c7162b}.is-caution textarea:focus,.is-caution [type=text]:focus,.is-caution [type=date]:focus,.is-caution [type=datetime]:focus,.is-caution [type=datetime-local]:focus,.is-caution [type=month]:focus,.is-caution [type=time]:focus,.is-caution [type=week]:focus,.is-caution [type=number]:focus,.is-caution [type=search]:focus,.is-caution [type=password]:focus,.is-caution [type=email]:focus,.is-caution [type=url]:focus,.is-caution [type=tel]:focus,.is-caution select:focus{outline-color:#f99b11}.is-success textarea:focus,.is-success [type=text]:focus,.is-success [type=date]:focus,.is-success [type=datetime]:focus,.is-success [type=datetime-local]:focus,.is-success [type=month]:focus,.is-success [type=time]:focus,.is-success [type=week]:focus,.is-success [type=number]:focus,.is-success [type=search]:focus,.is-success [type=password]:focus,.is-success [type=email]:focus,.is-success [type=url]:focus,.is-success [type=tel]:focus,.is-success select:focus{outline-color:#0e8420}textarea.is-dense,.is-dense[type=text],.is-dense[type=date],.is-dense[type=datetime],.is-dense[type=datetime-local],.is-dense[type=month],.is-dense[type=time],.is-dense[type=week],.is-dense[type=number],.is-dense[type=search],.is-dense[type=password],.is-dense[type=email],.is-dense[type=url],.is-dense[type=tel],select.is-dense{margin:0 0 .1rem;padding-bottom:calc(.15rem - 1.5px);padding-top:calc(.15rem - 1.5px)}textarea.has-error,.has-error[type=text],.has-error[type=date],.has-error[type=datetime],.has-error[type=datetime-local],.has-error[type=month],.has-error[type=time],.has-error[type=week],.has-error[type=number],.has-error[type=search],.has-error[type=password],.has-error[type=email],.has-error[type=url],.has-error[type=tel],select.has-error{border:1.5px solid #c7162b}textarea.has-caution,.has-caution[type=text],.has-caution[type=date],.has-caution[type=datetime],.has-caution[type=datetime-local],.has-caution[type=month],.has-caution[type=time],.has-caution[type=week],.has-caution[type=number],.has-caution[type=search],.has-caution[type=password],.has-caution[type=email],.has-caution[type=url],.has-caution[type=tel],select.has-caution{border:1.5px solid #f99b11}textarea.has-success,.has-success[type=text],.has-success[type=date],.has-success[type=datetime],.has-success[type=datetime-local],.has-success[type=month],.has-success[type=time],.has-success[type=week],.has-success[type=number],.has-success[type=search],.has-success[type=password],.has-success[type=email],.has-success[type=url],.has-success[type=tel],select.has-success{border:1.5px solid #0e8420}textarea.has-information,.has-information[type=text],.has-information[type=date],.has-information[type=datetime],.has-information[type=datetime-local],.has-information[type=month],.has-information[type=time],.has-information[type=week],.has-information[type=number],.has-information[type=search],.has-information[type=password],.has-information[type=email],.has-information[type=url],.has-information[type=tel],select.has-information{border:1.5px solid #24598f}textarea:hover,[type=text]:hover,[type=date]:hover,[type=datetime]:hover,[type=datetime-local]:hover,[type=month]:hover,[type=time]:hover,[type=week]:hover,[type=number]:hover,[type=search]:hover,[type=password]:hover,[type=email]:hover,[type=url]:hover,[type=tel]:hover,select:hover{background-color:#f2f2f2}textarea:active,[type=text]:active,[type=date]:active,[type=datetime]:active,[type=datetime-local]:active,[type=month]:active,[type=time]:active,[type=week]:active,[type=number]:active,[type=search]:active,[type=password]:active,[type=email]:active,[type=url]:active,[type=tel]:active,select:active,textarea:focus,[type=text]:focus,[type=date]:focus,[type=datetime]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=time]:focus,[type=week]:focus,[type=number]:focus,[type=search]:focus,[type=password]:focus,[type=email]:focus,[type=url]:focus,[type=tel]:focus,select:focus{background-color:#ebebeb}textarea option,[type=text] option,[type=date] option,[type=datetime] option,[type=datetime-local] option,[type=month] option,[type=time] option,[type=week] option,[type=number] option,[type=search] option,[type=password] option,[type=email] option,[type=url] option,[type=tel] option,select option{background-color:#f7f7f7;color:#000}textarea option:checked:not(:disabled),[type=text] option:checked:not(:disabled),[type=date] option:checked:not(:disabled),[type=datetime] option:checked:not(:disabled),[type=datetime-local] option:checked:not(:disabled),[type=month] option:checked:not(:disabled),[type=time] option:checked:not(:disabled),[type=week] option:checked:not(:disabled),[type=number] option:checked:not(:disabled),[type=search] option:checked:not(:disabled),[type=password] option:checked:not(:disabled),[type=email] option:checked:not(:disabled),[type=url] option:checked:not(:disabled),[type=tel] option:checked:not(:disabled),select option:checked:not(:disabled){background-color:#ebebeb}textarea::placeholder,[type=text]::placeholder,[type=date]::placeholder,[type=datetime]::placeholder,[type=datetime-local]::placeholder,[type=month]::placeholder,[type=time]::placeholder,[type=week]::placeholder,[type=number]::placeholder,[type=search]::placeholder,[type=password]::placeholder,[type=email]::placeholder,[type=url]::placeholder,[type=tel]::placeholder,select::placeholder{color:#0009}.is-dark textarea,.is-dark [type=text],.is-dark [type=date],.is-dark [type=datetime],.is-dark [type=datetime-local],.is-dark [type=month],.is-dark [type=time],.is-dark [type=week],.is-dark [type=number],.is-dark [type=search],.is-dark [type=password],.is-dark [type=email],.is-dark [type=url],.is-dark [type=tel],.is-dark select,textarea.is-dark,.is-dark[type=text],.is-dark[type=date],.is-dark[type=datetime],.is-dark[type=datetime-local],.is-dark[type=month],.is-dark[type=time],.is-dark[type=week],.is-dark[type=number],.is-dark[type=search],.is-dark[type=password],.is-dark[type=email],.is-dark[type=url],.is-dark[type=tel],select.is-dark{background-color:#ffffff0a;border-color:#ffffff80;color:#fff}.is-dark textarea:hover,.is-dark [type=text]:hover,.is-dark [type=date]:hover,.is-dark [type=datetime]:hover,.is-dark [type=datetime-local]:hover,.is-dark [type=month]:hover,.is-dark [type=time]:hover,.is-dark [type=week]:hover,.is-dark [type=number]:hover,.is-dark [type=search]:hover,.is-dark [type=password]:hover,.is-dark [type=email]:hover,.is-dark [type=url]:hover,.is-dark [type=tel]:hover,.is-dark select:hover,textarea.is-dark:hover,.is-dark[type=text]:hover,.is-dark[type=date]:hover,.is-dark[type=datetime]:hover,.is-dark[type=datetime-local]:hover,.is-dark[type=month]:hover,.is-dark[type=time]:hover,.is-dark[type=week]:hover,.is-dark[type=number]:hover,.is-dark[type=search]:hover,.is-dark[type=password]:hover,.is-dark[type=email]:hover,.is-dark[type=url]:hover,.is-dark[type=tel]:hover,select.is-dark:hover{background-color:#ffffff0d}.is-dark textarea:active,.is-dark [type=text]:active,.is-dark [type=date]:active,.is-dark [type=datetime]:active,.is-dark [type=datetime-local]:active,.is-dark [type=month]:active,.is-dark [type=time]:active,.is-dark [type=week]:active,.is-dark [type=number]:active,.is-dark [type=search]:active,.is-dark [type=password]:active,.is-dark [type=email]:active,.is-dark [type=url]:active,.is-dark [type=tel]:active,.is-dark select:active,.is-dark textarea:focus,.is-dark [type=text]:focus,.is-dark [type=date]:focus,.is-dark [type=datetime]:focus,.is-dark [type=datetime-local]:focus,.is-dark [type=month]:focus,.is-dark [type=time]:focus,.is-dark [type=week]:focus,.is-dark [type=number]:focus,.is-dark [type=search]:focus,.is-dark [type=password]:focus,.is-dark [type=email]:focus,.is-dark [type=url]:focus,.is-dark [type=tel]:focus,.is-dark select:focus,textarea.is-dark:active,.is-dark[type=text]:active,.is-dark[type=date]:active,.is-dark[type=datetime]:active,.is-dark[type=datetime-local]:active,.is-dark[type=month]:active,.is-dark[type=time]:active,.is-dark[type=week]:active,.is-dark[type=number]:active,.is-dark[type=search]:active,.is-dark[type=password]:active,.is-dark[type=email]:active,.is-dark[type=url]:active,.is-dark[type=tel]:active,select.is-dark:active,textarea.is-dark:focus,.is-dark[type=text]:focus,.is-dark[type=date]:focus,.is-dark[type=datetime]:focus,.is-dark[type=datetime-local]:focus,.is-dark[type=month]:focus,.is-dark[type=time]:focus,.is-dark[type=week]:focus,.is-dark[type=number]:focus,.is-dark[type=search]:focus,.is-dark[type=password]:focus,.is-dark[type=email]:focus,.is-dark[type=url]:focus,.is-dark[type=tel]:focus,select.is-dark:focus{background-color:#ffffff14}.is-dark textarea option,.is-dark [type=text] option,.is-dark [type=date] option,.is-dark [type=datetime] option,.is-dark [type=datetime-local] option,.is-dark [type=month] option,.is-dark [type=time] option,.is-dark [type=week] option,.is-dark [type=number] option,.is-dark [type=search] option,.is-dark [type=password] option,.is-dark [type=email] option,.is-dark [type=url] option,.is-dark [type=tel] option,.is-dark select option,textarea.is-dark option,.is-dark[type=text] option,.is-dark[type=date] option,.is-dark[type=datetime] option,.is-dark[type=datetime-local] option,.is-dark[type=month] option,.is-dark[type=time] option,.is-dark[type=week] option,.is-dark[type=number] option,.is-dark[type=search] option,.is-dark[type=password] option,.is-dark[type=email] option,.is-dark[type=url] option,.is-dark[type=tel] option,select.is-dark option{background-color:#2d2d2d;color:#fff}.is-dark textarea option:checked:not(:disabled),.is-dark [type=text] option:checked:not(:disabled),.is-dark [type=date] option:checked:not(:disabled),.is-dark [type=datetime] option:checked:not(:disabled),.is-dark [type=datetime-local] option:checked:not(:disabled),.is-dark [type=month] option:checked:not(:disabled),.is-dark [type=time] option:checked:not(:disabled),.is-dark [type=week] option:checked:not(:disabled),.is-dark [type=number] option:checked:not(:disabled),.is-dark [type=search] option:checked:not(:disabled),.is-dark [type=password] option:checked:not(:disabled),.is-dark [type=email] option:checked:not(:disabled),.is-dark [type=url] option:checked:not(:disabled),.is-dark [type=tel] option:checked:not(:disabled),.is-dark select option:checked:not(:disabled),textarea.is-dark option:checked:not(:disabled),.is-dark[type=text] option:checked:not(:disabled),.is-dark[type=date] option:checked:not(:disabled),.is-dark[type=datetime] option:checked:not(:disabled),.is-dark[type=datetime-local] option:checked:not(:disabled),.is-dark[type=month] option:checked:not(:disabled),.is-dark[type=time] option:checked:not(:disabled),.is-dark[type=week] option:checked:not(:disabled),.is-dark[type=number] option:checked:not(:disabled),.is-dark[type=search] option:checked:not(:disabled),.is-dark[type=password] option:checked:not(:disabled),.is-dark[type=email] option:checked:not(:disabled),.is-dark[type=url] option:checked:not(:disabled),.is-dark[type=tel] option:checked:not(:disabled),select.is-dark option:checked:not(:disabled){background-color:#ffffff14}.is-dark textarea::placeholder,.is-dark [type=text]::placeholder,.is-dark [type=date]::placeholder,.is-dark [type=datetime]::placeholder,.is-dark [type=datetime-local]::placeholder,.is-dark [type=month]::placeholder,.is-dark [type=time]::placeholder,.is-dark [type=week]::placeholder,.is-dark [type=number]::placeholder,.is-dark [type=search]::placeholder,.is-dark [type=password]::placeholder,.is-dark [type=email]::placeholder,.is-dark [type=url]::placeholder,.is-dark [type=tel]::placeholder,.is-dark select::placeholder,textarea.is-dark::placeholder,.is-dark[type=text]::placeholder,.is-dark[type=date]::placeholder,.is-dark[type=datetime]::placeholder,.is-dark[type=datetime-local]::placeholder,.is-dark[type=month]::placeholder,.is-dark[type=time]::placeholder,.is-dark[type=week]::placeholder,.is-dark[type=number]::placeholder,.is-dark[type=search]::placeholder,.is-dark[type=password]::placeholder,.is-dark[type=email]::placeholder,.is-dark[type=url]::placeholder,.is-dark[type=tel]::placeholder,select.is-dark::placeholder{color:#fff9}.is-paper textarea,.is-paper [type=text],.is-paper [type=date],.is-paper [type=datetime],.is-paper [type=datetime-local],.is-paper [type=month],.is-paper [type=time],.is-paper [type=week],.is-paper [type=number],.is-paper [type=search],.is-paper [type=password],.is-paper [type=email],.is-paper [type=url],.is-paper [type=tel],.is-paper select,textarea.is-paper,.is-paper[type=text],.is-paper[type=date],.is-paper[type=datetime],.is-paper[type=datetime-local],.is-paper[type=month],.is-paper[type=time],.is-paper[type=week],.is-paper[type=number],.is-paper[type=search],.is-paper[type=password],.is-paper[type=email],.is-paper[type=url],.is-paper[type=tel],select.is-paper{background-color:#0000000a;border-color:#000;color:#000}.is-paper textarea:hover,.is-paper [type=text]:hover,.is-paper [type=date]:hover,.is-paper [type=datetime]:hover,.is-paper [type=datetime-local]:hover,.is-paper [type=month]:hover,.is-paper [type=time]:hover,.is-paper [type=week]:hover,.is-paper [type=number]:hover,.is-paper [type=search]:hover,.is-paper [type=password]:hover,.is-paper [type=email]:hover,.is-paper [type=url]:hover,.is-paper [type=tel]:hover,.is-paper select:hover,textarea.is-paper:hover,.is-paper[type=text]:hover,.is-paper[type=date]:hover,.is-paper[type=datetime]:hover,.is-paper[type=datetime-local]:hover,.is-paper[type=month]:hover,.is-paper[type=time]:hover,.is-paper[type=week]:hover,.is-paper[type=number]:hover,.is-paper[type=search]:hover,.is-paper[type=password]:hover,.is-paper[type=email]:hover,.is-paper[type=url]:hover,.is-paper[type=tel]:hover,select.is-paper:hover{background-color:#0000000d}.is-paper textarea:active,.is-paper [type=text]:active,.is-paper [type=date]:active,.is-paper [type=datetime]:active,.is-paper [type=datetime-local]:active,.is-paper [type=month]:active,.is-paper [type=time]:active,.is-paper [type=week]:active,.is-paper [type=number]:active,.is-paper [type=search]:active,.is-paper [type=password]:active,.is-paper [type=email]:active,.is-paper [type=url]:active,.is-paper [type=tel]:active,.is-paper select:active,.is-paper textarea:focus,.is-paper [type=text]:focus,.is-paper [type=date]:focus,.is-paper [type=datetime]:focus,.is-paper [type=datetime-local]:focus,.is-paper [type=month]:focus,.is-paper [type=time]:focus,.is-paper [type=week]:focus,.is-paper [type=number]:focus,.is-paper [type=search]:focus,.is-paper [type=password]:focus,.is-paper [type=email]:focus,.is-paper [type=url]:focus,.is-paper [type=tel]:focus,.is-paper select:focus,textarea.is-paper:active,.is-paper[type=text]:active,.is-paper[type=date]:active,.is-paper[type=datetime]:active,.is-paper[type=datetime-local]:active,.is-paper[type=month]:active,.is-paper[type=time]:active,.is-paper[type=week]:active,.is-paper[type=number]:active,.is-paper[type=search]:active,.is-paper[type=password]:active,.is-paper[type=email]:active,.is-paper[type=url]:active,.is-paper[type=tel]:active,select.is-paper:active,textarea.is-paper:focus,.is-paper[type=text]:focus,.is-paper[type=date]:focus,.is-paper[type=datetime]:focus,.is-paper[type=datetime-local]:focus,.is-paper[type=month]:focus,.is-paper[type=time]:focus,.is-paper[type=week]:focus,.is-paper[type=number]:focus,.is-paper[type=search]:focus,.is-paper[type=password]:focus,.is-paper[type=email]:focus,.is-paper[type=url]:focus,.is-paper[type=tel]:focus,select.is-paper:focus{background-color:#00000014}.is-paper textarea option,.is-paper [type=text] option,.is-paper [type=date] option,.is-paper [type=datetime] option,.is-paper [type=datetime-local] option,.is-paper [type=month] option,.is-paper [type=time] option,.is-paper [type=week] option,.is-paper [type=number] option,.is-paper [type=search] option,.is-paper [type=password] option,.is-paper [type=email] option,.is-paper [type=url] option,.is-paper [type=tel] option,.is-paper select option,textarea.is-paper option,.is-paper[type=text] option,.is-paper[type=date] option,.is-paper[type=datetime] option,.is-paper[type=datetime-local] option,.is-paper[type=month] option,.is-paper[type=time] option,.is-paper[type=week] option,.is-paper[type=number] option,.is-paper[type=search] option,.is-paper[type=password] option,.is-paper[type=email] option,.is-paper[type=url] option,.is-paper[type=tel] option,select.is-paper option{background-color:#f7f7f7;color:#000}.is-paper textarea option:checked:not(:disabled),.is-paper [type=text] option:checked:not(:disabled),.is-paper [type=date] option:checked:not(:disabled),.is-paper [type=datetime] option:checked:not(:disabled),.is-paper [type=datetime-local] option:checked:not(:disabled),.is-paper [type=month] option:checked:not(:disabled),.is-paper [type=time] option:checked:not(:disabled),.is-paper [type=week] option:checked:not(:disabled),.is-paper [type=number] option:checked:not(:disabled),.is-paper [type=search] option:checked:not(:disabled),.is-paper [type=password] option:checked:not(:disabled),.is-paper [type=email] option:checked:not(:disabled),.is-paper [type=url] option:checked:not(:disabled),.is-paper [type=tel] option:checked:not(:disabled),.is-paper select option:checked:not(:disabled),textarea.is-paper option:checked:not(:disabled),.is-paper[type=text] option:checked:not(:disabled),.is-paper[type=date] option:checked:not(:disabled),.is-paper[type=datetime] option:checked:not(:disabled),.is-paper[type=datetime-local] option:checked:not(:disabled),.is-paper[type=month] option:checked:not(:disabled),.is-paper[type=time] option:checked:not(:disabled),.is-paper[type=week] option:checked:not(:disabled),.is-paper[type=number] option:checked:not(:disabled),.is-paper[type=search] option:checked:not(:disabled),.is-paper[type=password] option:checked:not(:disabled),.is-paper[type=email] option:checked:not(:disabled),.is-paper[type=url] option:checked:not(:disabled),.is-paper[type=tel] option:checked:not(:disabled),select.is-paper option:checked:not(:disabled){background-color:#00000014}.is-paper textarea::placeholder,.is-paper [type=text]::placeholder,.is-paper [type=date]::placeholder,.is-paper [type=datetime]::placeholder,.is-paper [type=datetime-local]::placeholder,.is-paper [type=month]::placeholder,.is-paper [type=time]::placeholder,.is-paper [type=week]::placeholder,.is-paper [type=number]::placeholder,.is-paper [type=search]::placeholder,.is-paper [type=password]::placeholder,.is-paper [type=email]::placeholder,.is-paper [type=url]::placeholder,.is-paper [type=tel]::placeholder,.is-paper select::placeholder,textarea.is-paper::placeholder,.is-paper[type=text]::placeholder,.is-paper[type=date]::placeholder,.is-paper[type=datetime]::placeholder,.is-paper[type=datetime-local]::placeholder,.is-paper[type=month]::placeholder,.is-paper[type=time]::placeholder,.is-paper[type=week]::placeholder,.is-paper[type=number]::placeholder,.is-paper[type=search]::placeholder,.is-paper[type=password]::placeholder,.is-paper[type=email]::placeholder,.is-paper[type=url]::placeholder,.is-paper[type=tel]::placeholder,select.is-paper::placeholder{color:#0009}textarea[disabled],[disabled][type=text],[disabled][type=date],[disabled][type=datetime],[disabled][type=datetime-local],[disabled][type=month],[disabled][type=time],[disabled][type=week],[disabled][type=number],[disabled][type=search],[disabled][type=password],[disabled][type=email],[disabled][type=url],[disabled][type=tel],select[disabled],textarea[disabled=disabled],[disabled=disabled][type=text],[disabled=disabled][type=date],[disabled=disabled][type=datetime],[disabled=disabled][type=datetime-local],[disabled=disabled][type=month],[disabled=disabled][type=time],[disabled=disabled][type=week],[disabled=disabled][type=number],[disabled=disabled][type=search],[disabled=disabled][type=password],[disabled=disabled][type=email],[disabled=disabled][type=url],[disabled=disabled][type=tel],select[disabled=disabled]{cursor:not-allowed;opacity:.33}textarea[readonly],[readonly][type=text],[readonly][type=date],[readonly][type=datetime],[readonly][type=datetime-local],[readonly][type=month],[readonly][type=time],[readonly][type=week],[readonly][type=number],[readonly][type=search],[readonly][type=password],[readonly][type=email],[readonly][type=url],[readonly][type=tel],select[readonly],textarea[readonly=readonly],[readonly=readonly][type=text],[readonly=readonly][type=date],[readonly=readonly][type=datetime],[readonly=readonly][type=datetime-local],[readonly=readonly][type=month],[readonly=readonly][type=time],[readonly=readonly][type=week],[readonly=readonly][type=number],[readonly=readonly][type=search],[readonly=readonly][type=password],[readonly=readonly][type=email],[readonly=readonly][type=url],[readonly=readonly][type=tel],select[readonly=readonly]{color:#d9d9d9;cursor:default}textarea[readonly]:hover,[readonly][type=text]:hover,[readonly][type=date]:hover,[readonly][type=datetime]:hover,[readonly][type=datetime-local]:hover,[readonly][type=month]:hover,[readonly][type=time]:hover,[readonly][type=week]:hover,[readonly][type=number]:hover,[readonly][type=search]:hover,[readonly][type=password]:hover,[readonly][type=email]:hover,[readonly][type=url]:hover,[readonly][type=tel]:hover,select[readonly]:hover,textarea[readonly=readonly]:hover,[readonly=readonly][type=text]:hover,[readonly=readonly][type=date]:hover,[readonly=readonly][type=datetime]:hover,[readonly=readonly][type=datetime-local]:hover,[readonly=readonly][type=month]:hover,[readonly=readonly][type=time]:hover,[readonly=readonly][type=week]:hover,[readonly=readonly][type=number]:hover,[readonly=readonly][type=search]:hover,[readonly=readonly][type=password]:hover,[readonly=readonly][type=email]:hover,[readonly=readonly][type=url]:hover,[readonly=readonly][type=tel]:hover,select[readonly=readonly]:hover,textarea[readonly]:active,[readonly][type=text]:active,[readonly][type=date]:active,[readonly][type=datetime]:active,[readonly][type=datetime-local]:active,[readonly][type=month]:active,[readonly][type=time]:active,[readonly][type=week]:active,[readonly][type=number]:active,[readonly][type=search]:active,[readonly][type=password]:active,[readonly][type=email]:active,[readonly][type=url]:active,[readonly][type=tel]:active,select[readonly]:active,textarea[readonly=readonly]:active,[readonly=readonly][type=text]:active,[readonly=readonly][type=date]:active,[readonly=readonly][type=datetime]:active,[readonly=readonly][type=datetime-local]:active,[readonly=readonly][type=month]:active,[readonly=readonly][type=time]:active,[readonly=readonly][type=week]:active,[readonly=readonly][type=number]:active,[readonly=readonly][type=search]:active,[readonly=readonly][type=password]:active,[readonly=readonly][type=email]:active,[readonly=readonly][type=url]:active,[readonly=readonly][type=tel]:active,select[readonly=readonly]:active{border-color:#666;outline:none}label{cursor:pointer;display:inline-block;margin-bottom:.6rem;margin-top:0;max-width:40em;padding-top:.4rem;width:fit-content}label.is-required:before{content:"* ";position:relative}label.u-truncate{width:auto}label.has-error{color:#c7162b}label.has-caution{color:#f99b11}label.has-success{color:#0e8420}label.has-information{color:#24598f}[type=file]{margin-bottom:1.2rem;width:100%}[type=file]:focus{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}[type=file]:focus-visible{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}[type=file]:focus:not(:focus-visible){outline:0;outline-offset:0}[type=search]{-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:0}[type=search]::-webkit-search-results-decoration{display:none}[type=search]::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;cursor:pointer}input[list]::-webkit-calendar-picker-indicator{opacity:0}select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23666' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E");-moz-appearance:none;-webkit-appearance:none;appearance:none;background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;box-shadow:none;min-height:1.5rem;padding-right:2rem;text-indent:.01px;text-overflow:""}select:hover{cursor:pointer}select[multiple],select[size]{background-image:none;box-shadow:none;height:auto}select[multiple] option,select[size] option{font-weight:400;line-height:calc(1rem - 2px);padding:.25rem 0}textarea{margin-bottom:1.2rem;overflow:auto;vertical-align:top}fieldset{margin-left:0;margin-right:0;padding:calc(1rem - 1.5px)}hr{margin-bottom:calc(.5rem - 1px)}hr{background:rgba(0,0,0,.2)}hr.is-muted{background-color:#0000001a}hr.is-dark{background:rgba(255,255,255,.3)}hr.is-dark.is-muted{background-color:#ffffff0d}a{color:#06c;text-decoration:none}a:focus{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}a:focus-visible{outline:.1875rem solid #2e96ff;outline-offset:-.1875rem}a:focus:not(:focus-visible){outline:0;outline-offset:0}a:focus{outline-offset:0}a:hover{cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.075em}a:visited{color:#7d42b8}a.is-dark{color:#69c}a.is-dark:visited{color:#a679d2}ol,ul{margin-bottom:1.5rem;margin-left:1rem;margin-top:0;padding-left:1rem}nav ol,nav ul{list-style:none;list-style-image:none}li{margin:0;padding:0}li>ul,li>ol{margin-bottom:0;padding-top:0}li>ul>li:last-of-type,li>ol>li:last-of-type{padding-bottom:0}dl{margin-bottom:1.5rem;margin-top:0;padding:0}dd{margin-left:1rem}img{border:0;height:auto;max-width:100%}figure{margin-bottom:1.5rem;margin-left:0;width:100%}figure caption,figure figcaption{display:block;font-style:italic;margin-top:.25rem;width:100%}iframe{border:0}object,iframe,embed,canvas,video,audio{display:block;margin:0 auto 20px;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}table{border:0;border-collapse:collapse;caption-side:bottom;line-height:1.5rem;margin-bottom:1.5rem;overflow-x:auto;width:100%;table-layout:fixed}td,th{font-weight:400;overflow:hidden;padding-left:.5rem;padding-right:.5rem;text-align:left;text-overflow:ellipsis;vertical-align:top}td.has-overflow,th.has-overflow{overflow:visible}thead th{padding-bottom:.75rem;padding-top:.75rem}thead tr{border-bottom:1px solid rgba(0,0,0,.2);vertical-align:top}caption{padding-bottom:.5rem;padding-top:.5rem}tfoot tr,tbody tr:not(:first-child){border-top:1px solid rgba(0,0,0,.1)}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#0009}.token.punctuation{color:#000}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#77216f}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#0e811f}.token .operator,.token .entity,.token .url,.language-css .token.string,.style .token.string{color:#a86500}.token.atrule,.token.attr-value,.token.keyword{color:#06c}.token.function,.token.class-name{color:#c7162b}.token.regex,.token.important,.token.variable{color:#dc3023}.token.important,.token.bold{font-weight:550}.token.italic{font-style:italic}.token.entity{cursor:help}.p-icon--machines{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .99a3 3 0 013 3v1.75c0 .938-.431 1.776-1.106 2.326A2.989 2.989 0 0115 10.392v1.75a3 3 0 01-3 3H4a3 3 0 01-3-3v-1.75c0-.94.431-1.777 1.106-2.327A2.989 2.989 0 011 5.739V3.99a3 3 0 013-3h8zm0 7.902H4a1.5 1.5 0 00-1.493 1.355l-.007.145v1.75a1.5 1.5 0 001.356 1.493l.144.007h8a1.5 1.5 0 001.493-1.356l.007-.144v-1.75a1.5 1.5 0 00-1.356-1.494L12 8.892zM11.5 10a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h1zm.5-7.51H4a1.5 1.5 0 00-1.493 1.355l-.007.144v1.75a1.5 1.5 0 001.356 1.493L4 7.24h8a1.5 1.5 0 001.493-1.355l.007-.145V3.99a1.5 1.5 0 00-1.356-1.493L12 2.49zM11.5 4a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h1z' fill='%23666' fill-rule='nonzero'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--machines,.p-icon--machines.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .99a3 3 0 013 3v1.75c0 .938-.431 1.776-1.106 2.326A2.989 2.989 0 0115 10.392v1.75a3 3 0 01-3 3H4a3 3 0 01-3-3v-1.75c0-.94.431-1.777 1.106-2.327A2.989 2.989 0 011 5.739V3.99a3 3 0 013-3h8zm0 7.902H4a1.5 1.5 0 00-1.493 1.355l-.007.145v1.75a1.5 1.5 0 001.356 1.493l.144.007h8a1.5 1.5 0 001.493-1.356l.007-.144v-1.75a1.5 1.5 0 00-1.356-1.494L12 8.892zM11.5 10a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h1zm.5-7.51H4a1.5 1.5 0 00-1.493 1.355l-.007.144v1.75a1.5 1.5 0 001.356 1.493L4 7.24h8a1.5 1.5 0 001.493-1.355l.007-.145V3.99a1.5 1.5 0 00-1.356-1.493L12 2.49zM11.5 4a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h1z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E")}.p-icon--pods{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.703 3.958l.106-.093.011-.009a2 2 0 01.283-.19L7.032.938a2 2 0 011.936 0l4.929 2.728.147.09.168.126.12.11.062.063.072.082.09.117.108.169.08.154.05.116.058.177c.05.176.076.36.076.546v5.311a2 2 0 01-1.031 1.75l-4.929 2.727a2 2 0 01-1.936 0l-4.929-2.727a2 2 0 01-1.031-1.75V5.416a2 2 0 01.034-.367l.042-.178a2 2 0 01.062-.184l.063-.144.042-.083.08-.135.07-.1.061-.078.1-.113.077-.076zm11.725 2.375l-4.46 2.469a2 2 0 01-1.936 0l-4.46-2.468v4.393a.5.5 0 00.183.387l.075.05 4.928 2.728a.5.5 0 00.39.04l.094-.04 4.928-2.728a.5.5 0 00.25-.348l.008-.089V6.333zM7.852 2.211l-.094.04-4.733 2.62L7.758 7.49a.5.5 0 00.39.04l.094-.04 4.732-2.62-4.732-2.62a.5.5 0 00-.39-.04z' fill='%23666'  fill-rule='nonzero'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--pods,.p-icon--pods.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.703 3.958l.106-.093.011-.009a2 2 0 01.283-.19L7.032.938a2 2 0 011.936 0l4.929 2.728.147.09.168.126.12.11.062.063.072.082.09.117.108.169.08.154.05.116.058.177c.05.176.076.36.076.546v5.311a2 2 0 01-1.031 1.75l-4.929 2.727a2 2 0 01-1.936 0l-4.929-2.727a2 2 0 01-1.031-1.75V5.416a2 2 0 01.034-.367l.042-.178a2 2 0 01.062-.184l.063-.144.042-.083.08-.135.07-.1.061-.078.1-.113.077-.076zm11.725 2.375l-4.46 2.469a2 2 0 01-1.936 0l-4.46-2.468v4.393a.5.5 0 00.183.387l.075.05 4.928 2.728a.5.5 0 00.39.04l.094-.04 4.928-2.728a.5.5 0 00.25-.348l.008-.089V6.333zM7.852 2.211l-.094.04-4.733 2.62L7.758 7.49a.5.5 0 00.39.04l.094-.04 4.732-2.62-4.732-2.62a.5.5 0 00-.39-.04z' fill='%23fff'  fill-rule='nonzero'/%3E%3C/svg%3E")}.p-icon--connected{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.927 7.141l3.182 3.182L6.432 13a2.251 2.251 0 01-2.724.354L1.5 15.56.44 14.5l2.295-2.297a2.25 2.25 0 01.515-2.385l2.677-2.677zM14.5.44L15.56 1.5l-1.956 1.958a2.251 2.251 0 01-.354 2.724l-2.677 2.677-3.182-3.182L10.068 3a2.25 2.25 0 012.385-.515L14.5.44z' fill='%23666'  fill-rule='evenodd'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--connected,.p-icon--connected.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.927 7.141l3.182 3.182L6.432 13a2.251 2.251 0 01-2.724.354L1.5 15.56.44 14.5l2.295-2.297a2.25 2.25 0 01.515-2.385l2.677-2.677zM14.5.44L15.56 1.5l-1.956 1.958a2.251 2.251 0 01-.354 2.724l-2.677 2.677-3.182-3.182L10.068 3a2.25 2.25 0 012.385-.515L14.5.44z' fill='%23fff'  fill-rule='evenodd'/%3E%3C/svg%3E")}.p-icon--settings{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.817.639a7.572 7.572 0 013.649 2.109l-.668 1.849c.212.297.396.615.55.95l1.936.346c.193.669.296 1.376.296 2.107 0 .731-.103 1.438-.296 2.107l-1.936.346a5.876 5.876 0 01-.55.95l.668 1.85a7.572 7.572 0 01-3.65 2.108l-1.268-1.504a5.956 5.956 0 01-1.096 0l-1.268 1.504a7.572 7.572 0 01-3.65-2.109l.668-1.849a5.876 5.876 0 01-.55-.95l-1.936-.346A7.584 7.584 0 01.42 8c0-.731.103-1.438.296-2.107l1.936-.346c.154-.335.338-.653.55-.95l-.668-1.85A7.572 7.572 0 016.184.64l1.268 1.504a5.956 5.956 0 011.096 0L9.817.639zm.496 1.737L9.19 3.709l-.78-.072a4.456 4.456 0 00-.41-.02l-.206.006-.204.014-.78.072-1.124-1.333-.222.096c-.346.159-.675.35-.984.57l-.194.144.593 1.64-.455.64a4.384 4.384 0 00-.287.463l-.122.244-.327.713-1.713.305-.017.12a6.128 6.128 0 00-.029.343L1.92 8c0 .232.014.462.04.689l.016.119 1.713.306.327.713c.076.165.162.325.258.48l.151.227.455.64-.593 1.639.194.145c.31.22.638.411.984.57l.222.095 1.123-1.332.78.072c.136.013.273.02.411.02l.206-.006.204-.014.78-.072 1.123 1.332.224-.095c.345-.159.674-.35.983-.57l.193-.145-.592-1.639.455-.64c.105-.148.201-.303.287-.463l.122-.244.327-.713 1.712-.306.018-.12c.013-.113.022-.227.029-.342L14.08 8c0-.232-.014-.462-.04-.689l-.017-.12-1.712-.305-.327-.713a4.368 4.368 0 00-.258-.48l-.151-.227-.455-.64.592-1.64-.193-.144c-.309-.22-.638-.411-.983-.57l-.224-.096zM8 5a3 3 0 110 6 3 3 0 010-6zm0 1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z' fill='%23666'  fill-rule='nonzero'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--settings,.p-icon--settings.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.817.639a7.572 7.572 0 013.649 2.109l-.668 1.849c.212.297.396.615.55.95l1.936.346c.193.669.296 1.376.296 2.107 0 .731-.103 1.438-.296 2.107l-1.936.346a5.876 5.876 0 01-.55.95l.668 1.85a7.572 7.572 0 01-3.65 2.108l-1.268-1.504a5.956 5.956 0 01-1.096 0l-1.268 1.504a7.572 7.572 0 01-3.65-2.109l.668-1.849a5.876 5.876 0 01-.55-.95l-1.936-.346A7.584 7.584 0 01.42 8c0-.731.103-1.438.296-2.107l1.936-.346c.154-.335.338-.653.55-.95l-.668-1.85A7.572 7.572 0 016.184.64l1.268 1.504a5.956 5.956 0 011.096 0L9.817.639zm.496 1.737L9.19 3.709l-.78-.072a4.456 4.456 0 00-.41-.02l-.206.006-.204.014-.78.072-1.124-1.333-.222.096c-.346.159-.675.35-.984.57l-.194.144.593 1.64-.455.64a4.384 4.384 0 00-.287.463l-.122.244-.327.713-1.713.305-.017.12a6.128 6.128 0 00-.029.343L1.92 8c0 .232.014.462.04.689l.016.119 1.713.306.327.713c.076.165.162.325.258.48l.151.227.455.64-.593 1.639.194.145c.31.22.638.411.984.57l.222.095 1.123-1.332.78.072c.136.013.273.02.411.02l.206-.006.204-.014.78-.072 1.123 1.332.224-.095c.345-.159.674-.35.983-.57l.193-.145-.592-1.639.455-.64c.105-.148.201-.303.287-.463l.122-.244.327-.713 1.712-.306.018-.12c.013-.113.022-.227.029-.342L14.08 8c0-.232-.014-.462-.04-.689l-.017-.12-1.712-.305-.327-.713a4.368 4.368 0 00-.258-.48l-.151-.227-.455-.64.592-1.64-.193-.144c-.309-.22-.638-.411-.983-.57l-.224-.096zM8 5a3 3 0 110 6 3 3 0 010-6zm0 1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z' fill='%23fff'  fill-rule='nonzero'/%3E%3C/svg%3E")}.p-icon--tag{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 1A1.5 1.5 0 0115 2.5V8h-.023l-6.466 6.467a2 2 0 01-2.828 0L1.52 10.305a2 2 0 010-2.829l6.472-6.472.007.008L8 1h5.5zm0 1.5l-4.882-.001-6.037 6.038a.5.5 0 00-.058.638l.058.07 4.163 4.162a.5.5 0 00.637.058l.07-.058 6.048-6.051L13.5 2.5zm-2.493 1.41a1.108 1.108 0 110 2.215 1.108 1.108 0 010-2.216z' fill='%23666'  fill-rule='nonzero'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--tag,.p-icon--tag.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 1A1.5 1.5 0 0115 2.5V8h-.023l-6.466 6.467a2 2 0 01-2.828 0L1.52 10.305a2 2 0 010-2.829l6.472-6.472.007.008L8 1h5.5zm0 1.5l-4.882-.001-6.037 6.038a.5.5 0 00-.058.638l.058.07 4.163 4.162a.5.5 0 00.637.058l.07-.058 6.048-6.051L13.5 2.5zm-2.493 1.41a1.108 1.108 0 110 2.215 1.108 1.108 0 010-2.216z' fill='%23fff'  fill-rule='nonzero'/%3E%3C/svg%3E")}.p-icon--units{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1v-4a1 1 0 011-1h4zm8 0a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4zm-8.5 1.5h-3v3h3v-3zm8 0h-3v3h3v-3zM14 1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V2a1 1 0 011-1h4zm-.5 1.5h-3v3h3v-3z' fill='%23666' fill-rule='nonzero'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--units,.p-icon--units.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1v-4a1 1 0 011-1h4zm8 0a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4zm-8.5 1.5h-3v3h3v-3zm8 0h-3v3h3v-3zM14 1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V2a1 1 0 011-1h4zm-.5 1.5h-3v3h3v-3z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E")}.p-icon--profile{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.95 12.95l-.18.173-.074.068a6.926 6.926 0 01-.318.271l-.271.207-.209.146-.254.163-.225.132-.243.13-.21.103-.276.121-.133.054-.385.139-.271.082-.264.068-.298.065-.272.047-.337.043-.304.025L8.12 15 8 15l-.214-.003-.285-.015-.381-.037-.339-.05-.184-.036-.324-.074-.258-.07-.249-.079-.323-.118-.195-.08-.214-.095-.276-.137-.213-.116a7.006 7.006 0 01-.551-.35l-.197-.142-.175-.136-.176-.146-.297-.27-.16-.158-.213-.229-.07-.08a7 7 0 1110.772-.221l-.194.234a7.043 7.043 0 01-.334.358zM8.5 10.502h-1a3.498 3.498 0 00-3.017 1.726A5.473 5.473 0 008 13.5a5.478 5.478 0 003.518-1.272 3.499 3.499 0 00-2.826-1.72l-.192-.006zM8 2.5a5.5 5.5 0 00-4.557 8.581 5.004 5.004 0 012.203-1.724A2.978 2.978 0 015 7.5V7a3 3 0 116 0v.5c0 .701-.24 1.347-.644 1.858.888.355 1.65.957 2.202 1.722A5.5 5.5 0 008 2.5zm0 3a1.5 1.5 0 00-1.493 1.356L6.5 7v.5a1.5 1.5 0 002.993.144L9.5 7.5V7A1.5 1.5 0 008 5.5z' fill='%23666'  fill-rule='nonzero'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--profile,.p-icon--profile.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.95 12.95l-.18.173-.074.068a6.926 6.926 0 01-.318.271l-.271.207-.209.146-.254.163-.225.132-.243.13-.21.103-.276.121-.133.054-.385.139-.271.082-.264.068-.298.065-.272.047-.337.043-.304.025L8.12 15 8 15l-.214-.003-.285-.015-.381-.037-.339-.05-.184-.036-.324-.074-.258-.07-.249-.079-.323-.118-.195-.08-.214-.095-.276-.137-.213-.116a7.006 7.006 0 01-.551-.35l-.197-.142-.175-.136-.176-.146-.297-.27-.16-.158-.213-.229-.07-.08a7 7 0 1110.772-.221l-.194.234a7.043 7.043 0 01-.334.358zM8.5 10.502h-1a3.498 3.498 0 00-3.017 1.726A5.473 5.473 0 008 13.5a5.478 5.478 0 003.518-1.272 3.499 3.499 0 00-2.826-1.72l-.192-.006zM8 2.5a5.5 5.5 0 00-4.557 8.581 5.004 5.004 0 012.203-1.724A2.978 2.978 0 015 7.5V7a3 3 0 116 0v.5c0 .701-.24 1.347-.644 1.858.888.355 1.65.957 2.202 1.722A5.5 5.5 0 008 2.5zm0 3a1.5 1.5 0 00-1.493 1.356L6.5 7v.5a1.5 1.5 0 002.993.144L9.5 7.5V7A1.5 1.5 0 008 5.5z' fill='%23fff'  fill-rule='nonzero'/%3E%3C/svg%3E")}.p-icon--submit-bug{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 1.993V3.5c0 .382.284.698.653.748l.102.007.161-.001C4.905 4.093 5.192 4 5.5 4h5c.308 0 .595.093.834.253l.216.001a.755.755 0 00.749-.653l.007-.102V1.993h1.5V3.5A2.256 2.256 0 0112 5.709l-.001 1.531 1.278.001c.324 0 .634-.126.866-.349l.094-.1.523-.628 1.152.96-.523.628a2.75 2.75 0 01-1.925.983l-.187.006h-1.278L12 10c0 .099-.004.197-.01.294a2.254 2.254 0 011.81 2.057l.006.154v1.506h-1.5v-1.506a.755.755 0 00-.653-.748l-.057-.003a4 4 0 01-7.19.004l.1-.008a.755.755 0 00-.75.653l-.006.102v1.506h-1.5v-1.506c0-1.076.754-1.976 1.762-2.2A3.671 3.671 0 014 10l-.001-1.26-1.276.001a2.75 2.75 0 01-1.987-.85l-.125-.14-.523-.627 1.152-.96.523.627c.208.25.503.407.822.442l.138.008H4V5.696a2.257 2.257 0 01-1.744-2.044L2.25 3.5V1.993h1.5zM10.5 5.5h-5V10a2.5 2.5 0 004.995.164L10.5 10V5.5zM8 .974c1.221 0 2.24.871 2.466 2.026H5.534A2.514 2.514 0 018 .974z' fill='%23666'  fill-rule='evenodd'/%3E%3C/svg%3E")}[class*=--dark] .p-icon--submit-bug,.p-icon--submit-bug.is-light{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 1.993V3.5c0 .382.284.698.653.748l.102.007.161-.001C4.905 4.093 5.192 4 5.5 4h5c.308 0 .595.093.834.253l.216.001a.755.755 0 00.749-.653l.007-.102V1.993h1.5V3.5A2.256 2.256 0 0112 5.709l-.001 1.531 1.278.001c.324 0 .634-.126.866-.349l.094-.1.523-.628 1.152.96-.523.628a2.75 2.75 0 01-1.925.983l-.187.006h-1.278L12 10c0 .099-.004.197-.01.294a2.254 2.254 0 011.81 2.057l.006.154v1.506h-1.5v-1.506a.755.755 0 00-.653-.748l-.057-.003a4 4 0 01-7.19.004l.1-.008a.755.755 0 00-.75.653l-.006.102v1.506h-1.5v-1.506c0-1.076.754-1.976 1.762-2.2A3.671 3.671 0 014 10l-.001-1.26-1.276.001a2.75 2.75 0 01-1.987-.85l-.125-.14-.523-.627 1.152-.96.523.627c.208.25.503.407.822.442l.138.008H4V5.696a2.257 2.257 0 01-1.744-2.044L2.25 3.5V1.993h1.5zM10.5 5.5h-5V10a2.5 2.5 0 004.995.164L10.5 10V5.5zM8 .974c1.221 0 2.24.871 2.466 2.026H5.534A2.514 2.514 0 018 .974z' fill='%23fff'  fill-rule='evenodd'/%3E%3C/svg%3E")}.l-navigation.is-collapsed .l-navigation-collapse-toggle i{transform:rotate(180deg)}.l-navigation{transition-duration:.165s;transition-property:width,box-shadow,background;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.l-navigation .p-button--base.l-navigation-collapse-toggle{background-color:#ffffff0d;visibility:hidden}@media only screen and (min-width: 621px){.l-navigation .p-button--base.l-navigation-collapse-toggle{visibility:visible}}.l-navigation:hover,.l-navigation:focus-within,.l-navigation.is-pinned{grid-area:nav}@media only screen and (min-width: 621px){.l-navigation:hover,.l-navigation:focus-within,.l-navigation.is-pinned{position:static}}.l-navigation:hover .p-panel__controls,.l-navigation:focus-within .p-panel__controls,.l-navigation.is-pinned .p-panel__controls{opacity:1;visibility:visible}@media only screen and (min-width: 621px){.l-navigation:hover .p-panel__controls,.l-navigation:focus-within .p-panel__controls,.l-navigation.is-pinned .p-panel__controls{transform:translate(12rem)}}.l-navigation .p-panel__header{margin-bottom:1rem}.l-navigation .p-panel__controls{margin-left:auto;padding-top:.65rem;z-index:104;transition-duration:.165s;transition-property:opacity,visibility,transform,background;transition-timing-function:cubic-bezier(.215,.61,.355,1)}@media only screen and (min-width: 621px){.l-navigation .p-panel__controls{opacity:1;visibility:visible;position:absolute;top:0;left:0;padding-top:0;transform:translate(1rem) translateY(2.6rem)}}.l-navigation .p-panel__controls .p-side-navigation__tooltip-wrapper{display:none}@media only screen and (min-width: 621px){.l-navigation .p-panel__controls .p-side-navigation__tooltip-wrapper{display:inherit}}@media only screen and (min-width: 460px){.l-navigation .p-panel__controls .p-side-navigation__button--menu{display:none}}.l-navigation .p-side-navigation__link{width:100%;justify-content:flex-start}.l-navigation .p-side-navigation__label--group{color:#f7f7f7;margin-bottom:.125rem;text-transform:uppercase}.l-navigation .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__link,.l-navigation .p-side-navigation__text{padding-left:4rem}.l-navigation .p-side-navigation--icons>.p-side-navigation__list:last-of-type:after{content:""}.l-navigation .p-side-navigation--icons .p-side-navigation__list:after{left:1rem;opacity:1}.l-navigation .l-navigation__drawer{max-width:100vw}.p-panel__header .p-icon--sidebar-toggle{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16px' height='16px' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 7.743 L 6.742 14.485 L 7.899 13.329 L 2.311 7.743 L 7.899 2.157 L 6.742 1 L 0 7.743 Z M 7.899 7.743 L 14.642 14.485 L 15.797 13.329 L 10.21 7.743 L 15.797 2.157 L 14.642 1 L 7.899 7.743 Z' fill='%23FFF' style=''/%3E%3C/svg%3E")}.p-panel__header .p-panel__logo{color:#fff;display:flex;flex-direction:column;margin-top:.25rem}@media only screen and (max-width: 620px){.p-panel__header .p-panel__logo{margin-bottom:0}}.p-panel__header .p-panel__logo:hover,.p-panel__header .p-panel__logo:visited{color:#fff;text-decoration:none}.p-panel__header .p-panel__logo .p-panel__logo-text{display:flex;flex-direction:column;justify-content:flex-end}.p-panel__header .p-panel__logo .p-panel__logo-text .p-panel__logo-name{font-size:1.5rem;line-height:1rem;margin-bottom:0;padding-top:0;margin-left:2rem;text-wrap:nowrap}.p-panel__header .p-panel__logo .p-panel__logo-text .p-panel__logo-name--small{font-size:.6rem;margin-bottom:0;padding-left:.1rem}.p-panel__header .p-panel__logo .p-navigation__tagged-logo{min-width:auto}.p-panel__header .p-panel__logo .p-navigation__tagged-logo .p-navigation__logo-tag{height:2.3rem;left:1rem}@media only screen and (min-width: 621px){.p-panel__header .p-panel__logo .p-navigation__tagged-logo .p-navigation__logo-tag{left:1.5rem}}.p-panel__footer{margin-top:auto}.p-panel__footer .p-panel__content{padding:0}.p-panel__footer .p-panel__content .p-side-navigation__list:last-of-type:after{content:none}.l-navigation .p-panel__controls,.l-navigation-bar .p-panel__controls{padding-top:.75rem}.l-navigation__drawer .p-panel{display:flex;flex-direction:column}.p-side-navigation__tooltip{z-index:104}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/canonical/maas-react-components.git"
@@ -62,7 +62,7 @@
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-react": "^4.1.0",
@@ -92,13 +92,13 @@
     "vitest": "^0.34.5"
   },
   "resolutions": {
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6"
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.14"
   },
   "peerDependencies": {
-    "@canonical/react-components": "^0.47.0",
-    "@types/react": "^17.0.2 || ^18.0.0",
-    "@types/react-dom": "^17.0.2 || ^18.0.0",
+    "@canonical/react-components": "0.47.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "classnames": "^2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",