@pingux/astro 2.147.1-alpha.1 → 2.148.0-alpha.0

package/lib/cjs/components/Badge/Badge.styles.d.ts

@@ -440,12 +440,15 @@ declare const _default: {
     itemBadgeWithSlot: {
         p: number;
         my: number;
-        backgroundColor: string;
+        bg: string;
         '& span': {
             color: string;
             mr: string;
             lineHeight: string;
         };
+        '& svg': {
+            fill: string;
+        };
         maxHeight: string;
         border: string;
         borderColor: string;
@@ -540,6 +543,7 @@ declare const _default: {
         };
     };
     selectedItemBadge: {
+        bg: string;
         py: number;
         pr: number;
         my: number;

package/lib/cjs/components/Badge/Badge.styles.js

@@ -59,6 +59,7 @@ var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   }
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  bg: '#4462ED !important',
   py: 3,
   pr: 0,
   my: 3
@@ -71,12 +72,15 @@ var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
 var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   p: 3,
   my: 0,
-  backgroundColor: 'white',
+  bg: 'white !important',
   '& span': {
     color: 'text.primary',
     mr: '2px',
     lineHeight: '16px'
   },
+  '& svg': {
+    fill: 'neutral.10'
+  },
   maxHeight: '22px'
 });
 var environmentBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -114,7 +118,7 @@ var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
     }
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'white'
     },
     bg: '#4462ED !important'

package/lib/cjs/components/ListBox/Option.js

