@makeswift/runtime 0.28.10-canary.8 → 0.29.0-canary.19

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.js

@@ -42,47 +42,58 @@ var import_ArrowDown8 = require("../../../../../../icons/ArrowDown8");
 var import_ChevronDown8 = require("../../../../../../icons/ChevronDown8");
 var import_Link = require("../../../../../../shared/Link");
 var import_Button = __toESM(require("../../../../../Button"));
-var import_css = require("@emotion/css");
-var import_use_style = require("../../../../../../../runtimes/react/use-style");
 var import_responsive_style = require("../../../../../../utils/responsive-style");
+var import_use_style = require("../../../../../../../runtimes/react/css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 function DropDownMenu({ className, open, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({ display: open ? "flex" : "none", flexDirection: "column", padding: 8 }),
-        className
-      )
-    }
-  );
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({
+    display: open ? "flex" : "none",
+    flexDirection: "column",
+    padding: 8
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    baseStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: (0, import_clsx.default)(baseClassName, className) })
+  ] });
 }
 function ButtonLink({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { ...restOfProps, className: (0, import_css.cx)((0, import_use_style.useStyle)({ margin: "8px 0" }), className) });
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({ margin: "8px 0" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    baseStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { ...restOfProps, className: (0, import_clsx.default)(baseClassName, className) })
+  ] });
 }
 function DropDownItem({ color, className, textStyle, ...restOfProps }) {
   const colorData = (0, import_hooks.useResponsiveColor)(color);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Link.Link,
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
-          textDecoration: "none",
-          lineHeight: 1.4,
-          padding: "8px 16px",
-          color: "black"
-        }),
-        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle)),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([colorData], ([color2]) => ({
-            color: color2 == null ? "black" : (0, import_colorToString.colorToString)(color2)
-          }))
-        ),
-        className
-      )
-    }
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({
+    textDecoration: "none",
+    lineHeight: 1.4,
+    padding: "8px 16px",
+    color: "black"
+  });
+  const { className: responsiveTextStyleClassName, styleElement: responsiveTextStylesElement } = (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle));
+  const { className: responsiveColorClassName, styleElement: responsiveColorStylesElement } = (0, import_use_style.useStyle)(
+    (0, import_responsive_style.useResponsiveStyle)([colorData], ([color2]) => ({
+      color: color2 == null ? "black" : (0, import_colorToString.colorToString)(color2)
+    }))
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    baseStyleElement,
+    responsiveColorStylesElement,
+    responsiveTextStylesElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Link.Link,
+      {
+        ...restOfProps,
+        className: (0, import_clsx.default)(
+          baseClassName,
+          responsiveTextStyleClassName,
+          responsiveColorClassName,
+          className
+        )
+      }
+    )
+  ] });
 }
 function MobileDropDownButton({
   label,

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState, ReactNode } from 'react'\n\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: open ? 'flex' : 'none', flexDirection: 'column', padding: 8 }),\n        className,\n      )}\n    />\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  return <Button {...restOfProps} className={cx(useStyle({ margin: '8px 0' }), className)} />\n}\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: ResponsiveTextStyleData\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData] as const, ([color]) => ({\n            color: color == null ? 'black' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): ReactNode {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AAsGM;AArIV,IAAAA,gBAA8D;AAI9D,2BAA8B;AAC9B,mBAAmC;AAEnC,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAE7B,kBAAqB;AACrB,oBAAmB;AACnB,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,OAAO,SAAS,QAAQ,eAAe,UAAU,SAAS,EAAE,CAAC;AAAA,QACjF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAAoB;AAClE,SAAO,4CAAC,cAAAC,SAAA,EAAQ,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,SAAS,GAAY,CAAC,CAACC,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,UACtD,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAiBe,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,sFACG;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","Button","color"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState, ReactNode } from 'react'\n\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\nimport { useStyle } from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({\n    display: open ? 'flex' : 'none',\n    flexDirection: 'column',\n    padding: 8,\n  })\n  return (\n    <>\n      {baseStyleElement}\n      <div {...restOfProps} className={clsx(baseClassName, className)} />\n    </>\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({ margin: '8px 0' })\n  return (\n    <>\n      {baseStyleElement}\n      <Button {...restOfProps} className={clsx(baseClassName, className)} />\n    </>\n  )\n}\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: ResponsiveTextStyleData\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({\n    textDecoration: 'none',\n    lineHeight: 1.4,\n    padding: '8px 16px',\n    color: 'black',\n  })\n  const { className: responsiveTextStyleClassName, styleElement: responsiveTextStylesElement } =\n    useStyle(useResponsiveTextStyle(textStyle))\n  const { className: responsiveColorClassName, styleElement: responsiveColorStylesElement } =\n    useStyle(\n      useResponsiveStyle([colorData] as const, ([color]) => ({\n        color: color == null ? 'black' : colorToString(color),\n      })),\n    )\n\n  return (\n    <>\n      {baseStyleElement}\n      {responsiveColorStylesElement}\n      {responsiveTextStylesElement}\n      <Link\n        {...restOfProps}\n        className={clsx(\n          baseClassName,\n          responsiveTextStyleClassName,\n          responsiveColorClassName,\n          className,\n        )}\n      />\n    </>\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): ReactNode {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":"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","names":["import_react","clsx","Button","color"]}

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/index.js

@@ -38,24 +38,28 @@ var import_Times16 = require("../../../../icons/Times16");
 var import_Button = __toESM(require("../../../Button"));
 var import_MobileDropDownButton = __toESM(require("./components/MobileDropDownButton"));
 var import_hooks = require("../../../../hooks");
-var import_css = require("@emotion/css");
-var import_use_style = require("../../../../../runtimes/react/use-style");
 var import_responsive_style = require("../../../../utils/responsive-style");
+var import_use_style = require("../../../../../runtimes/react/css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 function ButtonLink({
   className,
   textColor,
   color,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Button.default,
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)((0, import_use_style.useStyle)({ margin: "8px 0" }), className),
-      textColor: (0, import_hooks.useResponsiveColor)(textColor),
-      color: (0, import_hooks.useResponsiveColor)(color)
-    }
-  );
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({ margin: "8px 0" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    baseStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.default,
+      {
+        ...restOfProps,
+        className: (0, import_clsx.default)(baseClassName, className),
+        textColor: (0, import_hooks.useResponsiveColor)(textColor),
+        color: (0, import_hooks.useResponsiveColor)(color)
+      }
+    )
+  ] });
 }
 function Container({
   className,
@@ -64,69 +68,62 @@ function Container({
   open,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
-          position: "fixed",
-          flexDirection: "column",
-          width: "100%",
-          padding: "40px 15px",
-          transition: "transform 300ms ease-in-out",
-          overflowY: "auto",
-          zIndex: 9999,
-          maxWidth: 575
-        }),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)(
-            [animation, backgroundColor],
-            ([animation2, backgroundColor2]) => {
-              if (animation2 == null)
-                return { display: "none" };
-              return {
-                display: "flex",
-                backgroundColor: backgroundColor2 == null ? "black" : (0, import_colorToString.colorToString)(backgroundColor2),
-                transform: open ? `translate3d(0,0,0)` : `translate3d(${{ coverRight: "", coverLeft: "-" }[animation2]}100%, 0, 0)`,
-                ...{
-                  coverRight: { top: 0, bottom: 0, right: 0 },
-                  coverLeft: { top: 0, bottom: 0, left: 0 }
-                }[animation2]
-              };
-            }
-          )
-        ),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({
+      position: "fixed",
+      flexDirection: "column",
+      width: "100%",
+      padding: "40px 15px",
+      transition: "transform 300ms ease-in-out",
+      overflowY: "auto",
+      zIndex: 9999,
+      maxWidth: 575
+    }),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([animation, backgroundColor], ([animation2, backgroundColor2]) => {
+        if (animation2 == null)
+          return { display: "none" };
+        return {
+          display: "flex",
+          backgroundColor: backgroundColor2 == null ? "black" : (0, import_colorToString.colorToString)(backgroundColor2),
+          transform: open ? `translate3d(0,0,0)` : `translate3d(${{ coverRight: "", coverLeft: "-" }[animation2]}100%, 0, 0)`,
+          ...{
+            coverRight: { top: 0, bottom: 0, right: 0 },
+            coverLeft: { top: 0, bottom: 0, left: 0 }
+          }[animation2]
+        };
+      })
+    ),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 function CloseIconContainer({ className, color, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
-          position: "absolute",
-          top: 15,
-          right: 15,
-          padding: 0,
-          border: 0,
-          outline: 0,
-          background: "none",
-          fill: "currentcolor"
-        }),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([color], ([color2]) => ({
-            color: color2 == null ? "rgba(161, 168, 194, 0.5)" : (0, import_colorToString.colorToString)(color2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({
+      position: "absolute",
+      top: 15,
+      right: 15,
+      padding: 0,
+      border: 0,
+      outline: 0,
+      background: "none",
+      fill: "currentcolor"
+    }),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([color], ([color2]) => ({
+        color: color2 == null ? "rgba(161, 168, 194, 0.5)" : (0, import_colorToString.colorToString)(color2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ...restOfProps, className: styles.className })
+  ] });
 }
 function MobileMenu({
   animation,

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment, ReactNode } from 'react'\n\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../../../utils/types'\nimport {\n  type NavigationButtonData,\n  type NavigationLinksData,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\ntype NavigationButtonProps = NavigationButtonData['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): ReactNode {\n  return (\n    <Button\n      {...restOfProps}\n      className={cx(useStyle({ margin: '8px 0' }), className)}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'fixed',\n          flexDirection: 'column',\n          width: '100%',\n          padding: '40px 15px',\n          transition: 'transform 300ms ease-in-out',\n          overflowY: 'auto',\n          zIndex: 9999,\n          maxWidth: 575,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [animation, backgroundColor] as const,\n            ([animation, backgroundColor]) => {\n              if (animation == null) return { display: 'none' }\n\n              return {\n                display: 'flex',\n                backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n                transform: open\n                  ? `translate3d(0,0,0)`\n                  : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n                ...{\n                  coverRight: { top: 0, bottom: 0, right: 0 },\n                  coverLeft: { top: 0, bottom: 0, left: 0 },\n                }[animation],\n              }\n            },\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 15,\n          right: 15,\n          padding: 0,\n          border: 0,\n          outline: 0,\n          background: 'none',\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle([color] as const, ([color]) => ({\n            color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksData\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): ReactNode {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Button","animation","backgroundColor","color","DropDownButton"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment, ReactNode } from 'react'\n\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../../../utils/types'\nimport {\n  type NavigationButtonData,\n  type NavigationLinksData,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\ntype NavigationButtonProps = NavigationButtonData['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): ReactNode {\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({ margin: '8px 0' })\n  return (\n    <>\n      {baseStyleElement}\n      <Button\n        {...restOfProps}\n        className={clsx(baseClassName, className)}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      />\n    </>\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  const styles = composeStyles(\n    useStyle({\n      position: 'fixed',\n      flexDirection: 'column',\n      width: '100%',\n      padding: '40px 15px',\n      transition: 'transform 300ms ease-in-out',\n      overflowY: 'auto',\n      zIndex: 9999,\n      maxWidth: 575,\n    }),\n    useStyle(\n      useResponsiveStyle([animation, backgroundColor] as const, ([animation, backgroundColor]) => {\n        if (animation == null) return { display: 'none' }\n\n        return {\n          display: 'flex',\n          backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n          transform: open\n            ? `translate3d(0,0,0)`\n            : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n          ...{\n            coverRight: { top: 0, bottom: 0, right: 0 },\n            coverLeft: { top: 0, bottom: 0, left: 0 },\n          }[animation],\n        }\n      }),\n    ),\n    className,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  const styles = composeStyles(\n    useStyle({\n      position: 'absolute',\n      top: 15,\n      right: 15,\n      padding: 0,\n      border: 0,\n      outline: 0,\n      background: 'none',\n      fill: 'currentcolor',\n    }),\n    useStyle(\n      useResponsiveStyle([color] as const, ([color]) => ({\n        color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n      })),\n    ),\n    className,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <button {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksData\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): ReactNode {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Button","clsx","animation","backgroundColor","color","DropDownButton"]}

package/dist/cjs/components/builtin/Root/Root.js

@@ -35,31 +35,40 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_polished = require("polished");
 var import_react = require("react");
 var import_Element = require("../../../runtimes/react/components/Element");
-var import_use_global_style = require("../../../runtimes/react/use-global-style");
-var import_use_style = require("../../../runtimes/react/use-style");
-var import_root_style_registry = require("../../../runtimes/react/root-style-registry");
 var import_grid_item = require("../../shared/grid-item");
 var import_BackgroundsContainer = __toESM(require("../../shared/BackgroundsContainer"));
 var import_Placeholder = __toESM(require("./components/Placeholder"));
-const Root = (0, import_react.forwardRef)(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
-  const cssResetEnabled = (0, import_root_style_registry.useCSSResetEnabled)();
-  (0, import_use_global_style.useGlobalStyle)(
-    cssResetEnabled ? [
-      { html: { boxSizing: "border-box" }, "*, *::before, *::after": { boxSizing: "inherit" } },
-      (0, import_polished.normalize)()
-    ] : []
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BackgroundsContainer.default, { ref, style: { background: "white" }, backgrounds, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" }), children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_grid_item.GridItem,
-    {
-      grid: children.columns,
-      index,
-      columnGap,
-      rowGap,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Element.Element, { element: child })
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
+var import_use_css_reset = require("../../../runtimes/react/css-runtime/hooks/use-css-reset");
+const cssResetStyles = [
+  {
+    html: {
+      boxSizing: "border-box"
     },
-    child.key
-  )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, {}) }) });
+    "*, *::before, *::after": {
+      boxSizing: "inherit"
+    }
+  },
+  ...(0, import_polished.normalize)()
+];
+const Root = (0, import_react.forwardRef)(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
+  const { styleElement: cssResetStyleElement } = (0, import_use_css_reset.useCssReset)({ styles: cssResetStyles });
+  const { className, styleElement } = (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    cssResetStyleElement,
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BackgroundsContainer.default, { ref, style: { background: "white" }, backgrounds, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_grid_item.GridItem,
+      {
+        grid: children.columns,
+        index,
+        columnGap,
+        rowGap,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Element.Element, { element: child })
+      },
+      child.key
+    )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, {}) }) })
+  ] });
 });
 var Root_default = Root;
 //# sourceMappingURL=Root.js.map

