@khanacademy/wonder-blocks-button 9.0.0 → 9.0.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-button
 
+## 9.0.2
+
+### Patch Changes
+
+- Updated dependencies [28fa0c0]
+- Updated dependencies [28fa0c0]
+- Updated dependencies [38042e2]
+    - @khanacademy/wonder-blocks-core@12.3.0
+    - @khanacademy/wonder-blocks-clickable@7.1.0
+    - @khanacademy/wonder-blocks-icon@5.1.4
+    - @khanacademy/wonder-blocks-progress-spinner@3.1.11
+    - @khanacademy/wonder-blocks-typography@3.2.1
+
+## 9.0.1
+
+### Patch Changes
+
+- b9e4946: Update to use REM sizing tokens internally for scalable font-sizes
+- Updated dependencies [b9e4946]
+- Updated dependencies [b9e4946]
+    - @khanacademy/wonder-blocks-tokens@10.0.0
+    - @khanacademy/wonder-blocks-typography@3.2.0
+    - @khanacademy/wonder-blocks-clickable@7.0.4
+    - @khanacademy/wonder-blocks-progress-spinner@3.1.10
+    - @khanacademy/wonder-blocks-core@12.2.1
+    - @khanacademy/wonder-blocks-icon@5.1.3
+    - @khanacademy/wonder-blocks-theming@3.3.0
+
 ## 9.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -1,5 +1,4 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { Link, useInRouterContext } from 'react-router-dom-v5-compat';
@@ -11,594 +10,16 @@ import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, u
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 
-const {
-  semanticColor
-} = tokens;
-const textUnderlineOffset = tokens.spacing.xxxSmall_4;
-const focusOutline = {
-  border: semanticColor.focus.outer
-};
-const theme$1 = {
-  color: {
-    primary: {
-      progressive: _extends({}, semanticColor.action.primary.progressive, {
-        focus: focusOutline
-      }),
-      destructive: _extends({}, semanticColor.action.primary.destructive, {
-        focus: focusOutline
-      }),
-      disabled: semanticColor.action.primary.disabled
-    },
-    secondary: {
-      progressive: _extends({}, semanticColor.action.secondary.progressive, {
-        focus: focusOutline,
-        hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
-          icon: "transparent"
-        })
-      }),
-      destructive: _extends({}, semanticColor.action.secondary.destructive, {
-        focus: focusOutline,
-        hover: _extends({}, semanticColor.action.secondary.destructive.hover, {
-          icon: "transparent"
-        })
-      }),
-      disabled: _extends({}, semanticColor.action.secondary.disabled, {
-        border: semanticColor.action.primary.disabled.border
-      })
-    },
-    tertiary: {
-      progressive: _extends({}, semanticColor.action.tertiary.progressive, {
-        focus: focusOutline
-      }),
-      destructive: _extends({}, semanticColor.action.tertiary.destructive, {
-        focus: focusOutline
-      }),
-      disabled: semanticColor.action.tertiary.disabled
-    }
-  },
-  border: {
-    width: {
-      secondary: tokens.border.width.thin,
-      focused: tokens.border.width.medium,
-      disabled: tokens.border.width.medium
-    },
-    offset: {
-      primary: tokens.spacing.xxxxSmall_2,
-      secondary: -tokens.spacing.xxxxSmall_2
-    },
-    radius: {
-      default: tokens.border.radius.radius_040,
-      small: tokens.border.radius.radius_040,
-      large: tokens.border.radius.radius_040,
-      icon: tokens.border.radius.radius_full
-    }
-  },
-  size: {
-    height: {
-      small: tokens.spacing.xLarge_32,
-      medium: 40,
-      large: 56
-    },
-    underline: {
-      hover: tokens.spacing.xxxxSmall_2,
-      active: 1
-    }
-  },
-  margin: {
-    icon: {
-      offset: -tokens.spacing.xxxxSmall_2
-    }
-  },
-  padding: {
-    xsmall: tokens.spacing.xxxxSmall_2,
-    small: tokens.spacing.xxSmall_6,
-    medium: tokens.spacing.small_12,
-    large: tokens.spacing.medium_16,
-    xLarge: tokens.spacing.xLarge_32
-  },
-  font: {
-    size: {
-      large: 18
-    },
-    lineHeight: {
-      small: tokens.font.lineHeight.small + textUnderlineOffset,
-      default: tokens.font.lineHeight.medium + textUnderlineOffset,
-      large: tokens.font.lineHeight.medium + 2 + textUnderlineOffset
-    },
-    weight: {
-      default: tokens.font.weight.bold
-    },
-    offset: {
-      default: textUnderlineOffset
-    }
-  }
-};
+const{semanticColor}=tokens;const textUnderlineOffset=tokens.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.border.width.thin,focused:tokens.border.width.medium,disabled:tokens.border.width.medium},offset:{primary:tokens.spacing.xxxxSmall_2,secondary:-tokens.spacing.xxxxSmall_2},radius:{default:tokens.border.radius.radius_040,small:tokens.border.radius.radius_040,large:tokens.border.radius.radius_040,icon:tokens.border.radius.radius_full}},size:{height:{small:tokens.spacing.xLarge_32,medium:40,large:56},underline:{hover:tokens.spacing.xxxxSmall_2,active:1}},margin:{icon:{offset:-tokens.spacing.xxxxSmall_2}},padding:{xsmall:tokens.spacing.xxxxSmall_2,small:tokens.spacing.xxSmall_6,medium:tokens.spacing.small_12,large:tokens.spacing.medium_16,xLarge:tokens.spacing.xLarge_32},font:{size:{large:"1.8rem"},lineHeight:{small:tokens.font.lineHeight.xMedium,default:tokens.font.lineHeight.large,large:"2.6rem"},weight:{default:tokens.font.weight.bold},offset:{default:textUnderlineOffset}}};
 
