@makeswift/runtime 0.2.19 → 0.3.1

package/dist/Button.es.js

@@ -30,11 +30,10 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { forwardRef } from "react";
-import styled, { css } from "styled-components";
 import ColorHelper from "color";
-import { a as cssWidth, b as cssMargin, c as cssMediaRules, i as cssTextStyle } from "./cssMediaRules.es.js";
-import { p as colorToString } from "./index.es.js";
-import { L as Link } from "./index.es3.js";
+import { q as useStyle, s as responsiveWidth, r as responsiveStyle, t as responsiveTextStyle, v as colorToString } from "./index.es.js";
+import { L as Link } from "./index.es2.js";
+import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -50,7 +49,6 @@ import "slate";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "@emotion/css";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
 import "css-box-model";
@@ -66,201 +64,9 @@ import "set-cookie-parser";
 import "uuid/v4";
 import "corporate-ipsum";
 import "next/link";
-const StyledButton = styled(Link).withConfig({
-  shouldForwardProp: (prop) => !["width", "margin", "variant", "shape", "size", "textColor", "color", "textStyle"].includes(prop.toString())
-})`
-  display: table;
-  border: 0;
-  outline: 0;
-  user-select: none;
-  cursor: pointer;
-  font-family: inherit;
-  text-decoration: none;
-  text-align: center;
-  ${cssWidth("auto")}
-  ${cssMargin()}
-  ${(p) => cssMediaRules([p.variant, p.shape, p.size, p.textColor, p.color], ([variant = "flat", shape = "rounded", size = "medium", textColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 100
-  },
-  alpha: 1
-}, color = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => {
-  const fontSize = {
-    value: {
-      small: 12,
-      medium: 14,
-      large: 18
-    }[size],
-    unit: "px"
-  };
-  return css`
-          color: ${colorToString(textColor)};
-          border-radius: ${{
-    square: 0,
-    rounded: 4,
-    pill: 500
-  }[shape]}px;
-          padding: ${{
-    small: "8px 12px",
-    medium: "12px 16px",
-    large: "16px 20px"
-  }[size]};
-          font-size: ${`${fontSize.value}${fontSize.unit}`};
-          ${{
-    flat: css`
-              background: ${colorToString(color)};
-              border: none;
-              transition: ${["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
-
-              :hover {
-                background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};
-              }
-
-              :active {
-                background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};
-              }
-            `,
-    outline: css`
-              background: transparent;
-              box-shadow: inset 0 0 0 2px ${colorToString(color)};
-              transition: ${["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
-
-              :hover {
-                box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};
-                color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};
-              }
-
-              :active {
-                box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};
-                color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};
-              }
-            `,
-    shadow: css`
-              background: ${colorToString(color)};
-              box-shadow: 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 {
-                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
-                transform: translateY(-1px);
-              }
-
-              :active {
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);
-                transform: translateY(0px);
-              }
-            `,
-    clear: css`
-              background: transparent;
-              border: none;
-
-              :hover {
-                color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};
-              }
-
-              :active {
-                color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};
-              }
-            `,
-    blocky: css`
-              background: ${colorToString(color)};
-              border-width: 1px;
-              border-style: solid;
-              border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};
-              box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};
-              transition: ${["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", ")};
-
-              :hover {
-                transform: translateY(2px);
-                box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};
-              }
-
-              :active {
-                transform: translateY(4px);
-                box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};
-              }
-            `,
-    bubbly: css`
-              background: linear-gradient(
-                180deg,
-                ${ColorHelper(colorToString(color)).lighten(0.05).hex()},
-                ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}
-              );
-              position: relative;
-              z-index: 0;
-
-              :before {
-                position: absolute;
-                content: '';
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                z-index: -1;
-                border-radius: inherit;
-                background: linear-gradient(
-                  180deg,
-                  ${ColorHelper(colorToString(color)).lighten(0.2).hex()},
-                  ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}
-                );
-                opacity: 0;
-                transition: opacity 0.15s;
-              }
-
-              :hover {
-                :before {
-                  opacity: 1;
-                }
-              }
-
-              :active {
-                :before {
-                  opacity: 0.25;
-                }
-              }
-            `,
-    skewed: css`
-              position: relative;
-              z-index: 0;
-
-              :before {
-                position: absolute;
-                content: '';
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                z-index: -1;
-                background: ${colorToString(color)};
-                transform: skewX(-12deg);
-                border-radius: inherit;
-                transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);
-              }
-
-              :hover:before {
-                transform: skew(0deg);
-              }
-
-              :active:before {
-                transform: skew(-8deg);
-              }
-            `
-  }[variant]}
-        `;
-})}
-  ${cssTextStyle()}
-`;
 const Button = forwardRef(function Button2(_a, ref) {
   var _b = _a, {
+    as,
     id,
     children,
     link,
@@ -274,6 +80,7 @@ const Button = forwardRef(function Button2(_a, ref) {
     margin,
     className
   } = _b, restOfProps = __objRest(_b, [
+    "as",
     "id",
     "children",
     "link",
@@ -287,19 +94,181 @@ const Button = forwardRef(function Button2(_a, ref) {
     "margin",
     "className"
   ]);
-  return /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, restOfProps), {
+  const Component = as != null ? as : Link;
+  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     id,
-    className,
-    color,
+    className: cx(useStyle({
+      display: "table",
+      border: 0,
+      outline: 0,
+      userSelect: "none",
+      cursor: "pointer",
+      fontFamily: "inherit",
+      textDecoration: "none",
+      textAlign: "center"
+    }), useStyle(responsiveWidth(width, "auto")), margin, useStyle(responsiveStyle([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 __spreadValues({
+        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]);
+    })), useStyle(responsiveTextStyle(textStyle)), className),
     link,
-    width,
-    margin,
-    shape,
-    size,
-    textColor,
-    textStyle,
-    variant,
     children: children == null ? "Button Text" : children
   }));
 });

package/dist/Button.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  TextInputValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n  id?: ElementIDValue\n  children?: TextInputValue\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor\n  textColor?: ResponsiveColor\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n  shouldForwardProp: prop =>\n    !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n      prop.toString(),\n    ),\n})<{\n  width: ControllerProps['width']\n  margin: ControllerProps['margin']\n  variant: ControllerProps['variant']\n  shape: ControllerProps['shape']\n  size: ControllerProps['size']\n  textColor: ResponsiveValue<Color> | null | undefined\n  color: ResponsiveValue<Color> | null | undefined\n  textStyle: ControllerProps['textStyle']\n}>`\n  display: table;\n  border: 0;\n  outline: 0;\n  user-select: none;\n  cursor: pointer;\n  font-family: inherit;\n  text-decoration: none;\n  text-align: center;\n  ${cssWidth('auto')}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.shape, p.size, p.textColor, p.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 css`\n          color: ${colorToString(textColor)};\n          border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n          padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n          font-size: ${`${fontSize.value}${fontSize.unit}`};\n          ${{\n            flat: css`\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: css`\n              background: transparent;\n              box-shadow: 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                box-shadow: 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                box-shadow: 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: css`\n              background: ${colorToString(color)};\n              box-shadow: 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                box-shadow: 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                box-shadow: 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: css`\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: css`\n              background: ${colorToString(color)};\n              border-width: 1px;\n              border-style: solid;\n              border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              box-shadow: 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                box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              }\n\n              :active {\n                transform: translateY(4px);\n                box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              }\n            `,\n            bubbly: css`\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              z-index: 0;\n\n              :before {\n                position: absolute;\n                content: '';\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                z-index: -1;\n                border-radius: 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            `,\n            skewed: css`\n              position: relative;\n              z-index: 0;\n\n              :before {\n                position: absolute;\n                content: '';\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                z-index: -1;\n                background: ${colorToString(color)};\n                transform: skewX(-12deg);\n                border-radius: 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            `,\n          }[variant]}\n        `\n      },\n    )}\n  ${cssTextStyle()}\n`\n\ntype BaseProps = {\n  id?: ControllerProps['id']\n  children?: ReactElement | string\n  link?: ControllerProps['link']\n  variant?: ControllerProps['variant']\n  shape?: ControllerProps['shape']\n  size?: ControllerProps['size']\n  textColor?: ControllerProps['textColor']\n  color?: ControllerProps['color']\n  textStyle?: ControllerProps['textStyle']\n  width?: ControllerProps['width']\n  margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n  {\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  },\n  ref,\n) {\n  return (\n    <StyledButton\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={className}\n      // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n      color={color}\n      link={link}\n      width={width}\n      margin={margin}\n      shape={shape}\n      size={size}\n      textColor={textColor}\n      textStyle={textStyle}\n      variant={variant}\n    >\n      {children == null ? 'Button Text' : children}\n    </StyledButton>\n  )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":"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"}
+{"version":3,"file":"Button.es.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport {\n  ElementIDValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveTextStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: ElementIDValue\n  children?: ReactNode\n  link?: LinkValue\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?: TextStyleValue\n  width?: WidthValue\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<ElementRef<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(responsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          responsiveStyle(\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(responsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"names":["Button","forwardRef","ref","as","id","children","link","variant","shape","size","textColor","color","textStyle","width","margin","className","restOfProps","Component","Link","cx","useStyle","display","border","outline","userSelect","cursor","fontFamily","textDecoration","textAlign","responsiveWidth","responsiveStyle","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","colorToString","borderRadius","square","rounded","pill","padding","flat","background","transition","map","property","join","ColorHelper","darken","hex","boxShadow","shadow","transform","clear","toString","blocky","borderWidth","borderStyle","borderColor","bubbly","lighten","saturate","position","zIndex","content","top","right","bottom","left","opacity","skewed","responsiveTextStyle"],"mappings":"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"}