@automattic/social-previews 2.0.1 → 2.1.0-beta.2

package/CHANGELOG.md

@@ -0,0 +1,70 @@
+# Changelog
+
+## v2.1.0
+
+- Added Threads preview
+
+## v2.0.1 (2024-06-10)
+
+- Added Mastodon, Instagram and Nextdoor previews.
+- Fixed hyperlinks for Facebook.
+- Fixed multiple empty lines issue in preview text.
+- Fixed video previews for Instagram and Tumblr.
+- Fixed empty Twitter preview when no text/description is provided.
+- Changed Twitter text and icon to X.
+- Switch dependency from `classnames` to `clsx`.
+
+## v2.0.0 (2023-05-24)
+
+- Converted the package to TypeScript.
+- Added LinkedIn and Tumblr previews.
+- Updated Google Search, Facebook and Twitter previews to match their latest designs.
+- Created separate components for each of the Social Media previews e.g. `TumblrLinkPreview`, `TumblrPostPreview` and `TumblrPreviews`.
+
+## v1.1.5 (2022-08-24)
+
+- Declare an optional peer dependency on `@babel/runtime`, for CommonJS environments. This dependency already existed previously, it just wasn't declared.
+
+## v1.1.4 (2022-05-25)
+
+- Add missing dependency on `@emotion/react`.
+
+## v1.1.3 (2022-05-16)
+
+- Remove unnecessary peer dependencies on `@wordpress/data`, `reakit-utils`, and `redux`.
+- Add missing peer dependency on `react-dom`.
+
+## v1.1.2 (2022-05-13)
+
+- Dependency updates and internal code cleanup.
+
+## v1.1.1 (2021-04-05)
+
+- Ensure that lengthy text doesn't overflow in the Twitter preview.
+
+## v1.1.0 (2020-09-10)
+
+- Twitter: Add previewing for attached images, videos, or quoted tweets.
+- Twitter: Add support for previewing entire threads.
+
+## v1.0.4 (2020-08-24)
+
+- Fixed Twitter styles for viewports < 600px in width
+
+## v1.0.3 (2020-08-21)
+
+- Refreshed styles of Twitter, Facebook and Google previews to match their latest design.
+
+## v1.0.2 (2020-08-03)
+
+- Remove `i18n-calypso` dependency by removing search preview header.
+- Strip html tags from descriptions for social previews.
+- Add helper function with enhanced regex for stripping html tags.
+
+## v1.0.1 (2020-07-23)
+
+- Mark CSS and SCSS files as `sideEffects` to ensure they are not discarded during build processes tree-shaking.
+
+## v1.0.0 (2020-07-22)
+
+- Initial release after extracting from Calypso.

package/README.md

@@ -2,13 +2,15 @@
 
 This package contains low level components that can be used to display an _approximation_ of how a given post might like look when viewed on various social media / search platforms.
 
-At the current time there are components to display previews for a:
+At the current time there are components to display previews for:
 
 - Facebook post.
 - Twitter post.
 - Google Search result.
 - Tumblr post.
 - LinkedIn post.
+- Nextdoor post.
+- Threads post.
 
 ## Prerequisites
 

package/dist/cjs/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.preparePreviewText = exports.hashtagUrlMap = exports.formatMastodonDate = exports.formatTweetDate = exports.formatNextdoorDate = exports.hasTag = exports.getTitleFromDescription = exports.stripHtmlTags = exports.firstValid = exports.hardTruncation = exports.truncatedAtSpace = exports.shortEnough = exports.baseDomain = void 0;
+exports.preparePreviewText = exports.hashtagUrlMap = exports.formatMastodonDate = exports.formatTweetDate = exports.formatThreadsDate = exports.formatNextdoorDate = exports.hasTag = exports.getTitleFromDescription = exports.stripHtmlTags = exports.firstValid = exports.hardTruncation = exports.truncatedAtSpace = exports.shortEnough = exports.baseDomain = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const element_1 = require("@wordpress/element");
 const i18n_1 = require("@wordpress/i18n");
@@ -46,6 +46,12 @@ exports.formatNextdoorDate = new Intl.DateTimeFormat('en-GB', {
     day: 'numeric',
     month: 'short',
 }).format;
