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

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

@@ -1,45 +1,49 @@
-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({ hide = false, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      ref,
-      style: { visibility: hide ? "hidden" : "initial" },
-      className: useStyle({
-        width: "100%",
-        background: "rgba(161, 168, 194, 0.18)",
-        height: 80,
-        padding: 8
-      }),
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "100%",
-          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"
-            }
-          )
-        }
-      )
-    }
-  );
+  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",
+      {
+        ...restOfProps,
+        ref,
+        style: { visibility: hide ? "hidden" : "initial" },
+        className,
+        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"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
 });
 export {
   Placeholder_default as default

package/dist/esm/components/builtin/Box/components/Placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Box/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\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":"AA2BQ;AA3BR,SAAS,kBAAuB;AAChC,SAAS,gBAAgB;AAIzB,IAAO,sBAAQ,WAAW,SAAS,YACjC,EAAE,OAAO,OAAO,GAAG,YAAY,GAC/B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,YAAY,OAAO,WAAW,UAAU;AAAA,MACjD,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/Box/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\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\n        {...restOfProps}\n        ref={ref}\n        style={{ visibility: hide ? 'hidden' : 'initial' }}\n        className={className}\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})\n"],"mappings":"AAgBI,mBAcM,KAdN;AAhBJ,SAAS,kBAAuB;AAChC,SAAS,gBAAgB;AAIzB,IAAO,sBAAQ,WAAW,SAAS,YACjC,EAAE,OAAO,OAAO,GAAG,YAAY,GAC/B,KACA;AACA,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;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,OAAO,EAAE,YAAY,OAAO,WAAW,UAAU;AAAA,QACjD;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,YACP,OAAO,EAAE,UAAU,UAAU;AAAA,YAE7B;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,IAAG;AAAA,gBACH,IAAG;AAAA;AAAA,YACL;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":[]}

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

@@ -1,17 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   forwardRef
 } from "react";
 import ColorHelper from "color";
 import { colorToString } from "../../utils/colorToString";
 import { Link } from "../../shared/Link";
-import { useStyle } from "../../../runtimes/react/use-style";
 import {
   useResponsiveStyle,
   useResponsiveTextStyle,
   useResponsiveWidth
 } from "../../utils/responsive-style";
