@telefonica/mistica 16.64.0-beta.1 → 16.65.0

package/dist-es/video.js

@@ -26,16 +26,16 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import { jsxs as P, jsx as l } from "react/jsx-runtime";
 import * as s from "react";
-import { ImageContent as B, ImageError as G } from "./image.js";
-import { AspectRatioContainer as V } from "./utils/aspect-ratio-support.js";
-import { isRunningAcceptanceTest as J } from "./utils/platform.js";
-import { video as O } from "./video.css-mistica.js";
-import { defaultBorderRadius as E } from "./image.css-mistica.js";
-import { getPrefixedDataAttributes as Q } from "./utils/dom.js";
-import X from "classnames";
-const Y = {
+import { ImageContent as q, ImageError as J } from "./image.js";
+import { AspectRatioContainer as M } from "./utils/aspect-ratio-support.js";
+import { isRunningAcceptanceTest as Q } from "./utils/platform.js";
+import { video as X } from "./video.css-mistica.js";
+import { defaultBorderRadius as S } from "./image.css-mistica.js";
+import { getPrefixedDataAttributes as Y } from "./utils/dom.js";
+import D from "classnames";
+const K = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -68,14 +68,15 @@ const Y = {
         play: "playing",
         reset: "loading"
     }
-}, q = (r, l)=>Y[r][l] || r, D = {
+}, _ = (i, u)=>K[i][u] || i, $ = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, K = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", te = /*#__PURE__*/ s.forwardRef((_param, c)=>{
-    var { src: r, poster: l, autoPlay: p = "when-loaded", muted: C = !0, loop: I = !0, preload: P = "none", loadingTimeout: y = 1e4, onLoad: F, onError: w, onPause: S, onPlay: N, aspectRatio: u = 0, dataAttributes: k } = _param, o = _object_without_properties(_param, [
+}, z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", ne = /*#__PURE__*/ s.forwardRef((_param, h)=>{
+    var { src: i, poster: u, tracks: v, autoPlay: g = "when-loaded", muted: F = !0, loop: N = !0, preload: x = "none", loadingTimeout: R = 1e4, onLoad: L, onError: b, onPause: U, onPlay: j, aspectRatio: c = 0, dataAttributes: B } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
+        "tracks",
         "autoPlay",
         "muted",
         "loop",
@@ -88,146 +89,163 @@ const Y = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [d, n] = s.useReducer(q, "loading"), t = s.useRef(null), v = s.useRef(null), h = s.useRef(null), A = o.width && o.height ? void 0 : typeof u == "number" ? u : D[u], m = s.useCallback(()=>{
-        d === "loading" && (n("fail"), w === null || w === void 0 ? void 0 : w());
+    const [d, n] = s.useReducer(_, "loading"), r = s.useRef(null), E = s.useRef(null), f = s.useRef(null), A = o.width && o.height ? void 0 : typeof c == "number" ? c : $[c], y = s.useCallback(()=>{
+        d === "loading" && (n("fail"), b === null || b === void 0 ? void 0 : b());
     }, [
-        w,
+        b,
         d
     ]);
     s.useEffect(()=>{
-        if (v.current !== r) {
-            var _t_current;
+        if (E.current !== i) {
+            var _r_current;
             let e;
-            return v.current = r, n("reset"), r ? (e = setTimeout(m, y), (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.load()) : n("fail"), ()=>{
+            return E.current = i, n("reset"), i ? (e = setTimeout(y, R), (_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.load()) : n("fail"), ()=>{
                 clearTimeout(e);
             };
         }
     }, [
-        r,
-        y,
-        m
+        i,
+        R,
+        y
     ]);
-    const R = ()=>{
-        if (F === null || F === void 0 ? void 0 : F(), d === "stopped") return;
-        const e = t.current, i = p && !J();
-        n("finishLoad"), e && i && e.paused && e.play();
-    }, x = (Array.isArray(r) ? r : [
-        r
+    const T = ()=>{
+        if (L === null || L === void 0 ? void 0 : L(), d === "stopped") return;
+        const e = r.current, t = g && !Q();
+        n("finishLoad"), e && t && e.paused && e.play();
+    }, G = (Array.isArray(i) ? i : [
+        i
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), f = [
+        } : e), m = [
         "error",
         "loading",
         "loaded",
         "stopped"
-    ].includes(d), L = /* @__PURE__ */ a("video", {
-        ref: t,
+    ].includes(d), O = /* @__PURE__ */ P("video", {
+        ref: r,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: C,
-        loop: I,
-        className: X(O, E),
-        preload: P,
-        onError: m,
+        muted: F,
+        loop: N,
+        crossOrigin: (v === null || v === void 0 ? void 0 : v.length) ? "anonymous" : void 0,
+        className: D(X, S),
+        preload: x,
+        onError: y,
         onPause: ()=>{
-            S === null || S === void 0 ? void 0 : S(), n("pause");
+            U === null || U === void 0 ? void 0 : U(), n("pause");
         },
         onTimeUpdate: ()=>{
-            var _t_current;
-            d !== "playing" && ((_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.currentTime) !== 0 && (N === null || N === void 0 ? void 0 : N(), n("play"));
+            var _r_current;
+            d !== "playing" && ((_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.currentTime) !== 0 && (j === null || j === void 0 ? void 0 : j(), n("play"));
         },
         onCanPlay: ()=>{
-            p === "streaming" && R();
+            g === "streaming" && T();
         },
         onCanPlayThrough: ()=>{
-            p !== "streaming" && R();
+            g !== "streaming" && T();
         },
-        poster: K,
+        poster: z,
         style: {
-            visibility: f ? "hidden" : "visible",
-            position: f || A !== 0 ? "absolute" : "static",
+            visibility: m ? "hidden" : "visible",
+            position: m || A !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
-        children: x.map((param, g)=>{
-            let { src: e, type: i } = param;
-            return /* @__PURE__ */ a("source", {
-                src: e,
-                type: i
-            }, g);
-        })
-    }), b = !!(A !== 0 || o.width && o.height), T = d === "error", U = s.useMemo(()=>l ? /* @__PURE__ */ a(B, {
-            aspectRatio: u,
+        children: [
+            G.map((param, a)=>{
+                let { src: e, type: t } = param;
+                return /* @__PURE__ */ l("source", {
+                    src: e,
+                    type: t
+                }, a);
+            }),
+            v === null || v === void 0 ? void 0 : v.map((param, p)=>{
+                let { src: e, kind: t, srcLang: a, label: w, default: I } = param;
+                return /* @__PURE__ */ l("track", {
+                    src: e,
+                    kind: t,
+                    srcLang: a,
+                    label: w,
+                    default: I
+                }, p);
+            })
+        ]
+    }), k = !!(A !== 0 || o.width && o.height), C = d === "error", V = s.useMemo(()=>u ? /* @__PURE__ */ l(q, {
+            aspectRatio: c,
             width: o.width,
             height: o.height,
-            src: l
-        }) : b ? /* @__PURE__ */ a("div", {
+            src: u
+        }) : k ? /* @__PURE__ */ l("div", {
             style: {
                 position: "absolute",
                 width: "100%",
                 height: "100%"
             },
-            children: /* @__PURE__ */ a(G, {
-                className: E,
-                withIcon: T
+            children: /* @__PURE__ */ l(J, {
+                className: S,
+                withIcon: C
             })
         }) : void 0, [
-        u,
+        c,
         o.height,
         o.width,
-        T,
-        l,
-        b
+        C,
+        u,
+        k
     ]);
-    return /* @__PURE__ */ j(V, {
+    return /* @__PURE__ */ P(M, {
         style: {
             position: "relative"
         },
         aspectRatio: A,
         width: o.width,
         height: o.height,
-        dataAttributes: Q(k, "Video"),
+        dataAttributes: Y(B, "Video"),
         children: [
-            /* @__PURE__ */ a("div", {
+            /* @__PURE__ */ l("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
                 ref: (e)=>{
-                    const i = e || null;
-                    i && (i.play = ()=>{
-                        var _t_current;
-                        return ((_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.play()) || Promise.resolve();
-                    }, i.pause = ()=>{
-                        var _t_current;
-                        return (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.pause();
-                    }, i.load = ()=>{
-                        var _h_current;
-                        ((_h_current = h.current) === null || _h_current === void 0 ? void 0 : _h_current.style) && (h.current.style.width = "100%", h.current.style.height = "100%"), setTimeout(()=>{
-                            var _t_current;
-                            n("reset"), (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.load();
+                    const t = e || null;
+                    t && (t.play = ()=>{
+                        var _r_current;
+                        return ((_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.play()) || Promise.resolve();
+                    }, t.pause = ()=>{
+                        var _r_current;
+                        return (_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.pause();
+                    }, t.load = ()=>{
+                        var _f_current;
+                        ((_f_current = f.current) === null || _f_current === void 0 ? void 0 : _f_current.style) && (f.current.style.width = "100%", f.current.style.height = "100%"), setTimeout(()=>{
+                            var _r_current;
+                            n("reset"), (_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.load();
                         }, 100);
-                    }, i.setCurrentTime = (g)=>{
-                        t.current && (t.current.currentTime = g);
-                    }, i.stop = ()=>{
-                        t.current && (t.current.pause(), t.current.currentTime = 0, n("stop"));
-                    }), typeof c == "function" ? c(i) : c && (c.current = i);
+                    }, t.setCurrentTime = (a)=>{
+                        r.current && (r.current.currentTime = a);
+                    }, t.stop = ()=>{
+                        r.current && (r.current.pause(), r.current.currentTime = 0, n("stop"));
+                    }, t.setTrackMode = (a, w)=>{
+                        var _r_current_querySelectorAll, _r_current;
+                        const p = (_r_current = r.current) === null || _r_current === void 0 ? void 0 : (_r_current_querySelectorAll = _r_current.querySelectorAll("track")) === null || _r_current_querySelectorAll === void 0 ? void 0 : _r_current_querySelectorAll[a];
+                        (p === null || p === void 0 ? void 0 : p.track) && (p.track.mode = w);
+                    }), typeof h == "function" ? h(t) : h && (h.current = t);
                 }
             }),
-            L,
-            /* @__PURE__ */ a("div", {
-                ref: h,
+            O,
+            /* @__PURE__ */ l("div", {
+                ref: f,
                 style: {
                     position: A !== 0 ? "absolute" : "static",
-                    width: f ? "100%" : 0,
-                    height: f ? "100%" : 0,
+                    width: m ? "100%" : 0,
+                    height: m ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: U
+                children: V
             })
         ]
     });
 });
-export { D as RATIO, te as default };
+export { $ as RATIO, ne as default };

package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var _ = "v16_64_0-beta_1_1ezqdj90", a = "v16_64_0-beta_1_1ezqdj91";
-export { _ as container, a as waveFadeOut };
+/* empty css                                                     */ var a = "v16_65_1ezqdj90", r = "v16_65_1ezqdj91";
+export { a as container, r as waveFadeOut };

package/doc/components.md

@@ -1,6 +1,6 @@
 # Components Reference
 
-All components are imported from `@telefonica/mistica`.
+All components are imported from `@telefonica/mistica`. Before using any component, you should **always** read the definition .d.ts files located in `node_modules` so you have all the props and JSDoc context.
 
 ```tsx
 import {ButtonPrimary, Stack, Text2, ...} from '@telefonica/mistica';

package/doc/figma-mcp.md

@@ -4,23 +4,6 @@ Mandatory reading whenever you are implementing UI from Figma through the Figma
 a `figma.com/...` URL. This file only covers the translation layer — the rest of the Mistica docs
 (`patterns.md`, `components.md`, `layout.md`, `design-tokens.md`) still apply.
 
-## Step 0: ask the user whether to run the verifier
-
-Before fetching any Figma node or writing any code, ask the user this question exactly once (use a
-structured-question tool if your harness has one):
-
-- **Question**:
-  `Run the verifier loop after implementing? It compares the rendered app against Figma both visually (Playwright screenshot) and structurally (DOM + rule audit), then iterates fixes.`
-- **Options**:
-  - **Yes, run the verifier** — recommended when fidelity matters. Catches drift the implementer can't see. It
-    will take more time and cost more tokens.
-  - **No, skip the verifier** — faster path. The agent still self-checks and reviews its work, but no
-    independent comparison runs.
-
-Remember the answer for the rest of this task. **One answer covers the whole implementation — do not re-ask
-per section.** If the user opted in, run the (verifier loop)[#verifier-loop-run-before-declaring-done]. If
-they opted out, do not spawn the verifier; the self-checks are the only gate.
-
 ## Prime directive: read the DOM verbatim
 
 The Figma MCP response gives you two things:
@@ -151,21 +134,3 @@ Before closing out a section always:
 
 If you can't check an item off against the DOM, re-read the DOM (with `disableCodeConnect: true` if the node
 is CodeConnect-mapped) before committing the value.
-
-## Verifier loop (run before declaring done)
-
-Skip if the user opted out in [Step 0](#step-0-ask-the-user-whether-to-run-the-verifier).
-
-Spawn a **new** subagent (via your harness's subagent mechanism — e.g. Claude's `Agent` tool with
-`subagent_type: general-purpose`, Codex's equivalent) pointed at
-[agents/figma-verifier.md](./agents/figma-verifier.md). Never reuse a subagent across iterations. Pass in the
-prompt:
-
-- Figma `fileKey` and entry `nodeId`
-- Implementation file paths you wrote or edited
-- Local assets directory
-- Dev-server command and URL (check `package.json`)
-
-If the verifier reports clean, done. Otherwise fix the cited issues — each fix justified by Figma DOM or
-screenshot — and re-run with a fresh subagent. Stop after clean, 3 iterations, or out-of-scope issues (missing
-tokens/assets, designer clarification — surface these instead of fudging).

package/doc/layout.md

@@ -11,6 +11,7 @@
     - [around](#around)
     - [evenly](#evenly)
     - [nesting](#nesting)
+    - [Grow](#grow)
   - [Align](#align)
   - [Grid / GridItem](#grid--griditem)
   - [NegativeBox](#negativebox)
@@ -49,7 +50,7 @@ spacing. All padding props accept a numeric value or a responsive object `{mobil
 
 ```tsx
 <Box paddingX={16} paddingY={32}>
-  <Child />
+  <Text2>Example</Text2>
 </Box>
 ```
 
@@ -57,6 +58,14 @@ spacing. All padding props accept a numeric value or a responsive object `{mobil
 
 :warning: Do not use `Box` to add external spacings or distribute items, instead use `Stack` or `Inline`.
 
+You can also use Box as a fixed width container:
+
+```tsx
+<Box width={80}>
+  <Text2>Example</Text2>
+</Box>
+```
+
 ## Stack
 
 Vertically distributes its children using the given `space` separation.
@@ -159,6 +168,41 @@ with a value on the right via `space="between"`:
 The outer `Inline` distributes the two groups to opposite ends; the inner `Inline` keeps the icon tightly
 grouped with its label at a fixed gap.
 
+### Grow
+
+Use the `expand` prop to make one or more children of an `Inline` grow to fill the remaining horizontal space.
+It takes the index (or an array of indexes) of the children that should grow. Indexes follow
+`React.Children.toArray` order, so empty nodes (`null`, `false`) are skipped but rendered elements always
+count. You don't wrap the growing child in anything — `Inline` already wraps every child in its own element:
+
+```tsx
+<Inline space={56} alignItems="center" expand={1}>
+  <Text7>4,6</Text7>
+  <InfoRating
+    value={4}
+    icon={{
+      ActiveIcon: IconStarFilled,
+      InactiveIcon: IconStarLight,
+      color: skinVars.colors.textPrimary,
+    }}
+  />
+  <Text3 regular>150 valoraciones</Text3>
+</Inline>
+```
+
+```tsx
+<Inline space={16} alignItems="center" expand={[1, 2]}>
+  <IconTruckRegular size={24} color={skinVars.colors.neutralHigh} />
+  <TextField name="firstName" label="First name" fullWidth />
+  <TextField name="lastName" label="Last name" fullWidth />
+</Inline>
+```
+
+**Common mistakes.** `Inline` wraps each child in its own element, so growing a child by wrapping it in a
+`<div style={{flex: 1}}>` (or `flex-grow`) does nothing useful. Neither does `<Box style={{...}}>` — `Box` has
+no `style` prop, so a flex or width passed that way is silently dropped and the row collapses or overflows its
+container. Reach for `expand` (and `<Box width={N}>` for any fixed sibling) instead.
+
 ## Align
 
 Positions its children within a container using CSS grid alignment. Useful for centering content or placing it

package/doc/patterns.md

@@ -97,6 +97,29 @@ Follow the 24/32/16 rule:
 </Stack>
 ```
 
+### DO: Fill remaining horizontal space with `Inline` `expand`
+
+To make a row child grow into the leftover width next to a fixed-width sibling, use `Inline`'s `expand` prop
+with the index/indexes of the children that should grow. Indexes follow `React.Children.toArray` order.
+
+```tsx
+// ProgressBar fills remaining space
+<Inline space={24} expand={1} alignItems="center">
+  <Icon2GFilled />
+  <ProgressBar progressPercent={30} />
+</Inline>
+```
+
+### DON'T: grow children with raw flex or `style` on `Box`
+
+```tsx
+// ❌ raw flexbox div — breaks; Inline already wraps each child in a div
+<div style={{display: 'flex'}}>
+  <div style={{flex: 1}}>...</div>
+  <div style={{flex: '0 0 394px'}}>...</div>
+</div>
+```
+
 ## Color dos and don'ts
 
 ### DO: Use design tokens

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.64.0-beta.1",
+    "version": "16.65.0",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/community/__stories__/cyber/example-component-story.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import ExampleComponent from '../../cyber/example-component';
+
+export default {
+    title: 'Community/Cyber/ExampleComponent',
+    parameters: {
+        fullScreen: true,
+    },
+};
+
+export const Default: StoryComponent = () => {
+    return <ExampleComponent>Cyber example story</ExampleComponent>;
+};
+
+Default.storyName = 'ExampleComponent';

package/src/community/cyber/example-component.css.ts

@@ -0,0 +1,7 @@
+import {style} from '@vanilla-extract/css';
+import {vars} from '../../skins/skin-contract.css';
+
+export const example = style({
+    backgroundColor: vars.colors.brand,
+    color: vars.colors.textPrimaryInverse,
+});

package/src/community/cyber/example-component.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as styles from './example-component.css';
+import Box from '../../box';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const ExampleComponent = (props: Props): JSX.Element => {
+    return (
+        <div className={styles.example}>
+            <Box padding={16}>{props.children}</Box>
+        </div>
+    );
+};
+
+export default ExampleComponent;

package/src/community/cyber/index.tsx

@@ -0,0 +1 @@
+export {default as ExampleComponent} from './example-component';

package/src/community/index.tsx

@@ -9,3 +9,6 @@ export {
     ValueBlock,
     ProgressBlock,
 } from './blocks';
+
+export {ExampleComponent as CyberExampleComponent} from './cyber';
+export {getCyberSkin, CYBER_SKIN} from './skins/cyber-skin';