Socket
Socket
Sign inDemoInstall

storybook-color-picker

Package Overview
Dependencies
129
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.2 to 3.1.0

dist/cjs/hooks/index.js
dist/cjs/hooks/useOutsideClick/useOutsideClick.js
dist/cjs/hooks/useTheme/constants.js
dist/cjs/hooks/useTheme/useTheme.js
dist/esm/hooks/index.js
dist/esm/hooks/useOutsideClick/useOutsideClick.js
dist/esm/hooks/useTheme/constants.js
dist/esm/hooks/useTheme/useTheme.js
dist/ts/hooks/index.d.ts
dist/ts/hooks/useOutsideClick/useOutsideClick.d.ts
dist/ts/hooks/useTheme/constants.d.ts
dist/ts/hooks/useTheme/useTheme.d.ts

10

CHANGELOG.md
# Changelog
### v3.1.0
20.11.2022.
Dependencies updated
**Added**
* Theme support
### v3.0.1

@@ -4,0 +14,0 @@

19

dist/cjs/colorPicker/argsList/arg.js

@@ -7,26 +7,15 @@ "use strict";

exports["default"] = void 0;
var _react = require("@emotion/react");
var _react = _interopRequireDefault(require("react"));
var _checkBox = _interopRequireDefault(require("../checkBox/checkBox"));
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 Arg = function Arg(_ref) {
var item = _ref.item,
itemProps = _ref.itemProps;
itemProps = _ref.itemProps;
var isSelected = itemProps.selected.includes(item);
return (0, _react.jsx)("div", {
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0.5em;\n border-bottom: 1px solid #eee;\n\n &:hover {\n cursor: pointer;\n background-color: #f5f5f5;\n border-bottom: 1px solid #f5f5f5;\n }\n "])))
}, (0, _react.jsx)(_checkBox["default"], {
return /*#__PURE__*/_react["default"].createElement(_checkBox["default"], {
label: item,
checked: isSelected
}));
});
};
var _default = Arg;
exports["default"] = _default;

23

dist/cjs/colorPicker/argsList/argsList.js

@@ -7,35 +7,20 @@ "use strict";

exports["default"] = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _pluralize = _interopRequireDefault(require("pluralize"));
var _dropdown = _interopRequireDefault(require("../dropdown/dropdown"));
var _arg = _interopRequireDefault(require("./arg"));
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) } })); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
var ArgsList = function ArgsList(_ref) {
var args = _ref.args,
selected = _ref.selected,
onChange = _ref.onChange;
selected = _ref.selected,
onChange = _ref.onChange;
var handleChange = (0, _react.useCallback)(function (item) {

@@ -45,5 +30,3 @@ var index = selected.findIndex(function (a) {

});
var newArgs = _toConsumableArray(selected);
if (index >= 0) {

@@ -54,3 +37,2 @@ newArgs.splice(index, 1);

}
onChange(newArgs);

@@ -72,4 +54,3 @@ }, [selected, onChange]);

};
var _default = ArgsList;
exports["default"] = _default;

24

dist/cjs/colorPicker/checkBox/checkBox.js

@@ -7,31 +7,27 @@ "use strict";

