@pingux/astro 1.37.2 → 1.38.0-alpha.0

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

@@ -6,8 +6,8 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 
 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; }
@@ -15,7 +15,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState } from 'react';
-import { Box, Item, MultivaluesField, OverlayProvider } from '../../';
+import { Box, Item, MultivaluesField, OverlayProvider, Icon } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -90,6 +90,96 @@ 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"
+  }, props), ___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"
+  }, props), ___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", {
+    id: "clip0_709_18936"
+  }, ___EmotionJSX("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  })), ___EmotionJSX("clipPath", {
+    id: "clip1_709_18936"
+  }, ___EmotionJSX("rect", {
+    width: "10",
+    height: "10",
+    fill: "white",
+    transform: "translate(3 3)"
+  })), ___EmotionJSX("clipPath", {
+    id: "clip2_709_18936"
+  }, ___EmotionJSX("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  })), ___EmotionJSX("clipPath", {
+    id: "clip3_709_18936"
+  }, ___EmotionJSX("rect", {
+    width: "10",
+    height: "10",
+    fill: "white",
+    transform: "translate(3 3)"
+  }))));
+};
+
 var items = [{
   id: 1,
   name: 'Aardvark',
@@ -119,6 +209,58 @@ var items = [{
   name: 'Shark',
   key: 'Shark'
 }];
+var itemsWithSlots = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark',
+  chipProps: {
+    variant: 'boxes.itemChipWithSlot',
+    bg: 'white'
+  },
+  buttonProps: {
+    variant: 'buttons.chipWithSlotDeleteButton'
+  },
+  slots: {
+    leftIcon: ___EmotionJSX(Icon, {
+      icon: VariableIcon,
+      size: 16
+    })
+  }
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo',
+  chipProps: {
+    variant: 'boxes.itemChipWithSlot',
+    bg: 'white'
+  },
+  buttonProps: {
+    variant: 'buttons.chipWithSlotDeleteButton'
+  },
+  slots: {
+    leftIcon: ___EmotionJSX(Icon, {
+      icon: HTMLIcon,
+      size: 16
+    })
+  }
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake',
+  chipProps: {
+    variant: 'boxes.itemChipWithSlot',
+    bg: 'white'
+  },
+  buttonProps: {
+    variant: 'buttons.chipWithSlotDeleteButton'
+  },
+  slots: {
+    leftIcon: ___EmotionJSX(Icon, {
+      icon: HTMLIcon,
+      size: 16
+    })
+  }
+}];
 
 var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
   return {
@@ -154,7 +296,7 @@ export var Default = function Default(args) {
     }, item.name);
   }));
 };
-export var WithCustomValues = function WithCustomValues(args) {
+export var Uncontrolled = function Uncontrolled(args) {
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       isOpen = _useState4[0],
@@ -170,8 +312,8 @@ export var WithCustomValues = function WithCustomValues(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
-    items: items,
-    mode: "non-restrictive"
+    defaultSelectedKeys: ['Aardvark', 'Snake'],
+    items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
@@ -181,16 +323,16 @@ export var WithCustomValues = function WithCustomValues(args) {
     }, item.name);
   }));
 };
-WithCustomValues.argTypes = {
-  mode: {
-    defaultValue: 'non-restrictive'
-  }
-};
-export var WithDisabledKeys = function WithDisabledKeys(args) {
-  var _useState5 = useState(false),
+export var Controlled = function Controlled(args) {
+  var _useState5 = useState(['Aardvark', 'Snake']),
       _useState6 = _slicedToArray(_useState5, 2),
-      isOpen = _useState6[0],
-      setIsOpen = _useState6[1];
+      selectedKeys = _useState6[0],
+      setSelectedKeys = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
 
   var direction = args.direction;
 
@@ -202,9 +344,11 @@ export var WithDisabledKeys = function WithDisabledKeys(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
-    disabledKeys: ['Aardvark'],
-    items: items
+    label: "Field Label"
   }, args, {
+    items: items,
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys,
     onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
@@ -213,11 +357,11 @@ export var WithDisabledKeys = function WithDisabledKeys(args) {
     }, item.name);
   }));
 };
-export var Uncontrolled = function Uncontrolled(args) {
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isOpen = _useState8[0],
-      setIsOpen = _useState8[1];
+export var Error = function Error(args) {
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1];
 
   var direction = args.direction;
 
@@ -228,10 +372,10 @@ export var Uncontrolled = function Uncontrolled(args) {
   return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, ___EmotionJSX(MultivaluesField, _extends({
-    defaultSelectedKeys: ['Aardvark', 'Snake'],
-    items: items
-  }, args, {
+  }, ___EmotionJSX(MultivaluesField, _extends({}, args, {
+    items: items,
+    helperText: "Here is some helpful text...",
+    status: "error",
     onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
@@ -240,12 +384,7 @@ export var Uncontrolled = function Uncontrolled(args) {
     }, item.name);
   }));
 };
-export var Controlled = function Controlled(args) {
-  var _useState9 = useState(['Aardvark', 'Snake']),
-      _useState10 = _slicedToArray(_useState9, 2),
-      selectedKeys = _useState10[0],
-      setSelectedKeys = _useState10[1];
-
+export var ReadOnlyField = function ReadOnlyField(args) {
   var _useState11 = useState(false),
       _useState12 = _slicedToArray(_useState11, 2),
       isOpen = _useState12[0],
@@ -261,11 +400,9 @@ export var Controlled = function Controlled(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
-    label: "Field Label"
+    items: items
   }, args, {
-    items: items,
-    onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys,
+    isReadOnly: true,
     onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
@@ -274,7 +411,7 @@ export var Controlled = function Controlled(args) {
     }, item.name);
   }));
 };