@@ -136,19 +136,23 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? (0, _react2.jsx)(_Icon["default"], {
+  }), isCondensed ? (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, (0, _react2.jsx)(_Icon["default"], {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
     size: "24px",
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && !isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon["default"], {
+  }), rendered) : (0, _react2.jsx)(_react["default"].Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"],
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered, isSelected && isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon["default"], {
+  }), rendered), isSelected && isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon["default"], {
     icon: _CheckIcon["default"],
     title: {
       name: 'Check Icon'

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -414,7 +414,6 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }, (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
-      bg: "active",
       variant: "selectedItemBadge",
       label: item.name,
       slots: item.slots

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -30,10 +30,11 @@ var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _PlusCircleMultipleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusCircleMultipleOutlineIcon"));
 var _i18n = require("@react-aria/i18n");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _users = require("../../api/users");
@@ -120,99 +121,6 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var VariableIcon = function VariableIcon(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "variable-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "variable-icon-title"
-  }, "Variable Icon"), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip0_709_18965)"
-  }, (0, _react2.jsx)("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#7AC7F2"
-  }), (0, _react2.jsx)("path", {
-    d: "M11.5042 4.25C12.0833 5.37917 12.3125 6.68333 12.1667 8C12.0833 9.31667 11.625 10.6208 10.8458 11.75L10.2083 11.3333C10.8792 10.3208 11.2708 9.16667 11.3333 8C11.475 6.83333 11.2875 5.67917 10.7917 4.66667L11.5042 4.25ZM5.15416 4.25L5.79166 4.66667C5.12083 5.67917 4.72916 6.83333 4.66666 8C4.525 9.16667 4.71666 10.3208 5.20833 11.3333L4.50416 11.75C3.92083 10.6208 3.6875 9.32083 3.83333 8C3.91666 6.68333 4.375 5.37917 5.15416 4.25ZM8.03333 7.45L9 6.10417H10.0542L8.47916 8.1875L9.39583 10.2375H8.45416L7.87916 8.83333L6.86666 10.2208H5.81666L7.44166 8.0875L6.55416 6.10417H7.5L8.03333 7.45Z",
-    fill: "#7AC7F2"
-  })), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
-    id: "clip0_709_18965"
-  }, (0, _react2.jsx)("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  }))));
-};
-var HTMLIcon = function HTMLIcon(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "html-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "html-icon-title"
-  }, "HTML Icon"), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip0_709_18936)"
-  }, (0, _react2.jsx)("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#2E5EA6"
-  }), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip1_709_18936)"
-  }, (0, _react2.jsx)("path", {
-    d: "M9.81667 8.83325C9.85 8.55825 9.875 8.28325 9.875 7.99992C9.875 7.71659 9.85 7.44159 9.81667 7.16659H11.225C11.2917 7.43325 11.3333 7.71242 11.3333 7.99992C11.3333 8.28742 11.2917 8.56659 11.225 8.83325H9.81667ZM9.07917 11.1499C9.32917 10.6874 9.52084 10.1874 9.65417 9.66659H10.8833C10.4833 10.3541 9.84584 10.8874 9.07917 11.1499ZM8.975 8.83325H7.025C6.98334 8.55825 6.95834 8.28325 6.95834 7.99992C6.95834 7.71659 6.98334 7.43742 7.025 7.16659H8.975C9.0125 7.43742 9.04167 7.71659 9.04167 7.99992C9.04167 8.28325 9.0125 8.55825 8.975 8.83325ZM8 11.3166C7.65417 10.8166 7.375 10.2624 7.20417 9.66659H8.79584C8.625 10.2624 8.34584 10.8166 8 11.3166ZM6.33334 6.33325H5.11667C5.5125 5.64159 6.15417 5.10825 6.91667 4.84992C6.66667 5.31242 6.47917 5.81242 6.33334 6.33325ZM5.11667 9.66659H6.33334C6.47917 10.1874 6.66667 10.6874 6.91667 11.1499C6.15417 10.8874 5.5125 10.3541 5.11667 9.66659ZM4.775 8.83325C4.70834 8.56659 4.66667 8.28742 4.66667 7.99992C4.66667 7.71242 4.70834 7.43325 4.775 7.16659H6.18334C6.15 7.44159 6.125 7.71659 6.125 7.99992C6.125 8.28325 6.15 8.55825 6.18334 8.83325H4.775ZM8 4.67909C8.34584 5.17909 8.625 5.73742 8.79584 6.33325H7.20417C7.375 5.73742 7.65417 5.17909 8 4.67909ZM10.8833 6.33325H9.65417C9.52084 5.81242 9.32917 5.31242 9.07917 4.84992C9.84584 5.11242 10.4833 5.64159 10.8833 6.33325ZM8 3.83325C5.69584 3.83325 3.83334 5.70825 3.83334 7.99992C3.83334 9.10499 4.27232 10.1648 5.05372 10.9462C5.44064 11.3331 5.89996 11.64 6.40549 11.8494C6.91101 12.0588 7.45283 12.1666 8 12.1666C9.10507 12.1666 10.1649 11.7276 10.9463 10.9462C11.7277 10.1648 12.1667 9.10499 12.1667 7.99992C12.1667 7.45274 12.0589 6.91093 11.8495 6.4054C11.6401 5.89988 11.3332 5.44055 10.9463 5.05364C10.5594 4.66673 10.1 4.35982 9.59452 4.15042C9.08899 3.94103 8.54718 3.83325 8 3.83325Z",
-    fill: "#4660A2"
-  }))), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip2_709_18936)"
-  }, (0, _react2.jsx)("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#2E5EA6"
-  }), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip3_709_18936)"
-  }, (0, _react2.jsx)("path", {
-    d: "M9.81667 8.83325C9.85 8.55825 9.875 8.28325 9.875 7.99992C9.875 7.71659 9.85 7.44159 9.81667 7.16659H11.225C11.2917 7.43325 11.3333 7.71242 11.3333 7.99992C11.3333 8.28742 11.2917 8.56659 11.225 8.83325H9.81667ZM9.07917 11.1499C9.32917 10.6874 9.52084 10.1874 9.65417 9.66659H10.8833C10.4833 10.3541 9.84584 10.8874 9.07917 11.1499ZM8.975 8.83325H7.025C6.98334 8.55825 6.95834 8.28325 6.95834 7.99992C6.95834 7.71659 6.98334 7.43742 7.025 7.16659H8.975C9.0125 7.43742 9.04167 7.71659 9.04167 7.99992C9.04167 8.28325 9.0125 8.55825 8.975 8.83325ZM8 11.3166C7.65417 10.8166 7.375 10.2624 7.20417 9.66659H8.79584C8.625 10.2624 8.34584 10.8166 8 11.3166ZM6.33334 6.33325H5.11667C5.5125 5.64159 6.15417 5.10825 6.91667 4.84992C6.66667 5.31242 6.47917 5.81242 6.33334 6.33325ZM5.11667 9.66659H6.33334C6.47917 10.1874 6.66667 10.6874 6.91667 11.1499C6.15417 10.8874 5.5125 10.3541 5.11667 9.66659ZM4.775 8.83325C4.70834 8.56659 4.66667 8.28742 4.66667 7.99992C4.66667 7.71242 4.70834 7.43325 4.775 7.16659H6.18334C6.15 7.44159 6.125 7.71659 6.125 7.99992C6.125 8.28325 6.15 8.55825 6.18334 8.83325H4.775ZM8 4.67909C8.34584 5.17909 8.625 5.73742 8.79584 6.33325H7.20417C7.375 5.73742 7.65417 5.17909 8 4.67909ZM10.8833 6.33325H9.65417C9.52084 5.81242 9.32917 5.31242 9.07917 4.84992C9.84584 5.11242 10.4833 5.64159 10.8833 6.33325ZM8 3.83325C5.69584 3.83325 3.83334 5.70825 3.83334 7.99992C3.83334 9.10499 4.27232 10.1648 5.05372 10.9462C5.44064 11.3331 5.89996 11.64 6.40549 11.8494C6.91101 12.0588 7.45283 12.1666 8 12.1666C9.10507 12.1666 10.1649 11.7276 10.9463 10.9462C11.7277 10.1648 12.1667 9.10499 12.1667 7.99992C12.1667 7.45274 12.0589 6.91093 11.8495 6.4054C11.6401 5.89988 11.3332 5.44055 10.9463 5.05364C10.5594 4.66673 10.1 4.35982 9.59452 4.15042C9.08899 3.94103 8.54718 3.83325 8 3.83325Z",
-    fill: "#4660A2"
-  }))), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
-    className: "clip0_709_18936"
-  }, (0, _react2.jsx)("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  })), (0, _react2.jsx)("clipPath", {
-    className: "clip1_709_18936"
-  }, (0, _react2.jsx)("rect", {
-    width: "10",
-    height: "10",
-    fill: "white",
-    transform: "translate(3 3)"
-  })), (0, _react2.jsx)("clipPath", {
-    className: "clip2_709_18936"
-  }, (0, _react2.jsx)("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  })), (0, _react2.jsx)("clipPath", {
-    className: "clip3_709_18936"
-  }, (0, _react2.jsx)("rect", {
-    width: "10",
-    height: "10",
-    fill: "white",
-    transform: "translate(3 3)"
-  }))));
-};
 var items = [{
   id: 1,
   name: 'Aardvark',
@@ -309,15 +217,14 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   badgeProps: {
-    variant: 'itemBadgeWithSlot',
-    bg: 'white'
+    variant: 'itemBadgeWithSlot'
   },
   buttonProps: {
     variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_index.Icon, {
-      icon: VariableIcon,
+      icon: _PlusCircleMultipleOutlineIcon["default"],
       size: 16
     })
   }
@@ -326,15 +233,14 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   badgeProps: {
-    variant: 'itemBadgeWithSlot',
-    bg: 'white'
+    variant: 'itemBadgeWithSlot'
   },
   buttonProps: {
     variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_index.Icon, {
-      icon: HTMLIcon,
+      icon: _PlusCircleMultipleOutlineIcon["default"],
       size: 16
     })
   }
