@khanacademy/wonder-blocks-button 8.0.3 → 9.0.1

package/dist/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
@@ -13,8 +12,6 @@ var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
 var tokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -33,724 +30,19 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 
-const {
-  semanticColor
-} = tokens__namespace;
-const textUnderlineOffset = tokens__namespace.spacing.xxxSmall_4;
-const focusOutline = {
-  border: semanticColor.focus.outer
-};
-const focusOutlineLight = {
-  border: semanticColor.border.inverse
-};
-const theme$1 = {
-  color: {
-    primary: {
-      progressive: _extends__default["default"]({}, semanticColor.action.primary.progressive, {
-        focus: focusOutline,
-        disabled: {
-          background: semanticColor.action.primary.disabled.background,
-          foreground: semanticColor.action.primary.disabled.foreground
-        }
-      }),
-      progressiveLight: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
-        default: _extends__default["default"]({}, semanticColor.action.secondary.progressive.default, {
-          background: semanticColor.surface.primary
-        }),
-        focus: focusOutlineLight,
-        hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
-          border: semanticColor.border.inverse,
-          backgrond: semanticColor.surface.primary
-        }),
-        press: _extends__default["default"]({}, semanticColor.action.secondary.progressive.press, {
-          border: semanticColor.action.secondary.progressive.press.background
-        }),
-        disabled: {
-          background: semanticColor.action.secondary.progressive.press.background,
-          foreground: semanticColor.action.secondary.progressive.default.foreground
-        }
-      }),
-      destructive: _extends__default["default"]({}, semanticColor.action.primary.destructive, {
-        focus: focusOutline,
-        disabled: {
-          background: semanticColor.action.primary.disabled.background,
-          foreground: semanticColor.action.primary.disabled.foreground
-        }
-      }),
-      destructiveLight: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
-        default: _extends__default["default"]({}, semanticColor.action.secondary.destructive.default, {
-          background: semanticColor.surface.primary
-        }),
-        focus: focusOutlineLight,
-        hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
-          border: semanticColor.border.inverse,
-          background: semanticColor.surface.primary
-        }),
-        press: _extends__default["default"]({}, semanticColor.action.secondary.destructive.press, {
-          border: semanticColor.action.secondary.destructive.press.background
-        }),
-        disabled: {
-          background: semanticColor.action.secondary.destructive.press.background,
-          foreground: semanticColor.action.secondary.destructive.default.foreground
-        }
-      })
-    },
-    secondary: {
-      progressive: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
-        focus: focusOutline,
-        hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
-          icon: "transparent"
-        }),
-        disabled: {
-          border: semanticColor.action.primary.disabled.border,
-          foreground: semanticColor.action.secondary.disabled.foreground
-        }
-      }),
-      progressiveLight: {
-        default: {
-          border: tokens__namespace.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse,
-          icon: "transparent"
-        },
-        press: {
-          border: tokens__namespace.color.fadedBlue,
-          background: semanticColor.action.primary.progressive.press.background,
-          foreground: semanticColor.text.inverse
-        },
-        disabled: {
-          border: semanticColor.action.secondary.progressive.press.background,
-          background: semanticColor.action.secondary.progressive.press.background,
-          foreground: tokens__namespace.color.white50
-        }
-      },
-      destructive: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
-        focus: focusOutline,
-        hover: _extends__default["default"]({}, semanticColor.action.secondary.destructive.hover, {
-          icon: "transparent"
-        }),
-        disabled: {
-          border: semanticColor.action.primary.disabled.border,
-          foreground: semanticColor.action.secondary.disabled.foreground
-        }
-      }),
-      destructiveLight: {
-        default: {
-          border: tokens__namespace.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse,
-          icon: "transparent"
-        },
-        press: {
-          border: tokens__namespace.color.fadedRed,
-          background: semanticColor.action.primary.destructive.press.background,
-          foreground: semanticColor.text.inverse
-        },
-        disabled: {
-          border: semanticColor.action.secondary.destructive.press.background,
-          background: semanticColor.action.secondary.destructive.press.background,
-          foreground: tokens__namespace.color.white50
-        }
-      }
-    },
-    tertiary: {
-      progressive: _extends__default["default"]({}, semanticColor.action.tertiary.progressive, {
-        focus: focusOutline,
-        disabled: {
-          foreground: semanticColor.action.tertiary.disabled.foreground
-        }
-      }),
-      progressiveLight: {
-        default: {
-          border: tokens__namespace.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        press: {
-          border: semanticColor.border.inverse,
-          foreground: tokens__namespace.color.fadedBlue
-        },
-        disabled: {
-          foreground: tokens__namespace.color.white50
-        }
-      },
-      destructive: _extends__default["default"]({}, semanticColor.action.tertiary.destructive, {
-        focus: focusOutline,
-        disabled: {
-          foreground: semanticColor.action.tertiary.disabled.foreground
-        }
-      }),
-      destructiveLight: {
-        default: {
-          border: tokens__namespace.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        press: {
-          border: semanticColor.border.inverse,
-          foreground: tokens__namespace.color.fadedRed
-        },
-        disabled: {
-          foreground: tokens__namespace.color.white50
-        }
-      }
-    }
-  },
-  border: {
-    width: {
-      secondary: tokens__namespace.border.width.thin,
-      focused: tokens__namespace.border.width.medium,
-      disabled: tokens__namespace.border.width.medium
-    },
-    offset: {
-      primary: tokens__namespace.spacing.xxxxSmall_2,
-      secondary: -tokens__namespace.spacing.xxxxSmall_2
-    },
-    radius: {
-      default: tokens__namespace.border.radius.radius_040,
-      small: tokens__namespace.border.radius.radius_040,
-      large: tokens__namespace.border.radius.radius_040,
-      icon: tokens__namespace.border.radius.radius_full
-    }
-  },
-  size: {
-    height: {
-      small: tokens__namespace.spacing.xLarge_32,
-      medium: 40,
-      large: 56
-    },
-    underline: {
-      hover: tokens__namespace.spacing.xxxxSmall_2,
-      active: 1
-    }
-  },
-  margin: {
-    icon: {
-      offset: -tokens__namespace.spacing.xxxxSmall_2
-    }
-  },
-  padding: {
-    xsmall: tokens__namespace.spacing.xxxxSmall_2,
-    small: tokens__namespace.spacing.xxSmall_6,
-    medium: tokens__namespace.spacing.small_12,
-    large: tokens__namespace.spacing.medium_16,
-    xLarge: tokens__namespace.spacing.xLarge_32
-  },
-  font: {
-    size: {
-      large: 18
-    },
-    lineHeight: {
-      small: tokens__namespace.font.lineHeight.small + textUnderlineOffset,
-      default: tokens__namespace.font.lineHeight.medium + textUnderlineOffset,
-      large: tokens__namespace.font.lineHeight.medium + 2 + textUnderlineOffset
-    },
-    weight: {
-      default: tokens__namespace.font.weight.bold
-    },
-    offset: {
-      default: textUnderlineOffset
-    }
-  }
-};
+const{semanticColor}=tokens__namespace;const textUnderlineOffset=tokens__namespace.sizing.size_040;const focusOutline={border:semanticColor.focus.outer};const theme$1={color:{primary:{progressive:{...semanticColor.action.primary.progressive,focus:focusOutline},destructive:{...semanticColor.action.primary.destructive,focus:focusOutline},disabled:semanticColor.action.primary.disabled},secondary:{progressive:{...semanticColor.action.secondary.progressive,focus:focusOutline,hover:{...semanticColor.action.secondary.progressive.hover,icon:"transparent"}},destructive:{...semanticColor.action.secondary.destructive,focus:focusOutline,hover:{...semanticColor.action.secondary.destructive.hover,icon:"transparent"}},disabled:{...semanticColor.action.secondary.disabled,border:semanticColor.action.primary.disabled.border}},tertiary:{progressive:{...semanticColor.action.tertiary.progressive,focus:focusOutline},destructive:{...semanticColor.action.tertiary.destructive,focus:focusOutline},disabled:semanticColor.action.tertiary.disabled}},border:{width:{secondary:tokens__namespace.border.width.thin,focused:tokens__namespace.border.width.medium,disabled:tokens__namespace.border.width.medium},offset:{primary:tokens__namespace.spacing.xxxxSmall_2,secondary:-tokens__namespace.spacing.xxxxSmall_2},radius:{default:tokens__namespace.border.radius.radius_040,small:tokens__namespace.border.radius.radius_040,large:tokens__namespace.border.radius.radius_040,icon:tokens__namespace.border.radius.radius_full}},size:{height:{small:tokens__namespace.spacing.xLarge_32,medium:40,large:56},underline:{hover:tokens__namespace.spacing.xxxxSmall_2,active:1}},margin:{icon:{offset:-tokens__namespace.spacing.xxxxSmall_2}},padding:{xsmall:tokens__namespace.spacing.xxxxSmall_2,small:tokens__namespace.spacing.xxSmall_6,medium:tokens__namespace.spacing.small_12,large:tokens__namespace.spacing.medium_16,xLarge:tokens__namespace.spacing.xLarge_32},font:{size:{large:"1.8rem"},lineHeight:{small:tokens__namespace.font.lineHeight.xMedium,default:tokens__namespace.font.lineHeight.large,large:"2.6rem"},weight:{default:tokens__namespace.font.weight.bold},offset:{default:textUnderlineOffset}}};
 
