@canonical/maas-react-components 1.2.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/components/NestedFormGroup/NestedFormGroup.stories.d.ts

@@ -7,4 +7,13 @@ export declare const Example: {
         "aria-hidden": boolean;
     };
 };
-export declare const ControlledExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledExample: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            source: {
+                code: null;
+            };
+        };
+    };
+};

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 {};