@makeswift/runtime 0.0.0-1faafb3 → 0.0.0-20221019211549

package/dist/Button.cjs.js

@@ -0,0 +1,315 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var React = require("react");
+var styled = require("styled-components");
+var ColorHelper = require("color");
+var cssMediaRules = require("./cssMediaRules.cjs.js");
+var index$1 = require("./index.cjs.js");
+var index = require("./index.cjs3.js");
+var jsxRuntime = require("react/jsx-runtime");
+require("use-sync-external-store/shim/with-selector");
+require("./react-page.cjs.js");
+require("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
+require("./image.cjs.js");
+require("./color.cjs.js");
+require("./slot.cjs.js");
+require("next/dynamic");
+require("@apollo/client");
+require("@apollo/client/link/batch-http");
+require("slate");
+require("./graphql.cjs.js");
+require("./shape.cjs.js");
+require("./text-input.cjs.js");
+require("@emotion/css");
+require("scroll-into-view-if-needed");
+require("./box-models.cjs.js");
+require("css-box-model");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
+require("uuid/v4");
+require("corporate-ipsum");
+require("next/link");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
+const StyledButton = styled__default["default"](index.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;
+  ${cssMediaRules.cssWidth("auto")}
+  ${cssMediaRules.cssMargin()}
+  ${(p) => cssMediaRules.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 styled.css`
+          color: ${index$1.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: styled.css`
+              background: ${index$1.colorToString(color)};
+              border: none;
+              transition: ${["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
+
+              :hover {
+                background: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.1).hex()};
+              }
+
+              :active {
+                background: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.15).hex()};
+              }
+            `,
+    outline: styled.css`
+              background: transparent;
+              box-shadow: inset 0 0 0 2px ${index$1.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__default["default"](index$1.colorToString(color)).darken(0.1).hex()};
+                color: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.1).hex()};
+              }
+
+              :active {
+                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.15).hex()};
+                color: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.15).hex()};
+              }
+            `,
+    shadow: styled.css`
+              background: ${index$1.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: styled.css`
+              background: transparent;
+              border: none;
+
+              :hover {
+                color: ${ColorHelper__default["default"](index$1.colorToString(textColor)).alpha(0.5).toString()};
+              }
+
+              :active {
+                color: ${ColorHelper__default["default"](index$1.colorToString(textColor)).alpha(0.6).toString()};
+              }
+            `,
+    blocky: styled.css`
+              background: ${index$1.colorToString(color)};
+              border-width: 1px;
+              border-style: solid;
+              border-color: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
+              box-shadow: 0 4px ${ColorHelper__default["default"](index$1.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__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
+              }
+
+              :active {
+                transform: translateY(4px);
+                box-shadow: 0 0 ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
+              }
+            `,
+    bubbly: styled.css`
+              background: linear-gradient(
+                180deg,
+                ${ColorHelper__default["default"](index$1.colorToString(color)).lighten(0.05).hex()},
+                ${ColorHelper__default["default"](index$1.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__default["default"](index$1.colorToString(color)).lighten(0.2).hex()},
+                  ${ColorHelper__default["default"](index$1.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: styled.css`
+              position: relative;
+              z-index: 0;
+
+              :before {
+                position: absolute;
+                content: '';
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: -1;
+                background: ${index$1.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]}
+        `;
+})}
+  ${cssMediaRules.cssTextStyle()}
+`;
+const Button = React.forwardRef(function Button2(_a, ref) {
+  var _b = _a, {
+    id,
+    children,
+    link,
+    variant,
+    shape,
+    size,
+    textColor,
+    color,
+    textStyle,
+    width,
+    margin,
+    className
+  } = _b, restOfProps = __objRest(_b, [
+    "id",
+    "children",
+    "link",
+    "variant",
+    "shape",
+    "size",
+    "textColor",
+    "color",
+    "textStyle",
+    "width",
+    "margin",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    id,
+    className,
+    color,
+    link,
+    width,
+    margin,
+    shape,
+    size,
+    textColor,
+    textStyle,
+    variant,
+    children: children == null ? "Button Text" : children
+  }));
+});
+exports["default"] = Button;
+//# sourceMappingURL=Button.cjs.js.map

