@decisiv/ui-components 2.0.1-alpha.184 → 2.0.1-alpha.185

package/lib/atoms/OptionsList/types.d.ts

@@ -52,7 +52,7 @@ interface BaseOption {
     label: string;
     labelDetails?: string;
     showCheckbox?: boolean;
-    meta?: object;
+    meta?: Record<any, unknown>;
     size?: Size;
 }
 export interface ItemOption extends BaseOption {

package/lib/atoms/OptionsList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC;AAClE,oBAAY,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpE,oBAAY,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAC3D,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClD,oBAAY,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAE1C,oBAAY,qBAAqB,GAAG,IAAI,CACtC,eAAe,EACf,UAAU,GAAG,WAAW,GAAG,UAAU,CACtC,CAAC;AAEF,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,eAAgB,SAAQ,gBAAgB;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,oBAAY,aAAa,GAAG,eAAe,GAAG,WAAW,EAAE,CAAC;AAE5D,oBAAY,UAAU,GAAG,gBAAgB,GAAG,eAAe,GAAG,cAAc,CAAC;AAE7E,MAAM,WAAW,QAAQ;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAErC,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,UAAU,UAAU;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,oBAAY,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE7C,oBAAY,WAAW,GAAG,MAAM,CAAC;AAEjC,oBAAY,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAC7D,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,GAAG,CAAC,OAAO,CAAC;IAChD,YAAY,CAAC,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,oBAAY,uBAAuB,GAAG,gBAAgB,CAAC;AAEvD,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC7C,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,QAAQ,EAAE,OAAO,CAAC;CACnB"}

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

@@ -14,7 +14,7 @@ export interface BadgeProps {
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;
 export declare const propTypes: {
-    color: PropTypes.Requireable<CommonUIColorKeys>;
+    color: PropTypes.Requireable<"information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     icon: PropTypes.Validator<PropTypes.ReactComponentLike>;
     size: PropTypes.Requireable<string>;
     variant: typeof variantValidator;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ActionFilterProps } from '../types';
+declare const ActionFilter: ({ active, kind, text, count, startIcon: StartIcon, endIcon: EndIcon, }: ActionFilterProps) => JSX.Element;
+export default ActionFilter;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/ActionFilter/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C,QAAA,MAAM,YAAY,4GA2BjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StyledLabel = _interopRequireDefault(require("../StyledLabel"));
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ActionFilter = function ActionFilter(_ref) {
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
+      text = _ref.text,
+      count = _ref.count,
+      StartIcon = _ref.startIcon,
+      EndIcon = _ref.endIcon;
+  var buttonText = count ? "".concat(text, " ").concat(count) : text;
+  return _react.default.createElement(_react.default.Fragment, null, StartIcon && _react.default.createElement(_.Flex, {
+    paddingRight: 0.5
+  }, _react.default.createElement(StartIcon, {
+    size: "small",
+    role: "img"
+  })), _react.default.createElement(_StyledLabel.default, {
+    kind: kind,
+    active: active
+  }, buttonText), EndIcon && _react.default.createElement(_.Flex, {
+    paddingLeft: 0.5
+  }, _react.default.createElement(EndIcon, {
+    size: "small",
+    role: "img"
+  })));
+};
+
+var _default = ActionFilter;
+exports.default = _default;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FilterProps } from '../types';
+import { SimpleFilterProps } from '../types';
 declare const IconWrapper: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
         readonly XS: "XS";
@@ -192,6 +192,6 @@ declare const IconWrapper: import("styled-components").StyledComponent<"div", an
         readonly LG: "LG";
         readonly XL: "XL";
     }>;
-}> & Pick<FilterProps, "badgeColor">, never>;
+}> & Pick<SimpleFilterProps, "badgeColor">, never>;
 export default IconWrapper;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/IconWrapper/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAgBvC,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAOhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/IconWrapper/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAgB7C,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAOhB,CAAC;AACF,eAAe,WAAW,CAAC"}

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

@@ -1,31 +1,5 @@
 /// <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;
-    };
-};
+import { SimpleFilterProps } from '../types';
+declare const FilterSimplePrimary: ({ "aria-label": ariaLabel, active, disabled, kind, text, badgeIcon: Icon, badgeColor, count, }: SimpleFilterProps) => JSX.Element;
 export default FilterSimplePrimary;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,mBAAmB,oIA4BxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -7,11 +7,7 @@ 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 _visualInterest = require("@decisiv/design-tokens/lib/color/visual-interest");
 
 var _IconWrapper = _interopRequireDefault(require("../IconWrapper"));
 