exports["default"] = void 0;
var _react = require("@emotion/react");
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _templateObject, _templateObject2, _templateObject3;
var _hooks = require("../../hooks");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var CheckBox = function CheckBox(_ref) {
var label = _ref.label,
checked = _ref.checked,
onClick = _ref.onClick;
checked = _ref.checked,
onClick = _ref.onClick;
var _useTheme = (0, _hooks.useTheme)(),
theme = _useTheme.theme;
return (0, _react.jsx)("div", {
onClick: onClick,
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n &:hover {\n cursor: pointer;\n }\n "])))
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n &:hover {\n cursor: pointer;\n }\n "])))
}, (0, _react.jsx)("div", {
css: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid #777;\n border-radius: 0.2em;\n width: 1.3em;\n height: 1.3em;\n margin-right: 0.5em;\n "])))
css: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n border: ", ";\n border-radius: 0.2em;\n width: 1.3em;\n height: 1.3em;\n margin-right: 0.5em;\n "])), "1px solid ".concat(theme.border.secondary))
}, (0, _react.jsx)(_reactFontawesome.FontAwesomeIcon, {
icon: _freeSolidSvgIcons.faCheck,
color: checked ? '#777' : 'transparent'
css: (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n path {\n color: ", ";\n }\n "])), checked ? "".concat(theme.text.primary) : 'transparent')
})), label && (0, _react.jsx)("p", {
css: (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 1.1em;\n line-height: 1em;\n margin: 0;\n color: #000;\n white-space: nowrap;\n "])))
css: (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 1.1em;\n line-height: 1em;\n margin: 0;\n white-space: nowrap;\n "])))
}, label));
};
var _default = CheckBox;
exports["default"] = _default;

59

dist/cjs/colorPicker/colorPicker.js

@@ -7,65 +7,43 @@ "use strict";

exports["default"] = void 0;
var _react = require("react");
var _api = require("@storybook/api");
var _react2 = require("@emotion/react");
var _utils = require("../utils");
var _constants = require("../constants");
var _argsList = _interopRequireDefault(require("./argsList/argsList"));
var _palettesList = _interopRequireDefault(require("./palettesList/palettesList"));
var _checkBox = _interopRequireDefault(require("./checkBox/checkBox"));
var _palette = _interopRequireDefault(require("./palette"));
var _hooks = require("../hooks");
var _templateObject, _templateObject2;
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) } })); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
var initialAddonState = {
storyStates: {}
};
var ColorPicker = function ColorPicker() {
var _addonState$storyStat, _storyPalettes$palett2, _storyState$controls;
var _useTheme = (0, _hooks.useTheme)(),
commonTheme = _useTheme.commonTheme,
theme = _useTheme.theme;
var colorPicker = (0, _api.useParameter)('colorPicker') || {};
var primaryPalette = colorPicker.primaryPalette,
palettes = colorPicker.palettes,
additionalControls = colorPicker.applyColorTo,
disableDefaultPalettes = colorPicker.disableDefaultPalettes;
palettes = colorPicker.palettes,
additionalControls = colorPicker.applyColorTo,
disableDefaultPalettes = colorPicker.disableDefaultPalettes;
var storybookApi = (0, _api.useStorybookApi)();
var state = (0, _api.useStorybookState)();
var _useAddonState = (0, _api.useAddonState)(_constants.ADDON_ID, initialAddonState),
_useAddonState2 = _slicedToArray(_useAddonState, 2),
addonState = _useAddonState2[0],
setAddonState = _useAddonState2[1];
_useAddonState2 = _slicedToArray(_useAddonState, 2),
addonState = _useAddonState2[0],
setAddonState = _useAddonState2[1];
var storyId = state.storyId;

@@ -76,7 +54,5 @@ var storyState = addonState === null || addonState === void 0 ? void 0 : (_addonState$storyStat = addonState.storyStates) === null || _addonState$storyStat === void 0 ? void 0 : _addonState$storyStat[storyId];

var _storyPalettes$palett, _argTypes$parameters;
if (storyPalettes !== null && storyPalettes !== void 0 && (_storyPalettes$palett = storyPalettes.palettes) !== null && _storyPalettes$palett !== void 0 && _storyPalettes$palett.length) {
return;
}
var validatedStoryPalettes = (0, _utils.getColorPalettes)(disableDefaultPalettes, palettes);

@@ -87,7 +63,5 @@ var initialStoryPalettes = {

};
if (validatedStoryPalettes.invalidPalettes.length) {
(0, _utils.reportInvalidPalettes)(validatedStoryPalettes.invalidPalettes);
}
var primaryPaletteIndex = (0, _utils.findPrimaryPaletteIndex)(initialStoryPalettes);

@@ -97,3 +71,2 @@ var primaryPaletteName = (0, _utils.getPrimaryPaletteName)(initialStoryPalettes, primaryPaletteIndex);

var controls = (0, _utils.getColorControls)((_argTypes$parameters = argTypes.parameters) === null || _argTypes$parameters === void 0 ? void 0 : _argTypes$parameters.argTypes, additionalControls);
var newState = _objectSpread(_objectSpread({}, addonState), {}, {

@@ -110,8 +83,7 @@ storyStates: _objectSpread(_objectSpread({}, addonState.storyStates), {}, _defineProperty({}, storyId, {

});
setAddonState(newState); // eslint-disable-next-line react-hooks/exhaustive-deps
setAddonState(newState);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [colorPicker]);
var handleArgsChange = (0, _react.useCallback)(function (newArgs) {
var newState = _objectSpread({}, addonState);
var selectedControls = newArgs;

@@ -123,3 +95,2 @@ newState.storyStates[storyId].selectedControls = selectedControls;

var newState = _objectSpread({}, addonState);
newState.storyStates[storyId] = _objectSpread(_objectSpread({}, newState.storyStates[storyId]), {}, {

@@ -132,3 +103,2 @@ currentPalette: newCurrent

var newState = _objectSpread({}, addonState);
var copy = !newState.storyStates[storyId].copyOnClick;

@@ -138,11 +108,9 @@ newState.storyStates[storyId].copyOnClick = copy;

}, [addonState, setAddonState, storyId]);
if (!(storyPalettes !== null && storyPalettes !== void 0 && (_storyPalettes$palett2 = storyPalettes.palettes) !== null && _storyPalettes$palett2 !== void 0 && _storyPalettes$palett2.length) || (storyState === null || storyState === void 0 ? void 0 : storyState.currentPalette) === undefined) {
return null;
}
var currentPalette = storyPalettes === null || storyPalettes === void 0 ? void 0 : storyPalettes.palettes[storyState.currentPalette].palette;
return (0, _react2.jsx)("div", {
id: "color-picker",
css: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: #fff;\n border-radius: 10px;\n max-height: 50vh;\n max-width: 70vw;\n padding: 0 1em 1em 1em;\n overflow-x: hidden;\n overflow-y: scroll;\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: #ccc;\n border-radius: 4px;\n &:hover {\n background-color: #666;\n }\n }\n @media (max-width: 800px) {\n max-width: 95vw;\n padding: 0 0.5em 0.5em 0.5em;\n }\n "])))
css: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n * {\n color: ", ";\n border-color: ", ";\n }\n\n background: ", ";\n border-radius: 8px;\n max-height: 50vh;\n max-width: 70vw;\n padding: 0 1em 1em 1em;\n overflow-x: hidden;\n overflow-y: scroll;\n &::-webkit-scrollbar {\n width: 0.5em;\n height: 0.5em;\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 0.25em;\n &:hover {\n background-color: ", ";\n }\n }\n @media (max-width: 800px) {\n max-width: 95vw;\n padding: 0 0.5em 0.5em 0.5em;\n }\n "])), "".concat(theme.text.primary), "".concat(theme.border.primary), "".concat(theme.background.main), "".concat(commonTheme.scrollBar.track), "".concat(commonTheme.scrollBar.thumb), "".concat(commonTheme.scrollBar.thumbHover))
}, (0, _react2.jsx)("div", {

@@ -166,4 +134,3 @@ css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 2em;\n margin: 1em 0;\n flex-wrap: wrap-reverse;\n "])))

};
var _default = ColorPicker;
exports["default"] = _default;

25

dist/cjs/colorPicker/colors.js

@@ -7,27 +7,26 @@ "use strict";

exports["default"] = void 0;
var _react = require("@emotion/react");
var _shade = _interopRequireDefault(require("./shade"));
var _react2 = require("react");
var _hooks = require("../hooks");
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 Colors = function Colors(_ref) {
var colors = _ref.colors;
var shades = colors.values.map(function (shade, i) {
return (0, _react.jsx)(_shade["default"], {
shade: shade,
key: "Shade_".concat(shade.value, "_").concat(i)
var _useTheme = (0, _hooks.useTheme)(),
theme = _useTheme.theme;
var shades = (0, _react2.useMemo)(function () {
return colors.values.map(function (shade, i) {
return (0, _react.jsx)(_shade["default"], {
shade: shade,
key: "Shade_".concat(shade.value, "_").concat(i)
});
});
});
}, [colors]);
return (0, _react.jsx)("div", {
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n height: 100%;\n border-bottom: 1px solid #eee;\n "])))
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n height: 100%;\n border-bottom: ", ";\n "])), "1px solid ".concat(theme.border.tertiary))
}, shades);
};
var _default = Colors;
exports["default"] = _default;

59

dist/cjs/colorPicker/dropdown/dropdown.js

@@ -7,59 +7,40 @@ "use strict";

exports["default"] = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _useOutsideClick = _interopRequireDefault(require("../../hooks/useOutsideClick"));
var _hooks = require("../../hooks");
var _list = _interopRequireDefault(require("./list"));
var _templateObject, _templateObject2, _templateObject3;
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) } })); }
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
var Dropdown = function Dropdown(_ref) {
var label = _ref.label,
items = _ref.items,
itemProps = _ref.itemProps,
itemComponent = _ref.itemComponent,
closeOnItemClick = _ref.closeOnItemClick,
renderList = _ref.renderList,
onLabelClick = _ref.onLabelClick,
onItemClick = _ref.onItemClick;
items = _ref.items,
itemProps = _ref.itemProps,
itemComponent = _ref.itemComponent,
closeOnItemClick = _ref.closeOnItemClick,
renderList = _ref.renderList,
onLabelClick = _ref.onLabelClick,
onItemClick = _ref.onItemClick;
var _useTheme = (0, _hooks.useTheme)(),
theme = _useTheme.theme;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
(0, _react.useEffect)(function () {
var colorPicker = document.getElementById('color-picker');
var handleScroll = function handleScroll() {
setActive(false);
};
if (colorPicker && active) {
colorPicker.addEventListener('scroll', handleScroll);
}
return function () {

@@ -74,3 +55,3 @@ if (colorPicker) {

}, []);
var wrapperRef = (0, _useOutsideClick["default"])(closeList);
var wrapperRef = (0, _hooks.useOutsideClick)(closeList);
var toggleActive = (0, _react.useCallback)(function (e) {

@@ -81,11 +62,8 @@ e.preventDefault();

}, [active, onLabelClick]);
var handleItemClick = function handleItemClick(item, index) {
var handleItemClick = (0, _react.useCallback)(function (item, index) {
if (closeOnItemClick) {
closeList();
}
onItemClick(item, index);
};
}, [closeOnItemClick, closeList, onItemClick]);
var showList = renderList === 'always' || renderList === '>1' && items.length > 1;

@@ -99,3 +77,3 @@ return (0, _react2.jsx)("div", {

onClick: toggleActive,
css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: #fff;\n border: none;\n font-size: 1.1em;\n padding: 0;\n\n ", "\n "])), renderList && "&:hover {\n cursor: pointer;\n }")
css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: transparent;\n border: none;\n font-size: 1.1em;\n padding: 0;\n\n ", "\n "])), renderList && "&:hover {\n cursor: pointer;\n }")
}, (0, _react2.jsx)("p", {

@@ -106,3 +84,3 @@ "data-testid": "dropdownLabel",

icon: _freeSolidSvgIcons.faChevronDown,
color: "#777",
color: theme.text.primary,
"data-testid": "dropdownChevron"

@@ -118,3 +96,2 @@ })), showList && (0, _react2.jsx)(_list["default"], {

};
Dropdown.defaultProps = {

@@ -121,0 +98,0 @@ label: null,

63

dist/cjs/colorPicker/dropdown/list.js

@@ -7,29 +7,34 @@ "use strict";

exports["default"] = void 0;
var _react = require("@emotion/react");
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
var _hooks = require("../../hooks");
var _templateObject, _templateObject2, _templateObject3;
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 List = function List(props) {
var ItemComponent = props.itemComponent;
var getListItems = function getListItems() {
return props.items.map(function (item, i) {
var onItemClick = function onItemClick() {
props.onItemClick(item, i);
var List = function List(_ref) {
var active = _ref.active,
items = _ref.items,
itemProps = _ref.itemProps,
itemComponent = _ref.itemComponent,
onItemClick = _ref.onItemClick,
testId = _ref.testId;
var _useTheme = (0, _hooks.useTheme)(),
theme = _useTheme.theme,
commonTheme = _useTheme.commonTheme;
var ItemComponent = itemComponent;
var getListItems = (0, _react.useCallback)(function () {
return items.map(function (item, i) {
var handleClick = function handleClick() {
onItemClick(item, i);
};
return (0, _react.jsx)("div", {
var backgroundColor = itemProps.current === i ? theme.background.selected : 'transparent';
var backgroundColorHover = itemProps.current === i ? theme.background.selected : theme.background.hover;
return (0, _react2.jsx)("div", {
key: i,
onClick: onItemClick,
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: #fff;\n padding: 0;\n border: none;\n width: 100%;\n display: block;\n "])))
}, (0, _react.jsx)(ItemComponent, {
onClick: handleClick,
css: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n padding: 0;\n border: none;\n width: 100%;\n display: block;\n padding: 0.5em;\n border-bottom: ", ";\n\n &:hover {\n cursor: pointer;\n background-color: ", ";\n }\n\n &:last-of-type {\n border: none;\n }\n "])), "".concat(backgroundColor), "1px solid ".concat(theme.border.tertiary), backgroundColorHover)
}, (0, _react2.jsx)(ItemComponent, {
item: item,
itemProps: props.itemProps,
itemProps: itemProps,
index: i,

@@ -39,15 +44,13 @@ key: i

});
};
return (0, _react.jsx)("div", {
css: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n "]))),
"data-testid": props.testId
}, (0, _react.jsx)(_reactAnimateHeight["default"], {
height: props.active ? 'auto' : 0
}, (0, _react.jsx)("div", {
css: (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 4px 1px #eee;\n background: #fff;\n border-radius: 0.5em;\n margin: 0.25em;\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: auto;\n &::-webkit-scrollbar {\n width: 0.5em;\n height: 0.5em;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: #ccc;\n border-radius: 0.25em;\n &:hover {\n background-color: #666;\n }\n }\n "])))
}, [items, itemProps, theme, ItemComponent, onItemClick]);
return (0, _react2.jsx)("div", {
css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n "]))),
"data-testid": testId
}, (0, _react2.jsx)(_reactAnimateHeight["default"], {
height: active ? 'auto' : 0
}, (0, _react2.jsx)("div", {
css: (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: ", ";\n background-color: ", ";\n border-radius: 0.5em;\n margin: 0.25em;\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: auto;\n &::-webkit-scrollbar {\n width: 0.5em;\n height: 0.5em;\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 0.25em;\n &:hover {\n background-color: ", ";\n }\n }\n "])), "0px 0px 4px 1px ".concat(theme.shadow.primary), "".concat(theme.background.secondary), "".concat(commonTheme.scrollBar.track), "".concat(commonTheme.scrollBar.thumb), "".concat(commonTheme.scrollBar.thumbHover))
}, getListItems())));
};
var _default = List;
exports["default"] = _default;

31

dist/cjs/colorPicker/palette.js

@@ -7,26 +7,24 @@ "use strict";

exports["default"] = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _colors = _interopRequireDefault(require("./colors"));
var _hooks = require("../hooks");
var _templateObject, _templateObject2;
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 Palette = function Palette(_ref) {
var palette = _ref.palette;
var colors = palette.map(function (c, i) {
return (0, _react2.jsx)(_react.Fragment, {
key: "Colors_".concat(c.label, "_").concat(i)
}, (0, _react2.jsx)("div", {
css: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n font-size: 1.1em;\n padding-right: 0.5em;\n text-transform: capitalize;\n border-bottom: 1px solid #eee;\n "])))
}, c.label || 'Unnamed'), (0, _react2.jsx)(_colors["default"], {
colors: c
}));
});
var _useTheme = (0, _hooks.useTheme)(),
theme = _useTheme.theme;
var colors = (0, _react.useMemo)(function () {
return palette.map(function (c, i) {
return (0, _react2.jsx)(_react.Fragment, {
key: "Colors_".concat(c.label, "_").concat(i)
}, (0, _react2.jsx)("p", {
css: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n font-size: 1.1em;\n padding-right: 0.5em;\n margin: 0;\n text-transform: capitalize;\n border-bottom: ", ";\n "])), "1px solid ".concat(theme.background.tertiary))
}, c.label || 'Unnamed'), (0, _react2.jsx)(_colors["default"], {
colors: c
}));
});
}, [palette, theme]);
return (0, _react2.jsx)("div", {

@@ -36,4 +34,3 @@ css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: grid;\n grid-template-columns: minmax(70px, min-content) auto;\n grid-row-gap: 5px;\n "])))

};
var _default = Palette;
exports["default"] = _default;

18

dist/cjs/colorPicker/palettesList/palette.js

@@ -7,25 +7,21 @@ "use strict";

exports["default"] = void 0;
var _react = require("@emotion/react");
var _hooks = require("../../hooks");
var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Palette = function Palette(_ref) {
var item = _ref.item,
itemProps = _ref.itemProps,
index = _ref.index;
itemProps = _ref.itemProps,
index = _ref.index;
var _useTheme = (0, _hooks.useTheme)(),
theme = _useTheme.theme;
if (!item.palette) {
return null;
}
var backgroundColor = itemProps.current === index ? '#eee' : '#fff';
var color = itemProps.current === index ? theme.text.selected : theme.text.primary;
return (0, _react.jsx)("p", {
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n transition: transform 0.25s;\n border-bottom: 1px solid #eee;\n padding: 0.25em 1em;\n font-size: 1.1em;\n background-color: ", ";\n white-space: nowrap;\n\n &:hover {\n cursor: pointer;\n background-color: #f5f5f5;\n border-bottom: 1px solid #f5f5f5;\n }\n "])), backgroundColor)
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 1.1em;\n white-space: nowrap;\n color: ", ";\n "])), color)
}, item.name || "Palette No".concat(index + 1));
};
var _default = Palette;
exports["default"] = _default;

13

dist/cjs/colorPicker/palettesList/palettesList.js
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -9,19 +8,12 @@ value: true

exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _dropdown = _interopRequireDefault(require("../dropdown/dropdown"));
var _palette = _interopRequireDefault(require("./palette"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var PalettesList = function PalettesList(_ref) {
var palettes = _ref.palettes,
current = _ref.current,
onChange = _ref.onChange;
current = _ref.current,
onChange = _ref.onChange;
var handleChange = (0, _react.useCallback)(function (item, index) {

@@ -44,4 +36,3 @@ onChange(index);

};
var _default = PalettesList;
exports["default"] = _default;

60

dist/cjs/colorPicker/shade.js

@@ -7,70 +7,44 @@ "use strict";

exports["default"] = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _api = require("@storybook/api");
var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
var _constants = require("../constants");
var _shadeTooltip = _interopRequireDefault(require("./shadeTooltip"));
var _reactPopperTooltip = require("react-popper-tooltip");
require("react-popper-tooltip/dist/styles.css");
var _templateObject, _templateObject2;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
var Shade = function Shade(_ref) {
var _addonState$storyStat;
var shade = _ref.shade;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var _useArgs = (0, _api.useArgs)(),
_useArgs2 = _slicedToArray(_useArgs, 2),
args = _useArgs2[0],
updateArgs = _useArgs2[1];
_useArgs2 = _slicedToArray(_useArgs, 2),
args = _useArgs2[0],
updateArgs = _useArgs2[1];
var state = (0, _api.useStorybookState)();
var _useAddonState = (0, _api.useAddonState)(_constants.ADDON_ID),
_useAddonState2 = _slicedToArray(_useAddonState, 1),
addonState = _useAddonState2[0];
_useAddonState2 = _slicedToArray(_useAddonState, 1),
addonState = _useAddonState2[0];
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
copied = _useState2[0],
setCopied = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
copied = _useState2[0],
setCopied = _useState2[1];
var _usePopperTooltip = (0, _reactPopperTooltip.usePopperTooltip)({
placement: 'top'
}),
getArrowProps = _usePopperTooltip.getArrowProps,
getTooltipProps = _usePopperTooltip.getTooltipProps,
setTooltipRef = _usePopperTooltip.setTooltipRef,
setTriggerRef = _usePopperTooltip.setTriggerRef,
visible = _usePopperTooltip.visible;
placement: 'top'
}),
getArrowProps = _usePopperTooltip.getArrowProps,
getTooltipProps = _usePopperTooltip.getTooltipProps,
setTooltipRef = _usePopperTooltip.setTooltipRef,
setTriggerRef = _usePopperTooltip.setTriggerRef,
visible = _usePopperTooltip.visible;
var storyId = state.storyId;

@@ -80,3 +54,2 @@ var storyState = addonState === null || addonState === void 0 ? void 0 : (_addonState$storyStat = addonState.storyStates) === null || _addonState$storyStat === void 0 ? void 0 : _addonState$storyStat[storyId];

var timeout;
if (copied) {

@@ -87,3 +60,2 @@ timeout = setTimeout(function () {

}
return function () {

@@ -99,3 +71,2 @@ clearTimeout(timeout);

updateArgs(newArgs);
if (storyState.copyOnClick) {

@@ -123,4 +94,3 @@ setCopied(true);

};
var _default = Shade;
exports["default"] = _default;

13

dist/cjs/colorPicker/shadeTooltip.js

@@ -7,24 +7,19 @@ "use strict";

exports["default"] = void 0;
var _react = require("@emotion/react");
var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var ShadeTooltip = function ShadeTooltip(_ref) {
var shade = _ref.shade,
copied = _ref.copied;
copied = _ref.copied;
var value = shade.value,
label = shade.label,
textColor = shade.textColor;
label = shade.label,
textColor = shade.textColor;
var text = label ? "".concat(label, ": ").concat(value) : value;
return (0, _react.jsx)("div", {
css: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0.2em 0.5em;\n border-radius: 0.3em;\n background-color: ", ";\n "])), value)
}, (0, _react.jsx)("p", {
}, (0, _react.jsx)("span", {
css: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n white-space: nowrap;\n font-size: 1.2em;\n line-height: 0;\n color: ", ";\n "])), textColor)
}, copied ? 'Copied' : text));
};
var _default = ShadeTooltip;
exports["default"] = _default;

26

dist/cjs/colorPickerIcon.js
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -9,37 +8,21 @@ value: true

exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _api = require("@storybook/api");
var _components = require("@storybook/components");
var _constants = require("./constants");
var _colorPicker = _interopRequireDefault(require("./colorPicker/colorPicker"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
var ColorPickerIcon = function ColorPickerIcon() {
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
isActive = _useState2[0],
setIsActive = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
isActive = _useState2[0],
setIsActive = _useState2[1];
var colorPicker = (0, _api.useParameter)('colorPicker');

@@ -54,7 +37,5 @@ var colorPalettes = (0, _api.useParameter)('colorPalettes');

}, [isActive]);
if (!(palettes !== null && palettes !== void 0 && palettes.length) && disableDefaultPalettes) {
return null;
}
return /*#__PURE__*/_react["default"].createElement(_components.WithTooltip, {

@@ -75,4 +56,3 @@ placement: "bottom",

};
var _default = ColorPickerIcon;
exports["default"] = _default;

4

dist/cjs/constants/index.js

@@ -7,9 +7,5 @@ "use strict";

exports.defaultPalettes = exports.TOOL_ID = exports.ADDON_ID = void 0;
var _basic = _interopRequireDefault(require("./defaultPalettes/basic"));
var _colorful = _interopRequireDefault(require("./defaultPalettes/colorful"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var defaultPalettes = [_basic["default"], _colorful["default"]];

@@ -16,0 +12,0 @@ exports.defaultPalettes = defaultPalettes;

2

dist/cjs/index.js

@@ -7,8 +7,6 @@ "use strict";

exports["default"] = void 0;
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
var _default = {};
exports["default"] = _default;

7

dist/cjs/register.js
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
var _addons = _interopRequireWildcard(require("@storybook/addons"));
var _colorPickerIcon = _interopRequireDefault(require("./colorPickerIcon"));
var _constants = require("./constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
_addons["default"].register(_constants.ADDON_ID, function () {

@@ -18,0 +11,0 @@ _addons["default"].add(_constants.TOOL_ID, {

10

dist/cjs/utils/deprecation/index.js

@@ -7,3 +7,2 @@ "use strict";

exports.getDeprecationMessage = exports.deprecationWarning = exports["default"] = void 0;
var getDeprecationMessage = function getDeprecationMessage(deprecated, removedIn, alternative) {

@@ -15,16 +14,12 @@ var message1 = "Color picker warning: ".concat(deprecated, " is DEPRECATED");

};
exports.getDeprecationMessage = getDeprecationMessage;
var deprecationWarning = function deprecationWarning(message) {
if (process.env.NODE_ENV === 'production') {
return;
} // eslint-disable-next-line no-console
}
// eslint-disable-next-line no-console
console.warn(message);
};
exports.deprecationWarning = deprecationWarning;
var warnDeprecated = function warnDeprecated(deprecated, removedIn, alternative) {

@@ -34,4 +29,3 @@ var message = getDeprecationMessage(deprecated, removedIn, alternative);

};
var _default = warnDeprecated;
exports["default"] = _default;

2

dist/cjs/utils/findPrimaryPaletteIndex/index.js

@@ -7,3 +7,2 @@ "use strict";

exports["default"] = void 0;
var findPrimaryPaletteIndex = function findPrimaryPaletteIndex(palettes) {

@@ -15,4 +14,3 @@ var index = palettes.palettes.findIndex(function (palette) {

};
var _default = findPrimaryPaletteIndex;
exports["default"] = _default;

8

dist/cjs/utils/getColorControls/index.js

@@ -7,13 +7,9 @@ "use strict";

exports["default"] = void 0;
var getColorControls = function getColorControls(argTypes, additionalControls) {
var argTypesArray = Object.entries(argTypes);
if (!argTypesArray.length) {
return;
}
var filteredArgTypes = argTypesArray.filter(function (arg) {
var _arg$1$control;
return ((_arg$1$control = arg[1].control) === null || _arg$1$control === void 0 ? void 0 : _arg$1$control.type) === 'color';

@@ -24,3 +20,2 @@ });

});
if (additionalControls !== null && additionalControls !== void 0 && additionalControls.length) {

@@ -32,3 +27,2 @@ var storyControls = argTypesArray.map(function (arg) {

var _argTypes$a$control;
return storyControls.includes(a) && ((_argTypes$a$control = argTypes[a].control) === null || _argTypes$a$control === void 0 ? void 0 : _argTypes$a$control.type) === 'text';

@@ -39,7 +33,5 @@ });

}
return colorControls;
};
var _default = getColorControls;
exports["default"] = _default;

16

dist/cjs/utils/getColorPalettes/index.js

@@ -7,21 +7,11 @@ "use strict";

exports["default"] = void 0;
var _transformPalette = _interopRequireDefault(require("../transformPalette"));
var _constants = require("../../constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
var getColorPalettes = function getColorPalettes(disableDefaultPalettes, customPalettes) {

@@ -34,3 +24,2 @@ var transformedPalettes = {

var transformed = (0, _transformPalette["default"])(p);
if (transformed.palette.length) {

@@ -42,3 +31,2 @@ transformedPalettes.palettes.push({

}
if (transformed.invalidColors.length) {

@@ -51,13 +39,9 @@ transformedPalettes.invalidPalettes.push({

});
if (!disableDefaultPalettes) {
var _transformedPalettes$;
(_transformedPalettes$ = transformedPalettes.palettes).push.apply(_transformedPalettes$, _toConsumableArray(_constants.defaultPalettes));
}
return transformedPalettes;
};
var _default = getColorPalettes;
exports["default"] = _default;

4

dist/cjs/utils/getPrimaryPaletteName/index.js

@@ -7,3 +7,2 @@ "use strict";

exports["default"] = void 0;
var getPrimaryPaletteName = function getPrimaryPaletteName(statePalettes, primaryPaletteIndex) {

@@ -13,11 +12,8 @@ if (!(statePalettes !== null && statePalettes !== void 0 && statePalettes.palettes.length)) {

}
if (!primaryPaletteIndex) {
return statePalettes.palettes[0].name;
}
return statePalettes.primaryPalette;
};
var _default = getPrimaryPaletteName;
exports["default"] = _default;

8

dist/cjs/utils/index.js

@@ -48,17 +48,9 @@ "use strict";

});
var _getColorControls = _interopRequireDefault(require("./getColorControls"));
var _findPrimaryPaletteIndex = _interopRequireDefault(require("./findPrimaryPaletteIndex"));
var _getPrimaryPaletteName = _interopRequireDefault(require("./getPrimaryPaletteName"));
var _transformPalette = _interopRequireDefault(require("./transformPalette"));
var _getColorPalettes = _interopRequireDefault(require("./getColorPalettes"));
var _deprecation = _interopRequireDefault(require("./deprecation"));
var _reportInvalidPalettes = _interopRequireDefault(require("./reportInvalidPalettes"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

17

dist/cjs/utils/joinStringList/index.js

@@ -7,17 +7,11 @@ "use strict";

exports["default"] = void 0;
var _pluralize = _interopRequireDefault(require("pluralize"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var joinStringList = function joinStringList(strings, limit, suffixText) {
var count = strings.length;
if (limit === 0) {
return count.toString();
}
var stringArray = strings.flatMap(function (string, i) {
var _getLastStringFromLim;
var getLastStringFromLimit = function getLastStringFromLimit() {

@@ -27,20 +21,14 @@ if (limit === undefined || limit > count) {

}
return limit - 1;
};
var lastString = (_getLastStringFromLim = getLastStringFromLimit()) !== null && _getLastStringFromLim !== void 0 ? _getLastStringFromLim : count - 1;
if (limit && i + 1 > limit) {
return '';
}
if (lastString === 0 && count === 1) {
return string;
}
if (i < lastString - 1) {
return "".concat(string, ", ");
}
if (i === lastString) {

@@ -50,14 +38,10 @@ var otherCount = limit ? count - limit : 0;

var returnString = "".concat(string, " and ").concat(otherCount, " ").concat(otherText);
if (lastString === 0) {
return returnString;
}
if (otherCount > 0) {
return ", ".concat(returnString);
}
return " and ".concat(string);
}
return string;

@@ -67,4 +51,3 @@ });

};
var _default = joinStringList;
exports["default"] = _default;

3

dist/cjs/utils/reportInvalidPalettes/index.js

@@ -7,5 +7,3 @@ "use strict";

exports["default"] = void 0;
var _messages = require("../transformPalette/messages");
var reportInvalidPalettes = function reportInvalidPalettes(palettes) {

@@ -22,4 +20,3 @@ palettes.forEach(function (palette) {

};
var _default = reportInvalidPalettes;
exports["default"] = _default;

6

dist/cjs/utils/transformPalette/index.js

@@ -7,9 +7,5 @@ "use strict";

exports["default"] = void 0;
var _transformArrayPalette = _interopRequireDefault(require("./transformation/transformArrayPalette"));
var _transformObjectPalette = _interopRequireDefault(require("./transformation/transformObjectPalette"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var transformPalette = function transformPalette(paletteObj) {

@@ -19,7 +15,5 @@ if (Array.isArray(paletteObj.palette)) {

}
return (0, _transformObjectPalette["default"])(paletteObj);
};
var _default = transformPalette;
exports["default"] = _default;

7

dist/cjs/utils/transformPalette/messages.js

@@ -7,8 +7,6 @@ "use strict";

exports.warn = exports.getInvalidPaletteMessage = void 0;
var _joinStringList = _interopRequireDefault(require("../joinStringList"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/* eslint-disable no-console */
/* eslint-disable no-console */
var getInvalidPaletteMessage = function getInvalidPaletteMessage(invalidColors, paletteName) {

@@ -18,9 +16,6 @@ var list = (0, _joinStringList["default"])(invalidColors, 2, 'other invalid color');

};
exports.getInvalidPaletteMessage = getInvalidPaletteMessage;
var warn = function warn(message) {
return console.warn("%cColor picker warning%c: ".concat(message), 'color: red');
};
exports.warn = warn;

6

dist/cjs/utils/transformPalette/transformation/getTextColor/index.js

@@ -7,7 +7,4 @@ "use strict";

exports["default"] = void 0;
var _chromaJs = _interopRequireDefault(require("chroma-js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var getTextColor = function getTextColor(color) {

@@ -17,10 +14,7 @@ var chromaColor = (0, _chromaJs["default"])(color);

var mixRatio = Math.pow(1 - alpha, 2);
var whitened = _chromaJs["default"].mix(chromaColor, '#FFFFFF', mixRatio);
var luminanceThreshold = 0.45;
return whitened.luminance() > luminanceThreshold ? '#000000' : '#FFFFFF';
};
var _default = getTextColor;
exports["default"] = _default;

8

dist/cjs/utils/transformPalette/transformation/transformArrayPalette/index.js

@@ -7,15 +7,8 @@ "use strict";

exports["default"] = void 0;
var _validateArrayPalette = _interopRequireDefault(require("../../validation/validateArrayPalette"));
var _transformShades = _interopRequireDefault(require("../transformShades"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var transformArrayPalette = function transformArrayPalette(paletteObj) {

@@ -34,4 +27,3 @@ var validatedPalette = (0, _validateArrayPalette["default"])(paletteObj);

};
var _default = transformArrayPalette;
exports["default"] = _default;

18

dist/cjs/utils/transformPalette/transformation/transformObjectPalette/index.js

@@ -7,27 +7,16 @@ "use strict";

exports["default"] = void 0;
var _validateObjectColors = _interopRequireDefault(require("../../validation/validateObjectColors"));
var _transformShades = _interopRequireDefault(require("../transformShades"));
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
var transformObjectPalette = function transformObjectPalette(paletteObj) {
var validatedPalette = Object.entries(paletteObj.palette).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
colorLabel = _ref2[0],
colorValues = _ref2[1];
colorLabel = _ref2[0],
colorValues = _ref2[1];
return (0, _validateObjectColors["default"])(colorLabel, colorValues);

@@ -40,7 +29,5 @@ });

var _color$palette;
if (!((_color$palette = color.palette) !== null && _color$palette !== void 0 && _color$palette.values.length)) {
return [];
}
return {

@@ -57,4 +44,3 @@ label: color.palette.label,

};
var _default = transformObjectPalette;
exports["default"] = _default;

7

dist/cjs/utils/transformPalette/transformation/transformShades/index.js

@@ -7,13 +7,7 @@ "use strict";

exports["default"] = void 0;
var _getTextColor = _interopRequireDefault(require("../getTextColor"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var transformShades = function transformShades(shades) {

@@ -26,4 +20,3 @@ return shades.map(function (shade) {

};
var _default = transformShades;
exports["default"] = _default;

5

dist/cjs/utils/transformPalette/validation/index.js

@@ -7,11 +7,6 @@ "use strict";

exports["default"] = void 0;
var _validateArrayPalette = _interopRequireDefault(require("./validateArrayPalette"));
var _validateObjectColors = _interopRequireDefault(require("./validateObjectColors"));
var _validateShade = _interopRequireDefault(require("./validateShade"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var _default = {

@@ -18,0 +13,0 @@ validateArrayPalette: _validateArrayPalette["default"],

7

dist/cjs/utils/transformPalette/validation/validateArrayPalette/index.js

@@ -7,7 +7,4 @@ "use strict";

exports["default"] = void 0;
var _validateShades = _interopRequireDefault(require("../validateShades"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var validateArrayPalette = function validateArrayPalette(paletteObj) {

@@ -18,3 +15,2 @@ var palette = paletteObj.palette;

var shades = (0, _validateShades["default"])(p.values);
if (shades.invalidShades.length) {

@@ -26,7 +22,5 @@ invalidColors.push({

}
if (!shades.validShades.length) {
return [];
}
return {

@@ -43,4 +37,3 @@ label: p.label,

};
var _default = validateArrayPalette;
exports["default"] = _default;

21

dist/cjs/utils/transformPalette/validation/validateObjectColors/index.js

@@ -7,19 +7,10 @@ "use strict";

exports["default"] = void 0;
var _validateShade = _interopRequireDefault(require("../validateShade"));
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
var validateObjectColors = function validateObjectColors(colorLabel, colorValue) {

@@ -34,3 +25,2 @@ var palette = {

};
if (typeof colorValue === 'string') {

@@ -42,3 +32,2 @@ var isValid = (0, _validateShade["default"])(colorValue);

};
if (isValid) {

@@ -49,3 +38,2 @@ palette.values.push(shade);

}
return {

@@ -56,10 +44,7 @@ palette: palette.values.length ? palette : undefined,

}
Object.entries(colorValue).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
label = _ref2[0],
value = _ref2[1];
label = _ref2[0],
value = _ref2[1];
var isValid = (0, _validateShade["default"])(value);
if (!isValid) {

@@ -72,3 +57,2 @@ invalidColors.values.push({

}
palette.values.push({

@@ -84,4 +68,3 @@ label: label,

};
var _default = validateObjectColors;
exports["default"] = _default;

4

dist/cjs/utils/transformPalette/validation/validateShade/index.js

@@ -7,12 +7,8 @@ "use strict";

exports["default"] = void 0;
var _chromaJs = _interopRequireDefault(require("chroma-js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var validateShade = function validateShade(shade) {
return _chromaJs["default"].valid(shade);
};
var _default = validateShade;
exports["default"] = _default;

6

dist/cjs/utils/transformPalette/validation/validateShades/index.js

@@ -7,7 +7,4 @@ "use strict";

exports["default"] = void 0;
var _validateShade = _interopRequireDefault(require("../validateShade"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var validateShades = function validateShades(shades) {

@@ -18,3 +15,2 @@ var validShades = [];

var isValid = (0, _validateShade["default"])(shade.value);
if (!isValid) {

@@ -24,3 +20,2 @@ invalidShades.push(shade);

}
validShades.push(shade);

@@ -33,4 +28,3 @@ });

};
var _default = validateShades;
exports["default"] = _default;

18

dist/esm/colorPicker/argsList/arg.js

@@ -1,22 +0,12 @@

var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
// Components
import React from 'react';
import CheckBox from '../checkBox/checkBox';
var Arg = function Arg(_ref) {
var item = _ref.item,
itemProps = _ref.itemProps;
itemProps = _ref.itemProps;
var isSelected = itemProps.selected.includes(item);
return jsx("div", {
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0.5em;\n border-bottom: 1px solid #eee;\n\n &:hover {\n cursor: pointer;\n background-color: #f5f5f5;\n border-bottom: 1px solid #f5f5f5;\n }\n "])))
}, jsx(CheckBox, {
return /*#__PURE__*/React.createElement(CheckBox, {
label: item,
checked: isSelected
}));
});
};
export default Arg;

23

dist/esm/colorPicker/argsList/argsList.js
var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
/** @jsx jsx */
import { useCallback } from 'react';
import { css, jsx } from '@emotion/react'; // Utils
import pluralize from 'pluralize'; // Components
import { css, jsx } from '@emotion/react';
import pluralize from 'pluralize';
import Dropdown from '../dropdown/dropdown';
import Arg from './arg';
var ArgsList = function ArgsList(_ref) {
var args = _ref.args,
selected = _ref.selected,
onChange = _ref.onChange;
selected = _ref.selected,
onChange = _ref.onChange;
var handleChange = useCallback(function (item) {

@@ -34,5 +23,3 @@ var index = selected.findIndex(function (a) {

});
var newArgs = _toConsumableArray(selected);
if (index >= 0) {

@@ -43,3 +30,2 @@ newArgs.splice(index, 1);

}
onChange(newArgs);

@@ -61,3 +47,2 @@ }, [selected, onChange]);

};
export default ArgsList;

21

dist/esm/colorPicker/checkBox/checkBox.js

@@ -1,5 +0,3 @@

var _templateObject, _templateObject2, _templateObject3;
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */

@@ -9,20 +7,21 @@ import { css, jsx } from '@emotion/react';

import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { useTheme } from '../../hooks';
var CheckBox = function CheckBox(_ref) {
var label = _ref.label,
checked = _ref.checked,
onClick = _ref.onClick;
checked = _ref.checked,
onClick = _ref.onClick;
var _useTheme = useTheme(),
theme = _useTheme.theme;
return jsx("div", {
onClick: onClick,
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n &:hover {\n cursor: pointer;\n }\n "])))
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n &:hover {\n cursor: pointer;\n }\n "])))
}, jsx("div", {
css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid #777;\n border-radius: 0.2em;\n width: 1.3em;\n height: 1.3em;\n margin-right: 0.5em;\n "])))
css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n border: ", ";\n border-radius: 0.2em;\n width: 1.3em;\n height: 1.3em;\n margin-right: 0.5em;\n "])), "1px solid ".concat(theme.border.secondary))
}, jsx(FontAwesomeIcon, {
icon: faCheck,
color: checked ? '#777' : 'transparent'
css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n path {\n color: ", ";\n }\n "])), checked ? "".concat(theme.text.primary) : 'transparent')
})), label && jsx("p", {
css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 1.1em;\n line-height: 1em;\n margin: 0;\n color: #000;\n white-space: nowrap;\n "])))
css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 1.1em;\n line-height: 1em;\n margin: 0;\n white-space: nowrap;\n "])))
}, label));
};
export default CheckBox;

55

dist/esm/colorPicker/colorPicker.js
var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
/** @jsx jsx */
import { useCallback, useEffect } from 'react';
import { useParameter, useStorybookState, useAddonState, useStorybookApi } from '@storybook/api';
import { css, jsx } from '@emotion/react'; // Utils
import { css, jsx } from '@emotion/react';
import { findPrimaryPaletteIndex, getColorControls, getColorPalettes, getPrimaryPaletteName, reportInvalidPalettes } from '../utils';
import { ADDON_ID } from '../constants'; // Types
// Components
import { ADDON_ID } from '../constants';
import ArgsList from './argsList/argsList';

@@ -36,22 +22,22 @@ import PalettesList from './palettesList/palettesList';

import Palette from './palette';
import { useTheme } from '../hooks';
var initialAddonState = {
storyStates: {}
};
var ColorPicker = function ColorPicker() {
var _addonState$storyStat, _storyPalettes$palett2, _storyState$controls;
var _useTheme = useTheme(),
commonTheme = _useTheme.commonTheme,
theme = _useTheme.theme;
var colorPicker = useParameter('colorPicker') || {};
var primaryPalette = colorPicker.primaryPalette,
palettes = colorPicker.palettes,
additionalControls = colorPicker.applyColorTo,
disableDefaultPalettes = colorPicker.disableDefaultPalettes;
palettes = colorPicker.palettes,
additionalControls = colorPicker.applyColorTo,
disableDefaultPalettes = colorPicker.disableDefaultPalettes;
var storybookApi = useStorybookApi();
var state = useStorybookState();
var _useAddonState = useAddonState(ADDON_ID, initialAddonState),
_useAddonState2 = _slicedToArray(_useAddonState, 2),
addonState = _useAddonState2[0],
setAddonState = _useAddonState2[1];
_useAddonState2 = _slicedToArray(_useAddonState, 2),
addonState = _useAddonState2[0],
setAddonState = _useAddonState2[1];
var storyId = state.storyId;

@@ -62,7 +48,5 @@ var storyState = addonState === null || addonState === void 0 ? void 0 : (_addonState$storyStat = addonState.storyStates) === null || _addonState$storyStat === void 0 ? void 0 : _addonState$storyStat[storyId];

var _storyPalettes$palett, _argTypes$parameters;
if (storyPalettes !== null && storyPalettes !== void 0 && (_storyPalettes$palett = storyPalettes.palettes) !== null && _storyPalettes$palett !== void 0 && _storyPalettes$palett.length) {
return;
}
var validatedStoryPalettes = getColorPalettes(disableDefaultPalettes, palettes);

@@ -73,7 +57,5 @@ var initialStoryPalettes = {

};
if (validatedStoryPalettes.invalidPalettes.length) {
reportInvalidPalettes(validatedStoryPalettes.invalidPalettes);
}
var primaryPaletteIndex = findPrimaryPaletteIndex(initialStoryPalettes);

@@ -83,3 +65,2 @@ var primaryPaletteName = getPrimaryPaletteName(initialStoryPalettes, primaryPaletteIndex);

var controls = getColorControls((_argTypes$parameters = argTypes.parameters) === null || _argTypes$parameters === void 0 ? void 0 : _argTypes$parameters.argTypes, additionalControls);
var newState = _objectSpread(_objectSpread({}, addonState), {}, {

@@ -96,8 +77,7 @@ storyStates: _objectSpread(_objectSpread({}, addonState.storyStates), {}, _defineProperty({}, storyId, {

});
setAddonState(newState); // eslint-disable-next-line react-hooks/exhaustive-deps
setAddonState(newState);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [colorPicker]);
var handleArgsChange = useCallback(function (newArgs) {
var newState = _objectSpread({}, addonState);
var selectedControls = newArgs;

@@ -109,3 +89,2 @@ newState.storyStates[storyId].selectedControls = selectedControls;

var newState = _objectSpread({}, addonState);
newState.storyStates[storyId] = _objectSpread(_objectSpread({}, newState.storyStates[storyId]), {}, {

@@ -118,3 +97,2 @@ currentPalette: newCurrent

var newState = _objectSpread({}, addonState);
var copy = !newState.storyStates[storyId].copyOnClick;

@@ -124,11 +102,9 @@ newState.storyStates[storyId].copyOnClick = copy;

}, [addonState, setAddonState, storyId]);
if (!(storyPalettes !== null && storyPalettes !== void 0 && (_storyPalettes$palett2 = storyPalettes.palettes) !== null && _storyPalettes$palett2 !== void 0 && _storyPalettes$palett2.length) || (storyState === null || storyState === void 0 ? void 0 : storyState.currentPalette) === undefined) {
return null;
}
var currentPalette = storyPalettes === null || storyPalettes === void 0 ? void 0 : storyPalettes.palettes[storyState.currentPalette].palette;
return jsx("div", {
id: "color-picker",
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: #fff;\n border-radius: 10px;\n max-height: 50vh;\n max-width: 70vw;\n padding: 0 1em 1em 1em;\n overflow-x: hidden;\n overflow-y: scroll;\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: #ccc;\n border-radius: 4px;\n &:hover {\n background-color: #666;\n }\n }\n @media (max-width: 800px) {\n max-width: 95vw;\n padding: 0 0.5em 0.5em 0.5em;\n }\n "])))
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n * {\n color: ", ";\n border-color: ", ";\n }\n\n background: ", ";\n border-radius: 8px;\n max-height: 50vh;\n max-width: 70vw;\n padding: 0 1em 1em 1em;\n overflow-x: hidden;\n overflow-y: scroll;\n &::-webkit-scrollbar {\n width: 0.5em;\n height: 0.5em;\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 0.25em;\n &:hover {\n background-color: ", ";\n }\n }\n @media (max-width: 800px) {\n max-width: 95vw;\n padding: 0 0.5em 0.5em 0.5em;\n }\n "])), "".concat(theme.text.primary), "".concat(theme.border.primary), "".concat(theme.background.main), "".concat(commonTheme.scrollBar.track), "".concat(commonTheme.scrollBar.thumb), "".concat(commonTheme.scrollBar.thumbHover))
}, jsx("div", {

@@ -152,3 +128,2 @@ css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 2em;\n margin: 1em 0;\n flex-wrap: wrap-reverse;\n "])))

};
export default ColorPicker;

22

dist/esm/colorPicker/colors.js
var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import Shade from './shade';
import { useMemo } from 'react';
import { useTheme } from '../hooks';
var Colors = function Colors(_ref) {
var colors = _ref.colors;
var shades = colors.values.map(function (shade, i) {
return jsx(Shade, {
shade: shade,
key: "Shade_".concat(shade.value, "_").concat(i)
var _useTheme = useTheme(),
theme = _useTheme.theme;
var shades = useMemo(function () {
return colors.values.map(function (shade, i) {
return jsx(Shade, {
shade: shade,
key: "Shade_".concat(shade.value, "_").concat(i)
});
});
});
}, [colors]);
return jsx("div", {
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n height: 100%;\n border-bottom: 1px solid #eee;\n "])))
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n height: 100%;\n border-bottom: ", ";\n "])), "1px solid ".concat(theme.border.tertiary))
}, shades);
};
export default Colors;

54

dist/esm/colorPicker/dropdown/dropdown.js
var _templateObject, _templateObject2, _templateObject3;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
/** @jsx jsx */

@@ -21,34 +13,28 @@ import { useCallback, useEffect, useState } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Utils
import useOutsideClick from '../../hooks/useOutsideClick'; // Components
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { useTheme, useOutsideClick } from '../../hooks';
import List from './list';
var Dropdown = function Dropdown(_ref) {
var label = _ref.label,
items = _ref.items,
itemProps = _ref.itemProps,
itemComponent = _ref.itemComponent,
closeOnItemClick = _ref.closeOnItemClick,
renderList = _ref.renderList,
onLabelClick = _ref.onLabelClick,
onItemClick = _ref.onItemClick;
items = _ref.items,
itemProps = _ref.itemProps,
itemComponent = _ref.itemComponent,
closeOnItemClick = _ref.closeOnItemClick,
renderList = _ref.renderList,
onLabelClick = _ref.onLabelClick,
onItemClick = _ref.onItemClick;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
useEffect(function () {
var colorPicker = document.getElementById('color-picker');
var handleScroll = function handleScroll() {
setActive(false);
};
if (colorPicker && active) {
colorPicker.addEventListener('scroll', handleScroll);
}
return function () {

@@ -69,11 +55,8 @@ if (colorPicker) {

}, [active, onLabelClick]);
var handleItemClick = function handleItemClick(item, index) {
var handleItemClick = useCallback(function (item, index) {
if (closeOnItemClick) {
closeList();
}
onItemClick(item, index);
};
}, [closeOnItemClick, closeList, onItemClick]);
var showList = renderList === 'always' || renderList === '>1' && items.length > 1;

@@ -87,3 +70,3 @@ return jsx("div", {

onClick: toggleActive,
css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: #fff;\n border: none;\n font-size: 1.1em;\n padding: 0;\n\n ", "\n "])), renderList && "&:hover {\n cursor: pointer;\n }")
css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: transparent;\n border: none;\n font-size: 1.1em;\n padding: 0;\n\n ", "\n "])), renderList && "&:hover {\n cursor: pointer;\n }")
}, jsx("p", {

@@ -94,3 +77,3 @@ "data-testid": "dropdownLabel",

icon: faChevronDown,
color: "#777",
color: theme.text.primary,
"data-testid": "dropdownChevron"

@@ -106,3 +89,2 @@ })), showList && jsx(List, {

};
Dropdown.defaultProps = {

@@ -109,0 +91,0 @@ label: null,

49

dist/esm/colorPicker/dropdown/list.js
var _templateObject, _templateObject2, _templateObject3;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */
import { css, jsx } from '@emotion/react'; // Components
import { useCallback } from 'react';
import { css, jsx } from '@emotion/react';
import AnimateHeight from 'react-animate-height';
var List = function List(props) {
var ItemComponent = props.itemComponent;
var getListItems = function getListItems() {
return props.items.map(function (item, i) {
var onItemClick = function onItemClick() {
props.onItemClick(item, i);
import { useTheme } from '../../hooks';
var List = function List(_ref) {
var active = _ref.active,
items = _ref.items,
itemProps = _ref.itemProps,
itemComponent = _ref.itemComponent,
onItemClick = _ref.onItemClick,
testId = _ref.testId;
var _useTheme = useTheme(),
theme = _useTheme.theme,
commonTheme = _useTheme.commonTheme;
var ItemComponent = itemComponent;
var getListItems = useCallback(function () {
return items.map(function (item, i) {
var handleClick = function handleClick() {
onItemClick(item, i);
};
var backgroundColor = itemProps.current === i ? theme.background.selected : 'transparent';
var backgroundColorHover = itemProps.current === i ? theme.background.selected : theme.background.hover;
return jsx("div", {
key: i,
onClick: onItemClick,
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: #fff;\n padding: 0;\n border: none;\n width: 100%;\n display: block;\n "])))
onClick: handleClick,
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n padding: 0;\n border: none;\n width: 100%;\n display: block;\n padding: 0.5em;\n border-bottom: ", ";\n\n &:hover {\n cursor: pointer;\n background-color: ", ";\n }\n\n &:last-of-type {\n border: none;\n }\n "])), "".concat(backgroundColor), "1px solid ".concat(theme.border.tertiary), backgroundColorHover)
}, jsx(ItemComponent, {
item: item,
itemProps: props.itemProps,
itemProps: itemProps,
index: i,

@@ -30,14 +37,12 @@ key: i

});
};
}, [items, itemProps, theme, ItemComponent, onItemClick]);
return jsx("div", {
css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n "]))),
"data-testid": props.testId
"data-testid": testId
}, jsx(AnimateHeight, {
height: props.active ? 'auto' : 0
height: active ? 'auto' : 0
}, jsx("div", {
css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 4px 1px #eee;\n background: #fff;\n border-radius: 0.5em;\n margin: 0.25em;\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: auto;\n &::-webkit-scrollbar {\n width: 0.5em;\n height: 0.5em;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: #ccc;\n border-radius: 0.25em;\n &:hover {\n background-color: #666;\n }\n }\n "])))
css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: ", ";\n background-color: ", ";\n border-radius: 0.5em;\n margin: 0.25em;\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: auto;\n &::-webkit-scrollbar {\n width: 0.5em;\n height: 0.5em;\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 0.25em;\n &:hover {\n background-color: ", ";\n }\n }\n "])), "0px 0px 4px 1px ".concat(theme.shadow.primary), "".concat(theme.background.secondary), "".concat(commonTheme.scrollBar.track), "".concat(commonTheme.scrollBar.thumb), "".concat(commonTheme.scrollBar.thumbHover))
}, getListItems())));
};
export default List;

33

dist/esm/colorPicker/palette.js
var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */
import { Fragment } from 'react';
import { css, jsx } from '@emotion/react'; // Types
// Components
import { Fragment, useMemo } from 'react';
import { css, jsx } from '@emotion/react';
import Colors from './colors';
import { useTheme } from '../hooks';
var Palette = function Palette(_ref) {
var palette = _ref.palette;
var colors = palette.map(function (c, i) {
return jsx(Fragment, {
key: "Colors_".concat(c.label, "_").concat(i)
}, jsx("div", {
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n font-size: 1.1em;\n padding-right: 0.5em;\n text-transform: capitalize;\n border-bottom: 1px solid #eee;\n "])))
}, c.label || 'Unnamed'), jsx(Colors, {
colors: c
}));
});
var _useTheme = useTheme(),
theme = _useTheme.theme;
var colors = useMemo(function () {
return palette.map(function (c, i) {
return jsx(Fragment, {
key: "Colors_".concat(c.label, "_").concat(i)
}, jsx("p", {
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n font-size: 1.1em;\n padding-right: 0.5em;\n margin: 0;\n text-transform: capitalize;\n border-bottom: ", ";\n "])), "1px solid ".concat(theme.background.tertiary))
}, c.label || 'Unnamed'), jsx(Colors, {
colors: c
}));
});
}, [palette, theme]);
return jsx("div", {

@@ -27,3 +27,2 @@ css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: grid;\n grid-template-columns: minmax(70px, min-content) auto;\n grid-row-gap: 5px;\n "])))

};
export default Palette;

17

dist/esm/colorPicker/palettesList/palette.js
var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import { useTheme } from '../../hooks';
var Palette = function Palette(_ref) {
var item = _ref.item,
itemProps = _ref.itemProps,
index = _ref.index;
itemProps = _ref.itemProps,
index = _ref.index;
var _useTheme = useTheme(),
theme = _useTheme.theme;
if (!item.palette) {
return null;
}
var backgroundColor = itemProps.current === index ? '#eee' : '#fff';
var color = itemProps.current === index ? theme.text.selected : theme.text.primary;
return jsx("p", {
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n transition: transform 0.25s;\n border-bottom: 1px solid #eee;\n padding: 0.25em 1em;\n font-size: 1.1em;\n background-color: ", ";\n white-space: nowrap;\n\n &:hover {\n cursor: pointer;\n background-color: #f5f5f5;\n border-bottom: 1px solid #f5f5f5;\n }\n "])), backgroundColor)
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 1.1em;\n white-space: nowrap;\n color: ", ";\n "])), color)
}, item.name || "Palette No".concat(index + 1));
};
export default Palette;

6

dist/esm/colorPicker/palettesList/palettesList.js
import React, { useCallback } from 'react';
import Dropdown from '../dropdown/dropdown';
import Palette from './palette';
var PalettesList = function PalettesList(_ref) {
var palettes = _ref.palettes,
current = _ref.current,
onChange = _ref.onChange;
current = _ref.current,
onChange = _ref.onChange;
var handleChange = useCallback(function (item, index) {

@@ -26,3 +25,2 @@ onChange(index);

};
export default PalettesList;

58

dist/esm/colorPicker/shade.js
var _templateObject, _templateObject2;
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
/** @jsx jsx */
import { useEffect, useState, useCallback } from 'react';
import { css, jsx } from '@emotion/react';
import { useArgs, useAddonState, useStorybookState } from '@storybook/api'; // Utils
import { useArgs, useAddonState, useStorybookState } from '@storybook/api';
import copy from 'copy-to-clipboard';
import { ADDON_ID } from '../constants'; // Types
// Components
import { ADDON_ID } from '../constants';
import ShadeTooltip from './shadeTooltip';
import { usePopperTooltip } from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';
var Shade = function Shade(_ref) {
var _addonState$storyStat;
var shade = _ref.shade;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var _useArgs = useArgs(),
_useArgs2 = _slicedToArray(_useArgs, 2),
args = _useArgs2[0],
updateArgs = _useArgs2[1];
_useArgs2 = _slicedToArray(_useArgs, 2),
args = _useArgs2[0],
updateArgs = _useArgs2[1];
var state = useStorybookState();
var _useAddonState = useAddonState(ADDON_ID),
_useAddonState2 = _slicedToArray(_useAddonState, 1),
addonState = _useAddonState2[0];
_useAddonState2 = _slicedToArray(_useAddonState, 1),
addonState = _useAddonState2[0];
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
copied = _useState2[0],
setCopied = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
copied = _useState2[0],
setCopied = _useState2[1];
var _usePopperTooltip = usePopperTooltip({
placement: 'top'
}),
getArrowProps = _usePopperTooltip.getArrowProps,
getTooltipProps = _usePopperTooltip.getTooltipProps,
setTooltipRef = _usePopperTooltip.setTooltipRef,
setTriggerRef = _usePopperTooltip.setTriggerRef,
visible = _usePopperTooltip.visible;
placement: 'top'
}),
getArrowProps = _usePopperTooltip.getArrowProps,
getTooltipProps = _usePopperTooltip.getTooltipProps,
setTooltipRef = _usePopperTooltip.setTooltipRef,
setTriggerRef = _usePopperTooltip.setTriggerRef,
visible = _usePopperTooltip.visible;
var storyId = state.storyId;

@@ -67,3 +47,2 @@ var storyState = addonState === null || addonState === void 0 ? void 0 : (_addonState$storyStat = addonState.storyStates) === null || _addonState$storyStat === void 0 ? void 0 : _addonState$storyStat[storyId];

var timeout;
if (copied) {

@@ -74,3 +53,2 @@ timeout = setTimeout(function () {

}
return function () {

@@ -86,3 +64,2 @@ clearTimeout(timeout);

updateArgs(newArgs);
if (storyState.copyOnClick) {

@@ -110,3 +87,2 @@ setCopied(true);

};
export default Shade;

12

dist/esm/colorPicker/shadeTooltip.js
var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
var ShadeTooltip = function ShadeTooltip(_ref) {
var shade = _ref.shade,
copied = _ref.copied;
copied = _ref.copied;
var value = shade.value,
label = shade.label,
textColor = shade.textColor;
label = shade.label,
textColor = shade.textColor;
var text = label ? "".concat(label, ": ").concat(value) : value;
return jsx("div", {
css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0.2em 0.5em;\n border-radius: 0.3em;\n background-color: ", ";\n "])), value)
}, jsx("p", {
}, jsx("span", {
css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n white-space: nowrap;\n font-size: 1.2em;\n line-height: 0;\n color: ", ";\n "])), textColor)
}, copied ? 'Copied' : text));
};
export default ShadeTooltip;

17

dist/esm/colorPickerIcon.js
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
import React, { useCallback, useState } from 'react';

@@ -18,9 +12,7 @@ import { useParameter } from '@storybook/api';

import ColorPicker from './colorPicker/colorPicker';
var ColorPickerIcon = function ColorPickerIcon() {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isActive = _useState2[0],
setIsActive = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
isActive = _useState2[0],
setIsActive = _useState2[1];
var colorPicker = useParameter('colorPicker');

@@ -35,7 +27,5 @@ var colorPalettes = useParameter('colorPalettes');

}, [isActive]);
if (!(palettes !== null && palettes !== void 0 && palettes.length) && disableDefaultPalettes) {
return null;
}
return /*#__PURE__*/React.createElement(WithTooltip, {

@@ -56,3 +46,2 @@ placement: "bottom",

};
export default ColorPickerIcon;

1

dist/esm/index.js
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
export default {};

6

dist/esm/utils/deprecation/index.js

@@ -10,8 +10,7 @@ export var getDeprecationMessage = function getDeprecationMessage(deprecated, removedIn, alternative) {

return;
} // eslint-disable-next-line no-console
}
// eslint-disable-next-line no-console
console.warn(message);
};
var warnDeprecated = function warnDeprecated(deprecated, removedIn, alternative) {

@@ -21,3 +20,2 @@ var message = getDeprecationMessage(deprecated, removedIn, alternative);

};
export default warnDeprecated;

1

dist/esm/utils/findPrimaryPaletteIndex/index.js

@@ -7,3 +7,2 @@ var findPrimaryPaletteIndex = function findPrimaryPaletteIndex(palettes) {

};
export default findPrimaryPaletteIndex;

7

dist/esm/utils/getColorControls/index.js
var getColorControls = function getColorControls(argTypes, additionalControls) {
var argTypesArray = Object.entries(argTypes);
if (!argTypesArray.length) {
return;
}
var filteredArgTypes = argTypesArray.filter(function (arg) {
var _arg$1$control;
return ((_arg$1$control = arg[1].control) === null || _arg$1$control === void 0 ? void 0 : _arg$1$control.type) === 'color';

@@ -16,3 +13,2 @@ });

});
if (additionalControls !== null && additionalControls !== void 0 && additionalControls.length) {

@@ -24,3 +20,2 @@ var storyControls = argTypesArray.map(function (arg) {

var _argTypes$a$control;
return storyControls.includes(a) && ((_argTypes$a$control = argTypes[a].control) === null || _argTypes$a$control === void 0 ? void 0 : _argTypes$a$control.type) === 'text';

@@ -31,6 +26,4 @@ });

}
return colorControls;
};
export default getColorControls;

13

dist/esm/utils/getColorPalettes/index.js
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
import transformPalette from '../transformPalette';
import { defaultPalettes } from '../../constants';
var getColorPalettes = function getColorPalettes(disableDefaultPalettes, customPalettes) {

@@ -23,3 +16,2 @@ var transformedPalettes = {

var transformed = transformPalette(p);
if (transformed.palette.length) {

@@ -31,3 +23,2 @@ transformedPalettes.palettes.push({

}
if (transformed.invalidColors.length) {

@@ -40,12 +31,8 @@ transformedPalettes.invalidPalettes.push({

});
if (!disableDefaultPalettes) {
var _transformedPalettes$;
(_transformedPalettes$ = transformedPalettes.palettes).push.apply(_transformedPalettes$, _toConsumableArray(defaultPalettes));
}
return transformedPalettes;
};
export default getColorPalettes;

3

dist/esm/utils/getPrimaryPaletteName/index.js

@@ -5,10 +5,7 @@ var getPrimaryPaletteName = function getPrimaryPaletteName(statePalettes, primaryPaletteIndex) {

}
if (!primaryPaletteIndex) {
return statePalettes.palettes[0].name;
}
return statePalettes.primaryPalette;
};
export default getPrimaryPaletteName;

15

dist/esm/utils/joinStringList/index.js
import pluralize from 'pluralize';
var joinStringList = function joinStringList(strings, limit, suffixText) {
var count = strings.length;
if (limit === 0) {
return count.toString();
}
var stringArray = strings.flatMap(function (string, i) {
var _getLastStringFromLim;
var getLastStringFromLimit = function getLastStringFromLimit() {

@@ -17,20 +13,14 @@ if (limit === undefined || limit > count) {

}
return limit - 1;
};
var lastString = (_getLastStringFromLim = getLastStringFromLimit()) !== null && _getLastStringFromLim !== void 0 ? _getLastStringFromLim : count - 1;
if (limit && i + 1 > limit) {
return '';
}
if (lastString === 0 && count === 1) {
return string;
}
if (i < lastString - 1) {
return "".concat(string, ", ");
}
if (i === lastString) {

@@ -40,14 +30,10 @@ var otherCount = limit ? count - limit : 0;

var returnString = "".concat(string, " and ").concat(otherCount, " ").concat(otherText);
if (lastString === 0) {
return returnString;
}
if (otherCount > 0) {
return ", ".concat(returnString);
}
return " and ".concat(string);
}
return string;

@@ -57,3 +43,2 @@ });

};
export default joinStringList;

2

dist/esm/utils/reportInvalidPalettes/index.js
import { getInvalidPaletteMessage, warn } from '../transformPalette/messages';
var reportInvalidPalettes = function reportInvalidPalettes(palettes) {

@@ -14,3 +13,2 @@ palettes.forEach(function (palette) {

};
export default reportInvalidPalettes;

3

dist/esm/utils/transformPalette/index.js
import transformArrayPalette from './transformation/transformArrayPalette';
import transformObjectPalette from './transformation/transformObjectPalette';
var transformPalette = function transformPalette(paletteObj) {

@@ -8,6 +7,4 @@ if (Array.isArray(paletteObj.palette)) {

}
return transformObjectPalette(paletteObj);
};
export default transformPalette;

2

dist/esm/utils/transformPalette/transformation/getTextColor/index.js
import chroma from 'chroma-js';
var getTextColor = function getTextColor(color) {

@@ -11,3 +10,2 @@ var chromaColor = chroma(color);

};
export default getTextColor;

5

dist/esm/utils/transformPalette/transformation/transformArrayPalette/index.js
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import validateArrayPalette from '../../validation/validateArrayPalette';
import transformShades from '../transformShades';
var transformArrayPalette = function transformArrayPalette(paletteObj) {

@@ -23,3 +19,2 @@ var validatedPalette = validateArrayPalette(paletteObj);

};
export default transformArrayPalette;

15

dist/esm/utils/transformPalette/transformation/transformObjectPalette/index.js
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
import validateObjectColors from '../../validation/validateObjectColors';
import transformShades from '../transformShades';
var transformObjectPalette = function transformObjectPalette(paletteObj) {
var validatedPalette = Object.entries(paletteObj.palette).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
colorLabel = _ref2[0],
colorValues = _ref2[1];
colorLabel = _ref2[0],
colorValues = _ref2[1];
return validateObjectColors(colorLabel, colorValues);

@@ -29,7 +21,5 @@ });

var _color$palette;
if (!((_color$palette = color.palette) !== null && _color$palette !== void 0 && _color$palette.values.length)) {
return [];
}
return {

@@ -46,3 +36,2 @@ label: color.palette.label,

};
export default transformObjectPalette;

5

dist/esm/utils/transformPalette/transformation/transformShades/index.js
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import getTextColor from '../getTextColor';
var transformShades = function transformShades(shades) {

@@ -16,3 +12,2 @@ return shades.map(function (shade) {

};
export default transformShades;

5

dist/esm/utils/transformPalette/validation/validateArrayPalette/index.js
import validateShades from '../validateShades';
var validateArrayPalette = function validateArrayPalette(paletteObj) {

@@ -8,3 +7,2 @@ var palette = paletteObj.palette;

var shades = validateShades(p.values);
if (shades.invalidShades.length) {

@@ -16,7 +14,5 @@ invalidColors.push({

}
if (!shades.validShades.length) {
return [];
}
return {

@@ -33,3 +29,2 @@ label: p.label,

};
export default validateArrayPalette;

19

dist/esm/utils/transformPalette/validation/validateObjectColors/index.js
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
import validateShade from '../validateShade';
var validateObjectColors = function validateObjectColors(colorLabel, colorValue) {

@@ -24,3 +17,2 @@ var palette = {

};
if (typeof colorValue === 'string') {

@@ -32,3 +24,2 @@ var isValid = validateShade(colorValue);

};
if (isValid) {

@@ -39,3 +30,2 @@ palette.values.push(shade);

}
return {

@@ -46,10 +36,7 @@ palette: palette.values.length ? palette : undefined,

}
Object.entries(colorValue).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
label = _ref2[0],
value = _ref2[1];
label = _ref2[0],
value = _ref2[1];
var isValid = validateShade(value);
if (!isValid) {

@@ -62,3 +49,2 @@ invalidColors.values.push({

}
palette.values.push({

@@ -74,3 +60,2 @@ label: label,

};
export default validateObjectColors;

2

dist/esm/utils/transformPalette/validation/validateShade/index.js
import chroma from 'chroma-js';
var validateShade = function validateShade(shade) {
return chroma.valid(shade);
};
export default validateShade;

4

dist/esm/utils/transformPalette/validation/validateShades/index.js
import validateShade from '../validateShade';
var validateShades = function validateShades(shades) {

@@ -8,3 +7,2 @@ var validShades = [];

var isValid = validateShade(shade.value);
if (!isValid) {

@@ -14,3 +12,2 @@ invalidShades.push(shade);

}
validShades.push(shade);

@@ -23,3 +20,2 @@ });

};
export default validateShades;

2

dist/ts/colorPicker/argsList/arg.d.ts
import { FC } from 'react';
declare type Props = {
type Props = {
item: string;

@@ -4,0 +4,0 @@ itemProps: {

2

dist/ts/colorPicker/argsList/argsList.d.ts
/** @jsx jsx */
import { FC } from 'react';
declare type Props = {
type Props = {
args: string[];

@@ -5,0 +5,0 @@ selected: string[];

2

dist/ts/colorPicker/checkBox/checkBox.d.ts
import { FC } from 'react';
declare type Props = {
type Props = {
label?: string;

@@ -4,0 +4,0 @@ checked: boolean;

0

dist/ts/colorPicker/colorPicker.d.ts
import { jsx } from '@emotion/react';
declare const ColorPicker: () => jsx.JSX.Element;
export default ColorPicker;

2

dist/ts/colorPicker/colors.d.ts
import { TransformedColorPalette } from './types';
import { FC } from 'react';
declare type Props = {
type Props = {
colors: TransformedColorPalette;

@@ -5,0 +5,0 @@ };

2

dist/ts/colorPicker/dropdown/dropdown.d.ts
/** @jsx jsx */
import { ElementType, FC } from 'react';
declare type Props<I> = {
type Props<I> = {
label: string;

@@ -5,0 +5,0 @@ items: I[];

6

dist/ts/colorPicker/dropdown/list.d.ts
/** @jsx jsx */
import { ElementType } from 'react';
import { jsx } from '@emotion/react';
export declare type ListPosition = 'bottom-left' | 'bottom-right';
declare type Props<I> = {
export type ListPosition = 'bottom-left' | 'bottom-right';
type Props<I> = {
active: boolean;

@@ -13,3 +13,3 @@ items: I[];

};
declare const List: (props: Props<any>) => jsx.JSX.Element;
declare const List: ({ active, items, itemProps, itemComponent, onItemClick, testId, }: Props<any>) => jsx.JSX.Element;
export default List;

0

dist/ts/colorPicker/palette.d.ts

@@ -0,0 +0,0 @@ /** @jsx jsx */

2

dist/ts/colorPicker/palettesList/palette.d.ts
import { FC } from 'react';
import { StatePalette } from '../types';
declare type Props = {
type Props = {
item: StatePalette;

@@ -5,0 +5,0 @@ itemProps: {

2

dist/ts/colorPicker/palettesList/palettesList.d.ts
import { FC } from 'react';
import { StatePalette } from '../types';
declare type Props = {
type Props = {
palettes: StatePalette[];

@@ -5,0 +5,0 @@ current: number;

2

dist/ts/colorPicker/shade.d.ts

@@ -5,3 +5,3 @@ /** @jsx jsx */

import 'react-popper-tooltip/dist/styles.css';
declare type Props = {
type Props = {
shade: TransformedShadeType;

@@ -8,0 +8,0 @@ };

2

dist/ts/colorPicker/shadeTooltip.d.ts
import { FC } from 'react';
import { TransformedShadeType } from './types';
declare type Props = {
type Props = {
shade: TransformedShadeType;

@@ -5,0 +5,0 @@ copied: boolean;

24

dist/ts/colorPicker/types.d.ts
import { State } from '@storybook/api';
export declare type ShadeType = {
export type ShadeType = {
label: string;

@@ -9,22 +9,23 @@ value: string;

}
export declare type ShadesType = Record<string, string> | string;
export declare type ColorPaletteAsObject = Record<string, ShadesType>;
export declare type TransformedColorPalette = {
export type ShadesType = Record<string, string> | string;
export type ColorPaletteAsObject = Record<string, ShadesType>;
export type TransformedColorPalette = {
label: string;
values: TransformedShadeType[];
};
export declare type ColorPaletteAsArray = {
export type ColorPaletteAsArray = {
label: string;
values: ShadeType[];
};
export declare type PaletteAsObject = {
export type PaletteAsObject = {
name: string;
palette: ColorPaletteAsObject;
};
export declare type PaletteAsArray = {
export type PaletteAsArray = {
name: string;
palette: ColorPaletteAsArray[];
};
export declare type PaletteObj = PaletteAsObject | PaletteAsArray;
export declare type ColorPickerParameters = {
export type PaletteObj = PaletteAsObject | PaletteAsArray;
export type Theme = 'light' | 'dark' | 'auto';
export type ColorPickerParameters = {
primaryPalette?: string;

@@ -34,2 +35,3 @@ palettes?: PaletteObj[];

disableDefaultPalettes?: boolean;
theme?: Theme;
};

@@ -55,3 +57,3 @@ export interface StatePalette {

}
export declare type StoryState = {
export type StoryState = {
currentPalette: number;

@@ -63,3 +65,3 @@ controls?: string[];

};
export declare type StoryStates = Record<string, StoryState>;
export type StoryStates = Record<string, StoryState>;
export interface StorybookState extends State {

@@ -66,0 +68,0 @@ colorPalettes: StatePalettes;

0

dist/ts/colorPickerIcon.d.ts
/// <reference types="react" />
declare const ColorPickerIcon: () => JSX.Element;
export default ColorPickerIcon;

0

dist/ts/constants/defaultPalettes/basic.d.ts

@@ -0,0 +0,0 @@ declare const _default: {

0

dist/ts/constants/defaultPalettes/colorful.d.ts

@@ -0,0 +0,0 @@ declare const _default: {

0

dist/ts/constants/index.d.ts

@@ -0,0 +0,0 @@ export declare const defaultPalettes: {

0

dist/ts/index.d.ts
declare const _default: {};
export default _default;

0

dist/ts/register.d.ts
export {};

0

dist/ts/utils/deprecation/index.d.ts

@@ -0,0 +0,0 @@ export declare const getDeprecationMessage: (deprecated: string, removedIn?: string, alternative?: string) => string;

0

dist/ts/utils/findPrimaryPaletteIndex/index.d.ts
import { StatePalettes } from 'src/colorPicker/types';
declare const findPrimaryPaletteIndex: (palettes: StatePalettes) => number;
export default findPrimaryPaletteIndex;

0

dist/ts/utils/getColorControls/index.d.ts
import { ArgTypes } from '@storybook/api';
declare const getColorControls: (argTypes: ArgTypes, additionalControls?: string[]) => string[];
export default getColorControls;

0

dist/ts/utils/getColorPalettes/index.d.ts
import { PaletteObj, TransformedPalettes } from 'src/colorPicker/types';
declare const getColorPalettes: (disableDefaultPalettes?: boolean, customPalettes?: PaletteObj[]) => TransformedPalettes;
export default getColorPalettes;

0

dist/ts/utils/getPrimaryPaletteName/index.d.ts
import { StatePalettes } from 'src/colorPicker/types';
declare const getPrimaryPaletteName: (statePalettes?: StatePalettes, primaryPaletteIndex?: number) => string;
export default getPrimaryPaletteName;

0

dist/ts/utils/index.d.ts

@@ -0,0 +0,0 @@ export { default as getColorControls } from './getColorControls';

0

dist/ts/utils/joinStringList/index.d.ts
declare const joinStringList: (strings: string[], limit?: number, suffixText?: string) => string;
export default joinStringList;

0

dist/ts/utils/reportInvalidPalettes/index.d.ts
import { InvalidPalette } from 'src/colorPicker/types';
declare const reportInvalidPalettes: (palettes: InvalidPalette[]) => void;
export default reportInvalidPalettes;

0

dist/ts/utils/transformPalette/index.d.ts

@@ -0,0 +0,0 @@ import { PaletteObj } from 'src/colorPicker/types';

0

dist/ts/utils/transformPalette/messages.d.ts
export declare const getInvalidPaletteMessage: (invalidColors: string[], paletteName: string) => string;
export declare const warn: (message: string) => void;

0

dist/ts/utils/transformPalette/transformation/getTextColor/index.d.ts
declare const getTextColor: (color: string) => "#FFFFFF" | "#000000";
export default getTextColor;

0

dist/ts/utils/transformPalette/transformation/transformArrayPalette/index.d.ts

@@ -0,0 +0,0 @@ import { PaletteAsArray, TransformedColorPalette } from 'src/colorPicker/types';

0

dist/ts/utils/transformPalette/transformation/transformObjectPalette/index.d.ts

@@ -0,0 +0,0 @@ import { ColorPaletteAsArray, PaletteAsObject, TransformedColorPalette } from 'src/colorPicker/types';

0

dist/ts/utils/transformPalette/transformation/transformShades/index.d.ts

@@ -0,0 +0,0 @@ import { ShadeType } from 'src/colorPicker/types';

0

dist/ts/utils/transformPalette/validation/index.d.ts

@@ -0,0 +0,0 @@ declare const _default: {

0

dist/ts/utils/transformPalette/validation/validateArrayPalette/index.d.ts

@@ -0,0 +0,0 @@ import { ColorPaletteAsArray, PaletteAsArray } from 'src/colorPicker/types';

0

dist/ts/utils/transformPalette/validation/validateObjectColors/index.d.ts

@@ -0,0 +0,0 @@ import { ColorPaletteAsArray, ShadesType } from 'src/colorPicker/types';

0

dist/ts/utils/transformPalette/validation/validateShade/index.d.ts
declare const validateShade: (shade: string) => boolean;
export default validateShade;

0

dist/ts/utils/transformPalette/validation/validateShades/index.d.ts

@@ -0,0 +0,0 @@ import { ShadeType } from 'src/colorPicker/types';

65

package.json
{
"name": "storybook-color-picker",
"description": "Choose a color from custom color palette and set it on component's control and/or copy it to clipboard.",
"version": "3.0.2",
"version": "3.1.0",
"author": "Adrian_Bielawski",

@@ -11,2 +11,4 @@ "main": "dist/cjs/index.js",

"dist/**/*",
"!dist/**/*.spec.js",
"!dist/**/testsUtils.js",
"preset.js"

@@ -18,3 +20,3 @@ ],

"buildBabel": "concurrently \"npm run buildBabel:cjs\" \"npm run buildBabel:esm\"",
"buildBabel:files": "babel ./src --extensions \".js,.jsx,.ts,.tsx\" --ignore \"**/*.spec.ts\",\"**/*.spec.tsx\",\"**/testsUtils.ts\"",
"buildBabel:files": "babel ./src --extensions \".js,.jsx,.ts,.tsx\"",
"buildBabel:cjs": "npm run buildBabel:files -- -d ./dist/cjs",

@@ -38,36 +40,38 @@ "buildBabel:esm": "npm run buildBabel:files -- -d ./dist/esm --env-name esm",

"dependencies": {
"@emotion/react": "^11.9.3",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-solid-svg-icons": "^6.1.2",
"@emotion/react": "^11.10.5",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@storybook/addons": "^6.5.13",
"@storybook/api": "^6.5.13",
"@storybook/components": "^6.5.13",
"@storybook/theming": "^6.5.13",
"chroma-js": "^2.1.2",
"copy-to-clipboard": "^3.3.1",
"copy-to-clipboard": "^3.3.3",
"pluralize": "^8.0.0",
"react-animate-height": "^3.0.4",
"react-popper-tooltip": "^4.4.2",
"@storybook/addons": "^6.5.9",
"@storybook/api": "^6.5.9",
"@storybook/components": "^6.5.9",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-animate-height": "^3.0.5",
"react-dom": "^17.0.2",
"react-popper-tooltip": "^4.4.2"
},
"devDependencies": {
"@babel/cli": "^7.18.9",
"@babel/core": "^7.18.9",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/react": "^6.5.9",
"@babel/cli": "^7.19.3",
"@babel/core": "^7.20.2",
"@emotion/eslint-plugin": "^11.10.0",
"@storybook/addon-actions": "^6.5.13",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-links": "^6.5.13",
"@storybook/react": "^6.5.13",
"@testing-library/react": "^12.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@types/chroma-js": "^2.1.4",
"@types/jest": "^28.1.6",
"@types/jest": "^29.2.3",
"@types/pluralize": "^0.0.29",
"@types/react": "^17.0.45",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"babel-jest": "^28.1.3",
"@typescript-eslint/eslint-plugin": "^5.43.0",
"@typescript-eslint/parser": "^5.43.0",
"babel-jest": "^29.3.1",
"babel-loader": "^8.2.2",
"concurrently": "^7.3.0",
"eslint": "^8.20.0",
"concurrently": "^7.5.0",
"eslint": "^8.28.0",
"eslint-config-airbnb": "^19.0.4",

@@ -77,13 +81,14 @@ "eslint-config-airbnb-typescript": "^17.0.0",

"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jest": "^26.7.0",
"eslint-plugin-jest": "^27.1.5",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.1",
"jest": "^28.1.3",
"husky": "^8.0.2",
"jest": "^29.3.1",
"jest-environment-jsdom": "^28.1.3",
"jest-environment-jsdom-global": "^3.0.0",
"jest-environment-jsdom-global": "^4.0.0",
"pretty-quick": "^3.1.3",
"typescript": "^4.7.4"
"storybook-dark-mode": "^1.1.2",
"typescript": "^4.9.3"
},

@@ -90,0 +95,0 @@ "husky": {

0

preset.js

@@ -0,0 +0,0 @@ function managerEntries(entry = []) {

16

README.md

@@ -284,1 +284,17 @@ # storybook-color-picker

To disable default palettes just add `disableDefaultPalettes: true` to global, component or story parameters.
## Theme
Storybook-color-picker will adjust automatically to the theme set on storybook.
To override the storybook theme:
```jsx
export const parameters = {
...
colorPicker: {
theme: 'light' | 'dark' | 'auto' // Default 'auto'
}
};
```
dist/cjs/hooks/useOutsideClick.js
dist/esm/hooks/useOutsideClick.js
dist/ts/hooks/useOutsideClick.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc