@decisiv/ui-components 2.0.1-alpha.8 → 2.0.1-alpha.97

package/lib/components/Filter/SimplePrimary/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { IconProps } from '@decisiv/iconix';
+import { CommonUIColorKeys } from '../../../utils/commonUIColors';
+declare type IconComponent = (props: IconProps) => JSX.Element;
+interface Props {
+    'aria-label': string;
+    active: boolean;
+    text: string;
+    count: number;
+    badgeIcon?: IconComponent;
+    badgeColor?: CommonUIColorKeys;
+}
+declare const FilterSimplePrimary: {
+    ({ "aria-label": ariaLabel, active, text, badgeIcon: Icon, badgeColor, count, }: Props): JSX.Element;
+    propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        count: PropTypes.Requireable<number>;
+        text: PropTypes.Validator<string>;
+        badgeColor: PropTypes.Requireable<string>;
+        badgeIcon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    };
+    defaultProps: {
+        active: null;
+        count: undefined;
+        badgeColor: string;
+        badgeIcon: null;
+    };
+};
+export default FilterSimplePrimary;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/SimplePrimary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,UAAU,KAAK;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;CAsBxB,CAAC;AAiBF,eAAe,mBAAmB,CAAC"}

package/lib/components/Filter/SimplePrimary/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _IconWrapper = _interopRequireDefault(require("../IconWrapper"));
+
+var _StyledLabel = _interopRequireDefault(require("../StyledLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      active = _ref.active,
+      text = _ref.text,
+      Icon = _ref.badgeIcon,
+      _ref$badgeColor = _ref.badgeColor,
+      badgeColor = _ref$badgeColor === void 0 ? 'information' : _ref$badgeColor,
+      count = _ref.count;
+  var buttonText = isNaN(count) ? text : "".concat(count, " ").concat(text);
+  return _react.default.createElement(_react.default.Fragment, null, Icon && _react.default.createElement(_IconWrapper.default, {
+    badgeColor: badgeColor
+  }, _react.default.createElement(Icon, {
+    size: "small",
+    role: "img",
+    "aria-label": ariaLabel
+  })), _react.default.createElement(_StyledLabel.default, {
+    active: active,
+    hasBadge: !!Icon,
+    marginLeft: 1
+  }, buttonText));
+};
+
+FilterSimplePrimary.propTypes = {
+  active: _propTypes.default.bool,
+  count: _propTypes.default.number,
+  text: _propTypes.default.string.isRequired,
+  badgeColor: _propTypes.default.string,
+  badgeIcon: _propTypes.default.elementType
+};
+FilterSimplePrimary.defaultProps = {
+  active: null,
+  count: undefined,
+  badgeColor: "".concat((0, _toColorString.default)(_color.default.status.information.medium)),
+  badgeIcon: null
+};
+var _default = FilterSimplePrimary;
+exports.default = _default;

package/lib/components/Filter/SimplePrimary/index.test.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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 defaultProps = {
+  text: 'Label',
+  count: 0,
+  badgeColor: null,
+  badgeIcon: null
+};
+describe('Filter', function () {
+  it('renders the count when a value is provided', function () {
+    var props = _objectSpread({}, defaultProps, {
+      count: 10
+    });
+
+    var _render = (0, _react2.render)(_react.default.createElement(_.default, props)),
+        queryByText = _render.queryByText;
+
+    expect(queryByText('10 Label')).toBeInTheDocument();
+  });
+});

package/lib/components/Filter/StyledFilter.d.ts

@@ -0,0 +1,4 @@
+import { FilterProps } from './types';
+declare const StyledFilter: import("styled-components").StyledComponent<"button", any, FilterProps, never>;
+export default StyledFilter;
+//# sourceMappingURL=StyledFilter.d.ts.map

package/lib/components/Filter/StyledFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsBtC,QAAA,MAAM,YAAY,gFAuBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Filter/StyledFilter.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _kind = _interopRequireWildcard(require("./kind"));
+
+var _colors = require("../Button/colors");
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var activeStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.status.information.medium), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.status.information.medium), (0, _toColorString.default)(_color.default.base.snowWhite));
+var focusStyles = (0, _styledComponents.css)(["border:", " solid ", ";", ";"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_colors.focusRingColors.light.normal.secondary.shadow));
+
+var StyledFilter = _styledComponents.default.button.withConfig({
+  displayName: "StyledFilter",
+  componentId: "sc-10cidio-0"
+})(["display:flex;background:none;padding:", " ", ";border:", " solid ", ";border-radius:", ";justify-content:center;align-items:center;outline:none;font:inherit;color:", ";&:focus{", "}", ";", ";&:hover{", ";}"], (0, _rem.default)(_spacing.default.base * 0.6), (0, _rem.default)(_spacing.default.base), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _rem.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), focusStyles, _kind.default, (0, _styleModifiers.when)('active', activeStyles), _kind.hoverStyles);
+
+var _default = StyledFilter;
+exports.default = _default;

