@lightsparkdev/ui 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @lightsparkdev/ui
 
+## 1.0.7
+
+### Patch Changes
+
+- 9d2f78a: - Add onClick option for textNodes
+  - Unify externalLink and filename props
+- 9d2f78a: [ui]
+  - remove gql and graphql-tag dependencies
+  - add appendToElement prop to Modal
+  - enable cjs code splitting to reduce package size
+  - unify externalLink and filename props
+- 9d2f78a: - Explicitly turn on experimental splitting support for CJS to reduce size of package from 25MB to 5MB
+
 ## 1.0.6
 
 ### Patch Changes

package/dist/{chunk-GMEJR5XX.js → chunk-27TVNUBD.js}

@@ -1,24 +1,39 @@
 import {
-  renderTypography
-} from "./chunk-RQLRNKOP.js";
+  setDefaultReactNodesTypography,
+  toReactNodes
+} from "./chunk-XCEI3WIL.js";
 import {
   Icon
-} from "./chunk-LAGOF7IU.js";
+} from "./chunk-UACBVBBE.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function TextIconAligner({
-  content,
-  typography,
+  content: contentProp,
+  typography: typographyProp,
   rightIcon,
   leftIcon,
   onClick
 }) {
-  const nodes = renderTypography((typography == null ? void 0 : typography.type) || "Body", {
-    content,
-    size: (typography == null ? void 0 : typography.size) || "Small",
-    color: (typography == null ? void 0 : typography.color) || "inherit"
-  });
+  const defaultTypography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
+    props: {
+      size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
+      color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
+    }
+  };
+  const defaultTypographyMap = {
+    link: defaultTypography,
+    externalLink: defaultTypography,
+    text: defaultTypography,
+    nextLink: defaultTypography
+  };
+  let content = setDefaultReactNodesTypography(
+    contentProp,
+    defaultTypographyMap
+  );
+  console.log(content);
+  content = toReactNodes(content);
   const leftIconNode = leftIcon ? /* @__PURE__ */ jsx(
     Icon,
     {
@@ -48,7 +63,7 @@ function TextIconAligner({
       onClick,
       children: [
         leftIconNode,
-        nodes,
+        content,
         rightIconNode
       ]
     }

package/dist/chunk-2KDEPCCC.cjs

@@ -0,0 +1,94 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/styles/themeDefaults/buttons.tsx
+var buttonBorderRadiuses = [8, 32];
+var allowedButtonTypographyTypes = [
+  "Body",
+  "Body Strong",
+  "Title",
+  "Label",
+  "Label Moderate",
+  "Label Strong"
+];
+var buttonsThemeBase = {
+  defaultSize: "Small",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
+  defaultBorderRadius: 32,
+  defaultBorderWidth: 1,
+  defaultBackgroundColor: "bg",
+  defaultBorderColor: "bg",
+  defaultHoverBackgroundColor: "bg",
+  defaultHoverBorderColor: "bg",
+  defaultOutlineOffset: 1,
+  defaultPaddingsY: {
+    ExtraSmall: 4,
+    Small: {
+      short: 8,
+      regular: 12
+    },
+    Schmedium: 12,
+    Medium: 12,
+    Mlarge: 12,
+    Large: 12
+  },
+  kinds: {}
+};
+var defaultButtonsTheme = _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, buttonsThemeBase), {
+  kinds: {
+    primary: {
+      defaultColor: "bg",
+      defaultBorderWidth: 0,
+      defaultBackgroundColor: "c9Neutral",
+      defaultBorderColor: "c9Neutral",
+      defaultHoverBackgroundColor: "c8Neutral",
+      defaultHoverBorderColor: "c8Neutral"
+    },
+    ghost: {
+      defaultBackgroundColor: "transparent",
+      defaultBorderWidth: 0,
+      defaultHoverBackgroundColor: "transparent",
+      defaultHoverBorderColor: "transparent",
+      defaultPaddingsY: {
+        ExtraSmall: 0,
+        Small: 0,
+        Schmedium: 0,
+        Medium: 0,
+        Mlarge: 0,
+        Large: 0
+      }
+    },
+    secondary: {
+      defaultBackgroundColor: ["bg", "c1Neutral"],
+      defaultBorderColor: ["gray90", "gray20"],
+      defaultHoverBackgroundColor: ["bg", "c1Neutral"],
+      defaultHoverBorderColor: ["gray90", "gray20"]
+    },
+    blue39: {
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
+    }
+  }
+});
+
+
+
+
+
+
+exports.buttonBorderRadiuses = buttonBorderRadiuses; exports.allowedButtonTypographyTypes = allowedButtonTypographyTypes; exports.buttonsThemeBase = buttonsThemeBase; exports.defaultButtonsTheme = defaultButtonsTheme;

package/dist/chunk-2ON6YBGL.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/UmaBridgeLoadingTransparent.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function UmaBridgeLoadingTransparent() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 21 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "ellipse",
+          {
+            opacity: "0.3",
+            cx: "10.4996",
+            cy: "9.99998",
+            rx: "8.74961",
+            ry: "8.74986",
+            stroke: "#F9F9F9",
+            strokeWidth: "2.09994"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M19.2503 9.99998C19.2503 8.61916 18.9235 7.25795 18.2966 6.02763C17.6697 4.79731 16.7606 3.73282 15.6435 2.9212C14.5265 2.10957 13.2332 1.57386 11.8694 1.35785C10.5056 1.14184 9.11007 1.25168 7.79688 1.67837",
+            stroke: "#F9F9F9",
+            strokeWidth: "2.09994",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.UmaBridgeLoadingTransparent = UmaBridgeLoadingTransparent;

package/dist/chunk-2R4K7WK4.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Sort.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Sort() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M1.5 2.5H10.5M4.5 9.5H7.5M3 6H9",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "square"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Sort = Sort;

package/dist/{chunk-SCIQSZSW.js → chunk-34MTU3ER.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-EDN2QDCB.js";
 import {
   colors
-} from "./chunk-KPAVY3UH.js";
+} from "./chunk-REL56P3K.js";
 
 // src/router.tsx
 import { omit } from "lodash-es";
@@ -42,6 +42,7 @@ function Link({
   to,
   id,
   externalLink,
+  filename,
   params,
   children,
   css,
@@ -77,6 +78,7 @@ function Link({
       css,
       onClick,
       className,
+      download: filename,
       style: { color: blue ? colors.blue43 : "inherit" },
       target: newTab ? "_blank" : void 0,
       rel: newTab ? "noopener noreferrer" : void 0,

package/dist/chunk-3ET7MRCR.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkCB3IFR2Xcjs = require('./chunk-CB3IFR2X.cjs');
+
+// src/components/ContentTable.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ContentTable({
+  columns,
+  rows
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledContentTable, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", {}),
+      columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, column.key))
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows.map((row, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: row.title }),
+      columns.map((column) => {
+        const value = row[column.key];
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: value === true ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCB3IFR2Xcjs.Icon, { name: "CheckmarkCircleGreen", width: 16 }) : value }, column.key);
+      })
+    ] }, index)) })
+  ] });
+}
+var StyledContentTable = _styled2.default.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid ${({ theme }) => theme.c1Neutral};
+  color: ${({ theme }) => theme.c6Neutral};
+
+  tr:last-child td:first-child {
+    border-bottom-left-radius: 10px;
+  }
+
+  tr:last-child td:last-child {
+    border-bottom-right-radius: 10px;
+  }
+
+  th,
+  td {
+    padding: 26px 12px;
+    border: 1px solid #e5e5e5;
+  }
+  th {
+    text-align: center;
+  }
+  td {
+    vertical-align: middle;
+    text-align: center;
+  }
+`;
+
+
+
+
+exports.ContentTable = ContentTable; exports.StyledContentTable = StyledContentTable;

package/dist/chunk-3FA4RQGH.cjs

@@ -0,0 +1,380 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkXZG2GZWIcjs = require('./chunk-XZG2GZWI.cjs');
+
+
+var _chunk73LM7UGPcjs = require('./chunk-73LM7UGP.cjs');
+
+
+var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
+
+
+var _chunkQCJWZRIPcjs = require('./chunk-QCJWZRIP.cjs');
+
+
+var _chunkIXV57HL7cjs = require('./chunk-IXV57HL7.cjs');
+
+
+var _chunkYHQVDAZWcjs = require('./chunk-YHQVDAZW.cjs');
+
+
+var _chunkUEG2PUK7cjs = require('./chunk-UEG2PUK7.cjs');
+
+
+var _chunkCB3IFR2Xcjs = require('./chunk-CB3IFR2X.cjs');
+
+
+var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+
+
+
+var _chunkPDZ23BEDcjs = require('./chunk-PDZ23BED.cjs');
+
+
+var _chunkEKCGBLIHcjs = require('./chunk-EKCGBLIH.cjs');
+
+
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/components/Button.tsx
+var _react = require('@emotion/react');
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _lodashes = require('lodash-es');
+var _react3 = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var buttonKinds = [
+  "secondary",
+  "primary",
+  "ghost",
+  "green33",
+  "purple55",
+  "blue43",
+  "blue39",
+  "danger"
+];
+var roundPaddingsX = {
+  [_chunkEKCGBLIHcjs.TokenSize.ExtraSmall]: 10,
+  [_chunkEKCGBLIHcjs.TokenSize.Small]: 10,
+  [_chunkEKCGBLIHcjs.TokenSize.Schmedium]: 10,
+  [_chunkEKCGBLIHcjs.TokenSize.Medium]: 14,
+  [_chunkEKCGBLIHcjs.TokenSize.Mlarge]: 19,
+  [_chunkEKCGBLIHcjs.TokenSize.Large]: 19
+};
+var paddingsX = {
+  [_chunkEKCGBLIHcjs.TokenSize.ExtraSmall]: 16,
+  [_chunkEKCGBLIHcjs.TokenSize.Small]: 24,
+  [_chunkEKCGBLIHcjs.TokenSize.Schmedium]: 24,
+  [_chunkEKCGBLIHcjs.TokenSize.Medium]: 24,
+  [_chunkEKCGBLIHcjs.TokenSize.Mlarge]: 24,
+  [_chunkEKCGBLIHcjs.TokenSize.Large]: 24
+};
+function getPaddingX(size, kind, isRound) {
+  return kind === "ghost" ? 0 : isRound ? roundPaddingsX[size] : paddingsX[size];
+}
+function getPadding({ paddingY, kind, size, iconSide, isRound }) {
+  const paddingX = getPaddingX(size, kind, isRound);
+  const paddingForIcon = 0;
+  return kind === "ghost" ? 0 : `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
+}
+function resolveBackgroundColorKey(theme, kind, defaultKey) {
+  var _a;
+  const defaultBackgroundColorKey = (_a = theme.buttons.kinds[kind]) == null ? void 0 : _a[defaultKey];
+  let backgroundColorKey = defaultBackgroundColorKey;
+  if (!backgroundColorKey && _chunkPDZ23BEDcjs.isThemeOrColorKey.call(void 0, kind)) {
+    backgroundColorKey = kind;
+  }
+  const defaultBackgroundColor = theme.buttons[defaultKey];
+  const backgroundColor = _chunkPDZ23BEDcjs.getBackgroundColor.call(void 0, 
+    theme,
+    backgroundColorKey,
+    defaultBackgroundColor
+  );
+  return backgroundColor;
+}
+function resolveProp(prop, kind, defaultKey, theme) {
+  var _a;
+  return (
+    /** props may be unset for a given kind but theme defaults always exist,
+     * so this will always resolve a value: */
+    prop || ((_a = theme.buttons.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.buttons[defaultKey]
+  );
+}
+function resolveProps(props, theme) {
+  const _a = props, {
+    kind = "secondary",
+    size: sizeProp,
+    paddingY: paddingYType = "regular",
+    borderRadius,
+    typography: typographyProp
+  } = _a, rest = _chunkLKKJVJCGcjs.__objRest.call(void 0, _a, [
+    "kind",
+    "size",
+    "paddingY",
+    "borderRadius",
+    "typography"
+  ]);
+  const size = resolveProp(sizeProp, kind, "defaultSize", theme);
+  const defaultPaddingsY = resolveProp(null, kind, "defaultPaddingsY", theme);
+  const defaultPaddingY = defaultPaddingsY[size];
+  const backgroundColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultBackgroundColor"
+  );
+  const borderWidth = resolveProp(null, kind, "defaultBorderWidth", theme);
+  const borderColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultBorderColor"
+  );
+  const hoverBackgroundColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultHoverBackgroundColor"
+  );
+  const hoverBorderColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultHoverBorderColor"
+  );
+  const typography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || resolveProp(null, kind, "defaultTypographyType", theme),
+    color: (typographyProp == null ? void 0 : typographyProp.color) || resolveProp(null, kind, "defaultColor", theme),
+    size
+  };
+  return _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, rest), {
+    kind,
+    size,
+    typography,
+    paddingY: typeof defaultPaddingY === "number" ? defaultPaddingY : defaultPaddingY[paddingYType],
+    borderRadius: resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    hoverBackgroundColor,
+    hoverBorderColor
+  });
+}
+function Button(props) {
+  const theme = _react.useTheme.call(void 0, );
+  const {
+    kind,
+    typography,
+    size,
+    paddingY,
+    text,
+    to,
+    id,
+    hash,
+    externalLink,
+    filename,
+    toParams,
+    onClick,
+    icon,
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+    iconSide = "left",
+    loading = false,
+    loadingKind = "primary",
+    fullWidth = false,
+    disabled = false,
+    mt = 0,
+    ml = 0,
+    type = "button",
+    newTab = false,
+    zIndex = void 0,
+    tooltipText,
+    borderRadius
+  } = resolveProps(props, theme);
+  const tooltipId = _react3.useRef.call(void 0, _lodashes.uniqueId.call(void 0, ));
+  const iconSize = size === "ExtraSmall" ? 12 : 16;
+  let currentIcon = null;
+  if (loading) {
+    currentIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ButtonIcon,
+      {
+        iconSide,
+        text,
+        typography,
+        kind,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZG2GZWIcjs.Loading, { size: iconSize, center: false, kind: loadingKind })
+      }
+    );
+  } else if (icon) {
+    currentIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ButtonIcon,
+      {
+        iconSide,
+        text,
+        typography,
+        kind,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCB3IFR2Xcjs.Icon, { name: icon, width: iconSize, color: typography.color })
+      }
+    );
+  }
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react3.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px"
+        },
+        children: [
+          iconSide === "left" && currentIcon,
+          text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              css: {
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              children: _chunk73LM7UGPcjs.renderTypography.call(void 0, typography.type, {
+                content: text,
+                color: typography.color,
+                size
+              })
+            }
+          ),
+          iconSide === "right" && currentIcon
+        ]
+      })
+    ),
+    tooltipText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYHQVDAZWcjs.Tooltip, { id: tooltipId.current, content: tooltipText }) : null
+  ] });
+  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
+  const commonProps = {
+    id,
+    kind,
+    type,
+    typography,
+    onClick,
+    fullWidth,
+    iconSide,
+    paddingY,
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+    isRound: isSingleCharRoundButton,
+    isLoading: loading,
+    disabled: disabled || loading,
+    css: {
+      marginTop: mt ? `${mt}px` : void 0,
+      marginLeft: ml ? `${ml}px` : void 0
+    },
+    newTab,
+    text,
+    borderRadius,
+    zIndex
+  };
+  if (to) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLink, _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, commonProps), { to, params: toParams, hash, children: content }));
+  }
+  return externalLink ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ButtonHrefLink,
+    _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, commonProps), {
+      href: externalLink,
+      download: filename,
+      target: "_blank",
+      children: content
+    })
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledButton, _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, commonProps), { children: content }));
+}
+var buttonStyle = ({
+  paddingY,
+  kind,
+  theme,
+  disabled,
+  isLoading,
+  typography,
+  fullWidth,
+  zIndex,
+  iconSide,
+  borderWidth,
+  borderColor,
+  isRound,
+  borderRadius,
+  backgroundColor,
+  hoverBackgroundColor,
+  hoverBorderColor
+}) => {
+  return _react.css`
+    display: inline-flex;
+    opacity: ${disabled && !isLoading ? 0.2 : 1};
+    transition: opacity 0.2s;
+    position: relative;
+
+    ${zIndex && `z-index: ${zIndex};`}
+
+    ${_chunkIXV57HL7cjs.applyTypography.call(void 0, 
+    theme,
+    typography.type,
+    typography.size,
+    typography.color
+  )}
+
+    &:focus-visible {
+      outline: ${_chunkMNAZ4BDQcjs.getFocusOutline.call(void 0, { theme })};
+      /* Slightly different offset for buttons so the outline is visible: */
+      outline-offset: 0px;
+    }
+
+    width: ${fullWidth ? "100%" : "fit-content"};
+
+    & > * {
+      width: 100%;
+      text-align: center;
+      white-space: nowrap;
+      background-color: ${backgroundColor};
+      border: ${borderWidth}px solid;
+      border-color: ${borderColor};
+      border-radius: ${isRound ? "100%" : `${borderRadius}px`};
+      padding: ${getPadding({
+    paddingY,
+    kind,
+    size: typography.size,
+    iconSide,
+    isRound
+  })};
+      transition:
+        background-color 0.2s ease-out,
+        border-color 0.2s ease-out;
+
+      &:hover {
+        background-color: ${hoverBackgroundColor};
+        border-color: ${hoverBorderColor};
+      }
+    }
+  `;
+};
+var ButtonIcon = _styled2.default.div`
+  ${({ iconSide, kind, typography }) => `${iconSide}: ${getPaddingX(typography.size, kind, false)}px;`}
+`;
+var StyledButton = _styled2.default.call(void 0, _chunkUEG2PUK7cjs.UnstyledButton)`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonLink = _styled2.default.call(void 0, _chunkQCJWZRIPcjs.Link)`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonHrefLink = _styled2.default.a`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${_chunk6VA4SAHQcjs.select.call(void 0, StyledButton)}, ${_chunk6VA4SAHQcjs.select.call(void 0, ButtonLink)}, ${_chunk6VA4SAHQcjs.select.call(void 0, 
+  ButtonHrefLink
+)})${append}`;
+
+
+
+
+
+
+exports.buttonKinds = buttonKinds; exports.Button = Button; exports.StyledButton = StyledButton; exports.ButtonSelector = ButtonSelector;