@@ -343,15 +249,14 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   badgeProps: {
-    variant: 'itemBadgeWithSlot',
-    bg: 'white'
+    variant: 'itemBadgeWithSlot'
   },
   buttonProps: {
     variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_index.Icon, {
-      icon: HTMLIcon,
+      icon: _PlusCircleMultipleOutlineIcon["default"],
       size: 16
     })
   }

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -339,5 +339,14 @@ declare const buttons: {
             };
         };
     };
+    listBoxLink: {
+        color: string;
+        '&.is-pressed': {
+            color: string;
+        };
+        '&.is-focused': {
+            color: string;
+        };
+    };
 };
 export default buttons;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -278,11 +278,20 @@ var buttons = {
     },
     '&.is-focused': {
       textDecoration: 'underline',
-      color: _chromaJs["default"].mix(_colorTokens.nextGenColors['blue-500'], 'white', 0.30, 'rgb').hex(),
+      color: _chromaJs["default"].mix(_colorTokens.nextGenColors['blue-500'], 'white', 0.3, 'rgb').hex(),
       outline: 'none'
     }
   },
-  iconButtons: iconButtons
+  iconButtons: iconButtons,
+  listBoxLink: {
+    color: 'blue-400',
+    '&.is-pressed': {
+      color: _chromaJs["default"].mix(_colorTokens.nextGenColors['blue-500'], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      color: _chromaJs["default"].mix(_colorTokens.nextGenColors['blue-500'], 'white', 0.3, 'rgb').hex()
+    }
+  }
 };
 var _default = buttons;
 exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -471,6 +471,12 @@ declare const _default: {
             color: string;
         };
     };