-const secondaryBgColor = tokens__namespace.color.offWhite;
-const theme = wonderBlocksTheming.mergeTheme(theme$1, {
-  color: {
-    secondary: {
-      progressive: {
-        default: {
-          border: tokens__namespace.color.fadedBlue,
-          background: secondaryBgColor
-        },
-        hover: {
-          background: secondaryBgColor,
-          icon: tokens__namespace.color.fadedBlue16,
-          foreground: tokens__namespace.semanticColor.action.secondary.progressive.default.foreground
-        },
-        press: {
-          background: tokens__namespace.color.fadedBlue8
-        }
-      },
-      destructive: {
-        default: {
-          border: tokens__namespace.color.fadedRed,
-          background: secondaryBgColor
-        },
-        hover: {
-          background: secondaryBgColor,
-          icon: tokens__namespace.color.fadedRed16,
-          foreground: tokens__namespace.semanticColor.action.secondary.destructive.default.foreground
-        },
-        press: {
-          background: tokens__namespace.color.fadedRed8
-        }
-      }
-    }
-  },
-  border: {
-    radius: {
-      default: tokens__namespace.border.radius.radius_120,
-      small: tokens__namespace.border.radius.radius_080,
-      large: tokens__namespace.border.radius.radius_120
-    },
-    width: {
-      focused: tokens__namespace.border.width.thin
-    }
-  },
-  margin: {
-    icon: {
-      offset: -tokens__namespace.spacing.xSmall_8
-    }
-  },
-  font: {
-    weight: {
-      default: tokens__namespace.font.weight.regular
-    }
-  }
-});
+const secondaryBgColor=tokens__namespace.color.offWhite;const theme=wonderBlocksTheming.mergeTheme(theme$1,{color:{secondary:{progressive:{default:{border:tokens__namespace.color.fadedBlue,background:secondaryBgColor},hover:{background:secondaryBgColor,icon:tokens__namespace.color.fadedBlue16,foreground:tokens__namespace.semanticColor.action.secondary.progressive.default.foreground},press:{background:tokens__namespace.color.fadedBlue8}},destructive:{default:{border:tokens__namespace.color.fadedRed,background:secondaryBgColor},hover:{background:secondaryBgColor,icon:tokens__namespace.color.fadedRed16,foreground:tokens__namespace.semanticColor.action.secondary.destructive.default.foreground},press:{background:tokens__namespace.color.fadedRed8}}}},border:{radius:{default:tokens__namespace.border.radius.radius_120,small:tokens__namespace.border.radius.radius_080,large:tokens__namespace.border.radius.radius_120},width:{focused:tokens__namespace.border.width.thin}},margin:{icon:{offset:-tokens__namespace.spacing.xSmall_8}},font:{weight:{default:tokens__namespace.font.weight.regular}}});
 