package/lib/components/Filter/StyledLabel/index.d.ts

@@ -0,0 +1,8 @@
+import { FlexComponentProps } from '../../Flex';
+interface Props extends FlexComponentProps {
+    active: boolean;
+    hasBadge: boolean;
+}
+declare const StyledLabel: import("styled-components").StyledComponent<"span", any, Props, never>;
+export default StyledLabel;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/StyledLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/StyledLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,UAAU,KAAM,SAAQ,kBAAkB;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,wEAMhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Filter/StyledLabel/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var StyledLabel = _styledComponents.default.span.withConfig({
+  displayName: "StyledLabel",
+  componentId: "sc-1r95cia-0"
+})(["margin-top:", ";margin-right:", ";margin-left:", ";"], (0, _rem.default)(_spacing.default.base * 0.2), function (_ref) {
+  var hasBadge = _ref.hasBadge,
+      marginRight = _ref.marginRight;
+  return hasBadge && marginRight ? (0, _rem.default)(_spacing.default.base) : '0';
+}, function (_ref2) {
+  var hasBadge = _ref2.hasBadge,
+      marginLeft = _ref2.marginLeft;
+  return hasBadge && marginLeft ? (0, _rem.default)(_spacing.default.base) : '0';
+});
+
+var _default = StyledLabel;
+exports.default = _default;

package/lib/components/Filter/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { FilterProps } from './types';
+declare const Filter: {
+    ({ active: filterActive, variant, kind, onClick, ...rest }: FilterProps): JSX.Element;
+    propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        variant: PropTypes.Requireable<string>;
+        kind: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        text: PropTypes.Validator<string>;
+        badgeColor: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
+        badgeIcon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        count: PropTypes.Requireable<number>;
+    };
+    defaultProps: {
+        active: boolean;
+        variant: string;
+        onClick: null;
+        kind: string;
+        badgeIcon: null;
+        badgeColor: string;
+        count: undefined;
+    };
+};
+export default Filter;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWtC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CAsCX,CAAC;AAuBF,eAAe,MAAM,CAAC"}

package/lib/components/Filter/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _SimplePrimary = _interopRequireDefault(require("./SimplePrimary"));
+
+var _StyledFilter = _interopRequireDefault(require("./StyledFilter"));
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var components = {
+  simple: _SimplePrimary.default
+}; // variant uses basic
+
+var Filter = function Filter(_ref) {
+  var filterActive = _ref.active,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'simple' : _ref$variant,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
+      onClick = _ref.onClick,
+      rest = _objectWithoutProperties(_ref, ["active", "variant", "kind", "onClick"]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
+  var Component = components[variant];
+  var toggleStatus = (0, _react.useCallback)(function () {
+    return setActive(!active);
+  }, [active, setActive]);
+  var handleOnClick = (0, _react.useCallback)(function (e) {
+    if (typeof onClick === 'function') {
+      onClick(e);
+    } else {
+      toggleStatus();
+    }
+  }, [onClick, toggleStatus]);
+  return _react.default.createElement(_StyledFilter.default, _extends({
+    kind: kind,
+    tabIndex: 0,
+    active: filterActive || active,
+    onClick: handleOnClick
+  }, rest), _react.default.createElement(Component, _extends({
+    active: active
+  }, rest)));
+};
+
+Filter.propTypes = {
+  active: _propTypes.default.bool,
+  variant: _propTypes.default.oneOf(['simple']),
+  kind: _propTypes.default.oneOf(['primary']),
+  onClick: _propTypes.default.func,
+  text: _propTypes.default.string.isRequired,
+  badgeColor: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
+  badgeIcon: _propTypes.default.elementType,
+  count: _propTypes.default.number
+};
+Filter.defaultProps = {
+  active: false,
+  variant: 'simple',
+  onClick: null,
+  kind: 'primary',
+  badgeIcon: null,
+  badgeColor: 'information',
+  count: undefined
+};
+var _default = Filter;
+exports.default = _default;

package/lib/components/Filter/index.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Filter', function () {
+  describe('Simple primary variant', function () {
+    it('renders label', function () {
+      var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+        "aria-label": "text sample",
+        variant: "simple",
+        text: "text sample"
+      })),
+          container = _render.container,
+          queryByText = _render.queryByText;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('calls the onClick function provided when the button clicked', function () {
+      var onClick = jest.fn();
+
+      var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+        "aria-label": "text sample",
+        active: false,
+        variant: "simple",
+        text: "text",
+        onClick: onClick
+      })),
+          getByText = _render2.getByText;
+
+      _react2.fireEvent.click(getByText(/text/));
+
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+});