-export var WithCustomSize = function WithCustomSize(args) {
+export var ReadOnlyValues = function ReadOnlyValues(args) {
   var _useState13 = useState(false),
       _useState14 = _slicedToArray(_useState13, 2),
       isOpen = _useState14[0],
@@ -286,18 +423,11 @@ export var WithCustomSize = function WithCustomSize(args) {
     setIsOpen(true);
   };
 
-  return ___EmotionJSX(Box, {
-    sx: {
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, ___EmotionJSX(Box, {
-    width: 300
-  }, ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
-    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
+    readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
@@ -306,9 +436,9 @@ export var WithCustomSize = function WithCustomSize(args) {
       key: item.key,
       "data-id": item.name
     }, item.name);
-  }))));
+  }));
 };
-export var WithReadOnlyValues = function WithReadOnlyValues(args) {
+export var DisabledKeys = function DisabledKeys(args) {
   var _useState15 = useState(false),
       _useState16 = _slicedToArray(_useState15, 2),
       isOpen = _useState16[0],
@@ -324,7 +454,7 @@ export var WithReadOnlyValues = function WithReadOnlyValues(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
-    readOnlyKeys: ['Aardvark', 'Snake'],
+    disabledKeys: ['Aardvark'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
@@ -335,7 +465,7 @@ export var WithReadOnlyValues = function WithReadOnlyValues(args) {
     }, item.name);
   }));
 };
-export var Error = function Error(args) {
+export var CustomValues = function CustomValues(args) {
   var _useState17 = useState(false),
       _useState18 = _slicedToArray(_useState17, 2),
       isOpen = _useState18[0],
@@ -350,10 +480,10 @@ export var Error = function Error(args) {
   return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, ___EmotionJSX(MultivaluesField, _extends({}, args, {
+  }, ___EmotionJSX(MultivaluesField, _extends({
     items: items,
-    helperText: "Here is some helpful text...",
-    status: "error",
+    mode: "non-restrictive"
+  }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
@@ -362,7 +492,12 @@ export var Error = function Error(args) {
     }, item.name);
   }));
 };
-export var ReadOnlyField = function ReadOnlyField(args) {
+CustomValues.argTypes = {
+  mode: {
+    defaultValue: 'non-restrictive'
+  }
+};
+export var IconSlotsInChip = function IconSlotsInChip(args) {
   var _useState19 = useState(false),
       _useState20 = _slicedToArray(_useState19, 2),
       isOpen = _useState20[0],
@@ -378,9 +513,8 @@ export var ReadOnlyField = function ReadOnlyField(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
-    items: items
+    items: itemsWithSlots
   }, args, {
-    isReadOnly: true,
     onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
@@ -388,4 +522,38 @@ export var ReadOnlyField = function ReadOnlyField(args) {
       "data-id": item.name
     }, item.name);
   }));
+};
+export var CustomSize = function CustomSize(args) {
+  var _useState21 = useState(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      isOpen = _useState22[0],
+      setIsOpen = _useState22[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, ___EmotionJSX(Box, {
+    width: 300
+  }, ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }))));
 };

package/lib/styles/variants/boxes.js

@@ -173,7 +173,10 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   cursor: 'default',
   m: 5,
   mr: 10,
-  ml: 0
+  ml: 0,
+  '& span': {
+    mr: '2px'
+  }
 });
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
@@ -188,6 +191,18 @@ var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
   borderColor: 'neutral.80'
 });
 
+var itemChipWithSlot = _objectSpread(_objectSpread({}, readOnlyChip), {}, {
+  p: 3,
+  my: 0,
+  backgroundColor: 'white',
+  '& span': {
+    color: 'text.primary',
+    mr: '2px',
+    lineHeight: '16px'
+  },
+  maxHeight: '22px'
+});
+
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',
@@ -386,6 +401,7 @@ export default {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  itemChipWithSlot: itemChipWithSlot,
   textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,

package/lib/styles/variants/buttons.js

@@ -413,13 +413,16 @@ var quiet = {
   all: 'unset',
   display: 'flex'
 };
-var chipDeleteButton = {
+var chipDeleteStandard = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  mx: '3px !important',
   p: 0,
   width: 14,
+  mx: '3px !important'
+};
+
+var chipDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
   '&.is-focused, &.is-hovered': _objectSpread({
     bg: 'accent.40'
   }, focusWithCroppedOutline),
@@ -427,7 +430,26 @@ var chipDeleteButton = {
     bg: 'accent.20',
     borderColor: 'accent.20'
   }
-};
+});
+
+var chipWithSlotDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
+  path: {
+    fill: 'neutral.40'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    backgroundColor: '#e5e9f8 !important',
+    path: {
+      fill: 'neutral.40'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: '#4462ED !important'
+  }
+});
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
   border: '0',
@@ -719,6 +741,7 @@ var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
+  chipWithSlotDeleteButton: chipWithSlotDeleteButton,
   close: close,
   colorField: colorField,
   comboBox: comboBox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.37.2",
+  "version": "1.38.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",