@strapi/design-system 1.7.6 → 1.7.7

package/dist/ToggleInput/ToggleInput.js

@@ -1,76 +1,23 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import a from "styled-components";
-import { useId as T } from "../hooks/useId.js";
-import { sizes as v } from "../themes/sizes.js";
-import { ToggleCheckbox as F } from "../ToggleCheckbox/ToggleCheckbox.js";
-import { Field as I } from "../Field/Field.js";
-import { TextButton as k } from "../TextButton/TextButton.js";
-import { Flex as p } from "../Flex/Flex.js";
-import { FieldLabel as C } from "../Field/FieldLabel.js";
-import { FieldHint as O } from "../Field/FieldHint.js";
-import { FieldError as j } from "../Field/FieldError.js";
-const z = a(I)`
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import p from "styled-components";
+import { useId as F } from "../hooks/useId.js";
+import { ToggleCheckbox as I } from "../ToggleCheckbox/ToggleCheckbox.js";
+import { Field as T } from "../Field/Field.js";
+import { TextButton as j } from "../TextButton/TextButton.js";
+import { Flex as d } from "../Flex/Flex.js";
+import { FieldLabel as k } from "../Field/FieldLabel.js";
+import { FieldHint as y } from "../Field/FieldHint.js";
+import { FieldError as B } from "../Field/FieldError.js";
+const C = p(T)`
   max-width: 320px;
-`, q = a(k)`
+`, q = p(j)`
   align-self: flex-end;
   margin-left: auto;
-`, r = ({
-  disabled: i,
-  size: c,
-  error: f,
-  hint: g,
-  label: t,
-  name: u,
-  labelAction: h,
-  required: b,
-  id: x,
-  onClear: n,
-  clearLabel: l,
-  checked: d,
-  ...y
-}) => {
-  const m = T(x);
-  return /* @__PURE__ */ o(z, { name: u, hint: g, error: f, id: m, required: b, children: /* @__PURE__ */ s(p, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ o(C, { action: h, children: t }),
-      l && n && d !== null && !i && /* @__PURE__ */ o(q, { onClick: n, children: l })
-    ] }),
-    /* @__PURE__ */ o(F, { id: m, size: c, checked: d, disabled: i, ...y, children: t }),
-    /* @__PURE__ */ o(O, {}),
-    /* @__PURE__ */ o(j, {})
-  ] }) });
-};
-r.displayName = "ToggleInput";
-r.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"
-};
-r.propTypes = {
-  checked: e.bool,
-  clearLabel: e.string,
-  disabled: e.bool,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.node,
-  name: e.string,
-  onClear: e.func,
-  required: e.bool,
-  size: e.oneOf(Object.keys(v.input))
+`, w = ({ disabled: e = !1, size: s = "M", error: f, hint: c, label: o, name: a, labelAction: g, required: h = !1, id: u, onClear: i, clearLabel: t, checked: n = !1, ...x }) => {
+  const l = F(u);
+  return r(C, { name: a, hint: c, error: f, id: l, required: h, children: m(d, { direction: "column", alignItems: "stretch", gap: 1, children: [m(d, { children: [r(k, { action: g, children: o }), t && i && n !== null && !e && r(q, { onClick: i, children: t })] }), r(I, { id: l, size: s, checked: n, disabled: e, ...x, children: o }), r(y, {}), r(B, {})] }) });
 };
+w.displayName = "ToggleInput";
 export {
-  r as ToggleInput
+  w as ToggleInput
 };

package/dist/Typography/Typography.cjs

@@ -6,7 +6,7 @@
   // overwrite a variant attribute
   font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
   font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
-  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,void 0)};
+  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
   color: ${o.handleColor};
   text-align: ${({textAlign:e})=>e};
   text-decoration: ${({textDecoration:e})=>e};

package/dist/Typography/Typography.js