-const themes = {
-  default: theme$1,
-  khanmigo: theme
-};
-const ButtonThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
-function ThemedButton(props) {
-  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
-  const theme = themes[currentTheme] || theme$1;
-  return React__namespace.createElement(ButtonThemeContext.Provider, {
-    value: theme
-  }, props.children);
-}
+const themes={default:theme$1,khanmigo:theme};const ButtonThemeContext=wonderBlocksTheming.createThemeContext(theme$1);function ThemedButton(props){const currentTheme=React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);const theme=themes[currentTheme]||theme$1;return jsxRuntime.jsx(ButtonThemeContext.Provider,{value:theme,children:props.children})}
 
-function ButtonIcon({
-  icon,
-  size,
-  style,
-  testId
-}) {
-  const commonProps = {
-    "aria-hidden": true,
-    color: "currentColor",
-    style: style,
-    testId
-  };
-  switch (size) {
-    case "small":
-      return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, _extends__default["default"]({}, commonProps, {
-        size: "small",
-        icon: icon
-      }));
-    case "medium":
-    default:
-      return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, _extends__default["default"]({}, commonProps, {
-        size: "medium",
-        icon: icon
-      }));
-  }
-}
+function ButtonIcon({icon,size,style,testId}){const commonProps={"aria-hidden":true,color:"currentColor",style:style,testId};switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
-const StyledA = wonderBlocksCore.addStyle("a");
-const StyledButton = wonderBlocksCore.addStyle("button");
-const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
-const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
-  const {
-    theme,
-    themeName
-  } = wonderBlocksTheming.useScopedTheme(ButtonThemeContext);
-  const sharedStyles = wonderBlocksTheming.useStyles(themedSharedStyles, theme);
-  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
-  const {
-      children,
-      skipClientNav,
-      color,
-      disabled: disabledProp,
-      focused,
-      hovered,
-      href = undefined,
-      kind = "primary",
-      labelStyle,
-      light = false,
-      pressed,
-      size = "medium",
-      style,
-      testId,
-      type = undefined,
-      spinner,
-      startIcon,
-      endIcon,
-      id
-    } = props,
-    restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-  const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
-  const disabled = spinner || disabledProp;
-  const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
-  const commonProps = _extends__default["default"]({
-    "data-testid": testId,
-    id: id,
-    role: "button",
-    style: [defaultStyle, style]
-  }, restProps);
-  const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
-  const label = React__namespace.createElement(Label, {
-    style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
-    testId: testId ? `${testId}-inner-label` : undefined
-  }, children);
-  const sizeMapping = {
-    medium: "small",
-    small: "xsmall",
-    large: "medium"
-  };
-  const iconSize = size === "small" ? "small" : "medium";
-  const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(wonderBlocksCore.View, {
-    style: sharedStyles.iconWrapper
-  }, React__namespace.createElement(ButtonIcon, {
-    size: iconSize,
-    icon: startIcon,
-    style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
-    testId: testId ? `${testId}-start-icon` : undefined
-  })), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
-    style: sharedStyles.spinner,
-    size: sizeMapping[size],
-    light: kind === "primary",
-    testId: `${testId || "button"}-spinner`
-  }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
-    testId: testId ? `${testId}-end-icon-wrapper` : undefined,
-    style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
-  }, React__namespace.createElement(ButtonIcon, {
-    size: iconSize,
-    icon: endIcon,
-    testId: testId ? `${testId}-end-icon` : undefined
-  })));
-  if (href && !disabled) {
-    return inRouterContext && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
-      to: href,
-      ref: ref
-    }), contents) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
-      href: href,
-      ref: ref
-    }), contents);
-  } else {
-    return React__namespace.createElement(StyledButton, _extends__default["default"]({
-      type: type || "button"
-    }, commonProps, {
-      "aria-disabled": disabled,
-      ref: ref
-    }), contents);
-  }
-});
-const themedSharedStyles = theme => ({
-  shared: {
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: theme.size.height.medium,
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: theme.padding.large,
-    paddingRight: theme.padding.large,
-    border: "none",
-    borderRadius: theme.border.radius.default,
-    cursor: "pointer",
-    outline: "none",
-    textDecoration: "none",
-    boxSizing: "border-box",
-    touchAction: "manipulation",
-    userSelect: "none",
-    ":focus": {
-      WebkitTapHighlightColor: "rgba(0,0,0,0)"
-    }
-  },
-  disabled: {
-    cursor: "auto"
-  },
-  small: {
-    borderRadius: theme.border.radius.small,
-    height: theme.size.height.small
-  },
-  large: {
-    borderRadius: theme.border.radius.large,
-    height: theme.size.height.large
-  },
-  text: {
-    alignItems: "center",
-    fontWeight: theme.font.weight.default,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    lineHeight: `${theme.font.lineHeight.default}px`,
-    textOverflow: "ellipsis",
-    display: "inline-block",
-    pointerEvents: "none"
-  },
-  smallText: {
-    lineHeight: `${theme.font.lineHeight.small}px`
-  },
-  largeText: {
-    fontSize: theme.font.size.large,
-    lineHeight: `${theme.font.lineHeight.large}px`
-  },
-  textWithFocus: {
-    position: "relative"
-  },
-  hiddenText: {
-    visibility: "hidden"
-  },
-  spinner: {
-    position: "absolute"
-  },
-  startIcon: {
-    marginRight: theme.padding.small,
-    marginLeft: theme.margin.icon.offset
-  },
-  tertiaryStartIcon: {
-    marginLeft: 0
-  },
-  endIcon: {
-    marginLeft: theme.padding.small
-  },
-  iconWrapper: {
-    borderRadius: theme.border.radius.icon,
-    padding: theme.padding.xsmall,
-    minWidth: "auto"
-  },
-  endIconWrapper: {
-    marginLeft: theme.padding.small,
-    marginRight: theme.margin.icon.offset
-  },
-  endIconWrapperTertiary: {
-    marginRight: 0
-  }
-});
-const styles = {};
-const _generateStyles = (buttonColor = "default", kind, light, size, theme, themeName) => {
-  const buttonType = `${buttonColor}-${kind}-${light}-${size}-${themeName}`;
-  if (styles[buttonType]) {
-    return styles[buttonType];
-  }
-  const padding = size === "large" ? theme.padding.xLarge : theme.padding.large;
-  const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
-  let newStyles = {};
-  if (kind === "primary") {
-    const themeColorAction = theme.color.primary[colorToAction];
-    const sharedFocusHoverStyling = {
-      outlineOffset: theme.border.offset.primary,
-      outlineStyle: "solid",
-      outlineWidth: theme.border.width.focused
-    };
-    const focusStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.focus.border
-    });
-    const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.hover.border
-    });
-    const activePressedStyling = {
-      background: themeColorAction.press.background,
-      outlineColor: themeColorAction.press.border,
-      outlineOffset: theme.border.offset.primary,
-      outlineStyle: "solid",
-      outlineWidth: theme.border.width.focused
-    };
-    newStyles = {
-      default: {
-        background: themeColorAction.default.background,
-        color: themeColorAction.default.foreground,
-        paddingInline: padding,
-        [":hover:not([aria-disabled=true])"]: hoverStyling,
-        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
-        [":active:not([aria-disabled=true])"]: activePressedStyling
-      },
-      focused: focusStyling,
-      pressed: activePressedStyling,
-      disabled: {
-        background: themeColorAction.disabled.background,
-        color: themeColorAction.disabled.foreground,
-        cursor: "default",
-        ":focus-visible": focusStyling
-      }
-    };
-  } else if (kind === "secondary") {
-    const themeColorAction = theme.color.secondary[colorToAction];
-    const sharedFocusHoverStyling = {
-      background: themeColorAction.hover.background,
-      outlineStyle: "solid",
-      outlineOffset: theme.border.offset.secondary,
-      outlineWidth: theme.border.width.focused
-    };
-    const focusStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.focus.border
-    });
-    const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.hover.border
-    });
-    const activePressedStyling = {
-      background: themeColorAction.press.background,
-      color: themeColorAction.press.foreground,
-      outlineColor: themeColorAction.press.border,
-      outlineStyle: "solid",
-      outlineWidth: theme.border.width.focused
-    };
-    newStyles = {
-      default: {
-        background: themeColorAction.default.background,
-        color: themeColorAction.default.foreground,
-        borderColor: themeColorAction.default.border,
-        borderStyle: "solid",
-        borderWidth: theme.border.width.secondary,
-        paddingInline: padding,
-        [":hover:not([aria-disabled=true])"]: hoverStyling,
-        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
-        [":active:not([aria-disabled=true])"]: activePressedStyling
-      },
-      focused: focusStyling,
-      pressed: activePressedStyling,
-      disabled: {
-        color: themeColorAction.disabled.foreground,
-        borderColor: themeColorAction.disabled.border,
-        cursor: "default",
-        ":focus-visible": focusStyling
-      },
-      iconWrapperHovered: {
-        backgroundColor: themeColorAction.hover.icon,
-        color: themeColorAction.hover.foreground
-      }
-    };
-  } else if (kind === "tertiary") {
-    const themeColorAction = theme.color.tertiary[colorToAction];
-    const focusStyling = {
-      outlineStyle: "solid",
-      borderColor: "transparent",
-      outlineColor: themeColorAction.focus.border,
-      outlineWidth: theme.border.width.focused,
-      borderRadius: theme.border.radius.default
-    };
-    const activePressedStyling = {
-      color: themeColorAction.press.foreground,
-      textDecoration: "underline",
-      textDecorationThickness: theme.size.underline.active,
-      textUnderlineOffset: theme.font.offset.default
-    };
-    newStyles = {
-      default: {
-        background: themeColorAction.default.background,
-        color: themeColorAction.default.foreground,
-        paddingInline: 0,
-        [":hover:not([aria-disabled=true])"]: {
-          textUnderlineOffset: theme.font.offset.default,
-          textDecoration: "underline",
-          textDecorationThickness: theme.size.underline.hover
-        },
-        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
-        [":active:not([aria-disabled=true])"]: activePressedStyling
-      },
-      focused: focusStyling,
-      pressed: activePressedStyling,
-      disabled: {
-        color: themeColorAction.disabled.foreground,
-        cursor: "default",
-        ":focus-visible": focusStyling
-      },
-      disabledFocus: focusStyling
-    };
-  } else {
-    throw new Error("Button kind not recognized");
-  }
-  styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
-  return styles[buttonType];
-};
+const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{theme,themeName}=wonderBlocksTheming.useScopedTheme(ButtonThemeContext);const sharedStyles=wonderBlocksTheming.useStyles(themedSharedStyles,theme);const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,color,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(color,kind,size,theme,themeName);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,disabled&&sharedStyles.disabled,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const commonProps={"data-testid":testId,id:id,role:"button",style:[defaultStyle,style],...restProps};const Label=size==="small"?wonderBlocksTypography.LabelSmall:wonderBlocksTypography.LabelLarge;const label=jsxRuntime.jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&sharedStyles.textWithFocus,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary,!disabled&&(focused||hovered)&&kind!=="primary"&&buttonStyles.iconWrapperHovered],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:contents}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:contents})}else {return jsxRuntime.jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:contents})}});const themedSharedStyles=theme=>({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",height:theme.size.height.medium,paddingTop:0,paddingBottom:0,paddingLeft:theme.padding.large,paddingRight:theme.padding.large,border:"none",borderRadius:theme.border.radius.default,cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}},disabled:{cursor:"auto"},small:{borderRadius:theme.border.radius.small,height:theme.size.height.small},large:{borderRadius:theme.border.radius.large,height:theme.size.height.large},text:{alignItems:"center",fontWeight:theme.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme.font.lineHeight.small},largeText:{fontSize:theme.font.size.large,lineHeight:theme.font.lineHeight.large},textWithFocus:{position:"relative"},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginRight:theme.padding.small,marginLeft:theme.margin.icon.offset},tertiaryStartIcon:{marginLeft:0},endIcon:{marginLeft:theme.padding.small},iconWrapper:{borderRadius:theme.border.radius.icon,padding:theme.padding.xsmall,minWidth:"auto"},endIconWrapper:{marginLeft:theme.padding.small,marginRight:theme.margin.icon.offset},endIconWrapperTertiary:{marginRight:0}});const styles={};const _generateStyles=(buttonColor="default",kind,size,theme,themeName)=>{const buttonType=`${buttonColor}-${kind}-${size}-${themeName}`;if(styles[buttonType]){return styles[buttonType]}const padding=size==="large"?theme.padding.xLarge:theme.padding.large;const colorToAction=buttonColor==="destructive"?"destructive":"progressive";const disabledState=theme.color[kind].disabled;const disabledStateStyles={borderColor:disabledState.border,background:disabledState.background,color:disabledState.foreground};let newStyles={};if(kind==="primary"){const themeColorAction=theme.color.primary[colorToAction];const sharedFocusHoverStyling={outlineOffset:theme.border.offset.primary,outlineStyle:"solid",outlineWidth:theme.border.width.focused};const focusStyling={...sharedFocusHoverStyling,outlineColor:themeColorAction.focus.border};const hoverStyling={...sharedFocusHoverStyling,outlineColor:themeColorAction.hover.border};const activePressedStyling={background:themeColorAction.press.background,outlineColor:themeColorAction.press.border,outlineOffset:theme.border.offset.primary,outlineStyle:"solid",outlineWidth:theme.border.width.focused};newStyles={default:{background:themeColorAction.default.background,color:themeColorAction.default.foreground,paddingInline:padding,":hover":hoverStyling,":focus-visible":focusStyling,":active":activePressedStyling},focused:focusStyling,pressed:activePressedStyling,disabled:{...disabledStateStyles,cursor:"not-allowed",":hover":{...disabledStateStyles,outline:"none"},":active":{...disabledStateStyles,outline:"none"},":focus-visible":focusStyling}};}else if(kind==="secondary"){const themeColorAction=theme.color.secondary[colorToAction];const sharedFocusHoverStyling={background:themeColorAction.hover.background,outlineStyle:"solid",outlineOffset:theme.border.offset.secondary,outlineWidth:theme.border.width.focused};const focusStyling={...sharedFocusHoverStyling,outlineColor:themeColorAction.focus.border};const hoverStyling={...sharedFocusHoverStyling,borderColor:themeColorAction.hover.border};const activePressedStyling={background:themeColorAction.press.background,color:themeColorAction.press.foreground,outlineColor:themeColorAction.press.border,outlineStyle:"solid",outlineWidth:theme.border.width.focused};newStyles={default:{background:themeColorAction.default.background,color:themeColorAction.default.foreground,borderColor:themeColorAction.default.border,borderStyle:"solid",borderWidth:theme.border.width.secondary,paddingInline:padding,":hover":hoverStyling,":focus-visible":focusStyling,":active":activePressedStyling},focused:focusStyling,pressed:activePressedStyling,disabled:{...disabledStateStyles,cursor:"not-allowed",":hover":{...disabledStateStyles,outline:"none"},":active":{...disabledStateStyles,outline:"none"},":focus-visible":focusStyling},iconWrapperHovered:{backgroundColor:themeColorAction.hover.icon,color:themeColorAction.hover.foreground}};}else if(kind==="tertiary"){const themeColorAction=theme.color.tertiary[colorToAction];const focusStyling={outlineStyle:"solid",borderColor:"transparent",outlineColor:themeColorAction.focus.border,outlineWidth:theme.border.width.focused,borderRadius:theme.border.radius.default};const activePressedStyling={color:themeColorAction.press.foreground,textDecoration:"underline",textDecorationThickness:theme.size.underline.active,textUnderlineOffset:theme.font.offset.default};const sharedDisabledStyling={...disabledStateStyles,textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset",outline:"none"};newStyles={default:{background:themeColorAction.default.background,color:themeColorAction.default.foreground,paddingInline:0,":hover":{textUnderlineOffset:theme.font.offset.default,textDecoration:"underline",textDecorationThickness:theme.size.underline.hover},":focus-visible":focusStyling,":active":activePressedStyling},focused:focusStyling,pressed:activePressedStyling,disabled:{...disabledStateStyles,cursor:"not-allowed",":hover":sharedDisabledStyling,":active":sharedDisabledStyling,":focus-visible":focusStyling}};}else {throw new Error("Button kind not recognized")}styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
 
