orcs-design-system 3.3.71 → 3.3.73

package/es/components/ActionsMenu/index.js

@@ -2,7 +2,7 @@ import React, { useState, useImperativeHandle, createContext, useContext, useMem
 import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { NavLink } from "react-router-dom";
-import { space, layout } from "styled-system";
+import { space, layout, variant } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { commonKeys } from "../../hooks/keypress";
 import useActionMenu from "./useActionMenu";
@@ -22,15 +22,70 @@ const Wrapper = /*#__PURE__*/styled.div.withConfig({
 const Control = /*#__PURE__*/styled.button.withConfig({
   displayName: "Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:", ";width:", ";height:", ";border-radius:", ";border:", ";", " ", " &:hover,&:focus{outline:0;border-color:", ";}&[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "50%" : themeGet("radii.2")(props), props => props.variant === "circle" ? "solid 2px" : "solid 1px", props => props.variant === "default" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : "white", props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props)), props => props.variant === "circle" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props), props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props)), props => props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;transition:", ";cursor:", ";", " &[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => variant({
+  variants: {
+    default: {
+      width: "30px",
+      height: "30px",
+      borderRadius: themeGet("radii.2")(props),
+      border: "solid 1px",
+      backgroundColor: props.disabled ? themeGet("colors.greyLighter")(props) : "white",
+      borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props),
+      "&:hover, &:focus": {
+        outline: 0,
+        borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props)
+      }
+    },
+    circle: {
+      width: "35px",
+      height: "35px",
+      borderRadius: "50%",
+      border: "solid 2px",
+      backgroundColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props),
+      borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props),
+      "&:hover, &:focus": {
+        outline: 0,
+        borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props)
+      }
+    }
+  }
+}), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
 const Dots = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dots",
   componentId: "sc-yvbni2-3"
