function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n    margin-right: 8px;\n    & svg {\n        top: 2px;\n        position: relative;\n    }\n    & path,\n    & .fill-color {\n        fill: ", ";\n    }\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n    width: 61px;\n    height: 32px;\n    margin: 4px 4px 16px 4px;\n    & path,\n    & .fill-color {\n        fill: ", ";\n    }\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n    height: 6px;\n    width: 300px;\n    padding: 0;\n\n    &::before {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        content: '';\n        background-color: ", ";\n        will-change: left, right;\n        animation: 2s ", " infinite;\n    }\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n    0% {\n        right: 100%;\n        left: 0%;\n    }\n\n    50% {\n        right: 0%;\n        left: 0%;\n    }\n\n    100% {\n        right: 0%;\n        left: 100%;\n    }\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n    cursor: pointer;\n    padding: 8px 12px;\n    margin: 2px 4px;\n    border-radius: 8px;\n    font-weight: bold;\n    transition: 0.15s;\n    border: 1px solid;\n    border-color: transparent;\n    &:hover {\n        background: ", ";\n    }\n    &.active,\n    &:active {\n        background: ", ";\n    }\n\n    &:focus,\n    &:active {\n        border-color: ", ";\n    }\n\n    &.alt {\n        background: ", ";\n\n        &:hover {\n            background: ", ";\n        }\n    }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    width: 200px;\n    min-height: 500px;\n    padding: 8px;\n    border-radius: 4px;\n    display: flex;\n    flex-direction: column;\n    color: ", ";\n\n    border: 1px solid ", ";\n    background: ", ";\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    background: ", ";\n    border-color: ", ";\n    color: ", ";\n\n    font-weight: bold;\n    border-radius: 6px;\n    font-size: ", ";\n\n    .btn:not(.is-disabled)&:hover {\n        background: ", ";\n        border-color: ", ";\n    }\n    .btn:not(.is-disabled)&:active {\n        background: ", ";\n        border-color: ", ";\n    }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    background: ", ";\n    border-color: ", ";\n    color: ", ";\n\n    font-weight: bold;\n    border-radius: 6px;\n    font-size: ", ";\n\n    .btn:not(.is-disabled)&:hover {\n        background: ", ";\n        border-color: ", ";\n    }\n    .btn:not(.is-disabled)&:active {\n        background: ", ";\n        border-color: ", ";\n    }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: inline-block;\n    background: ", ";\n    border: 1px solid ", ";\n    height: 1em;\n    width: 1em;\n    border-radius: 4px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/* eslint-disable no-underscore-dangle */
// @ts-nocheck
import React from 'react';
import styled, { ThemeProvider, keyframes } from 'styled-components';
import { color, text } from '@storybook/addon-knobs';
import * as vars from '../styles/variables';
import defaultTheme from '../styles/theme';
import BoxButton from '../components/button';
import BoxLogo from '../icon/logo/BoxLogo';
import { createTheme } from './createTheme';
import notes from './createTheme.stories.md';
import IconAllFiles from '../features/left-sidebar/icons/IconAllFiles';
import IconNotes from '../features/left-sidebar/icons/IconNotes';
import IconRecents from '../features/left-sidebar/icons/IconRecents';
import IconTrash from '../features/left-sidebar/icons/IconTrash';
import IconFavorites from '../features/left-sidebar/icons/IconFavorites';
import IconDevConsole from '../features/left-sidebar/icons/IconDevConsole';
var Swatch = styled.div(_templateObject(), function (p) {
  return p.color;
}, vars.bdlGray30);
var BaseButton = styled(BoxButton)(_templateObject2(), function (props) {
  return props.theme.base.buttonBackground;
}, function (props) {
  return props.theme.base.buttonBorder;
}, function (props) {
  return props.theme.base.buttonForeground;
}, vars.bdlFontSizeDejaBlue, function (props) {
  return props.theme.base.buttonBackgroundHover;
}, function (props) {
  return props.theme.base.buttonBorderHover;
}, function (props) {
  return props.theme.base.buttonBackgroundActive;
}, function (props) {
  return props.theme.base.buttonBorderActive;
});
var PrimaryButton = styled(BoxButton)(_templateObject3(), function (props) {
  return props.theme.primary.buttonBackground;
}, function (props) {
  return props.theme.primary.buttonBorder;
}, function (props) {
  return props.theme.primary.buttonForeground;
}, vars.bdlFontSizeDejaBlue, function (props) {
  return props.theme.primary.buttonBackgroundHover;
}, function (props) {
  return props.theme.primary.buttonBorderHover;
}, function (props) {
  return props.theme.primary.buttonBackgroundActive;
}, function (props) {
  return props.theme.primary.buttonBorderActive;
});
var ThemeDemo = styled.div(_templateObject4(), function (p) {
  return p.theme.primary.foreground;
}, function (p) {
  return p.theme.primary.border;
}, function (p) {
  return p.theme.primary.background;
});
var ThemeDemoMenuItem = styled.div(_templateObject5(), function (p) {
  return p.theme.primary.backgroundHover;
}, function (p) {
  return p.theme.primary.backgroundActive;
}, function (p) {
  return p.theme.primary.foreground;
}, function (p) {
  return p.theme.primary.backgroundHover;
}, function (p) {
  return p.theme.primary.backgroundActive;
});
var scroll = keyframes(_templateObject6());
var ThemeDemoProgressBar = styled.div(_templateObject7(), function (props) {
  return props.theme.primary.progressBarBackground;
}, scroll);
var ThemeDemoLogo = styled(BoxLogo)(_templateObject8(), function (props) {
  return props.theme.primary.foreground;
});
var ThemeDemoIcon = styled.span(_templateObject9(), function (props) {
  return props.theme.primary.foreground;
});
var Footer = styled.div(_templateObject10());
export var ThemeExample = function ThemeExample() {
  var colorText = text('Primary Color Hex');
  var colorMap = color('Primary Color', '#0061d5');
  var colorHex = /^#[0-9A-F]{6}$/i.test(colorText) ? colorText : colorMap;
  var theme = colorHex ? createTheme(colorHex) : defaultTheme;
  return React.createElement(ThemeProvider, {
    theme: theme
  }, React.createElement("div", {
    style: {
      float: 'right'
    }
  }, React.createElement("section", null, React.createElement("h4", null, "theme.primary"), Object.entries(theme.primary).filter(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 1),
        key = _ref2[0];

    return key !== '_debug';
  }).map(function (_ref3) {
    var _ref4 = _slicedToArray(_ref3, 2),
        key = _ref4[0],
        val = _ref4[1];

    return React.createElement("div", {
      key: key
    }, React.createElement(Swatch, {
      color: val
    }), " ", key, " ", React.createElement("code", null, val));
  }), React.createElement("span", null, "Theme Color Range: ", theme.primary._debug.colorRange), React.createElement("br", null), React.createElement("h4", null, "theme.base"), Object.entries(theme.base).map(function (_ref5) {
    var _ref6 = _slicedToArray(_ref5, 2),
        key = _ref6[0],
        val = _ref6[1];

    return React.createElement("div", {
      key: key
    }, React.createElement(Swatch, {
      color: val
    }), " ", key, " ", React.createElement("code", null, val));
  }))), React.createElement("div", {
    style: {
      marginLeft: -5
    }
  }, React.createElement(BaseButton, null, "Base"), React.createElement(PrimaryButton, null, "Primary")), React.createElement("br", null), React.createElement(ThemeDemoProgressBar, null), React.createElement("br", null), React.createElement("br", null), React.createElement(ThemeDemo, null, React.createElement(ThemeDemoLogo, null), React.createElement(ThemeDemoMenuItem, {
    className: "active"
  }, React.createElement(ThemeDemoIcon, null, React.createElement(IconAllFiles, null)), "All Files"), React.createElement(ThemeDemoMenuItem, null, React.createElement(ThemeDemoIcon, null, React.createElement(IconRecents, null)), "Recents"), React.createElement(ThemeDemoMenuItem, null, React.createElement(ThemeDemoIcon, null, React.createElement(IconFavorites, null)), "Favorites"), React.createElement(ThemeDemoMenuItem, null, React.createElement(ThemeDemoIcon, null, React.createElement(IconTrash, null)), "Trash"), React.createElement(Footer, null, React.createElement(ThemeDemoMenuItem, {
    className: "alt"
  }, React.createElement(ThemeDemoIcon, null, React.createElement(IconNotes, null)), "Notes"), React.createElement(ThemeDemoMenuItem, {
    className: "alt"
  }, React.createElement(ThemeDemoIcon, null, React.createElement(IconDevConsole, null)), "Developer Console"))), React.createElement("br", null), React.createElement("section", null, React.createElement("details", null, React.createElement("summary", null, "JSON Theme"), React.createElement("pre", null, React.createElement("code", null, JSON.stringify(theme, null, 2))))));
};
export default {
  title: 'Theming|Theme',
  component: ThemeExample,
  parameters: {
    notes: notes
  }
};
//# sourceMappingURL=createTheme.stories.js.map