@makeswift/runtime 0.2.18 → 0.3.0

package/dist/Root.es.js

@@ -1,29 +1,11 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import styled, { createGlobalStyle } from "styled-components";
+var _a;
 import { normalize } from "polished";
-import { forwardRef } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { E as Element } from "./index.es.js";
-import { h as cssGridItem } from "./cssMediaRules.es.js";
-import { B as BackgroundsContainer } from "./index.es2.js";
+import * as React from "react";
+import { forwardRef, useRef } from "react";
+import { q as useStyle, K as serializeStyles, L as insertStyles, E as Element } from "./index.es.js";
+import { jsx } from "react/jsx-runtime";
+import { B as BackgroundsContainer, G as GridItem } from "./grid-item.es.js";
+import { injectGlobal, cache } from "@emotion/css";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
 import "redux";
@@ -38,7 +20,6 @@ import "slate";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
@@ -57,15 +38,15 @@ import "corporate-ipsum";
 import "framer-motion";
 import "next/image";
 import "react-player";
-const PlaceholderBase = styled.div`
-  width: 100%;
-  background: rgba(161, 168, 194, 0.18);
-  height: 80px;
-  padding: 8px;
-`;
-var Placeholder = forwardRef(function Placeholder2(props, ref) {
-  return /* @__PURE__ */ jsx(PlaceholderBase, __spreadProps(__spreadValues({}, props), {
+var Placeholder = forwardRef(function Placeholder2(_props, ref) {
+  return /* @__PURE__ */ jsx("div", {
     ref,
+    className: useStyle({
+      width: "100%",
+      background: "rgba(161, 168, 194, 0.18)",
+      height: 80,
+      padding: 8
+    }),
     children: /* @__PURE__ */ jsx("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       width: "100%",
@@ -86,56 +67,97 @@ var Placeholder = forwardRef(function Placeholder2(props, ref) {
         ry: "4"
       })
     })
-  }));
+  });
 });
-const Normalize = createGlobalStyle`
-  html {
-    box-sizing: border-box;
-  }
-
-  *, *::before, *::after {
-    box-sizing: inherit;
-  }
-
-  ${normalize()}
-`;
-const Grid = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-const GridItem = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop.toString())
-})`
-  display: flex;
-  align-items: flex-start;
-  ${cssGridItem()}
-`;
+const isServer = typeof window === "undefined";
+const useInsertionEffectSpecifier = "useInsertionEffect";
+const useInsertionEffect = (_a = React[useInsertionEffectSpecifier]) != null ? _a : React.useLayoutEffect;
+function useGlobalStyle(...args) {
+  if (isServer)
+    return injectGlobal(args);
+  const serialized = serializeStyles(args, cache.registered);
+  const sheetRef = useRef();
+  useInsertionEffect(() => {
+    const key = `${cache.key}-global`;
+    const cacheSheet = cache.sheet;
+    const sheet = new cacheSheet.constructor({
+      key,
+      nonce: cacheSheet.nonce,
+      container: cacheSheet.container,
+      speedy: cacheSheet.isSpeedy
+    });
+    const node = document.querySelector(`style[data-emotion="${key} ${serialized.name}"]`);
+    if (cache.sheet.tags.length > 0) {
+      sheet.before = cache.sheet.tags[0];
+    }
+    let rehydrating = false;
+    if (node != null) {
+      rehydrating = true;
+      node.setAttribute("data-emotion", key);
+      sheet.hydrate([node]);
+    }
+    sheetRef.current = [sheet, rehydrating];
+    return () => {
+      sheet.flush();
+    };
+  });
+  useInsertionEffect(() => {
+    var _a2;
+    const [sheet, rehydrating] = (_a2 = sheetRef.current) != null ? _a2 : [];
+    if (sheet == null || rehydrating == null)
+      return;
+    if (rehydrating) {
+      sheetRef.current = [sheet, false];
+      return;
+    }
+    if (serialized.next != null) {
+      insertStyles(cache, serialized.next, true);
+    }
+    if (sheet.tags.length > 0) {
+      const element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
+      sheet.before = element;
+      sheet.flush();
+    }
+    cache.insert("", serialized, sheet, false);
+  });
+}
 const Root = forwardRef(function Page({
   children,
   backgrounds,
   rowGap,
   columnGap
 }, ref) {
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Normalize, {}), /* @__PURE__ */ jsx(BackgroundsContainer, {
-      ref,
-      style: {
-        background: "white"
-      },
-      backgrounds,
-      children: /* @__PURE__ */ jsx(Grid, {
-        children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem, {
-          grid: children.columns,
-          index,
-          columnGap,
-          rowGap,
-          children: /* @__PURE__ */ jsx(Element, {
-            element: child
-          })
-        }, child.key)) : /* @__PURE__ */ jsx(Placeholder, {})
-      })
-    })]
+  useGlobalStyle({
+    html: {
+      boxSizing: "border-box"
+    },
+    "*, *::before, *::after": {
+      boxSizing: "inherit"
+    }
+  });
+  useGlobalStyle(normalize());
+  return /* @__PURE__ */ jsx(BackgroundsContainer, {
+    ref,
+    style: {
+      background: "white"
+    },
+    backgrounds,
+    children: /* @__PURE__ */ jsx("div", {
+      className: useStyle({
+        display: "flex",
+        flexWrap: "wrap",
+        width: "100%"
+      }),
+      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem, {
+        grid: children.columns,
+        index,
+        columnGap,
+        rowGap,
+        children: /* @__PURE__ */ jsx(Element, {
+          element: child
+        })
+      }, child.key)) : /* @__PURE__ */ jsx(Placeholder, {})
+    })
   });
 });
 export { Root as default };