-})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:translate(0,-6px);}&:after{transform:translate(0,6px);}"], props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props), props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props));
+})(["border-radius:2px;height:4px;width:4px;&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&:before{transform:translate(0,-6px);}&:after{transform:translate(0,6px);}", ""], props => variant({
+  variants: {
+    default: {
+      backgroundColor: themeGet("colors.greyDarker")(props),
+      "&:before, &:after": {
+        backgroundColor: themeGet("colors.greyDarker")(props)
+      }
+    },
+    circle: {
+      backgroundColor: themeGet("colors.white")(props),
+      "&:before, &:after": {
+        backgroundColor: themeGet("colors.white")(props)
+      }
+    }
+  }
+}));
 const Cross = /*#__PURE__*/styled.div.withConfig({
   displayName: "Cross",
   componentId: "sc-yvbni2-4"
-})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:rotate(-45deg);}&:after{transform:rotate(45deg);}"], crossFadeIn, props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props));
+})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&:before{transform:rotate(-45deg);}&:after{transform:rotate(45deg);}", ""], crossFadeIn, props => variant({
+  variants: {
+    default: {
+      "&:before, &:after": {
+        backgroundColor: themeGet("colors.greyDarker")(props)
+      }
+    },
+    circle: {
+      "&:before, &:after": {
+        backgroundColor: themeGet("colors.white")(props)
+      }
+    }
+  }
+}));
 const Menu = /*#__PURE__*/styled.div.withConfig({
   displayName: "Menu",
   componentId: "sc-yvbni2-5"

package/es/components/Breadcrumbs/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { space, layout, typography } from "styled-system";
+import { space, layout, typography, variant } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import StyledLink from "../StyledLink";
 import Popover from "../Popover";
@@ -17,45 +17,48 @@ const List = /*#__PURE__*/styled("ol").withConfig({
 }).withConfig({
   displayName: "List",
   componentId: "sc-qbw4kn-1"
-})(["display:flex;flex-direction:", ";flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px;text-shadow:", ";", ""], _ref => {
+})(["display:flex;flex-direction:", ";flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px;", " ", ""], _ref => {
   let {
     showAsIconTooltip
   } = _ref;
   return showAsIconTooltip ? "column" : "row";
-}, _ref2 => {
-  let {
-    variant
-  } = _ref2;
-  return variant === "white" ? "0 0px 5px rgba(0,0,0,0.2)" : "none";
-}, space);
+}, variant({
+  variants: {
+    default: {
+      textShadow: "none"
+    },
+    white: {
+      textShadow: "0 0px 5px rgba(0,0,0,0.2)"
+    }
+  }
+}), space);
 const Item = /*#__PURE__*/styled("li").withConfig({
   shouldForwardProp: prop => !["variant", "isLast"].includes(prop)
 }).withConfig({
   displayName: "Item",
   componentId: "sc-qbw4kn-2"
-})(["display:flex;gap:5px;align-items:center;color:", ";font-size:", ";line-height:1.5;font-weight:", ";& > a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}", ""], _ref3 => {
-  let {
-    variant,
-    theme
-  } = _ref3;
-  return variant === "white" ? themeGet("colors.white")({
-    theme
-  }) : themeGet("colors.greyDarker")({
-    theme
-  });
-}, themeGet("fontSizes.0"), _ref4 => {
+})(["display:flex;gap:5px;align-items:center;font-size:", ";line-height:1.5;font-weight:", ";& > a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}", " ", ""], themeGet("fontSizes.0"), _ref2 => {
   let {
     isLast
-  } = _ref4;
+  } = _ref2;
   return isLast ? themeGet("fontWeights.2") : "normal";
-}, typography);
-const Breadcrumbs = _ref5 => {
+}, props => variant({
+  variants: {
+    default: {
+      color: themeGet("colors.greyDarker")(props)
+    },
+    white: {
+      color: themeGet("colors.white")(props)
+    }
+  }
+}), typography);
+const Breadcrumbs = _ref3 => {
   let {
     config,
     variant = "default",
     showAsIconTooltip,
     ...props
-  } = _ref5;
+  } = _ref3;
   if (showAsIconTooltip) {
     return /*#__PURE__*/_jsx(Popover, {
       text: /*#__PURE__*/_jsx(List, {

package/es/components/Button/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { ThemeProvider, css } from "styled-components";
 import PropTypes from "prop-types";
-import { space, layout, color, background, border, compose } from "styled-system";
+import { space, layout, color, background, border, compose, variant } from "styled-system";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import Icon from "../Icon";
 import Loading from "../Loading";
@@ -18,160 +18,152 @@ const customShouldForwardProp = prop => {
   }
   return shouldForwardProp(prop);
 };
-export const VARIANT_COLORS = {
-  default: {
-    background: "colors.primary",
-    color: "colors.white",
-    borderColor: "colors.primary",
-    hovered: {
-      background: "colors.primaryDark",
-      color: "colors.white",
-      borderColor: "colors.primaryDark"
-    }
-  },
-  success: {
-    background: "colors.success",
-    color: "colors.white",
-    borderColor: "colors.success",
-    hovered: {
-      background: "colors.successDark",
-      color: "colors.white",
-      borderColor: "colors.successDark"
-    },
-    focused: {
-      outline: "colors.successDarker"
-    }
-  },
-  successAlternate: {
-    background: "colors.greyLightest",
-    color: "colors.success",
-    borderColor: "colors.greyLightest",
-    hovered: {
-      background: "colors.greyLighter",
-      color: "colors.success",
-      borderColor: "colors.greyLighter"
-    },
-    focused: {
-      outline: "colors.successLight"
-    }
-  },
-  danger: {
-    background: "colors.danger",
-    color: "colors.white",
-    borderColor: "colors.danger",
-    hovered: {
-      background: "colors.dangerDark",
-      color: "colors.white",
-      borderColor: "colors.dangerDark"
-    },
-    focused: {
-      outline: "colors.dangerDarker"
-    }
-  },
-  dangerAlternate: {
-    background: "colors.greyLightest",
-    color: "colors.danger",
-    borderColor: "colors.greyLightest",
-    hovered: {
-      background: "colors.greyLighter",
-      color: "colors.danger",
-      borderColor: "colors.greyLighter"
-    },
-    focused: {
-      outline: "colors.dangerLight"
-    }
-  },
-  disabled: {
-    background: "colors.greyLighter",
-    color: "colors.grey",
-    borderColor: "colors.greyLighter",
-    hovered: {
-      background: "colors.greyLighter",
-      color: "colors.grey",
-      borderColor: "colors.greyLighter"
-    }
-  },
-  ghost: {
-    background: "colors.primaryLightest",
-    color: "colors.primaryDark",
-    borderColor: "colors.primaryLightest",
-    hovered: {
-      background: "colors.primaryLighter",
-      color: "colors.primaryDarker",
-      borderColor: "colors.primaryLighter"
-    },
-    focused: {
-      outline: "colors.primaryLight"
-    }
-  },
-  borderBlue: {
-    background: "colors.white",
-    color: "colors.primary",
-    borderColor: "colors.primary",
-    hovered: {
-      background: "colors.primaryLightest",
-      color: "colors.primaryDark",
-      borderColor: "colors.primaryDark"
-    },
-    focused: {
-      outline: "colors.primaryDark"
-    }
-  },
-  borderGrey: {
-    background: "colors.white",
-    color: "colors.greyDarkest",
-    borderColor: "colors.greyDarkest",
-    hovered: {
-      background: "colors.primaryLightest",
-      color: "colors.greyDarkest",
-      borderColor: "colors.greyDarkest"
-    },
-    focused: {
-      outline: "colors.greyDarkest"
-    }
-  },
-  ai: {
-    background: "colors.secondaryLight",
-    // Not used for AI variant, handled specially
-    color: "colors.white",
-    borderColor: "colors.secondaryLight",
-    hovered: {
-      background: "colors.secondary",
-      // Not used for AI variant, handled specially
-      color: "colors.white",
-      borderColor: "colors.secondary"
-    },
-    focused: {
-      outline: "colors.secondary"
-    }
-  }
-};
 const getOutlineStyle = color => css(["outline:0;box-shadow:", ";"], props => [themeGet("shadows.thinOutline")(props), themeGet(color)(props)].join(" "));
-const addVariantColors = key => {
-  const variantStyle = VARIANT_COLORS[key];
+const getVariantStyles = props => {
+  // Handle disabled state - override variant if disabled
+  if (props.disabled) {
+    return css(["background:", ";color:", ";border-color:", ";&:hover{background:", ";color:", ";border-color:", ";}"], themeGet("colors.greyLighter")(props), themeGet("colors.grey")(props), themeGet("colors.greyLighter")(props), themeGet("colors.greyLighter")(props), themeGet("colors.grey")(props), themeGet("colors.greyLighter")(props));
+  }
 
   // Special handling for AI variant with gradient
-  if (key === "ai") {
-    return css(["background:linear-gradient( 135deg,", " 0%,", " 100% );color:", ";border-color:", ";&:hover{background:linear-gradient( 135deg,", " 0%,", " 100% );color:", ";border-color:", ";}", ""], themeGet("colors.primaryLight"), themeGet("colors.secondaryLight"), themeGet(variantStyle.color), themeGet(variantStyle.borderColor), themeGet("colors.primary"), themeGet("colors.secondary"), themeGet(variantStyle.hovered.color), themeGet(variantStyle.hovered.borderColor), variantStyle.focused && css(["&:focus{", "}"], getOutlineStyle(variantStyle.focused.outline)));
+  if (props.variant === "ai") {
+    return css(["background:linear-gradient( 135deg,", " 0%,", " 100% );color:", ";border-color:", ";&:hover{background:linear-gradient( 135deg,", " 0%,", " 100% );color:", ";border-color:", ";}&:focus{", "}"], themeGet("colors.primaryLight"), themeGet("colors.secondaryLight"), themeGet("colors.white"), themeGet("colors.secondaryLight"), themeGet("colors.primary"), themeGet("colors.secondary"), themeGet("colors.white"), themeGet("colors.secondary"), getOutlineStyle("colors.secondary"));
   }
-  return css(["background:", ";color:", ";border-color:", ";&:hover{background:", ";color:", ";border-color:", ";}", ""], themeGet(variantStyle.background), themeGet(variantStyle.color), themeGet(variantStyle.borderColor), themeGet(variantStyle.hovered.background), themeGet(variantStyle.hovered.color), themeGet(variantStyle.hovered.borderColor), variantStyle.focused && css(["&:focus{", "}"], getOutlineStyle(variantStyle.focused.outline)));
-};
-const getVariantStyle = props => {
-  const styles = Object.keys(VARIANT_COLORS).reduce((obj, key) => {
-    obj[key] = css(["", ""], addVariantColors(key));
-    return obj;
-  }, {});
-  if (props.disabled) return styles.disabled;
-  return styles[props.variant] || styles.default;
+  return variant({
+    variants: {
+      default: {
+        background: themeGet("colors.primary")(props),
+        color: themeGet("colors.white")(props),
+        borderColor: themeGet("colors.primary")(props),
+        "&:hover": {
+          background: themeGet("colors.primaryDark")(props),
+          color: themeGet("colors.white")(props),
+          borderColor: themeGet("colors.primaryDark")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.primaryDarker")(props)}`
+        }
+      },
+      success: {
+        background: themeGet("colors.success")(props),
+        color: themeGet("colors.white")(props),
+        borderColor: themeGet("colors.success")(props),
+        "&:hover": {
+          background: themeGet("colors.successDark")(props),
+          color: themeGet("colors.white")(props),
+          borderColor: themeGet("colors.successDark")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.successDarker")(props)}`
+        }
+      },
+      successAlternate: {
+        background: themeGet("colors.greyLightest")(props),
+        color: themeGet("colors.success")(props),
+        borderColor: themeGet("colors.greyLightest")(props),
+        "&:hover": {
+          background: themeGet("colors.greyLighter")(props),
+          color: themeGet("colors.success")(props),
+          borderColor: themeGet("colors.greyLighter")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.successLight")(props)}`
+        }
+      },
+      danger: {
+        background: themeGet("colors.danger")(props),
+        color: themeGet("colors.white")(props),
+        borderColor: themeGet("colors.danger")(props),
+        "&:hover": {
+          background: themeGet("colors.dangerDark")(props),
+          color: themeGet("colors.white")(props),
+          borderColor: themeGet("colors.dangerDark")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.dangerDarker")(props)}`
+        }
+      },
+      dangerAlternate: {
+        background: themeGet("colors.greyLightest")(props),
+        color: themeGet("colors.danger")(props),
+        borderColor: themeGet("colors.greyLightest")(props),
+        "&:hover": {
+          background: themeGet("colors.greyLighter")(props),
+          color: themeGet("colors.danger")(props),
+          borderColor: themeGet("colors.greyLighter")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.dangerLight")(props)}`
+        }
+      },
+      ghost: {
+        background: themeGet("colors.primaryLightest")(props),
+        color: themeGet("colors.primaryDark")(props),
+        borderColor: themeGet("colors.primaryLightest")(props),
+        "&:hover": {
+          background: themeGet("colors.primaryLighter")(props),
+          color: themeGet("colors.primaryDarker")(props),
+          borderColor: themeGet("colors.primaryLighter")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.primaryLight")(props)}`
+        }
+      },
+      borderBlue: {
+        background: themeGet("colors.white")(props),
+        color: themeGet("colors.primary")(props),
+        borderColor: themeGet("colors.primary")(props),
+        "&:hover": {
+          background: themeGet("colors.primaryLightest")(props),
+          color: themeGet("colors.primaryDark")(props),
+          borderColor: themeGet("colors.primaryDark")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.primaryDark")(props)}`
+        }
+      },
+      borderGrey: {
+        background: themeGet("colors.white")(props),
+        color: themeGet("colors.greyDarkest")(props),
+        borderColor: themeGet("colors.greyDarkest")(props),
+        "&:hover": {
+          background: themeGet("colors.primaryLightest")(props),
+          color: themeGet("colors.greyDarkest")(props),
+          borderColor: themeGet("colors.greyDarkest")(props)
+        },
+        "&:focus": {
+          outline: 0,
+          boxShadow: `${themeGet("shadows.thinOutline")(props)} ${themeGet("colors.greyDarkest")(props)}`
+        }
+      },
+      disabled: {
+        background: themeGet("colors.greyLighter")(props),
+        color: themeGet("colors.grey")(props),
+        borderColor: themeGet("colors.greyLighter")(props),
+        "&:hover": {
+          background: themeGet("colors.greyLighter")(props),
+          color: themeGet("colors.grey")(props),
+          borderColor: themeGet("colors.greyLighter")(props)
+        }
+      }
+    }
+  })(props);
 };
 const getSpace = getter => props => themeGet(`space.${getter(props)}`)(props);
-const buttonStyles = /*#__PURE__*/css(["background:", ";color:", ";border-color:", ";display:flex;align-items:center;justify-content:center;appearance:none;box-shadow:none;margin:0;text-decoration:none;text-align:center;font-family:", ";font-weight:", ";border-radius:", ";transition:", ";border-width:", ";cursor:", ";width:", ";height:auto;font-size:", ";padding:", " ", ";svg{margin-right:", ";margin-left:", ";}&:hover{background:", ";border-color:", ";border-width:", ";border-style:solid;}&:focus{outline:0;box-shadow:", " ", ";}", " ", ""], themeGet(VARIANT_COLORS.default.background), themeGet(VARIANT_COLORS.default.color), themeGet("colors.primary"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("borderWidths.1"), props => props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer", props => props.fullWidth ? "100%" : "auto", props => {
+const buttonStyles = /*#__PURE__*/css(["background:", ";color:", ";border-color:", ";display:flex;align-items:center;justify-content:center;appearance:none;box-shadow:none;margin:0;text-decoration:none;text-align:center;font-family:", ";font-weight:", ";border-radius:", ";transition:", ";border-width:", ";cursor:", ";width:", ";height:auto;font-size:", ";padding:", " ", ";svg{margin-right:", ";margin-left:", ";}&:hover{background:", ";border-color:", ";border-width:", ";border-style:solid;}&:focus{outline:0;box-shadow:", " ", ";}", " ", ""], themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("borderWidths.1"), props => props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer", props => props.fullWidth ? "100%" : "auto", props => {
   let fontSize = 2;
   if (props.large && props.iconOnly) fontSize = 5;
   if (props.large) fontSize = 3;
   if (props.small) fontSize = 1;
   return themeGet(`fontSizes.${fontSize}`)(props);
-}, getSpace(props => props.large ? "s" : props.small ? "xxs" : "xs"), getSpace(props => props.large ? "r" : props.small ? "s" : "between"), getSpace(props => !props.iconLeft ? "" : props.small ? "xs" : "s"), getSpace(props => !props.iconRight ? "" : props.small ? "xs" : "s"), themeGet(VARIANT_COLORS.default.hovered.background), themeGet("colors.primaryDark"), themeGet("borderWidths.1"), themeGet("shadows.thinOutline"), themeGet("colors.primaryDarker"), getVariantStyle, compose(space, layout, color, background, border));
+}, getSpace(props => props.large ? "s" : props.small ? "xxs" : "xs"), getSpace(props => props.large ? "r" : props.small ? "s" : "between"), getSpace(props => !props.iconLeft ? "" : props.small ? "xs" : "s"), getSpace(props => !props.iconRight ? "" : props.small ? "xs" : "s"), themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), themeGet("borderWidths.1"), themeGet("shadows.thinOutline"), themeGet("colors.primaryDarker"), getVariantStyles, compose(space, layout, color, background, border));
 const attrs = props => ({
   "data-testid": props.dataTestId || props["data-testid"],
   disabled: props.disabled || props.variant == "disabled",
@@ -202,7 +194,7 @@ const buttonPropTypes = {
   /** Small button */
   small: PropTypes.bool,
   /** Specifies alternate button colours/styles. */
-  variant: PropTypes.oneOf(["success", "successAlternate", "danger", "dangerAlternate", "ghost", "disabled", "default", "ai"]),
+  variant: PropTypes.oneOf(["success", "successAlternate", "danger", "dangerAlternate", "ghost", "disabled", "default", "ai", "borderBlue", "borderGrey"]),
   /** Full width button that takes up all available space of parent */
   fullWidth: PropTypes.bool,
   /** Adds a spinner animation to indicate loading or processing */
@@ -238,6 +230,90 @@ const buttonPropTypes = {
   /** Specifies the color theme object. */
   theme: PropTypes.object
 };
+
+// Export variant colors for use in stories and other components
+export const VARIANT_COLORS = {
+  default: {
+    color: "colors.white",
+    background: "colors.primary",
+    hovered: {
+      color: "colors.white",
+      background: "colors.primaryDark"
+    }
+  },
+  success: {
+    color: "colors.white",
+    background: "colors.success",
+    hovered: {
+      color: "colors.white",
+      background: "colors.successDark"
+    }
+  },
+  successAlternate: {
+    color: "colors.success",
+    background: "colors.greyLightest",
+    hovered: {
+      color: "colors.success",
+      background: "colors.greyLighter"
+    }
+  },
+  danger: {
+    color: "colors.white",
+    background: "colors.danger",
+    hovered: {
+      color: "colors.white",
+      background: "colors.dangerDark"
+    }
+  },
+  dangerAlternate: {
+    color: "colors.danger",
+    background: "colors.greyLightest",
+    hovered: {
+      color: "colors.danger",
+      background: "colors.greyLighter"
+    }
+  },
+  ghost: {
+    color: "colors.primaryDark",
+    background: "colors.primaryLightest",
+    hovered: {
+      color: "colors.primaryDarker",
+      background: "colors.primaryLighter"
+    }
+  },
+  disabled: {
+    color: "colors.grey",
+    background: "colors.greyLighter",
+    hovered: {
+      color: "colors.grey",
+      background: "colors.greyLighter"
+    }
+  },
+  ai: {
+    color: "colors.white",
+    background: "colors.primaryLight",
+    hovered: {
+      color: "colors.white",
+      background: "colors.primary"
+    }
+  },
+  borderBlue: {
+    color: "colors.primary",
+    background: "colors.white",
+    hovered: {
+      color: "colors.primaryDark",
+      background: "colors.primaryLightest"
+    }
+  },
+  borderGrey: {
+    color: "colors.greyDarkest",
+    background: "colors.white",
+    hovered: {
+      color: "colors.greyDarkest",
+      background: "colors.primaryLightest"
+    }
+  }
+};
 const renderButton = (ButtonComponent, _ref) => {
   let {
     ariaLabel,
@@ -333,6 +409,12 @@ Button.__docgenInfo = {
         }, {
           "value": "\"ai\"",
           "computed": false
+        }, {
+          "value": "\"borderBlue\"",
+          "computed": false
+        }, {
+          "value": "\"borderGrey\"",
+          "computed": false
         }]
       },
       "required": false
@@ -498,6 +580,12 @@ ButtonLink.__docgenInfo = {
         }, {
           "value": "\"ai\"",
           "computed": false
+        }, {
+          "value": "\"borderBlue\"",
+          "computed": false
+        }, {
+          "value": "\"borderGrey\"",
+          "computed": false
         }]
       },
       "required": false