@strapi/design-system 0.0.0-3cf3ff39

package/dist/Field/FieldInput.js

@@ -0,0 +1,63 @@
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import p, { css as R } from "styled-components";
+import { useField as I } from "./FieldContext.js";
+import { inputFocusStyle as k } from "../themes/utils.js";
+import { Box as l } from "../Box/Box.js";
+import { Flex as B } from "../Flex/Flex.js";
+const c = {
+  S: 6.5,
+  M: 10.5
+}, M = w(({ endAction: r, startAction: o, disabled: e = !1, onChange: d, size: u = "M", ...f }, $) => {
+  const { id: i, error: t, hint: h, name: g, required: m } = I();
+  let n;
+  t ? n = `${i}-error` : h && (n = `${i}-hint`);
+  const s = !!t, b = (x) => {
+    !e && d && d(x);
+  };
+  return y(j, { justifyContent: "space-between", hasError: s, disabled: e, children: [o ? a(l, { paddingLeft: 3, paddingRight: 2, children: o }) : null, a(F, { id: i, name: g, ref: $, "aria-describedby": n, "aria-invalid": s, "aria-disabled": e, disabled: e, "data-disabled": e ? "" : void 0, hasLeftAction: !!o, hasRightAction: !!r, onChange: b, "aria-required": m, $size: u, ...f }), r ? a(l, { paddingLeft: 2, paddingRight: 3, children: r }) : null] });
+}), F = p.input`
+  border: none;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  padding-bottom: ${({ $size: r }) => `${c[r] / 16}rem`};
+  padding-left: ${({ theme: r, hasLeftAction: o }) => o ? 0 : r.spaces[4]};
+  padding-right: ${({ theme: r, hasRightAction: o }) => o ? 0 : r.spaces[4]};
+  padding-top: ${({ $size: r }) => `${c[r] / 16}rem`};
+  cursor: ${(r) => r["aria-disabled"] ? "not-allowed" : void 0};
+
+  color: ${({ theme: r }) => r.colors.neutral800};
+  font-weight: 400;
+  font-size: ${(r) => r.theme.fontSizes[2]};
+  display: block;
+  width: 100%;
+  background: inherit;
+
+  ::placeholder {
+    color: ${({ theme: r }) => r.colors.neutral500};
+    opacity: 1;
+  }
+
+  &[aria-disabled='true'] {
+    color: inherit;
+  }
+
+  //focus managed by InputWrapper
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+`, j = p(B)`
+  border: 1px solid ${({ theme: r, hasError: o }) => o ? r.colors.danger600 : r.colors.neutral200};
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  background: ${({ theme: r }) => r.colors.neutral0};
+  ${k()}
+
+  ${({ theme: r, disabled: o }) => o ? R`
+          color: ${r.colors.neutral600};
+          background: ${r.colors.neutral150};
+        ` : void 0}
+`;
+export {
+  M as FieldInput,
+  j as InputWrapper
+};

package/dist/Field/FieldLabel.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("react"),p=require("styled-components"),h=require("./FieldContext.cjs"),f=require("../helpers/deprecations.cjs"),o=require("../Typography/Typography.cjs"),g=require("../Flex/Flex.cjs"),y=e=>e&&e.__esModule?e:{default:e},t=y(p),q=f.once(console.warn),x=u.forwardRef(({children:e,action:n,required:i,...l},s)=>{const{id:a,required:d}=h.useField(),c=d||i;return i!==void 0&&q('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'),r.jsxs(F,{ref:s,variant:"pi",textColor:"neutral800",htmlFor:a,fontWeight:"bold",as:"label",...l,children:[e,c&&r.jsx(m,{textColor:"danger600",children:"*"}),n&&r.jsx(b,{marginLeft:1,children:n})]})}),F=t.default(o.Typography)`
+  display: flex;
+  align-items: center;
+`,m=t.default(o.Typography)`
+  line-height: 0;
+`,b=t.default(g.Flex)`
+  line-height: 0;
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`;exports.FieldLabel=x;

