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); }

import React from 'react';
import Button from './Button';
import { NextIcon } from '../Icons';
import Spinner from '../Spinner/Spinner';
export default {
  title: 'Components/Button',
  component: Button,
  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
  }
};

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

  return /*#__PURE__*/React.createElement(Button, args);
};

export var Default = Template.bind({});
export var OnDark = Template.bind({});
OnDark.args = {
  onDark: true
};
OnDark.parameters = {
  backgrounds: {
    default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark'
  }
};
export var IconButton = Template.bind({});
IconButton.args = {
  children: /*#__PURE__*/React.createElement(React.Fragment, null, "Button with icon ", /*#__PURE__*/React.createElement(NextIcon, null), ' ')
};
export var SpinnerButton = Template.bind({});
SpinnerButton.args = {
  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spinner, null), " Loading..."),
  variation: 'solid'
};
export var AnchorButton = Template.bind({});
AnchorButton.args = {
  href: '!#'
};
AnchorButton.parameters = {
  loki: {
    skip: true
  }
};
export var VariationsOnDark = function VariationsOnDark() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    onDark: true
  }, "Outline"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid"
  }, "Solid"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost"
  }, "Ghost"));
};
VariationsOnDark.parameters = {
  backgrounds: {
    default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark'
  }
};
VariationsOnDark.decorators = [function (Story) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Story, null));
}];
export var AllAnchorButtons = function AllAnchorButtons() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    href: "#!"
  }, "Default anchor button"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Default and modified default"), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "big"
  }, "Anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!"
  }, "Anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "small"
  }, "Anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "big",
    disabled: true
  }, "Anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    disabled: true
  }, "Anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "small",
    disabled: true
  }, "Anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "big",
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "small",
    isAlternate: true
  }, "Alt anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "big"
  }, "Anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true
  }, "Anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "small"
  }, "Anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "big",
    disabled: true
  }, "Anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    disabled: true
  }, "Anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "small",
    disabled: true
  }, "Anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "big",
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "small",
    isAlternate: true
  }, "Alt anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    disabled: true,
    isAlternate: true
  }, "Alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt anchor button on-dark"))), /*#__PURE__*/React.createElement("h4", null, "Solids"), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "big"
  }, "Solid anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid"
  }, "Solid anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "small"
  }, "Solid anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    disabled: true
  }, "Solid anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big"
  }, "Solid anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid"
  }, "Solid anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small"
  }, "Solid anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    disabled: true
  }, "Solid anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    isAlternate: true
  }, "Solid alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    alt: true,
    onDark: true,
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt anchor button on-dark"))), /*#__PURE__*/React.createElement("h4", null, "Ghosts"), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "big"
  }, "Ghost anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost"
  }, "Ghost anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "small"
  }, "Ghost anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    disabled: true
  }, "Ghost anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button")), /*#__PURE__*/React.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big"
  }, "Ghost anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost"
  }, "Ghost anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small"
  }, "Ghost anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    disabled: true
  }, "Ghost anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt anchor button on-dark")), /*#__PURE__*/React.createElement("div", {
    className: "",
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button on-dark"), /*#__PURE__*/React.createElement(Button, {
    href: "#!",
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt anchor button on-dark")))));
};
export var AllButtons = function AllButtons() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Default button"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Default and modified default"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    size: "big"
  }, "Button"), /*#__PURE__*/React.createElement(Button, null, "Button"), /*#__PURE__*/React.createElement(Button, {
    size: "small"
  }, "Button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    size: "big",
    disabled: true
  }, "Button"), /*#__PURE__*/React.createElement(Button, {
    disabled: true
  }, "Button"), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    disabled: true
  }, "Button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    size: "big",
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/React.createElement(Button, {
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    isAlternate: true
  }, "Alt button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/React.createElement(Button, {
    disabled: true,
    isAlternate: true
  }, "Alt button"), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt button")), /*#__PURE__*/React.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "big"
  }, "Button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true
  }, "Button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "small"
  }, "Button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "big",
    disabled: true
  }, "Button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    disabled: true
  }, "Button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "small",
    disabled: true
  }, "Button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "big",
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "small",
    isAlternate: true
  }, "Alt button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    disabled: true,
    isAlternate: true
  }, "Alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Alt button on-dark"))), /*#__PURE__*/React.createElement("h4", null, "Solids"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "big"
  }, "Solid button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid"
  }, "Solid button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "small"
  }, "Solid button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    disabled: true
  }, "Solid button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt button")), /*#__PURE__*/React.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "big"
  }, "Solid button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid"
  }, "Solid button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "small"
  }, "Solid button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true
  }, "Solid button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    disabled: true
  }, "Solid button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true
  }, "Solid button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "big",
    isAlternate: true
  }, "Solid alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    isAlternate: true
  }, "Solid alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "small",
    isAlternate: true
  }, "Solid alt button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Solid alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    alt: true,
    onDark: true,
    variation: "solid",
    disabled: true,
    isAlternate: true
  }, "Solid button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "solid",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Solid alt button on-dark"))), /*#__PURE__*/React.createElement("h4", null, "Ghosts"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "big"
  }, "Ghost button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost"
  }, "Ghost button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "small"
  }, "Ghost button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    disabled: true
  }, "Ghost button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt button")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button"), /*#__PURE__*/React.createElement(Button, {
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button")), /*#__PURE__*/React.createElement("div", {
    className: "ds-u-fill--base ds-u-padding--2",
    style: {
      display: 'flex',
      gap: '1rem',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "big"
  }, "Ghost button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost"
  }, "Ghost button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "small"
  }, "Ghost button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true
  }, "Ghost button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    disabled: true
  }, "Ghost button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true
  }, "Ghost button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "big",
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "small",
    isAlternate: true
  }, "Ghost alt button on-dark")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '1rem',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "big",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button on-dark"), /*#__PURE__*/React.createElement(Button, {
    onDark: true,
    variation: "ghost",
    size: "small",
    disabled: true,
    isAlternate: true
  }, "Ghost alt button on-dark")))));
};