+    popoverMenu: {
+        container: {
+            background: string;
+            border: string;
+        };
+    };
     dataTable: {
         selectableTableRow: {
             '&.is-selected': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -20,7 +20,7 @@ var listBox = {
   container: {
     backgroundColor: 'background.base',
     border: '1px solid',
-    borderColor: 'border.input',
+    borderColor: 'transparent',
     borderRadius: '4px'
   },
   option: {
@@ -170,6 +170,12 @@ var _default = {
   skeleton: _skeleton["default"],
   footer: _footer.footer,
   tooltip: tooltip,
+  popoverMenu: {
+    container: {
+      background: '#23282e',
+      border: '1px solid #69788B'
+    }
+  },
   dataTable: {
     selectableTableRow: {
       '&.is-selected': {

package/lib/cjs/styles/themes/next-gen/convertedComponentList.d.ts

@@ -7,7 +7,6 @@ export declare const componentSpecificNextGenBlacklist: {
     OverlayPanel: string[];
     DataTable: string[];
     Text: string[];
-    MultivaluesField: string[];
     Tabs: string[];
 };
 export declare const astroBlacklistStory: {

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -14,7 +14,6 @@ var componentSpecificNextGenBlacklist = {
   OverlayPanel: ['Expandable'],
   DataTable: ['Default'],
   Text: ['Default'],
-  MultivaluesField: ['Icon Slots In Badge'],
   Tabs: ['Vertical Orientation']
 };
 exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -2861,6 +2861,9 @@ declare const _default: {
                 fontSize: string;
                 fontWeight: number;
             };
+            '& svg': {
+                fill: string;
+            };
             border: string;
             '& button': {
                 alignSelf: string;
@@ -2875,11 +2878,6 @@ declare const _default: {
                     };
                 };
             };
-            '& svg': {
-                path: {
-                    fill: string;
-                };
-            };
             alignItems: string;
             justifyContent: string;
             py: string;

package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts

@@ -787,6 +787,9 @@ export declare const badges: {
             fontSize: string;
             fontWeight: number;
         };
+        '& svg': {
+            fill: string;
+        };
         border: string;
         '& button': {
             alignSelf: string;
@@ -801,11 +804,6 @@ export declare const badges: {
                 };
             };
         };
-        '& svg': {
-            path: {
-                fill: string;
-            };
-        };
         alignItems: string;
         justifyContent: string;
         py: string;

package/lib/cjs/styles/themes/next-gen/variants/badges.js

@@ -105,11 +105,14 @@ var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   })
 });
 var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#f6f8fa !important',
+  bg: '#EAF2FD !important',
   fontWeight: 2,
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
-  })
+  }),
+  '& svg': {
+    fill: 'gray-900'
+  }
 });
 var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
   borderRadius: '50%',

package/lib/components/Badge/Badge.styles.js

@@ -51,6 +51,7 @@ var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   }
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  bg: '#4462ED !important',
   py: 3,
   pr: 0,
   my: 3
@@ -63,12 +64,15 @@ var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
 var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   p: 3,
   my: 0,
-  backgroundColor: 'white',
+  bg: 'white !important',
   '& span': {
     color: 'text.primary',
     mr: '2px',
     lineHeight: '16px'
   },
+  '& svg': {
+    fill: 'neutral.10'
+  },
   maxHeight: '22px'
 });
 var environmentBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -105,7 +109,7 @@ export var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}
     }
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'white'
     },
     bg: '#4462ED !important'

package/lib/components/ListBox/Option.js