package/dist/Root.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Root.es.js","sources":["../src/components/builtin/Root/components/Placeholder/index.tsx","../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n`\n\ntype Props = Record<string, never>\n\nexport default forwardRef<HTMLDivElement, Props>(function Placeholder(props: Props, ref) {\n  return (\n    <PlaceholderBase {...props} ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </PlaceholderBase>\n  )\n})\n","import styled, { createGlobalStyle } from 'styled-components'\nimport { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport { cssGridItem } from '../../utils/cssMediaRules'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { Props } from '../../../prop-controllers'\n\nconst Normalize = createGlobalStyle`\n  html {\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    box-sizing: inherit;\n  }\n\n  ${normalize()}\n`\n\nconst Grid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n`\n\nconst GridItem = styled.div.withConfig({\n  shouldForwardProp: prop => !['grid', 'index', 'rowGap', 'columnGap'].includes(prop.toString()),\n})`\n  display: flex;\n  align-items: flex-start;\n  ${cssGridItem()}\n`\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <>\n      <Normalize />\n      <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n        <Grid>\n          {children && children.elements.length > 0 ? (\n            children.elements.map((child, index) => (\n              <GridItem\n                key={child.key}\n                grid={children.columns}\n                index={index}\n                columnGap={columnGap}\n                rowGap={rowGap}\n              >\n                <Element element={child} />\n              </GridItem>\n            ))\n          ) : (\n            <Placeholder />\n          )}\n        </Grid>\n      </BackgroundsContainer>\n    </>\n  )\n})\n\nexport default Root\n"],"names":["PlaceholderBase","styled","div","forwardRef","props","ref","overflow","Normalize","createGlobalStyle","normalize","Grid","GridItem","withConfig","shouldForwardProp","prop","includes","toString","cssGridItem","Root","children","backgrounds","rowGap","columnGap","_Fragment","_jsx","background","elements","length","map","child","index","columns","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,kBAAkBC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS/B,IAAeC,cAAAA,WAAkC,sBAAqBC,OAAcC,KAAK;AAErF,6BAAC,iBAAD,iCAAqBD,QAArB;AAAA,IAA4B;AAAA,IAC1B,8BAAA,OAAA;AAAA,MACE,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QAAEE,UAAU;AAAA,MAJrB;AAAA,MAME,8BAAA,QAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,IAAG;AAAA,QACH,IAAG;AAAA,MAAA,CAVL;AAAA,IAAA,CANF;AAAA,EAAA,EAFJ;AAuBD,CAxBwB;ACIzB,MAAMC,YAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IASdC,UAAY;AAAA;AAGhB,MAAMC,OAAOT,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAMpB,MAAMS,WAAWV,OAAOC,IAAIU,WAAW;AAAA,EACrCC,mBAAmBC,CAAAA,SAAQ,CAAC,CAAC,QAAQ,SAAS,UAAU,WAA5B,EAAyCC,SAASD,KAAKE,SAAAA,CAAvD;AADS,CAAtB;AAAA;AAAA;AAAA,IAKbC,YAAc;AAAA;AAUZC,MAAAA,OAAOf,WAAW,cACtB;AAAA,EAAEgB;AAAAA,EAAUC;AAAAA,EAAaC;AAAAA,EAAQC;AAAAA,GACjCjB,KACA;AAEE,8BAAAkB,UAAA;AAAA,IAAA,UAAA,CACGC,oBAAA,WADH,CAAA,CAAA,uBAEG,sBAAD;AAAA,MAAsB;AAAA,MAAU,OAAO;AAAA,QAAEC,YAAY;AAAA,MAArD;AAAA,MAAgE;AAAA,MAAhE,8BACG,MAAD;AAAA,QACGN,UAAAA,YAAYA,SAASO,SAASC,SAAS,IACtCR,SAASO,SAASE,IAAI,CAACC,OAAOC,8BAC3B,UAAD;AAAA,UAEE,MAAMX,SAASY;AAAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UALF,8BAOG,SAAD;AAAA,YAAS,SAASF;AAAAA,UAAAA,CAAlB;AAAA,QAAA,GANKA,MAAMG,GADb,CADF,IAYCR,oBAAA,aAAD,CAAA,CAAA;AAAA,MAAA,CAdJ;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAwBD,CA5BsB;;"}
+{"version":3,"file":"Root.es.js","sources":["../src/components/builtin/Root/components/Placeholder/index.tsx","../src/runtimes/react/use-global-style.ts","../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nexport default forwardRef<HTMLDivElement>(function Placeholder(_props, ref) {\n  return (\n    <div\n      ref={ref}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import * as React from 'react'\nimport { useRef } from 'react'\nimport { cache, injectGlobal } from '@emotion/css'\nimport { CSSInterpolation, serializeStyles } from '@emotion/serialize'\nimport { StyleSheet } from '@emotion/sheet'\nimport { insertStyles } from '@emotion/utils'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useGlobalStyle(...args: CSSInterpolation[]): void {\n  if (isServer) return injectGlobal(args)\n\n  const serialized = serializeStyles(args, cache.registered)\n  const sheetRef = useRef<[StyleSheet, boolean]>()\n\n  // Hydration\n  useInsertionEffect(() => {\n    const key = `${cache.key}-global`\n\n    const cacheSheet = cache.sheet as StyleSheet\n    const sheet = new (cacheSheet.constructor as typeof StyleSheet)({\n      key,\n      nonce: cacheSheet.nonce,\n      container: cacheSheet.container,\n      speedy: cacheSheet.isSpeedy,\n    })\n\n    const node = document.querySelector<HTMLStyleElement>(\n      `style[data-emotion=\"${key} ${serialized.name}\"]`,\n    )\n\n    if (cache.sheet.tags.length > 0) {\n      sheet.before = cache.sheet.tags[0]\n    }\n\n    let rehydrating = false\n\n    if (node != null) {\n      rehydrating = true\n      node.setAttribute('data-emotion', key)\n      sheet.hydrate([node])\n    }\n\n    sheetRef.current = [sheet, rehydrating]\n\n    return () => {\n      sheet.flush()\n    }\n  })\n\n  // Insertion\n  useInsertionEffect(() => {\n    const [sheet, rehydrating] = sheetRef.current ?? []\n\n    if (sheet == null || rehydrating == null) return\n\n    if (rehydrating) {\n      sheetRef.current = [sheet, false]\n\n      return\n    }\n\n    if (serialized.next != null) {\n      insertStyles(cache, serialized.next, true)\n    }\n\n    if (sheet.tags.length > 0) {\n      const element = sheet.tags[sheet.tags.length - 1].nextElementSibling\n\n      sheet.before = element\n\n      sheet.flush()\n    }\n\n    cache.insert('', serialized, sheet, false)\n  })\n}\n","import { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport type {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { useGlobalStyle } from '../../../runtimes/react/use-global-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  useGlobalStyle({\n    html: {\n      boxSizing: 'border-box',\n    },\n    '*, *::before, *::after': {\n      boxSizing: 'inherit',\n    },\n  })\n\n  useGlobalStyle(normalize())\n\n  return (\n    <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n      <div className={useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' })}>\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Root\n"],"names":["forwardRef","_props","ref","useStyle","width","background","height","padding","overflow","Root","children","backgrounds","rowGap","columnGap","html","boxSizing","useGlobalStyle","normalize","display","flexWrap","elements","length","map","child","index","columns","key","_jsx"],"mappings":"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"}