package/dist/Field/FieldLabel.js

@@ -0,0 +1,25 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import r from "styled-components";
+import { useField as h } from "./FieldContext.js";
+import { once as f } from "../helpers/deprecations.js";
+import { Typography as n } from "../Typography/Typography.js";
+import { Flex as g } from "../Flex/Flex.js";
+const u = f(console.warn), A = c(({ children: e, action: o, required: i, ...l }, s) => {
+  const { id: a, required: d } = h(), p = d || i;
+  return i !== void 0 && u('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'), m(x, { ref: s, variant: "pi", textColor: "neutral800", htmlFor: a, fontWeight: "bold", as: "label", ...l, children: [e, p && t(y, { textColor: "danger600", children: "*" }), o && t(F, { marginLeft: 1, children: o })] });
+}), x = r(n)`
+  display: flex;
+  align-items: center;
+`, y = r(n)`
+  line-height: 0;
+`, F = r(g)`
+  line-height: 0;
+
+  svg path {
+    fill: ${({ theme: e }) => e.colors.neutral500};
+  }
+`;
+export {
+  A as FieldLabel
+};

package/dist/Field/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Field.cjs"),t=require("./FieldLabel.cjs"),e=require("./FieldInput.cjs"),l=require("./FieldHint.cjs"),d=require("./FieldError.cjs"),i=require("./FieldContext.cjs"),n=require("./FieldAction.cjs");exports.Field=r.Field;exports.FieldLabel=t.FieldLabel;exports.FieldInput=e.FieldInput;exports.InputWrapper=e.InputWrapper;exports.FieldHint=l.FieldHint;exports.FieldError=d.FieldError;exports.FieldContext=i.FieldContext;exports.useField=i.useField;exports.FieldAction=n.FieldAction;

package/dist/Field/index.js

@@ -0,0 +1,18 @@
+import { Field as o } from "./Field.js";
+import { FieldLabel as p } from "./FieldLabel.js";
+import { FieldInput as l, InputWrapper as d } from "./FieldInput.js";
+import { FieldHint as F } from "./FieldHint.js";
+import { FieldError as m } from "./FieldError.js";
+import { FieldContext as u, useField as a } from "./FieldContext.js";
+import { FieldAction as b } from "./FieldAction.js";
+export {
+  o as Field,
+  b as FieldAction,
+  u as FieldContext,
+  m as FieldError,
+  F as FieldHint,
+  l as FieldInput,
+  p as FieldLabel,
+  d as InputWrapper,
+  a as useField
+};

package/dist/Flex/Flex.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),l=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},r=i(n),s={direction:!0},u=r.default(l.Box).withConfig({shouldForwardProp:(e,t)=>!s[e]&&t(e)})`
+  align-items: ${({alignItems:e="center"})=>e};
+  display: ${({inline:e})=>e?"inline-flex":"flex"};
+  flex-direction: ${({direction:e="row"})=>e};
+  flex-shrink: ${({shrink:e})=>e};
+  flex-wrap: ${({wrap:e})=>e};
+  ${({gap:e,theme:t})=>o("gap",e,t)};
+  justify-content: ${({justifyContent:e})=>e};
+`;exports.Flex=u;

package/dist/Flex/Flex.js

@@ -0,0 +1,19 @@
+import i from "styled-components";
+import r from "../helpers/handleResponsiveValues.js";
+import { Box as t } from "../Box/Box.js";
+const n = {
+  direction: !0
+}, a = i(t).withConfig({
+  shouldForwardProp: (e, o) => !n[e] && o(e)
+})`
+  align-items: ${({ alignItems: e = "center" }) => e};
+  display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
+  flex-direction: ${({ direction: e = "row" }) => e};
+  flex-shrink: ${({ shrink: e }) => e};
+  flex-wrap: ${({ wrap: e }) => e};
+  ${({ gap: e, theme: o }) => r("gap", e, o)};
+  justify-content: ${({ justifyContent: e }) => e};
+`;
+export {
+  a as Flex
+};