@@ -125,19 +125,23 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? ___EmotionJSX(Icon, {
+  }), isCondensed ? ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
     size: "24px",
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
+  }), rendered) : ___EmotionJSX(React.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered, isSelected && isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
+  }), rendered), isSelected && isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
     icon: CheckIcon,
     title: {
       name: 'Check Icon'

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -402,7 +402,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }, ___EmotionJSX(Badge, _extends({
       key: item.key,
       role: "presentation",
-      bg: "active",
       variant: "selectedItemBadge",
       label: item.name,
       slots: item.slots

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -13,8 +13,8 @@ import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -27,6 +27,7 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context14, _context15; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context14 = ownKeys(Object(source), !0)).call(_context14, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context15 = ownKeys(Object(source))).call(_context15, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useEffect, useState } from 'react';
+import PlusCircleMultipleOutlineIcon from '@pingux/mdi-react/PlusCircleMultipleOutlineIcon';
 import { useFilter } from '@react-aria/i18n';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { getAllUsers } from '../../api/users';
@@ -107,99 +108,6 @@ export default {
     }
   }
 };
-var VariableIcon = function VariableIcon(props) {
-  return ___EmotionJSX("svg", _extends({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "variable-icon-title"
-  }, props), ___EmotionJSX("title", {
-    id: "variable-icon-title"
-  }, "Variable Icon"), ___EmotionJSX("g", {
-    clipPath: "url(#clip0_709_18965)"
-  }, ___EmotionJSX("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#7AC7F2"
-  }), ___EmotionJSX("path", {
-    d: "M11.5042 4.25C12.0833 5.37917 12.3125 6.68333 12.1667 8C12.0833 9.31667 11.625 10.6208 10.8458 11.75L10.2083 11.3333C10.8792 10.3208 11.2708 9.16667 11.3333 8C11.475 6.83333 11.2875 5.67917 10.7917 4.66667L11.5042 4.25ZM5.15416 4.25L5.79166 4.66667C5.12083 5.67917 4.72916 6.83333 4.66666 8C4.525 9.16667 4.71666 10.3208 5.20833 11.3333L4.50416 11.75C3.92083 10.6208 3.6875 9.32083 3.83333 8C3.91666 6.68333 4.375 5.37917 5.15416 4.25ZM8.03333 7.45L9 6.10417H10.0542L8.47916 8.1875L9.39583 10.2375H8.45416L7.87916 8.83333L6.86666 10.2208H5.81666L7.44166 8.0875L6.55416 6.10417H7.5L8.03333 7.45Z",
-    fill: "#7AC7F2"
-  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
-    id: "clip0_709_18965"
-  }, ___EmotionJSX("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  }))));
-};
-var HTMLIcon = function HTMLIcon(props) {
-  return ___EmotionJSX("svg", _extends({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "html-icon-title"
-  }, props), ___EmotionJSX("title", {
-    id: "html-icon-title"
-  }, "HTML Icon"), ___EmotionJSX("g", {
-    clipPath: "url(#clip0_709_18936)"
-  }, ___EmotionJSX("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#2E5EA6"
-  }), ___EmotionJSX("g", {
-    clipPath: "url(#clip1_709_18936)"
-  }, ___EmotionJSX("path", {
-    d: "M9.81667 8.83325C9.85 8.55825 9.875 8.28325 9.875 7.99992C9.875 7.71659 9.85 7.44159 9.81667 7.16659H11.225C11.2917 7.43325 11.3333 7.71242 11.3333 7.99992C11.3333 8.28742 11.2917 8.56659 11.225 8.83325H9.81667ZM9.07917 11.1499C9.32917 10.6874 9.52084 10.1874 9.65417 9.66659H10.8833C10.4833 10.3541 9.84584 10.8874 9.07917 11.1499ZM8.975 8.83325H7.025C6.98334 8.55825 6.95834 8.28325 6.95834 7.99992C6.95834 7.71659 6.98334 7.43742 7.025 7.16659H8.975C9.0125 7.43742 9.04167 7.71659 9.04167 7.99992C9.04167 8.28325 9.0125 8.55825 8.975 8.83325ZM8 11.3166C7.65417 10.8166 7.375 10.2624 7.20417 9.66659H8.79584C8.625 10.2624 8.34584 10.8166 8 11.3166ZM6.33334 6.33325H5.11667C5.5125 5.64159 6.15417 5.10825 6.91667 4.84992C6.66667 5.31242 6.47917 5.81242 6.33334 6.33325ZM5.11667 9.66659H6.33334C6.47917 10.1874 6.66667 10.6874 6.91667 11.1499C6.15417 10.8874 5.5125 10.3541 5.11667 9.66659ZM4.775 8.83325C4.70834 8.56659 4.66667 8.28742 4.66667 7.99992C4.66667 7.71242 4.70834 7.43325 4.775 7.16659H6.18334C6.15 7.44159 6.125 7.71659 6.125 7.99992C6.125 8.28325 6.15 8.55825 6.18334 8.83325H4.775ZM8 4.67909C8.34584 5.17909 8.625 5.73742 8.79584 6.33325H7.20417C7.375 5.73742 7.65417 5.17909 8 4.67909ZM10.8833 6.33325H9.65417C9.52084 5.81242 9.32917 5.31242 9.07917 4.84992C9.84584 5.11242 10.4833 5.64159 10.8833 6.33325ZM8 3.83325C5.69584 3.83325 3.83334 5.70825 3.83334 7.99992C3.83334 9.10499 4.27232 10.1648 5.05372 10.9462C5.44064 11.3331 5.89996 11.64 6.40549 11.8494C6.91101 12.0588 7.45283 12.1666 8 12.1666C9.10507 12.1666 10.1649 11.7276 10.9463 10.9462C11.7277 10.1648 12.1667 9.10499 12.1667 7.99992C12.1667 7.45274 12.0589 6.91093 11.8495 6.4054C11.6401 5.89988 11.3332 5.44055 10.9463 5.05364C10.5594 4.66673 10.1 4.35982 9.59452 4.15042C9.08899 3.94103 8.54718 3.83325 8 3.83325Z",
-    fill: "#4660A2"
-  }))), ___EmotionJSX("g", {
-    clipPath: "url(#clip2_709_18936)"
-  }, ___EmotionJSX("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#2E5EA6"
-  }), ___EmotionJSX("g", {
-    clipPath: "url(#clip3_709_18936)"
-  }, ___EmotionJSX("path", {
-    d: "M9.81667 8.83325C9.85 8.55825 9.875 8.28325 9.875 7.99992C9.875 7.71659 9.85 7.44159 9.81667 7.16659H11.225C11.2917 7.43325 11.3333 7.71242 11.3333 7.99992C11.3333 8.28742 11.2917 8.56659 11.225 8.83325H9.81667ZM9.07917 11.1499C9.32917 10.6874 9.52084 10.1874 9.65417 9.66659H10.8833C10.4833 10.3541 9.84584 10.8874 9.07917 11.1499ZM8.975 8.83325H7.025C6.98334 8.55825 6.95834 8.28325 6.95834 7.99992C6.95834 7.71659 6.98334 7.43742 7.025 7.16659H8.975C9.0125 7.43742 9.04167 7.71659 9.04167 7.99992C9.04167 8.28325 9.0125 8.55825 8.975 8.83325ZM8 11.3166C7.65417 10.8166 7.375 10.2624 7.20417 9.66659H8.79584C8.625 10.2624 8.34584 10.8166 8 11.3166ZM6.33334 6.33325H5.11667C5.5125 5.64159 6.15417 5.10825 6.91667 4.84992C6.66667 5.31242 6.47917 5.81242 6.33334 6.33325ZM5.11667 9.66659H6.33334C6.47917 10.1874 6.66667 10.6874 6.91667 11.1499C6.15417 10.8874 5.5125 10.3541 5.11667 9.66659ZM4.775 8.83325C4.70834 8.56659 4.66667 8.28742 4.66667 7.99992C4.66667 7.71242 4.70834 7.43325 4.775 7.16659H6.18334C6.15 7.44159 6.125 7.71659 6.125 7.99992C6.125 8.28325 6.15 8.55825 6.18334 8.83325H4.775ZM8 4.67909C8.34584 5.17909 8.625 5.73742 8.79584 6.33325H7.20417C7.375 5.73742 7.65417 5.17909 8 4.67909ZM10.8833 6.33325H9.65417C9.52084 5.81242 9.32917 5.31242 9.07917 4.84992C9.84584 5.11242 10.4833 5.64159 10.8833 6.33325ZM8 3.83325C5.69584 3.83325 3.83334 5.70825 3.83334 7.99992C3.83334 9.10499 4.27232 10.1648 5.05372 10.9462C5.44064 11.3331 5.89996 11.64 6.40549 11.8494C6.91101 12.0588 7.45283 12.1666 8 12.1666C9.10507 12.1666 10.1649 11.7276 10.9463 10.9462C11.7277 10.1648 12.1667 9.10499 12.1667 7.99992C12.1667 7.45274 12.0589 6.91093 11.8495 6.4054C11.6401 5.89988 11.3332 5.44055 10.9463 5.05364C10.5594 4.66673 10.1 4.35982 9.59452 4.15042C9.08899 3.94103 8.54718 3.83325 8 3.83325Z",
-    fill: "#4660A2"
-  }))), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
-    className: "clip0_709_18936"
-  }, ___EmotionJSX("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  })), ___EmotionJSX("clipPath", {
-    className: "clip1_709_18936"
-  }, ___EmotionJSX("rect", {
-    width: "10",
-    height: "10",
-    fill: "white",
-    transform: "translate(3 3)"
-  })), ___EmotionJSX("clipPath", {
-    className: "clip2_709_18936"
-  }, ___EmotionJSX("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  })), ___EmotionJSX("clipPath", {
-    className: "clip3_709_18936"
-  }, ___EmotionJSX("rect", {
-    width: "10",
-    height: "10",
-    fill: "white",
-    transform: "translate(3 3)"
-  }))));
-};
 var items = [{
   id: 1,
   name: 'Aardvark',
@@ -296,15 +204,14 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   badgeProps: {
-    variant: 'itemBadgeWithSlot',
-    bg: 'white'
+    variant: 'itemBadgeWithSlot'
   },
   buttonProps: {
     variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
-      icon: VariableIcon,
+      icon: PlusCircleMultipleOutlineIcon,
       size: 16
     })
   }