-const secondaryBgColor = tokens.color.offWhite;
-const theme = mergeTheme(theme$1, {
-  color: {
-    secondary: {
-      progressive: {
-        default: {
-          border: tokens.color.fadedBlue,
-          background: secondaryBgColor
-        },
-        hover: {
-          background: secondaryBgColor,
-          icon: tokens.color.fadedBlue16,
-          foreground: tokens.semanticColor.action.secondary.progressive.default.foreground
-        },
-        press: {
-          background: tokens.color.fadedBlue8
-        }
-      },
-      destructive: {
-        default: {
-          border: tokens.color.fadedRed,
-          background: secondaryBgColor
-        },
-        hover: {
-          background: secondaryBgColor,
-          icon: tokens.color.fadedRed16,
-          foreground: tokens.semanticColor.action.secondary.destructive.default.foreground
-        },
-        press: {
-          background: tokens.color.fadedRed8
-        }
-      }
-    }
-  },
-  border: {
-    radius: {
-      default: tokens.border.radius.radius_120,
-      small: tokens.border.radius.radius_080,
-      large: tokens.border.radius.radius_120
-    },
-    width: {
-      focused: tokens.border.width.thin
-    }
-  },
-  margin: {
-    icon: {
-      offset: -tokens.spacing.xSmall_8
-    }
-  },
-  font: {
-    weight: {
-      default: tokens.font.weight.regular
-    }
-  }
-});
+const secondaryBgColor=tokens.color.offWhite;const theme=mergeTheme(theme$1,{color:{secondary:{progressive:{default:{border:tokens.color.fadedBlue,background:secondaryBgColor},hover:{background:secondaryBgColor,icon:tokens.color.fadedBlue16,foreground:tokens.semanticColor.action.secondary.progressive.default.foreground},press:{background:tokens.color.fadedBlue8}},destructive:{default:{border:tokens.color.fadedRed,background:secondaryBgColor},hover:{background:secondaryBgColor,icon:tokens.color.fadedRed16,foreground:tokens.semanticColor.action.secondary.destructive.default.foreground},press:{background:tokens.color.fadedRed8}}}},border:{radius:{default:tokens.border.radius.radius_120,small:tokens.border.radius.radius_080,large:tokens.border.radius.radius_120},width:{focused:tokens.border.width.thin}},margin:{icon:{offset:-tokens.spacing.xSmall_8}},font:{weight:{default:tokens.font.weight.regular}}});
 