package/dist/Flex/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Flex.cjs");exports.Flex=e.Flex;

package/dist/Flex/index.js

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

package/dist/FocusTrap/FocusTrap.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),r=require("react"),l=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),m=({onEscape:s,restoreFocus:o=!0,...i})=>{const n=r.useRef(null);r.useEffect(()=>{let e=null;return o&&(e=document.activeElement),()=>{e&&e.focus()}},[o]),r.useEffect(()=>{if(!n.current)return;const e=l.getFocusableNodes(n.current);e.length>0?e[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 a=e=>{if(e.key===f.KeyboardKeys.ESCAPE&&s){s();return}if(e.key!==f.KeyboardKeys.TAB)return;const t=l.getFocusableNodes(n.current);if(t.length>0){const u=t[0],c=t[t.length-1];e.shiftKey?u===document.activeElement&&(e.preventDefault(),c.focus()):c===document.activeElement&&(e.preventDefault(),u.focus())}};return d.jsx("div",{ref:n,onKeyDown:a,...i})};exports.FocusTrap=m;

package/dist/FocusTrap/FocusTrap.js

@@ -0,0 +1,33 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as m, useEffect as l } from "react";
+import { getFocusableNodes as u } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as c } from "../helpers/keyboardKeys.js";
+const v = ({ onEscape: r, restoreFocus: o = !0, ...i }) => {
+  const n = m(null);
+  return l(() => {
+    let e = null;
+    return o && (e = document.activeElement), () => {
+      e && e.focus();
+    };
+  }, [o]), l(() => {
+    if (!n.current)
+      return;
+    const e = u(n.current);
+    e.length > 0 ? e[0].focus() : console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.");
+  }, []), a("div", { ref: n, onKeyDown: (e) => {
+    if (e.key === c.ESCAPE && r) {
+      r();
+      return;
+    }
+    if (e.key !== c.TAB)
+      return;
+    const t = u(n.current);
+    if (t.length > 0) {
+      const s = t[0], f = t[t.length - 1];
+      e.shiftKey ? s === document.activeElement && (e.preventDefault(), f.focus()) : f === document.activeElement && (e.preventDefault(), s.focus());
+    }
+  }, ...i });
+};
+export {
+  v as FocusTrap
+};

package/dist/FocusTrap/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react"),l=require("prop-types"),d=require("styled-components"),i=require("./GridContext.cjs"),f=require("../helpers/handleResponsiveValues.cjs"),p=require("../Box/Box.cjs"),a=e=>e&&e.__esModule?e:{default:e};function y(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const m=y(c),o=a(l),_=a(d),b=_.default(p.Box)`
+  display: grid;
+  grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
+  ${({theme:e,gap:t})=>f("gap",t,e)}
+`,u=({gap:e,gridCols:t,...r})=>{const n=m.useMemo(()=>({gap:e,gridCols:t}),[e,t]);return s.jsx(i.GridContext.Provider,{value:n,children:s.jsx(b,{gap:e,gridCols:t,...r})})};u.defaultProps={gap:0,gridCols:12};u.propTypes={gap:o.default.oneOfType([o.default.number,o.default.arrayOf(o.default.number)]),gridCols:o.default.number};exports.Grid=u;

package/dist/Grid/Grid.js

@@ -0,0 +1,26 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as s from "react";
+import e from "prop-types";
+import n from "styled-components";
+import { GridContext as a } from "./GridContext.js";
+import d from "../helpers/handleResponsiveValues.js";
+import { Box as f } from "../Box/Box.js";
+const l = n(f)`
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
+  ${({ theme: r, gap: o }) => d("gap", o, r)}
+`, t = ({ gap: r, gridCols: o, ...m }) => {
+  const i = s.useMemo(() => ({ gap: r, gridCols: o }), [r, o]);
+  return /* @__PURE__ */ p(a.Provider, { value: i, children: /* @__PURE__ */ p(l, { gap: r, gridCols: o, ...m }) });
+};
+t.defaultProps = {
+  gap: 0,
+  gridCols: 12
+};
+t.propTypes = {
+  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  gridCols: e.number
+};
+export {
+  t as Grid
+};

package/dist/Grid/GridContext.cjs

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

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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),c=require("styled-components"),p=require("./GridContext.cjs"),m=require("../Box/Box.cjs"),s=e=>e&&e.__esModule?e:{default:e},r=s(a),f=s(c),x=f.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};
+  }
+`,t=({col:e,xs:i,s:d,...u})=>{const{gap:n,gridCols:l}=p.useGrid();return o.jsx(x,{gap:n,gridCols:l,col:e,xs:i,s:d,children:o.jsx(m.Box,{...u})})};t.defaultProps={col:void 0,s:void 0,xs:void 0};t.propTypes={col:r.default.number,s:r.default.number,xs:r.default.number};exports.GridItem=t;

package/dist/Grid/GridItem.js

@@ -0,0 +1,34 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import o from "prop-types";
+import n from "styled-components";
+import { useGrid as l } from "./GridContext.js";
+import { Box as u } from "../Box/Box.js";
+const a = n.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};
+  }
+`, m = ({ col: r, xs: e, s: p, ...s }) => {
+  const { gap: t, gridCols: d } = l();
+  return /* @__PURE__ */ i(a, { gap: t, gridCols: d, col: r, xs: e, s: p, children: /* @__PURE__ */ i(u, { ...s }) });
+};
+m.defaultProps = {
+  col: void 0,
+  s: void 0,
+  xs: void 0
+};
+m.propTypes = {
+  col: o.number,
+  s: o.number,
+  xs: o.number
+};
+export {
+  m as GridItem
+};

package/dist/Grid/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),s=require("react"),u=require("styled-components"),a=require("../helpers/theme.cjs"),d=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},i=o(s),f=o(u),m=f.default(d.Box)`
+  path {
+    fill: ${({color:e,theme:t})=>a.extractStyleFromTheme(t.colors,e,void 0)};
+  }
+  ${({theme:e,colors:t})=>t(e)}
+`,r=i.default.forwardRef(({color:e="neutral600",colors:t=()=>"",...c},n)=>l.jsx(m,{ref:n,color:e,colors:t,...c}));r.displayName="Icon";exports.Icon=r;

package/dist/Icon/Icon.js

@@ -0,0 +1,15 @@
+import { jsx as m } from "react/jsx-runtime";
+import f from "react";
+import c from "styled-components";
+import { extractStyleFromTheme as l } from "../helpers/theme.js";
+import { Box as p } from "../Box/Box.js";
+const a = c(p)`
+  path {
+    fill: ${({ color: o, theme: r }) => l(r.colors, o, void 0)};
+  }
+  ${({ theme: o, colors: r }) => r(o)}
+`, n = f.forwardRef(({ color: o = "neutral600", colors: r = () => "", ...t }, e) => m(a, { ref: e, color: o, colors: r, ...t }));
+n.displayName = "Icon";
+export {
+  n as Icon
+};

package/dist/Icon/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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,81 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("react"),j=require("styled-components"),y=require("../VisuallyHidden/VisuallyHidden.cjs"),_=require("../Tooltip/Tooltip.cjs"),B=require("../BaseButton/BaseButton.cjs"),m=require("../Flex/Flex.cjs"),R=e=>e&&e.__esModule?e:{default:e};function q(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=q(v),c=R(j),x=u.forwardRef(({label:e,background:t,borderWidth:r,noBorder:o=!1,children:d,icon:f,disabled:l=!1,onClick:a,"aria-label":p,...b},g)=>{const $=h=>{!l&&a&&a(h)},s=n.jsxs(i,{"aria-disabled":l,background:l?"neutral150":t,borderWidth:o?0:r,justifyContent:"center",height:"2rem",width:"2rem",...b,ref:g,onClick:$,children:[n.jsx(y.VisuallyHidden,{as:"span",children:e??p}),u.cloneElement(f||d,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(_.Tooltip,{label:e,children:s}):s}),i=c.default(B.BaseButton)`
+  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'] {
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+`,O=c.default(m.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`};
+  }
+
+  & ${i} {
+    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};
+        }
+      }
+    }
+  }
+`;exports.IconButton=x;exports.IconButtonGroup=O;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,101 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import * as e from "react";
+import s from "styled-components";
+import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
+import { Tooltip as v } from "../Tooltip/Tooltip.js";
+import { BaseButton as R } from "../BaseButton/BaseButton.js";
+import { Flex as k } from "../Flex/Flex.js";
+const W = e.forwardRef(({ label: r, background: i, borderWidth: c, noBorder: d = !1, children: u, icon: f, disabled: o = !1, onClick: l, "aria-label": p, ...h }, $) => {
+  const t = m(n, { "aria-disabled": o, background: o ? "neutral150" : i, borderWidth: d ? 0 : c, justifyContent: "center", height: "2rem", width: "2rem", ...h, ref: $, onClick: (b) => {
+    !o && l && l(b);
+  }, children: [a(g, { as: "span", children: r ?? p }), e.cloneElement(f || u, {
+    "aria-hidden": !0,
+    focusable: !1
+    // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+  })] });
+  return r ? a(v, { label: r, children: t }) : t;
+}), n = s(R)`
+  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'] {
+    svg {
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral600};
+      }
+    }
+  }
+`, E = s(k)`
+  & 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`};
+  }
+
+  & ${n} {
+    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};
+        }
+      }
+    }
+  }
+`;
+export {
+  W as IconButton,
+  E as IconButtonGroup
+};