@@ -1,25 +1,25 @@
-import i from "styled-components";
-import { variantStyle as r, ellipsisStyle as n, handleColor as a } from "./utils.js";
+import r from "styled-components";
+import { variantStyle as i, ellipsisStyle as n, handleColor as a } from "./utils.js";
 import { extractStyleFromTheme as o } from "../helpers/theme.js";
 const s = {
   fontSize: !0,
   fontWeight: !0
-}, d = i.span.withConfig({
+}, m = r.span.withConfig({
   shouldForwardProp: (t, e) => !s[t] && e(t)
 })`
-  ${r}
+  ${i}
   ${n}
 
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
   font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
   font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
-  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, void 0)};
+  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
   color: ${a};
   text-align: ${({ textAlign: t }) => t};
   text-decoration: ${({ textDecoration: t }) => t};
   text-transform: ${({ textTransform: t }) => t};
 `;
 export {
-  d as Typography
+  m as Typography
 };

package/dist/hooks/useControllableState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=typeof e=="function"?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=e instanceof Function?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;

package/dist/hooks/useControllableState.js

@@ -1,14 +1,14 @@
 import * as r from "react";
 import { useCallbackRef as i } from "@strapi/ui-primitives";
-function R({ prop: n, defaultProp: u, onChange: c = () => {
+function S({ prop: n, defaultProp: u, onChange: c = () => {
 } }) {
-  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = typeof n == "function" ? n(t) : n, d = o ? l : t, f = i(c), C = r.useCallback((s) => {
+  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = n instanceof Function ? n(t) : n, d = o ? l : t, a = i(c), C = r.useCallback((s) => {
     if (o) {
-      const a = typeof s == "function" ? s(l) : s;
-      a !== l && (f(a), e(s));
+      const f = typeof s == "function" ? s(l) : s;
+      f !== l && (a(f), e(s));
     } else
       e(s);
-  }, [o, l, e, f]);
+  }, [o, l, e, a]);
   return [d, C];
 }
 function m({ defaultProp: n, onChange: u }) {
@@ -18,5 +18,5 @@ function m({ defaultProp: n, onChange: u }) {
   }, [t, e, o]), c;
 }
 export {
-  R as useControllableState
+  S as useControllableState
 };

package/dist/themes/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>({theme:o,size:r})=>o.sizes[t][r],s=(t="&")=>({theme:o,hasError:r})=>e.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r=!1})=>e.css`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;
@@ -38,4 +38,4 @@
       border: 2px solid ${t.colors.primary600};
     }
   }
-`;exports.buttonFocusStyle=n;exports.getThemeSize=i;exports.inputFocusStyle=s;
+`;exports.buttonFocusStyle=n;exports.getThemeSize=s;exports.inputFocusStyle=i;

package/dist/themes/utils.js

@@ -1,5 +1,5 @@
 import { css as i } from "styled-components";
-const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r }) => i`
+const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r = !1 }) => i`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-focus-scope": "1.0.2",
-    "@strapi/ui-primitives": "^1.7.6",
+    "@strapi/ui-primitives": "^1.7.7",
     "@uiw/react-codemirror": "^4.19.16",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.6",
+    "@strapi/icons": "^1.7.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -64,5 +64,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "953be7427371cdb5d7063803078fa7939ce1ecf1"
+  "gitHead": "95a02179f945511d2c5fb50efb880ed13f3169c9"
 }

package/dist/Tabs/useTabsFocus.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@strapi/ui-primitives"),i=(r,c)=>{const e=u.useRef(null),t=u.useRef(null),n=o.useCallbackRef(c);return u.useEffect(()=>{if(e.current){if(t.current){const s=e.current.querySelector('[tabindex="0"]');s&&(s.focus(),n(r))}t.current||(t.current=!0)}},[r,n]),e};exports.useTabsFocus=i;

package/dist/Tabs/useTabsFocus.js

@@ -1,17 +0,0 @@
-import { useRef as c, useEffect as f } from "react";
-import { useCallbackRef as s } from "@strapi/ui-primitives";
-const i = (t, o) => {
-  const e = c(null), r = c(null), u = s(o);
-  return f(() => {
-    if (e.current) {
-      if (r.current) {
-        const n = e.current.querySelector('[tabindex="0"]');
-        n && (n.focus(), u(t));
-      }
-      r.current || (r.current = !0);
-    }
-  }, [t, u]), e;
-};
-export {
-  i as useTabsFocus
-};

package/dist/Textarea/TextareaInput.cjs

@@ -1,30 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),$=require("react"),b=require("prop-types"),y=require("styled-components"),g=require("../themes/utils.cjs"),x=require("../Field/FieldContext.cjs"),l=e=>e&&e.__esModule?e:{default:e},T=l(b),d=l(y),q=d.default.div`
-  border: 1px solid ${({theme:e,hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
-  border-radius: ${({theme:e})=>e.borderRadius};
-
-  padding-left: ${({theme:e,hasLeftAction:r})=>r?0:e.spaces[4]};
-  padding-right: ${({theme:e,hasRightAction:r})=>r?0:e.spaces[4]};
-  padding-top: ${({theme:e})=>`${e.spaces[3]}`};
-  padding-bottom: ${({theme:e})=>`${e.spaces[3]}`};
-
-  background: ${({theme:e,disabled:r})=>r?e.colors.neutral150:e.colors.neutral0};
-  ${g.inputFocusStyle()}
-`,h=d.default.textarea`
-  display: block;
-  width: 100%;
-  font-weight: 400;
-  font-size: ${14/16}rem;
-  border: none;
-  color: ${({theme:e,disabled:r})=>r?e.colors.neutral600:e.colors.neutral800};
-  resize: none;
-  background: inherit;
-
-  ::placeholder {
-    color: ${({theme:e})=>e.colors.neutral500};
-    opacity: 1;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-`,o=$.forwardRef(({disabled:e,...r},u)=>{const{id:t,error:n,hint:c,name:p,required:f}=x.useField();let a;n?a=`${t}-error`:c&&(a=`${t}-hint`);const s=!!n;return i.jsx(q,{hasError:s,disabled:e,children:i.jsx(h,{id:t,name:p,ref:u,"aria-describedby":a,"aria-invalid":s,disabled:e,hasError:s,"aria-required":f,...r})})});o.displayName="TextareaInput";o.defaultProps={disabled:!1};o.propTypes={disabled:T.default.bool};exports.TextareaInput=o;

package/dist/Textarea/TextareaInput.js

@@ -1,65 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import $ from "prop-types";
-import d from "styled-components";
-import { inputFocusStyle as m } from "../themes/utils.js";
-import { useField as b } from "../Field/FieldContext.js";
-const g = d.div`
-  border: 1px solid ${({ theme: r, hasError: o }) => o ? r.colors.danger600 : r.colors.neutral200};
-  border-radius: ${({ theme: r }) => r.borderRadius};
-
-  padding-left: ${({ theme: r, hasLeftAction: o }) => o ? 0 : r.spaces[4]};
-  padding-right: ${({ theme: r, hasRightAction: o }) => o ? 0 : r.spaces[4]};
-  padding-top: ${({ theme: r }) => `${r.spaces[3]}`};
-  padding-bottom: ${({ theme: r }) => `${r.spaces[3]}`};
-
-  background: ${({ theme: r, disabled: o }) => o ? r.colors.neutral150 : r.colors.neutral0};
-  ${m()}
-`, x = d.textarea`
-  display: block;
-  width: 100%;
-  font-weight: 400;
-  font-size: ${14 / 16}rem;
-  border: none;
-  color: ${({ theme: r, disabled: o }) => o ? r.colors.neutral600 : r.colors.neutral800};
-  resize: none;
-  background: inherit;
-
-  ::placeholder {
-    color: ${({ theme: r }) => r.colors.neutral500};
-    opacity: 1;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-`, t = f(({ disabled: r, ...o }, l) => {
-  const { id: e, error: s, hint: p, name: c, required: u } = b();
-  let a;
-  s ? a = `${e}-error` : p && (a = `${e}-hint`);
-  const i = !!s;
-  return /* @__PURE__ */ n(g, { hasError: i, disabled: r, children: /* @__PURE__ */ n(
-    x,
-    {
-      id: e,
-      name: c,
-      ref: l,
-      "aria-describedby": a,
-      "aria-invalid": i,
-      disabled: r,
-      hasError: i,
-      "aria-required": u,
-      ...o
-    }
-  ) });
-});
-t.displayName = "TextareaInput";
-t.defaultProps = {
-  disabled: !1
-};
-t.propTypes = {
-  disabled: $.bool
-};
-export {
-  t as TextareaInput
-};