@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/lib/Button/ButtonDanger.d.ts

@@ -16,6 +16,8 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    role?: import("react").AriaRole | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,17 +27,16 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
@@ -58,47 +59,47 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -269,14 +270,13 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonDanger.jsx

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const ButtonBase_1 = __importStar(require("./ButtonBase"));
+const ButtonDanger = styled_components_1.default(ButtonBase_1.default) `
+  color: ${constants_1.get('colors.btn.danger.text')};
+  border: 1px solid ${constants_1.get('colors.btn.border')};
+  background-color: ${constants_1.get('colors.btn.bg')};
+  box-shadow: ${constants_1.get('shadows.btn.shadow')};
+
+  &:hover {
+    color: ${constants_1.get('colors.btn.danger.hoverText')};
+    background-color: ${constants_1.get('colors.btn.danger.hoverBg')};
+    border-color: ${constants_1.get('colors.btn.danger.hoverBorder')};
+    box-shadow: ${constants_1.get('shadows.btn.danger.hoverShadow')};
+  }
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: ${constants_1.get('colors.btn.danger.focusBorder')};
+    box-shadow: ${constants_1.get('shadows.btn.danger.focusShadow')};
+  }
+
+  &:active {
+    color: ${constants_1.get('colors.btn.danger.selectedText')};
+    background-color: ${constants_1.get('colors.btn.danger.selectedBg')};
+    box-shadow: ${constants_1.get('shadows.btn.danger.selectedShadow')};
+    border-color: ${constants_1.get('colors.btn.danger.selectedBorder')};
+  }
+
+  &:disabled {
+    color: ${constants_1.get('colors.btn.danger.disabledText')};
+    background-color: ${constants_1.get('colors.btn.danger.disabledBg')};
+    border-color: ${constants_1.get('colors.btn.danger.disabledBorder')};
+  }
+
+  ${ButtonBase_1.buttonSystemProps};
+  ${sx_1.default};
+`;
+exports.default = ButtonDanger;

package/lib/Button/ButtonGroup.jsx

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("../Box"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const ButtonGroup = styled_components_1.default(Box_1.default) `
+  vertical-align: middle;
+
+  && > * {
+    position: relative;
+    border-right-width: 0;
+    border-radius: 0;
+
+    :first-child {
+      border-top-left-radius: ${constants_1.get('radii.2')};
+      border-bottom-left-radius: ${constants_1.get('radii.2')};
+      margin-right: 0;
+    }
+
+    :not(:first-child) {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    :last-child {
+      border-right-width: 1px;
+      border-top-right-radius: ${constants_1.get('radii.2')};
+      border-bottom-right-radius: ${constants_1.get('radii.2')};
+    }
+
+    :focus,
+    :active,
+    :hover {
+      border-right-width: 1px;
+      + * {
+        border-left-width: 0;
+      }
+    }
+
+    :focus,
+    :active {
+      z-index: 1;
+    }
+  }
+
+  ${sx_1.default};
+`;
+ButtonGroup.defaultProps = {
+    display: 'inline-block'
+};
+exports.default = ButtonGroup;

package/lib/Button/ButtonInvisible.d.ts

@@ -16,6 +16,8 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    role?: import("react").AriaRole | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,17 +27,16 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
@@ -58,47 +59,47 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -269,14 +270,13 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonInvisible.jsx

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const ButtonBase_1 = __importStar(require("./ButtonBase"));
+const ButtonInvisible = styled_components_1.default(ButtonBase_1.default) `
+  color: ${constants_1.get('colors.accent.fg')};
+  background-color: transparent;
+  border: 0;
+  border-radius: ${constants_1.get('radii.2')};
+  box-shadow: none;
+
+  &:disabled {
+    color: ${constants_1.get('colors.primer.fg.disabled')};
+  }
+  &:focus {
+    box-shadow: ${constants_1.get('shadows.btn.focusShadow')};
+  }
+  &:hover {
+    background-color: ${constants_1.get('colors.btn.hoverBg')};
+  }
+  &:active {
+    background-color: ${constants_1.get('colors.btn.selectedBg')};
+  }
+
+  ${ButtonBase_1.buttonSystemProps};
+  ${sx_1.default}
+`;
+exports.default = ButtonInvisible;

package/lib/Button/ButtonOutline.d.ts

@@ -16,6 +16,8 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    role?: import("react").AriaRole | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,17 +27,16 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
@@ -58,47 +59,47 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -269,14 +270,13 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/ButtonOutline.jsx

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const ButtonBase_1 = __importStar(require("./ButtonBase"));
+const ButtonOutline = styled_components_1.default(ButtonBase_1.default) `
+  color: ${constants_1.get('colors.btn.outline.text')};
+  border: 1px solid ${constants_1.get('colors.btn.border')};
+  background-color: ${constants_1.get('colors.btn.bg')};
+  box-shadow: ${constants_1.get('shadows.btn.shadow')};
+
+  &:hover {
+    color: ${constants_1.get('colors.btn.outline.hoverText')};
+    background-color: ${constants_1.get('colors.btn.outline.hoverBg')};
+    border-color: ${constants_1.get('colors.btn.outline.hoverBorder')};
+    box-shadow: ${constants_1.get('shadows.btn.outline.hoverShadow')};
+  }
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: ${constants_1.get('colors.btn.outline.focusBorder')};
+    box-shadow: ${constants_1.get('shadows.btn.outline.focusShadow')};
+  }
+
+  &:active {
+    color: ${constants_1.get('colors.btn.outline.selectedText')};
+    background-color: ${constants_1.get('colors.btn.outline.selectedBg')};
+    box-shadow: ${constants_1.get('shadows.btn.outline.selectedShadow')};
+    border-color: ${constants_1.get('colors.btn.outline.selectedBorder')};
+  }
+
+  &:disabled {
+    color: ${constants_1.get('colors.btn.outline.disabledText')};
+    background-color: ${constants_1.get('colors.btn.outline.disabledBg')};
+    border-color: ${constants_1.get('colors.btn.border')};
+  }
+
+  ${ButtonBase_1.buttonSystemProps};
+  ${sx_1.default};
+`;
+exports.default = ButtonOutline;