@strapi/design-system 1.4.0-beta.2 → 1.4.1

package/dist/TimePicker/TimePicker.js

@@ -1,35 +1,35 @@
-var _ = Object.defineProperty;
-var u = Object.getOwnPropertySymbols;
+var j = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
 var g = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
-var b = (t, o, r) => o in t ? _(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, v = (t, o) => {
+var h = (t, o, r) => o in t ? j(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, v = (t, o) => {
   for (var r in o || (o = {}))
-    g.call(o, r) && b(t, r, o[r]);
-  if (u)
-    for (var r of u(o))
-      y.call(o, r) && b(t, r, o[r]);
+    g.call(o, r) && h(t, r, o[r]);
+  if (p)
+    for (var r of p(o))
+      y.call(o, r) && h(t, r, o[r]);
   return t;
 };
 var T = (t, o) => {
   var r = {};
-  for (var n in t)
-    g.call(t, n) && o.indexOf(n) < 0 && (r[n] = t[n]);
-  if (t != null && u)
-    for (var n of u(t))
-      o.indexOf(n) < 0 && y.call(t, n) && (r[n] = t[n]);
+  for (var s in t)
+    g.call(t, s) && o.indexOf(s) < 0 && (r[s] = t[s]);
+  if (t != null && p)
+    for (var s of p(t))
+      o.indexOf(s) < 0 && y.call(t, s) && (r[s] = t[s]);
   return r;
 };
 import m from "react";
 import e from "prop-types";
-import j from "@strapi/icons/Clock";
-import H from "styled-components";
-import { sizes as L } from "../themes/sizes.js";
-import { Select as S } from "../Select/Select.js";
-import { Option as V } from "../Select/Option.js";
+import H from "@strapi/icons/Clock";
+import L from "styled-components";
+import { sizes as S } from "../themes/sizes.js";
+import { Select as V } from "../Select/Select.js";
+import { Option as W } from "../Select/Option.js";
 import "../Select/OptGroup.js";
 import "../Select/MultiSelectNested.js";
 import "../Select/SelectList.js";
-import { useId as W } from "../helpers/useId.js";
-const A = H.div`
+import { useId as A } from "../helpers/useId.js";
+const D = L.div`
   display: flex;
   align-items: center;
   svg {
@@ -40,17 +40,18 @@ const A = H.div`
   svg path {
     fill: ${({ theme: t }) => t.colors.neutral500};
   }
-`, O = (D) => {
-  var f = D, {
+`, O = (F) => {
+  var f = F, {
     disabled: t,
     error: o,
     hint: r,
-    id: n,
+    id: s,
     onClear: $,
     onChange: C,
     value: c,
     clearLabel: M,
     label: k,
+    required: q,
     selectButtonTitle: E,
     step: I,
     size: z
@@ -64,26 +65,27 @@ const A = H.div`
     "value",
     "clearLabel",
     "label",
+    "required",
     "selectButtonTitle",
     "step",
     "size"
   ]);
-  const R = W("timepicker", n), q = 24, s = [];
+  const R = A("timepicker", s), w = 24, n = [];
   let l = 0;
-  for (let i = 0; i < q; i++)
+  for (let i = 0; i < w; i++)
     for (l = 0; l < 60; )
-      s.push(`${i < 10 ? `0${i}` : i}:${l < 10 ? `0${l}` : l}`), l += I;
-  const w = () => {
-    const i = c.split(":")[0], h = c.split(":")[1], x = s.reduce((a, d) => {
-      const p = d.split(":")[0];
-      return Math.abs(p - i) < Math.abs(a - i) ? p : a;
-    }, s[0].split(":")[0]), B = s.reduce((a, d) => {
-      const p = d.split(":")[1];
-      return Math.abs(p - h) < Math.abs(a - h) ? p : a;
-    }, s[0].split(":")[1]);
-    return `${x}:${B}`;
+      n.push(`${i < 10 ? `0${i}` : i}:${l < 10 ? `0${l}` : l}`), l += I;
+  const x = () => {
+    const i = c.split(":")[0], b = c.split(":")[1], B = n.reduce((a, d) => {
+      const u = d.split(":")[0];
+      return Math.abs(u - i) < Math.abs(a - i) ? u : a;
+    }, n[0].split(":")[0]), _ = n.reduce((a, d) => {
+      const u = d.split(":")[1];
+      return Math.abs(u - b) < Math.abs(a - b) ? u : a;
+    }, n[0].split(":")[1]);
+    return `${B}:${_}`;
   };
-  return /* @__PURE__ */ m.createElement(S, v({
+  return /* @__PURE__ */ m.createElement(V, v({
     id: R,
     label: k,
     placeholder: "--:--",
@@ -91,13 +93,14 @@ const A = H.div`
     onClear: $,
     clearLabel: M,
     error: o,
-    value: c ? w() : null,
+    value: c ? x() : null,
     size: z,
     onChange: C,
     disabled: t,
+    required: q,
     selectButtonTitle: E,
-    startIcon: /* @__PURE__ */ m.createElement(A, null, /* @__PURE__ */ m.createElement(j, null))
-  }, P), s.map((i) => /* @__PURE__ */ m.createElement(V, {
+    startIcon: /* @__PURE__ */ m.createElement(D, null, /* @__PURE__ */ m.createElement(H, null))
+  }, P), n.map((i) => /* @__PURE__ */ m.createElement(W, {
     value: i,
     key: i
   }, i)));
@@ -109,6 +112,7 @@ O.defaultProps = {
   id: void 0,
   label: void 0,
   onClear: void 0,
+  required: !1,
   size: "M",
   selectButtonTitle: void 0,
   step: 15,
@@ -123,8 +127,9 @@ O.propTypes = {
   label: e.string,
   onChange: e.func.isRequired,
   onClear: e.func,
+  required: e.bool,
   selectButtonTitle: e.string,
-  size: e.oneOf(Object.keys(L.input)),
+  size: e.oneOf(Object.keys(S.input)),
   step: e.number,
   value: e.oneOfType([
     e.arrayOf(e.oneOfType([e.string, e.number])),

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -1,16 +1,16 @@
-"use strict";var E=Object.defineProperty,L=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var h=(e,t,l)=>t in e?E(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,b=(e,t)=>{for(var l in t||(t={}))y.call(t,l)&&h(e,l,t[l]);if(i)for(var l of i(t))x.call(t,l)&&h(e,l,t[l]);return e},C=(e,t)=>L(e,$(t));var m=(e,t)=>{var l={};for(var o in e)y.call(e,o)&&t.indexOf(o)<0&&(l[o]=e[o]);if(e!=null&&i)for(var o of i(e))t.indexOf(o)<0&&x.call(e,o)&&(l[o]=e[o]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("react"),B=require("prop-types"),S=require("styled-components"),F=require("../themes/sizes.cjs"),V=require("../themes/utils.cjs"),T=require("../Typography/Typography.cjs"),W=require("../VisuallyHidden/VisuallyHidden.cjs"),H=require("../Box/Box.cjs"),M=require("../Flex/Flex.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=p(z),u=p(B),s=p(S),P=s.default.label`
+"use strict";var E=Object.defineProperty,$=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var h=(e,t,l)=>t in e?E(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,b=(e,t)=>{for(var l in t||(t={}))x.call(t,l)&&h(e,l,t[l]);if(u)for(var l of u(t))y.call(t,l)&&h(e,l,t[l]);return e},C=(e,t)=>$(e,z(t));var q=(e,t)=>{var l={};for(var r in e)x.call(e,r)&&t.indexOf(r)<0&&(l[r]=e[r]);if(e!=null&&u)for(var r of u(e))t.indexOf(r)<0&&y.call(e,r)&&(l[r]=e[r]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("react"),S=require("prop-types"),V=require("styled-components"),W=require("../themes/sizes.cjs"),H=require("../themes/utils.cjs"),F=require("../Typography/Typography.cjs"),I=require("../VisuallyHidden/VisuallyHidden.cjs"),M=require("../Box/Box.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const P=require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const O=require("../Flex/Flex.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=p(B),i=p(S),s=p(V),A=s.default.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`,I=s.default(H.Box)`
+`,D=s.default(M.Box)`
   cursor: ${({disabled:e})=>e?"not-allowed":void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${V.inputFocusStyle()}
-`,w=s.default(M.Flex).attrs({hasRadius:!0})`
+  ${H.inputFocusStyle()}
+`,j=s.default(O.Flex).attrs({hasRadius:!0})`
   background-color: ${({theme:e,checked:t,disabled:l})=>t?l?e.colors.neutral200:e.colors.neutral0:"transparent"};
   border: 1px solid
     ${({theme:e,checked:t,disabled:l})=>t&&t!==null?l?e.colors.neutral300:e.colors.neutral200:l?e.colors.neutral150:e.colors.neutral100};
@@ -25,7 +25,7 @@
   */
   padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
   padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
-`,O=s.default.input`
+`,N=s.default.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -33,4 +33,4 @@
   top: 0;
   z-index: 1;
   width: 100%;
-`,d=a.default.forwardRef((D,j)=>{var f=D,{size:e,onLabel:t,offLabel:l,children:o,checked:r,disabled:n,onChange:q}=f,v=m(f,["size","onLabel","offLabel","children","checked","disabled","onChange"]);const g="neutral600";let k=!r&&r!==null?"danger700":g,R=r?"primary600":g;const _=c=>{n||q(c)};return a.default.createElement(P,null,a.default.createElement(W.VisuallyHidden,null,o),a.default.createElement(I,{hasRadius:!0,disabled:n,padding:1,display:"flex",background:n?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200"},a.default.createElement(w,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:!r,disabled:n},a.default.createElement(T.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:n?"neutral700":k},l)),a.default.createElement(w,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:r,disabled:n},a.default.createElement(T.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:n?"neutral700":R},t)),a.default.createElement(O,C(b({type:"checkbox","aria-disabled":n,onChange:c=>_(c),ref:j},v),{checked:!(r===null||!r)}))))});d.displayName="ToggleCheckbox";d.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};d.propTypes={checked:u.default.bool,children:u.default.string.isRequired,disabled:u.default.bool,offLabel:u.default.string.isRequired,onChange:u.default.func,onLabel:u.default.string.isRequired,size:u.default.oneOf(Object.keys(F.sizes.input))};exports.ToggleCheckbox=d;
+`,d=n.default.forwardRef((G,w)=>{var f=G,{size:e,onLabel:t,offLabel:l,children:r,checked:o,disabled:a,onChange:m}=f,T=q(f,["size","onLabel","offLabel","children","checked","disabled","onChange"]);const{name:v,required:k}=P.useField(),g="neutral600";let R=!o&&o!==null?"danger700":g,L=o?"primary600":g;const _=c=>{a||m(c)};return n.default.createElement(A,null,n.default.createElement(I.VisuallyHidden,null,r),n.default.createElement(D,{hasRadius:!0,disabled:a,padding:1,display:"flex",background:a?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200"},n.default.createElement(j,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:o===null?!1:!o,disabled:a},n.default.createElement(F.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:a?"neutral700":R},l)),n.default.createElement(j,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:o===null?!1:o,disabled:a},n.default.createElement(F.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:a?"neutral700":L},t)),n.default.createElement(N,C(b({type:"checkbox","aria-disabled":a,onChange:c=>_(c),name:v,ref:w,"aria-required":k},T),{checked:!(o===null||!o)}))))});d.displayName="ToggleCheckbox";d.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};d.propTypes={checked:i.default.bool,children:i.default.string.isRequired,disabled:i.default.bool,offLabel:i.default.string.isRequired,onChange:i.default.func,onLabel:i.default.string.isRequired,size:i.default.oneOf(Object.keys(W.sizes.input))};exports.ToggleCheckbox=d;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,46 +1,51 @@
-var L = Object.defineProperty, z = Object.defineProperties;
-var W = Object.getOwnPropertyDescriptors;
-var u = Object.getOwnPropertySymbols;
-var h = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
-var g = (e, t, r) => t in e ? L(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, b = (e, t) => {
+var z = Object.defineProperty, W = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var m = (e, t, r) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, b = (e, t) => {
   for (var r in t || (t = {}))
-    h.call(t, r) && g(e, r, t[r]);
-  if (u)
-    for (var r of u(t))
-      m.call(t, r) && g(e, r, t[r]);
+    g.call(t, r) && m(e, r, t[r]);
+  if (p)
+    for (var r of p(t))
+      h.call(t, r) && m(e, r, t[r]);
   return e;
-}, x = (e, t) => z(e, W(t));
+}, x = (e, t) => W(e, S(t));
 var y = (e, t) => {
   var r = {};
   for (var o in e)
-    h.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
-  if (e != null && u)
-    for (var o of u(e))
-      t.indexOf(o) < 0 && m.call(e, o) && (r[o] = e[o]);
+    g.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && p)
+    for (var o of p(e))
+      t.indexOf(o) < 0 && h.call(e, o) && (r[o] = e[o]);
   return r;
 };
 import l from "react";
 import i from "prop-types";
-import p from "styled-components";
-import { sizes as S } from "../themes/sizes.js";
-import { inputFocusStyle as j } from "../themes/utils.js";
+import u from "styled-components";
+import { sizes as j } from "../themes/sizes.js";
+import { inputFocusStyle as B } from "../themes/utils.js";
 import { Typography as C } from "../Typography/Typography.js";
-import { VisuallyHidden as q } from "../VisuallyHidden/VisuallyHidden.js";
-import { Box as B } from "../Box/Box.js";
-import { Flex as I } from "../Flex/Flex.js";
-const F = p.label`
+import { VisuallyHidden as F } from "../VisuallyHidden/VisuallyHidden.js";
+import { Box as I } from "../Box/Box.js";
+import "../Field/Field.js";
+import "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { useField as M } from "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Flex as O } from "../Flex/Flex.js";
+const P = u.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, M = p(B)`
+`, V = u(I)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${j()}
-`, w = p(I).attrs({
+  ${B()}
+`, w = u(O).attrs({
   hasRadius: !0
 })`
   background-color: ${({ theme: e, checked: t, disabled: r }) => t ? r ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
@@ -57,7 +62,7 @@ const F = p.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, O = p.input`
+`, _ = u.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -66,14 +71,14 @@ const F = p.label`
   z-index: 1;
   width: 100%;
 `, d = l.forwardRef(
-  (P, R) => {
-    var f = P, { size: e, onLabel: t, offLabel: r, children: o, checked: n, disabled: a, onChange: v } = f, k = y(f, ["size", "onLabel", "offLabel", "children", "checked", "disabled", "onChange"]);
-    const c = "neutral600";
-    let E = !n && n !== null ? "danger700" : c, T = n ? "primary600" : c;
-    const $ = (s) => {
+  (H, R) => {
+    var f = H, { size: e, onLabel: t, offLabel: r, children: o, checked: n, disabled: a, onChange: v } = f, k = y(f, ["size", "onLabel", "offLabel", "children", "checked", "disabled", "onChange"]);
+    const { name: E, required: T } = M(), c = "neutral600";
+    let $ = !n && n !== null ? "danger700" : c, L = n ? "primary600" : c;
+    const q = (s) => {
       a || v(s);
     };
-    return /* @__PURE__ */ l.createElement(F, null, /* @__PURE__ */ l.createElement(q, null, o), /* @__PURE__ */ l.createElement(M, {
+    return /* @__PURE__ */ l.createElement(P, null, /* @__PURE__ */ l.createElement(F, null, o), /* @__PURE__ */ l.createElement(V, {
       hasRadius: !0,
       disabled: a,
       padding: 1,
@@ -95,7 +100,7 @@ const F = p.label`
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: a ? "neutral700" : E
+      textColor: a ? "neutral700" : $
     }, r)), /* @__PURE__ */ l.createElement(w, {
       size: e,
       paddingLeft: 3,
@@ -109,12 +114,14 @@ const F = p.label`
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: a ? "neutral700" : T
-    }, t)), /* @__PURE__ */ l.createElement(O, x(b({
+      textColor: a ? "neutral700" : L
+    }, t)), /* @__PURE__ */ l.createElement(_, x(b({
       type: "checkbox",
       "aria-disabled": a,
-      onChange: (s) => $(s),
-      ref: R
+      onChange: (s) => q(s),
+      name: E,
+      ref: R,
+      "aria-required": T
     }, k), {
       checked: !(n === null || !n)
     }))));
@@ -134,7 +141,7 @@ d.propTypes = {
   offLabel: i.string.isRequired,
   onChange: i.func,
   onLabel: i.string.isRequired,
-  size: i.oneOf(Object.keys(S.input))
+  size: i.oneOf(Object.keys(j.input))
 };
 export {
   d as ToggleCheckbox

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,6 @@
-"use strict";var _=Object.defineProperty;var o=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var b=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,x=(e,r)=>{for(var t in r||(r={}))q.call(r,t)&&b(e,t,r[t]);if(o)for(var t of o(r))j.call(r,t)&&b(e,t,r[t]);return e};var T=(e,r)=>{var t={};for(var d in e)q.call(e,d)&&r.indexOf(d)<0&&(t[d]=e[d]);if(e!=null&&o)for(var d of o(e))r.indexOf(d)<0&&j.call(e,d)&&(t[d]=e[d]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),C=require("styled-components"),I=require("prop-types"),S=require("../themes/sizes.cjs"),z=require("../helpers/useId.cjs"),B=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const O=require("../Field/FieldHint.cjs"),P=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Stack/Stack.cjs"),H=require("../Flex/Flex.cjs"),M=require("../TextButton/TextButton.cjs"),R=require("../ToggleCheckbox/ToggleCheckbox.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=a(v),m=a(C),l=a(I),w=m.default(B.Field)`
+"use strict";var _=Object.defineProperty;var o=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var F=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,j=(e,r)=>{for(var t in r||(r={}))b.call(r,t)&&F(e,t,r[t]);if(o)for(var t of o(r))q.call(r,t)&&F(e,t,r[t]);return e};var m=(e,r)=>{var t={};for(var d in e)b.call(e,d)&&r.indexOf(d)<0&&(t[d]=e[d]);if(e!=null&&o)for(var d of o(e))r.indexOf(d)<0&&q.call(e,d)&&(t[d]=e[d]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),C=require("styled-components"),I=require("prop-types"),S=require("../themes/sizes.cjs"),z=require("../helpers/useId.cjs"),B=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const O=require("../Field/FieldHint.cjs"),P=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Stack/Stack.cjs"),H=require("../Flex/Flex.cjs"),M=require("../TextButton/TextButton.cjs"),R=require("../ToggleCheckbox/ToggleCheckbox.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=a(v),x=a(C),l=a(I),w=x.default(B.Field)`
   max-width: 320px;
-`,D=m.default(M.TextButton)`
+`,D=x.default(M.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,n=N=>{var p=N,{disabled:e,size:r,error:t,hint:d,label:u,name:s,labelAction:y,required:k,id:E,onClear:c,clearLabel:f,checked:g}=p,h=T(p,["disabled","size","error","hint","label","name","labelAction","required","id","onClear","clearLabel","checked"]);const F=z.useId("toggleinput",E);return i.default.createElement(w,{name:s,hint:d,error:t,id:F},i.default.createElement(A.Stack,{spacing:1},i.default.createElement(H.Flex,null,i.default.createElement(L.FieldLabel,{required:k,action:y},u),f&&c&&g!==null&&!e&&i.default.createElement(D,{onClick:c},f)),i.default.createElement(R.ToggleCheckbox,x({id:F,size:r,name:s,checked:g,disabled:e},h),u),i.default.createElement(O.FieldHint,null),i.default.createElement(P.FieldError,null)))};n.displayName="ToggleInput";n.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};n.propTypes={checked:l.default.bool,clearLabel:l.default.string,disabled:l.default.bool,error:l.default.string,hint:l.default.oneOfType([l.default.string,l.default.node,l.default.arrayOf(l.default.node)]),id:l.default.string,label:l.default.string,labelAction:l.default.node,name:l.default.string,onClear:l.default.func,required:l.default.bool,size:l.default.oneOf(Object.keys(S.sizes.input))};exports.ToggleInput=n;
+`,n=N=>{var g=N,{disabled:e,size:r,error:t,hint:d,label:u,name:T,labelAction:y,required:k,id:E,onClear:s,clearLabel:c,checked:f}=g,h=m(g,["disabled","size","error","hint","label","name","labelAction","required","id","onClear","clearLabel","checked"]);const p=z.useId("toggleinput",E);return i.default.createElement(w,{name:T,hint:d,error:t,id:p,required:k},i.default.createElement(A.Stack,{spacing:1},i.default.createElement(H.Flex,null,i.default.createElement(L.FieldLabel,{action:y},u),c&&s&&f!==null&&!e&&i.default.createElement(D,{onClick:s},c)),i.default.createElement(R.ToggleCheckbox,j({id:p,size:r,checked:f,disabled:e},h),u),i.default.createElement(O.FieldHint,null),i.default.createElement(P.FieldError,null)))};n.displayName="ToggleInput";n.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};n.propTypes={checked:l.default.bool,clearLabel:l.default.string,disabled:l.default.bool,error:l.default.string,hint:l.default.oneOfType([l.default.string,l.default.node,l.default.arrayOf(l.default.node)]),id:l.default.string,label:l.default.string,labelAction:l.default.node,name:l.default.string,onClear:l.default.func,required:l.default.bool,size:l.default.oneOf(Object.keys(S.sizes.input))};exports.ToggleInput=n;

package/dist/ToggleInput/ToggleInput.js

@@ -1,25 +1,25 @@
 var C = Object.defineProperty;
 var n = Object.getOwnPropertySymbols;
-var b = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
-var u = (e, t, r) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, x = (e, t) => {
+var u = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (e, t, r) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, E = (e, t) => {
   for (var r in t || (t = {}))
-    b.call(t, r) && u(e, r, t[r]);
+    u.call(t, r) && g(e, r, t[r]);
   if (n)
     for (var r of n(t))
-      E.call(t, r) && u(e, r, t[r]);
+      b.call(t, r) && g(e, r, t[r]);
   return e;
 };
-var y = (e, t) => {
+var x = (e, t) => {
   var r = {};
   for (var i in e)
-    b.call(e, i) && t.indexOf(i) < 0 && (r[i] = e[i]);
+    u.call(e, i) && t.indexOf(i) < 0 && (r[i] = e[i]);
   if (e != null && n)
     for (var i of n(e))
-      t.indexOf(i) < 0 && E.call(e, i) && (r[i] = e[i]);
+      t.indexOf(i) < 0 && b.call(e, i) && (r[i] = e[i]);
   return r;
 };
 import l from "react";
-import T from "styled-components";
+import y from "styled-components";
 import o from "prop-types";
 import { sizes as I } from "../themes/sizes.js";
 import { useId as O } from "../helpers/useId.js";
@@ -34,26 +34,26 @@ import { Stack as L } from "../Stack/Stack.js";
 import { Flex as P } from "../Flex/Flex.js";
 import { TextButton as _ } from "../TextButton/TextButton.js";
 import { ToggleCheckbox as j } from "../ToggleCheckbox/ToggleCheckbox.js";
-const w = T(z)`
+const w = y(z)`
   max-width: 320px;
-`, H = T(_)`
+`, H = y(_)`
   align-self: flex-end;
   margin-left: auto;
 `, m = (M) => {
-  var f = M, {
+  var c = M, {
     disabled: e,
     size: t,
     error: r,
     hint: i,
     label: a,
-    name: p,
+    name: T,
     labelAction: v,
     required: F,
     id: h,
-    onClear: d,
-    clearLabel: s,
-    checked: c
-  } = f, k = y(f, [
+    onClear: p,
+    clearLabel: d,
+    checked: s
+  } = c, k = x(c, [
     "disabled",
     "size",
     "error",
@@ -67,24 +67,23 @@ const w = T(z)`
     "clearLabel",
     "checked"
   ]);
-  const g = O("toggleinput", h);
+  const f = O("toggleinput", h);
   return /* @__PURE__ */ l.createElement(w, {
-    name: p,
+    name: T,
     hint: i,
     error: r,
-    id: g
+    id: f,
+    required: F
   }, /* @__PURE__ */ l.createElement(L, {
     spacing: 1
   }, /* @__PURE__ */ l.createElement(P, null, /* @__PURE__ */ l.createElement(q, {
-    required: F,
     action: v
-  }, a), s && d && c !== null && !e && /* @__PURE__ */ l.createElement(H, {
-    onClick: d
-  }, s)), /* @__PURE__ */ l.createElement(j, x({
-    id: g,
+  }, a), d && p && s !== null && !e && /* @__PURE__ */ l.createElement(H, {
+    onClick: p
+  }, d)), /* @__PURE__ */ l.createElement(j, E({
+    id: f,
     size: t,
-    name: p,
-    checked: c,
+    checked: s,
     disabled: e
   }, k), a), /* @__PURE__ */ l.createElement(A, null), /* @__PURE__ */ l.createElement(B, null)));
 };

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -1,19 +1,33 @@
-"use strict";var Q=Object.defineProperty;var b=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var M=(e,s,t)=>s in e?Q(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,m=(e,s)=>{for(var t in s||(s={}))j.call(s,t)&&M(e,t,s[t]);if(b)for(var t of b(s))_.call(s,t)&&M(e,t,s[t]);return e};var D=(e,s)=>{var t={};for(var a in e)j.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))s.indexOf(a)<0&&_.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),X=require("prop-types"),Y=require("styled-components"),L=require("@radix-ui/react-use-callback-ref"),Z=require("@strapi/icons/CarretDown"),F=require("../../Typography/Typography.cjs"),I=require("../../Box/Box.cjs"),ee=require("../../Flex/Flex.cjs"),A=require("../../Button/Button.cjs"),te=require("../../BaseLink/BaseLink.cjs"),N=require("../../Popover/Popover.cjs"),$=require("./utils.cjs"),ne=require("../../helpers/useId.cjs"),d=require("../../helpers/keyboardKeys.cjs"),K=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=K(l),o=K(X),B=K(Y),oe=K(Z),se=B.default.button`
+"use strict";var Q=Object.defineProperty;var B=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var M=(e,n,o)=>n in e?Q(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,f=(e,n)=>{for(var o in n||(n={}))_.call(n,o)&&M(e,o,n[o]);if(B)for(var o of B(n))F.call(n,o)&&M(e,o,n[o]);return e};var R=(e,n)=>{var o={};for(var r in e)_.call(e,r)&&n.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&B)for(var r of B(e))n.indexOf(r)<0&&F.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),X=require("prop-types"),Y=require("styled-components"),$=require("@radix-ui/react-use-callback-ref"),Z=require("@strapi/icons/CarretDown"),ee=require("../Link/Link.cjs"),S=require("../../Typography/Typography.cjs"),C=require("../../Box/Box.cjs"),te=require("../../Flex/Flex.cjs"),A=require("../../Button/Button.cjs"),ne=require("../../BaseLink/BaseLink.cjs"),N=require("../../Popover/Popover.cjs"),D=require("./utils.cjs"),oe=require("../../helpers/useId.cjs"),c=require("../../helpers/keyboardKeys.cjs"),K=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=K(u),t=K(X),g=K(Y),ae=K(Z),se=g.default.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${$.getOptionStyle}
-`,ae=B.default(te.BaseLink)`
+  ${D.getOptionStyle}
+`,re=g.default(ne.BaseLink)`
   text-decoration: none;
-  ${$.getOptionStyle}
-`,re=B.default.span`
+  ${D.getOptionStyle}
+`,le=g.default(ee.Link)`
+  &:focus-visible {
+    /* Removes Link focus-visible after properties and reset to global outline */
+    outline: 2px solid ${({theme:e})=>e.colors.primary600};
+    outline-offset: 2px;
+    &:after {
+      content: none;
+    }
+  }
+  /* Removes Link svg color */
+  svg path {
+    fill: currentColor;
+  }
+  ${D.getOptionStyle}
+`,ue=g.default.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`,ue=B.default(A.Button)`
+`,ie=g.default(A.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,S=O=>{var g=O,{as:e,children:s,onClick:t,isFocused:a,isLink:C}=g,P=D(g,["as","children","onClick","isFocused","isLink"]);const i=l.useRef();l.useEffect(()=>{a&&i.current&&i.current.focus()},[a]);const x=m({tabIndex:a?0:-1,ref:i,role:"menuitem"},P),h=c=>{(c.key===d.KeyboardKeys.SPACE||c.key===d.KeyboardKeys.ENTER)&&t()};return C?r.default.createElement(ae,m({as:e},x),r.default.createElement(I.Box,{padding:2},r.default.createElement(F.Typography,null,s))):r.default.createElement(se,m({onKeyDown:h,onMouseDown:t,type:"button"},x),r.default.createElement(I.Box,{padding:2},r.default.createElement(F.Typography,null,s)))};S.defaultProps={as:void 0,onClick(){},isFocused:!1,isLink:!1};S.propTypes={as:o.default.elementType,children:o.default.node.isRequired,isFocused:o.default.bool,isLink:o.default.bool,onClick:o.default.func};const E=x=>{var h=x,{label:e,children:s,id:t,as:a,onOpen:C=()=>{},onClose:P=()=>{},size:O,popoverPlacement:g}=h,i=D(h,["label","children","id","as","onOpen","onClose","size","popoverPlacement"]);const c=l.useRef(),R=ne.useId("simplemenu",t),f=l.useRef(!1),[p,y]=l.useState(!1),[T,q]=l.useState(0),k=l.Children.toArray(s),V=O==="S"?ue:A.Button,W=a||V;l.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=k.findIndex(u=>u.props.children===e);n!==-1&&q(n)}},[e]);const v=L.useCallbackRef(C),w=L.useCallbackRef(P);l.useEffect(()=>{f!=null&&f.current?p?v():w():f.current=!0},[f,p,v,w]),l.useEffect(()=>{r.default.isValidElement(e)&&T===-1&&c.current.focus()},[e,T]);const z=n=>{p&&(n.key===d.KeyboardKeys.ESCAPE&&(n.stopPropagation(),y(!1),c.current.focus()),n.key===d.KeyboardKeys.DOWN&&q(u=>u===k.length-1?0:u+1),n.key===d.KeyboardKeys.UP&&q(u=>u===0?k.length-1:u-1))},U=n=>{(n.key===d.KeyboardKeys.ENTER||n.key===d.KeyboardKeys.SPACE)&&y(u=>!u)},G=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||y(!1)},H=n=>{n.preventDefault(),y(u=>!u)},J=k.map((n,u)=>r.default.createElement(ee.Flex,{as:"li",key:u,justifyContent:"center",role:"menuitem"},l.cloneElement(n,{onClick(){n.props.onClick(),y(!1),c.current.focus()},isFocused:T===u})));return r.default.createElement("div",{onKeyDown:z},r.default.createElement(W,m({label:r.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":p,"aria-controls":R,onKeyDown:U,onMouseDown:H,ref:c,type:"button",variant:"ghost",endIcon:r.default.createElement(re,null,r.default.createElement(oe.default,{"aria-hidden":!0}))},i),e),p&&r.default.createElement(N.Popover,{onBlur:G,placement:g,source:c,spacing:4},r.default.createElement(I.Box,{role:"menu",as:"ul",padding:1,id:R},J)))};E.defaultProps={as:void 0};E.displayName="SimpleMenu";E.defaultProps={id:void 0,onClose(){},onOpen(){},popoverPlacement:"bottom-start",size:"M"};E.propTypes={as:o.default.any,children:o.default.oneOfType([o.default.arrayOf(o.default.node),o.default.node]).isRequired,id:o.default.string,label:o.default.oneOfType([o.default.string,o.default.number,o.default.element]).isRequired,onClose:o.default.func,onOpen:o.default.func,popoverPlacement:o.default.oneOf(N.POPOVER_PLACEMENTS),size:o.default.oneOf(["S","M"])};exports.MenuItem=S;exports.SimpleMenu=E;
+`,I=L=>{var b=L,{as:e,children:n,onClick:o,isFocused:r,isLink:v,isExternal:P}=b,T=R(b,["as","children","onClick","isFocused","isLink","isExternal"]);const h=u.useRef();u.useEffect(()=>{r&&h.current&&h.current.focus()},[r]);const d=f({tabIndex:r?0:-1,ref:h,role:"menuitem"},T),i=p=>{(p.key===c.KeyboardKeys.SPACE||p.key===c.KeyboardKeys.ENTER)&&o()};return v?s.default.createElement(re,f({as:e},d),s.default.createElement(C.Box,{padding:2},s.default.createElement(S.Typography,null,n))):P?s.default.createElement(le,f({isExternal:!0},d),s.default.createElement(C.Box,{padding:2},s.default.createElement(S.Typography,null,n))):s.default.createElement(se,f({onKeyDown:i,onMouseDown:o,type:"button"},d),s.default.createElement(C.Box,{padding:2},s.default.createElement(S.Typography,null,n)))};I.defaultProps={as:void 0,onClick(){},isExternal:!1,isFocused:!1,isLink:!1};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,isExternal:t.default.bool,isFocused:t.default.bool,isLink:t.default.bool,onClick:t.default.func};const k=h=>{var d=h,{label:e,children:n,id:o,as:r,onOpen:v=()=>{},onClose:P=()=>{},size:T,popoverPlacement:L}=d,b=R(d,["label","children","id","as","onOpen","onClose","size","popoverPlacement"]);const i=u.useRef(),p=oe.useId("simplemenu",o),y=u.useRef(!1),[m,E]=u.useState(!1),[q,O]=u.useState(0),x=u.Children.toArray(n),V=T==="S"?ie:A.Button,W=r||V;u.useEffect(()=>{if(["string","number"].includes(typeof e)){const a=x.findIndex(l=>l.props.children===e);a!==-1&&O(a)}},[e]);const j=$.useCallbackRef(v),w=$.useCallbackRef(P);u.useEffect(()=>{y!=null&&y.current?m?j():w():y.current=!0},[y,m,j,w]),u.useEffect(()=>{s.default.isValidElement(e)&&q===-1&&i.current.focus()},[e,q]);const z=a=>{m&&(a.key===c.KeyboardKeys.ESCAPE&&(a.stopPropagation(),E(!1),i.current.focus()),a.key===c.KeyboardKeys.DOWN&&O(l=>l===x.length-1?0:l+1),a.key===c.KeyboardKeys.UP&&O(l=>l===0?x.length-1:l-1))},U=a=>{(a.key===c.KeyboardKeys.ENTER||a.key===c.KeyboardKeys.SPACE)&&E(l=>!l)},G=a=>{a.preventDefault(),a.currentTarget.contains(a.relatedTarget)||E(!1)},H=a=>{a.preventDefault(),E(l=>!l)},J=x.map((a,l)=>s.default.createElement(te.Flex,{as:"li",key:l,justifyContent:"center",role:"menuitem"},u.cloneElement(a,{onClick(){a.props.onClick(),E(!1),i.current.focus()},isFocused:q===l})));return s.default.createElement("div",{onKeyDown:z},s.default.createElement(W,f({label:s.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":m,"aria-controls":p,onKeyDown:U,onMouseDown:H,ref:i,type:"button",variant:"ghost",endIcon:s.default.createElement(ue,null,s.default.createElement(ae.default,{"aria-hidden":!0}))},b),e),m&&s.default.createElement(N.Popover,{onBlur:G,placement:L,source:i,spacing:4},s.default.createElement(C.Box,{role:"menu",as:"ul",padding:1,id:p},J)))};k.defaultProps={as:void 0};k.displayName="SimpleMenu";k.defaultProps={id:void 0,onClose(){},onOpen(){},popoverPlacement:"bottom-start",size:"M"};k.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,popoverPlacement:t.default.oneOf(N.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=k;