@strapi/design-system 1.4.2 → 1.5.0-alpha.0

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,145 +1,111 @@
-var G = Object.defineProperty;
-var g = Object.getOwnPropertySymbols;
-var M = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
-var H = (t, r, i) => r in t ? G(t, r, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[r] = i, y = (t, r) => {
-  for (var i in r || (r = {}))
-    M.call(r, i) && H(t, i, r[i]);
-  if (g)
-    for (var i of g(r))
-      w.call(r, i) && H(t, i, r[i]);
-  return t;
-};
-var F = (t, r) => {
-  var i = {};
-  for (var a in t)
-    M.call(t, a) && r.indexOf(a) < 0 && (i[a] = t[a]);
-  if (t != null && g)
-    for (var a of g(t))
-      r.indexOf(a) < 0 && w.call(t, a) && (i[a] = t[a]);
-  return i;
-};
-import n, { useState as h, useEffect as J } from "react";
-import { Stack as V } from "../Stack/Stack.js";
-import { DatePicker as K } from "../DatePicker/DatePicker.js";
-import { TimePicker as N } from "../TimePicker/TimePicker.js";
-import { Field as O } from "../Field/Field.js";
-import { FieldLabel as Q } from "../Field/FieldLabel.js";
+import r, { useState as P, useEffect as C } from "react";
+import { Stack as S } from "../Stack/Stack.js";
+import { DatePicker as L } from "../DatePicker/DatePicker.js";
+import { TimePicker as R } from "../TimePicker/TimePicker.js";
+import { Field as j } from "../Field/Field.js";
+import { FieldLabel as z } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as U } from "../Field/FieldHint.js";
-import { FieldError as W } from "../Field/FieldError.js";
+import { FieldHint as A } from "../Field/FieldHint.js";
+import { FieldError as B } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as I } from "../helpers/useId.js";
-import { parseDate as _ } from "./parseDate.js";
-import { dateTimePickerDefaultProps as X, dateTimePickerPropTypes as Y } from "./DateTimePickerProps.js";
-const b = (Z) => {
-  var P = Z, {
-    ariaLabel: t,
-    clearLabel: r,
-    disabled: i,
-    error: a,
-    hint: v,
-    label: f,
-    labelAction: x,
-    onChange: m,
-    onClear: T,
-    name: k,
-    required: E,
-    selectButtonTitle: C,
-    size: $,
-    step: L,
-    value: d
-  } = P, u = F(P, [
-    "ariaLabel",
-    "clearLabel",
-    "disabled",
-    "error",
-    "hint",
-    "label",
-    "labelAction",
-    "onChange",
-    "onClear",
-    "name",
-    "required",
-    "selectButtonTitle",
-    "size",
-    "step",
-    "value"
-  ]);
-  const c = _(d), [s, p] = h(c), [D, l] = h(
-    c ? `${c.getHours()}:${c.getMinutes()}:${c.getSeconds()}` : null
-  ), R = (e) => {
-    p(e);
-    let o;
-    D ? (o = new Date(e), o.setHours(D.split(":")[0]), o.setMinutes(D.split(":")[1])) : (o = new Date(e), l(`${o.getHours()}:${o.getMinutes()}:${o.getSeconds()}`)), m && m(o);
-  }, j = (e) => {
-    l(e);
-    const o = s ? new Date(s) : new Date();
-    o.setHours(e.split(":")[0]), o.setMinutes(e.split(":")[1]), s || p(o), m && m(o);
-  }, z = () => {
-    p(void 0), l(void 0), T();
-  }, A = () => {
-    l(void 0);
+import { useId as H } from "../helpers/useId.js";
+import { parseDate as M } from "./parseDate.js";
+import { dateTimePickerDefaultProps as G, dateTimePickerPropTypes as J } from "./DateTimePickerProps.js";
+const w = ({
+  ariaLabel: D,
+  clearLabel: g,
+  disabled: T,
+  error: c,
+  hint: y,
+  label: d,
+  labelAction: F,
+  onChange: o,
+  onClear: p,
+  name: E,
+  required: f,
+  selectButtonTitle: h,
+  size: k,
+  step: V,
+  value: a,
+  ...$
+}) => {
+  const n = M(a), [i, m] = P(n), [l, s] = P(
+    n ? `${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}` : null
+  ), I = (e) => {
+    m(e);
+    let t;
+    l ? (t = new Date(e), t.setHours(l.split(":")[0]), t.setMinutes(l.split(":")[1])) : (t = new Date(e), s(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)), o && o(t);
+  }, _ = (e) => {
+    s(e);
+    const t = i ? new Date(i) : new Date();
+    t.setHours(e.split(":")[0]), t.setMinutes(e.split(":")[1]), i || m(t), o && o(t);
+  }, b = () => {
+    m(void 0), s(void 0), p();
+  }, v = () => {
+    s(void 0);
     let e;
-    s && (e = new Date(s), e.setHours("00"), e.setMinutes("00")), m && m(e);
+    i && (e = new Date(i), e.setHours("00"), e.setMinutes("00")), o && o(e);
   };
-  J(() => {
-    if (d && +d != +s) {
-      const e = _(d);
-      p(e), l(
+  C(() => {
+    if (a && +a != +i) {
+      const e = M(a);
+      m(e), s(
         e ? `${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}` : null
       );
     } else
-      d || (p(void 0), l(void 0));
-  }, [d, s]);
-  const S = I("datetime-label", u == null ? void 0 : u.id), B = I("datetimepicker");
-  return /* @__PURE__ */ n.createElement(O, {
-    name: k,
+      a || (m(void 0), s(void 0));
+  }, [a, i]);
+  const u = H("datetime-label", $?.id), x = H("datetimepicker");
+  return /* @__PURE__ */ r.createElement(j, {
+    name: E,
     role: "group",
-    id: S,
-    "aria-labelledby": S,
-    hint: v,
-    error: a,
-    required: E
-  }, /* @__PURE__ */ n.createElement(V, {
+    id: u,
+    "aria-labelledby": u,
+    hint: y,
+    error: c,
+    required: f
+  }, /* @__PURE__ */ r.createElement(S, {
     spacing: 1
-  }, f && /* @__PURE__ */ n.createElement(Q, {
-    action: x
-  }, f), /* @__PURE__ */ n.createElement(V, {
+  }, d && /* @__PURE__ */ r.createElement(z, {
+    action: F
+  }, d), /* @__PURE__ */ r.createElement(S, {
     horizontal: !0,
     spacing: 2
-  }, /* @__PURE__ */ n.createElement(K, y({
+  }, /* @__PURE__ */ r.createElement(L, {
     "data-testid": "datetimepicker-date",
-    name: k,
-    ariaLabel: f || t,
-    error: typeof a == "string",
-    selectedDate: s,
+    id: u,
+    name: E,
+    ariaLabel: d || D,
+    error: typeof c == "string",
+    selectedDate: i,
     selectedDateLabel: (e) => `Date picker, current is ${e}`,
-    onChange: R,
-    required: E,
-    size: $,
-    onClear: T && z,
-    clearLabel: r,
-    disabled: i
-  }, u)), /* @__PURE__ */ n.createElement(N, {
+    onChange: I,
+    required: f,
+    size: k,
+    onClear: p && b,
+    clearLabel: g,
+    disabled: T,
+    ...$
+  }), /* @__PURE__ */ r.createElement(R, {
     "data-testid": "datetimepicker-time",
-    size: $,
-    "aria-label": f || t,
-    error: typeof a == "string",
-    value: D,
-    onChange: j,
-    onClear: T && A,
-    clearLabel: r,
-    required: E,
-    selectButtonTitle: C,
-    disabled: i,
-    step: L
-  })), /* @__PURE__ */ n.createElement(U, null), /* @__PURE__ */ n.createElement(W, {
-    id: B
+    size: k,
+    "aria-label": d || D,
+    error: typeof c == "string",
+    value: l,
+    onChange: _,
+    onClear: p && v,
+    clearLabel: g,
+    required: f,
+    selectButtonTitle: h,
+    disabled: T,
+    step: V
+  })), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(B, {
+    id: x
   })));
 };
-b.defaultProps = X;
-b.propTypes = Y;
+w.defaultProps = G;
+w.propTypes = J;
 export {
-  b as DateTimePicker
+  w as DateTimePicker
 };

package/dist/DateTimePicker/DateTimePickerProps.cjs

@@ -1 +1 @@
-"use strict";var f=Object.defineProperty;var i=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var o=(t,a,l)=>a in t?f(t,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[a]=l,d=(t,a)=>{for(var l in a||(a={}))c.call(a,l)&&o(t,l,a[l]);if(i)for(var l of i(a))p.call(a,l)&&o(t,l,a[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),P=require("prop-types"),u=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},T=u(b),e=u(P),r=t=>T.default.createElement("div",d({},t)),s={ariaLabel:void 0,clearLabel:"clear",disabled:!1,error:void 0,hint:void 0,label:void 0,labelAction:void 0,onClear:void 0,required:!1,selectButtonTitle:"select",size:"M",step:1,value:void 0},n={ariaLabel:e.default.string,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(["S","M"]),step:e.default.number,value:e.default.instanceOf(Date)};r.defaultProps=s;r.propTypes=n;exports.DateTimePickerProps=r;exports.dateTimePickerDefaultProps=s;exports.dateTimePickerPropTypes=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),d=require("prop-types"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},u=l(o),e=l(d),a=t=>u.default.createElement("div",{...t}),r={ariaLabel:void 0,clearLabel:"clear",disabled:!1,error:void 0,hint:void 0,label:void 0,labelAction:void 0,onClear:void 0,required:!1,selectButtonTitle:"select",size:"M",step:1,value:void 0},i={ariaLabel:e.default.string,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(["S","M"]),step:e.default.number,value:e.default.instanceOf(Date)};a.defaultProps=r;a.propTypes=i;exports.DateTimePickerProps=a;exports.dateTimePickerDefaultProps=r;exports.dateTimePickerPropTypes=i;

package/dist/DateTimePicker/DateTimePickerProps.js

@@ -1,17 +1,8 @@
-var s = Object.defineProperty;
-var o = Object.getOwnPropertySymbols;
-var d = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
-var l = (t, i, r) => i in t ? s(t, i, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[i] = r, a = (t, i) => {
-  for (var r in i || (i = {}))
-    d.call(i, r) && l(t, r, i[r]);
-  if (o)
-    for (var r of o(i))
-      c.call(i, r) && l(t, r, i[r]);
-  return t;
-};
-import p from "react";
+import t from "react";
 import e from "prop-types";
-const n = (t) => /* @__PURE__ */ p.createElement("div", a({}, t)), b = {
+const i = (r) => /* @__PURE__ */ t.createElement("div", {
+  ...r
+}), o = {
   ariaLabel: void 0,
   clearLabel: "clear",
   disabled: !1,
@@ -25,7 +16,7 @@ const n = (t) => /* @__PURE__ */ p.createElement("div", a({}, t)), b = {
   size: "M",
   step: 1,
   value: void 0
-}, u = {
+}, l = {
   ariaLabel: e.string,
   clearLabel: e.string,
   disabled: e.bool,
@@ -42,10 +33,10 @@ const n = (t) => /* @__PURE__ */ p.createElement("div", a({}, t)), b = {
   step: e.number,
   value: e.instanceOf(Date)
 };
-n.defaultProps = b;
-n.propTypes = u;
+i.defaultProps = o;
+i.propTypes = l;
 export {
-  n as DateTimePickerProps,
-  b as dateTimePickerDefaultProps,
-  u as dateTimePickerPropTypes
+  i as DateTimePickerProps,
+  o as dateTimePickerDefaultProps,
+  l as dateTimePickerPropTypes
 };

package/dist/Dialog/Dialog.cjs

@@ -1,14 +1,14 @@
-"use strict";var D=Object.defineProperty;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,a,t)=>a in e?D(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,g=(e,a)=>{for(var t in a||(a={}))f.call(a,t)&&p(e,t,a[t]);if(s)for(var t of s(a))y.call(a,t)&&p(e,t,a[t]);return e};var m=(e,a)=>{var t={};for(var r in e)f.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))a.indexOf(r)<0&&y.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("prop-types"),j=require("react"),E=require("styled-components"),b=require("../Box/Box.cjs"),P=require("../FocusTrap/FocusTrap.cjs"),_=require("../Portal/Portal.cjs"),F=require("../Flex/Flex.cjs"),L=require("../Typography/Typography.cjs"),v=require("../DismissibleLayer/DismissibleLayer.cjs"),w=require("../helpers/setOpacity.cjs"),B=require("../helpers/useLockScroll.cjs"),O=require("../helpers/useId.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=u(T),o=u(j),n=u(E),R=n.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("prop-types"),g=require("react"),m=require("styled-components"),u=require("../Box/Box.cjs"),b=require("../FocusTrap/FocusTrap.cjs"),q=require("../Portal/Portal.cjs"),h=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),D=require("../DismissibleLayer/DismissibleLayer.cjs"),T=require("../helpers/setOpacity.cjs"),j=require("../helpers/useLockScroll.cjs"),E=require("../helpers/useId.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(y),t=o(g),l=o(m),P=l.default.div`
   position: fixed;
   z-index: 4;
   inset: 0;
-  background: ${({theme:e})=>w.setOpacity(e.colors.neutral800,.2)};
+  background: ${({theme:e})=>T.setOpacity(e.colors.neutral800,.2)};
   padding: 0 ${({theme:e})=>e.spaces[8]};
-`,S=n.default(b.Box)`
+`,_=l.default(u.Box)`
   max-width: ${412/16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`,$=n.default(F.Flex)`
+`,F=l.default(h.Flex)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,i=k=>{var d=k,{onClose:e,title:a,as:t,isOpen:r,id:q}=d,h=m(d,["onClose","title","as","isOpen","id"]);const x=O.useId("dialog",q);if(B(r),!r)return null;const c=`${x}-label`;return o.default.createElement(_.Portal,null,o.default.createElement(R,null,o.default.createElement(P.FocusTrap,null,o.default.createElement(v.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},o.default.createElement(S,{"aria-labelledby":c,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},o.default.createElement($,{padding:6,justifyContent:"center"},o.default.createElement(L.Typography,{variant:"beta",as:t||"h2",id:c},a)),o.default.createElement(b.Box,g({},h)))))))};i.displayName="Dialog";i.defaultProps={as:"h2",id:void 0};i.propTypes={as:l.default.string,id:l.default.oneOfType([l.default.string,l.default.number]),isOpen:l.default.bool.isRequired,onClose:l.default.func.isRequired,title:l.default.string.isRequired};exports.Dialog=i;
+`,r=({onClose:e,title:n,as:d,isOpen:s,id:c,...p})=>{const f=E.useId("dialog",c);if(j(s),!s)return null;const i=`${f}-label`;return t.default.createElement(q.Portal,null,t.default.createElement(P,null,t.default.createElement(b.FocusTrap,null,t.default.createElement(D.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(_,{"aria-labelledby":i,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},t.default.createElement(F,{padding:6,justifyContent:"center"},t.default.createElement(x.Typography,{variant:"beta",as:d||"h2",id:i},n)),t.default.createElement(u.Box,{...p}))))))};r.displayName="Dialog";r.defaultProps={as:"h2",id:void 0};r.propTypes={as:a.default.string,id:a.default.oneOfType([a.default.string,a.default.number]),isOpen:a.default.bool.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired};exports.Dialog=r;

package/dist/Dialog/Dialog.js

@@ -1,85 +1,66 @@
-var D = Object.defineProperty;
-var l = Object.getOwnPropertySymbols;
-var u = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
-var p = (e, r, o) => r in e ? D(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
-  for (var o in r || (r = {}))
-    u.call(r, o) && p(e, o, r[o]);
-  if (l)
-    for (var o of l(r))
-      c.call(r, o) && p(e, o, r[o]);
-  return e;
-};
-var g = (e, r) => {
-  var o = {};
-  for (var t in e)
-    u.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
-  if (e != null && l)
-    for (var t of l(e))
-      r.indexOf(t) < 0 && c.call(e, t) && (o[t] = e[t]);
-  return o;
-};
-import i from "prop-types";
-import a from "react";
-import n from "styled-components";
-import { Box as y } from "../Box/Box.js";
-import { FocusTrap as x } from "../FocusTrap/FocusTrap.js";
-import { Portal as w } from "../Portal/Portal.js";
-import { Flex as R } from "../Flex/Flex.js";
-import { Typography as T } from "../Typography/Typography.js";
-import { DismissibleLayer as $ } from "../DismissibleLayer/DismissibleLayer.js";
-import { setOpacity as v } from "../helpers/setOpacity.js";
-import P from "../helpers/useLockScroll.js";
-import { useId as k } from "../helpers/useId.js";
-const q = n.div`
+import r from "prop-types";
+import o from "react";
+import t from "styled-components";
+import { Box as n } from "../Box/Box.js";
+import { FocusTrap as c } from "../FocusTrap/FocusTrap.js";
+import { Portal as f } from "../Portal/Portal.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { Typography as y } from "../Typography/Typography.js";
+import { DismissibleLayer as b } from "../DismissibleLayer/DismissibleLayer.js";
+import { setOpacity as E } from "../helpers/setOpacity.js";
+import h from "../helpers/useLockScroll.js";
+import { useId as D } from "../helpers/useId.js";
+const x = t.div`
   position: fixed;
   z-index: 4;
   inset: 0;
-  background: ${({ theme: e }) => v(e.colors.neutral800, 0.2)};
+  background: ${({ theme: e }) => E(e.colors.neutral800, 0.2)};
   padding: 0 ${({ theme: e }) => e.spaces[8]};
-`, O = n(y)`
+`, w = t(n)`
   max-width: ${412 / 16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`, B = n(R)`
+`, R = t(g)`
   border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, m = (C) => {
-  var s = C, { onClose: e, title: r, as: o, isOpen: t, id: b } = s, E = g(s, ["onClose", "title", "as", "isOpen", "id"]);
-  const h = k("dialog", b);
-  if (P(t), !t)
+`, a = ({ onClose: e, title: m, as: s, isOpen: i, id: d, ...p }) => {
+  const u = D("dialog", d);
+  if (h(i), !i)
     return null;
-  const d = `${h}-label`;
-  return /* @__PURE__ */ a.createElement(w, null, /* @__PURE__ */ a.createElement(q, null, /* @__PURE__ */ a.createElement(x, null, /* @__PURE__ */ a.createElement($, {
+  const l = `${u}-label`;
+  return /* @__PURE__ */ o.createElement(f, null, /* @__PURE__ */ o.createElement(x, null, /* @__PURE__ */ o.createElement(c, null, /* @__PURE__ */ o.createElement(b, {
     onEscapeKeyDown: e,
     onPointerDownOutside: e
-  }, /* @__PURE__ */ a.createElement(O, {
-    "aria-labelledby": d,
+  }, /* @__PURE__ */ o.createElement(w, {
+    "aria-labelledby": l,
     "aria-modal": !0,
     background: "neutral0",
     hasRadius: !0,
     shadow: "popupShadow",
     role: "dialog"
-  }, /* @__PURE__ */ a.createElement(B, {
+  }, /* @__PURE__ */ o.createElement(R, {
     padding: 6,
     justifyContent: "center"
-  }, /* @__PURE__ */ a.createElement(T, {
+  }, /* @__PURE__ */ o.createElement(y, {
     variant: "beta",
-    as: o || "h2",
-    id: d
-  }, r)), /* @__PURE__ */ a.createElement(y, f({}, E)))))));
+    as: s || "h2",
+    id: l
+  }, m)), /* @__PURE__ */ o.createElement(n, {
+    ...p
+  }))))));
 };
-m.displayName = "Dialog";
-m.defaultProps = {
+a.displayName = "Dialog";
+a.defaultProps = {
   as: "h2",
   id: void 0
 };
-m.propTypes = {
-  as: i.string,
-  id: i.oneOfType([i.string, i.number]),
-  isOpen: i.bool.isRequired,
-  onClose: i.func.isRequired,
-  title: i.string.isRequired
+a.propTypes = {
+  as: r.string,
+  id: r.oneOfType([r.string, r.number]),
+  isOpen: r.bool.isRequired,
+  onClose: r.func.isRequired,
+  title: r.string.isRequired
 };
 export {
-  m as Dialog
+  a as Dialog
 };

package/dist/Divider/Divider.cjs

@@ -1,5 +1,7 @@
-"use strict";var g=Object.defineProperty,y=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var u=(e,t,r)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&u(e,r,t[r]);if(n)for(var r of n(t))d.call(t,r)&&u(e,r,t[r]);return e},i=(e,t)=>y(e,_(t));var p=(e,t)=>{var r={};for(var o in e)c.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&d.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),v=require("prop-types"),x=require("styled-components"),m=require("../Box/Box.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},q=s(b),f=s(v),B=s(x),D=B.default(m.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),s=require("prop-types"),i=require("styled-components"),u=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=t(a),o=t(s),l=t(i),c=l.default(u.Box)`
   height: 1px;
   border: none;
+  /* If contained in a Flex parent we want to prevent the Divider to shink */
+  flex-shrink: 0;
   ${({unsetMargin:e})=>e?"margin: 0;":""}
-`,a=r=>{var o=r,{unsetMargin:e}=o,t=p(o,["unsetMargin"]);return q.default.createElement(D,i(l({},t),{as:"hr",unsetMargin:e}))};a.defaultProps={background:"neutral150",unsetMargin:!0};a.propTypes={background:f.default.string,unsetMargin:f.default.bool};exports.Divider=a;
+`,r=({unsetMargin:e,...n})=>d.default.createElement(c,{...n,as:"hr",unsetMargin:e});r.defaultProps={background:"neutral150",unsetMargin:!0};r.propTypes={background:o.default.string,unsetMargin:o.default.bool};exports.Divider=r;

package/dist/Divider/Divider.js

@@ -1,47 +1,26 @@
-var c = Object.defineProperty, f = Object.defineProperties;
-var l = Object.getOwnPropertyDescriptors;
-var n = Object.getOwnPropertySymbols;
-var i = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
-var p = (r, e, o) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, m = (r, e) => {
-  for (var o in e || (e = {}))
-    i.call(e, o) && p(r, o, e[o]);
-  if (n)
-    for (var o of n(e))
-      a.call(e, o) && p(r, o, e[o]);
-  return r;
-}, s = (r, e) => f(r, l(e));
-var d = (r, e) => {
-  var o = {};
-  for (var t in r)
-    i.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
-  if (r != null && n)
-    for (var t of n(r))
-      e.indexOf(t) < 0 && a.call(r, t) && (o[t] = r[t]);
-  return o;
-};
-import b from "react";
-import u from "prop-types";
-import h from "styled-components";
-import { Box as x } from "../Box/Box.js";
-const y = h(x)`
+import n from "react";
+import e from "prop-types";
+import i from "styled-components";
+import { Box as a } from "../Box/Box.js";
+const p = i(a)`
   height: 1px;
   border: none;
+  /* If contained in a Flex parent we want to prevent the Divider to shink */
+  flex-shrink: 0;
   ${({ unsetMargin: r }) => r ? "margin: 0;" : ""}
-`, g = (o) => {
-  var t = o, { unsetMargin: r } = t, e = d(t, ["unsetMargin"]);
-  return /* @__PURE__ */ b.createElement(y, s(m({}, e), {
-    as: "hr",
-    unsetMargin: r
-  }));
-};
-g.defaultProps = {
+`, t = ({ unsetMargin: r, ...o }) => /* @__PURE__ */ n.createElement(p, {
+  ...o,
+  as: "hr",
+  unsetMargin: r
+});
+t.defaultProps = {
   background: "neutral150",
   unsetMargin: !0
 };
-g.propTypes = {
-  background: u.string,
-  unsetMargin: u.bool
+t.propTypes = {
+  background: e.string,
+  unsetMargin: e.bool
 };
 export {
-  g as Divider
+  t as Divider
 };

package/dist/Field/Field.cjs

@@ -1 +1 @@
-"use strict";var _=Object.defineProperty;var l=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var i=(e,d,t)=>d in e?_(e,d,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[d]=t,s=(e,d)=>{for(var t in d||(d={}))n.call(d,t)&&i(e,t,d[t]);if(l)for(var t of l(d))f.call(d,t)&&i(e,t,d[t]);return e};var c=(e,d)=>{var t={};for(var o in e)n.call(e,o)&&d.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))d.indexOf(o)<0&&f.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),m=require("prop-types"),F=require("./FieldContext.cjs"),O=require("../helpers/useId.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=y(b),r=y(m),u=P=>{var a=P,{children:e,name:d,error:t,hint:o,id:v,required:g}=a,q=c(a,["children","name","error","hint","id","required"]);const T=O.useId("field",v);return p.default.createElement("div",s({},q),p.default.createElement(F.FieldContext.Provider,{value:{name:d,id:T,error:t,hint:o,required:g}},e))};u.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0,required:!1};u.propTypes={children:r.default.node.isRequired,error:r.default.oneOfType([r.default.string,r.default.bool]),hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.oneOfType([r.default.string,r.default.number]),name:r.default.string,required:r.default.bool};exports.Field=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),p=require("prop-types"),y=require("./FieldContext.cjs"),v=require("../helpers/useId.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(c),e=o(p),d=({children:t,name:l,error:u,hint:a,id:i,required:n,...f})=>{const s=v.useId("field",i);return r.default.createElement("div",{...f},r.default.createElement(y.FieldContext.Provider,{value:{name:l,id:s,error:u,hint:a,required:n}},t))};d.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0,required:!1};d.propTypes={children:e.default.node.isRequired,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),name:e.default.string,required:e.default.bool};exports.Field=d;

package/dist/Field/Field.js

@@ -1,49 +1,30 @@
-var T = Object.defineProperty;
-var t = Object.getOwnPropertySymbols;
-var m = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
-var p = (e, o, r) => o in e ? T(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, f = (e, o) => {
-  for (var r in o || (o = {}))
-    m.call(o, r) && p(e, r, o[r]);
-  if (t)
-    for (var r of t(o))
-      a.call(o, r) && p(e, r, o[r]);
-  return e;
+import r from "react";
+import e from "prop-types";
+import { FieldContext as l } from "./FieldContext.js";
+import { useId as s } from "../helpers/useId.js";
+const o = ({ children: i, name: d, error: t, hint: n, id: p, required: m, ...a }) => {
+  const f = s("field", p);
+  return /* @__PURE__ */ r.createElement("div", {
+    ...a
+  }, /* @__PURE__ */ r.createElement(l.Provider, {
+    value: { name: d, id: f, error: t, hint: n, required: m }
+  }, i));
 };
-var l = (e, o) => {
-  var r = {};
-  for (var d in e)
-    m.call(e, d) && o.indexOf(d) < 0 && (r[d] = e[d]);
-  if (e != null && t)
-    for (var d of t(e))
-      o.indexOf(d) < 0 && a.call(e, d) && (r[d] = e[d]);
-  return r;
-};
-import s from "react";
-import i from "prop-types";
-import { FieldContext as O } from "./FieldContext.js";
-import { useId as b } from "../helpers/useId.js";
-const u = (h) => {
-  var n = h, { children: e, name: o, error: r, hint: d, id: v, required: c } = n, y = l(n, ["children", "name", "error", "hint", "id", "required"]);
-  const g = b("field", v);
-  return /* @__PURE__ */ s.createElement("div", f({}, y), /* @__PURE__ */ s.createElement(O.Provider, {
-    value: { name: o, id: g, error: r, hint: d, required: c }
-  }, e));
-};
-u.defaultProps = {
+o.defaultProps = {
   error: void 0,
   hint: void 0,
   id: void 0,
   name: void 0,
   required: !1
 };
-u.propTypes = {
-  children: i.node.isRequired,
-  error: i.oneOfType([i.string, i.bool]),
-  hint: i.oneOfType([i.string, i.node, i.arrayOf(i.node)]),
-  id: i.oneOfType([i.string, i.number]),
-  name: i.string,
-  required: i.bool
+o.propTypes = {
+  children: e.node.isRequired,
+  error: e.oneOfType([e.string, e.bool]),
+  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  id: e.oneOfType([e.string, e.number]),
+  name: e.string,
+  required: e.bool
 };
 export {
-  u as Field
+  o as Field
 };

package/dist/Field/FieldAction.cjs

@@ -1,4 +1,4 @@
-"use strict";var y=Object.defineProperty;var r=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;var l=(e,o,t)=>o in e?y(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,u=(e,o)=>{for(var t in o||(o={}))d.call(o,t)&&l(e,t,o[t]);if(r)for(var t of r(o))i.call(o,t)&&l(e,t,o[t]);return e};var c=(e,o)=>{var t={};for(var n in e)d.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&r)for(var n of r(e))o.indexOf(n)<0&&i.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),_=require("styled-components"),g=require("prop-types"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=a(b),h=a(_),p=a(g),q=h.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),l=require("styled-components"),d=require("prop-types"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=t(s),u=t(l),o=t(d),c=u.default.button`
   border: none;
   background: transparent;
   // TODO: Make sure to use the theme when it's ready
@@ -7,4 +7,4 @@
   padding: 0;
   display: flex;
   align-items: center;
-`,f=n=>{var s=n,{label:e,children:o}=s,t=c(s,["label","children"]);return m.default.createElement(q,u({"aria-label":e,type:"button"},t),o)};f.propTypes={children:p.default.node.isRequired,label:p.default.string.isRequired};exports.FieldAction=f;
+`,n=({label:e,children:r,...a})=>i.default.createElement(c,{"aria-label":e,type:"button",...a},r);n.propTypes={children:o.default.node.isRequired,label:o.default.string.isRequired};exports.FieldAction=n;