@pushwoosh/dumb-components 1.1.161 → 1.1.162

package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaModalViewProps } from './types';
+export declare function NativeRichMediaModalView(props: NativeRichMediaModalViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { Card } from './styles';
+import { NativeRichMediaCardButtons } from '../../components/NativeRichMediaCardButtons';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
+import { SECONDARY_LABEL } from '../../helpers';
+import { TemplateLayer } from '../../styles';
+export function NativeRichMediaModalView(props) {
+  const {
+    block
+  } = props;
+  const background = block.background || '#FFFFFF';
+  const hasButtons = (block.buttons || []).length > 0;
+  return _jsx(TemplateLayer, {
+    children: _jsxs(Card, {
+      "$background": background,
+      children: [block.image && _jsx(NativeRichMediaCoverImg, {
+        url: block.image,
+        margin: "14px 14px 0",
+        height: 179,
+        borderRadius: 18
+      }), (block.title || block.message) && _jsxs(Vertical, {
+        "$padding": (block.image ? '20px' : '30px') + ' 24px 0',
+        "$gap": 8,
+        children: [block.title && _jsx(NativeRichMediaPtLabel, {
+          value: block.title,
+          size: 24,
+          weight: 800,
+          fallbackColor: "#000000",
+          align: "center"
+        }), block.message && _jsx(NativeRichMediaPtLabel, {
+          value: block.message,
+          size: 15,
+          weight: 400,
+          fallbackColor: SECONDARY_LABEL,
+          align: "center",
+          lineHeight: "21.5px"
+        })]
+      }), _jsx(NativeRichMediaCardButtons, {
+        buttons: block.buttons,
+        "$padding": hasButtons ? '24px 20px 20px' : '0 0 20px'
+      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+        top: 20,
+        right: 20
+      })]
+    })
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaModalView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaModalView } from './NativeRichMediaModalView';

package/NativeRichMediaPreview/views/NativeRichMediaModalView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaModalView } from './NativeRichMediaModalView';

package/NativeRichMediaPreview/views/NativeRichMediaModalView/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const Card: import("styled-components").StyledComponent<"div", any, {
+    $background: string;
+    $padding: string;
+} & {
+    $padding: string;
+}, "$padding">;

package/NativeRichMediaPreview/views/NativeRichMediaModalView/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Card as SharedCard } from '../shared/styles';
+export const Card = styled(SharedCard).attrs({
+  $padding: '0'
+}).withConfig({
+  displayName: "Card",
+  componentId: "sc-1std439-0"
+})([""]);

package/NativeRichMediaPreview/views/NativeRichMediaModalView/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaModalBlock } from '../../types';
+export type NativeRichMediaModalViewProps = {
+    block: NativeRichMediaModalBlock;
+};

