@ilo-org/react 0.28.5 → 0.28.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.28.5",
+  "version": "0.28.7",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -77,7 +77,7 @@
     "@ilo-org/brand-assets": "1.0.1",
     "@ilo-org/fonts": "2.0.0",
     "@ilo-org/icons-react": "1.0.6",
-    "@ilo-org/styles": "1.11.1"
+    "@ilo-org/styles": "1.11.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.7",

package/lib/cjs/_store/Logo-entry-nsoJtWSa.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),V=require("./useGlobalSettings-chunk-Cd48T6lS.js"),R=require("./index-chunk-Cxg31gtu.js"),M=({clientHeight:e,clientWidth:l,scrollHeight:n,scrollWidth:o})=>n>e||o>l,P=(e,{maxSize:l=600,startingHeight:n=9,step:o=.5})=>{let t=n,c=!1;for(;!c&&t<l;)e.style.fontSize=`${t}px`,e.style.lineHeight=`${t}px`,c=M(e),c||(t=t+o);return e.style.fontSize="",e.style.lineHeight="",t-o},I=({baseClass:e,className:l,subbrand:n,alt:o,src:t,style:c,size:f="fluid",theme:u="light",...$})=>{const g=s.useRef(null),h=s.useRef(null),p=s.useRef(null),a=s.useRef(null),[d,N]=s.useState(!1),[L,F]=s.useState(0),[y,b]=s.useState(0),[k,H]=s.useState(!n),j=s.useRef(new ResizeObserver(i=>{const{height:x}=i[0].contentRect;a.current||(a.current=x),F(x)}));s.useEffect(()=>{n&&d&&y&&H(!0)},[d,y,n]),s.useLayoutEffect(()=>{if(d&&h.current&&g.current){const i=g.current;return j.current.observe(i),()=>j.current.unobserve(i)}},[d]),s.useLayoutEffect(()=>{v()},[d,a.current]),s.useLayoutEffect(()=>{v()},[n]);function v(){if(h.current&&p.current&&a.current){const x=P(h.current,{maxSize:a.current})/a.current;b(x)}}function w(){N(!0)}const m=!!n,z=f==="fluid",E=!z&&typeof f=="number",S=`${e}--sub-brand`,q=`${e}--size--fluid`,B=`${e}--visibility--hidden`,O=R.classNames(e,l,`${e}--theme--${u}`,{[B]:!k,[q]:z,[S]:m}),W=`${e}--image`,C=`${S}--image`,G=()=>{const i={};return m&&(i["--logo-image-height"]=`${L}px`,i["--logo-font-size"]=`${y*L}px`),E&&(i.width=`${f}px`),{...c,...i}},T=()=>typeof t=="string"?t:t[u];return r.jsxs("figure",{className:O,style:G(),children:[r.jsx("img",{ref:g,alt:o,src:T(),className:R.classNames({[C]:m,[W]:!m}),onLoad:w,...$}),m&&r.jsxs("div",{ref:h,className:`${S}--lock-up`,children:[r.jsx("span",{className:`${S}--lock-up--separator`}),r.jsx("span",{ref:p,children:n})]})]})},A=({className:e,url:l,target:n,style:o,size:t,...c})=>{const{prefix:f}=V.useGlobalSettings(),u=`${f}--logo`,$=`${u}--link`,g=`${u}--size--fluid`;return l?r.jsx("a",{href:l,target:n,className:R.classNames($,e,{[g]:t==="fluid"}),style:o,children:r.jsx(I,{...c,baseClass:u,size:t})}):r.jsx(I,{baseClass:u,className:e,style:o,size:t,...c})};exports.Logo=A;

package/lib/esm/_store/Logo-entry-CYL-mIHC.js