@@ -21,38 +17,31 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
   var ariaLabel = _ref['aria-label'],
-      active = _ref.active,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      kind = _ref.kind,
       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);
+  var buttonText = count ? "".concat(count, " ").concat(text) : text;
+  var colorForBadge = disabled ? _visualInterest.VisualInterestColorName.licoriceMousse : badgeColor;
   return _react.default.createElement(_react.default.Fragment, null, Icon && _react.default.createElement(_IconWrapper.default, {
-    badgeColor: badgeColor
+    badgeColor: colorForBadge
   }, _react.default.createElement(Icon, {
     size: "small",
     role: "img",
     "aria-label": ariaLabel
   })), _react.default.createElement(_StyledLabel.default, {
     active: active,
+    kind: kind,
     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/StyledFilter.d.ts

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

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

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

package/lib/components/Filter/StyledFilter.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
@@ -25,17 +27,31 @@ var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingW
 
 var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
 
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 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 actionVariantStyles = (0, _styledComponents.css)(["border:", " solid transparent;background:transparent;svg{color:", ";}&:hover{border:", " solid transparent;color:", ";background:transparent;svg{color:inherit;}}&:disabled:disabled{border:none;background:transparent;}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean));
+
+var variant = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+  simple: {
+    light: '',
+    dark: ''
+  },
+  action: {
+    light: actionVariantStyles,
+    dark: actionVariantStyles
+  }
+});
 
 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{", ";}&:disabled:disabled{background:", ";border:", " solid ", ";&,&:hover{color:", ";cursor:not-allowed;", "{background-color:", ";svg{color:", ";}}}}"], (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, (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.charcoal40), _IconWrapper.default, (0, _toColorString.default)(_color.default.opacity.charcoal15), (0, _toColorString.default)(_color.default.opacity.charcoal40));
+})(["display:flex;box-sizing:border-box;background:none;padding:", " ", ";border:", " solid ", ";border-radius:", ";justify-content:center;align-items:center;outline:none;font:inherit;color:", ";&:hover{", ";}&:disabled:disabled{background:", ";border:", " solid ", ";&,&:hover{color:", ";cursor:not-allowed;svg{color:", ";}", "{background-color:", ";svg{color:", ";}}}}", ";", ";&:focus{", ";}", ";"], (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), _kind.hoverStyles, (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40), _IconWrapper.default, (0, _toColorString.default)(_color.default.opacity.charcoal15), (0, _toColorString.default)(_color.default.opacity.charcoal40), _kind.default, variant, focusStyles, (0, _styleModifiers.when)('active', activeStyles));
 
 var _default = StyledFilter;
 exports.default = _default;

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

@@ -1,7 +1,7 @@
 import { FlexComponentProps } from '../../Flex';
-interface Props extends FlexComponentProps {
-    active: boolean;
-    hasBadge: boolean;
+import { FilterProps } from '../types';
+interface Props extends FlexComponentProps, Pick<FilterProps, 'active' | 'kind'> {
+    hasBadge?: boolean;
 }
 declare const StyledLabel: import("styled-components").StyledComponent<"span", any, Props, never>;
 export default StyledLabel;

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/StyledLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,UAAU,KACR,SAAQ,kBAAkB,EACxB,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,wEAehB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -11,18 +11,26 @@ var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
+var _designTokens = require("@decisiv/design-tokens");
+
 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';
+})(["font-size:", ";margin-right:", ";margin-left:", ";"], function (_ref) {
+  var _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
+  return kind === 'primary' ? (0, _rem.default)(_designTokens.typography.size.alias.default) : (0, _rem.default)(_designTokens.typography.size.alias.paragraph2);
 }, function (_ref2) {
-  var hasBadge = _ref2.hasBadge,
-      marginLeft = _ref2.marginLeft;
+  var _ref2$hasBadge = _ref2.hasBadge,
+      hasBadge = _ref2$hasBadge === void 0 ? false : _ref2$hasBadge,
+      marginRight = _ref2.marginRight;
+  return hasBadge && marginRight ? (0, _rem.default)(_spacing.default.base) : '0';
+}, function (_ref3) {
+  var _ref3$hasBadge = _ref3.hasBadge,
+      hasBadge = _ref3$hasBadge === void 0 ? false : _ref3$hasBadge,
+      marginLeft = _ref3.marginLeft;
   return hasBadge && marginLeft ? (0, _rem.default)(_spacing.default.base) : '0';
 });
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FilterProps } from './types';
-declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLButtonElement>>;
+import { SimpleFilterProps, ActionFilterProps } from './types';
+declare const Filter: React.ForwardRefExoticComponent<(ActionFilterProps & React.RefAttributes<HTMLButtonElement>) | (SimpleFilterProps & React.RefAttributes<HTMLButtonElement>)>;
+export { FilterProps } from './types';
 export default Filter;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAStC,QAAA,MAAM,MAAM,uFAsDX,CAAC;AA4BF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAe,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5E,QAAA,MAAM,MAAM,8JAgDX,CAAC;AA4BF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,eAAe,MAAM,CAAC"}

