@strapi/design-system 1.3.0-beta.3 → 1.3.0

package/dist/Field/FieldInput.js

@@ -0,0 +1,105 @@
+import t, { forwardRef as R } from "react";
+import m from "styled-components";
+import r from "prop-types";
+import { sizes as k } from "../themes/sizes.js";
+import { inputFocusStyle as I } from "../themes/utils.js";
+import { useField as v } from "./FieldContext.js";
+import { Flex as x } from "../Flex/Flex.js";
+import { Box as c } from "../Box/Box.js";
+const u = {
+  S: 6.5,
+  M: 10.5
+}, C = m.input`
+  border: none;
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  padding-bottom: ${({ size: e }) => `${u[e] / 16}rem`};
+  padding-left: ${({ theme: e, hasLeftAction: o }) => o ? 0 : e.spaces[4]};
+  padding-right: ${({ theme: e, hasRightAction: o }) => o ? 0 : e.spaces[4]};
+  padding-top: ${({ size: e }) => `${u[e] / 16}rem`};
+  cursor: ${(e) => e["aria-disabled"] ? "not-allowed" : void 0};
+
+  color: ${({ theme: e }) => e.colors.neutral800};
+  font-weight: 400;
+  // TODO: Make sure to use the theme when it's ready
+  font-size: ${14 / 16}rem;
+  display: block;
+  width: 100%;
+  background: inherit;
+
+  ::placeholder {
+    color: ${({ theme: e }) => e.colors.neutral500};
+    opacity: 1;
+  }
+
+  &[aria-disabled='true'] {
+    color: inherit;
+  }
+
+  //focus managed by InputWrapper
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+`, E = m(x)`
+  border: 1px solid ${({ theme: e, hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  background: ${({ theme: e }) => e.colors.neutral0};
+  ${I()}
+
+  ${({ theme: e, disabled: o }) => o ? `
+    color: ${e.colors.neutral600};
+    background: ${e.colors.neutral150};
+  
+  ` : void 0}
+`, d = R(({ endAction: e, startAction: o, disabled: n, onChange: f, size: s, ...g }, b) => {
+  const { id: a, error: l, hint: h, name: $ } = v();
+  let i;
+  l ? i = `${a}-error` : h && (i = `${a}-hint`);
+  const p = Boolean(l), y = (w) => {
+    n || f(w);
+  };
+  return /* @__PURE__ */ t.createElement(E, {
+    size: s,
+    justifyContent: "space-between",
+    hasError: p,
+    disabled: n
+  }, o && /* @__PURE__ */ t.createElement(c, {
+    paddingLeft: 3,
+    paddingRight: 2
+  }, o), /* @__PURE__ */ t.createElement(C, {
+    id: a,
+    name: $,
+    ref: b,
+    "aria-describedby": i,
+    "aria-invalid": p,
+    "aria-disabled": n,
+    hasLeftAction: Boolean(o),
+    hasRightAction: Boolean(e),
+    onChange: y,
+    size: s,
+    ...g
+  }), e && /* @__PURE__ */ t.createElement(c, {
+    paddingLeft: 2,
+    paddingRight: 3
+  }, e));
+});
+d.displayName = "FieldInput";
+d.defaultProps = {
+  disabled: !1,
+  endAction: void 0,
+  size: "M",
+  startAction: void 0,
+  onChange: () => {
+  }
+};
+d.propTypes = {
+  disabled: r.bool,
+  endAction: r.element,
+  onChange: r.func,
+  size: r.oneOf(Object.keys(k.input)),
+  startAction: r.element
+};
+export {
+  d as FieldInput,
+  E as InputWrapper
+};

package/dist/Field/FieldLabel.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),f=require("styled-components"),y=require("prop-types"),s=require("../Flex/Flex.cjs"),g=require("./FieldContext.cjs"),i=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(p),c=o(f),l=o(y),h=c.default(i.Typography)`
+  line-height: 0;
+`,F=c.default(s.Flex)`
+  line-height: 0;
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`,r=({children:e,required:a,action:n,...d})=>{const{id:u}=g.useField();return t.default.createElement(i.Typography,{variant:"pi",textColor:"neutral800",htmlFor:u,fontWeight:"bold",as:"label",required:a,...d},t.default.createElement(s.Flex,{alignItems:"center"},e,a&&t.default.createElement(h,{textColor:"danger600"},"*"),n&&t.default.createElement(F,{marginLeft:1},n)))};r.defaultProps={required:!1,action:void 0};r.propTypes={action:l.default.element,children:l.default.node.isRequired,required:l.default.bool};exports.FieldLabel=r;