package/NativeRichMediaPreview/views/NativeRichMediaModalView/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/views/NativeRichMediaPipView/NativeRichMediaPipView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaPipViewProps } from './types';
+export declare function NativeRichMediaPipView(props: NativeRichMediaPipViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaPipView/NativeRichMediaPipView.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Frame } from './styles';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaExpandChip } from '../../components/NativeRichMediaExpandChip';
+import { NativeRichMediaMuteChip } from '../../components/NativeRichMediaMuteChip';
+import { PT } from '../../helpers';
+import { TemplateLayer } from '../../styles';
+export function NativeRichMediaPipView(props) {
+  const {
+    block
+  } = props;
+  const raw = Number.isFinite(block.width) ? block.width : 32;
+  const frac = Math.min(Math.max(raw > 1 ? raw / 100 : raw, 0.15), 0.7);
+  const w = Math.round(PT.W * frac);
+  const aspectRatio = Number.isFinite(block.aspectRatio) ? block.aspectRatio : 0.5625;
+  const h = Math.max(0, Math.round(w * aspectRatio));
+  const cornerRadius = Number.isFinite(block.cornerRadius) ? block.cornerRadius : 16;
+  const r = Math.min(cornerRadius, h / 2);
+  const position = block.position || 'bottom-right';
+  const isTop = position.includes('top');
+  const isLeft = position.includes('left');
+  return _jsx(TemplateLayer, {
+    children: _jsxs(Frame, {
+      "$width": w,
+      "$height": h,
+      "$radius": r,
+      "$top": isTop ? PT.SAFE_TOP + 14 : undefined,
+      "$bottom": isTop ? undefined : PT.SAFE_BOTTOM + 14,
+      "$left": isLeft ? 14 : undefined,
+      "$right": isLeft ? undefined : 14,
+      children: [block.poster && _jsx(NativeRichMediaCoverImg, {
+        url: block.poster,
+        position: "absolute",
+        inset: true
+      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+        top: 6,
+        right: 6,
+        small: true
+      }), _jsx(NativeRichMediaMuteChip, {
+        muted: block.muted,
+        small: true,
+        bottom: 6,
+        right: 6
+      }), _jsx(NativeRichMediaExpandChip, {
+        bottom: 6,
+        left: 6
+      })]
+    })
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaPipView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaPipView } from './NativeRichMediaPipView';

package/NativeRichMediaPreview/views/NativeRichMediaPipView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaPipView } from './NativeRichMediaPipView';

package/NativeRichMediaPreview/views/NativeRichMediaPipView/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const Frame: import("styled-components").StyledComponent<"div", any, {
+    $width: number;
+    $height: number;
+    $radius: number;
+    $top?: number;
+    $bottom?: number;
+    $left?: number;
+    $right?: number;
+}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaPipView/styles.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+export const Frame = styled.div.withConfig({
+  displayName: "Frame",
+  componentId: "sc-hjtwid-0"
+})(["position:absolute;overflow:hidden;background:#000;box-shadow:0 16px 28px rgba(0,0,0,0.28);width:", "px;height:", "px;border-radius:", "px;", " ", " ", " ", ""], ({
+  $width
+}) => $width, ({
+  $height
+}) => $height, ({
+  $radius
+}) => $radius, ({
+  $top
+}) => $top !== undefined ? `top: ${$top}px;` : '', ({
+  $bottom
+}) => $bottom !== undefined ? `bottom: ${$bottom}px;` : '', ({
+  $left
+}) => $left !== undefined ? `left: ${$left}px;` : '', ({
+  $right
+}) => $right !== undefined ? `right: ${$right}px;` : '');

package/NativeRichMediaPreview/views/NativeRichMediaPipView/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaPipBlock } from '../../types';
+export type NativeRichMediaPipViewProps = {
+    block: NativeRichMediaPipBlock;
+};

