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

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

@@ -9,50 +9,61 @@ import { ArrowDown8 } from "../../../../../../icons/ArrowDown8";
 import { ChevronDown8 } from "../../../../../../icons/ChevronDown8";
 import { Link } from "../../../../../../shared/Link";
 import Button from "../../../../../Button";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../../../../../../runtimes/react/use-style";
 import {
   useResponsiveStyle,
   useResponsiveTextStyle
 } from "../../../../../../utils/responsive-style";
+import { useStyle } from "../../../../../../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 function DropDownMenu({ className, open, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({ display: open ? "flex" : "none", flexDirection: "column", padding: 8 }),
-        className
-      )
-    }
-  );
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({
+    display: open ? "flex" : "none",
+    flexDirection: "column",
+    padding: 8
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    baseStyleElement,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: clsx(baseClassName, className) })
+  ] });
 }
 function ButtonLink({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(Button, { ...restOfProps, className: cx(useStyle({ margin: "8px 0" }), className) });
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({ margin: "8px 0" });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    baseStyleElement,
+    /* @__PURE__ */ jsx(Button, { ...restOfProps, className: clsx(baseClassName, className) })
+  ] });
 }
 function DropDownItem({ color, className, textStyle, ...restOfProps }) {
   const colorData = useResponsiveColor(color);
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          textDecoration: "none",
-          lineHeight: 1.4,
-          padding: "8px 16px",
-          color: "black"
-        }),
-        useStyle(useResponsiveTextStyle(textStyle)),
-        useStyle(
-          useResponsiveStyle([colorData], ([color2]) => ({
-            color: color2 == null ? "black" : colorToString(color2)
-          }))
-        ),
-        className
-      )
-    }
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({
+    textDecoration: "none",
+    lineHeight: 1.4,
+    padding: "8px 16px",
+    color: "black"
+  });
+  const { className: responsiveTextStyleClassName, styleElement: responsiveTextStylesElement } = useStyle(useResponsiveTextStyle(textStyle));
+  const { className: responsiveColorClassName, styleElement: responsiveColorStylesElement } = useStyle(
+    useResponsiveStyle([colorData], ([color2]) => ({
+      color: color2 == null ? "black" : colorToString(color2)
+    }))
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    baseStyleElement,
+    responsiveColorStylesElement,
+    responsiveTextStylesElement,
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        ...restOfProps,
+        className: clsx(
+          baseClassName,
+          responsiveTextStyleClassName,
+          responsiveColorClassName,
+          className
+        )
+      }
+    )
+  ] });
 }
 function MobileDropDownButton({
   label,

package/dist/esm/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":"AA+BI,SA2FQ,UA3FR,KA2FQ,YA3FR;AAsGM;AArIV,SAAmC,gBAA2B;AAI9D,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAE7B,SAAS,YAAY;AACrB,OAAO,YAAY;AACnB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS,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,oBAAC,UAAQ,GAAG,aAAa,WAAW,GAAG,SAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,YAAY,mBAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,QACD,SAAS,uBAAuB,SAAS,CAAC;AAAA,QAC1C;AAAA,UACE,mBAAmB,CAAC,SAAS,GAAY,CAAC,CAACA,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,UAAU,cAAcA,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,IAAI,SAAS,KAAK;AAC1C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,mBAAmB,SAAS;AAAA,QACvC,OAAO,mBAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,8BAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,oBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,2CACG;AAAA,sBAAU,WAAW,oBAAC,cAAW;AAAA,YACjC,UAAU,UAAU,oBAAC,SAAM;AAAA,YAC3B,UAAU,gBAAgB,oBAAC,cAAW;AAAA,YACtC,UAAU,kBAAkB,oBAAC,gBAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,8BAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["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":["color"]}

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

@@ -1,28 +1,32 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
 import { colorToString } from "../../../../utils/colorToString";
 import { Times16 } from "../../../../icons/Times16";
 import Button from "../../../Button";
 import DropDownButton from "./components/MobileDropDownButton";
 import { useResponsiveColor } from "../../../../hooks";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useResponsiveStyle } from "../../../../utils/responsive-style";
+import { composeStyles, useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 function ButtonLink({
   className,
   textColor,
   color,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...restOfProps,
-      className: cx(useStyle({ margin: "8px 0" }), className),
-      textColor: useResponsiveColor(textColor),
-      color: useResponsiveColor(color)
-    }
-  );
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({ margin: "8px 0" });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    baseStyleElement,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...restOfProps,
+        className: clsx(baseClassName, className),
+        textColor: useResponsiveColor(textColor),
+        color: useResponsiveColor(color)
+      }
+    )
+  ] });
 }
 function Container({
   className,
@@ -31,69 +35,62 @@ function Container({
   open,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          position: "fixed",
-          flexDirection: "column",
-          width: "100%",
-          padding: "40px 15px",
-          transition: "transform 300ms ease-in-out",
-          overflowY: "auto",
-          zIndex: 9999,
-          maxWidth: 575
-        }),
-        useStyle(
-          useResponsiveStyle(
-            [animation, backgroundColor],
-            ([animation2, backgroundColor2]) => {
-              if (animation2 == null)
-                return { display: "none" };
-              return {
-                display: "flex",
-                backgroundColor: backgroundColor2 == null ? "black" : 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 = composeStyles(
+    useStyle({
+      position: "fixed",
+      flexDirection: "column",
+      width: "100%",
+      padding: "40px 15px",
+      transition: "transform 300ms ease-in-out",
+      overflowY: "auto",
+      zIndex: 9999,
+      maxWidth: 575
+    }),
+    useStyle(
+      useResponsiveStyle([animation, backgroundColor], ([animation2, backgroundColor2]) => {
+        if (animation2 == null)
+          return { display: "none" };
+        return {
+          display: "flex",
+          backgroundColor: backgroundColor2 == null ? "black" : 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__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 function CloseIconContainer({ className, color, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          position: "absolute",
-          top: 15,
-          right: 15,
-          padding: 0,
-          border: 0,
-          outline: 0,
-          background: "none",
-          fill: "currentcolor"
-        }),
-        useStyle(
-          useResponsiveStyle([color], ([color2]) => ({
-            color: color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      position: "absolute",
+      top: 15,
+      right: 15,
+      padding: 0,
+      border: 0,
+      outline: 0,
+      background: "none",
+      fill: "currentcolor"
+    }),
+    useStyle(
+      useResponsiveStyle([color], ([color2]) => ({
+        color: color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("button", { ...restOfProps, className: styles.className })
+  ] });
 }
 function MobileMenu({
   animation,
@@ -110,7 +107,7 @@ function MobileMenu({
       "div",
       {
         style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
-        children: links.map((link) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: links.map((link) => /* @__PURE__ */ jsxs(Fragment2, { children: [
           link.type === "button" && /* @__PURE__ */ jsx(ButtonLink, { ...link.payload, onClick: onClose, children: link.payload.label }),
           link.type === "dropdown" && /* @__PURE__ */ jsx(DropDownButton, { ...link.payload, onClose })
         ] }, link.id))

package/dist/esm/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":["animation","backgroundColor","color"]}
+{"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":["Fragment","animation","backgroundColor","color"]}

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

@@ -1,32 +1,41 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { normalize } from "polished";
 import { forwardRef } from "react";
 import { Element } from "../../../runtimes/react/components/Element";
-import { useGlobalStyle } from "../../../runtimes/react/use-global-style";
-import { useStyle } from "../../../runtimes/react/use-style";
-import { useCSSResetEnabled } from "../../../runtimes/react/root-style-registry";
 import { GridItem } from "../../shared/grid-item";
 import BackgroundsContainer from "../../shared/BackgroundsContainer";
 import Placeholder from "./components/Placeholder";
-const Root = forwardRef(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
-  const cssResetEnabled = useCSSResetEnabled();
-  useGlobalStyle(
-    cssResetEnabled ? [
-      { html: { boxSizing: "border-box" }, "*, *::before, *::after": { boxSizing: "inherit" } },
-      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 })
+import { useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
+import { useCssReset } from "../../../runtimes/react/css-runtime/hooks/use-css-reset";
+const cssResetStyles = [
+  {
+    html: {
+      boxSizing: "border-box"
     },
-    child.key
-  )) : /* @__PURE__ */ jsx(Placeholder, {}) }) });
+    "*, *::before, *::after": {
+      boxSizing: "inherit"
+    }
+  },
+  ...normalize()
+];
+const Root = forwardRef(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
+  const { styleElement: cssResetStyleElement } = useCssReset({ styles: cssResetStyles });
+  const { className, styleElement } = useStyle({ display: "flex", flexWrap: "wrap", width: "100%" });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cssResetStyleElement,
+    styleElement,
+    /* @__PURE__ */ jsx(BackgroundsContainer, { ref, style: { background: "white" }, backgrounds, children: /* @__PURE__ */ jsx("div", { className, 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, {}) }) })
+  ] });
 });
 var Root_default = Root;
 export {

package/dist/esm/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":"AAqDc;AArDd,SAAS,iBAAiB;AAC1B,SAAS,kBAA4B;AAQrC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAEnC,SAAS,gBAAgB;AACzB,OAAO,0BAA0B;AAEjC,OAAO,iBAAiB;AASxB,MAAM,OAAO,WAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,QAAM,kBAAkB,mBAAmB;AAE3C;AAAA,IACE,kBACI;AAAA,MACE,EAAE,MAAM,EAAE,WAAW,aAAa,GAAG,0BAA0B,EAAE,WAAW,UAAU,EAAE;AAAA,MACxF,UAAU;AAAA,IACZ,IACA,CAAC;AAAA,EACP;AAEA,SACE,oBAAC,wBAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,8BAAC,SAAI,WAAW,SAAS,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,8BAAC,WAAQ,SAAS,OAAO;AAAA;AAAA,IANpB,MAAM;AAAA,EAOb,CACD,IAED,oBAAC,eAAY,GAEjB,GACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}
+{"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":"AA8CI,mBAcY,KAdZ;AA9CJ,SAAS,iBAAiB;AAC1B,SAAS,kBAA4B;AAQrC,SAAS,eAAe;AAExB,SAAS,gBAAgB;AACzB,OAAO,0BAA0B;AAEjC,OAAO,iBAAiB;AACxB,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;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,GAAG,UAAU;AACf;AAEA,MAAM,OAAO,WAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,QAAM,EAAE,cAAc,qBAAqB,IAAI,YAAY,EAAE,QAAQ,eAAe,CAAC;AACrF,QAAM,EAAE,WAAW,aAAa,IAAI,SAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC;AAEjG,SACE,iCACG;AAAA;AAAA,IACA;AAAA,IACD,oBAAC,wBAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,8BAAC,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,8BAAC,WAAQ,SAAS,OAAO;AAAA;AAAA,MANpB,MAAM;AAAA,IAOb,CACD,IAED,oBAAC,eAAY,GAEjB,GACF;AAAA,KACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}

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

@@ -1,43 +1,40 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useStyle } from "../../../../../runtimes/react/use-style";
+import { useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 var Placeholder_default = forwardRef(function Placeholder(_props, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: useStyle({
+  const { className, styleElement } = useStyle({
+    width: "100%",
+    background: "rgba(161, 168, 194, 0.18)",
+    height: 80,
+    padding: 8
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
         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%",
-          height: "100%",
-          style: { overflow: "visible" },
-          children: /* @__PURE__ */ 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__ */ 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"
+          }
+        )
+      }
+    ) })
+  ] });
 });
 export {
   Placeholder_default as default

package/dist/esm/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":"AAoBQ;AApBR,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAEzB,IAAO,sBAAQ,WAA2B,SAAS,YAAY,QAAQ,KAAK;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,SAAS;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":"AAWI,mBASM,KATN;AAXJ,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAEzB,IAAO,sBAAQ,WAA2B,SAAS,YAAY,QAAQ,KAAK;AAC1E,QAAM,EAAE,WAAW,aAAa,IAAI,SAAS;AAAA,IAC3C,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA;AAAA,IACD,oBAAC,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":[]}