package/dist/SocialLinks.cjs.js

@@ -1,12 +1,42 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
-var styled = require("styled-components");
-var index$1 = require("./index.cjs3.js");
-var cssMediaRules = require("./cssMediaRules.cjs.js");
+var index$1 = require("./index.cjs2.js");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var index = require("./index.cjs4.js");
+var index = require("./index.cjs3.js");
+var css = require("@emotion/css");
 require("scroll-into-view-if-needed");
 require("next/link");
 require("use-sync-external-store/shim/with-selector");
@@ -23,7 +53,6 @@ require("slate");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("@emotion/css");
 require("color");
 require("./box-models.cjs.js");
 require("css-box-model");
@@ -38,9 +67,6 @@ require("http-proxy");
 require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
-function _interopDefaultLegacy(e) {
-  return e && typeof e === "object" && "default" in e ? e : { "default": e };
-}
 function _interopNamespace(e) {
   if (e && e.__esModule)
     return e;
@@ -62,7 +88,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
-var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var _path$m;
 function _extends$m() {
   _extends$m = Object.assign || function(target) {
@@ -754,12 +779,6 @@ const SocialLinksOptions = [{
   icon: /* @__PURE__ */ jsxRuntime.jsx(SvgLogoYoutube20, {}),
   brandColor: "#ff0000"
 }];
-const PlaceholderLink = styled__default["default"].div`
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background-color: rgba(161, 168, 194, 0.4);
-`;
 const links = [{
   id: "1"
 }, {
@@ -779,73 +798,16 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin", "alignment"].includes(prop.toString())
-})`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  ${cssMediaRules.cssWidth()}
-  ${cssMediaRules.cssMargin()}
-  ${(p) => cssMediaRules.cssMediaRules([p.alignment], ([alignment = "center"]) => styled.css`
-        justify-content: ${alignment};
-      `)}
-`;
-const StyledLink = styled__default["default"](index$1.Link).withConfig({
-  shouldForwardProp: (prop) => !["brandColor", "shape", "size", "hoverStyle", "fill", "backgroundColor"].includes(prop.toString())
-})`
-  display: block;
-  color: ${(props) => props.brandColor};
-  transition: transform, opacity 0.18s;
-
-  svg {
-    display: block;
-  }
-
-  ${(p) => cssMediaRules.cssMediaRules([p.shape, p.size, p.hoverStyle, p.fill, p.backgroundColor], ([shape = "naked", size = "medium", hoverStyle = "none", fill, backgroundColor]) => styled.css`
-        padding: ${shape === "naked" ? 0 : {
-  small: 10,
-  medium: 12,
-  large: 14
-}[size]}px;
-        border-radius: ${{
-  circle: "50%",
-  rounded: "8px",
-  naked: 0,
-  square: 0
-}[shape]};
-        background: ${shape === "naked" ? "transparent" : backgroundColor == null ? "currentColor" : next.colorToString(backgroundColor)};
-
-        :hover {
-          ${{
-  none: "",
-  grow: styled.css`
-              transform: scale(1.1);
-            `,
-  shrink: styled.css`
-              transform: scale(0.9);
-            `,
-  fade: styled.css`
-              opacity: 0.65;
-            `
-}[hoverStyle]}
-        }
-
-        svg {
-          fill: ${fill == null ? shape === "naked" || backgroundColor != null ? "currentColor" : "white" : next.colorToString(fill)};
-          width: ${{
-  small: 16,
-  medium: 20,
-  large: 24
-}[size]}px;
-          height: ${{
-  small: 16,
-  medium: 20,
-  large: 24
-}[size]}px;
-        }
-      `)}
-`;
+function PlaceholderLink() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle({
+      width: 44,
+      height: 44,
+      borderRadius: "50%",
+      backgroundColor: "rgba(161, 168, 194, 0.4)"
+    })
+  });
+}
 const SocialLinks = React.forwardRef(function SocialLinks2({
   id,
   links: {
@@ -865,12 +827,16 @@ const SocialLinks = React.forwardRef(function SocialLinks2({
   width,
   margin
 }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref,
     id,
-    width,
-    alignment,
-    margin,
+    className: css.cx(next.useStyle({
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap"
+    }), width, margin, next.useStyle(next.responsiveStyle([alignment], ([alignment2 = "center"]) => ({
+      justifyContent: alignment2
+    })))),
     children: links2.length > 0 ? links2.map((link, i) => {
       const option = SocialLinksOptions.find((o) => o.type === link.payload.type);
       if (!option)
@@ -901,5 +867,72 @@ const SocialLinks = React.forwardRef(function SocialLinks2({
     })
   });
 });
+function StyledLink(_a) {
+  var _b = _a, {
+    className,
+    brandColor,
+    shape,
+    size,
+    hoverStyle,
+    fill,
+    backgroundColor
+  } = _b, restOfProps = __objRest(_b, [
+    "className",
+    "brandColor",
+    "shape",
+    "size",
+    "hoverStyle",
+    "fill",
+    "backgroundColor"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: "block",
+      color: brandColor,
+      transition: "transform, opacity 0.18s",
+      svg: {
+        display: "block"
+      }
+    }), next.useStyle(next.responsiveStyle([shape, size, hoverStyle, fill, backgroundColor], ([shape2 = "naked", size2 = "medium", hoverStyle2 = "none", fill2, backgroundColor2]) => ({
+      padding: shape2 === "naked" ? 0 : {
+        small: 10,
+        medium: 12,
+        large: 14
+      }[size2],
+      borderRadius: {
+        circle: "50%",
+        rounded: "8px",
+        naked: 0,
+        square: 0
+      }[shape2],
+      background: shape2 === "naked" ? "transparent" : backgroundColor2 == null ? "currentColor" : next.colorToString(backgroundColor2),
+      ":hover": {
+        none: {},
+        grow: {
+          transform: "scale(1.1)"
+        },
+        shrink: {
+          transform: "scale(0.9)"
+        },
+        fade: {
+          opacity: 0.65
+        }
+      }[hoverStyle2],
+      svg: {
+        fill: fill2 == null ? shape2 === "naked" || backgroundColor2 != null ? "currentColor" : "white" : next.colorToString(fill2),
+        width: {
+          small: 16,
+          medium: 20,
+          large: 24
+        }[size2],
+        height: {
+          small: 16,
+          medium: 20,
+          large: 24
+        }[size2]
+      }
+    }))), className)
+  }));
+}
 exports["default"] = SocialLinks;
 //# sourceMappingURL=SocialLinks.cjs.js.map