@@ -313,15 +220,14 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   badgeProps: {
-    variant: 'itemBadgeWithSlot',
-    bg: 'white'
+    variant: 'itemBadgeWithSlot'
   },
   buttonProps: {
     variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
-      icon: HTMLIcon,
+      icon: PlusCircleMultipleOutlineIcon,
       size: 16
     })
   }
@@ -330,15 +236,14 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   badgeProps: {
-    variant: 'itemBadgeWithSlot',
-    bg: 'white'
+    variant: 'itemBadgeWithSlot'
   },
   buttonProps: {
     variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
-      icon: HTMLIcon,
+      icon: PlusCircleMultipleOutlineIcon,
       size: 16
     })
   }

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -271,10 +271,19 @@ var buttons = {
     },
     '&.is-focused': {
       textDecoration: 'underline',
-      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.30, 'rgb').hex(),
+      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.3, 'rgb').hex(),
       outline: 'none'
     }
   },
-  iconButtons: iconButtons
+  iconButtons: iconButtons,
+  listBoxLink: {
+    color: 'blue-400',
+    '&.is-pressed': {
+      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.3, 'rgb').hex()
+    }
+  }
 };
 export default buttons;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -12,7 +12,7 @@ var listBox = {
   container: {
     backgroundColor: 'background.base',
     border: '1px solid',
-    borderColor: 'border.input',
+    borderColor: 'transparent',
     borderRadius: '4px'
   },
   option: {
@@ -162,6 +162,12 @@ export default {
   skeleton: skeleton,
   footer: footer,
   tooltip: tooltip,
+  popoverMenu: {
+    container: {
+      background: '#23282e',
+      border: '1px solid #69788B'
+    }
+  },
   dataTable: {
     selectableTableRow: {
       '&.is-selected': {

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -7,7 +7,6 @@ export var componentSpecificNextGenBlacklist = {
   OverlayPanel: ['Expandable'],
   DataTable: ['Default'],
   Text: ['Default'],
-  MultivaluesField: ['Icon Slots In Badge'],
   Tabs: ['Vertical Orientation']
 };
 export var astroBlacklistStory = {

package/lib/styles/themes/next-gen/variants/badges.js

@@ -98,11 +98,14 @@ var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   })
 });
 var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#f6f8fa !important',
+  bg: '#EAF2FD !important',
   fontWeight: 2,
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
-  })
+  }),
+  '& svg': {
+    fill: 'gray-900'
+  }
 });
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {
   borderRadius: '50%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.147.1-alpha.1",
+  "version": "2.148.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",