package/lib/components/Filter/kind.d.ts

@@ -0,0 +1,6 @@
+import theme from 'styled-theming';
+import { FlattenSimpleInterpolation as CSS } from 'styled-components';
+export declare const hoverStyles: CSS;
+declare const kindStyles: theme.ThemeSet;
+export default kindStyles;
+//# sourceMappingURL=kind.d.ts.map

package/lib/components/Filter/kind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,OAAO,EAAO,0BAA0B,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAU3E,eAAO,MAAM,WAAW,KAQvB,CAAC;AAyBF,QAAA,MAAM,UAAU,gBAGd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Filter/kind.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.hoverStyles = void 0;
+
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _styledComponents = require("styled-components");
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var hoverStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.base.snowWhite));
+exports.hoverStyles = hoverStyles;
+var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles);
+// light and dark are the same ATM.
+var lightStyles = {
+  primary: primaryStyle
+};
+var darkStyles = {
+  primary: primaryStyle
+};
+var kindStyles = (0, _styledTheming.default)(_ConfigProvider.themeKeys.mode, {
+  light: function light(_ref) {
+    var _ref$kind = _ref.kind,
+        kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
+    return lightStyles[kind];
+  },
+  dark: function dark(_ref2) {
+    var _ref2$kind = _ref2.kind,
+        kind = _ref2$kind === void 0 ? 'primary' : _ref2$kind;
+    return darkStyles[kind];
+  }
+});
+var _default = kindStyles;
+exports.default = _default;

package/lib/components/Filter/schema.d.ts

@@ -0,0 +1,9 @@
+import { Validator } from 'prop-types';
+export declare const makeFilterSchemaPropTypes: (extensions?: {
+    [x: string]: Validator<unknown>;
+} | undefined) => {
+    [x: string]: Validator<unknown>;
+};
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/Filter/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAsBpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Filter/schema.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.makeFilterSchemaPropTypes = void 0;
+
+var _reactDesc = require("react-desc");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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 makeFilterSchemaPropTypes = function makeFilterSchemaPropTypes(extensions) {
+  return _objectSpread({
+    text: _reactDesc.PropTypes.string.description("The Filter's text"),
+    active: _reactDesc.PropTypes.bool.description("The Filter's active status. Use when you want to control the Filter with onClick.").defaultValue('false'),
+    badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
+    badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided.').defaultValue('information'),
+    count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered.")
+  }, extensions);
+};
+
+exports.makeFilterSchemaPropTypes = makeFilterSchemaPropTypes;
+var schema = (0, _reactDesc.describe)({
+  displayName: 'Filter'
+});
+schema.propTypes = makeFilterSchemaPropTypes();
+var _default = schema;
+exports.default = _default;