package/NativeRichMediaPreview/views/NativeRichMediaPipView/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/NativeRichMediaScratchcardView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaScratchcardViewProps } from './types';
+export declare function NativeRichMediaScratchcardView(props: NativeRichMediaScratchcardViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/NativeRichMediaScratchcardView.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, HintOverlay, HintText, RevealArea, RevealButtonText, RewardSlot } from './styles';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
+import { NativeRichMediaRewardPanel } from '../../components/NativeRichMediaRewardPanel';
+import { asText, contrastOn, surfaceBackground, surfaceBaseHex, withAlpha } from '../../helpers';
+import { ScribbleIcon } from '../../icons';
+import { Lang } from '../../polyglot';
+import { TemplateLayer } from '../../styles';
+export function NativeRichMediaScratchcardView(props) {
+  const {
+    block
+  } = props;
+  const baseHex = surfaceBaseHex(block.background) || '#FFFFFF';
+  const cardText = contrastOn(baseHex);
+  const cover = block.cover || {};
+  const coverBase = cover.color || '#C7C7C7';
+  const hintColor = withAlpha(contrastOn(coverBase), 0.45);
+  return _jsx(TemplateLayer, {
+    children: _jsxs(Card, {
+      "$background": surfaceBackground(block.background, '#FFFFFF'),
+      children: [block.title && _jsx(NativeRichMediaPtLabel, {
+        value: block.title,
+        size: 24,
+        weight: 800,
+        fallbackColor: cardText,
+        align: "center"
+      }), block.message && _jsx(NativeRichMediaPtLabel, {
+        value: block.message,
+        size: 15,
+        weight: 400,
+        fallbackColor: withAlpha(cardText, 0.72),
+        align: "center",
+        marginTop: 14,
+        lineHeight: "20px"
+      }), _jsxs(RevealArea, {
+        children: [_jsx(RewardSlot, {
+          children: _jsx(NativeRichMediaRewardPanel, {
+            reward: block.reward,
+            onBackgroundHex: "#F7F7F7"
+          })
+        }), cover.image ? _jsx(NativeRichMediaCoverImg, {
+          url: cover.image,
+          position: "absolute",
+          inset: true,
+          backgroundColor: cover.color || '#C7C7CC'
+        }) : _jsxs(HintOverlay, {
+          "$coverBase": coverBase,
+          children: [_jsx(ScribbleIcon, {
+            color: hintColor
+          }), _jsx(HintText, {
+            "$color": hintColor,
+            children: _jsx(Lang, {
+              message: "DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE"
+            })
+          })]
+        })]
+      }), block.revealButton && _jsx(RevealButtonText, {
+        "$color": withAlpha(cardText, 0.8),
+        children: asText(block.revealButton)
+      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+        top: 16,
+        right: 16
+      })]
+    })
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaScratchcardView } from './NativeRichMediaScratchcardView';

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaScratchcardView } from './NativeRichMediaScratchcardView';

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.d.ts

@@ -0,0 +1,17 @@
+export declare const Card: import("styled-components").StyledComponent<"div", any, {
+    $background: string;
+    $padding: string;
+} & {
+    $padding: string;
+}, "$padding">;
+export declare const RevealArea: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RewardSlot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintOverlay: import("styled-components").StyledComponent<"div", any, {
+    $coverBase: string;
+}, never>;
+export declare const HintText: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;
+export declare const RevealButtonText: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { mixHex } from '../../helpers';
+import { Card as SharedCard } from '../shared/styles';
+export const Card = styled(SharedCard).attrs({
+  $padding: '28px 24px 16px'
+}).withConfig({
+  displayName: "Card",
+  componentId: "sc-nguevq-0"
+})([""]);
+export const RevealArea = styled.div.withConfig({
+  displayName: "RevealArea",
+  componentId: "sc-nguevq-1"
+})(["position:relative;margin-top:14px;height:179px;border-radius:18px;background:#F7F7F7;overflow:hidden;"]);
+export const RewardSlot = styled.div.withConfig({
+  displayName: "RewardSlot",
+  componentId: "sc-nguevq-2"
+})(["position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);"]);
+export const HintOverlay = styled.div.withConfig({
+  displayName: "HintOverlay",
+  componentId: "sc-nguevq-3"
+})(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:", ";"], ({
+  $coverBase
+}) => `linear-gradient(135deg, ${mixHex($coverBase, '#FFFFFF', 0.4)}, ${$coverBase} 45%, ${mixHex($coverBase, '#000000', 0.12)})`);
+export const HintText = styled.div.withConfig({
+  displayName: "HintText",
+  componentId: "sc-nguevq-4"
+})(["font-size:14px;font-weight:600;color:", ";"], ({
+  $color
+}) => $color);
+export const RevealButtonText = styled.div.withConfig({
+  displayName: "RevealButtonText",
+  componentId: "sc-nguevq-5"
+})(["margin-top:14px;text-align:center;font-size:15px;font-weight:600;color:", ";"], ({
+  $color
+}) => $color);

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaScratchcardBlock } from '../../types';
+export type NativeRichMediaScratchcardViewProps = {
+    block: NativeRichMediaScratchcardBlock;
+};

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaSheetViewProps } from './types';
+export declare function NativeRichMediaSheetView(props: NativeRichMediaSheetViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { Handle, Sheet } from './styles';
+import { NativeRichMediaCardButtons } from '../../components/NativeRichMediaCardButtons';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
+import { SECONDARY_LABEL } from '../../helpers';
+import { TemplateLayer } from '../../styles';
+export function NativeRichMediaSheetView(props) {
+  const {
+    block
+  } = props;
+  const background = block.background || '#FFFFFF';
+  const hasButtons = (block.buttons || []).length > 0;
+  return _jsx(TemplateLayer, {
+    children: _jsxs(Sheet, {
+      "$background": background,
+      children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
+        url: block.image,
+        margin: "26px 14px 0",
+        height: 190,
+        borderRadius: 18
+      }), (block.title || block.message) && _jsxs(Vertical, {
+        "$padding": (block.image ? '16px' : '20px') + ' 24px 0',
+        "$gap": 6,
+        children: [block.title && _jsx(NativeRichMediaPtLabel, {
+          value: block.title,
+          size: 22,
+          weight: 800,
+          fallbackColor: "#000000"
+        }), block.message && _jsx(NativeRichMediaPtLabel, {
+          value: block.message,
+          size: 15,
+          weight: 400,
+          fallbackColor: SECONDARY_LABEL,
+          align: "left",
+          lineHeight: "20px"
+        })]
+      }), hasButtons && _jsx(NativeRichMediaCardButtons, {
+        buttons: block.buttons,
+        "$padding": "24px 20px 0"
+      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+        top: 16,
+        right: 16
+      })]
+    })
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaSheetView } from './NativeRichMediaSheetView';

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaSheetView } from './NativeRichMediaSheetView';

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Sheet: import("styled-components").StyledComponent<"div", any, {
+    $background: string;
+}, never>;
+export declare const Handle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { TERTIARY_LABEL } from '../../helpers';
+export const Sheet = styled.div.withConfig({
+  displayName: "Sheet",
+  componentId: "sc-17o8tnc-0"
+})(["position:absolute;left:0;right:0;bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -16px 28px rgba(0,0,0,0.28);padding-bottom:50px;background:", ";"], ({
+  $background
+}) => $background);
+export const Handle = styled.div.withConfig({
+  displayName: "Handle",
+  componentId: "sc-17o8tnc-1"
+})(["width:36px;height:5px;border-radius:2.5px;background:", ";margin:8px auto 0;"], TERTIARY_LABEL);

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaSheetBlock } from '../../types';
+export type NativeRichMediaSheetViewProps = {
+    block: NativeRichMediaSheetBlock;
+};

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/NativeRichMediaSpinwheelView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaSpinwheelViewProps } from './types';
+export declare function NativeRichMediaSpinwheelView(props: NativeRichMediaSpinwheelViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/NativeRichMediaSpinwheelView.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Card, Hub, Pointer, Ring, SegmentLabel, Tick, Wheel } from './styles';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
+import { SEG_FALLBACK, asText, contrastOn, surfaceBackground, surfaceBaseHex, withAlpha } from '../../helpers';
+import { TemplateLayer } from '../../styles';
+export function NativeRichMediaSpinwheelView(props) {
+  const {
+    block
+  } = props;
+  const baseHex = surfaceBaseHex(block.background) || '#FFFFFF';
+  const cardText = contrastOn(baseHex);
+  const segs = block.segments;
+  const hasSegments = segs.length > 0;
+  const per = hasSegments ? 360 / segs.length : 0;
+  const fills = segs.map((s, i) => s.color || SEG_FALLBACK[i % SEG_FALLBACK.length]);
+  const stops = fills.map((c, i) => `${c} ${i * per}deg ${(i + 1) * per}deg`).join(', ');
+  return _jsx(TemplateLayer, {
+    children: _jsxs(Card, {
+      "$background": surfaceBackground(block.background, '#FFFFFF'),
+      children: [block.title && _jsx(NativeRichMediaPtLabel, {
+        value: block.title,
+        size: 24,
+        weight: 800,
+        fallbackColor: cardText,
+        align: "center"
+      }), block.message && _jsx(NativeRichMediaPtLabel, {
+        value: block.message,
+        size: 15,
+        weight: 400,
+        fallbackColor: withAlpha(cardText, 0.72),
+        align: "center",
+        marginTop: 14,
+        lineHeight: "20px"
+      }), hasSegments && _jsxs(Wheel, {
+        children: [_jsx(Ring, {
+          "$stops": stops,
+          children: segs.map((s, i) => {
+            const theta = -90 + (i + 0.5) * per;
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              _jsxs(Fragment, {
+                children: [_jsx(Tick, {
+                  "$rotate": i * per - 180
+                }), _jsx(SegmentLabel, {
+                  "$color": s.textColor || contrastOn(fills[i]),
+                  "$rotate": theta,
+                  children: asText(s.text)
+                })]
+              }, `spin-segment-${i}`)
+            );
+          })
+        }), _jsx(Pointer, {}), _jsx(Hub, {
+          children: asText(block.spinButton) || 'SPIN'
+        })]
+      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+        top: 16,
+        right: 16
+      })]
+    })
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaSpinwheelView } from './NativeRichMediaSpinwheelView';

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaSpinwheelView } from './NativeRichMediaSpinwheelView';

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const Card: import("styled-components").StyledComponent<"div", any, {
+    $background: string;
+    $padding: string;
+} & {
+    $padding: string;
+}, "$padding">;
+export declare const Wheel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Ring: import("styled-components").StyledComponent<"div", any, {
+    $stops: string;
+}, never>;
+export declare const Tick: import("styled-components").StyledComponent<"div", any, {
+    $rotate: number;
+}, never>;
+export declare const SegmentLabel: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+    $rotate: number;
+}, never>;
+export declare const Pointer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Hub: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { Card as SharedCard } from '../shared/styles';
+export const Card = styled(SharedCard).attrs({
+  $padding: '28px 24px 24px'
+}).withConfig({
+  displayName: "Card",
+  componentId: "sc-1tz3wky-0"
+})([""]);
+export const Wheel = styled.div.withConfig({
+  displayName: "Wheel",
+  componentId: "sc-1tz3wky-1"
+})(["position:relative;margin-top:14px;width:289px;height:289px;"]);
+export const Ring = styled.div.withConfig({
+  displayName: "Ring",
+  componentId: "sc-1tz3wky-2"
+})(["position:absolute;inset:30px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:", ";"], ({
+  $stops
+}) => `conic-gradient(from 0deg, ${$stops})`);
+export const Tick = styled.div.withConfig({
+  displayName: "Tick",
+  componentId: "sc-1tz3wky-3"
+})(["position:absolute;left:50%;top:50%;width:1px;height:114.5px;background:rgba(255,255,255,0.35);transform-origin:0 0;transform:", ";"], ({
+  $rotate
+}) => `rotate(${$rotate}deg)`);
+export const SegmentLabel = styled.div.withConfig({
+  displayName: "SegmentLabel",
+  componentId: "sc-1tz3wky-4"
+})(["position:absolute;left:50%;top:50%;font-size:14px;font-weight:700;white-space:nowrap;max-width:86px;overflow:hidden;text-overflow:ellipsis;color:", ";transform:", ";"], ({
+  $color
+}) => $color, ({
+  $rotate
+}) => `translate(-50%,-50%) rotate(${$rotate}deg) translateX(63px)`);
+export const Pointer = styled.div.withConfig({
+  displayName: "Pointer",
+  componentId: "sc-1tz3wky-5"
+})(["position:absolute;top:4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #0F0F0F;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.3));z-index:3;"]);
+export const Hub = styled.div.withConfig({
+  displayName: "Hub",
+  componentId: "sc-1tz3wky-6"
+})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:#FFF;color:#000;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,0.25);z-index:2;white-space:nowrap;overflow:hidden;padding:0 6px;"]);

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaSpinwheelBlock } from '../../types';
+export type NativeRichMediaSpinwheelViewProps = {
+    block: NativeRichMediaSpinwheelBlock;
+};

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/NativeRichMediaStoriesView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaStoriesViewProps } from './types';
+export declare function NativeRichMediaStoriesView(props: NativeRichMediaStoriesViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/NativeRichMediaStoriesView.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GradientOverlay, ProgressFill, ProgressRow, ProgressTrack, SubtitleText, TextBlock, TitleText } from './styles';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { PT, asText } from '../../helpers';
+import { ButtonRow, TemplateLayer } from '../../styles';
+export function NativeRichMediaStoriesView(props) {
+  const {
+    block,
+    activeIndex,
+    onNavigate
+  } = props;
+  const items = block.items;
+  const idx = Math.max(0, Math.min(activeIndex, items.length - 1));
+  const item = items[idx] || {};
+  return _jsxs(TemplateLayer, {
+    children: [_jsx(NativeRichMediaCoverImg, {
+      url: item.image,
+      position: "absolute",
+      inset: true,
+      backgroundColor: "#000"
+    }), _jsx(GradientOverlay, {}), _jsx(ProgressRow, {
+      "$top": PT.SAFE_TOP + 14,
+      children: items.map((_, i) => _jsxs(ProgressTrack
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        onClick: () => onNavigate(i),
+        children: [i < idx && _jsx(ProgressFill, {
+          "$full": true
+        }), i === idx && _jsx(ProgressFill, {})]
+      }, `stories-bar-${i}`))
+    }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+      top: PT.SAFE_TOP + 14 + 3 + 10,
+      right: 16
+    }), _jsxs(TextBlock, {
+      "$bottom": PT.SAFE_BOTTOM + 24,
+      children: [item.title && _jsx(TitleText, {
+        children: asText(item.title)
+      }), item.subtitle && _jsx(SubtitleText, {
+        children: asText(item.subtitle)
+      }), item.button && item.url && _jsx(ButtonRow, {
+        "$marginTop": 16,
+        "$borderRadius": 26,
+        "$background": "#FFF",
+        "$color": "#0F0F0F",
+        "$boxShadow": "0 6px 14px rgba(0,0,0,0.28)",
+        children: asText(item.button)
+      })]
+    })]
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaStoriesView } from './NativeRichMediaStoriesView';

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaStoriesView } from './NativeRichMediaStoriesView';