-const themes = {
-  default: theme$1,
-  khanmigo: theme
-};
-const ButtonThemeContext = createThemeContext(theme$1);
-function ThemedButton(props) {
-  const currentTheme = React.useContext(ThemeSwitcherContext);
-  const theme = themes[currentTheme] || theme$1;
-  return React.createElement(ButtonThemeContext.Provider, {
-    value: theme
-  }, props.children);
-}
+const themes={default:theme$1,khanmigo:theme};const ButtonThemeContext=createThemeContext(theme$1);function ThemedButton(props){const currentTheme=React.useContext(ThemeSwitcherContext);const theme=themes[currentTheme]||theme$1;return 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.createElement(PhosphorIcon, _extends({}, commonProps, {
-        size: "small",
-        icon: icon
-      }));
-    case "medium":
-    default:
-      return React.createElement(PhosphorIcon, _extends({}, 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 jsx(PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
-const StyledA = addStyle("a");
-const StyledButton = addStyle("button");
-const StyledLink = addStyle(Link);
-const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
-  const {
-    theme,
-    themeName
-  } = useScopedTheme(ButtonThemeContext);
-  const sharedStyles = useStyles(themedSharedStyles, theme);
-  const inRouterContext = 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
-    } = props,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  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 = _extends({
-    "data-testid": testId,
-    id: id,
-    role: "button",
-    style: [defaultStyle, style]
-  }, restProps);
-  const Label = size === "small" ? LabelSmall : LabelLarge;
-  const label = React.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.createElement(React.Fragment, null, startIcon && React.createElement(View, {
-    style: sharedStyles.iconWrapper
-  }, React.createElement(ButtonIcon, {
-    size: iconSize,
-    icon: startIcon,
-    style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
-    testId: testId ? `${testId}-start-icon` : undefined
-  })), label, spinner && React.createElement(CircularSpinner, {
-    style: sharedStyles.spinner,
-    size: sizeMapping[size],
-    light: kind === "primary",
-    testId: `${testId || "button"}-spinner`
-  }), endIcon && React.createElement(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]
-  }, React.createElement(ButtonIcon, {
-    size: iconSize,
-    icon: endIcon,
-    testId: testId ? `${testId}-end-icon` : undefined
-  })));
-  if (href && !disabled) {
-    return inRouterContext && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
-      to: href,
-      ref: ref
-    }), contents) : React.createElement(StyledA, _extends({}, commonProps, {
-      href: href,
-      ref: ref
-    }), contents);
-  } else {
-    return React.createElement(StyledButton, _extends({
-      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, 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 = _extends({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.focus.border
-    });
-    const hoverStyling = _extends({}, 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: _extends({}, disabledStateStyles, {
-        cursor: "not-allowed",
-        ":hover": _extends({}, disabledStateStyles, {
-          outline: "none"
-        }),
-        ":active": _extends({}, 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 = _extends({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.focus.border
-    });
-    const hoverStyling = _extends({}, 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: _extends({}, disabledStateStyles, {
-        cursor: "not-allowed",
-        ":hover": _extends({}, disabledStateStyles, {
-          outline: "none"
-        }),
-        ":active": _extends({}, 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 = _extends({}, 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: _extends({}, disabledStateStyles, {
-        cursor: "not-allowed",
-        ":hover": sharedDisabledStyling,
-        ":active": sharedDisabledStyling,
-        ":focus-visible": focusStyling
-      })
-    };
-  } else {
-    throw new Error("Button kind not recognized");
-  }
-  styles[buttonType] = StyleSheet.create(newStyles);
-  return styles[buttonType];
-};
+const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{theme,themeName}=useScopedTheme(ButtonThemeContext);const sharedStyles=useStyles(themedSharedStyles,theme);const inRouterContext=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"?LabelSmall:LabelLarge;const label=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=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(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:jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:contents}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:contents})}else {return 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]=StyleSheet.create(newStyles);return styles[buttonType]};
 
-const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "size", "disabled", "spinner"];
-const Button = React.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
-    } = props,
-    sharedButtonCoreProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const inRouterContext = useInRouterContext();
-  const ClickableBehavior = getClickableBehavior(href, skipClientNav, inRouterContext);
-  const renderProp = (state, restChildProps) => {
-    return React.createElement(ThemedButton, null, React.createElement(ButtonCore, _extends({}, 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));
-  };
-  if (beforeNav) {
-    return React.createElement(ClickableBehavior, {
-      disabled: spinner || disabled,
-      href: href,
-      role: "button",
-      type: type,
-      onClick: onClick,
-      beforeNav: beforeNav,
-      safeWithNav: safeWithNav,
-      rel: rel
-    }, renderProp);
-  } else {
-    return React.createElement(ClickableBehavior, {
-      disabled: spinner || disabled,
-      href: href,
-      role: "button",
-      type: type,
-      onClick: onClick,
-      safeWithNav: safeWithNav,
-      target: target,
-      rel: rel
-    }, renderProp);
-  }
-});
+const Button=React.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=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const renderProp=(state,restChildProps)=>{return jsx(ThemedButton,{children: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 jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,rel:rel,children:renderProp})}else {return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,target:target,rel:rel,children:renderProp})}});
 
 export { Button as default };