package/dist/Field/FieldLabel.js

@@ -0,0 +1,44 @@
+import e from "react";
+import i from "styled-components";
+import r from "prop-types";
+import { Flex as n } from "../Flex/Flex.js";
+import { useField as c } from "./FieldContext.js";
+import { Typography as a } from "../Typography/Typography.js";
+const d = i(a)`
+  line-height: 0;
+`, f = i(n)`
+  line-height: 0;
+
+  svg path {
+    fill: ${({ theme: t }) => t.colors.neutral500};
+  }
+`, m = ({ children: t, required: o, action: l, ...p }) => {
+  const { id: s } = c();
+  return /* @__PURE__ */ e.createElement(a, {
+    variant: "pi",
+    textColor: "neutral800",
+    htmlFor: s,
+    fontWeight: "bold",
+    as: "label",
+    required: o,
+    ...p
+  }, /* @__PURE__ */ e.createElement(n, {
+    alignItems: "center"
+  }, t, o && /* @__PURE__ */ e.createElement(d, {
+    textColor: "danger600"
+  }, "*"), l && /* @__PURE__ */ e.createElement(f, {
+    marginLeft: 1
+  }, l)));
+};
+m.defaultProps = {
+  required: !1,
+  action: void 0
+};
+m.propTypes = {
+  action: r.element,
+  children: r.node.isRequired,
+  required: r.bool
+};
+export {
+  m as FieldLabel
+};

package/dist/Field/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./Field.cjs"),t=require("./FieldLabel.cjs"),e=require("./FieldInput.cjs"),r=require("./FieldHint.cjs"),d=require("./FieldError.cjs"),i=require("./FieldContext.cjs"),F=require("./FieldAction.cjs");exports.Field=l.Field;exports.FieldLabel=t.FieldLabel;exports.FieldInput=e.FieldInput;exports.InputWrapper=e.InputWrapper;exports.FieldHint=r.FieldHint;exports.FieldError=d.FieldError;exports.FieldContext=i.FieldContext;exports.useField=i.useField;exports.FieldAction=F.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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),r=require("../Box/Box.cjs"),n=require("../helpers/handleResponsiveValues.cjs"),o=require("./FlexProps.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=i(l),a={direction:!0},t=u.default(r.Box).withConfig({shouldForwardProp:(e,s)=>!a[e]&&s(e)})`
+  align-items: ${({alignItems:e})=>e};
+  display: ${({inline:e})=>e?"inline-flex":"flex"};
+  flex-direction: ${({direction:e})=>e};
+  flex-shrink: ${({shrink:e})=>e};
+  flex-wrap: ${({wrap:e})=>e};
+  ${({gap:e,theme:s})=>n("gap",e,s)}};
+  justify-content: ${({justifyContent:e})=>e};
+`;t.defaultProps=o.flexDefaultProps;t.propTypes=o.flexPropTypes;exports.Flex=t;

package/dist/Flex/Flex.js

@@ -0,0 +1,22 @@
+import t from "styled-components";
+import { Box as i } from "../Box/Box.js";
+import l from "../helpers/handleResponsiveValues.js";
+import { flexDefaultProps as s, flexPropTypes as p } from "./FlexProps.js";
+const f = {
+  direction: !0
+}, r = t(i).withConfig({
+  shouldForwardProp: (e, o) => !f[e] && o(e)
+})`
+  align-items: ${({ alignItems: e }) => e};
+  display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
+  flex-direction: ${({ direction: e }) => e};
+  flex-shrink: ${({ shrink: e }) => e};
+  flex-wrap: ${({ wrap: e }) => e};
+  ${({ gap: e, theme: o }) => l("gap", e, o)}};
+  justify-content: ${({ justifyContent: e }) => e};
+`;
+r.defaultProps = s;
+r.propTypes = p;
+export {
+  r as Flex
+};

