@strapi/design-system 0.0.0-jsoninput.0

package/dist/FocusTrap/ExampleComponent.js

@@ -0,0 +1,71 @@
+import e, { useState as l } from "react";
+import m from "@strapi/icons/Cross";
+import { Box as t } from "../Box/Box.js";
+import { Stack as s } from "../Stack/Stack.js";
+import { Typography as i } from "../Typography/Typography.js";
+import { Button as r } from "../Button/Button.js";
+import { Flex as o } from "../Flex/Flex.js";
+import { FocusTrap as u } from "./FocusTrap.js";
+const d = ({ onClose: a }) => {
+  const [n, c] = l(!1);
+  return /* @__PURE__ */ e.createElement(u, {
+    onEscape: a
+  }, /* @__PURE__ */ e.createElement(t, {
+    background: "neutral0",
+    padding: 4,
+    hasRadius: !0,
+    style: { width: "600px" }
+  }, /* @__PURE__ */ e.createElement(s, {
+    spacing: 2
+  }, /* @__PURE__ */ e.createElement(o, {
+    justifyContent: "space-between"
+  }, /* @__PURE__ */ e.createElement(i, {
+    variant: "beta",
+    as: "h2"
+  }, "Hey folks!"), /* @__PURE__ */ e.createElement("button", {
+    type: "button",
+    style: { border: "none", background: "transparent" },
+    onClick: a,
+    "aria-label": "Close"
+  }, /* @__PURE__ */ e.createElement(m, {
+    "aria-hidden": !0
+  }))), /* @__PURE__ */ e.createElement(t, {
+    paddingTop: 2,
+    paddingBottom: 2
+  }, /* @__PURE__ */ e.createElement(i, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /* @__PURE__ */ e.createElement(o, {
+    justifyContent: "space-between"
+  }, /* @__PURE__ */ e.createElement(r, {
+    id: "second"
+  }, "Second focusable"), /* @__PURE__ */ e.createElement(r, {
+    id: "last",
+    onClick: () => c(!0)
+  }, "Last focusable (at the beginning)"), n && /* @__PURE__ */ e.createElement(r, {
+    id: "real-last"
+  }, "Last focusable (at the end)")))));
+}, y = () => {
+  const [a, n] = l(!1);
+  return /* @__PURE__ */ e.createElement(t, {
+    background: "neutral150",
+    padding: 10
+  }, /* @__PURE__ */ e.createElement(s, {
+    spacing: 2
+  }, a && /* @__PURE__ */ e.createElement(d, {
+    onClose: () => n(!1)
+  }), /* @__PURE__ */ e.createElement(t, {
+    background: "neutral0",
+    padding: 4,
+    hasRadius: !0,
+    style: { width: "600px" }
+  }, /* @__PURE__ */ e.createElement(i, {
+    variant: "beta",
+    as: "h2"
+  }, "Outside the trap!"), /* @__PURE__ */ e.createElement(t, {
+    paddingTop: 2
+  }, /* @__PURE__ */ e.createElement(r, {
+    onClick: () => n(!0),
+    id: "trigger"
+  }, "Open the trap")))));
+};
+export {
+  y as ExampleComponent
+};

package/dist/FocusTrap/FocusTrap.cjs

@@ -0,0 +1 @@
+"use strict";var T=Object.defineProperty;var c=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var p=(e,t,s)=>t in e?T(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,m=(e,t)=>{for(var s in t||(t={}))y.call(t,s)&&p(e,s,t[s]);if(c)for(var s of c(t))b.call(t,s)&&p(e,s,t[s]);return e};var E=(e,t)=>{var s={};for(var r in e)y.call(e,r)&&t.indexOf(r)<0&&(s[r]=e[r]);if(e!=null&&c)for(var r of c(e))t.indexOf(r)<0&&b.call(e,r)&&(s[r]=e[r]);return s};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),_=require("prop-types"),h=require("../helpers/getFocusableNodes.cjs"),g=require("../helpers/keyboardKeys.cjs"),F=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},k=F(l),v=F(_),a=r=>{var f=r,{onEscape:e,restoreFocus:t}=f,s=E(f,["onEscape","restoreFocus"]);const u=l.useRef(null);l.useEffect(()=>{let o=null;return t&&(o=document.activeElement),()=>{o&&o.focus()}},[t]),l.useEffect(()=>{if(!u.current)return;const o=h.getFocusableNodes(u.current);o.length>0?o[0].focus():console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.")},[]);const K=o=>{if(o.key===g.KeyboardKeys.ESCAPE&&e){e();return}if(o.key!==g.KeyboardKeys.TAB)return;const n=h.getFocusableNodes(u.current);if(n.length>0){const i=n[0],d=n[n.length-1];o.shiftKey?i===document.activeElement&&(o.preventDefault(),d.focus()):d===document.activeElement&&(o.preventDefault(),i.focus())}};return k.default.createElement("div",m({ref:u,onKeyDown:K},s))};a.defaultProps={onEscape:void 0,restoreFocus:!0};a.propTypes={onEscape:v.default.func,restoreFocus:v.default.bool};exports.FocusTrap=a;

package/dist/FocusTrap/FocusTrap.js

@@ -0,0 +1,69 @@
+var T = Object.defineProperty;
+var f = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var a = (e, t, r) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, d = (e, t) => {
+  for (var r in t || (t = {}))
+    m.call(t, r) && a(e, r, t[r]);
+  if (f)
+    for (var r of f(t))
+      p.call(t, r) && a(e, r, t[r]);
+  return e;
+};
+var E = (e, t) => {
+  var r = {};
+  for (var n in e)
+    m.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && f)
+    for (var n of f(e))
+      t.indexOf(n) < 0 && p.call(e, n) && (r[n] = e[n]);
+  return r;
+};
+import g, { useRef as D, useEffect as h } from "react";
+import y from "prop-types";
+import { getFocusableNodes as v } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as b } from "../helpers/keyboardKeys.js";
+const F = (n) => {
+  var u = n, { onEscape: e, restoreFocus: t } = u, r = E(u, ["onEscape", "restoreFocus"]);
+  const c = D(null);
+  h(() => {
+    let o = null;
+    return t && (o = document.activeElement), () => {
+      o && o.focus();
+    };
+  }, [t]), h(() => {
+    if (!c.current)
+      return;
+    const o = v(c.current);
+    o.length > 0 ? o[0].focus() : console.warn(
+      "[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one."
+    );
+  }, []);
+  const K = (o) => {
+    if (o.key === b.ESCAPE && e) {
+      e();
+      return;
+    }
+    if (o.key !== b.TAB)
+      return;
+    const s = v(c.current);
+    if (s.length > 0) {
+      const l = s[0], i = s[s.length - 1];
+      o.shiftKey ? l === document.activeElement && (o.preventDefault(), i.focus()) : i === document.activeElement && (o.preventDefault(), l.focus());
+    }
+  };
+  return /* @__PURE__ */ g.createElement("div", d({
+    ref: c,
+    onKeyDown: K
+  }, r));
+};
+F.defaultProps = {
+  onEscape: void 0,
+  restoreFocus: !0
+};
+F.propTypes = {
+  onEscape: y.func,
+  restoreFocus: y.bool
+};
+export {
+  F as FocusTrap
+};

package/dist/FocusTrap/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./FocusTrap.cjs");exports.FocusTrap=e.FocusTrap;

package/dist/FocusTrap/index.js

@@ -0,0 +1,4 @@
+import { FocusTrap as p } from "./FocusTrap.js";
+export {
+  p as FocusTrap
+};

package/dist/Grid/Grid.cjs

@@ -0,0 +1,5 @@
+"use strict";var m=Object.defineProperty;var a=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var n=(e,t,r)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,i=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&n(e,r,t[r]);if(a)for(var r of a(t))p.call(t,r)&&n(e,r,t[r]);return e};var f=(e,t)=>{var r={};for(var o in e)c.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&p.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),g=require("styled-components"),x=require("prop-types"),b=require("./GridContext.cjs"),q=require("../Box/Box.cjs"),v=require("../helpers/handleResponsiveValues.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=l(_),G=l(g),s=l(x),j=G.default(q.Box)`
+  display: grid;
+  grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
+  ${({theme:e,gap:t})=>v("gap",t,e)}
+`,u=o=>{var d=o,{gap:e,gridCols:t}=d,r=f(d,["gap","gridCols"]);return y.default.createElement(b.GridContext.Provider,{value:{gap:e,gridCols:t}},y.default.createElement(j,i({gap:e,gridCols:t},r)))};u.defaultProps={gap:0,gridCols:12};u.propTypes={gap:s.default.oneOfType([s.default.number,s.default.arrayOf(s.default.number)]),gridCols:s.default.number};exports.Grid=u;

package/dist/Grid/Grid.js

@@ -0,0 +1,50 @@
+var c = Object.defineProperty;
+var m = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var i = (r, e, o) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, l = (r, e) => {
+  for (var o in e || (e = {}))
+    n.call(e, o) && i(r, o, e[o]);
+  if (m)
+    for (var o of m(e))
+      d.call(e, o) && i(r, o, e[o]);
+  return r;
+};
+var s = (r, e) => {
+  var o = {};
+  for (var t in r)
+    n.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && m)
+    for (var t of m(r))
+      e.indexOf(t) < 0 && d.call(r, t) && (o[t] = r[t]);
+  return o;
+};
+import f from "react";
+import y from "styled-components";
+import p from "prop-types";
+import { GridContext as g } from "./GridContext.js";
+import { Box as b } from "../Box/Box.js";
+import v from "../helpers/handleResponsiveValues.js";
+const x = y(b)`
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
+  ${({ theme: r, gap: e }) => v("gap", e, r)}
+`, u = (t) => {
+  var a = t, { gap: r, gridCols: e } = a, o = s(a, ["gap", "gridCols"]);
+  return /* @__PURE__ */ f.createElement(g.Provider, {
+    value: { gap: r, gridCols: e }
+  }, /* @__PURE__ */ f.createElement(x, l({
+    gap: r,
+    gridCols: e
+  }, o)));
+};
+u.defaultProps = {
+  gap: 0,
+  gridCols: 12
+};
+u.propTypes = {
+  gap: p.oneOfType([p.number, p.arrayOf(p.number)]),
+  gridCols: p.number
+};
+export {
+  u as Grid
+};

package/dist/Grid/GridContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({gap:0,gridCols:12}),r=()=>e.useContext(t);exports.GridContext=t;exports.useGrid=r;

package/dist/Grid/GridContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t({ gap: 0, gridCols: 12 }), n = () => o(e);
+export {
+  e as GridContext,
+  n as useGrid
+};

package/dist/Grid/GridItem.cjs

@@ -0,0 +1,12 @@
+"use strict";var _=Object.defineProperty;var s=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var i=(e,o,t)=>o in e?_(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))l.call(o,t)&&i(e,t,o[t]);if(s)for(var t of s(o))c.call(o,t)&&i(e,t,o[t]);return e};var m=(e,o)=>{var t={};for(var r in e)l.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))o.indexOf(r)<0&&c.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),g=require("styled-components"),v=require("prop-types"),G=require("../Box/Box.cjs"),q=require("./GridContext.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=u(b),$=u(g),d=u(v),j=$.default.div`
+  grid-column: span ${({col:e})=>e};
+  max-width: 100%;
+
+  ${({theme:e})=>e.mediaQueries.tablet} {
+    grid-column: span ${({s:e})=>e};
+  }
+
+  ${({theme:e})=>e.mediaQueries.mobile} {
+    grid-column: span ${({xs:e})=>e};
+  }
+`,n=B=>{var a=B,{col:e,xs:o,s:t}=a,r=m(a,["col","xs","s"]);const{gap:y,gridCols:x}=q.useGrid();return f.default.createElement(j,{gap:y,gridCols:x,col:e,xs:o,s:t},f.default.createElement(G.Box,p({},r)))};n.defaultProps={col:void 0,s:void 0,xs:void 0};n.propTypes={col:d.default.number,s:d.default.number,xs:d.default.number};exports.GridItem=n;

package/dist/Grid/GridItem.js

@@ -0,0 +1,60 @@
+var g = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var s = (r, o, e) => o in r ? g(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, a = (r, o) => {
+  for (var e in o || (o = {}))
+    d.call(o, e) && s(r, e, o[e]);
+  if (t)
+    for (var e of t(o))
+      n.call(o, e) && s(r, e, o[e]);
+  return r;
+};
+var l = (r, o) => {
+  var e = {};
+  for (var m in r)
+    d.call(r, m) && o.indexOf(m) < 0 && (e[m] = r[m]);
+  if (r != null && t)
+    for (var m of t(r))
+      o.indexOf(m) < 0 && n.call(r, m) && (e[m] = r[m]);
+  return e;
+};
+import u from "react";
+import x from "styled-components";
+import i from "prop-types";
+import { Box as $ } from "../Box/Box.js";
+import { useGrid as v } from "./GridContext.js";
+const y = x.div`
+  grid-column: span ${({ col: r }) => r};
+  max-width: 100%;
+
+  ${({ theme: r }) => r.mediaQueries.tablet} {
+    grid-column: span ${({ s: r }) => r};
+  }
+
+  ${({ theme: r }) => r.mediaQueries.mobile} {
+    grid-column: span ${({ xs: r }) => r};
+  }
+`, c = (G) => {
+  var p = G, { col: r, xs: o, s: e } = p, m = l(p, ["col", "xs", "s"]);
+  const { gap: f, gridCols: b } = v();
+  return /* @__PURE__ */ u.createElement(y, {
+    gap: f,
+    gridCols: b,
+    col: r,
+    xs: o,
+    s: e
+  }, /* @__PURE__ */ u.createElement($, a({}, m)));
+};
+c.defaultProps = {
+  col: void 0,
+  s: void 0,
+  xs: void 0
+};
+c.propTypes = {
+  col: i.number,
+  s: i.number,
+  xs: i.number
+};
+export {
+  c as GridItem
+};

package/dist/Grid/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Grid.cjs"),r=require("./GridItem.cjs");exports.Grid=e.Grid;exports.GridItem=r.GridItem;

package/dist/Grid/index.js

@@ -0,0 +1,6 @@
+import { Grid as e } from "./Grid.js";
+import { GridItem as t } from "./GridItem.js";
+export {
+  e as Grid,
+  t as GridItem
+};

package/dist/Icon/Icon.cjs

@@ -0,0 +1,6 @@
+"use strict";var d=Object.defineProperty;var l=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var s=(e,t,o)=>t in e?d(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t)=>{for(var o in t||(t={}))p.call(t,o)&&s(e,o,t[o]);if(l)for(var o of l(t))f.call(t,o)&&s(e,o,t[o]);return e};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),y=require("prop-types"),_=require("styled-components"),g=require("../Box/Box.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(i),u=c(y),m=c(_),q=m.default(g.Box)`
+  path {
+    fill: ${({color:e,theme:t})=>t.colors[e]};
+  }
+  ${({theme:e,colors:t})=>t(e)}
+`,r=n.default.forwardRef((e,t)=>n.default.createElement(q,a({ref:t},e)));r.displayName="Icon";r.defaultProps={color:"neutral600",colors:()=>{}};r.propTypes={color:u.default.string,colors:u.default.func};exports.Icon=r;

package/dist/Icon/Icon.js

@@ -0,0 +1,36 @@
+var f = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var c = (r, o, t) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, l = (r, o) => {
+  for (var t in o || (o = {}))
+    m.call(o, t) && c(r, t, o[t]);
+  if (p)
+    for (var t of p(o))
+      n.call(o, t) && c(r, t, o[t]);
+  return r;
+};
+import s from "react";
+import a from "prop-types";
+import i from "styled-components";
+import { Box as d } from "../Box/Box.js";
+const u = i(d)`
+  path {
+    fill: ${({ color: r, theme: o }) => o.colors[r]};
+  }
+  ${({ theme: r, colors: o }) => o(r)}
+`, e = s.forwardRef((r, o) => /* @__PURE__ */ s.createElement(u, l({
+  ref: o
+}, r)));
+e.displayName = "Icon";
+e.defaultProps = {
+  color: "neutral600",
+  colors: () => {
+  }
+};
+e.propTypes = {
+  color: a.string,
+  colors: a.func
+};
+export {
+  e as Icon
+};

package/dist/Icon/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Icon.cjs");exports.Icon=e.Icon;

package/dist/Icon/index.js

@@ -0,0 +1,4 @@
+import { Icon as c } from "./Icon.js";
+export {
+  c as Icon
+};

package/dist/IconButton/IconButton.cjs

@@ -0,0 +1,86 @@
+"use strict";var I=Object.defineProperty,R=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var B=(e,o,l)=>o in e?I(e,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[o]=l,u=(e,o)=>{for(var l in o||(o={}))m.call(o,l)&&B(e,l,o[l]);if(i)for(var l of i(o))E.call(o,l)&&B(e,l,o[l]);return e},c=(e,o)=>R(e,x(o));var T=(e,o)=>{var l={};for(var t in e)m.call(e,t)&&o.indexOf(t)<0&&(l[t]=e[t]);if(e!=null&&i)for(var t of i(e))o.indexOf(t)<0&&E.call(e,t)&&(l[t]=e[t]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),w=require("prop-types"),H=require("styled-components"),V=require("../Tooltip/Tooltip.cjs"),C=require("../BaseButton/BaseButton.cjs"),F=require("../Flex/Flex.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=b(f),n=b(w),j=b(H),p=j.default(C.BaseButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${32/16}rem;
+  width: ${32/16}rem;
+
+  svg {
+    > g,
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral400};
+      }
+    }
+  }
+  &[aria-disabled='true'] {
+    background-color: ${({theme:e})=>e.colors.neutral150};
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+  ${({noBorder:e})=>e?"border: none;":void 0}
+`,P=j.default(F.Flex)`
+  & span:first-child button {
+    border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
+    border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
+  }
+
+  & ${p} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({theme:e})=>e.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({theme:e})=>e.colors.neutral150};
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral600};
+        }
+      }
+    }
+  }
+`,d=r.default.forwardRef((D,v)=>{var h=D,{label:e,noBorder:o,children:l,icon:t,disabled:a,onClick:$,"aria-label":k}=h,g=T(h,["label","noBorder","children","icon","disabled","onClick","aria-label"]);const y=q=>{!a&&$&&$(q)};return e?r.default.createElement(V.Tooltip,{label:e},r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},e),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))):r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},k),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))});d.displayName="IconButton";d.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const s=(e,o)=>(l,t)=>!l[t]&&e.every(a=>!l[a])?new Error(`One of the following props is required: ${t}, ${e.join(", ")}`):n.default.checkPropTypes({[t]:n.default[o]},l,"prop","IconButton");d.propTypes={"aria-label":s(["label"],"string"),children:s(["icon"],"node"),disabled:n.default.bool,icon:s(["children"],"node"),label:s(["aria-label"],"string"),noBorder:n.default.bool,onClick:n.default.func};exports.IconButton=d;exports.IconButtonGroup=P;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,168 @@
+var x = Object.defineProperty, C = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var g = (r, e, o) => e in r ? x(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, d = (r, e) => {
+  for (var o in e || (e = {}))
+    v.call(e, o) && g(r, o, e[o]);
+  if (i)
+    for (var o of i(e))
+      y.call(e, o) && g(r, o, e[o]);
+  return r;
+}, c = (r, e) => C(r, T(e));
+var k = (r, e) => {
+  var o = {};
+  for (var l in r)
+    v.call(r, l) && e.indexOf(l) < 0 && (o[l] = r[l]);
+  if (r != null && i)
+    for (var l of i(r))
+      e.indexOf(l) < 0 && y.call(r, l) && (o[l] = r[l]);
+  return o;
+};
+import a, { cloneElement as B } from "react";
+import n from "prop-types";
+import I from "styled-components";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { BaseButton as P } from "../BaseButton/BaseButton.js";
+import { Flex as _ } from "../Flex/Flex.js";
+import { VisuallyHidden as E } from "../VisuallyHidden/VisuallyHidden.js";
+const u = I(P)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${32 / 16}rem;
+  width: ${32 / 16}rem;
+
+  svg {
+    > g,
+    path {
+      fill: ${({ theme: r }) => r.colors.neutral500};
+    }
+  }
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral600};
+      }
+    }
+  }
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral400};
+      }
+    }
+  }
+  &[aria-disabled='true'] {
+    background-color: ${({ theme: r }) => r.colors.neutral150};
+    svg {
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral600};
+      }
+    }
+  }
+  ${({ noBorder: r }) => r ? "border: none;" : void 0}
+`, z = I(_)`
+  & span:first-child button {
+    border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
+    border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
+  }
+
+  & ${u} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({ theme: r }) => r.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({ theme: r }) => r.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({ theme: r }) => r.colors.neutral150};
+      svg {
+        path {
+          fill: ${({ theme: r }) => r.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({ theme: r }) => r.colors.neutral600};
+        }
+      }
+    }
+  }
+`, f = a.forwardRef(
+  (q, $) => {
+    var h = q, { label: r, noBorder: e, children: o, icon: l, disabled: t, onClick: p, "aria-label": R } = h, b = k(h, ["label", "noBorder", "children", "icon", "disabled", "onClick", "aria-label"]);
+    const m = (w) => {
+      !t && p && p(w);
+    };
+    return r ? /* @__PURE__ */ a.createElement(j, {
+      label: r
+    }, /* @__PURE__ */ a.createElement(u, c(d({}, b), {
+      ref: $,
+      noBorder: e,
+      onClick: m,
+      "aria-disabled": t
+    }), /* @__PURE__ */ a.createElement(E, {
+      as: "span"
+    }, r), B(l || o, {
+      "aria-hidden": !0,
+      focusable: !1
+    }))) : /* @__PURE__ */ a.createElement(u, c(d({}, b), {
+      ref: $,
+      noBorder: e,
+      onClick: m,
+      "aria-disabled": t
+    }), /* @__PURE__ */ a.createElement(E, {
+      as: "span"
+    }, R), B(l || o, {
+      "aria-hidden": !0,
+      focusable: !1
+    }));
+  }
+);
+f.displayName = "IconButton";
+f.defaultProps = {
+  "aria-label": void 0,
+  children: void 0,
+  disabled: !1,
+  icon: void 0,
+  label: void 0,
+  noBorder: !1,
+  onClick: void 0
+};
+const s = (r, e) => (o, l) => !o[l] && r.every((t) => !o[t]) ? new Error(`One of the following props is required: ${l}, ${r.join(", ")}`) : n.checkPropTypes({ [l]: n[e] }, o, "prop", "IconButton");
+f.propTypes = {
+  "aria-label": s(["label"], "string"),
+  children: s(["icon"], "node"),
+  disabled: n.bool,
+  icon: s(["children"], "node"),
+  label: s(["aria-label"], "string"),
+  noBorder: n.bool,
+  onClick: n.func
+};
+export {
+  f as IconButton,
+  z as IconButtonGroup
+};

package/dist/IconButton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./IconButton.cjs");exports.IconButton=o.IconButton;exports.IconButtonGroup=o.IconButtonGroup;

package/dist/IconButton/index.js

@@ -0,0 +1,5 @@
+import { IconButton as n, IconButtonGroup as r } from "./IconButton.js";
+export {
+  n as IconButton,
+  r as IconButtonGroup
+};

package/dist/JSONInput/JSONInput.cjs

@@ -0,0 +1 @@
+"use strict";var w=Object.defineProperty;var h=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var j=(e,r,t)=>r in e?w(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,k=(e,r)=>{for(var t in r||(r={}))C.call(r,t)&&j(e,t,r[t]);if(h)for(var t of h(r))O.call(r,t)&&j(e,t,r[t]);return e};var y=(e,r)=>{var t={};for(var a in e)C.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&h)for(var a of h(e))r.indexOf(a)<0&&O.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),z=require("prop-types"),J=require("@codemirror/lang-json"),B=require("@uiw/react-codemirror"),D=require("../Field/Field.cjs"),V=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const W=require("../Field/FieldHint.cjs"),G=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const K=require("../Stack/Stack.cjs"),Q=require("./JSONInputContainer.cjs"),p=require("./utils/decorationExtension.cjs"),N=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=N(d),o=N(z),E=U=>{var S=U,{label:e,value:r,error:t,hint:a,required:v,onChange:I,disabled:M,labelAction:L}=S,_=y(S,["label","value","error","hint","required","onChange","disabled","labelAction"]);const F=d.useRef(),f=d.useRef(null),g=d.useRef(null),b=Boolean(t),x=n=>{var i,l;return(l=(i=f.current)==null?void 0:i.doc)==null?void 0:l.line(n)},A=n=>{var c;const{text:i,to:l}=x(n),s=l-i.trimStart().length;l>s&&((c=g.current)==null||c.dispatch({effects:p.addMarks.of([p.lineHighlightMark.range(s,l)])}))},H=()=>{var i,l,s;const n=((l=(i=f.current)==null?void 0:i.doc)==null?void 0:l.length)||0;(s=g.current)==null||s.dispatch({effects:p.filterMarks.of((c,P)=>P<=0||c>=n)})},m=n=>{const{view:i,state:l}=n;g.current=i,f.current=l,H();const c=J.jsonParseLinter()(i);c.length&&A(l.doc.lineAt(c[0].from).number)},R=(n,i)=>{m(i),I(n)},T=(n,i)=>{g.current=n,f.current=i,m({view:n,state:i})},{setContainer:q}=B.useCodeMirror({value:r,onCreateEditor:T,theme:"dark",onChange:R,editable:!M,container:F.current,extensions:[J.json(),p.markField],basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2,defaultCharacterWidth:5}});return d.useEffect(()=>{const n=F.current;n&&q(n)},[q,b]),u.default.createElement(D.Field,{error:t,hint:a,required:v},u.default.createElement(K.Stack,{spacing:1},e&&u.default.createElement(V.FieldLabel,{action:L},e),u.default.createElement(Q.JSONInputContainer,k({ref:F,hasError:b,alignItems:"stretch",fontSize:2,hasRadius:!0},_)),u.default.createElement(G.FieldError,null),u.default.createElement(W.FieldHint,null)))};E.defaultProps={label:void 0,labelAction:void 0,value:"",error:void 0,hint:void 0,required:!1,disabled:!1,onChange(){}};E.propTypes={label:o.default.string,labelAction:o.default.element,value:o.default.string,error:o.default.oneOfType([o.default.string,o.default.bool]),hint:o.default.oneOfType([o.default.string,o.default.node,o.default.arrayOf(o.default.node)]),required:o.default.bool,disabled:o.default.bool,onChange:o.default.func};exports.JSONInput=E;