package/dist/Button.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,eAAeC,gBAAAA,WAAOC,UAAD,EAAOC,WAAW;AAAA,EAC3CC,mBAAmBC,CACjB,SAAA,CAAC,CAAC,SAAS,UAAU,WAAW,SAAS,QAAQ,aAAa,SAAS,WAAtE,EAAmFC,SAClFD,KAAKE,UADN;AAFwC,CAAxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuBjBC,cAAAA,SAAS,MAAD;AAAA,IACRC,cAAY,UAAA;AAAA,IACZC,CAAAA,MACAC,4BACE,CAACD,EAAEE,SAASF,EAAEG,OAAOH,EAAEI,MAAMJ,EAAEK,WAAWL,EAAEM,KAA5C,GACA,CAAC,CACCJ,UAAU,QACVC,QAAQ,WACRC,OAAO,UACPC,YAAY;AAAA,EAAEE,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,GACZL,QAAQ;AAAA,EAAEC,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACJ,QAAMC,WAAW;AAAA,IACfC,OAAO;AAAA,MAAEC,OAAO;AAAA,MAAIC,QAAQ;AAAA,MAAIC,OAAO;AAAA,IAAKZ,EAAAA;AAAAA,IAC5Ca,MAAM;AAAA,EAAA;AAGDC,SAAAA;mBACIC,QAAAA,cAAcd,SAAD;AAAA,2BACL;AAAA,IAAEe,QAAQ;AAAA,IAAGC,SAAS;AAAA,IAAGC,MAAM;AAAA,EAAMnB,EAAAA;AAAAA,qBAC3C;AAAA,IAAEW,OAAO;AAAA,IAAYC,QAAQ;AAAA,IAAaC,OAAO;AAAA,EAAcZ,EAAAA;AAAAA,uBAC5D,GAAEQ,SAASC,QAAQD,SAASK;AAAAA,YACxC;AAAA,IACAM,MAAML,OAAAA;AAAAA,4BACUC,QAAAA,cAAcb,KAAD;AAAA;AAAA,4BAEb,CAAC,SAAS,cAAc,UAAU,YAAlC,EACXkB,IAAIC,CAAAA,aAAa,GAAEA,4BADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA,8BAKEC,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CC;;;;8BAI9CF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;IAGjEC,SAASZ,OAAAA;AAAAA;AAAAA,4CAEuBC,QAAAA,cAAcb,KAAD;AAAA,4BAC7B,CAAC,SAAS,cAAc,YAAxB,EACXkB,IAAIC,CAAAA,aAAa,GAAEA,4BADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA,8CAKkBC,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CC;yBACnEF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CC;;;;8CAIzBF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;yBACpEF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;IAG5DE,QAAQb,OAAAA;AAAAA,4BACQC,QAAAA,cAAcb,KAAD;AAAA;AAAA,4BAEb,CAAC,aAAa,YAAd,EACXkB,IAAIC,cAAa,GAAEA,gBADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAchBM,OAAOd,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,yBAKMS,qBAAAA,WAAYR,sBAAcd,SAAD,CAAd,EAA2BM,MAAM,GAA5C,EAAiDd;;;;yBAIjD8B,qBAAAA,WAAYR,sBAAcd,SAAD,CAAd,EAA2BM,MAAM,GAA5C,EAAiDd;;;IAG9DoC,QAAQf,OAAAA;AAAAA,4BACQC,QAAAA,cAAcb,KAAD;AAAA;AAAA;AAAA,8BAGXqB,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;kCAC3CF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;4BACrD,CAAC,aAAa,YAAd,EACXL,IAAIC,cAAa,GAAEA,eADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA;AAAA,oCAMQC,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;;;kCAKjDF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;IAGrEK,QAAQhB,OAAAA;AAAAA;AAAAA;AAAAA,kBAGFS,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuB6B,QAAQ,IAA1C,EAAgDN;kBAChDF,gCAAYR,QAAAA,cAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CQ,SAAS,IAAvD,EAA6DP,IAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAgBjEF,qBAAAA,WAAYR,sBAAcb,KAAD,CAAd,EAAuB6B,QAAQ,GAA1C,EAA+CN;oBAC/CF,gCAAYR,QAAAA,cAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CQ,SAAS,IAAvD,EAA6DP,IAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkB3EQ,QAAQnB,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,8BAYUC,QAAAA,cAAcb,KAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/BJ,EAAAA;AAAAA;AAEL,CAxKU;AAAA,IA0KboC,cAAe,aAAA;AAAA;AAmBbC,MAAAA,SAASC,MAAAA,WAAqC,iBAClD,IAeAC,KACA;AAhBA,eACEC;AAAAA;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA1C;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAuC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MAZF,IAaKC,wBAbL,IAaKA;AAAAA,IAZHP;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA1C;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAuC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAMA,wCAAC,cAAD,iCACMC,cADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAdF,UAgBGN,YAAY,OAAO,gBAAgBA;AAAAA,EAAAA,EAjBxC;AAoBD,CAtCwB;;"}

package/dist/Button.es.js

@@ -0,0 +1,308 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 { jsx } from "react/jsx-runtime";
+import "use-sync-external-store/shim/with-selector";
+import "./react-page.es.js";
+import "redux";
+import "redux-thunk";
+import "./actions.es.js";
+import "./image.es.js";
+import "./color.es.js";
+import "./slot.es.js";
+import "next/dynamic";
+import "@apollo/client";
+import "@apollo/client/link/batch-http";
+import "slate";
+import "./graphql.es.js";
+import "./shape.es.js";
+import "./text-input.es.js";
+import "@emotion/css";
+import "scroll-into-view-if-needed";
+import "./box-models.es.js";
+import "css-box-model";
+import "react-dom";
+import "html-react-parser";
+import "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+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, {
+    id,
+    children,
+    link,
+    variant,
+    shape,
+    size,
+    textColor,
+    color,
+    textStyle,
+    width,
+    margin,
+    className
+  } = _b, restOfProps = __objRest(_b, [
+    "id",
+    "children",
+    "link",
+    "variant",
+    "shape",
+    "size",
+    "textColor",
+    "color",
+    "textStyle",
+    "width",
+    "margin",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    id,
+    className,
+    color,
+    link,
+    width,
+    margin,
+    shape,
+    size,
+    textColor,
+    textStyle,
+    variant,
+    children: children == null ? "Button Text" : children
+  }));
+});
+export { Button as default };
+//# sourceMappingURL=Button.es.js.map

package/dist/Button.es.js.map

@@ -0,0 +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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"}