From 2f1a76d99657bce7e011daecd7026e693b8a5575 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Thu, 16 May 2019 23:09:58 +0200
Subject: [PATCH 01/13] added createFlatBoxStyles fn for flat component styles

---
 src/components/TextArea/TextArea.js           | 63 +++++++++++--------
 src/components/TextArea/TextArea.stories.js   | 37 ++++++++++-
 src/components/TextField/TextField.js         | 59 +++++++++--------
 src/components/TextField/TextField.stories.js | 41 +++++++++++-
 src/components/common/index.js                | 11 ++++
 src/components/common/themes.js               | 25 ++++++--
 6 files changed, 178 insertions(+), 58 deletions(-)

diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js
index a2a875d7..5f725471 100644
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { createDisabledTextStyles } from "../common";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
 import Cutout from "../Cutout/Cutout";
 
@@ -13,6 +13,11 @@ const StyledTextAreaWrapper = styled(Cutout)`
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
 `;
+const StyledFlatTextAreaWrapper = styled.div`
+  position: relative;
+  min-height: ${blockSizes.md};
+  ${createFlatBoxStyles()}
+`;
 const StyledTextArea = styled.textarea`
   width: 100%;
   height: 100%;
@@ -24,50 +29,56 @@ const StyledTextArea = styled.textarea`
   resize: none;
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.inputTextDisabled : theme.inputText};
-  ${props => props.disabled && createDisabledTextStyles()}
+
+  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
 `;
 
 const TextArea = ({
   onChange,
   disabled,
+  flat,
   width,
   height,
   style,
   className,
   shadow,
   ...otherProps
-}) => (
-  <StyledTextAreaWrapper
-    style={{
-      ...style,
-      width: width ? width : "100%",
-      height: height ? height : "auto"
-    }}
-    className={className}
-    isDisabled={disabled}
-    shadow={shadow}
-  >
-    <StyledTextArea
-      width={width}
-      height={height}
-      readOnly={disabled}
-      onChange={disabled ? undefined : onChange}
-      disabled={disabled}
-      {...otherProps}
-    />
-  </StyledTextAreaWrapper>
-);
+}) => {
+  const Wrapper = flat ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
+  return (
+    <Wrapper
+      style={{
+        ...style,
+        width: width ? width : "100%",
+        height: height ? height : "auto"
+      }}
+      className={className}
+      isDisabled={disabled}
+      shadow={shadow}
+    >
+      <StyledTextArea
+        width={width}
+        height={height}
+        readOnly={disabled}
+        onChange={disabled ? undefined : onChange}
+        disabled={disabled}
+        flat={flat}
+        {...otherProps}
+      />
+    </Wrapper>
+  );
+};
 
 TextArea.defaultProps = {
-  shadow: true
+  shadow: true,
+  flat: false
 };
 TextArea.propTypes = {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   height: propTypes.oneOfType([propTypes.string, propTypes.number]),
   onChange: propTypes.func,
   disabled: propTypes.bool,
+  flat: propTypes.bool,
   className: propTypes.string,
   shadow: propTypes.bool
 };
diff --git a/src/components/TextArea/TextArea.stories.js b/src/components/TextArea/TextArea.stories.js
index 62805d92..1afb3aa1 100644
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import TextArea from "./TextArea";
-import { Button } from "../";
+import { Button, Cutout } from "../";
 
 const onChange = e => console.log(e.target.value);
 
@@ -40,6 +40,41 @@ storiesOf("TextArea", module)
   ))
   .add("no shadow", () => (
     <TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add text area on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <TextArea
+          flat
+          width={"100%"}
+          height={200}
+          placeholder="Type in here.."
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add text area on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <TextArea
+          flat
+          disabled
+          width={"100%"}
+          height={200}
+          placeholder="Type in here.."
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
   ));
 class ControlledTextAreaExample extends React.Component {
   state = {
diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
index a608fed5..cf1d411f 100644
--- a/src/components/TextField/TextField.js
+++ b/src/components/TextField/TextField.js
@@ -1,16 +1,21 @@
 import React from "react";
 import propTypes from "prop-types";
 
-import styled from "styled-components";
-import Cutout from "../Cutout/Cutout";
+import styled, { css } from "styled-components";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
+import Cutout from "../Cutout/Cutout";
 
 const StyledWrapper = styled(Cutout)`
   height: ${blockSizes.md};
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
 `;
-
+const StyledFlatWrapper = styled.div`
+  position: relative;
+  height: ${blockSizes.md};
+  ${createFlatBoxStyles()}
+`;
 export const StyledTextInput = styled.input`
   box-sizing: border-box;
   width: 100%;