-import { cx } from "@emotion/css";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const Button = forwardRef(function Button2({
   as,
   id,
@@ -29,182 +28,172 @@ const Button = forwardRef(function Button2({
   ...restOfProps
 }, ref) {
   const Component = as ?? Link;
-  return (
-    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.
-    /* @__PURE__ */ jsx(
-      Component,
-      {
-        ...restOfProps,
-        ref,
-        id,
-        className: cx(
-          useStyle({
-            display: "table",
-            border: 0,
-            outline: 0,
-            userSelect: "none",
-            cursor: "pointer",
-            fontFamily: "inherit",
-            textDecoration: "none",
-            textAlign: "center"
-          }),
-          useStyle(useResponsiveWidth(width, "auto")),
-          margin,
-          useStyle(
-            useResponsiveStyle(
-              [variant, shape, size, textColor, color],
-              ([
-                variant2 = "flat",
-                shape2 = "rounded",
-                size2 = "medium",
-                textColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
-                color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
-              ]) => {
-                const fontSize = {
-                  value: { small: 12, medium: 14, large: 18 }[size2],
-                  unit: "px"
-                };
-                return {
-                  color: colorToString(textColor2),
-                  borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape2]}px`,
-                  padding: `${{ small: "8px 12px", medium: "12px 16px", large: "16px 20px" }[size2]}`,
-                  fontSize: `${fontSize.value}${fontSize.unit}`,
-                  ...{
-                    flat: {
-                      background: colorToString(color2),
-                      border: "none",
-                      transition: ["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
-                      ":hover": {
-                        background: ColorHelper(colorToString(color2)).darken(0.1).hex()
-                      },
-                      ":active": {
-                        background: ColorHelper(colorToString(color2)).darken(0.15).hex()
-                      }
-                    },
-                    outline: {
-                      background: "transparent",
-                      boxShadow: `inset 0 0 0 2px ${colorToString(color2)}`,
-                      transition: ["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
-                      ":hover": {
-                        boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color2)).darken(0.1).hex()}`,
-                        color: ColorHelper(colorToString(color2)).darken(0.1).hex()
-                      },
-                      ":active": {
-                        boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color2)).darken(0.15).hex()}`,
-                        color: ColorHelper(colorToString(color2)).darken(0.15).hex()
-                      }
-                    },
-                    shadow: {
-                      background: colorToString(color2),
-                      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)",
-                      transition: ["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", "),
-                      ":hover": {
-                        boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
-                        transform: "translateY(-1px)"
-                      },
-                      ":active": {
-                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)",
-                        transform: "translateY(0px)"
-                      }
-                    },
-                    clear: {
-                      background: "transparent",
-                      border: "none",
-                      ":hover": {
-                        color: ColorHelper(colorToString(textColor2)).alpha(0.5).toString()
-                      },
-                      ":active": {
-                        color: ColorHelper(colorToString(textColor2)).alpha(0.6).toString()
-                      }
-                    },
-                    blocky: {
-                      background: colorToString(color2),
-                      borderWidth: 1,
-                      borderStyle: "solid",
-                      borderColor: ColorHelper(colorToString(color2)).darken(0.25).hex(),
-                      boxShadow: `0 4px ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`,
-                      transition: ["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", "),
-                      ":hover": {
-                        transform: "translateY(2px)",
-                        boxShadow: `0 2px ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`
-                      },
-                      ":active": {
-                        transform: "translateY(4px)",
-                        boxShadow: `0 0 ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`
-                      }
-                    },
-                    bubbly: {
-                      background: `linear-gradient(
-                      180deg,
-                      ${ColorHelper(colorToString(color2)).lighten(0.05).hex()},
-                      ${ColorHelper(colorToString(color2)).darken(0.3).saturate(0.05).hex()}
-                    )`,
-                      position: "relative",
-                      zIndex: "0",
-                      ":before": {
-                        position: "absolute",
-                        content: '""',
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0,
-                        zIndex: "-1",
-                        borderRadius: "inherit",
-                        background: `linear-gradient(
-                        180deg,
-                        ${ColorHelper(colorToString(color2)).lighten(0.2).hex()},
-                        ${ColorHelper(colorToString(color2)).darken(0.2).saturate(0.05).hex()}
-                      )`,
-                        opacity: "0",
-                        transition: "opacity 0.15s"
-                      },
-                      ":hover": {
-                        ":before": {
-                          opacity: "1"
-                        }
-                      },
-                      ":active": {
-                        ":before": {
-                          opacity: "0.25"
-                        }
-                      }
-                    },
-                    skewed: {
-                      position: "relative",
-                      zIndex: "0",
-                      ":before": {
-                        position: "absolute",
-                        content: '""',
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0,
-                        zIndex: "-1",
-                        background: colorToString(color2),
-                        transform: "skewX(-12deg)",
-                        borderRadius: "inherit",
-                        transition: "transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)"
-                      },
-                      ":hover:before": {
-                        transform: "skew(0deg)"
-                      },
-                      ":active:before": {
-                        transform: "skew(-8deg)"
-                      }
-                    }
-                  }[variant2]
-                };
+  const buttonResponsiveCss = useResponsiveStyle(
+    [variant, shape, size, textColor, color],
+    ([
+      variant2 = "flat",
+      shape2 = "rounded",
+      size2 = "medium",
+      textColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
+      color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+    ]) => {
+      const fontSize = {
+        value: { small: 12, medium: 14, large: 18 }[size2],
+        unit: "px"
+      };
+      return {
+        color: colorToString(textColor2),
+        borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape2]}px`,
+        padding: `${{ small: "8px 12px", medium: "12px 16px", large: "16px 20px" }[size2]}`,
+        fontSize: `${fontSize.value}${fontSize.unit}`,
+        ...{
+          flat: {
+            background: colorToString(color2),
+            border: "none",
+            transition: ["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
+            "&:hover": {
+              background: ColorHelper(colorToString(color2)).darken(0.1).hex()
+            },
+            "&:active": {
+              background: ColorHelper(colorToString(color2)).darken(0.15).hex()
+            }
+          },
+          outline: {
+            background: "transparent",
+            boxShadow: `inset 0 0 0 2px ${colorToString(color2)}`,
+            transition: ["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
+            "&:hover": {
+              boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color2)).darken(0.1).hex()}`,
+              color: ColorHelper(colorToString(color2)).darken(0.1).hex()
+            },
+            "&:active": {
+              boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color2)).darken(0.15).hex()}`,
+              color: ColorHelper(colorToString(color2)).darken(0.15).hex()
+            }
+          },
+          shadow: {
+            background: colorToString(color2),
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)",
+            transition: ["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", "),
+            "&:hover": {
+              boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+              transform: "translateY(-1px)"
+            },
+            "&:active": {
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)",
+              transform: "translateY(0px)"
+            }
+          },
+          clear: {
+            background: "transparent",
+            border: "none",
+            "&:hover": {
+              color: ColorHelper(colorToString(textColor2)).alpha(0.5).toString()
+            },
+            "&:active": {
+              color: ColorHelper(colorToString(textColor2)).alpha(0.6).toString()
+            }
+          },
+          blocky: {
+            background: colorToString(color2),
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: ColorHelper(colorToString(color2)).darken(0.25).hex(),
+            boxShadow: `0 4px ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`,
+            transition: ["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", "),
+            "&:hover": {
+              transform: "translateY(2px)",
+              boxShadow: `0 2px ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`
+            },
+            "&:active": {
+              transform: "translateY(4px)",
+              boxShadow: `0 0 ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`
+            }
+          },
+          bubbly: {
+            background: `linear-gradient(
+              180deg,
+              ${ColorHelper(colorToString(color2)).lighten(0.05).hex()},
+              ${ColorHelper(colorToString(color2)).darken(0.3).saturate(0.05).hex()}
+            )`,
+            position: "relative",
+            zIndex: "0",
+            "&:before": {
+              position: "absolute",
+              content: '""',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: "-1",
+              borderRadius: "inherit",
+              background: `linear-gradient(
+                180deg,
+                ${ColorHelper(colorToString(color2)).lighten(0.2).hex()},
+                ${ColorHelper(colorToString(color2)).darken(0.2).saturate(0.05).hex()}
+              )`,
+              opacity: "0",
+              transition: "opacity 0.15s"
+            },
+            "&:hover": {
+              "&:before": {
+                opacity: "1"
               }
-            )
-          ),
-          useStyle(useResponsiveTextStyle(textStyle)),
-          className
-        ),
-        link,
-        children: children == null ? "Button Text" : children
-      }
-    )
+            },
+            "&:active": {
+              "&:before": {
+                opacity: "0.25"
+              }
+            }
+          },
+          skewed: {
+            position: "relative",
+            zIndex: "0",
+            "&:before": {
+              position: "absolute",
+              content: '""',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: "-1",
+              background: colorToString(color2),
+              transform: "skewX(-12deg)",
+              borderRadius: "inherit",
+              transition: "transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)"
+            },
+            "&:hover:before": {
+              transform: "skew(0deg)"
+            },
+            "&:active:before": {
+              transform: "skew(-8deg)"
+            }
+          }
+        }[variant2]
+      };
+    }
+  );
+  const buttonStyles = composeStyles(
+    useStyle({
+      display: "table",
+      border: 0,
+      outline: 0,
+      userSelect: "none",
+      cursor: "pointer",
+      fontFamily: "inherit",
+      textDecoration: "none",
+      textAlign: "center"
+    }),
+    useStyle(useResponsiveWidth(width, "auto")),
+    margin,
+    useStyle(buttonResponsiveCss),
+    useStyle(useResponsiveTextStyle(textStyle)),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    buttonStyles.styleElements,
+    /* @__PURE__ */ jsx(Component, { ...restOfProps, ref, id, className: buttonStyles.className, link, children: children == null ? "Button Text" : children })
+  ] });
 });
 var Button_default = Button;
 export {

package/dist/esm/components/builtin/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  Ref,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<Ref<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  Ref,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<Ref<T>>,\n) {\n  const Component = as ?? Link\n\n  const buttonResponsiveCss = useResponsiveStyle(\n    [variant, shape, size, textColor, color] as const,\n    ([\n      variant = 'flat',\n      shape = 'rounded',\n      size = 'medium',\n      textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n      color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n    ]) => {\n      const fontSize = {\n        value: { small: 12, medium: 14, large: 18 }[size],\n        unit: 'px',\n      }\n\n      return {\n        color: colorToString(textColor),\n        borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n        padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n        fontSize: `${fontSize.value}${fontSize.unit}`,\n        ...{\n          flat: {\n            background: colorToString(color),\n            border: 'none',\n            transition: ['color', 'background', 'border', 'box-shadow']\n              .map(property => `${property} 0.15s ease-in-out`)\n              .join(', '),\n\n            '&:hover': {\n              background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n            },\n\n            '&:active': {\n              background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n            },\n          },\n          outline: {\n            background: 'transparent',\n            boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n            transition: ['color', 'background', 'box-shadow']\n              .map(property => `${property} 0.15s ease-in-out`)\n              .join(', '),\n\n            '&:hover': {\n              boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()}`,\n              color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n            },\n\n            '&:active': {\n              boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()}`,\n              color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n            },\n          },\n          shadow: {\n            background: colorToString(color),\n            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n            transition: ['transform', 'box-shadow'].map(property => `${property} 0.18s`).join(', '),\n\n            '&:hover': {\n              boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n              transform: 'translateY(-1px)',\n            },\n\n            '&:active': {\n              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n              transform: 'translateY(0px)',\n            },\n          },\n          clear: {\n            background: 'transparent',\n            border: 'none',\n\n            '&:hover': {\n              color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n            },\n\n            '&:active': {\n              color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n            },\n          },\n          blocky: {\n            background: colorToString(color),\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n            boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n            transition: ['transform', 'box-shadow'].map(property => `${property} 0.1s`).join(', '),\n\n            '&:hover': {\n              transform: 'translateY(2px)',\n              boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n            },\n\n            '&:active': {\n              transform: 'translateY(4px)',\n              boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n            },\n          },\n          bubbly: {\n            background: `linear-gradient(\n              180deg,\n              ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n              ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n            )`,\n            position: 'relative',\n            zIndex: '0',\n\n            '&:before': {\n              position: 'absolute',\n              content: '\"\"',\n              top: 0,\n              right: 0,\n              bottom: 0,\n              left: 0,\n              zIndex: '-1',\n              borderRadius: 'inherit',\n              background: `linear-gradient(\n                180deg,\n                ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n              )`,\n              opacity: '0',\n              transition: 'opacity 0.15s',\n            },\n\n            '&:hover': {\n              '&:before': {\n                opacity: '1',\n              },\n            },\n\n            '&:active': {\n              '&:before': {\n                opacity: '0.25',\n              },\n            },\n          } as const,\n          skewed: {\n            position: 'relative',\n            zIndex: '0',\n\n            '&:before': {\n              position: 'absolute',\n              content: '\"\"',\n              top: 0,\n              right: 0,\n              bottom: 0,\n              left: 0,\n              zIndex: '-1',\n              background: colorToString(color),\n              transform: 'skewX(-12deg)',\n              borderRadius: 'inherit',\n              transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n            },\n\n            '&:hover:before': {\n              transform: 'skew(0deg)',\n            },\n\n            '&:active:before': {\n              transform: 'skew(-8deg)',\n            },\n          } as const,\n        }[variant],\n      }\n    },\n  )\n\n  const buttonStyles = composeStyles(\n    useStyle({\n      display: 'table',\n      border: 0,\n      outline: 0,\n      userSelect: 'none',\n      cursor: 'pointer',\n      fontFamily: 'inherit',\n      textDecoration: 'none',\n      textAlign: 'center',\n    }),\n    useStyle(useResponsiveWidth(width, 'auto')),\n    margin,\n    useStyle(buttonResponsiveCss),\n    useStyle(useResponsiveTextStyle(textStyle)),\n    className,\n  )\n\n  return (\n    <>\n      {buttonStyles.styleElements}\n      {/* @ts-ignore: `ref` prop doesn't match between `Link` and `T`. */}\n      <Component {...restOfProps} ref={ref} id={id} className={buttonStyles.className} link={link}>\n        {children == null ? 'Button Text' : children}\n      </Component>\n    </>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color"]}