package/lib/components/Filter/index.js

@@ -3,20 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FilterProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.FilterProps;
+  }
+});
 exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _visualInterest = require("@decisiv/design-tokens/lib/color/visual-interest");
-
 var _commonUIColors = require("../../utils/commonUIColors");
 
-var _SimplePrimary = _interopRequireDefault(require("./SimplePrimary"));
+var _types = require("./types");
 
 var _StyledFilter = _interopRequireDefault(require("./StyledFilter"));
 
+var _SimplePrimary = _interopRequireDefault(require("./SimplePrimary"));
+
+var _ActionFilter = _interopRequireDefault(require("./ActionFilter"));
+
 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; } }
@@ -35,31 +43,26 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 = (0, _react.forwardRef)(function (_ref, 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,
-      disabled = _ref.disabled,
-      _ref$badgeColor = _ref.badgeColor,
-      badgeColor = _ref$badgeColor === void 0 ? 'information' : _ref$badgeColor,
-      rest = _objectWithoutProperties(_ref, ["active", "variant", "kind", "onClick", "disabled", "badgeColor"]);
+var Filter = (0, _react.forwardRef)(function (props, ref) {
+  var filterActive = props.active,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'simple' : _props$variant,
+      _props$kind = props.kind,
+      kind = _props$kind === void 0 ? 'primary' : _props$kind,
+      onClick = props.onClick,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, ["active", "variant", "kind", "onClick", "disabled"]);
 
   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]);
+    if (variant === 'simple') {
+      setActive(!active);
+    }
+  }, [active, setActive, variant]);
   var handleOnClick = (0, _react.useCallback)(function (e) {
     if (typeof onClick === 'function') {
       onClick(e);
@@ -70,21 +73,18 @@ var Filter = (0, _react.forwardRef)(function (_ref, ref) {
   return _react.default.createElement(_StyledFilter.default, _extends({
     ref: ref,
     kind: kind,
+    variant: variant,
     tabIndex: 0,
     active: filterActive || active,
     onClick: handleOnClick,
     disabled: disabled
-  }, rest), _react.default.createElement(Component, _extends({
-    active: active,
-    disabled: disabled,
-    badgeColor: disabled ? _visualInterest.VisualInterestColorName.licoriceMousse : badgeColor
-  }, rest)));
+  }, rest), variant === 'simple' ? _react.default.createElement(_SimplePrimary.default, props) : _react.default.createElement(_ActionFilter.default, props));
 }); // @ts-ignore
 
 Filter.propTypes = {
   active: _propTypes.default.bool,
-  variant: _propTypes.default.oneOf(['simple']),
-  kind: _propTypes.default.oneOf(['primary']),
+  variant: _propTypes.default.oneOf(['simple', 'action']),
+  kind: _propTypes.default.oneOf(['primary', 'secondary']),
   onClick: _propTypes.default.func,
   text: _propTypes.default.string.isRequired,
   badgeColor: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),

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

@@ -12,12 +12,10 @@ 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;
+          container = _render.container;
 
       expect(container).toMatchSnapshot();
     });