package/dist/cjs/components/builtin/Root/Root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { normalize } from 'polished'\nimport { forwardRef, type Ref } from 'react'\n\nimport {\n  type GridData,\n  type ResponsiveBackgroundsData,\n  type ResponsiveGapData,\n} from '@makeswift/prop-controllers'\n\nimport { Element } from '../../../runtimes/react/components/Element'\nimport { useGlobalStyle } from '../../../runtimes/react/use-global-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useCSSResetEnabled } from '../../../runtimes/react/root-style-registry'\n\nimport { GridItem } from '../../shared/grid-item'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\n\nimport Placeholder from './components/Placeholder'\n\ntype Props = {\n  children?: GridData\n  backgrounds?: ResponsiveBackgroundsData\n  rowGap?: ResponsiveGapData\n  columnGap?: ResponsiveGapData\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const cssResetEnabled = useCSSResetEnabled()\n\n  useGlobalStyle(\n    cssResetEnabled\n      ? [\n          { html: { boxSizing: 'border-box' }, '*, *::before, *::after': { boxSizing: 'inherit' } },\n          normalize(),\n        ]\n      : [],\n  )\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDc;AArDd,sBAA0B;AAC1B,mBAAqC;AAQrC,qBAAwB;AACxB,8BAA+B;AAC/B,uBAAyB;AACzB,iCAAmC;AAEnC,uBAAyB;AACzB,kCAAiC;AAEjC,yBAAwB;AASxB,MAAM,WAAO,yBAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,QAAM,sBAAkB,+CAAmB;AAE3C;AAAA,IACE,kBACI;AAAA,MACE,EAAE,MAAM,EAAE,WAAW,aAAa,GAAG,0BAA0B,EAAE,WAAW,UAAU,EAAE;AAAA,UACxF,2BAAU;AAAA,IACZ,IACA,CAAC;AAAA,EACP;AAEA,SACE,4CAAC,4BAAAA,SAAA,EAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,sDAAC,SAAI,eAAW,2BAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC,GAC1E,sBAAY,SAAS,SAAS,SAAS,IACtC,SAAS,SAAS,IAAI,CAAC,OAAO,UAC5B;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,0BAAQ,SAAS,OAAO;AAAA;AAAA,IANpB,MAAM;AAAA,EAOb,CACD,IAED,4CAAC,mBAAAC,SAAA,EAAY,GAEjB,GACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["BackgroundsContainer","Placeholder"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { normalize } from 'polished'\nimport { forwardRef, type Ref } from 'react'\n\nimport {\n  type GridData,\n  type ResponsiveBackgroundsData,\n  type ResponsiveGapData,\n} from '@makeswift/prop-controllers'\n\nimport { Element } from '../../../runtimes/react/components/Element'\n\nimport { GridItem } from '../../shared/grid-item'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\n\nimport Placeholder from './components/Placeholder'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\nimport { CSSObject } from '@emotion/serialize'\nimport { useCssReset } from '../../../runtimes/react/css-runtime/hooks/use-css-reset'\n\ntype Props = {\n  children?: GridData\n  backgrounds?: ResponsiveBackgroundsData\n  rowGap?: ResponsiveGapData\n  columnGap?: ResponsiveGapData\n}\n\nconst cssResetStyles: Array<CSSObject> = [\n  {\n    html: {\n      boxSizing: 'border-box',\n    },\n    '*, *::before, *::after': {\n      boxSizing: 'inherit',\n    },\n  },\n  ...normalize(),\n]\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const { styleElement: cssResetStyleElement } = useCssReset({ styles: cssResetStyles })\n  const { className, styleElement } = useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' })\n\n  return (\n    <>\n      {cssResetStyleElement}\n      {styleElement}\n      <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n        <div className={className}>\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})\n\nexport default Root\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CI;AA9CJ,sBAA0B;AAC1B,mBAAqC;AAQrC,qBAAwB;AAExB,uBAAyB;AACzB,kCAAiC;AAEjC,yBAAwB;AACxB,uBAAyB;AAEzB,2BAA4B;AAS5B,MAAM,iBAAmC;AAAA,EACvC;AAAA,IACE,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IACA,0BAA0B;AAAA,MACxB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,OAAG,2BAAU;AACf;AAEA,MAAM,WAAO,yBAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,QAAM,EAAE,cAAc,qBAAqB,QAAI,kCAAY,EAAE,QAAQ,eAAe,CAAC;AACrF,QAAM,EAAE,WAAW,aAAa,QAAI,2BAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC;AAEjG,SACE,4EACG;AAAA;AAAA,IACA;AAAA,IACD,4CAAC,4BAAAA,SAAA,EAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,sDAAC,SAAI,WACF,sBAAY,SAAS,SAAS,SAAS,IACtC,SAAS,SAAS,IAAI,CAAC,OAAO,UAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QAEA,sDAAC,0BAAQ,SAAS,OAAO;AAAA;AAAA,MANpB,MAAM;AAAA,IAOb,CACD,IAED,4CAAC,mBAAAC,SAAA,EAAY,GAEjB,GACF;AAAA,KACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["BackgroundsContainer","Placeholder"]}