package/lib/components/Filter/types.d.ts

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconProps } from '@decisiv/iconix';
+import { CommonUIColorKeys } from '../../utils/commonUIColors';
+import { TranslatedText } from '../../utils/useTranslations';
+export declare type Variant = 'simple';
+export declare type Kind = 'primary';
+export declare type IconComponent = (props: IconProps) => JSX.Element;
+export interface FilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    count?: number;
+    badgeIcon?: IconComponent;
+    badgeColor?: CommonUIColorKeys;
+    kind?: Kind;
+    text: TranslatedText;
+    variant?: Variant;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Filter/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,CAAC;AAC/B,oBAAY,IAAI,GAAG,SAAS,CAAC;AAC7B,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/lib/components/Filter/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/JumpTo/JumpToMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { JumpToProps, JumpToRef } from './types';
-declare const JumToMenuWithRef: React.ForwardRefExoticComponent<JumpToProps & React.RefAttributes<JumpToRef>>;
-export default JumToMenuWithRef;
+declare const JumpToMenuWithRef: React.ForwardRefExoticComponent<JumpToProps & React.RefAttributes<JumpToRef>>;
+export default JumpToMenuWithRef;
 //# sourceMappingURL=JumpToMenu.d.ts.map

package/lib/components/JumpTo/JumpToMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JumpToMenu.d.ts","sourceRoot":"","sources":["../../../src/components/JumpTo/JumpToMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAa9E,OAAO,EAAc,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiH7D,QAAA,MAAM,gBAAgB,+EAAyB,CAAC;AAKhD,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"JumpToMenu.d.ts","sourceRoot":"","sources":["../../../src/components/JumpTo/JumpToMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAa9E,OAAO,EAAc,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiH7D,QAAA,MAAM,iBAAiB,+EAAyB,CAAC;AAKjD,eAAe,iBAAiB,CAAC"}

package/lib/components/JumpTo/JumpToMenu.js

@@ -136,8 +136,8 @@ function JumpToMenu(props, forwardedRef) {
   }, rest))));
 }
 
-var JumToMenuWithRef = (0, _react.forwardRef)(JumpToMenu); // @ts-ignore
+var JumpToMenuWithRef = (0, _react.forwardRef)(JumpToMenu); // @ts-ignore
 
-JumToMenuWithRef.propTypes = _schema.default.propTypes;
-var _default = JumToMenuWithRef;
+JumpToMenuWithRef.propTypes = _schema.default.propTypes;
+var _default = JumpToMenuWithRef;
 exports.default = _default;

package/lib/components/JumpTo/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/LeftNav/Item/ClickArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickArea.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ClickArea.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,SAAS,sFAiId,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ClickArea.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ClickArea.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,SAAS,sFAkId,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/LeftNav/Item/ClickArea.js

@@ -43,10 +43,10 @@ var ClickArea = _styledComponents.default.div.withConfig({
 })(["", ";", ";background-color:transparent;border:2px solid transparent;color:", ";flex:1;font-size:", ";font-weight:", ";max-width:100%;text-align:left;padding:", " 0;&:active,&:focus{outline:none;}&:active,&:hover{color:", ";}&:hover{background-color:", ";}&:focus{border:2px solid ", ";}", ";", ";", ";", ";"], (0, _modifiers.withFlex)(), (0, _modifiers.withSpacing)(), (0, _toColorString.default)(_constants.FG_COLOR), (0, _rem.default)(_typography.default.size.scale[1]), _typography.default.weight.scale[1], (0, _rem.default)(_spacing.default.base), (0, _toColorString.default)(_constants.FG_COLOR), (0, _toColorString.default)(_constants.HOVER_BG_COLOR), (0, _toColorString.default)(_constants.FOCUS_BORDER_COLOR), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["background-color:inherit;color:", ";cursor:not-allowed;&:hover{background-color:inherit;color:", ";}"], (0, _toColorString.default)(_constants.DISABLED_FG_COLOR), (0, _toColorString.default)(_constants.DISABLED_FG_COLOR))), (0, _styledComponentsModifiers.applyStyleModifiers)((_applyStyleModifiers = {}, _defineProperty(_applyStyleModifiers, _useNav.NAV_EXPANDED_STATES.COLLAPSED_XY, function () {
   return (0, _styledComponents.css)(["display:none;visibility:hidden;"]);
 }), _defineProperty(_applyStyleModifiers, _useNav.NAV_EXPANDED_STATES.COLLAPSED_X, function () {
-  return (0, _styledComponents.css)(["", ";display:block;text-align:center;", "{display:block;font-size:8px;max-width:100%;overflow:hidden;padding:0 ", ";text-overflow:ellipsis;white-space:nowrap;text-align:center;}", ";", ";"], (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["display:none;visibility:hidden;"])), _TextWrapper.default, (0, _rem.default)(_spacing.default.base * 0.5), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["", "{padding-left:56px;}"], _TextWrapper.default)), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["", "{font-size:", ";", ";}"], _TextWrapper.default, (0, _rem.default)(_typography.default.size.scale[0]), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["padding-left:6px;white-space:normal;text-overflow:unset;overflow:unset;"])))));
+  return (0, _styledComponents.css)(["", ";display:block;text-align:center;", "{display:block;font-size:8px;max-width:100%;overflow:hidden;padding:0 ", ";text-overflow:ellipsis;white-space:nowrap;text-align:center;}", ";", ";"], (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["display:none;visibility:hidden;"])), _TextWrapper.default, (0, _rem.default)(_spacing.default.base * 0.5), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["", "{padding-left:56px;}"], _TextWrapper.default)), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["", "{font-size:", ";", ";}"], _TextWrapper.default, (0, _rem.default)(_typography.default.size.scale[1]), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["padding-left:6px;white-space:normal;text-overflow:unset;overflow:unset;"])))));
 }), _defineProperty(_applyStyleModifiers, _useNav.NAV_EXPANDED_STATES.EXPANDED, function () {
   return (0, _styledComponents.css)(["", "{padding-left:22px;padding-right:22px;}"], _IconWrapper.default);
-}), _applyStyleModifiers), 'navVariant'), (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["flex:0;"])), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["padding:", " 0;"], (0, _rem.default)(_spacing.default.base * 0.5))));
+}), _applyStyleModifiers), 'navVariant'), (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["flex:1 0;"])), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["padding:", " 0;font-size:", ";"], (0, _rem.default)(_spacing.default.base * 0.5), (0, _rem.default)(_typography.default.size.alias.paragraph2))));
 
 var _default = ClickArea;
 exports.default = _default;