+exports.formatThreadsDate = new Intl.DateTimeFormat('en-US', {
+    // Result: "'06/21/2024"
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+}).format;
 exports.formatTweetDate = new Intl.DateTimeFormat('en-US', {
     // Result: "Apr 7", "Dec 31"
     month: 'short',
@@ -64,6 +70,7 @@ exports.hashtagUrlMap = {
     instagram: 'https://www.instagram.com/explore/tags/%1$s',
     mastodon: 'https://%2$s/tags/%1$s',
     nextdoor: 'https://nextdoor.com/hashtag/%1$s',
+    threads: 'https://www.threads.net/search?q=%1$s&serp_type=tags',
 };
 /**
  * Prepares the text for the preview.

package/dist/cjs/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ tslib_1.__exportStar(require("./tumblr-preview"), exports);
 tslib_1.__exportStar(require("./facebook-preview"), exports);
 tslib_1.__exportStar(require("./mastodon-preview"), exports);
 tslib_1.__exportStar(require("./nextdoor-preview"), exports);
+tslib_1.__exportStar(require("./threads-preview"), exports);
 tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./instagram-preview"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,kEAAwC;AACxC,4DAAkC;AAClC,6DAAmC;AACnC,2DAAiC;AACjC,6DAAmC;AACnC,6DAAmC;AACnC,6DAAmC;AACnC,sDAA4B;AAC5B,8DAAoC;AACpC,kDAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,kEAAwC;AACxC,4DAAkC;AAClC,6DAAmC;AACnC,2DAAiC;AACjC,6DAAmC;AACnC,6DAAmC;AACnC,6DAAmC;AACnC,4DAAkC;AAClC,sDAA4B;AAC5B,8DAAoC;AACpC,kDAAwB"}

package/dist/cjs/threads-preview/card.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const helpers_1 = require("../helpers");
+const helpers_2 = require("./helpers");
+const Card = ({ image, title, url }) => {
+    const cardClassNames = (0, clsx_1.default)({
+        'threads-preview__card-has-image': !!image,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "threads-preview__card", children: (0, jsx_runtime_1.jsxs)("div", { className: cardClassNames, children: [image && (0, jsx_runtime_1.jsx)("img", { className: "threads-preview__card-image", src: image, alt: "" }), (0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__card-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "threads-preview__card-url", children: (0, helpers_1.baseDomain)(url || '') }), (0, jsx_runtime_1.jsx)("div", { className: "threads-preview__card-title", children: (0, helpers_2.threadsTitle)(title) })] })] }) }));
+};
+exports.Card = Card;
+//# sourceMappingURL=card.js.map

package/dist/cjs/threads-preview/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/threads-preview/card.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AACxB,wCAAwC;AACxC,uCAAyC;AAGlC,MAAM,IAAI,GAAiC,CAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAG,EAAE;IAC7E,MAAM,cAAc,GAAG,IAAA,cAAI,EAAE;QAC5B,iCAAiC,EAAE,CAAC,CAAE,KAAK;KAC3C,CAAE,CAAC;IAEJ,OAAO,CACN,gCAAK,SAAS,EAAC,uBAAuB,YACrC,iCAAK,SAAS,EAAG,cAAc,aAC5B,KAAK,IAAI,gCAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,EAC/E,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,gCAAK,SAAS,EAAC,2BAA2B,YAAG,IAAA,oBAAU,EAAE,GAAG,IAAI,EAAE,CAAE,GAAQ,EAC5E,gCAAK,SAAS,EAAC,6BAA6B,YAAG,IAAA,sBAAY,EAAE,KAAK,CAAE,GAAQ,IACvE,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC;AAhBW,QAAA,IAAI,QAgBf"}

package/dist/cjs/threads-preview/footer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Footer = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__footer", children: [(0, jsx_runtime_1.jsx)("span", { className: "threads-preview__icon--like", children: (0, jsx_runtime_1.jsx)("svg", { role: "img", viewBox: "0 0 18 18", children: (0, jsx_runtime_1.jsx)("path", { d: "M1.34375 7.53125L1.34375 7.54043C1.34374 8.04211 1.34372 8.76295 1.6611 9.65585C1.9795 10.5516 2.60026 11.5779 3.77681 12.7544C5.59273 14.5704 7.58105 16.0215 8.33387 16.5497C8.73525 16.8313 9.26573 16.8313 9.66705 16.5496C10.4197 16.0213 12.4074 14.5703 14.2232 12.7544C15.3997 11.5779 16.0205 10.5516 16.3389 9.65585C16.6563 8.76296 16.6563 8.04211 16.6562 7.54043V7.53125C16.6562 5.23466 15.0849 3.25 12.6562 3.25C11.5214 3.25 10.6433 3.78244 9.99228 4.45476C9.59009 4.87012 9.26356 5.3491 9 5.81533C8.73645 5.3491 8.40991 4.87012 8.00772 4.45476C7.35672 3.78244 6.47861 3.25 5.34375 3.25C2.9151 3.25 1.34375 5.23466 1.34375 7.53125Z", strokeWidth: "1.25" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: "threads-preview__icon--reply", children: (0, jsx_runtime_1.jsx)("svg", { role: "img", viewBox: "0 0 18 18", children: (0, jsx_runtime_1.jsx)("path", { d: "M15.376 13.2177L16.2861 16.7955L12.7106 15.8848C12.6781 15.8848 12.6131 15.8848 12.5806 15.8848C11.3779 16.5678 9.94767 16.8931 8.41995 16.7955C4.94194 16.5353 2.08152 13.7381 1.72397 10.2578C1.2689 5.63919 5.13697 1.76863 9.75264 2.22399C13.2307 2.58177 16.0261 5.41151 16.2861 8.92429C16.4161 10.453 16.0586 11.8841 15.376 13.0876C15.376 13.1526 15.376 13.1852 15.376 13.2177Z", strokeLinejoin: "round", strokeWidth: "1.25" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: "threads-preview__icon--repost", children: (0, jsx_runtime_1.jsxs)("svg", { role: "img", viewBox: "0 0 18 18", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.41256 1.23531C6.6349 0.971277 7.02918 0.937481 7.29321 1.15982L9.96509 3.40982C10.1022 3.52528 10.1831 3.69404 10.1873 3.87324C10.1915 4.05243 10.1186 4.2248 9.98706 4.34656L7.31518 6.81971C7.06186 7.05419 6.66643 7.03892 6.43196 6.7856C6.19748 6.53228 6.21275 6.13685 6.46607 5.90237L7.9672 4.51289H5.20312C3.68434 4.51289 2.45312 5.74411 2.45312 7.26289V9.51289V11.7629C2.45312 13.2817 3.68434 14.5129 5.20312 14.5129C5.5483 14.5129 5.82812 14.7927 5.82812 15.1379C5.82812 15.4831 5.5483 15.7629 5.20312 15.7629C2.99399 15.7629 1.20312 13.972 1.20312 11.7629V9.51289V7.26289C1.20312 5.05375 2.99399 3.26289 5.20312 3.26289H7.85002L6.48804 2.11596C6.22401 1.89362 6.19021 1.49934 6.41256 1.23531Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.5874 17.7904C11.3651 18.0545 10.9708 18.0883 10.7068 17.8659L8.03491 15.6159C7.89781 15.5005 7.81687 15.3317 7.81267 15.1525C7.80847 14.9733 7.8814 14.801 8.01294 14.6792L10.6848 12.206C10.9381 11.9716 11.3336 11.9868 11.568 12.2402C11.8025 12.4935 11.7872 12.8889 11.5339 13.1234L10.0328 14.5129H12.7969C14.3157 14.5129 15.5469 13.2816 15.5469 11.7629V9.51286V7.26286C15.5469 5.74408 14.3157 4.51286 12.7969 4.51286C12.4517 4.51286 12.1719 4.23304 12.1719 3.88786C12.1719 3.54269 12.4517 3.26286 12.7969 3.26286C15.006 3.26286 16.7969 5.05373 16.7969 7.26286V9.51286V11.7629C16.7969 13.972 15.006 15.7629 12.7969 15.7629H10.15L11.512 16.9098C11.776 17.1321 11.8098 17.5264 11.5874 17.7904Z" })] }) }), (0, jsx_runtime_1.jsx)("span", { className: "threads-preview__icon--share", children: (0, jsx_runtime_1.jsxs)("svg", { role: "img", viewBox: "0 0 18 18", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.6097 4.09082L6.65039 9.11104", strokeLinejoin: "round", strokeWidth: "1.25" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.79128 14.439C8.00463 15.3275 8.11131 15.7718 8.33426 15.932C8.52764 16.071 8.77617 16.1081 9.00173 16.0318C9.26179 15.9438 9.49373 15.5501 9.95761 14.7628L15.5444 5.2809C15.8883 4.69727 16.0603 4.40546 16.0365 4.16566C16.0159 3.95653 15.9071 3.76612 15.7374 3.64215C15.5428 3.5 15.2041 3.5 14.5267 3.5H3.71404C2.81451 3.5 2.36474 3.5 2.15744 3.67754C1.97758 3.83158 1.88253 4.06254 1.90186 4.29856C1.92415 4.57059 2.24363 4.88716 2.88259 5.52032L6.11593 8.7243C6.26394 8.87097 6.33795 8.94431 6.39784 9.02755C6.451 9.10144 6.4958 9.18101 6.53142 9.26479C6.57153 9.35916 6.59586 9.46047 6.64451 9.66309L7.79128 14.439Z", strokeLinejoin: "round", strokeWidth: "1.25" })] }) })] }));
+};
+exports.Footer = Footer;
+//# sourceMappingURL=footer.js.map

package/dist/cjs/threads-preview/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/threads-preview/footer.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,MAAM,GAAa,GAAG,EAAE;IACpC,OAAO,CACN,iCAAK,SAAS,EAAC,yBAAyB,aACvC,iCAAM,SAAS,EAAC,6BAA6B,YAC5C,gCAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,YAClC,iCACC,CAAC,EAAC,8nBAA8nB,EAChoB,WAAW,EAAC,MAAM,GACX,GACH,GACA,EACP,iCAAM,SAAS,EAAC,8BAA8B,YAC7C,gCAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,YAClC,iCACC,CAAC,EAAC,4XAA4X,EAC9X,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,MAAM,GACX,GACH,GACA,EACP,iCAAM,SAAS,EAAC,+BAA+B,YAC9C,iCAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,aAClC,iCAAM,CAAC,EAAC,8rBAA8rB,GAAQ,EAC9sB,iCAAM,CAAC,EAAC,wrBAAwrB,GAAQ,IACnsB,GACA,EACP,iCAAM,SAAS,EAAC,8BAA8B,YAC7C,iCAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,aAClC,iCACC,CAAC,EAAC,kCAAkC,EACpC,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,MAAM,GACX,EACR,iCACC,CAAC,EAAC,8mBAA8mB,EAChnB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,MAAM,GACX,IACH,GACA,IACF,CACN,CAAC;AACH,CAAC,CAAC;AA1CW,QAAA,MAAM,UA0CjB"}

package/dist/cjs/threads-preview/header.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18n_1 = require("@wordpress/i18n");
+const helpers_1 = require("../helpers");
+const Header = ({ name, date }) => {
+    const postDate = date || new Date();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__header", children: [(0, jsx_runtime_1.jsx)("span", { className: "threads-preview__name", children: name || (0, i18n_1.__)('Account Name', 'social-previews') }), (0, jsx_runtime_1.jsx)("time", { className: "threads-preview__date", dateTime: postDate.toISOString(), children: (0, helpers_1.formatThreadsDate)(postDate) })] }));
+};
+exports.Header = Header;
+//# sourceMappingURL=header.js.map

package/dist/cjs/threads-preview/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/threads-preview/header.tsx"],"names":[],"mappings":";;;;AAAA,0CAAqC;AACrC,wCAA+C;AAGxC,MAAM,MAAM,GAA4B,CAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAG,EAAE;IACnE,MAAM,QAAQ,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;IAEpC,OAAO,CACN,iCAAK,SAAS,EAAC,yBAAyB,aACvC,iCAAM,SAAS,EAAC,uBAAuB,YACpC,IAAI,IAAI,IAAA,SAAE,EAAE,cAAc,EAAE,iBAAiB,CAAE,GAC3C,EACP,iCAAM,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAG,QAAQ,CAAC,WAAW,EAAE,YACtE,IAAA,2BAAiB,EAAE,QAAQ,CAAE,GACzB,IACF,CACN,CAAC;AACH,CAAC,CAAC;AAbW,QAAA,MAAM,UAajB"}

package/dist/cjs/threads-preview/helpers.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.threadsTitle = void 0;
+const helpers_1 = require("../helpers");
+const TITLE_LENGTH = 120;
+const threadsTitle = (text) => (0, helpers_1.firstValid)((0, helpers_1.shortEnough)(TITLE_LENGTH), (0, helpers_1.hardTruncation)(TITLE_LENGTH))((0, helpers_1.stripHtmlTags)(text)) || '';
+exports.threadsTitle = threadsTitle;
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/threads-preview/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/threads-preview/helpers.ts"],"names":[],"mappings":";;;AAAA,wCAA+F;AAE/F,MAAM,YAAY,GAAG,GAAG,CAAC;AAElB,MAAM,YAAY,GAAc,CAAE,IAAI,EAAG,EAAE,CACjD,IAAA,oBAAU,EACT,IAAA,qBAAW,EAAE,YAAY,CAAE,EAC3B,IAAA,wBAAc,EAAE,YAAY,CAAE,CAC9B,CAAE,IAAA,uBAAa,EAAE,IAAI,CAAE,CAAE,IAAI,EAAE,CAAC;AAJrB,QAAA,YAAY,gBAIS"}

package/dist/cjs/threads-preview/icons/default-avatar.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultAvatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DefaultAvatar = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "36", height: "36", viewBox: "0 0 6.3500001 6.3500001", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("circle", { fill: "#fff", fillOpacity: "1", stroke: "#dbdbdb", strokeWidth: "0.144331", strokeOpacity: "1", strokeDasharray: "none", cx: "3.175", cy: "3.175", r: "3.1028347" }), (0, jsx_runtime_1.jsx)("path", { fill: "#dbdbdb", fillOpacity: "1", stroke: "#dbdbdb", strokeWidth: "0.00924637", strokeOpacity: "1", d: "m 3.175,0.10128581 c -0.2931267,2e-6 -0.5848453,0.0419523 -0.866097,0.1245402 C 2.0276513,0.30840593 1.7596787,0.43063749 1.5130859,0.58911133 1.1424103,0.82733009 0.82733009,1.1424103 0.58911133,1.5130859 0.43063749,1.7596787 0.30840793,2.0276513 0.22582601,2.308903 0.14323609,2.5901547 0.10128781,2.8818733 0.10128581,3.175 c 5.02e-4,0.1391369 0.0101356,0.2782044 0.0294556,0.4159953 0.01723,0.1151309 0.0411535,0.2291443 0.0713135,0.3415812 0.0045,0.0218 0.009469,0.043412 0.0144694,0.065112 0.03449,0.1203489 0.076152,0.2387347 0.12505697,0.3539836 0.0045,0.01235 0.009253,0.0244 0.0139526,0.03669 0.05201,0.1191279 0.111111,0.235155 0.17776693,0.3467489 0.0038,0.0071 0.008066,0.013651 0.0118856,0.020671 0.0694099,0.1145998 0.14620121,0.2246049 0.22996012,0.3291788 0.0022,0.0029 0.004001,0.00589 0.006201,0.00879 0.0861099,0.1069859 0.17942183,0.208301 0.27905277,0.3028239 0.3233817,-0.5511754 0.8330913,-0.701365 1.065568,-0.697115 h 2.0629232 c 0.5904654,-0.0058 0.9954919,0.5335544 1.1032918,0.6945312 0.0993,-0.09444 0.1921923,-0.1954752 0.2780192,-0.3023071 0.0023,-0.0031 0.00442,-0.0062 0.00672,-0.0093 0.08334,-0.1042929 0.1598386,-0.2139114 0.2289266,-0.3281453 0.004,-0.0073 0.00841,-0.014891 0.012402,-0.022221 0.0663,-0.1112249 0.1254962,-0.2265057 0.1772502,-0.3451986 0.0048,-0.01266 0.00934,-0.025004 0.013953,-0.037724 0.04856,-0.1146958 0.090239,-0.2321796 0.1245402,-0.3519165 0.0053,-0.02288 0.010256,-0.046256 0.014986,-0.069246 0.02971,-0.1111369 0.05321,-0.2236822 0.07028,-0.3374471 0.01929,-0.1376588 0.028946,-0.2764746 0.029456,-0.4154785 0,-0.0503 -0.00112,-0.1006562 -0.00362,-0.1508952 -0.0049,-0.1004917 -0.014695,-0.20073 -0.029455,-0.3002469 C 6.2008813,2.6243448 6.1811701,2.5258685 6.1567301,2.4282756 6.1445102,2.3794856 6.1310225,2.330673 6.1164225,2.282548 6.0286626,1.9932503 5.8988742,1.7184607 5.7309163,1.4670939 5.6750164,1.383444 5.6149083,1.3030201 5.5510824,1.2252482 5.5191724,1.1863682 5.4861603,1.1477995 5.4523804,1.1105265 5.3848104,1.0359766 5.3140214,0.96518559 5.2394735,0.89761963 5.1276256,0.79624473 5.008419,0.70295057 4.8829061,0.61908366 4.7573922,0.53522374 4.6255915,0.46089717 4.4891317,0.39635824 c -0.09095,-0.04302 -0.1838061,-0.0813435 -0.278536,-0.11523845 -0.09473,-0.0339 -0.1912764,-0.0634 -0.2888713,-0.0878499 C 3.7752926,0.15658989 3.6265025,0.13054519 3.4762736,0.11575521 3.3761487,0.10585522 3.2756099,0.10128581 3.175,0.10128581 Z m 0,1.44125569 A 1.4106187,1.4106187 0 0 1 4.5857666,2.9533081 1.4106187,1.4106187 0 0 1 3.175,4.3635579 1.4106187,1.4106187 0 0 1 1.7642334,2.9533081 1.4106187,1.4106187 0 0 1 3.175,1.5425415 Z" })] }) }) }));
+};
+exports.DefaultAvatar = DefaultAvatar;
+//# sourceMappingURL=default-avatar.js.map

package/dist/cjs/threads-preview/icons/default-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-avatar.js","sourceRoot":"","sources":["../../../../src/threads-preview/icons/default-avatar.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,OAAO,CACN,gCACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,yBAAyB,EACjC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,4BAA4B,YAElC,wCACC,0CACC,mCACC,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,UAAU,EACtB,aAAa,EAAC,GAAG,EACjB,eAAe,EAAC,MAAM,EACtB,EAAE,EAAC,OAAO,EACV,EAAE,EAAC,OAAO,EACV,CAAC,EAAC,WAAW,GACZ,EACF,iCACC,IAAI,EAAC,SAAS,EACd,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,YAAY,EACxB,aAAa,EAAC,GAAG,EACjB,CAAC,EAAC,qjFAAqjF,GACtjF,IACC,GACD,GACC,CACN,CAAC;AACH,CAAC,CAAC;AAlCW,QAAA,aAAa,iBAkCxB"}

package/dist/cjs/threads-preview/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./link-preview"), exports);
+tslib_1.__exportStar(require("./post-preview"), exports);
+tslib_1.__exportStar(require("./previews"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/threads-preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/threads-preview/index.tsx"],"names":[],"mappings":";;;AAAA,yDAA+B;AAC/B,yDAA+B;AAC/B,qDAA2B"}

package/dist/cjs/threads-preview/link-preview.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreadsLinkPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const post_preview_1 = require("./post-preview");
+const ThreadsLinkPreview = (props) => {
+    return ((0, jsx_runtime_1.jsx)(post_preview_1.ThreadsPostPreview, { ...props, 
+        // Override the props that are irrelevant to link preview
+        text: "", media: undefined }));
+};
+exports.ThreadsLinkPreview = ThreadsLinkPreview;
+//# sourceMappingURL=link-preview.js.map

package/dist/cjs/threads-preview/link-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/threads-preview/link-preview.tsx"],"names":[],"mappings":";;;;AAAA,iDAAoD;AAG7C,MAAM,kBAAkB,GAAoC,CAAE,KAAK,EAAG,EAAE;IAC9E,OAAO,CACN,uBAAC,iCAAkB,OACb,KAAK;QACV,yDAAyD;QACzD,IAAI,EAAC,EAAE,EACP,KAAK,EAAG,SAAS,GAChB,CACF,CAAC;AACH,CAAC,CAAC;AATW,QAAA,kBAAkB,sBAS7B"}

package/dist/cjs/threads-preview/media.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Media = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_1 = require("react");
+const Media = ({ media }) => {
+    // Ensure we're only trying to show valid media, and the correct quantity.
+    const filteredMedia = media
+        // Only image/ and video/ mime types are supported.
+        .filter((mediaItem) => mediaItem.type.startsWith('image/') || mediaItem.type.startsWith('video/'))
+        .filter((mediaItem, idx, array) => {
+        // We'll always keep the first item.
+        if (0 === idx) {
+            return true;
+        }
+        // If the first item was a video or GIF, discard all subsequent items.
+        if (array[0].type.startsWith('video/') || 'image/gif' === array[0].type) {
+            return false;
+        }
+        // The first item wasn't a video or GIF, so discard all subsequent videos and GIFs.
+        if (mediaItem.type.startsWith('video/') || 'image/gif' === mediaItem.type) {
+            return false;
+        }
+        return true;
+    })
+        // We only want the first four items of the array, at most.
+        .slice(0, 4);
+    if (0 === filteredMedia.length) {
+        return null;
+    }
+    const isVideo = filteredMedia[0].type.startsWith('video/');
+    const mediaClasses = (0, clsx_1.default)([
+        'threads-preview__media',
+        'threads-preview__media-children-' + filteredMedia.length,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: mediaClasses, children: filteredMedia.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isVideo ? (
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            (0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `threads-preview__media-item-${index}`))) }));
+};
+exports.Media = Media;
+//# sourceMappingURL=media.js.map

package/dist/cjs/threads-preview/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/threads-preview/media.tsx"],"names":[],"mappings":";;;;;AAAA,wDAAwB;AACxB,iCAAiC;AAG1B,MAAM,KAAK,GAA2B,CAAE,EAAE,KAAK,EAAE,EAAG,EAAE;IAC5D,0EAA0E;IAC1E,MAAM,aAAa,GAAG,KAAK;QAC1B,mDAAmD;SAClD,MAAM,CACN,CAAE,SAAS,EAAG,EAAE,CACf,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAC/E;SACA,MAAM,CAAE,CAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAG,EAAE;QACpC,oCAAoC;QACpC,IAAK,CAAC,KAAK,GAAG,EAAG,CAAC;YACjB,OAAO,IAAI,CAAC;QACb,CAAC;QAED,sEAAsE;QACtE,IAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,EAAG,CAAC;YACjF,OAAO,KAAK,CAAC;QACd,CAAC;QAED,mFAAmF;QACnF,IAAK,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,SAAS,CAAC,IAAI,EAAG,CAAC;YAC/E,OAAO,KAAK,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC;IACb,CAAC,CAAE;QACH,2DAA2D;SAC1D,KAAK,CAAE,CAAC,EAAE,CAAC,CAAE,CAAC;IAEhB,IAAK,CAAC,KAAK,aAAa,CAAC,MAAM,EAAG,CAAC;QAClC,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,OAAO,GAAG,aAAa,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAAC;IAE/D,MAAM,YAAY,GAAG,IAAA,cAAI,EAAE;QAC1B,wBAAwB;QACxB,kCAAkC,GAAG,aAAa,CAAC,MAAM;KACzD,CAAE,CAAC;IAEJ,OAAO,CACN,gCAAK,SAAS,EAAG,YAAY,YAC1B,aAAa,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC,CAC5C,uBAAC,gBAAQ,cACN,OAAO,CAAC,CAAC,CAAC;YACX,sDAAsD;YACtD,kCAAO,QAAQ,kBACd,mCAAQ,GAAG,EAAG,SAAS,CAAC,GAAG,EAAG,IAAI,EAAG,SAAS,CAAC,IAAI,GAAK,GACjD,CACR,CAAC,CAAC,CAAC,CACH,gCAAK,GAAG,EAAG,SAAS,CAAC,GAAG,IAAI,EAAE,EAAG,GAAG,EAAG,SAAS,CAAC,GAAG,GAAK,CACzD,IARc,+BAAgC,KAAM,EAAE,CAS7C,CACX,CAAE,GACE,CACN,CAAC;AACH,CAAC,CAAC;AAxDW,QAAA,KAAK,SAwDhB"}

package/dist/cjs/threads-preview/post-preview.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreadsPostPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const helpers_1 = require("../helpers");
+const card_1 = require("./card");
+const footer_1 = require("./footer");
+const header_1 = require("./header");
+const media_1 = require("./media");
+const sidebar_1 = require("./sidebar");
+require("./style.scss");
+const ThreadsPostPreview = ({ date, description, image, media, name, profileImage, showThreadConnector, text, title, url, }) => {
+    const hasMedia = !!media?.length;
+    const displayAsCard = url && image && !hasMedia;
+    // Attach the URL to the text if not displaying as a card and it's not already in the text.
+    const textToDisplay = !displayAsCard && text && url && !text.includes(url) ? `${text} ${url}` : text;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "threads-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__container", children: [(0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { profileImage: profileImage, showThreadConnector: showThreadConnector }), (0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__main", children: [(0, jsx_runtime_1.jsx)(header_1.Header, { name: name, date: date }), (0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__content", children: [textToDisplay ? ((0, jsx_runtime_1.jsx)("div", { className: "threads-preview__text", children: (0, helpers_1.preparePreviewText)(textToDisplay, { platform: 'threads' }) })) : null, hasMedia ? (0, jsx_runtime_1.jsx)(media_1.Media, { media: media }) : null, displayAsCard ? ((0, jsx_runtime_1.jsx)(card_1.Card, { description: description || '', image: image, title: title || '', url: url })) : null] }), (0, jsx_runtime_1.jsx)(footer_1.Footer, {})] })] }) }));
+};
+exports.ThreadsPostPreview = ThreadsPostPreview;
+//# sourceMappingURL=post-preview.js.map

package/dist/cjs/threads-preview/post-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/threads-preview/post-preview.tsx"],"names":[],"mappings":";;;;AAAA,wCAAgD;AAChD,iCAA8B;AAC9B,qCAAkC;AAClC,qCAAkC;AAClC,mCAAgC;AAChC,uCAAoC;AAGpC,wBAAsB;AAEf,MAAM,kBAAkB,GAAoC,CAAE,EACpE,IAAI,EACJ,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,KAAK,EACL,GAAG,GACH,EAAG,EAAE;IACL,MAAM,QAAQ,GAAG,CAAC,CAAE,KAAK,EAAE,MAAM,CAAC;IAElC,MAAM,aAAa,GAAG,GAAG,IAAI,KAAK,IAAI,CAAE,QAAQ,CAAC;IAEjD,2FAA2F;IAC3F,MAAM,aAAa,GAClB,CAAE,aAAa,IAAI,IAAI,IAAI,GAAG,IAAI,CAAE,IAAI,CAAC,QAAQ,CAAE,GAAG,CAAE,CAAC,CAAC,CAAC,GAAI,IAAK,IAAK,GAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAExF,OAAO,CACN,gCAAK,SAAS,EAAC,0BAA0B,YACxC,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,uBAAC,iBAAO,IAAC,YAAY,EAAG,YAAY,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,EACrF,iCAAK,SAAS,EAAC,uBAAuB,aACrC,uBAAC,eAAM,IAAC,IAAI,EAAG,IAAI,EAAG,IAAI,EAAG,IAAI,GAAK,EACtC,iCAAK,SAAS,EAAC,0BAA0B,aACtC,aAAa,CAAC,CAAC,CAAC,CACjB,gCAAK,SAAS,EAAC,uBAAuB,YACnC,IAAA,4BAAkB,EAAE,aAAa,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAE,GACzD,CACN,CAAC,CAAC,CAAC,IAAI,EACN,QAAQ,CAAC,CAAC,CAAC,uBAAC,aAAK,IAAC,KAAK,EAAG,KAAK,GAAK,CAAC,CAAC,CAAC,IAAI,EAC3C,aAAa,CAAC,CAAC,CAAC,CACjB,uBAAC,WAAI,IACJ,WAAW,EAAG,WAAW,IAAI,EAAE,EAC/B,KAAK,EAAG,KAAK,EACb,KAAK,EAAG,KAAK,IAAI,EAAE,EACnB,GAAG,EAAG,GAAG,GACR,CACF,CAAC,CAAC,CAAC,IAAI,IACH,EACN,uBAAC,eAAM,KAAG,IACL,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC;AA/CW,QAAA,kBAAkB,sBA+C7B"}

package/dist/cjs/threads-preview/previews.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreadsPreviews = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const i18n_1 = require("@wordpress/i18n");
+const section_heading_1 = tslib_1.__importDefault(require("../shared/section-heading"));
+const link_preview_1 = require("./link-preview");
+const post_preview_1 = require("./post-preview");
+const ThreadsPreviews = ({ headingLevel, hideLinkPreview, hidePostPreview, posts, }) => {
+    if (!posts?.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "social-preview threads-preview", children: [!hidePostPreview && ((0, jsx_runtime_1.jsxs)("section", { className: "social-preview__section threads-preview__section", children: [(0, jsx_runtime_1.jsx)(section_heading_1.default, { level: headingLevel, children: 
+                        // translators: refers to a social post on Threads
+                        (0, i18n_1.__)('Your post', 'social-previews') }), (0, jsx_runtime_1.jsx)("p", { className: "social-preview__section-desc", children: (0, i18n_1.__)('This is what your social post will look like on Threads:', 'social-previews') }), posts.map((post, index) => {
+                        const isLast = index + 1 === posts.length;
+                        return ((0, jsx_runtime_1.jsx)(post_preview_1.ThreadsPostPreview, { ...post, showThreadConnector: !isLast }, `threads-preview__post-${index}`));
+                    })] })), !hideLinkPreview ? ((0, jsx_runtime_1.jsxs)("section", { className: "social-preview__section threads-preview__section", children: [(0, jsx_runtime_1.jsx)(section_heading_1.default, { level: headingLevel, children: 
+                        // translators: refers to a link to a Threads post
+                        (0, i18n_1.__)('Link preview', 'social-previews') }), posts[0].image ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { className: "social-preview__section-desc", children: [(0, i18n_1.__)('This is what it will look like when someone shares the link to your WordPress post on Threads.', 'social-previews'), "\u00A0", (0, jsx_runtime_1.jsx)(components_1.ExternalLink, { href: "https://jetpack.com/support/jetpack-social-image-generator", children: (0, i18n_1.__)('Learn more about links', 'social-previews') })] }), (0, jsx_runtime_1.jsx)(link_preview_1.ThreadsLinkPreview, { ...posts[0], name: "", profileImage: "" })] })) : ((0, jsx_runtime_1.jsx)("p", { className: "social-preview__section-desc", children: (0, i18n_1.__)('Threads link preview requires an image to be set for the post. Please add an image to see the preview.', 'social-previews') }))] })) : null] }));
+};
+exports.ThreadsPreviews = ThreadsPreviews;
+//# sourceMappingURL=previews.js.map

package/dist/cjs/threads-preview/previews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/threads-preview/previews.tsx"],"names":[],"mappings":";;;;;AAAA,sDAAqD;AACrD,0CAAqC;AACrC,wFAAuD;AACvD,iDAAoD;AACpD,iDAAoD;AAG7C,MAAM,eAAe,GAAqC,CAAE,EAClE,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACL,EAAG,EAAE;IACL,IAAK,CAAE,KAAK,EAAE,MAAM,EAAG,CAAC;QACvB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,iCAAK,SAAS,EAAC,gCAAgC,aAC5C,CAAE,eAAe,IAAI,CACtB,qCAAS,SAAS,EAAC,kDAAkD,aACpE,uBAAC,yBAAc,IAAC,KAAK,EAAG,YAAY;wBAElC,kDAAkD;wBAClD,IAAA,SAAE,EAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,8BAAG,SAAS,EAAC,8BAA8B,YACxC,IAAA,SAAE,EAAE,0DAA0D,EAAE,iBAAiB,CAAE,GAClF,EACF,KAAK,CAAC,GAAG,CAAE,CAAE,IAAI,EAAE,KAAK,EAAG,EAAE;wBAC9B,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC;wBAC1C,OAAO,CACN,uBAAC,iCAAkB,OAEb,IAAI,EACT,mBAAmB,EAAG,CAAE,MAAM,IAFxB,yBAA0B,KAAM,EAAE,CAGvC,CACF,CAAC;oBACH,CAAC,CAAE,IACM,CACV,EACC,CAAE,eAAe,CAAC,CAAC,CAAC,CACrB,qCAAS,SAAS,EAAC,kDAAkD,aACpE,uBAAC,yBAAc,IAAC,KAAK,EAAG,YAAY;wBAElC,kDAAkD;wBAClD,IAAA,SAAE,EAAE,cAAc,EAAE,iBAAiB,CAAE,GAExB,EACf,KAAK,CAAE,CAAC,CAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CACpB,6DACC,+BAAG,SAAS,EAAC,8BAA8B,aACxC,IAAA,SAAE,EACH,gGAAgG,EAChG,iBAAiB,CACjB,YAED,uBAAC,yBAAY,IAAC,IAAI,EAAC,4DAA4D,YAC5E,IAAA,SAAE,EAAE,wBAAwB,EAAE,iBAAiB,CAAE,GACrC,IACZ,EACJ,uBAAC,iCAAkB,OAAM,KAAK,CAAE,CAAC,CAAE,EAAG,IAAI,EAAC,EAAE,EAAC,YAAY,EAAC,EAAE,GAAG,IAC9D,CACH,CAAC,CAAC,CAAC,CACH,8BAAG,SAAS,EAAC,8BAA8B,YACxC,IAAA,SAAE,EACH,wGAAwG,EACxG,iBAAiB,CACjB,GACE,CACJ,IACQ,CACV,CAAC,CAAC,CAAC,IAAI,IACH,CACN,CAAC;AACH,CAAC,CAAC;AArEW,QAAA,eAAe,mBAqE1B"}

package/dist/cjs/threads-preview/sidebar.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18n_1 = require("@wordpress/i18n");
+const default_avatar_1 = require("./icons/default-avatar");
+const Sidebar = ({ profileImage, showThreadConnector }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "threads-preview__sidebar", children: [(0, jsx_runtime_1.jsx)("div", { className: "threads-preview__profile-image", children: profileImage ? ((0, jsx_runtime_1.jsx)("img", { alt: (0, i18n_1.__)('Threads profile image', 'social-previews'), src: profileImage })) : ((0, jsx_runtime_1.jsx)(default_avatar_1.DefaultAvatar, {})) }), showThreadConnector && (0, jsx_runtime_1.jsx)("div", { className: "threads-preview__connector" })] }));
+};
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=sidebar.js.map

package/dist/cjs/threads-preview/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../src/threads-preview/sidebar.tsx"],"names":[],"mappings":";;;;AAAA,0CAAqC;AACrC,2DAAuD;AAGhD,MAAM,OAAO,GAA6B,CAAE,EAAE,YAAY,EAAE,mBAAmB,EAAE,EAAG,EAAE;IAC5F,OAAO,CACN,iCAAK,SAAS,EAAC,0BAA0B,aACxC,gCAAK,SAAS,EAAC,gCAAgC,YAC5C,YAAY,CAAC,CAAC,CAAC,CAChB,gCAAK,GAAG,EAAG,IAAA,SAAE,EAAE,uBAAuB,EAAE,iBAAiB,CAAE,EAAG,GAAG,EAAG,YAAY,GAAK,CACrF,CAAC,CAAC,CAAC,CACH,uBAAC,8BAAa,KAAG,CACjB,GACI,EACJ,mBAAmB,IAAI,gCAAK,SAAS,EAAC,4BAA4B,GAAG,IAClE,CACN,CAAC;AACH,CAAC,CAAC;AAbW,QAAA,OAAO,WAalB"}

package/dist/cjs/threads-preview/style.scss

@@ -0,0 +1,203 @@
+/* stylelint-disable scales/radii */
+/* stylelint-disable declaration-property-unit-allowed-list */
+@import "./variables.scss";
+
+.threads-preview {
+	padding: 20px;
+}
+
+.threads-preview__wrapper {
+	background-color: #fff;
+	max-width: clamp(200px, 100%, 635px);
+	margin-inline: auto;
+	padding-top: 1rem;
+	border-radius: 4px;
+	padding-inline-end: 1rem;
+}
+
+.threads-preview__section.social-preview__section {
+	width: clamp(200px, 100%, 635px);
+
+	// To compensate for the padding for profile picture in threads threads
+	.social-preview__section-heading,
+	.social-preview__section-desc {
+		padding-inline-start: 17px;
+	}
+}
+
+.threads-preview__container {
+	display: grid;
+	grid-template-columns: 50px auto;
+	margin-bottom: 5px;
+	font-size: $threads-font-size;
+	line-height: $threads-line-height;
+	color: $threads-text-primary-color;
+
+	.threads-preview__sidebar {
+		display: grid;
+		grid-template-rows: 35px auto;
+		justify-items: center;
+
+		.threads-preview__profile-image {
+			display: flex;
+			align-items: center;
+			max-width: 36px;
+			max-height: 36px;
+			border-radius: 50%;
+			overflow: hidden;
+
+			img {
+				object-fit: cover;
+				width: 100%;
+			}
+		}
+
+		.threads-preview__connector {
+			width: 2px;
+			background-color: #8c8f94;
+		}
+	}
+
+	.threads-preview__main {
+		padding-bottom: 1rem;
+		overflow: hidden;
+	}
+
+	.threads-preview__header {
+		display: flex;
+		gap: 6px;
+		font-size: 16px;
+		line-height: 18px;
+		margin-bottom: 2px;
+	}
+
+	.threads-preview__name {
+		font-weight: 600;
+		font-size: 15px;
+	}
+
+	.threads-preview__date {
+		color: $threads-text-secondary-color;
+	}
+
+	.threads-preview__content {
+
+		.threads-preview__text {
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		.threads-preview__media {
+			border-radius: 15px;
+			overflow: hidden;
+			display: grid;
+			grid-gap: 2px;
+			grid-template-areas: "a";
+			height: 300px;
+			margin-top: 12px;
+
+			img,
+			video {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+
+				&:nth-child(1) {
+					grid-area: a;
+				}
+
+				&:nth-child(2) {
+					grid-area: b;
+				}
+
+				&:nth-child(3) {
+					grid-area: c;
+				}
+
+				&:nth-child(4) {
+					grid-area: d;
+				}
+			}
+
+			&.threads-preview__media-children-2 {
+				grid-template-areas: "a b";
+			}
+
+			&.threads-preview__media-children-3 {
+				grid-template-areas:
+					"a b"
+					"a c";
+			}
+
+			&.threads-preview__media-children-4 {
+				grid-template-areas:
+					"a b"
+					"c d";
+			}
+		}
+
+		.threads-preview__card {
+			margin-top: 12px;
+			margin-bottom: 12px;
+			overflow: hidden;
+			border: 1px solid #e1e8ed;
+			border-radius: 8px;
+
+			.threads-preview__card-image {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				aspect-ratio: 16/9;
+			}
+
+			.threads-preview__card-body {
+				padding: 0.75em;
+				text-decoration: none;
+				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+				color: var(--studio-black);
+				text-align: left;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				gap: 2px;
+			}
+
+			.threads-preview__card-title {
+				text-overflow: ellipsis;
+			}
+
+			.threads-preview__card-url {
+				font-size: 12px;
+				text-transform: lowercase;
+				color: $threads-text-secondary-color;
+				white-space: nowrap;
+				overflow-inline: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.threads-preview__footer {
+		display: flex;
+		gap: 2.5rem;
+		margin-top: 1rem;
+
+		svg {
+			height: 19px;
+			width: 19px;
+			fill: $threads-actions-icon-color;
+		}
+	}
+
+	.threads-preview__icon {
+
+		&--like,
+		&--reply,
+		&--share {
+			svg {
+				fill: transparent;
+				stroke: $threads-actions-icon-color;
+			}
+		}
+	}
+}

package/dist/cjs/threads-preview/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/threads-preview/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/threads-preview/types.ts"],"names":[],"mappings":""}

package/dist/cjs/threads-preview/variables.scss

@@ -0,0 +1,5 @@
+$threads-font-size: 15px !default;
+$threads-line-height: 21px !default;
+$threads-text-primary-color: rgb(0, 0, 0) !default;
+$threads-text-secondary-color: rgb(153, 153, 153) !default;
+$threads-actions-icon-color: rgb(66, 66, 66) !default;