package/dist/cjs/components/builtin/Root/components/Placeholder/index.js

@@ -23,43 +23,40 @@ __export(Placeholder_exports, {
 module.exports = __toCommonJS(Placeholder_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_use_style = require("../../../../../runtimes/react/use-style");
+var import_use_style = require("../../../../../runtimes/react/css-runtime/hooks/use-style");
 var Placeholder_default = (0, import_react.forwardRef)(function Placeholder(_props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref,
-      className: (0, import_use_style.useStyle)({
+  const { className, styleElement } = (0, import_use_style.useStyle)({
+    width: "100%",
+    background: "rgba(161, 168, 194, 0.18)",
+    height: 80,
+    padding: 8
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
         width: "100%",
-        background: "rgba(161, 168, 194, 0.18)",
-        height: 80,
-        padding: 8
-      }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "100%",
-          height: "100%",
-          style: { overflow: "visible" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "rect",
-            {
-              x: 0,
-              y: 0,
-              width: "100%",
-              height: "100%",
-              strokeWidth: 2,
-              strokeDasharray: "4 2",
-              fill: "none",
-              stroke: "rgba(161, 168, 194, 0.40)",
-              rx: "4",
-              ry: "4"
-            }
-          )
-        }
-      )
-    }
-  );
+        height: "100%",
+        style: { overflow: "visible" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width: "100%",
+            height: "100%",
+            strokeWidth: 2,
+            strokeDasharray: "4 2",
+            fill: "none",
+            stroke: "rgba(161, 168, 194, 0.40)",
+            rx: "4",
+            ry: "4"
+          }
+        )
+      }
+    ) })
+  ] });
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Root/components/Placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Root/components/Placeholder/index.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"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBQ;AApBR,mBAA2B;AAC3B,uBAAyB;AAEzB,IAAO,0BAAQ,yBAA2B,SAAS,YAAY,QAAQ,KAAK;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,EAAE,UAAU,UAAU;AAAA,UAE7B;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cACH,OAAM;AAAA,cACN,QAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAgB;AAAA,cAChB,MAAK;AAAA,cACL,QAAO;AAAA,cACP,IAAG;AAAA,cACH,IAAG;AAAA;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Root/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nexport default forwardRef<HTMLDivElement>(function Placeholder(_props, ref) {\n  const { className, styleElement } = useStyle({\n    width: '100%',\n    background: 'rgba(161, 168, 194, 0.18)',\n    height: 80,\n    padding: 8,\n  })\n  return (\n    <>\n      {styleElement}\n      <div ref={ref} className={className}>\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})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAXJ,mBAA2B;AAC3B,uBAAyB;AAEzB,IAAO,0BAAQ,yBAA2B,SAAS,YAAY,QAAQ,KAAK;AAC1E,QAAM,EAAE,WAAW,aAAa,QAAI,2BAAS;AAAA,IAC3C,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AACD,SACE,4EACG;AAAA;AAAA,IACD,4CAAC,SAAI,KAAU,WACb;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAO;AAAA,QACP,OAAO,EAAE,UAAU,UAAU;AAAA,QAE7B;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACH,OAAM;AAAA,YACN,QAAO;AAAA,YACP,aAAa;AAAA,YACb,iBAAgB;AAAA,YAChB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACH,IAAG;AAAA;AAAA,QACL;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ,CAAC;","names":[]}