"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.VariationsOnDark = exports.SpinnerButton = exports.OnDark = exports.IconButton = exports.Default = exports.AnchorButton = exports.AllButtons = exports.AllAnchorButtons = void 0;

var _react = _interopRequireDefault(require("react"));

var _Button = _interopRequireDefault(require("./Button"));

var _Icons = require("../Icons");

var _Spinner = _interopRequireDefault(require("../Spinner/Spinner"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _default = {
  title: 'Components/Button',
  component: _Button.default,
  argTypes: {
    // children can be text or a ReactNode. For storybook controls, just allowing strings
    children: {
      control: {
        type: 'text'
      },
      type: {
        name: 'string',
        required: true
      }
    },
    disabled: {
      control: {
        type: 'boolean'
      }
    },
    component: {
      table: {
        disable: true
      }
    },
    size: {
      options: ['small', 'big']
    },
    variation: {
      options: ['solid', 'ghost']
    }
  },
  args: {
    children: 'Your button text here',
    onDark: false
  }
};
exports.default = _default;

var Template = function Template(_ref) {
  var args = _extends({}, _ref);

  return /*#__PURE__*/_react.default.createElement(_Button.default, args);
};

var Default = Template.bind({});
exports.Default = Default;
var OnDark = Template.bind({});
exports.OnDark = OnDark;
OnDark.args = {
  onDark: true
};
OnDark.parameters = {
  backgrounds: {
    default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark'
  }
};
var IconButton = Template.bind({});
exports.IconButton = IconButton;
IconButton.args = {
  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Button with icon ", /*#__PURE__*/_react.default.createElement(_Icons.NextIcon, null), ' ')
};
var SpinnerButton = Template.bind({});
exports.SpinnerButton = SpinnerButton;
SpinnerButton.args = {
  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spinner.default, null), " Loading..."),
  variation: 'solid'
};
var AnchorButton = Template.bind({});
exports.AnchorButton = AnchorButton;
AnchorButton.args = {
  href: '!#'
};
AnchorButton.parameters = {
  loki: {
    skip: true
  }
};

var VariationsOnDark = function VariationsOnDark() {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true
  }, "Outline"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid"
  }, "Solid"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost"
  }, "Ghost"));
};

exports.VariationsOnDark = VariationsOnDark;
VariationsOnDark.parameters = {
  backgrounds: {
    default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark'
  }
};
VariationsOnDark.decorators = [function (Story) {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(Story, null));
}];

var AllAnchorButtons = function AllAnchorButtons() {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!"
  }, "Default anchor button"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Default and modified default"), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "big"
  }, "Anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!"
  }, "Anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "small"
  }, "Anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "big",
    disabled: true
  }, "Anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    disabled: true
  }, "Anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "small",
    disabled: true
  }, "Anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "big",
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "small",
    isAlternate: true
  }, "Alt anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "big"
  }, "Anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true
  }, "Anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "small"
  }, "Anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "big",
    disabled: true
  }, "Anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    disabled: true
  }, "Anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "small",
    disabled: true
  }, "Anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "big",
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "small",
    isAlternate: true
  }, "Alt anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    disabled: true,
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button on-dark"))), /*#__PURE__*/_react.default.createElement("h4", null, "Solids"), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "big"
  }, "Solid anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid"
  }, "Solid anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "small"
  }, "Solid anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    disabled: true
  }, "Solid anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big"
  }, "Solid anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid"
  }, "Solid anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small"
  }, "Solid anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    disabled: true
  }, "Solid anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    isAlternate: true
  }, "Solid alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    alt: true,
    onDark: true,
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button on-dark"))), /*#__PURE__*/_react.default.createElement("h4", null, "Ghosts"), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "big"
  }, "Ghost anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost"
  }, "Ghost anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "small"
  }, "Ghost anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    disabled: true
  }, "Ghost anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big"
  }, "Ghost anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost"
  }, "Ghost anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small"
  }, "Ghost anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    disabled: true
  }, "Ghost anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt anchor button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button on-dark")))));
};

exports.AllAnchorButtons = AllAnchorButtons;

var AllButtons = function AllButtons() {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Default button"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Default and modified default"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "big"
  }, "Button"), /*#__PURE__*/_react.default.createElement(_Button.default, null, "Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "small"
  }, "Button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "big",
    disabled: true
  }, "Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    disabled: true
  }, "Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "small",
    disabled: true
  }, "Button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "big",
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "small",
    isAlternate: true
  }, "Alt button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    disabled: true,
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "big"
  }, "Button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true
  }, "Button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "small"
  }, "Button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "big",
    disabled: true
  }, "Button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    disabled: true
  }, "Button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "small",
    disabled: true
  }, "Button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "big",
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "small",
    isAlternate: true
  }, "Alt button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    disabled: true,
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt button on-dark"))), /*#__PURE__*/_react.default.createElement("h4", null, "Solids"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "big"
  }, "Solid button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid"
  }, "Solid button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "small"
  }, "Solid button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    disabled: true
  }, "Solid button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "big"
  }, "Solid button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid"
  }, "Solid button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "small"
  }, "Solid button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    disabled: true
  }, "Solid button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    isAlternate: true
  }, "Solid alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    alt: true,
    onDark: true,
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt button on-dark"))), /*#__PURE__*/_react.default.createElement("h4", null, "Ghosts"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "big"
  }, "Ghost button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost"
  }, "Ghost button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "small"
  }, "Ghost button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    disabled: true
  }, "Ghost button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt button")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button")), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "big"
  }, "Ghost button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost"
  }, "Ghost button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "small"
  }, "Ghost button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    disabled: true
  }, "Ghost button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt button on-dark")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button on-dark")))));
};

exports.AllButtons = AllButtons;