@storybook/components 6.2.0-rc.9 → 6.2.0

package/dist/cjs/controls/Color.js

@@ -96,6 +96,7 @@ var PickerTooltip = (0, _theming.styled)(_lazyWithTooltip.WithTooltip)({
 });
 
 var TooltipContent = _theming.styled.div({
+  width: 200,
   margin: 5,
   '.react-colorful__saturation': {
     borderRadius: '4px 4px 0 0'
@@ -108,6 +109,13 @@ var TooltipContent = _theming.styled.div({
   }
 });
 
+var Note = (0, _theming.styled)(_TooltipNote.TooltipNote)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontFamily: theme.typography.fonts.base
+  };
+});
+
 var Swatches = _theming.styled.div({
   display: 'grid',
   gridTemplateColumns: 'repeat(9, 16px)',
@@ -117,9 +125,9 @@ var Swatches = _theming.styled.div({
   width: 200
 });
 
-var SwatchColor = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme,
-      active = _ref.active;
+var SwatchColor = _theming.styled.div(function (_ref2) {
+  var theme = _ref2.theme,
+      active = _ref2.active;
   return {
     width: 16,
     height: 16,
@@ -130,12 +138,12 @@ var SwatchColor = _theming.styled.div(function (_ref) {
 
 var swatchBackground = "url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')";
 
-var Swatch = function Swatch(_ref2) {
-  var value = _ref2.value,
-      active = _ref2.active,
-      onClick = _ref2.onClick,
-      style = _ref2.style,
-      props = _objectWithoutProperties(_ref2, ["value", "active", "onClick", "style"]);
+var Swatch = function Swatch(_ref3) {
+  var value = _ref3.value,
+      active = _ref3.active,
+      onClick = _ref3.onClick,
+      style = _ref3.style,
+      props = _objectWithoutProperties(_ref3, ["value", "active", "onClick", "style"]);
 
   var backgroundImage = "linear-gradient(".concat(value, ", ").concat(value, "), ").concat(swatchBackground, ", linear-gradient(#fff, #fff)");
   return /*#__PURE__*/_react.default.createElement(SwatchColor, _extends({}, props, {
@@ -148,13 +156,18 @@ var Swatch = function Swatch(_ref2) {
 };
 
 Swatch.displayName = "Swatch";
-var Input = (0, _theming.styled)(_form.Form.Input)({
-  width: '100%',
-  paddingLeft: 30,
-  paddingRight: 30
+var Input = (0, _theming.styled)(_form.Form.Input)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    width: '100%',
+    paddingLeft: 30,
+    paddingRight: 30,
+    boxSizing: 'border-box',
+    fontFamily: theme.typography.fonts.base
+  };
 });
-var ToggleIcon = (0, _theming.styled)(_icon.Icons)(function (_ref3) {
-  var theme = _ref3.theme;
+var ToggleIcon = (0, _theming.styled)(_icon.Icons)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     position: 'absolute',
     zIndex: 1,
@@ -163,6 +176,7 @@ var ToggleIcon = (0, _theming.styled)(_icon.Icons)(function (_ref3) {
     width: 20,
     height: 20,
     padding: 4,
+    boxSizing: 'border-box',
     cursor: 'pointer',
     color: theme.input.color
   };
@@ -199,12 +213,13 @@ var stringToArgs = function stringToArgs(value) {
 };
 
 var parseValue = function parseValue(value) {
-  var _ref10;
+  var _ref12;
 
   if (!value) return undefined;
+  var valid = true;
 
   if (RGB_REGEXP.test(value)) {
-    var _ref6;
+    var _ref8;
 
     var _stringToArgs = stringToArgs(value),
         _stringToArgs2 = _slicedToArray(_stringToArgs, 4),
@@ -213,21 +228,22 @@ var parseValue = function parseValue(value) {
         b = _stringToArgs2[2],
         a = _stringToArgs2[3];
 
-    var _ref4 = _colorConvert.default.rgb.hsl([r, g, b]) || [0, 0, 0],
-        _ref5 = _slicedToArray(_ref4, 3),
-        h = _ref5[0],
-        s = _ref5[1],
-        l = _ref5[2];
+    var _ref6 = _colorConvert.default.rgb.hsl([r, g, b]) || [0, 0, 0],
+        _ref7 = _slicedToArray(_ref6, 3),
+        h = _ref7[0],
+        s = _ref7[1],
+        l = _ref7[2];
 
-    return _ref6 = {
+    return _ref8 = {
+      valid: valid,
       value: value,
       keyword: _colorConvert.default.rgb.keyword([r, g, b]),
       colorSpace: ColorSpace.RGB
-    }, _defineProperty(_ref6, ColorSpace.RGB, value), _defineProperty(_ref6, ColorSpace.HSL, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref6, ColorSpace.HEX, "#".concat(_colorConvert.default.rgb.hex([r, g, b]).toLowerCase())), _ref6;
+    }, _defineProperty(_ref8, ColorSpace.RGB, value), _defineProperty(_ref8, ColorSpace.HSL, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref8, ColorSpace.HEX, "#".concat(_colorConvert.default.rgb.hex([r, g, b]).toLowerCase())), _ref8;
   }
 
   if (HSL_REGEXP.test(value)) {
-    var _ref9;
+    var _ref11;
 
     var _stringToArgs3 = stringToArgs(value),
         _stringToArgs4 = _slicedToArray(_stringToArgs3, 4),
@@ -236,17 +252,18 @@ var parseValue = function parseValue(value) {
         _l = _stringToArgs4[2],
         _a = _stringToArgs4[3];
 
-    var _ref7 = _colorConvert.default.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
-        _ref8 = _slicedToArray(_ref7, 3),
-        _r = _ref8[0],
-        _g = _ref8[1],
-        _b = _ref8[2];
+    var _ref9 = _colorConvert.default.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
+        _ref10 = _slicedToArray(_ref9, 3),
+        _r = _ref10[0],
+        _g = _ref10[1],
+        _b = _ref10[2];
 
-    return _ref9 = {
+    return _ref11 = {
+      valid: valid,
       value: value,
       keyword: _colorConvert.default.hsl.keyword([_h, _s2, _l]),
       colorSpace: ColorSpace.HSL
-    }, _defineProperty(_ref9, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref9, ColorSpace.HSL, value), _defineProperty(_ref9, ColorSpace.HEX, "#".concat(_colorConvert.default.hsl.hex([_h, _s2, _l]).toLowerCase())), _ref9;
+    }, _defineProperty(_ref11, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref11, ColorSpace.HSL, value), _defineProperty(_ref11, ColorSpace.HEX, "#".concat(_colorConvert.default.hsl.hex([_h, _s2, _l]).toLowerCase())), _ref11;
   }
 
   var plain = value.replace('#', '');
@@ -257,15 +274,27 @@ var parseValue = function parseValue(value) {
 
   var mapped = value;
   if (/[^#a-f0-9]/i.test(value)) mapped = plain;else if (HEX_REGEXP.test(value)) mapped = "#".concat(plain);
-  return _ref10 = {
+
+  if (mapped.startsWith('#')) {
+    valid = HEX_REGEXP.test(mapped);
+  } else {
+    try {
+      _colorConvert.default.keyword.hex(mapped);
+    } catch (e) {
+      valid = false;
+    }
+  }
+
+  return _ref12 = {
+    valid: valid,
     value: mapped,
     keyword: _colorConvert.default.rgb.keyword(rgb),
     colorSpace: ColorSpace.HEX
-  }, _defineProperty(_ref10, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref10, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref10, ColorSpace.HEX, mapped), _ref10;
+  }, _defineProperty(_ref12, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref12, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref12, ColorSpace.HEX, mapped), _ref12;
 };
 
 var getRealValue = function getRealValue(value, color, colorSpace) {
-  if (!value) return fallbackColor[colorSpace];
+  if (!value || !(color !== null && color !== void 0 && color.valid)) return fallbackColor[colorSpace];
   if (colorSpace !== ColorSpace.HEX) return (color === null || color === void 0 ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
 
   if (!color.hex.startsWith('#')) {
@@ -340,7 +369,7 @@ var id = function id(value) {
 };
 
 var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
-  var _useState7 = (0, _react.useState)(currentColor ? [currentColor] : []),
+  var _useState7 = (0, _react.useState)(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []),
       _useState8 = _slicedToArray(_useState7, 2),
       selectedColors = _useState8[0],
       setSelectedColors = _useState8[1];
@@ -356,7 +385,7 @@ var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
     return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
   }, [presetColors, selectedColors]);
   var addPreset = (0, _react.useCallback)(function (color) {
-    if (!(color !== null && color !== void 0 && color[colorSpace])) return;
+    if (!(color !== null && color !== void 0 && color.valid)) return;
     if (presets.some(function (preset) {
       return id(preset[colorSpace]) === id(color[colorSpace]);
     })) return;
@@ -370,13 +399,13 @@ var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
   };
 };
 
-var ColorControl = function ColorControl(_ref11) {
-  var initialValue = _ref11.value,
-      onChange = _ref11.onChange,
-      onFocus = _ref11.onFocus,
-      onBlur = _ref11.onBlur,
-      presetColors = _ref11.presetColors,
-      startOpen = _ref11.startOpen;
+var ColorControl = function ColorControl(_ref13) {
+  var initialValue = _ref13.value,
+      onChange = _ref13.onChange,
+      onFocus = _ref13.onFocus,
+      onBlur = _ref13.onBlur,
+      presetColors = _ref13.presetColors,
+      startOpen = _ref13.startOpen;
 
   var _useColorInput = useColorInput(initialValue, (0, _throttle.default)(onChange, 200)),
       value = _useColorInput.value,
@@ -399,7 +428,7 @@ var ColorControl = function ColorControl(_ref11) {
       return addPreset(color);
     },
     tooltip: /*#__PURE__*/_react.default.createElement(TooltipContent, null, /*#__PURE__*/_react.default.createElement(Picker, {
-      color: realValue,
+      color: realValue === 'transparent' ? '#000000' : realValue,
       onChange: updateValue,
       onFocus: onFocus,
       onBlur: onBlur
@@ -407,7 +436,7 @@ var ColorControl = function ColorControl(_ref11) {
       return /*#__PURE__*/_react.default.createElement(_lazyWithTooltip.WithTooltip, {
         key: preset.value,
         hasChrome: false,
-        tooltip: /*#__PURE__*/_react.default.createElement(_TooltipNote.TooltipNote, {
+        tooltip: /*#__PURE__*/_react.default.createElement(Note, {
           note: preset.keyword || preset.value
         })
       }, /*#__PURE__*/_react.default.createElement(Swatch, {

package/dist/cjs/controls/Date.js

@@ -47,9 +47,7 @@ var parseDate = function parseDate(value) {
       day = _value$split2[2];
 
   var result = new Date();
-  result.setFullYear(parseInt(year, 10));
-  result.setMonth(parseInt(month, 10) - 1);
-  result.setDate(parseInt(day, 10));
+  result.setFullYear(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
   return result;
 };
 
@@ -131,9 +129,7 @@ var DateControl = function DateControl(_ref2) {
   var onDateChange = function onDateChange(e) {
     var parsed = parseDate(e.target.value);
     var result = new Date(value);
-    result.setFullYear(parsed.getFullYear());
-    result.setMonth(parsed.getMonth());
-    result.setDate(parsed.getDate());
+    result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
     var time = result.getTime();
     if (time) onChange(time);
     setValid(!!time);

package/dist/cjs/controls/Object.js

@@ -2,6 +2,8 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+require("core-js/modules/es.array.includes.js");
+
 require("core-js/modules/es.function.name.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -322,7 +324,7 @@ var ObjectControl = function ObjectControl(_ref7) {
     valid: parseError ? 'error' : null
   });
 
-  return /*#__PURE__*/_react.default.createElement(Wrapper, null, hasData && /*#__PURE__*/_react.default.createElement(RawButton, {
+  return /*#__PURE__*/_react.default.createElement(Wrapper, null, hasData && ['Object', 'Array'].includes((0, _reactEditableJsonTree.getObjectType)(data)) && /*#__PURE__*/_react.default.createElement(RawButton, {
     onClick: function onClick() {
       return setShowRaw(function (v) {
         return !v;

package/dist/cjs/controls/react-editable-json-tree/index.js

@@ -29,6 +29,12 @@ Object.defineProperty(exports, "UPDATE_DELTA_TYPE", {
     return _deltaTypes.UPDATE_DELTA_TYPE;
   }
 });
+Object.defineProperty(exports, "getObjectType", {
+  enumerable: true,
+  get: function get() {
+    return _objectTypes.getObjectType;
+  }
+});
 Object.defineProperty(exports, "DATA_TYPES", {
   enumerable: true,
   get: function get() {

package/dist/cjs/html.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  components: true,
+  resetComponents: true
+};
+Object.defineProperty(exports, "components", {
+  enumerable: true,
+  get: function get() {
+    return _index.components;
+  }
+});
+Object.defineProperty(exports, "resetComponents", {
+  enumerable: true,
+  get: function get() {
+    return _index.resetComponents;
+  }
+});
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
+
+var _DocumentFormatting = require("./typography/DocumentFormatting");
+
+Object.keys(_DocumentFormatting).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DocumentFormatting[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DocumentFormatting[key];
+    }
+  });
+});
+
+var _index = require("./index");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var deprecatedHtmlEndpoint = (0, _utilDeprecate.default)(function () {}, (0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    The entry point '@storybook/components/html' is deprecated. Please use '@storybook/components' directly instead.\n\n    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybook-components-html-entry-point\n  "]))));
+deprecatedHtmlEndpoint();

package/dist/cjs/tooltip/TooltipNote.js

@@ -1,5 +1,9 @@
 "use strict";
 
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.object.keys.js");
+
 require("core-js/modules/es.string.bold.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -13,6 +17,10 @@ var _theming = require("@storybook/theming");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var Note = _theming.styled.div(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -32,8 +40,10 @@ var Note = _theming.styled.div(function (_ref) {
 });
 
 var TooltipNote = function TooltipNote(_ref2) {
-  var note = _ref2.note;
-  return /*#__PURE__*/_react.default.createElement(Note, null, note);
+  var note = _ref2.note,
+      props = _objectWithoutProperties(_ref2, ["note"]);
+
+  return /*#__PURE__*/_react.default.createElement(Note, props, note);
 };
 
 exports.TooltipNote = TooltipNote;

package/dist/esm/controls/Color.js

@@ -56,6 +56,7 @@ var PickerTooltip = styled(WithTooltip)({
   left: 4
 });
 var TooltipContent = styled.div({
+  width: 200,
   margin: 5,
   '.react-colorful__saturation': {
     borderRadius: '4px 4px 0 0'
@@ -67,6 +68,12 @@ var TooltipContent = styled.div({
     borderRadius: '0 0 4px 4px'
   }
 });
+var Note = styled(TooltipNote)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontFamily: theme.typography.fonts.base
+  };
+});
 var Swatches = styled.div({
   display: 'grid',
   gridTemplateColumns: 'repeat(9, 16px)',
@@ -75,9 +82,9 @@ var Swatches = styled.div({
   marginTop: 5,
   width: 200
 });
-var SwatchColor = styled.div(function (_ref) {
-  var theme = _ref.theme,
-      active = _ref.active;
+var SwatchColor = styled.div(function (_ref2) {
+  var theme = _ref2.theme,
+      active = _ref2.active;
   return {
     width: 16,
     height: 16,
@@ -87,12 +94,12 @@ var SwatchColor = styled.div(function (_ref) {
 });
 var swatchBackground = "url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')";
 
-var Swatch = function Swatch(_ref2) {
-  var value = _ref2.value,
-      active = _ref2.active,
-      onClick = _ref2.onClick,
-      style = _ref2.style,
-      props = _objectWithoutProperties(_ref2, ["value", "active", "onClick", "style"]);
+var Swatch = function Swatch(_ref3) {
+  var value = _ref3.value,
+      active = _ref3.active,
+      onClick = _ref3.onClick,
+      style = _ref3.style,
+      props = _objectWithoutProperties(_ref3, ["value", "active", "onClick", "style"]);
 
   var backgroundImage = "linear-gradient(".concat(value, ", ").concat(value, "), ").concat(swatchBackground, ", linear-gradient(#fff, #fff)");
   return /*#__PURE__*/React.createElement(SwatchColor, _extends({}, props, {
@@ -105,13 +112,18 @@ var Swatch = function Swatch(_ref2) {
 };
 
 Swatch.displayName = "Swatch";
-var Input = styled(Form.Input)({
-  width: '100%',
-  paddingLeft: 30,
-  paddingRight: 30
+var Input = styled(Form.Input)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    width: '100%',
+    paddingLeft: 30,
+    paddingRight: 30,
+    boxSizing: 'border-box',
+    fontFamily: theme.typography.fonts.base
+  };
 });
-var ToggleIcon = styled(Icons)(function (_ref3) {
-  var theme = _ref3.theme;
+var ToggleIcon = styled(Icons)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     position: 'absolute',
     zIndex: 1,
@@ -120,6 +132,7 @@ var ToggleIcon = styled(Icons)(function (_ref3) {
     width: 20,
     height: 20,
     padding: 4,
+    boxSizing: 'border-box',
     cursor: 'pointer',
     color: theme.input.color
   };
@@ -156,12 +169,13 @@ var stringToArgs = function stringToArgs(value) {
 };
 
 var parseValue = function parseValue(value) {
-  var _ref10;
+  var _ref12;
 
   if (!value) return undefined;
+  var valid = true;
 
   if (RGB_REGEXP.test(value)) {
-    var _ref6;
+    var _ref8;
 
     var _stringToArgs = stringToArgs(value),
         _stringToArgs2 = _slicedToArray(_stringToArgs, 4),
@@ -170,21 +184,22 @@ var parseValue = function parseValue(value) {
         b = _stringToArgs2[2],
         a = _stringToArgs2[3];
 
-    var _ref4 = convert.rgb.hsl([r, g, b]) || [0, 0, 0],
-        _ref5 = _slicedToArray(_ref4, 3),
-        h = _ref5[0],
-        s = _ref5[1],
-        l = _ref5[2];
+    var _ref6 = convert.rgb.hsl([r, g, b]) || [0, 0, 0],
+        _ref7 = _slicedToArray(_ref6, 3),
+        h = _ref7[0],
+        s = _ref7[1],
+        l = _ref7[2];
 
-    return _ref6 = {
+    return _ref8 = {
+      valid: valid,
       value: value,
       keyword: convert.rgb.keyword([r, g, b]),
       colorSpace: ColorSpace.RGB
-    }, _defineProperty(_ref6, ColorSpace.RGB, value), _defineProperty(_ref6, ColorSpace.HSL, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref6, ColorSpace.HEX, "#".concat(convert.rgb.hex([r, g, b]).toLowerCase())), _ref6;
+    }, _defineProperty(_ref8, ColorSpace.RGB, value), _defineProperty(_ref8, ColorSpace.HSL, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref8, ColorSpace.HEX, "#".concat(convert.rgb.hex([r, g, b]).toLowerCase())), _ref8;
   }
 
   if (HSL_REGEXP.test(value)) {
-    var _ref9;
+    var _ref11;
 
     var _stringToArgs3 = stringToArgs(value),
         _stringToArgs4 = _slicedToArray(_stringToArgs3, 4),
@@ -193,17 +208,18 @@ var parseValue = function parseValue(value) {
         _l = _stringToArgs4[2],
         _a = _stringToArgs4[3];
 
-    var _ref7 = convert.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
-        _ref8 = _slicedToArray(_ref7, 3),
-        _r = _ref8[0],
-        _g = _ref8[1],
-        _b = _ref8[2];
+    var _ref9 = convert.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
+        _ref10 = _slicedToArray(_ref9, 3),
+        _r = _ref10[0],
+        _g = _ref10[1],
+        _b = _ref10[2];
 
-    return _ref9 = {
+    return _ref11 = {
+      valid: valid,
       value: value,
       keyword: convert.hsl.keyword([_h, _s2, _l]),
       colorSpace: ColorSpace.HSL
-    }, _defineProperty(_ref9, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref9, ColorSpace.HSL, value), _defineProperty(_ref9, ColorSpace.HEX, "#".concat(convert.hsl.hex([_h, _s2, _l]).toLowerCase())), _ref9;
+    }, _defineProperty(_ref11, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref11, ColorSpace.HSL, value), _defineProperty(_ref11, ColorSpace.HEX, "#".concat(convert.hsl.hex([_h, _s2, _l]).toLowerCase())), _ref11;
   }
 
   var plain = value.replace('#', '');
@@ -211,15 +227,27 @@ var parseValue = function parseValue(value) {
   var hsl = convert.rgb.hsl(rgb);
   var mapped = value;
   if (/[^#a-f0-9]/i.test(value)) mapped = plain;else if (HEX_REGEXP.test(value)) mapped = "#".concat(plain);
-  return _ref10 = {
+
+  if (mapped.startsWith('#')) {
+    valid = HEX_REGEXP.test(mapped);
+  } else {
+    try {
+      convert.keyword.hex(mapped);
+    } catch (e) {
+      valid = false;
+    }
+  }
+
+  return _ref12 = {
+    valid: valid,
     value: mapped,
     keyword: convert.rgb.keyword(rgb),
     colorSpace: ColorSpace.HEX
-  }, _defineProperty(_ref10, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref10, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref10, ColorSpace.HEX, mapped), _ref10;
+  }, _defineProperty(_ref12, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref12, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref12, ColorSpace.HEX, mapped), _ref12;
 };
 
 var getRealValue = function getRealValue(value, color, colorSpace) {
-  if (!value) return fallbackColor[colorSpace];
+  if (!value || !(color !== null && color !== void 0 && color.valid)) return fallbackColor[colorSpace];
   if (colorSpace !== ColorSpace.HEX) return (color === null || color === void 0 ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
 
   if (!color.hex.startsWith('#')) {
@@ -294,7 +322,7 @@ var id = function id(value) {
 };
 
 var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
-  var _useState7 = useState(currentColor ? [currentColor] : []),
+  var _useState7 = useState(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []),
       _useState8 = _slicedToArray(_useState7, 2),
       selectedColors = _useState8[0],
       setSelectedColors = _useState8[1];
@@ -310,7 +338,7 @@ var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
     return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
   }, [presetColors, selectedColors]);
   var addPreset = useCallback(function (color) {
-    if (!(color !== null && color !== void 0 && color[colorSpace])) return;
+    if (!(color !== null && color !== void 0 && color.valid)) return;
     if (presets.some(function (preset) {
       return id(preset[colorSpace]) === id(color[colorSpace]);
     })) return;
@@ -324,13 +352,13 @@ var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
   };
 };
 
-export var ColorControl = function ColorControl(_ref11) {
-  var initialValue = _ref11.value,
-      onChange = _ref11.onChange,
-      onFocus = _ref11.onFocus,
-      onBlur = _ref11.onBlur,
-      presetColors = _ref11.presetColors,
-      startOpen = _ref11.startOpen;
+export var ColorControl = function ColorControl(_ref13) {
+  var initialValue = _ref13.value,
+      onChange = _ref13.onChange,
+      onFocus = _ref13.onFocus,
+      onBlur = _ref13.onBlur,
+      presetColors = _ref13.presetColors,
+      startOpen = _ref13.startOpen;
 
   var _useColorInput = useColorInput(initialValue, throttle(onChange, 200)),
       value = _useColorInput.value,
@@ -353,7 +381,7 @@ export var ColorControl = function ColorControl(_ref11) {
       return addPreset(color);
     },
     tooltip: /*#__PURE__*/React.createElement(TooltipContent, null, /*#__PURE__*/React.createElement(Picker, {
-      color: realValue,
+      color: realValue === 'transparent' ? '#000000' : realValue,
       onChange: updateValue,
       onFocus: onFocus,
       onBlur: onBlur
@@ -361,7 +389,7 @@ export var ColorControl = function ColorControl(_ref11) {
       return /*#__PURE__*/React.createElement(WithTooltip, {
         key: preset.value,
         hasChrome: false,
-        tooltip: /*#__PURE__*/React.createElement(TooltipNote, {
+        tooltip: /*#__PURE__*/React.createElement(Note, {
           note: preset.keyword || preset.value
         })
       }, /*#__PURE__*/React.createElement(Swatch, {

package/dist/esm/controls/Date.js

@@ -28,9 +28,7 @@ var parseDate = function parseDate(value) {
       day = _value$split2[2];
 
   var result = new Date();
-  result.setFullYear(parseInt(year, 10));
-  result.setMonth(parseInt(month, 10) - 1);
-  result.setDate(parseInt(day, 10));
+  result.setFullYear(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
   return result;
 };
 
@@ -111,9 +109,7 @@ export var DateControl = function DateControl(_ref2) {
   var onDateChange = function onDateChange(e) {
     var parsed = parseDate(e.target.value);
     var result = new Date(value);
-    result.setFullYear(parsed.getFullYear());
-    result.setMonth(parsed.getMonth());
-    result.setDate(parsed.getDate());
+    result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
     var time = result.getTime();
     if (time) onChange(time);
     setValid(!!time);

package/dist/esm/controls/Object.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.function.name.js";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -17,7 +18,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import React, { useCallback, useMemo, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming'; // @ts-ignore
 
-import { JsonTree } from './react-editable-json-tree';
+import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { Form } from '../form';
 import { Icons } from '../icon/icon';
 import { IconButton } from '../bar/button';
@@ -294,7 +295,7 @@ export var ObjectControl = function ObjectControl(_ref7) {
     placeholder: "Enter JSON string",
     valid: parseError ? 'error' : null
   });
-  return /*#__PURE__*/React.createElement(Wrapper, null, hasData && /*#__PURE__*/React.createElement(RawButton, {
+  return /*#__PURE__*/React.createElement(Wrapper, null, hasData && ['Object', 'Array'].includes(getObjectType(data)) && /*#__PURE__*/React.createElement(RawButton, {
     onClick: function onClick() {
       return setShowRaw(function (v) {
         return !v;

package/dist/esm/controls/react-editable-json-tree/index.js

@@ -252,6 +252,7 @@ JsonTree.defaultProps = {
   fallback: null
 };
 export { JsonTree };
+export { getObjectType };
 export { ADD_DELTA_TYPE };
 export { REMOVE_DELTA_TYPE };
 export { UPDATE_DELTA_TYPE };

package/dist/esm/html.js

@@ -0,0 +1,10 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import dedent from 'ts-dedent';
+import deprecate from 'util-deprecate';
+var deprecatedHtmlEndpoint = deprecate(function () {}, dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    The entry point '@storybook/components/html' is deprecated. Please use '@storybook/components' directly instead.\n\n    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybook-components-html-entry-point\n  "]))));
+deprecatedHtmlEndpoint();
+export * from './typography/DocumentFormatting';
+export { components, resetComponents } from './index';

package/dist/esm/tooltip/TooltipNote.js

@@ -1,4 +1,11 @@
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.string.bold.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import React from 'react';
 import { styled } from '@storybook/theming';
 var Note = styled.div(function (_ref) {
@@ -19,7 +26,9 @@ var Note = styled.div(function (_ref) {
   };
 });
 export var TooltipNote = function TooltipNote(_ref2) {
-  var note = _ref2.note;
-  return /*#__PURE__*/React.createElement(Note, null, note);
+  var note = _ref2.note,
+      props = _objectWithoutProperties(_ref2, ["note"]);
+
+  return /*#__PURE__*/React.createElement(Note, props, note);
 };
 TooltipNote.displayName = "TooltipNote";

package/dist/ts3.4/html.d.ts

@@ -0,0 +1,2 @@
+export * from './typography/DocumentFormatting';
+export { components, resetComponents } from './index';

package/dist/ts3.9/html.d.ts

@@ -0,0 +1,2 @@
+export * from './typography/DocumentFormatting';
+export { components, resetComponents } from './index';

package/html.d.ts

@@ -0,0 +1 @@
+export * from './dist/ts3.9/html.d';

package/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/html');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.2.0-rc.9",
+  "version": "6.2.0",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -37,9 +37,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.2.0-rc.9",
+    "@storybook/client-logger": "6.2.0",
     "@storybook/csf": "0.0.1",
-    "@storybook/theming": "6.2.0-rc.9",
+    "@storybook/theming": "6.2.0",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -58,7 +58,8 @@
     "react-syntax-highlighter": "^13.5.3",
     "react-textarea-autosize": "^8.3.0",
     "regenerator-runtime": "^0.13.7",
-    "ts-dedent": "^2.0.0"
+    "ts-dedent": "^2.0.0",
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "css": "^3.0.0",
@@ -71,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b100a45b69db3c2b9c4cd06e68d9035a769f592d"
+  "gitHead": "829c72e4374888ca74ed4e68e0c1de940ac18163"
 }