package/dist/IconButton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),S=require("@codemirror/lang-json"),M=require("@uiw/react-codemirror"),N=require("./JSONInputContainer.cjs"),l=require("./utils/decorationExtension.cjs"),R=require("../Field/Field.cjs"),H=require("../Flex/Flex.cjs"),L=require("../Field/FieldLabel.cjs"),y=require("../Field/FieldError.cjs"),z=require("../Field/FieldHint.cjs"),A=({label:a,error:d,hint:x,labelAction:F,value:m="",required:q=!1,disabled:h=!1,onChange:p=()=>null,...b})=>{const i=u.useRef(),o=u.useRef(),c=u.useRef(),j=!!d,C=e=>{const r=o.current?.doc;if(r){const{text:s,to:t}=r.line(e),E=t-s.trimStart().length;t>E&&c.current?.dispatch({effects:l.addMarks.of([l.lineHighlightMark.range(E,t)])})}},O=()=>{const e=o.current?.doc;if(e){const r=e.length||0;c.current?.dispatch({effects:l.filterMarks.of((s,t)=>t<=0||s>=r)})}},f=({state:e,view:r})=>{c.current=r,o.current=e,O();const t=S.jsonParseLinter()(r);t.length&&C(e.doc.lineAt(t[0].from).number)},k=(e,r)=>{f(r),p(e)},I=(e,r)=>{c.current=e,o.current=r,f({view:e,state:r})},{setContainer:g}=M.useCodeMirror({value:m,onCreateEditor:I,container:i.current,editable:!h,extensions:[S.json(),l.markField],onChange:k,theme:"dark",basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2}}),J=()=>{h||i.current?.children[0].children[1].children[1]?.focus()};return u.useEffect(()=>{const e=i.current;e&&g(e)},[g]),n.jsx(R.Field,{error:d,hint:x,required:q,children:n.jsxs(H.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a&&n.jsx(L.FieldLabel,{onClick:J,action:F,children:a}),n.jsx(N.JSONInputContainer,{ref:i,hasError:j,alignItems:"stretch",fontSize:2,hasRadius:!0,...b}),n.jsx(y.FieldError,{}),n.jsx(z.FieldHint,{})]})})};exports.JSONInput=A;