@@ -21,46 +26,50 @@ export const StyledTextInput = styled.input`
   background: none;
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.inputTextDisabled : theme.inputText};
-  text-shadow: ${({ theme, disabled }) =>
-    disabled ? "1px 1px " + theme.inputTextDisabledShadow : "none"};
+  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
 `;
 const TextField = ({
   onChange,
   disabled,
+  flat,
   type,
   style,
   shadow,
   className,
   width,
   ...otherProps
-}) => (
-  <StyledWrapper
-    width={width}
-    shadow={shadow}
-    isDisabled={disabled}
-    style={{ ...style, width: width ? width : "auto" }}
-    className={className}
-  >
-    <StyledTextInput
-      onChange={disabled ? undefined : onChange}
-      readOnly={disabled}
-      disabled={disabled}
-      type={type}
-      {...otherProps}
-    />
-  </StyledWrapper>
-);
+}) => {
+  const Wrapper = flat ? StyledFlatWrapper : StyledWrapper;
+  return (
+    <Wrapper
+      width={width}
+      shadow={shadow}
+      isDisabled={disabled}
+      style={{ ...style, width: width ? width : "auto" }}
+      className={className}
+    >
+      <StyledTextInput
+        onChange={disabled ? undefined : onChange}
+        readOnly={disabled}
+        disabled={disabled}
+        flat={flat}
+        type={type}
+        {...otherProps}
+      />
+    </Wrapper>
+  );
+};
 TextField.defaultProps = {
   disabled: false,
+  type: "text",
   shadow: true,
-  type: "text"
+  flat: false
 };
 TextField.propTypes = {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   onChange: propTypes.func,
   disabled: propTypes.bool,
+  flat: propTypes.bool,
   shadow: propTypes.bool,
   type: propTypes.string,
   className: propTypes.string
diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
index 74347729..0783dbb0 100644
--- a/src/components/TextField/TextField.stories.js
+++ b/src/components/TextField/TextField.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 
 import TextField from "./TextField";
 
-import { Button, Toolbar } from "../";
+import { Button, Toolbar, Cutout } from "../";
 
 const onChange = e => console.log(e.target.value);
 
@@ -28,6 +28,45 @@ storiesOf("TextField", module)
   ))
   .add("custom width", () => (
     <TextField defaultValue="Custom width" width={150} onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <label style={{ paddingRight: "0.5rem", fontSize: "1rem" }}>
+          Name:
+        </label>
+        <TextField
+          flat
+          placeholder="type here..."
+          width={150}
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <label style={{ paddingRight: "0.5rem", fontSize: "1rem" }}>
+          Name:
+        </label>
+        <TextField
+          flat
+          disabled
+          defaultValue="Can't type 😥"
+          width={150}
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
   ));
 
 class ControlledTextFieldExample extends React.Component {
diff --git a/src/components/common/index.js b/src/components/common/index.js
index 1ce46290..eb853e8d 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -15,6 +15,17 @@ export const createBoxStyles = () =>
     background-color: ${({ theme }) => theme.material};
     color: ${({ theme }) => theme.text};
   `;
+export const createFlatBoxStyles = () =>
+  css`
+    box-sizing: border-box;
+    display: inline-block;
+    color: ${({ theme }) => theme.text};
+    background: ${({ theme, isDisabled }) =>
+      isDisabled ? theme.flatLight : theme.canvas};
+    border: 2px solid ${({ theme }) => theme.canvas};
+    outline: 2px solid ${({ theme }) => theme.flatDark};
+    outline-offset: -4px;
+  `;
 export const createBorderStyles = (invert = false) =>
   invert
     ? css`
diff --git a/src/components/common/themes.js b/src/components/common/themes.js
index 26f2fc42..9fffa61e 100644
--- a/src/components/common/themes.js
+++ b/src/components/common/themes.js
@@ -31,7 +31,10 @@ themes.default = {
 
   hoverBackground: "#000080",
   checkmark: "#050608",
-  progress: "#000080"
+  progress: "#000080",
+
+  flatLight: "#d8d8d8",
+  flatDark: "#9e9e9e"
 };
 
 themes.water = {
@@ -65,7 +68,10 @@ themes.water = {
 
   hoverBackground: "#72b3b4",
   checkmark: "#050608",
-  progress: "#72b3b4"
+  progress: "#72b3b4",
+
+  flatLight: "#d8d8d8",
+  flatDark: "#9e9e9e"
 };
 
 themes.coldGray = {
@@ -103,7 +109,10 @@ themes.coldGray = {
 
   hoverBackground: "#8d88c2",
   checkmark: "#010601",
-  progress: "#8d88c2"
+  progress: "#8d88c2",
+
+  flatLight: "#a4a7c8",
+  flatDark: "#5b57a1"
 };
 
 themes.lilacRoseDark = {
@@ -139,7 +148,10 @@ themes.lilacRoseDark = {
 
   hoverBackground: "#713259",
   checkmark: "#010601",
-  progress: "#713259"
+  progress: "#713259",
+
+  flatLight: "#E597C9",
+  flatDark: "#7F3163"
 };
 
 themes.violetDark = {
@@ -171,6 +183,9 @@ themes.violetDark = {
 
   hoverBackground: "#512155",
   checkmark: "#000000",
-  progress: "#000080"
+  progress: "#000080",
+
+  flatLight: "#945b9b",
+  flatDark: "#3c1f3e"
 };
 export default themes;

From a5289040f3cfe6ceed540b9f8ae6ffb7e5140506 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Thu, 16 May 2019 23:30:18 +0200
Subject: [PATCH 02/13] added flat Checkbox

---
 src/components/Checkbox/Checkbox.js         | 34 +++++++++++---------
 src/components/Checkbox/Checkbox.stories.js | 35 ++++++++++++++++++++-
 2 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index ef5c78b2..910031d8 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import propTypes from "prop-types";
 
 import styled, { css } from "styled-components";
-import { createDisabledTextStyles } from "../common";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
+
 import { padding, fontSizes } from "../common/system";
 import Cutout from "../Cutout/Cutout";
 
@@ -44,27 +45,37 @@ const createCheckmarkSymbol = ({ checked }) =>
       transform: translate(-50%, -50%) rotate(45deg);
     }
   `;
-const StyledCheckmark = styled(Cutout)`
+const sharedCheckmarkStyles = css`
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
+  ${props => createCheckmarkSymbol(props)}
+`;
+const StyledCheckmark = styled(Cutout)`
+  ${sharedCheckmarkStyles}
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
-  ${props => createCheckmarkSymbol(props)};
   box-shadow: ${({ shadow }) =>
     shadow ? `inset 3px 3px 10px rgba(0, 0, 0, 0.1)` : "none"};
   &:before {
     box-shadow: none;
   }
 `;
-
+const StyledFlatCheckmark = styled.div`
+  ${createFlatBoxStyles()}
+  ${sharedCheckmarkStyles}
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
+  
+`;
 const Checkbox = ({
   onChange,
   label,
   disabled,
+  flat,
   value,
   checked,
   defaultChecked,
@@ -76,6 +87,7 @@ const Checkbox = ({
 }) => {
   let Input, isChecked;
 
+  const Checkmark = flat ? StyledFlatCheckmark : StyledCheckmark;
   if (defaultChecked || checked === undefined) {
     const [state, setState] = useState(defaultChecked || false);
 
@@ -95,11 +107,7 @@ const Checkbox = ({
           name={name}
           {...otherProps}
         />
-        <StyledCheckmark
-          checked={state}
-          isDisabled={disabled}
-          shadow={shadow}
-        />
+        <Checkmark checked={state} isDisabled={disabled} shadow={shadow} />
       </>
     );
   } else {
@@ -114,11 +122,7 @@ const Checkbox = ({
           name={name}
           {...otherProps}
         />
-        <StyledCheckmark
-          checked={checked}
-          isDisabled={disabled}
-          shadow={shadow}
-        />
+        <Checkmark checked={checked} isDisabled={disabled} shadow={shadow} />
       </>
     );
   }
@@ -135,6 +139,7 @@ Checkbox.defaultProps = {
   value: null,
   label: "",
   disabled: false,
+  flat: false,
   shadow: true
 };
 
@@ -149,6 +154,7 @@ Checkbox.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
+  flat: propTypes.bool,
   shadow: propTypes.bool,
   style: propTypes.object
 };
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 49869171..009b880a 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 
 import Checkbox from "./Checkbox";
-import { Fieldset, Toolbar, Button } from "../";
+import { Fieldset, Toolbar, Button, Cutout } from "../";
 storiesOf("Checkbox", module)
   .addDecorator(story => (
     <div
@@ -21,6 +21,39 @@ storiesOf("Checkbox", module)
       value="single"
       label="I'm single 😥 ...and no one's controlling me 😎"
     />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <Checkbox
+          flat
+          defaultChecked={true}
+          value="single"
+          label="Earth is flat 🌍"
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <Checkbox
+          flat
+          disabled
+          defaultChecked={true}
+          value="single"
+          label="Earth is flat 🌍"
+        />
+      </div>
+    </Cutout>
   ));
 
 class ControlledCheckboxGroupExample extends React.Component {

From 0d6c7d0188ecdd33f9ede914ea8b8d5e1f43a493 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Sat, 18 May 2019 14:59:03 +0200
Subject: [PATCH 03/13] added flat Radio

---
 src/components/Checkbox/Checkbox.stories.js | 21 ++----
 src/components/Radio/Radio.js               | 44 +++++++++---
 src/components/Radio/Radio.stories.js       | 76 +++++++++++++++++++--
 3 files changed, 109 insertions(+), 32 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 009b880a..5f7c92c2 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -1,8 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import Checkbox from "./Checkbox";
-import { Fieldset, Toolbar, Button, Cutout } from "../";
+import { Checkbox, Fieldset, Toolbar, Button, Cutout } from "../";
 storiesOf("Checkbox", module)
   .addDecorator(story => (
     <div
@@ -28,29 +27,19 @@ storiesOf("Checkbox", module)
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
       </p>
-      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+      <div style={{ marginTop: "1rem" }}>
         <Checkbox
           flat
           defaultChecked={true}
           value="single"
           label="Earth is flat 🌍"
         />
-      </div>
-    </Cutout>
-  ))
-  .add("flat disabled", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
-      <p style={{ lineHeight: 1.3 }}>
-        When you want to add input field on a light background (like scrollable
-        content), just use the flat variant:
-      </p>
-      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
         <Checkbox
           flat
-          disabled
-          defaultChecked={true}
+          defaultChecked={false}
           value="single"
-          label="Earth is flat 🌍"
+          label="Reptilians rule the world 🦎"
+          disabled
         />
       </div>
     </Cutout>
diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
index aea3bc15..358ad554 100644
--- a/src/components/Radio/Radio.js
+++ b/src/components/Radio/Radio.js
@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled, { css } from "styled-components";
-import { createDisabledTextStyles } from "../common";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { padding, fontSizes } from "../common/system";
 import Cutout from "../Cutout/Cutout";
 
@@ -43,8 +43,8 @@ const createCheckmarkSymbol = ({ checked }) =>
       background: ${({ theme }) => theme.checkmark};
     }
   `;
-// had to overwrite box-shadow for StyledCheckmark since the default made checkbox too dark
-const StyledCheckmark = styled(Cutout)`
+
+const sharedCheckmarkStyles = css`
   position: absolute;
   top: 50%;
   left: 0;
@@ -52,7 +52,12 @@ const StyledCheckmark = styled(Cutout)`
   width: 20px;
   height: 20px;
   border-radius: 50%;
-
+  ${props => createCheckmarkSymbol(props)}
+`;
+// had to overwrite box-shadow for StyledCheckmark since the default made checkbox too dark
+const StyledCheckmark = styled(Cutout)`
+ 
+  ${sharedCheckmarkStyles}
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
 
@@ -70,13 +75,30 @@ const StyledCheckmark = styled(Cutout)`
     box-shadow: none;
   }
 
-  ${props => createCheckmarkSymbol(props)}
 `;
-
+const StyledFlatCheckmark = styled.div`
+  ${createFlatBoxStyles()}
+  ${sharedCheckmarkStyles}
+  outline: none;
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
+  &:before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    border: 2px solid ${({ theme }) => theme.flatDark};
+    border-radius: 50%;
+  }
+`;
 const Radio = ({
   onChange,
   label,
   disabled,
+  flat,
   value,
   checked,
   name,
@@ -85,6 +107,8 @@ const Radio = ({
   shadow,
   ...otherProps
 }) => {
+  const Checkmark = flat ? StyledFlatCheckmark : StyledCheckmark;
+
   return (
     <StyledLabel isDisabled={disabled} className={className} style={style}>
       {label}
@@ -97,11 +121,7 @@ const Radio = ({
         name={name}
         {...otherProps}
       />
-      <StyledCheckmark
-        checked={checked}
-        isDisabled={disabled}
-        shadow={shadow}
-      />
+      <Checkmark checked={checked} isDisabled={disabled} shadow={shadow} />
     </StyledLabel>
   );
 };
@@ -112,6 +132,7 @@ Radio.defaultProps = {
   value: null,
   label: "",
   disabled: false,
+  flat: false,
   shadow: true
 };
 
@@ -126,6 +147,7 @@ Radio.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
+  flat: propTypes.bool,
   shadow: propTypes.bool,
   style: propTypes.object
 };
diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
index 4024bb0b..050445eb 100644
--- a/src/components/Radio/Radio.stories.js
+++ b/src/components/Radio/Radio.stories.js
@@ -1,10 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import Radio from "./Radio";
-import Fieldset from "../Fieldset/Fieldset";
-import Window from "../Window/Window";
-import WindowContent from "../WindowContent/WindowContent";
+import { Radio, Cutout, Fieldset, Window, WindowContent } from "../";
 storiesOf("Radio", module)
   .addDecorator(story => (
     <div
@@ -16,7 +13,8 @@ storiesOf("Radio", module)
       {story()}
     </div>
   ))
-  .add("default", () => <RadioGroup />);
+  .add("default", () => <RadioGroup />)
+  .add("flat", () => <FlatRadioGroup />);
 
 class RadioGroup extends React.Component {
   state = {
@@ -69,3 +67,71 @@ class RadioGroup extends React.Component {
     );
   }
 }
+
+class FlatRadioGroup extends React.Component {
+  state = {
+    checkedValue: "Pear"
+  };
+
+  handleChange = e => this.setState({ checkedValue: e.target.value });
+
+  render() {
+    const { checkedValue } = this.state;
+    return (
+      <Window>
+        <WindowContent>
+          <Cutout
+            style={{ padding: "2rem", background: "white", width: "300px" }}
+          >
+            <p style={{ lineHeight: 1.3 }}>
+              When you want to use radio buttons on a light background (like
+              scrollable content), just use the flat variant:
+            </p>
+            <div
+              style={{
+                marginTop: "1rem"
+              }}
+            >
+              <Radio
+                flat
+                checked={checkedValue === "Pear"}
+                onChange={this.handleChange}
+                value="Pear"
+                label="🍐 Pear"
+                name="fruits"
+              />
+              <br />
+              <Radio
+                flat
+                checked={checkedValue === "Orange"}
+                onChange={this.handleChange}
+                value="Orange"
+                label="🍊 Orange"
+                name="fruits"
+              />
+              <br />
+              <Radio
+                flat
+                checked={checkedValue === "Kiwi"}
+                onChange={this.handleChange}
+                value="Kiwi"
+                label="🥝 Kiwi"
+                name="fruits"
+              />
+              <br />
+              <Radio
+                flat
+                checked={checkedValue === "Grape"}
+                onChange={this.handleChange}
+                value="Grape"
+                label="🍇 Grape"
+                name="fruits"
+                disabled
+              />
+            </div>
+          </Cutout>
+        </WindowContent>
+      </Window>
+    );
+  }
+}

From 98d3dddcf4dc65000b32bf04e56d0c6e81124327 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Sat, 18 May 2019 15:17:27 +0200
Subject: [PATCH 04/13] added flat Fieldset

---
 src/components/Fieldset/Fieldset.js         | 26 +++++++----
 src/components/Fieldset/Fieldset.stories.js | 50 ++++++++++++++++++---
 2 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js
index f4522b22..c60061c5 100644
--- a/src/components/Fieldset/Fieldset.js
+++ b/src/components/Fieldset/Fieldset.js
@@ -1,19 +1,23 @@
 import React from "react";
 import propTypes from "prop-types";
 
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { createDisabledTextStyles } from "../common";
 import { fontSizes, padding } from "../common/system";
 
 const StyledFieldset = styled.fieldset`
   position: relative;
-  border: 2px solid ${({ theme }) => theme.borderLightest};
-  box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
-    inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
+  border: 2px solid
+    ${({ theme, flat }) => (flat ? theme.flatDark : theme.borderLightest)};
   padding: ${padding.md};
-
   font-size: ${fontSizes.md};
   color: ${({ theme }) => theme.text};
+  ${({ flat }) =>
+    !flat &&
+    css`
+      box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
+        inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
+    `}
 `;
 const StyledLegend = styled.legend`
   position: absolute;
@@ -23,7 +27,7 @@ const StyledLegend = styled.legend`
   padding: 0 ${padding.sm};
 
   font-size: ${fontSizes.md};
-  background: ${({ theme }) => theme.material};
+  background: ${({ theme, flat }) => (flat ? theme.canvas : theme.material)};
 `;
 
 const StyledFieldsetContent = styled.div`
@@ -33,6 +37,7 @@ const StyledFieldsetContent = styled.div`
 const Fieldset = ({
   label,
   disabled,
+  flat,
   children,
   className,
   style,
@@ -41,11 +46,12 @@ const Fieldset = ({
   return (
     <StyledFieldset
       isDisabled={disabled}
+      flat={flat}
       style={style}
       className={className}
       {...otherProps}
     >
-      {label && <StyledLegend>{label}</StyledLegend>}
+      {label && <StyledLegend flat={flat}>{label}</StyledLegend>}
       <StyledFieldsetContent isDisabled={disabled}>
         {children}
       </StyledFieldsetContent>
@@ -54,7 +60,8 @@ const Fieldset = ({
 };
 
 Fieldset.defaultProps = {
-  disabled: false
+  disabled: false,
+  flat: false
 };
 
 Fieldset.propTypes = {
@@ -66,7 +73,8 @@ Fieldset.propTypes = {
   className: propTypes.string,
   style: propTypes.object,
   children: propTypes.node,
-  disabled: propTypes.bool
+  disabled: propTypes.bool,
+  flat: propTypes.bool
 };
 
 export default Fieldset;
diff --git a/src/components/Fieldset/Fieldset.stories.js b/src/components/Fieldset/Fieldset.stories.js
index 9b59790f..138f91f8 100644
--- a/src/components/Fieldset/Fieldset.stories.js
+++ b/src/components/Fieldset/Fieldset.stories.js
@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import Fieldset from "./Fieldset";
-import Window from "../Window/Window";
-import WindowContent from "../WindowContent/WindowContent";
-import Checkbox from "../Checkbox/Checkbox";
-
+import { Checkbox, Cutout, Fieldset, Window, WindowContent } from "../";
 storiesOf("Fieldset", module)
   .addDecorator(story => (
     <div
@@ -32,9 +28,49 @@ storiesOf("Fieldset", module)
       </WindowContent>
     </Window>
   ))
-  .add("disabled", () => <DisabledFieldset />);
+  .add("disabled", () => <DisabledFieldset />)
+  .add("flat", () => <FlatFieldset />);
 
-const DisabledFieldset = () => {
+const FlatFieldset = () => {
+  const [state, setState] = useState(true);
+  return (
+    <Window>
+      <WindowContent>
+        <Cutout
+          style={{ padding: "1rem", background: "white", width: "300px" }}
+        >
+          <p style={{ lineHeight: 1.3 }}>
+            When you want to use Fieldset on a light background (like scrollable
+            content), just use the flat variant:
+          </p>
+          <div
+            style={{
+              marginTop: "1.5rem"
+            }}
+          >
+            <Fieldset
+              flat
+              label={
+                <Checkbox
+                  flat
+                  style={{ margin: 0 }}
+                  label="Enable"
+                  checked={!state}
+                  value={!state}
+                  onChange={() => setState(!state)}
+                />
+              }
+              disabled={state}
+            >
+              Some content here 😍
+            </Fieldset>
+          </div>
+        </Cutout>
+      </WindowContent>
+    </Window>
+  );
+};
+const DisabledFieldset = ({ flat }) => {
   const [state, setState] = useState(true);
   return (
     <Window>

From 7bb4bd032c4ffc0903682918cf9e293751bf2e8d Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Sun, 19 May 2019 00:34:44 +0200
Subject: [PATCH 05/13]  added flat Select

---
 src/components/Button/Button.js         | 62 +++++++++++++++---------
 src/components/Button/Button.stories.js | 34 +++++++++++--
 src/components/Select/Select.js         | 63 +++++++++++++++++++------
 src/components/Select/Select.stories.js | 34 ++++++++++++-
 src/components/common/index.js          |  2 +
 5 files changed, 154 insertions(+), 41 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 76f39480..8f61fd4c 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -1,41 +1,55 @@
 import React from "react";
 import propTypes from "prop-types";
 
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import {
   createBorderStyles,
   createBoxStyles,
+  createFlatBoxStyles,
   createDisabledTextStyles
 } from "../common";
 import { blockSizes, fontSizes, padding } from "../common/system";
 
-const StyledButton = styled.button`
-  ${createBoxStyles()};
+const commonButtonStyles = css`
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  ${props =>
-    props.flat
-      ? null
-      : props.active
-      ? createBorderStyles(true)
-      : createBorderStyles(false)}
-  height: ${props => blockSizes[props.size]};
-  width: ${props =>
-    props.fullWidth ? "100%" : props.square ? blockSizes[props.size] : "auto"};
-  padding: ${props => (props.square ? 0 : "0 " + padding.sm)};
+  height: ${({ size }) => blockSizes[size]};
+  width: ${({ fullWidth, square, size }) =>
+    fullWidth ? "100%" : square ? blockSizes[size] : "auto"};
+  padding: ${({ square }) => (square ? 0 : "0 " + padding.sm)};
   font-size: ${fontSizes.md};
-    
-  ${props => props.isDisabled && createDisabledTextStyles()}
   &:active {
-    ${props => !props.isDisabled && !props.flat && createBorderStyles(true)}
-   
-    padding-top: ${props => !props.isDisabled && "2px"};
-    
+    padding-top: ${({ isDisabled }) => !isDisabled && "2px"};
   }
-  padding-top: ${props => props.active && !props.isDisabled && "2px"};
-  ${props => props.flat && "border: none;"}
+  padding-top: ${({ active, isDisabled }) => active && !isDisabled && "2px"};
+`;
+
+const StyledButton = styled.button`
+  ${commonButtonStyles}
+
+  ${({ flat }) =>
+    flat
+      ? css`
+          ${createFlatBoxStyles()} /* background: none; */
+        `
+      : css`
+          ${createBoxStyles()};
+          ${({ srat, active }) =>
+            srat
+              ? null
+              : active
+              ? createBorderStyles(true)
+              : createBorderStyles(false)}
+          ${({ isDisabled }) =>
+            isDisabled && createDisabledTextStyles()}
+      &:active {
+            ${({ isDisabled, srat }) =>
+              !isDisabled && !srat && createBorderStyles(true)}
+          }
+          ${({ srat }) => srat && "border: none;"}
+        `}
 `;
 
 const Button = ({
@@ -48,6 +62,7 @@ const Button = ({
   square,
   active,
   flat,
+  srat,
   className,
   children,
   ...otherProps
@@ -63,6 +78,7 @@ const Button = ({
       square={square}
       active={active}
       flat={flat}
+      srat={srat}
       className={className}
       style={style}
       // onTouchStart below to enable button :active style on iOS
@@ -83,7 +99,8 @@ Button.defaultProps = {
   size: "md",
   square: false,
   active: false,
-  flat: false
+  flat: false,
+  srat: false
 };
 
 Button.propTypes = {
@@ -96,6 +113,7 @@ Button.propTypes = {
   square: propTypes.bool,
   active: propTypes.bool,
   flat: propTypes.bool,
+  srat: propTypes.bool,
   className: propTypes.string,
   children: propTypes.node.isRequired
 };
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index d86d8535..235348b0 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -5,7 +5,7 @@ import { action } from "@storybook/addon-actions";
 
 import styled from "styled-components";
 
-import Button from "./Button";
+import { Button, Window, WindowContent, Cutout, Toolbar } from "../";
 export const actions = { onClick: action("onClick") };
 
 storiesOf("Button", module)
@@ -45,8 +45,36 @@ storiesOf("Button", module)
       💖
     </Button>
   ))
-  .add("flat", () => (
-    <Button {...actions} flat size="sm" accent>
+  .add("srat", () => (
+    <Button {...actions} srat size="sm" accent>
       File
     </Button>
+  ))
+  .add("flat", () => (
+    <Window>
+      <WindowContent>
+        <Cutout
+          style={{ padding: "1rem", background: "white", width: "300px" }}
+        >
+          <p style={{ lineHeight: 1.3 }}>
+            When you want to use Buttons on a light background (like scrollable
+            content), just use the flat variant:
+          </p>
+          <div
+            style={{
+              marginTop: "1.5rem"
+            }}
+          >
+            <Toolbar>
+              <Button {...actions} flat fullWidth accent>
+                OK
+              </Button>
+              <Button {...actions} flat disabled fullWidth accent>
+                Cancel
+              </Button>
+            </Toolbar>
+          </div>
+        </Cutout>
+      </WindowContent>
+    </Window>
   ));
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 110f8ab4..80229fb9 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -3,12 +3,12 @@ import propTypes from "prop-types";
 
 import Button from "../Button/Button";
 
-import styled from "styled-components";
-import { shadow } from "../common";
+import styled, { css } from "styled-components";
+import { shadow, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding } from "../common/system";
 import Cutout from "../Cutout/Cutout";
 
-const StyledSelectWrapper = styled(Cutout)`
+const sharedWrapperStyles = css`
   height: ${blockSizes.md};
   display: flex;
   align-items: center;
@@ -17,6 +17,13 @@ const StyledSelectWrapper = styled(Cutout)`
   color: ${({ theme }) => theme.inputText};
   font-size: ${fontSizes.md};
 `;
+const StyledSelectWrapper = styled(Cutout)`
+  ${sharedWrapperStyles}
+`;
+const StyledFlatSelectWrapper = styled.div`
+  ${createFlatBoxStyles()}
+  ${sharedWrapperStyles}
+`;
 const StyledSelectContent = styled.div`
   width: 100%;
   padding-left: ${padding.sm};
@@ -24,15 +31,24 @@ const StyledSelectContent = styled.div`
   white-space: nowrap;
 `;
 const StyledDropdownButton = styled(Button)`
-  height: 100%;
   width: 30px;
   padding: 0;
   z-index: 1;
   flex-shrink: 0;
-  border-left-color: ${({ theme }) => theme.borderLight};
-  border-top-color: ${({ theme }) => theme.borderLight};
-  box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest},
-    inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
+  ${({ flat }) =>
+    flat
+      ? css`
+          height: calc(100% - 4px);
+          margin-right: 2px;
+        `
+      : css`
+          height: 100%;
+          border-left-color: ${({ theme }) => theme.borderLight};
+          border-top-color: ${({ theme }) => theme.borderLight};
+          box-shadow: inset 1px 1px 0px 1px
+              ${({ theme }) => theme.borderLightest},
+            inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
+        `}
 `;
 const StyledDropdownIcon = styled.span`
   position: absolute;
@@ -55,16 +71,27 @@ const StyledDropdownList = styled.ul`
 
   font-size: ${fontSizes.md};
   position: absolute;
-  bottom: -2px;
-  width: calc(100% - 2px);
   transform: translateY(100%);
   left: 0px;
   background: ${({ theme }) => theme.canvas};
-  border: 2px solid ${({ theme }) => theme.borderDarkest};
+  padding: 2px;
   border-top: none;
-  box-shadow: ${props => (props.shadow ? shadow : "none")};
   cursor: default;
   z-index: 99;
+
+  ${({ flat }) =>
+    flat
+      ? css`
+          bottom: 2px;
+          width: 100%;
+          border: 2px solid ${({ theme }) => theme.flatDark};
+        `
+      : css`
+          box-shadow: ${props => (props.shadow ? shadow : "none")};
+          bottom: -2px;
+          width: calc(100% - 2px);
+          border: 2px solid ${({ theme }) => theme.borderDarkest};
+        `}
 `;
 const StyledDropdownListItem = styled.li`
   box-sizing: border-box;
@@ -86,6 +113,7 @@ const Select = ({
   items,
   selectedIndex,
   shadow,
+  flat,
   width,
   height,
   otherProps,
@@ -100,8 +128,10 @@ const Select = ({
     if (onChange) onChange(items[i].value);
     setIndex(i);
   };
+
+  const Wrapper = flat ? StyledFlatSelectWrapper : StyledSelectWrapper;
   return (
-    <StyledSelectWrapper
+    <Wrapper
       className={className}
       onClick={() => setOpen(!open)}
       style={{ ...style, width }}
@@ -111,12 +141,13 @@ const Select = ({
       <StyledSelectContent>
         {items.length ? items[index].label : ""}
       </StyledSelectContent>
-      <StyledDropdownButton>
+      <StyledDropdownButton flat={flat}>
         <StyledDropdownIcon />
       </StyledDropdownButton>
       {open && (
         <StyledDropdownList
           shadow={shadow}
+          flat={flat}
           style={height && { overflowY: "scroll", height }}
         >
           {items.map((item, i) => (
@@ -131,7 +162,7 @@ const Select = ({
           ))}
         </StyledDropdownList>
       )}
-    </StyledSelectWrapper>
+    </Wrapper>
   );
 };
 
@@ -142,12 +173,14 @@ Select.propTypes = {
   height: propTypes.number,
   selectedIndex: propTypes.number,
   shadow: propTypes.bool,
+  flat: propTypes.bool,
   style: propTypes.object,
   onChange: propTypes.func
 };
 Select.defaultProps = {
   style: {},
   shadow: true,
+  flat: false,
   selectedIndex: 0
 };
 export default Select;
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
index dfc2db6b..6a3eabe7 100644
--- a/src/components/Select/Select.stories.js
+++ b/src/components/Select/Select.stories.js
@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import Select from "./Select";
+import { Select, Window, WindowContent, Cutout } from "../";
 
 export const actions = { onClick: action("onClick") };
 
@@ -35,4 +35,36 @@ storiesOf("Select", module)
   ))
   .add("no shadow", () => (
     <Select shadow={false} items={items} onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Window>
+      <WindowContent>
+        <Cutout
+          style={{
+            padding: "1rem",
+            paddingBottom: "3rem",
+            background: "white",
+            width: "300px"
+          }}
+        >
+          <p style={{ lineHeight: 1.3 }}>
+            When you want to use Buttons on a light background (like scrollable
+            content), just use the flat variant:
+          </p>
+          <div
+            style={{
+              marginTop: "1.5rem"
+            }}
+          >
+            <Select
+              flat
+              items={items}
+              onChange={onChange}
+              height={100}
+              width={150}
+            />
+          </div>
+        </Cutout>
+      </WindowContent>
+    </Window>
   ));
diff --git a/src/components/common/index.js b/src/components/common/index.js
index eb853e8d..cc12c37a 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -15,8 +15,10 @@ export const createBoxStyles = () =>
     background-color: ${({ theme }) => theme.material};
     color: ${({ theme }) => theme.text};
   `;
+// TODO for flat box styles add checkered background when disabled (not solid color)
 export const createFlatBoxStyles = () =>
   css`
+    position: relative;
     box-sizing: border-box;
     display: inline-block;
     color: ${({ theme }) => theme.text};

From 21cf36126527b9732ffee245459b279ec75a1906 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Sun, 19 May 2019 20:28:54 +0200
Subject: [PATCH 06/13] fixed Button issue

---
 src/components/Button/Button.js       |  3 +--
 src/components/Radio/Radio.stories.js | 14 +++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 8f61fd4c..d1f98178 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -27,8 +27,6 @@ const commonButtonStyles = css`
 `;
 
 const StyledButton = styled.button`
-  ${commonButtonStyles}
-
   ${({ flat }) =>
     flat
       ? css`
@@ -50,6 +48,7 @@ const StyledButton = styled.button`
           }
           ${({ srat }) => srat && "border: none;"}
         `}
+  ${commonButtonStyles}
 `;
 
 const Button = ({
diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
index 050445eb..3ad60d7d 100644
--- a/src/components/Radio/Radio.stories.js
+++ b/src/components/Radio/Radio.stories.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-
+import styled from "styled-components";
 import { Radio, Cutout, Fieldset, Window, WindowContent } from "../";
 storiesOf("Radio", module)
   .addDecorator(story => (
@@ -80,9 +80,7 @@ class FlatRadioGroup extends React.Component {
     return (
       <Window>
         <WindowContent>
-          <Cutout
-            style={{ padding: "2rem", background: "white", width: "300px" }}
-          >
+          <StyledCutout>
             <p style={{ lineHeight: 1.3 }}>
               When you want to use radio buttons on a light background (like
               scrollable content), just use the flat variant:
@@ -129,9 +127,15 @@ class FlatRadioGroup extends React.Component {
                 disabled
               />
             </div>
-          </Cutout>
+          </StyledCutout>
         </WindowContent>
       </Window>
     );
   }
 }
+let StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+  color: ${({ theme }) => theme.text};
+  padding: 2rem;
+  width: 300px;
+`;

From aac72185f28951a82001472499946bfdb0ca0a5c Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Mon, 20 May 2019 21:57:20 +0200
Subject: [PATCH 07/13] switched from 'flat' flag to 'variant' prop in
 components

---
 src/components/Bar/Bar.stories.js             |  6 ++---
 src/components/Button/Button.js               | 26 ++++++++-----------
 src/components/Button/Button.stories.js       | 10 +++----
 src/components/Checkbox/Checkbox.js           |  8 +++---
 src/components/Checkbox/Checkbox.stories.js   |  4 +--
 src/components/Fieldset/Fieldset.js           | 20 +++++++-------
 src/components/Fieldset/Fieldset.stories.js   |  6 ++---
 src/components/ListItem/ListItem.stories.js   | 16 +++++++++---
 src/components/Radio/Radio.js                 |  8 +++---
 src/components/Radio/Radio.stories.js         |  8 +++---
 src/components/Select/Select.js               | 21 ++++++++-------
 src/components/Select/Select.stories.js       |  2 +-
 src/components/TextArea/TextArea.js           | 14 +++++-----
 src/components/TextArea/TextArea.stories.js   |  4 +--
 src/components/TextField/TextField.js         | 13 +++++-----
 src/components/TextField/TextField.stories.js |  8 +++---
 src/components/Window/Window.stories.js       |  6 ++---
 17 files changed, 96 insertions(+), 84 deletions(-)

diff --git a/src/components/Bar/Bar.stories.js b/src/components/Bar/Bar.stories.js
index 5499f236..24cfc0a4 100644
--- a/src/components/Bar/Bar.stories.js
+++ b/src/components/Bar/Bar.stories.js
@@ -21,10 +21,8 @@ storiesOf("Bar", module)
     <AppBar>
       <Toolbar>
         <Bar />
-        <Button flat accent>
-          Edit
-        </Button>
-        <Button flat accent disabled>
+        <Button variant="menu">Edit</Button>
+        <Button variant="menu" disabled>
           Save
         </Button>
         <Bar />
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index d1f98178..b2d034f7 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -27,15 +27,15 @@ const commonButtonStyles = css`
 `;
 
 const StyledButton = styled.button`
-  ${({ flat }) =>
-    flat
+  ${({ variant }) =>
+    variant === "flat"
       ? css`
           ${createFlatBoxStyles()} /* background: none; */
         `
       : css`
           ${createBoxStyles()};
-          ${({ srat, active }) =>
-            srat
+          ${({ variant, active }) =>
+            variant === "menu"
               ? null
               : active
               ? createBorderStyles(true)
@@ -43,10 +43,10 @@ const StyledButton = styled.button`
           ${({ isDisabled }) =>
             isDisabled && createDisabledTextStyles()}
       &:active {
-            ${({ isDisabled, srat }) =>
-              !isDisabled && !srat && createBorderStyles(true)}
+            ${({ isDisabled, variant }) =>
+              !isDisabled && variant !== "menu" && createBorderStyles(true)}
           }
-          ${({ srat }) => srat && "border: none;"}
+          ${({ variant }) => variant === "menu" && "border: none;"}
         `}
   ${commonButtonStyles}
 `;
@@ -60,8 +60,7 @@ const Button = ({
   size,
   square,
   active,
-  flat,
-  srat,
+  variant,
   className,
   children,
   ...otherProps
@@ -69,6 +68,7 @@ const Button = ({
   return (
     <StyledButton
       type={type}
+      variant={variant}
       onClick={disabled ? undefined : onClick}
       style={style}
       isDisabled={disabled}
@@ -76,8 +76,6 @@ const Button = ({
       size={size}
       square={square}
       active={active}
-      flat={flat}
-      srat={srat}
       className={className}
       style={style}
       // onTouchStart below to enable button :active style on iOS
@@ -98,8 +96,7 @@ Button.defaultProps = {
   size: "md",
   square: false,
   active: false,
-  flat: false,
-  srat: false
+  variant: "default"
 };
 
 Button.propTypes = {
@@ -111,8 +108,7 @@ Button.propTypes = {
   size: propTypes.oneOf(["sm", "md", "lg"]),
   square: propTypes.bool,
   active: propTypes.bool,
-  flat: propTypes.bool,
-  srat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "menu", "flat"]),
   className: propTypes.string,
   children: propTypes.node.isRequired
 };
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index 235348b0..cd928760 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -45,12 +45,12 @@ storiesOf("Button", module)
       💖
     </Button>
   ))
-  .add("srat", () => (
-    <Button {...actions} srat size="sm" accent>
+  .add("menu button", () => (
+    <Button {...actions} variant="menu" size="sm" accent>
       File
     </Button>
   ))
-  .add("flat", () => (
+  .add("flat button", () => (
     <Window>
       <WindowContent>
         <Cutout
@@ -66,10 +66,10 @@ storiesOf("Button", module)
             }}
           >
             <Toolbar>
-              <Button {...actions} flat fullWidth accent>
+              <Button {...actions} variant="flat" fullWidth accent>
                 OK
               </Button>
-              <Button {...actions} flat disabled fullWidth accent>
+              <Button {...actions} variant="flat" disabled fullWidth accent>
                 Cancel
               </Button>
             </Toolbar>
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index 910031d8..dd507246 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -75,7 +75,7 @@ const Checkbox = ({
   onChange,
   label,
   disabled,
-  flat,
+  variant,
   value,
   checked,
   defaultChecked,
@@ -87,7 +87,7 @@ const Checkbox = ({
 }) => {
   let Input, isChecked;
 
-  const Checkmark = flat ? StyledFlatCheckmark : StyledCheckmark;
+  const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark;
   if (defaultChecked || checked === undefined) {
     const [state, setState] = useState(defaultChecked || false);
 
@@ -139,7 +139,7 @@ Checkbox.defaultProps = {
   value: null,
   label: "",
   disabled: false,
-  flat: false,
+  variant: "default",
   shadow: true
 };
 
@@ -154,7 +154,7 @@ Checkbox.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
-  flat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   shadow: propTypes.bool,
   style: propTypes.object
 };
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 5f7c92c2..3845d68a 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -29,13 +29,13 @@ storiesOf("Checkbox", module)
       </p>
       <div style={{ marginTop: "1rem" }}>
         <Checkbox
-          flat
+          variant="flat"
           defaultChecked={true}
           value="single"
           label="Earth is flat 🌍"
         />
         <Checkbox
-          flat
+          variant="flat"
           defaultChecked={false}
           value="single"
           label="Reptilians rule the world 🦎"
diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js
index c60061c5..ba00dd42 100644
--- a/src/components/Fieldset/Fieldset.js
+++ b/src/components/Fieldset/Fieldset.js
@@ -8,12 +8,13 @@ import { fontSizes, padding } from "../common/system";
 const StyledFieldset = styled.fieldset`
   position: relative;
   border: 2px solid
-    ${({ theme, flat }) => (flat ? theme.flatDark : theme.borderLightest)};
+    ${({ theme, variant }) =>
+      variant === "flat" ? theme.flatDark : theme.borderLightest};
   padding: ${padding.md};
   font-size: ${fontSizes.md};
   color: ${({ theme }) => theme.text};
-  ${({ flat }) =>
-    !flat &&
+  ${({ variant }) =>
+    variant !== "flat" &&
     css`
       box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
         inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
@@ -27,7 +28,8 @@ const StyledLegend = styled.legend`
   padding: 0 ${padding.sm};
 
   font-size: ${fontSizes.md};
-  background: ${({ theme, flat }) => (flat ? theme.canvas : theme.material)};
+  background: ${({ theme, variant }) =>
+    variant === "flat" ? theme.canvas : theme.material};
 `;
 
 const StyledFieldsetContent = styled.div`
@@ -37,7 +39,7 @@ const StyledFieldsetContent = styled.div`
 const Fieldset = ({
   label,
   disabled,
-  flat,
+  variant,
   children,
   className,
   style,
@@ -46,12 +48,12 @@ const Fieldset = ({
   return (
     <StyledFieldset
       isDisabled={disabled}
-      flat={flat}
+      variant={variant}
       style={style}
       className={className}
       {...otherProps}
     >
-      {label && <StyledLegend flat={flat}>{label}</StyledLegend>}
+      {label && <StyledLegend variant={variant}>{label}</StyledLegend>}
       <StyledFieldsetContent isDisabled={disabled}>
         {children}
       </StyledFieldsetContent>
@@ -61,7 +63,7 @@ const Fieldset = ({
 
 Fieldset.defaultProps = {
   disabled: false,
-  flat: false
+  variant: "default"
 };
 
 Fieldset.propTypes = {
@@ -74,7 +76,7 @@ Fieldset.propTypes = {
   style: propTypes.object,
   children: propTypes.node,
   disabled: propTypes.bool,
-  flat: propTypes.bool
+  variant: propTypes.oneOf(["default", "flat"])
 };
 
 export default Fieldset;
diff --git a/src/components/Fieldset/Fieldset.stories.js b/src/components/Fieldset/Fieldset.stories.js
index 138f91f8..c066ceb1 100644
--- a/src/components/Fieldset/Fieldset.stories.js
+++ b/src/components/Fieldset/Fieldset.stories.js
@@ -49,10 +49,10 @@ const FlatFieldset = () => {
             }}
           >
             <Fieldset
-              flat
+              variant="flat"
               label={
                 <Checkbox
-                  flat
+                  variant="flat"
                   style={{ margin: 0 }}
                   label="Enable"
                   checked={!state}
@@ -70,7 +70,7 @@ const FlatFieldset = () => {
     </Window>
   );
 };
-const DisabledFieldset = ({ flat }) => {
+const DisabledFieldset = () => {
   const [state, setState] = useState(true);
   return (
     <Window>
diff --git a/src/components/ListItem/ListItem.stories.js b/src/components/ListItem/ListItem.stories.js
index f42d9246..707df011 100644
--- a/src/components/ListItem/ListItem.stories.js
+++ b/src/components/ListItem/ListItem.stories.js
@@ -2,10 +2,9 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import ListItem from "./ListItem";
-import List from "../List/List";
+import { ListItem, List, Divider } from "../";
 
-export const actions = { onClick: action("onClick") };
+const actions = { onClick: action("onClick") };
 
 storiesOf("ListItem", module)
   .addDecorator(story => (
@@ -51,6 +50,17 @@ storiesOf("ListItem", module)
       </ListItem>
     </List>
   ))
+  .add("size small", () => (
+    <List>
+      <ListItem size="sm">View</ListItem>
+      <Divider />
+      <ListItem size="sm">Paste</ListItem>
+      <ListItem size="sm">Paste Shortcut</ListItem>
+      <ListItem size="sm">Undo Copy</ListItem>
+      <Divider />
+      <ListItem size="sm">Properties</ListItem>
+    </List>
+  ))
   .add("render as link", () => (
     <List>
       <ListItem {...actions}>Normal item</ListItem>
diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
index 358ad554..6839ae26 100644
--- a/src/components/Radio/Radio.js
+++ b/src/components/Radio/Radio.js
@@ -98,7 +98,7 @@ const Radio = ({
   onChange,
   label,
   disabled,
-  flat,
+  variant,
   value,
   checked,
   name,
@@ -107,7 +107,7 @@ const Radio = ({
   shadow,
   ...otherProps
 }) => {
-  const Checkmark = flat ? StyledFlatCheckmark : StyledCheckmark;
+  const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark;
 
   return (
     <StyledLabel isDisabled={disabled} className={className} style={style}>
@@ -132,7 +132,7 @@ Radio.defaultProps = {
   value: null,
   label: "",
   disabled: false,
-  flat: false,
+  variant: "default",
   shadow: true
 };
 
@@ -147,8 +147,8 @@ Radio.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
-  flat: propTypes.bool,
   shadow: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   style: propTypes.object
 };
 
diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
index 3ad60d7d..321cfa35 100644
--- a/src/components/Radio/Radio.stories.js
+++ b/src/components/Radio/Radio.stories.js
@@ -91,7 +91,7 @@ class FlatRadioGroup extends React.Component {
               }}
             >
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Pear"}
                 onChange={this.handleChange}
                 value="Pear"
@@ -100,7 +100,7 @@ class FlatRadioGroup extends React.Component {
               />
               <br />
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Orange"}
                 onChange={this.handleChange}
                 value="Orange"
@@ -109,7 +109,7 @@ class FlatRadioGroup extends React.Component {
               />
               <br />
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Kiwi"}
                 onChange={this.handleChange}
                 value="Kiwi"
@@ -118,7 +118,7 @@ class FlatRadioGroup extends React.Component {
               />
               <br />
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Grape"}
                 onChange={this.handleChange}
                 value="Grape"
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 80229fb9..a94be16e 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -35,8 +35,8 @@ const StyledDropdownButton = styled(Button)`
   padding: 0;
   z-index: 1;
   flex-shrink: 0;
-  ${({ flat }) =>
-    flat
+  ${({ variant }) =>
+    variant === "flat"
       ? css`
           height: calc(100% - 4px);
           margin-right: 2px;
@@ -79,8 +79,8 @@ const StyledDropdownList = styled.ul`
   cursor: default;
   z-index: 99;
 
-  ${({ flat }) =>
-    flat
+  ${({ variant }) =>
+    variant === "flat"
       ? css`
           bottom: 2px;
           width: 100%;
@@ -113,7 +113,7 @@ const Select = ({
   items,
   selectedIndex,
   shadow,
-  flat,
+  variant,
   width,
   height,
   otherProps,
@@ -129,7 +129,8 @@ const Select = ({
     setIndex(i);
   };
 
-  const Wrapper = flat ? StyledFlatSelectWrapper : StyledSelectWrapper;
+  const Wrapper =
+    variant === "flat" ? StyledFlatSelectWrapper : StyledSelectWrapper;
   return (
     <Wrapper
       className={className}
@@ -141,13 +142,13 @@ const Select = ({
       <StyledSelectContent>
         {items.length ? items[index].label : ""}
       </StyledSelectContent>
-      <StyledDropdownButton flat={flat}>
+      <StyledDropdownButton variant={variant}>
         <StyledDropdownIcon />
       </StyledDropdownButton>
       {open && (
         <StyledDropdownList
           shadow={shadow}
-          flat={flat}
+          variant={variant}
           style={height && { overflowY: "scroll", height }}
         >
           {items.map((item, i) => (
@@ -173,14 +174,14 @@ Select.propTypes = {
   height: propTypes.number,
   selectedIndex: propTypes.number,
   shadow: propTypes.bool,
-  flat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   style: propTypes.object,
   onChange: propTypes.func
 };
 Select.defaultProps = {
   style: {},
   shadow: true,
-  flat: false,
+  variant: "default",
   selectedIndex: 0
 };
 export default Select;
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
index 6a3eabe7..5fd3199c 100644
--- a/src/components/Select/Select.stories.js
+++ b/src/components/Select/Select.stories.js
@@ -57,7 +57,7 @@ storiesOf("Select", module)
             }}
           >
             <Select
-              flat
+              variant="flat"
               items={items}
               onChange={onChange}
               height={100}
diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js
index 5f725471..912ec434 100644
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -30,13 +30,14 @@ const StyledTextArea = styled.textarea`
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
 
-  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
+  ${({ disabled, variant }) =>
+    variant !== "flat" && disabled && createDisabledTextStyles()}
 `;
 
 const TextArea = ({
   onChange,
   disabled,
-  flat,
+  variant,
   width,
   height,
   style,
@@ -44,7 +45,8 @@ const TextArea = ({
   shadow,
   ...otherProps
 }) => {
-  const Wrapper = flat ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
+  const Wrapper =
+    variant === "flat" ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
   return (
     <Wrapper
       style={{
@@ -62,7 +64,7 @@ const TextArea = ({
         readOnly={disabled}
         onChange={disabled ? undefined : onChange}
         disabled={disabled}
-        flat={flat}
+        variant={variant}
         {...otherProps}
       />
     </Wrapper>
@@ -71,14 +73,14 @@ const TextArea = ({
 
 TextArea.defaultProps = {
   shadow: true,
-  flat: false
+  variant: "default"
 };
 TextArea.propTypes = {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   height: propTypes.oneOfType([propTypes.string, propTypes.number]),
   onChange: propTypes.func,
   disabled: propTypes.bool,
-  flat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   className: propTypes.string,
   shadow: propTypes.bool
 };
diff --git a/src/components/TextArea/TextArea.stories.js b/src/components/TextArea/TextArea.stories.js
index 1afb3aa1..f59d45d6 100644
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -49,7 +49,7 @@ storiesOf("TextArea", module)
       </p>
       <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
         <TextArea
-          flat
+          variant="flat"
           width={"100%"}
           height={200}
           placeholder="Type in here.."
@@ -66,7 +66,7 @@ storiesOf("TextArea", module)
       </p>
       <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
         <TextArea
-          flat
+          variant="flat"
           disabled
           width={"100%"}
           height={200}
diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
index cf1d411f..bb4cc9c3 100644
--- a/src/components/TextField/TextField.js
+++ b/src/components/TextField/TextField.js
@@ -26,12 +26,13 @@ export const StyledTextInput = styled.input`
   background: none;
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
-  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
+  ${({ disabled, variant }) =>
+    variant !== "flat" && disabled && createDisabledTextStyles()}
 `;
 const TextField = ({
   onChange,
   disabled,
-  flat,
+  variant,
   type,
   style,
   shadow,
@@ -39,7 +40,7 @@ const TextField = ({
   width,
   ...otherProps
 }) => {
-  const Wrapper = flat ? StyledFlatWrapper : StyledWrapper;
+  const Wrapper = variant === "flat" ? StyledFlatWrapper : StyledWrapper;
   return (
     <Wrapper
       width={width}
@@ -52,7 +53,7 @@ const TextField = ({
         onChange={disabled ? undefined : onChange}
         readOnly={disabled}
         disabled={disabled}
-        flat={flat}
+        variant={variant}
         type={type}
         {...otherProps}
       />
@@ -63,13 +64,13 @@ TextField.defaultProps = {
   disabled: false,
   type: "text",
   shadow: true,
-  flat: false
+  variant: "default"
 };
 TextField.propTypes = {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   onChange: propTypes.func,
   disabled: propTypes.bool,
-  flat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   shadow: propTypes.bool,
   type: propTypes.string,
   className: propTypes.string
diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
index 0783dbb0..4c7bdc66 100644
--- a/src/components/TextField/TextField.stories.js
+++ b/src/components/TextField/TextField.stories.js
@@ -40,7 +40,7 @@ storiesOf("TextField", module)
           Name:
         </label>
         <TextField
-          flat
+          variant="flat"
           placeholder="type here..."
           width={150}
           onChange={onChange}
@@ -59,7 +59,7 @@ storiesOf("TextField", module)
           Name:
         </label>
         <TextField
-          flat
+          variant="flat"
           disabled
           defaultValue="Can't type 😥"
           width={150}
@@ -79,7 +79,9 @@ class ControlledTextFieldExample extends React.Component {
     return (
       <Toolbar>
         <TextField value={this.state.value} onChange={this.handleChange} />
-        <Button onClick={this.reset}>Reset</Button>
+        <Button onClick={this.reset} style={{ marginLeft: "2px" }}>
+          Reset
+        </Button>
       </Toolbar>
     );
   }
diff --git a/src/components/Window/Window.stories.js b/src/components/Window/Window.stories.js
index 324ba000..f275af91 100644
--- a/src/components/Window/Window.stories.js
+++ b/src/components/Window/Window.stories.js
@@ -22,13 +22,13 @@ storiesOf("Window", module)
     <Window style={{ width: 400 }}>
       <WindowHeader>react95.exe</WindowHeader>
       <Toolbar>
-        <Button flat size="sm">
+        <Button variant="menu" size="sm">
           File
         </Button>
-        <Button flat size="sm">
+        <Button variant="menu" size="sm">
           Edit
         </Button>
-        <Button flat size="sm">
+        <Button variant="menu" size="sm">
           Save
         </Button>
       </Toolbar>

From 3dec12801b5e5813ead6c698512e3c7a3b8cf68c Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Mon, 20 May 2019 22:11:14 +0200
Subject: [PATCH 08/13] added hover and active border styles to menu button

---
 src/components/Button/Button.js | 27 +++++++++++++++++----------
 src/components/common/index.js  | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index b2d034f7..c7585a86 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -4,6 +4,7 @@ import propTypes from "prop-types";
 import styled, { css } from "styled-components";
 import {
   createBorderStyles,
+  createWellBorderStyles,
   createBoxStyles,
   createFlatBoxStyles,
   createDisabledTextStyles
@@ -32,21 +33,27 @@ const StyledButton = styled.button`
       ? css`
           ${createFlatBoxStyles()} /* background: none; */
         `
+      : variant === "menu"
+      ? css`
+          ${createBoxStyles()};
+          border: 2px solid transparent;
+          &:hover {
+            ${createWellBorderStyles(false)}
+          }
+          &:active {
+            ${createWellBorderStyles(true)}
+          }
+          ${({ active }) => active && createBorderStyles(true)}
+        `
       : css`
           ${createBoxStyles()};
-          ${({ variant, active }) =>
-            variant === "menu"
-              ? null
-              : active
-              ? createBorderStyles(true)
-              : createBorderStyles(false)}
+          ${({ active }) =>
+            active ? createBorderStyles(true) : createBorderStyles(false)}
           ${({ isDisabled }) =>
             isDisabled && createDisabledTextStyles()}
-      &:active {
-            ${({ isDisabled, variant }) =>
-              !isDisabled && variant !== "menu" && createBorderStyles(true)}
+        &:active {
+            ${({ isDisabled }) => !isDisabled && createBorderStyles(true)}
           }
-          ${({ variant }) => variant === "menu" && "border: none;"}
         `}
   ${commonButtonStyles}
 `;
diff --git a/src/components/common/index.js b/src/components/common/index.js
index cc12c37a..1932ed00 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -52,3 +52,21 @@ export const createBorderStyles = (invert = false) =>
             1px ${({ theme }) => theme.borderLight},
           inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
       `;
+export const createWellBorderStyles = (invert = false) =>
+  invert
+    ? css`
+        border-style: solid;
+        border-width: 2px;
+        border-left-color: ${({ theme }) => theme.borderDark};
+        border-top-color: ${({ theme }) => theme.borderDark};
+        border-right-color: ${({ theme }) => theme.borderLightest};
+        border-bottom-color: ${({ theme }) => theme.borderLightest};
+      `
+    : css`
+        border-style: solid;
+        border-width: 2px;
+        border-left-color: ${({ theme }) => theme.borderLightest};
+        border-top-color: ${({ theme }) => theme.borderLightest};
+        border-right-color: ${({ theme }) => theme.borderDark};
+        border-bottom-color: ${({ theme }) => theme.borderDark};
+      `;

From 890573863fdca4db0804a816eaea702bb63777c4 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Tue, 21 May 2019 20:40:30 +0200
Subject: [PATCH 09/13]  added flat NumberField

---
 src/components/NumberField/NumberField.js     | 42 +++++++++++++++----
 .../NumberField/NumberField.stories.js        | 16 ++++++-
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/components/NumberField/NumberField.js b/src/components/NumberField/NumberField.js
index 6c6a2ca8..45883300 100644
--- a/src/components/NumberField/NumberField.js
+++ b/src/components/NumberField/NumberField.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import Button from "../Button/Button";
 
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { blockSizes } from "../common/system";
 import TextField from "../TextField/TextField";
 
@@ -20,18 +20,30 @@ const StyledButtonWrapper = styled.div`
   flex-direction: column;
   flex-wrap: nowrap;
   margin-left: 2px;
-  margin-top: -2px;
+  margin-top: ${({ variant }) => (variant === "default" ? "-2px" : "0")};
 `;
 const StyledButton = styled(Button)`
   height: 50%;
   width: 30px;
   padding: 0;
   flex-shrink: 0;
-  border-left-color: ${({ theme }) => theme.borderLight};
-  border-top-color: ${({ theme }) => theme.borderLight};
-  box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest},
-    inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
+
+  ${({ theme, isFlat }) =>
+    !isFlat &&
+    css`
+      border-left-color: ${({ theme }) => theme.borderLight};
+      border-top-color: ${({ theme }) => theme.borderLight};
+      box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest},
+        inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
+    `}
 `;
+const StyledFlatButton = styled(Button)`
+  height: 50%;
+  width: 30px;
+  padding: 0;
+  flex-shrink: 0;
+`;
+
 const StyledButtonIcon = styled.span`
   position: absolute;
   left: 50%;
@@ -50,10 +62,12 @@ const StyledButtonIcon = styled.span`
 
 class NumberField extends React.Component {
   static defaultProps = {
+    variant: "default",
     value: 0,
     disabled: false
   };
   static propTypes = {
+    variant: propTypes.oneOf(["default", "flat"]),
     onChange: propTypes.func.isRequired,
     value: propTypes.number.isRequired,
     min: propTypes.number,
@@ -95,6 +109,7 @@ class NumberField extends React.Component {
       disabled,
       disableKeyboardInput,
       className,
+      variant,
       width,
       style,
       shadow
@@ -107,6 +122,7 @@ class NumberField extends React.Component {
       >
         <TextField
           value={value}
+          variant={variant}
           onChange={
             disabled || disableKeyboardInput ? undefined : this.handleChange
           }
@@ -118,10 +134,20 @@ class NumberField extends React.Component {
           width="100%"
         />
         <StyledButtonWrapper>
-          <StyledButton disabled={disabled} onClick={() => this.add(1)}>
+          <StyledButton
+            isFlat={variant === "flat"}
+            variant={variant}
+            disabled={disabled}
+            onClick={() => this.add(1)}
+          >
             <StyledButtonIcon invert />
           </StyledButton>
-          <StyledButton disabled={disabled} onClick={() => this.add(-1)}>
+          <StyledButton
+            isFlat={variant === "flat"}
+            variant={variant}
+            disabled={disabled}
+            onClick={() => this.add(-1)}
+          >
             <StyledButtonIcon />
           </StyledButton>
         </StyledButtonWrapper>
diff --git a/src/components/NumberField/NumberField.stories.js b/src/components/NumberField/NumberField.stories.js
index 126e5ef2..4f4ab790 100644
--- a/src/components/NumberField/NumberField.stories.js
+++ b/src/components/NumberField/NumberField.stories.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import NumberField from "./NumberField";
+import { NumberField, Cutout } from "../";
 
 storiesOf("NumberField", module)
   .addDecorator(story => (
@@ -40,4 +40,18 @@ storiesOf("NumberField", module)
       value={1991}
       onChange={value => console.log(value)}
     />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3, marginBottom: "1rem" }}>
+        When you want to use NumberField on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <NumberField
+        variant="flat"
+        shadow={false}
+        value={1991}
+        onChange={value => console.log(value)}
+      />
+    </Cutout>
   ));

From d50fd07ccf1dc93e131c0092cfec2c9ccdb5d097 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Tue, 21 May 2019 20:45:04 +0200
Subject: [PATCH 10/13] fixed disabled menu button hover issue

---
 src/components/Button/Button.js         | 10 +++++-----
 src/components/Window/Window.stories.js |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index c7585a86..1a8f0e7d 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -38,22 +38,22 @@ const StyledButton = styled.button`
           ${createBoxStyles()};
           border: 2px solid transparent;
           &:hover {
-            ${createWellBorderStyles(false)}
+            ${({ isDisabled }) => !isDisabled && createWellBorderStyles(false)}
           }
           &:active {
-            ${createWellBorderStyles(true)}
+            ${({ isDisabled }) => !isDisabled && createWellBorderStyles(true)}
           }
           ${({ active }) => active && createBorderStyles(true)}
+          ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
         `
       : css`
           ${createBoxStyles()};
           ${({ active }) =>
             active ? createBorderStyles(true) : createBorderStyles(false)}
-          ${({ isDisabled }) =>
-            isDisabled && createDisabledTextStyles()}
-        &:active {
+          &:active {
             ${({ isDisabled }) => !isDisabled && createBorderStyles(true)}
           }
+          ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
         `}
   ${commonButtonStyles}
 `;
diff --git a/src/components/Window/Window.stories.js b/src/components/Window/Window.stories.js
index f275af91..3324d0d9 100644
--- a/src/components/Window/Window.stories.js
+++ b/src/components/Window/Window.stories.js
@@ -28,7 +28,7 @@ storiesOf("Window", module)
         <Button variant="menu" size="sm">
           Edit
         </Button>
-        <Button variant="menu" size="sm">
+        <Button variant="menu" size="sm" disabled>
           Save
         </Button>
       </Toolbar>

From a4baaff0293745c62a0037511bf56a1f890b5627 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Tue, 21 May 2019 21:00:45 +0200
Subject: [PATCH 11/13] changed WindowHeader size

---
 src/components/WindowHeader/WindowHeader.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/WindowHeader/WindowHeader.js b/src/components/WindowHeader/WindowHeader.js
index d2ce9171..c67efaff 100644
--- a/src/components/WindowHeader/WindowHeader.js
+++ b/src/components/WindowHeader/WindowHeader.js
@@ -5,11 +5,11 @@ import styled from "styled-components";
 import { blockSizes, padding } from "../common/system";
 
 const SlyledWindowHeader = styled.div`
-  height: ${blockSizes.md};
-  padding: 0 ${padding.md};
+  height: 33px;
+  line-height: 33px;
+  padding: 0 ${padding.sm};
   margin-right: 2px;
 
-  line-height: ${blockSizes.md};
   font-weight: bold;
   color: ${({ theme }) => theme.textInvert};
 

From d3487b80c3515de68b63784c3d6e198b0e92e693 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Wed, 22 May 2019 20:02:05 +0200
Subject: [PATCH 12/13] fixed theme not changing on certain stories

---
 src/components/Button/Button.stories.js       | 12 ++++---
 src/components/Checkbox/Checkbox.stories.js   | 24 ++++++-------
 src/components/Cutout/Cutout.stories.js       | 36 ++++++++++---------
 .../NumberField/NumberField.stories.js        | 24 ++++++-------
 src/components/Progress/Progress.stories.js   | 19 +++++-----
 src/components/Select/Select.stories.js       | 16 ++++-----
 src/components/TextArea/TextArea.stories.js   | 32 ++++++++---------
 src/components/TextField/TextField.stories.js | 30 ++++++++--------
 8 files changed, 94 insertions(+), 99 deletions(-)

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index cd928760..776ee083 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -3,11 +3,15 @@ import { withInfo } from "@storybook/addon-info";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import styled from "styled-components";
+import styled, {ThemeProvider} from "styled-components";
 
 import { Button, Window, WindowContent, Cutout, Toolbar } from "../";
 export const actions = { onClick: action("onClick") };
 
+const StyledCutout = styled(Cutout)`
+  background: ${({theme})=>theme.canvas};
+`;
+
 storiesOf("Button", module)
   .addDecorator(story => (
     <div
@@ -53,8 +57,8 @@ storiesOf("Button", module)
   .add("flat button", () => (
     <Window>
       <WindowContent>
-        <Cutout
-          style={{ padding: "1rem", background: "white", width: "300px" }}
+        <StyledCutout
+          style={{ padding: "1rem", width: "300px" }}
         >
           <p style={{ lineHeight: 1.3 }}>
             When you want to use Buttons on a light background (like scrollable
@@ -74,7 +78,7 @@ storiesOf("Button", module)
               </Button>
             </Toolbar>
           </div>
-        </Cutout>
+        </StyledCutout>
       </WindowContent>
     </Window>
   ));
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 3845d68a..29ff1131 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -1,18 +1,18 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
 
 import { Checkbox, Fieldset, Toolbar, Button, Cutout } from "../";
+
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("Checkbox", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("controlled group", () => <ControlledCheckboxGroupExample />)
   .add("uncontrolled", () => (
     <Checkbox
@@ -22,7 +22,7 @@ storiesOf("Checkbox", module)
     />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "1rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
@@ -42,7 +42,7 @@ storiesOf("Checkbox", module)
           disabled
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ));
 
 class ControlledCheckboxGroupExample extends React.Component {
diff --git a/src/components/Cutout/Cutout.stories.js b/src/components/Cutout/Cutout.stories.js
index 514f6747..b97d2c37 100644
--- a/src/components/Cutout/Cutout.stories.js
+++ b/src/components/Cutout/Cutout.stories.js
@@ -1,21 +1,23 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import Cutout from "./Cutout";
+import { Cutout, Window, WindowContent } from "../";
 
-storiesOf("Cutout", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
-  .add("default", () => (
-    <Cutout>
-      <h1>swag </h1>
-    </Cutout>
-  ));
+storiesOf("Cutout", module).add("default", () => (
+  <Window>
+    <WindowContent>
+      <Cutout style={{ width: "300px", height: "200px" }}>
+        <h1
+          style={{
+            fontFamily: "times new roman",
+            textAlign: "center",
+            fontSize: "3rem",
+            marginTop: "0.5rem"
+          }}
+        >
+          React95
+        </h1>
+      </Cutout>
+    </WindowContent>
+  </Window>
+));
diff --git a/src/components/NumberField/NumberField.stories.js b/src/components/NumberField/NumberField.stories.js
index 4f4ab790..23c0821d 100644
--- a/src/components/NumberField/NumberField.stories.js
+++ b/src/components/NumberField/NumberField.stories.js
@@ -1,19 +1,19 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
 
 import { NumberField, Cutout } from "../";
 
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
+
 storiesOf("NumberField", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => (
     <NumberField value={1991} onChange={value => console.log(value)} />
   ))
@@ -42,7 +42,7 @@ storiesOf("NumberField", module)
     />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3, marginBottom: "1rem" }}>
         When you want to use NumberField on a light background (like scrollable
         content), just use the flat variant:
@@ -53,5 +53,5 @@ storiesOf("NumberField", module)
         value={1991}
         onChange={value => console.log(value)}
       />
-    </Cutout>
+    </StyledCutout>
   ));
diff --git a/src/components/Progress/Progress.stories.js b/src/components/Progress/Progress.stories.js
index ce47728e..a9664eaa 100644
--- a/src/components/Progress/Progress.stories.js
+++ b/src/components/Progress/Progress.stories.js
@@ -1,18 +1,15 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import Progress from "./Progress";
+import styled from "styled-components";
 
+import { Progress } from "../";
+
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("Progress", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => <Progress percent={52} />)
   .add("no shadow", () => <Progress percent={52} shadow={false} />);
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
index 5fd3199c..af49dfc6 100644
--- a/src/components/Select/Select.stories.js
+++ b/src/components/Select/Select.stories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
+import styled from "styled-components";
 
 import { Select, Window, WindowContent, Cutout } from "../";
 
@@ -15,18 +16,13 @@ const items = [
   { value: 6, label: "🛌🏻 Snorlax" },
   { value: 7, label: "⛰ Geodude" }
 ];
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 const onChange = value => console.log(value);
 storiesOf("Select", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("fixed width", () => (
     <Select items={items} onChange={onChange} width={150} />
   ))
diff --git a/src/components/TextArea/TextArea.stories.js b/src/components/TextArea/TextArea.stories.js
index f59d45d6..6e561690 100644
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -2,22 +2,20 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import TextArea from "./TextArea";
-import { Button, Cutout } from "../";
+import styled from "styled-components";
 
-const onChange = e => console.log(e.target.value);
+import { TextArea, Button, Cutout } from "../";
 
+const onChange = e => console.log(e.target.value);
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("TextArea", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => (
     <TextArea
       defaultValue="User ReactGirl was the first one to find 🐛 here."
@@ -42,7 +40,7 @@ storiesOf("TextArea", module)
     <TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add text area on a light background (like scrollable
         content), just use the flat variant:
@@ -56,10 +54,10 @@ storiesOf("TextArea", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ))
   .add("flat disabled", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add text area on a light background (like scrollable
         content), just use the flat variant:
@@ -74,7 +72,7 @@ storiesOf("TextArea", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ));
 class ControlledTextAreaExample extends React.Component {
   state = {
diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
index 4c7bdc66..5cc09e02 100644
--- a/src/components/TextField/TextField.stories.js
+++ b/src/components/TextField/TextField.stories.js
@@ -1,23 +1,21 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import TextField from "./TextField";
+import styled from "styled-components";
 
-import { Button, Toolbar, Cutout } from "../";
+import { TextField, Button, Toolbar, Cutout } from "../";
 
 const onChange = e => console.log(e.target.value);
 
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("TextField", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => <TextField defaultValue="" onChange={onChange} />)
   .add("controlled", () => <ControlledTextFieldExample />)
   .add("no shadow", () => (
@@ -30,7 +28,7 @@ storiesOf("TextField", module)
     <TextField defaultValue="Custom width" width={150} onChange={onChange} />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
@@ -46,10 +44,10 @@ storiesOf("TextField", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ))
   .add("flat disabled", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
@@ -66,7 +64,7 @@ storiesOf("TextField", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ));
 
 class ControlledTextFieldExample extends React.Component {

From bdb691513f00300c0735cd01b6b1e4f585e86b4a Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Wed, 22 May 2019 20:56:50 +0200
Subject: [PATCH 13/13] removed obsolete variable declaration from Checkbox

---
 src/components/Checkbox/Checkbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index dd507246..d2a8e748 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -85,7 +85,7 @@ const Checkbox = ({
   shadow,
   ...otherProps
 }) => {
-  let Input, isChecked;
+  let Input;
 
   const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark;
   if (defaultChecked || checked === undefined) {