package/lib/components/LeftNav/Item/ItemWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ItemWrapper.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,WAAW,qFA4ChB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ItemWrapper.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,WAAW,qFAoChB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/LeftNav/Item/ItemWrapper.js

@@ -9,9 +9,9 @@ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorS
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _styleModifiers = require("../../../utils/styleModifiers");
+var _dynamicModifiers = require("../../../utils/dynamicModifiers");
 
-var _useNav = require("../hooks/useNav");
+var _styleModifiers = require("../../../utils/styleModifiers");
 
 var _constants = require("../constants");
 
@@ -22,7 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var ItemWrapper = _styledComponents.default.li.withConfig({
   displayName: "ItemWrapper",
   componentId: "fky2d1-0"
-})(["display:flex;flex-direction:column;margin:0;position:relative;white-space:normal;&:focus{outline:none;}", ";", ";"], (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["background-color:", ";border-left:4px solid ", ";a{position:relative;& >:first-child{margin-left:-4px;}}", ";"], (0, _toColorString.default)(_constants.ACTIVE_BG_COLOR), (0, _toColorString.default)(_constants.ACTIVE_BORDER_COLOR), (0, _styleModifiers.when)('navVariant', [_useNav.NAV_EXPANDED_STATES.COLLAPSED_X], (0, _styledComponents.css)(["a > *{margin-left:-4px;}"])))), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_constants.BG_COLOR))));
+})(["display:flex;margin:0;position:relative;white-space:normal;", " &:focus{outline:none;}", ";", ";"], (0, _dynamicModifiers.applyDynamicModifiers)('flexDirection', 'flex-direction'), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["background-color:", ";&::before{border-left:4px solid ", ";position:absolute;top:0;left:0;height:100%;content:'';pointer-events:none;}"], (0, _toColorString.default)(_constants.ACTIVE_BG_COLOR), (0, _toColorString.default)(_constants.ACTIVE_BORDER_COLOR))), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_constants.BG_COLOR))));
 
 var _default = ItemWrapper;
 exports.default = _default;

package/lib/components/LeftNav/Item/MenuItemWrapper.d.ts

@@ -0,0 +1,7 @@
+interface MenuItemWrapperProps {
+    flex?: string;
+    flexDirection?: string;
+}
+declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, MenuItemWrapperProps, never>;
+export default MenuItemWrapper;
+//# sourceMappingURL=MenuItemWrapper.d.ts.map

package/lib/components/LeftNav/Item/MenuItemWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/MenuItemWrapper.ts"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,sFAKpB,CAAC;AAEF,eAAe,eAAe,CAAC"}