package/dist/Flex/FlexProps.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("prop-types"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=l(o),e=l(s),a=t=>n.default.createElement("div",{...t}),r={alignItems:"center",basis:void 0,direction:"row",gap:void 0,inline:!1,justifyContent:void 0,reverse:!1,wrap:void 0},u={alignItems:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.number]),direction:e.default.string,gap:e.default.oneOfType([e.default.shape({desktop:e.default.number,mobile:e.default.number,tablet:e.default.number}),e.default.number,e.default.arrayOf(e.default.number),e.default.string]),inline:e.default.bool,justifyContent:e.default.string,reverse:e.default.bool,shrink:e.default.number,wrap:e.default.string};a.defaultProps=r;a.propTypes=u;exports.FlexProps=a;exports.flexDefaultProps=r;exports.flexPropTypes=u;

package/dist/Flex/FlexProps.js

@@ -0,0 +1,40 @@
+import t from "react";
+import e from "prop-types";
+const r = (n) => /* @__PURE__ */ t.createElement("div", {
+  ...n
+}), o = {
+  alignItems: "center",
+  basis: void 0,
+  direction: "row",
+  gap: void 0,
+  inline: !1,
+  justifyContent: void 0,
+  reverse: !1,
+  wrap: void 0
+}, s = {
+  alignItems: e.string,
+  basis: e.oneOfType([e.string, e.number]),
+  direction: e.string,
+  gap: e.oneOfType([
+    e.shape({
+      desktop: e.number,
+      mobile: e.number,
+      tablet: e.number
+    }),
+    e.number,
+    e.arrayOf(e.number),
+    e.string
+  ]),
+  inline: e.bool,
+  justifyContent: e.string,
+  reverse: e.bool,
+  shrink: e.number,
+  wrap: e.string
+};
+r.defaultProps = o;
+r.propTypes = s;
+export {
+  r as FlexProps,
+  o as flexDefaultProps,
+  s as flexPropTypes
+};

package/dist/Flex/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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/ExampleComponent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),d=require("@strapi/icons/Cross"),a=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),r=require("../Typography/Typography.cjs"),o=require("../Button/Button.cjs"),u=require("../Flex/Flex.cjs"),p=require("./FocusTrap.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=s(l),m=s(d),f=({onClose:t})=>{const[n,c]=l.useState(!1);return e.default.createElement(p.FocusTrap,{onEscape:t},e.default.createElement(a.Box,{background:"neutral0",padding:4,hasRadius:!0,style:{width:"600px"}},e.default.createElement(i.Stack,{spacing:2},e.default.createElement(u.Flex,{justifyContent:"space-between"},e.default.createElement(r.Typography,{variant:"beta",as:"h2"},"Hey folks!"),e.default.createElement("button",{style:{border:"none",background:"transparent"},onClick:t,"aria-label":"Close"},e.default.createElement(m.default,{"aria-hidden":!0}))),e.default.createElement(a.Box,{paddingTop:2,paddingBottom:2},e.default.createElement(r.Typography,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.")),e.default.createElement(u.Flex,{justifyContent:"space-between"},e.default.createElement(o.Button,{id:"second"},"Second focusable"),e.default.createElement(o.Button,{id:"last",onClick:()=>c(!0)},"Last focusable (at the beginning)"),n&&e.default.createElement(o.Button,{id:"real-last"},"Last focusable (at the end)")))))},g=()=>{const[t,n]=l.useState(!1);return e.default.createElement(a.Box,{background:"neutral150",padding:10},e.default.createElement(i.Stack,{spacing:2},t&&e.default.createElement(f,{onClose:()=>n(!1)}),e.default.createElement(a.Box,{background:"neutral0",padding:4,hasRadius:!0,style:{width:"600px"}},e.default.createElement(r.Typography,{variant:"beta",as:"h2"},"Outside the trap!"),e.default.createElement(a.Box,{paddingTop:2},e.default.createElement(o.Button,{onClick:()=>n(!0),id:"trigger"},"Open the trap")))))};exports.ExampleComponent=g;