package/dist/JSONInput/JSONInput.js

@@ -0,0 +1,64 @@
+import { jsx as n, jsxs as O } from "react/jsx-runtime";
+import { useRef as l, useEffect as J } from "react";
+import { json as j, jsonParseLinter as H } from "@codemirror/lang-json";
+import { useCodeMirror as L } from "@uiw/react-codemirror";
+import { JSONInputContainer as z } from "./JSONInputContainer.js";
+import { markField as A, addMarks as B, lineHighlightMark as R, filterMarks as q } from "./utils/decorationExtension.js";
+import { Field as y } from "../Field/Field.js";
+import { Flex as P } from "../Flex/Flex.js";
+import { FieldLabel as V } from "../Field/FieldLabel.js";
+import { FieldError as D } from "../Field/FieldError.js";
+import { FieldHint as G } from "../Field/FieldHint.js";
+const v = ({ label: a, error: d, hint: g, labelAction: p, value: E = "", required: S = !1, disabled: u = !1, onChange: k = () => null, ...C }) => {
+  const o = l(), i = l(), c = l(), F = !!d, b = (r) => {
+    const t = i.current?.doc;
+    if (t) {
+      const { text: s, to: e } = t.line(r), m = e - s.trimStart().length;
+      e > m && c.current?.dispatch({
+        effects: B.of([R.range(m, e)])
+      });
+    }
+  }, x = () => {
+    const r = i.current?.doc;
+    if (r) {
+      const t = r.length || 0;
+      c.current?.dispatch({
+        effects: q.of((s, e) => e <= 0 || s >= t)
+      });
+    }
+  }, f = ({ state: r, view: t }) => {
+    c.current = t, i.current = r, x();
+    const e = H()(t);
+    e.length && b(r.doc.lineAt(e[0].from).number);
+  }, M = (r, t) => {
+    f(t), k(r);
+  }, I = (r, t) => {
+    c.current = r, i.current = t, f({ view: r, state: t });
+  }, { setContainer: h } = L({
+    value: E,
+    onCreateEditor: I,
+    container: o.current,
+    editable: !u,
+    extensions: [j(), A],
+    onChange: M,
+    theme: "dark",
+    basicSetup: {
+      lineNumbers: !0,
+      bracketMatching: !0,
+      closeBrackets: !0,
+      indentOnInput: !0,
+      syntaxHighlighting: !0,
+      highlightSelectionMatches: !0,
+      tabSize: 2
+    }
+  }), N = () => {
+    u || o.current?.children[0].children[1].children[1]?.focus();
+  };
+  return J(() => {
+    const r = o.current;
+    r && h(r);
+  }, [h]), n(y, { error: d, hint: g, required: S, children: O(P, { direction: "column", alignItems: "stretch", gap: 1, children: [a && n(V, { onClick: N, action: p, children: a }), n(z, { ref: o, hasError: F, alignItems: "stretch", fontSize: 2, hasRadius: !0, ...C }), n(D, {}), n(G, {})] }) });
+};
+export {
+  v as JSONInput
+};

package/dist/JSONInput/JSONInputContainer.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),o=require("../themes/utils.cjs"),s=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},c=n(r),l=c.default(s.Flex)`
+  line-height: ${({theme:e})=>e.lineHeights[2]};
+
+  .cm-editor {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+  }
+
+  .cm-scroller {
+    border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${o.inputFocusStyle()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({theme:e})=>e.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
+    background-color: #4a4a6a;
+  }
+`;exports.JSONInputContainer=l;