@@ -1,121 +0,0 @@
-import { jsx as u, jsxs as H } from "react/jsx-runtime";
-import { useRef as m, useState as S, useEffect as J, useLayoutEffect as v } from "react";
-import { u as K } from "./useGlobalSettings-chunk-BhfWlTcd.js";
-import { c as z } from "./index-chunk-CY3PQDr4.js";
-const M = ({
-  clientHeight: e,
-  clientWidth: s,
-  scrollHeight: n,
-  scrollWidth: i
-}) => n > e || i > s, P = (e, { maxSize: s = 600, startingHeight: n = 9, step: i = 0.5 }) => {
-  let t = n, r = !1;
-  for (; !r && t < s; )
-    e.style.fontSize = `${t}px`, e.style.lineHeight = `${t}px`, r = M(e), r || (t = t + i);
-  return e.style.fontSize = "", e.style.lineHeight = "", t - i;
-}, N = ({
-  baseClass: e,
-  className: s,
-  subbrand: n,
-  alt: i,
-  src: t,
-  style: r,
-  size: f = "fluid",
-  theme: l = "light",
-  ...x
-}) => {
-  const a = m(null), h = m(null), L = m(null), c = m(null), [g, w] = S(!1), [I, B] = S(0), [y, b] = S(0), [E, W] = S(!n), R = m(
-    new ResizeObserver((o) => {
-      const { height: p } = o[0].contentRect;
-      c.current || (c.current = p), B(p);
-    })
-  );
-  J(() => {
-    n && g && y && W(!0);
-  }, [g, y, n]), v(() => {
-    if (g && h.current && a.current) {
-      const o = a.current;
-      return R.current.observe(o), () => R.current.unobserve(o);
-    }
-  }, [g]), v(() => {
-    F();
-  }, [g, c.current]), v(() => {
-    F();
-  }, [n]);
-  function F() {
-    if (h.current && L.current && c.current) {
-      const p = P(h.current, {
-        maxSize: c.current
-      }) / c.current;
-      b(p);
-    }
-  }
-  function j() {
-    w(!0);
-  }
-  const d = !!n, k = f === "fluid", C = !k && typeof f == "number", $ = `${e}--sub-brand`, O = `${e}--size--fluid`, V = `${e}--visibility--hidden`, G = z(
-    e,
-    s,
-    `${e}--theme--${l}`,
-    {
-      [V]: !E,
-      [O]: k,
-      [$]: d
-    }
-  ), T = `${e}--image`, q = `${$}--image`, A = () => {
-    const o = {};
-    return d && (o["--logo-image-height"] = `${I}px`, o["--logo-font-size"] = `${y * I}px`), C && (o.width = `${f}px`), { ...r, ...o };
-  }, D = () => typeof t == "string" ? t : t[l];
-  return /* @__PURE__ */ H("figure", { className: G, style: A(), children: [
-    /* @__PURE__ */ u(
-      "img",
-      {
-        ref: a,
-        alt: i,
-        src: D(),
-        className: z({
-          [q]: d,
-          [T]: !d
-        }),
-        onLoad: j,
-        ...x
-      }
-    ),
-    d && /* @__PURE__ */ H("div", { ref: h, className: `${$}--lock-up`, children: [
-      /* @__PURE__ */ u("span", { className: `${$}--lock-up--separator` }),
-      /* @__PURE__ */ u("span", { ref: L, children: n })
-    ] })
-  ] });
-}, Z = ({
-  className: e,
-  url: s,
-  target: n,
-  style: i,
-  size: t,
-  ...r
-}) => {
-  const { prefix: f } = K(), l = `${f}--logo`, x = `${l}--link`, a = `${l}--size--fluid`;
-  return s ? /* @__PURE__ */ u(
-    "a",
-    {
-      href: s,
-      target: n,
-      className: z(x, e, {
-        [a]: t === "fluid"
-      }),
-      style: i,
-      children: /* @__PURE__ */ u(N, { ...r, baseClass: l, size: t })
-    }
-  ) : /* @__PURE__ */ u(
-    N,
-    {
-      baseClass: l,
-      className: e,
-      style: i,
-      size: t,
-      ...r
-    }
-  );
-};
-export {
-  Z as Logo
-};