package/dist/FocusTrap/ExampleComponent.js

@@ -0,0 +1,70 @@
+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", {
+    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)")))));
+}, C = () => {
+  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 {
+  C as ExampleComponent
+};

package/dist/FocusTrap/FocusTrap.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),b=require("prop-types"),a=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=d(r),i=d(b),n=({onEscape:t,restoreFocus:c,...p})=>{const o=r.useRef(null);r.useEffect(()=>{if(c){const e=document.activeElement;return()=>{e.focus()}}},[c]),r.useEffect(()=>{if(!o.current)return;const e=a.getFocusableNodes(o.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 y=e=>{if(e.key===f.KeyboardKeys.ESCAPE&&t)return t();if(e.key!==f.KeyboardKeys.TAB)return;const s=a.getFocusableNodes(o.current);if(s.length>0){const u=s[0],l=s[s.length-1];e.shiftKey?u===document.activeElement&&(e.preventDefault(),l.focus()):l===document.activeElement&&(e.preventDefault(),u.focus())}};return m.default.createElement("div",{ref:o,onKeyDown:y,...p})};n.defaultProps={restoreFocus:!0};n.propTypes={onEscape:i.default.func,restoreFocus:i.default.bool};exports.FocusTrap=n;

package/dist/FocusTrap/FocusTrap.js

@@ -0,0 +1,48 @@
+import d, { useRef as E, useEffect as f } from "react";
+import u from "prop-types";
+import { getFocusableNodes as l } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as a } from "../helpers/keyboardKeys.js";
+const i = ({ onEscape: o, restoreFocus: n, ...m }) => {
+  const r = E(null);
+  f(() => {
+    if (n) {
+      const e = document.activeElement;
+      return () => {
+        e.focus();
+      };
+    }
+  }, [n]), f(() => {
+    if (!r.current)
+      return;
+    const e = l(r.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 p = (e) => {
+    if (e.key === a.ESCAPE && o)
+      return o();
+    if (e.key !== a.TAB)
+      return;
+    const t = l(r.current);
+    if (t.length > 0) {
+      const s = t[0], c = t[t.length - 1];
+      e.shiftKey ? s === document.activeElement && (e.preventDefault(), c.focus()) : c === document.activeElement && (e.preventDefault(), s.focus());
+    }
+  };
+  return /* @__PURE__ */ d.createElement("div", {
+    ref: r,
+    onKeyDown: p,
+    ...m
+  });
+};
+i.defaultProps = {
+  restoreFocus: !0
+};
+i.propTypes = {
+  onEscape: u.func,
+  restoreFocus: u.bool
+};
+export {
+  i 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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),d=require("styled-components"),n=require("prop-types"),c=require("./GridContext.cjs"),p=require("../Box/Box.cjs"),i=require("../helpers/handleResponsiveValues.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(u),f=o(d),t=o(n),y=f.default(p.Box)`
+  display: grid;
+  grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
+  ${({theme:e,gap:r})=>i("gap",r,e)}
+`,s=({gap:e,gridCols:r,...l})=>a.default.createElement(c.GridContext.Provider,{value:{gap:e,gridCols:r}},a.default.createElement(y,{gap:e,gridCols:r,...l}));s.defaultProps={gap:0,gridCols:12};s.propTypes={gap:t.default.oneOfType([t.default.number,t.default.arrayOf(t.default.number)]),gridCols:t.default.number};exports.Grid=s;

package/dist/Grid/Grid.js

@@ -0,0 +1,28 @@
+import t from "react";
+import a from "styled-components";
+import e from "prop-types";
+import { GridContext as i } from "./GridContext.js";
+import { Box as n } from "../Box/Box.js";
+import d from "../helpers/handleResponsiveValues.js";
+const l = a(n)`
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
+  ${({ theme: r, gap: o }) => d("gap", o, r)}
+`, p = ({ gap: r, gridCols: o, ...m }) => /* @__PURE__ */ t.createElement(i.Provider, {
+  value: { gap: r, gridCols: o }
+}, /* @__PURE__ */ t.createElement(l, {
+  gap: r,
+  gridCols: o,
+  ...m
+}));
+p.defaultProps = {
+  gap: 0,
+  gridCols: 12
+};
+p.propTypes = {
+  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  gridCols: e.number
+};
+export {
+  p 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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("styled-components"),p=require("prop-types"),m=require("../Box/Box.cjs"),f=require("./GridContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),y=o(c),t=o(p),x=y.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};
+  }
+`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=f.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(m.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;

package/dist/Grid/GridItem.js

@@ -0,0 +1,41 @@
+import o from "react";
+import n from "styled-components";
+import e from "prop-types";
+import { Box as a } from "../Box/Box.js";
+import { useGrid as l } from "./GridContext.js";
+const u = 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: t, s: i, ...p }) => {
+  const { gap: s, gridCols: d } = l();
+  return /* @__PURE__ */ o.createElement(u, {
+    gap: s,
+    gridCols: d,
+    col: r,
+    xs: t,
+    s: i
+  }, /* @__PURE__ */ o.createElement(a, {
+    ...p
+  }));
+};
+m.defaultProps = {
+  col: void 0,
+  s: void 0,
+  xs: void 0
+};
+m.propTypes = {
+  col: e.number,
+  s: e.number,
+  xs: e.number
+};
+export {
+  m 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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),n=require("../Box/Box.cjs"),u=require("styled-components"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=r(s),l=r(a),d=r(u),p=d.default(n.Box)`
+  path {
+    fill: ${({color:e,theme:t})=>t.colors[e]};
+  }
+  ${({theme:e,colors:t})=>t(e)}
+`,o=c.default.forwardRef((e,t)=>c.default.createElement(p,{ref:t,...e}));o.displayName="Icon";o.defaultProps={color:"neutral600",colors:()=>{}};o.propTypes={color:l.default.string,colors:l.default.func};exports.Icon=o;

package/dist/Icon/Icon.js

@@ -0,0 +1,26 @@
+import e from "react";
+import p from "prop-types";
+import { Box as c } from "../Box/Box.js";
+import l from "styled-components";
+const s = l(c)`
+  path {
+    fill: ${({ color: o, theme: r }) => r.colors[o]};
+  }
+  ${({ theme: o, colors: r }) => r(o)}
+`, t = e.forwardRef((o, r) => /* @__PURE__ */ e.createElement(s, {
+  ref: r,
+  ...o
+}));
+t.displayName = "Icon";
+t.defaultProps = {
+  color: "neutral600",
+  colors: () => {
+  }
+};
+t.propTypes = {
+  color: p.string,
+  colors: p.func
+};
+export {
+  t 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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),B=require("prop-types"),m=require("styled-components"),E=require("../Tooltip/Tooltip.cjs"),T=require("../BaseButton/BaseButton.cjs"),_=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=c(u),a=c(B),y=c(m),d=y.default(T.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}
+`,j=y.default(_.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`};
+  }
+
+  & ${d} {
+    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};
+        }
+      }
+    }
+  }
+`,i=o.default.forwardRef(({label:e,noBorder:n,children:l,icon:t,disabled:r,onClick:f,["aria-label"]:h,...p},b)=>{const $=v=>{!r&&f&&f(v)};return e?o.default.createElement(E.Tooltip,{label:e},o.default.createElement(d,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},o.default.createElement(g.VisuallyHidden,{as:"span"},e),u.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))):o.default.createElement(d,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},o.default.createElement(g.VisuallyHidden,{as:"span"},h),u.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))});i.displayName="IconButton";i.defaultProps={label:void 0,noBorder:!1,disabled:!1,onClick:void 0};const s=(e,n)=>(l,t)=>{if(!l[t]&&e.every(r=>!l[r]))return new Error(`One of the following props is required: ${t}, ${e.join(", ")}`);a.default.checkPropTypes({[t]:a.default[n]},l,"prop","IconButton")};i.propTypes={["aria-label"]:s(["label"],"string"),children:s(["icon"],"node"),disabled:a.default.bool,icon:s(["children"],"node"),label:s(["aria-label"],"string"),noBorder:a.default.bool,onClick:a.default.func};exports.IconButton=i;exports.IconButtonGroup=j;