-const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "light", "size", "disabled", "spinner"];
-const Button = React__namespace.forwardRef(function Button(props, ref) {
-  const {
-      href = undefined,
-      type = undefined,
-      children,
-      skipClientNav,
-      onClick,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      tabIndex,
-      target,
-      rel,
-      color = "default",
-      kind = "primary",
-      light = false,
-      size = "medium",
-      disabled = false,
-      spinner = false
-    } = props,
-    sharedButtonCoreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
-  const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, inRouterContext);
-  const renderProp = (state, restChildProps) => {
-    return React__namespace.createElement(ThemedButton, null, React__namespace.createElement(ButtonCore, _extends__default["default"]({}, sharedButtonCoreProps, state, restChildProps, {
-      disabled: disabled,
-      spinner: spinner || state.waiting,
-      color: color,
-      kind: kind,
-      light: light,
-      size: size,
-      skipClientNav: skipClientNav,
-      href: href,
-      target: target,
-      type: type,
-      tabIndex: tabIndex,
-      ref: ref
-    }), children));
-  };
-  if (beforeNav) {
-    return React__namespace.createElement(ClickableBehavior, {
-      disabled: spinner || disabled,
-      href: href,
-      role: "button",
-      type: type,
-      onClick: onClick,
-      beforeNav: beforeNav,
-      safeWithNav: safeWithNav,
-      rel: rel
-    }, renderProp);
-  } else {
-    return React__namespace.createElement(ClickableBehavior, {
-      disabled: spinner || disabled,
-      href: href,
-      role: "button",
-      type: type,
-      onClick: onClick,
-      safeWithNav: safeWithNav,
-      target: target,
-      rel: rel
-    }, renderProp);
-  }
-});
+const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,color="default",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const renderProp=(state,restChildProps)=>{return jsxRuntime.jsx(ThemedButton,{children:jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,color:color,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})};if(beforeNav){return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,rel:rel,children:renderProp})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,target:target,rel:rel,children:renderProp})}});
 
 module.exports = Button;