"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ScreenSizes = exports.LightColors = exports.Documentation = exports.DesignTokensLightColors = exports.DesignTokensDarkColors = exports.DesignTokensA11yColors = exports.DarkColors = exports.ColorsSemantic = exports.ColorsPalette = void 0;
var _propOr2 = _interopRequireDefault(require("ramda/src/propOr"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
var _ = require("..");
var _defaultColors = _interopRequireDefault(require("./defaultColors"));
var _accessabilityColors = _interopRequireDefault(require("./accessabilityColors"));
var _Colors = _interopRequireDefault(require("./Colors.md"));
var _utils = require("../common/utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var Color = _styledComponents.default.div.withConfig({
  displayName: "Themestories__Color",
  componentId: "sc-skwibd-0"
})(["width:", "px;height:", "px;background-color:", ";border:1px solid #eee;"], function (p) {
  return p.theme.spacing.unit(14);
}, function (p) {
  return p.theme.spacing.unit(14);
}, function (p) {
  return p.$color;
});
var TokenColor = _styledComponents.default.div.withConfig({
  displayName: "Themestories__TokenColor",
  componentId: "sc-skwibd-1"
})(["width:60%;height:", "px;background-color:", ";border-radius:6px;margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(16);
}, function (p) {
  return p.$color;
}, function (p) {
  return p.theme.spacing.unit(5);
});
var ColorInArray = _styledComponents.default.div.withConfig({
  displayName: "Themestories__ColorInArray",
  componentId: "sc-skwibd-2"
})(["width:", "px;height:", "px;padding:0;background-color:", ";border:1px solid #eee;"], function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.$color;
});
var StyledFlexbox = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "Themestories__StyledFlexbox",
  componentId: "sc-skwibd-3"
})(["background:", ";color:", ";border-radius:6px;max-width:fit-content;padding:", "px ", "px;"], function (p) {
  return p.theme.colorTokens.accent.background_default;
}, function (p) {
  return p.theme.colorTokens.neutral.text_strong;
}, function (p) {
  return p.theme.spacing.unit(1);
}, function (p) {
  return p.theme.spacing.unit(2);
});
var StyledButton = (0, _styledComponents.default)(_.Button).withConfig({
  displayName: "Themestories__StyledButton",
  componentId: "sc-skwibd-4"
})(["color:inherit;&:hover{color:", ";}"], function (p) {
  return p.theme.colorTokens.accent.background_strong;
});
var colorWithValue = function colorWithValue(color) {
  return typeof color === 'string' ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(Color, {
    $color: color
  }), _react.default.createElement(_react.default.Fragment, null, color)) : color === null || color === void 0 ? void 0 : color.map(function (c) {
    return _react.default.createElement(_.Flexbox, {
      key: c,
      container: true,
      gap: 1
    }, _react.default.createElement(ColorInArray, {
      $color: c
    }), _react.default.createElement(_react.default.Fragment, null, c));
  });
};
var TokenName = function TokenName(_ref) {
  var title = _ref.title;
  var _useState = (0, _react.useState)('Copy to clipboard'),
    _useState2 = _slicedToArray(_useState, 2),
    label = _useState2[0],
    setLabel = _useState2[1];
  var copyTokenName = function copyTokenName(tokenName) {
    (0, _copyToClipboard.default)(tokenName);
    setLabel('Copied!');
  };
  return _react.default.createElement(StyledFlexbox, {
    container: true,
    alignItems: "center",
    gap: 2
  }, title, _react.default.createElement(_.Tooltip, {
    label: label,
    position: "right",
    invertedColors: true
  }, _react.default.createElement(StyledButton, {
    variant: "neutral",
    onClick: function onClick() {
      return copyTokenName(title);
    }
  }, _react.default.createElement(_.Icon.Copy16, {
    color: "inherit"
  }))));
};
var _default = exports.default = {
  title: 'Others / Theme'
};
var Documentation = exports.Documentation = function Documentation() {
  return _react.default.createElement(_reactMarkdown.default, null, _Colors.default);
};
var ColorsSemantic = exports.ColorsSemantic = {
  render: function render() {
    var _Object$keys;
    var a11yTheme = (0, _.createTheme)({
      a11yColors: true
    });
    var darkTheme = (0, _.createTheme)({
      darkColors: true
    });
    return _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, "Name"), _react.default.createElement(_.Th, null, "Default"), _react.default.createElement(_.Th, null, "A11y"), _react.default.createElement(_.Th, null, "Dark"))), _react.default.createElement(_.Tbody, null, (_Object$keys = Object.keys(_.theme.color)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (title) {
      return _react.default.createElement(_.Tr, {
        key: "theme-".concat(title)
      }, _react.default.createElement(_.Td, null, title), _react.default.createElement(_.Td, null, colorWithValue(_.theme.color[title])), _react.default.createElement(_.Td, null, colorWithValue(a11yTheme.color[title])), _react.default.createElement(_.Td, null, colorWithValue(darkTheme.color[title])));
    })));
  },
  name: 'Colors (semantic) deprecated'
};
var DesignTokensLightColors = exports.DesignTokensLightColors = function DesignTokensLightColors() {
  var _Object$keys2;
  var _createTheme = (0, _.createTheme)(),
    colorTokens = _createTheme.colorTokens;
  var flattenedColorTokens = (0, _utils.flattenObject)(colorTokens);
  return _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, _react.default.createElement(_.Box, {
    ml: 5
  }, "Color")), _react.default.createElement(_.Th, null, "Token name"), _react.default.createElement(_.Th, null, "Value"))), _react.default.createElement(_.Tbody, null, (_Object$keys2 = Object.keys(flattenedColorTokens)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.map(function (title) {
    return _react.default.createElement(_.Tr, {
      key: title
    }, _react.default.createElement(_.Td, null, _react.default.createElement(TokenColor, {
      $color: flattenedColorTokens[title]
    })), _react.default.createElement(_.Td, null, _react.default.createElement(TokenName, {
      title: title
    })), _react.default.createElement(_.Td, null, flattenedColorTokens[title]));
  })));
};
var DesignTokensA11yColors = exports.DesignTokensA11yColors = {
  render: function render() {
    var _Object$keys3;
    var _createTheme2 = (0, _.createTheme)({
        tokensTheme: 'a11y'
      }),
      colorTokens = _createTheme2.colorTokens;
    var flattenedColorTokens = (0, _utils.flattenObject)(colorTokens);
    return _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, _react.default.createElement(_.Box, {
      ml: 5
    }, "Color")), _react.default.createElement(_.Th, null, "Token name"), _react.default.createElement(_.Th, null, "Value"))), _react.default.createElement(_.Tbody, null, (_Object$keys3 = Object.keys(flattenedColorTokens)) === null || _Object$keys3 === void 0 ? void 0 : _Object$keys3.map(function (title) {
      return _react.default.createElement(_.Tr, {
        key: title
      }, _react.default.createElement(_.Td, null, _react.default.createElement(TokenColor, {
        $color: flattenedColorTokens[title]
      })), _react.default.createElement(_.Td, null, _react.default.createElement(TokenName, {
        title: title
      })), _react.default.createElement(_.Td, null, flattenedColorTokens[title]));
    })));
  },
  name: 'Design Tokens a11y Colors'
};
var DesignTokensDarkColors = exports.DesignTokensDarkColors = function DesignTokensDarkColors() {
  var _Object$keys4;
  var _createTheme3 = (0, _.createTheme)({
      tokensTheme: 'dark'
    }),
    colorTokens = _createTheme3.colorTokens;
  var flattenedColorTokens = (0, _utils.flattenObject)(colorTokens);
  return _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, _react.default.createElement(_.Box, {
    ml: 5
  }, "Color")), _react.default.createElement(_.Th, null, "Token name"), _react.default.createElement(_.Th, null, "Value"))), _react.default.createElement(_.Tbody, null, (_Object$keys4 = Object.keys(flattenedColorTokens)) === null || _Object$keys4 === void 0 ? void 0 : _Object$keys4.map(function (title) {
    return _react.default.createElement(_.Tr, {
      key: title
    }, _react.default.createElement(_.Td, null, _react.default.createElement(TokenColor, {
      $color: flattenedColorTokens[title]
    })), _react.default.createElement(_.Td, null, _react.default.createElement(TokenName, {
      title: title
    })), _react.default.createElement(_.Td, null, flattenedColorTokens[title]));
  })));
};
var LightColors = exports.LightColors = function LightColors() {
  var _Object$keys5;
  var a11yTheme = (0, _.createTheme)({
    a11yColors: true
  });
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Box, {
    py: 4
  }, _react.default.createElement(_.Typography, {
    type: "title1",
    as: "h1"
  }, "Light Colors"), _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Do not use this unless you have very specific needs for this. For example when you do not want the color to change on dark mode. For instance text on background image. ", _react.default.createElement("br", null), "Use like ", _react.default.createElement("pre", null, "theme.lightColor.text"))), _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, "Name"), _react.default.createElement(_.Th, null, "Default"), _react.default.createElement(_.Th, null, "A11y"))), _react.default.createElement(_.Tbody, null, (_Object$keys5 = Object.keys(_.theme.lightColor)) === null || _Object$keys5 === void 0 ? void 0 : _Object$keys5.map(function (title) {
    return _react.default.createElement(_.Tr, {
      key: "theme-".concat(title)
    }, _react.default.createElement(_.Td, null, title), _react.default.createElement(_.Td, null, colorWithValue(_.theme.lightColor[title])), _react.default.createElement(_.Td, null, colorWithValue(a11yTheme.lightColor[title])));
  }))));
};
var DarkColors = exports.DarkColors = function DarkColors() {
  var _Object$keys6;
  var a11yTheme = (0, _.createTheme)({
    a11yColors: true
  });
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Box, {
    py: 4
  }, _react.default.createElement(_.Typography, {
    type: "title1",
    as: "h1"
  }, "Dark Colors"), _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Do not use this unless you have very specific needs for this. For example when you do not want the color to change on light mode. For instance text on background image. ", _react.default.createElement("br", null), "Use like ", _react.default.createElement("pre", null, "theme.darkColor.text"))), _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, "Name"), _react.default.createElement(_.Th, null, "Default"), _react.default.createElement(_.Th, null, "A11y"))), _react.default.createElement(_.Tbody, null, (_Object$keys6 = Object.keys(_.theme.darkColor)) === null || _Object$keys6 === void 0 ? void 0 : _Object$keys6.map(function (title) {
    return _react.default.createElement(_.Tr, {
      key: "theme-".concat(title)
    }, _react.default.createElement(_.Td, null, title), _react.default.createElement(_.Td, null, colorWithValue(_.theme.darkColor[title])), _react.default.createElement(_.Td, null, colorWithValue(a11yTheme.darkColor[title])));
  }))));
};
var ColorsPalette = exports.ColorsPalette = {
  render: function render() {
    var _Object$keys7;
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("h1", null, "\u26A0\uFE0F Internal object, use colors (semantic)"), "(", _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, "Name"), _react.default.createElement(_.Th, null, "Default"), _react.default.createElement(_.Th, null, "A11y"), _react.default.createElement(_.Th, null, "Dark"))), _react.default.createElement(_.Tbody, null, (_Object$keys7 = Object.keys(_defaultColors.default)) === null || _Object$keys7 === void 0 || (_Object$keys7 = _Object$keys7.filter(function (title) {
      return title !== 'palettes';
    })) === null || _Object$keys7 === void 0 ? void 0 : _Object$keys7.map(function (title) {
      return _react.default.createElement(_.Tr, {
        key: "theme-".concat(title)
      }, _react.default.createElement(_.Td, null, title), _react.default.createElement(_.Td, null, colorWithValue(_defaultColors.default[title])), _react.default.createElement(_.Td, null, colorWithValue(_accessabilityColors.default[title])));
    }))), ");");
  },
  name: 'Colors (palette)'
};
var ScreenSizes = exports.ScreenSizes = {
  render: function render() {
    var _Object$entries;
    return _react.default.createElement(_.Table, null, _react.default.createElement(_.Thead, null, _react.default.createElement(_.Tr, null, _react.default.createElement(_.Th, null, "Name"), _react.default.createElement(_.Th, null, "Size"), _react.default.createElement(_.Th, null, "Offset"))), _react.default.createElement(_.Tbody, null, (_Object$entries = Object.entries(_.theme.breakpoints)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        title = _ref3[0],
        breakpoint = _ref3[1];
      return _react.default.createElement(_.Tr, {
        key: "breakpoints-".concat(title)
      }, _react.default.createElement(_.Td, null, title), _react.default.createElement(_.Td, null, _react.default.createElement("pre", null, (0, _propOr2.default)('', 'size', breakpoint))), _react.default.createElement(_.Td, null, _react.default.createElement("pre", null, (0, _propOr2.default)(0, 'offset', breakpoint), " units")));
    })));
  },
  name: 'Screen sizes'
};