@@ -25,7 +23,6 @@ describe('Filter', function () {
       var onClick = jest.fn();
 
       var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
-        "aria-label": "text sample",
         active: false,
         variant: "simple",
         text: "text",
@@ -43,7 +40,6 @@ describe('Filter', function () {
       var onClick = jest.fn();
 
       var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
-        "aria-label": "text sample",
         active: false,
         variant: "simple",
         text: "text",

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

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

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

@@ -1 +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;AA8BF,QAAA,MAAM,UAAU,gBAGd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAI1B,CAAC;AAEF,QAAA,MAAM,UAAU,kBAUd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Filter/kind.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.hoverStyles = void 0;
+exports.default = exports.secondaryStyle = exports.primaryStyle = exports.hoverStyles = void 0;
 
-var _styledTheming = _interopRequireDefault(require("styled-theming"));
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 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 _styledTheming = _interopRequireDefault(require("styled-theming"));
 
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
@@ -22,24 +24,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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{", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles, (0, _toColorString.default)(_color.default.opacity.charcoal40));
-// 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];
+exports.primaryStyle = primaryStyle;
+var secondaryStyle = (0, _styledComponents.css)(["height:", ";font-size:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2));
+exports.secondaryStyle = secondaryStyle;
+
+var kindStyles = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'kind', {
+  primary: {
+    light: primaryStyle,
+    dark: primaryStyle
   },
-  dark: function dark(_ref2) {
-    var _ref2$kind = _ref2.kind,
-        kind = _ref2$kind === void 0 ? 'primary' : _ref2$kind;
-    return darkStyles[kind];
+  secondary: {
+    light: secondaryStyle,
+    right: secondaryStyle
   }
 });
+
 var _default = kindStyles;
 exports.default = _default;

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

@@ -1 +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;;;;CAyBpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"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;;;;CA0CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Filter/schema.js

@@ -17,10 +17,14 @@ 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'),
+    badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render, only usable with the "simple" variant'),
+    badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided. Only usable with the "simple" variant').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."),
-    disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false')
+    disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false'),
+    kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).defaultValue('primary'),
+    variant: _reactDesc.PropTypes.oneOf(['simple', 'action']).description('Use the variant to define the type of filter that you want to use').defaultValue('simple'),
+    startIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render before the filter text, only usable with the "action" variant'),
+    endIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render after the filter text, only usable with the "action" variant')
   }, extensions);
 };
 

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

@@ -2,17 +2,30 @@ 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 Variant = 'simple' | 'action';
+export declare type Kind = 'primary' | 'secondary';
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-export interface FilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    active?: boolean;
-    count?: number;
-    badgeIcon?: IconComponent;
-    badgeColor?: CommonUIColorKeys;
+export interface BaseFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     kind?: Kind;
-    text: TranslatedText;
     variant?: Variant;
+    text: TranslatedText;
+    count?: number;
+    active?: boolean;
     disabled?: boolean;
 }
+export interface SimpleFilterProps extends BaseFilterProps {
+    variant: 'simple';
+    badgeIcon?: IconComponent;
+    badgeColor?: CommonUIColorKeys;
+    startIcon?: never;
+    endIcon?: never;
+}
+export interface ActionFilterProps extends BaseFilterProps {
+    variant: 'action';
+    startIcon?: IconComponent;
+    endIcon?: IconComponent;
+    badgeIcon?: never;
+    badgeColor?: never;
+}
+export declare type FilterProps = SimpleFilterProps | ActionFilterProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +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;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"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,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}

package/lib/components/Tag/propTypes.d.ts

@@ -7,7 +7,7 @@ export declare const propTypes: {
     actionAttributes: any;
     actionIntent: PropTypes.Requireable<string>;
     actionRef: PropTypes.Requireable<any>;
-    color: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
+    color: PropTypes.Requireable<"information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     variant: PropTypes.Requireable<string>;
     palette: PropTypes.Requireable<string>;
     size: PropTypes.Requireable<string>;

package/lib/utils/commonUIColors.d.ts

@@ -15,7 +15,7 @@ export declare const viColorKeys: ("berryCrisp" | "koolaidCake" | "cookieMonster
 export declare const statusColorKeys: ("information" | "success" | "warning" | "danger")[];
 export declare const viColors: VIColors;
 export declare const statusColors: StatusColors;
-export declare const commonUIColorKeys: CommonUIColorKeys[];
+export declare const commonUIColorKeys: ("information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
 export declare const commonUIColors: CommonUIColors;
 export declare const commonUIThreeShadeColors: {
     readonly berryCrisp: {

package/lib/utils/commonUIColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,iJAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG3B,CAAC"}
+{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,iJAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,oMAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.184+9519a4f",
+  "version": "2.0.1-alpha.185+ec67331",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "9519a4fdb08ced14a8b76cb8b24c16288d3b8e0f"
+  "gitHead": "ec673319f489086ae38e15dcd6524cc862e54389"
 }