@pingux/astro 1.37.2-alpha.2 → 1.38.0-alpha.0

package/lib/cjs/components/Chip/Chip.js

@@ -66,7 +66,8 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       textProps = props.textProps,
       label = props.label,
       align = props.align,
-      isUppercase = props.isUppercase;
+      isUppercase = props.isUppercase,
+      slots = props.slots;
 
   var sx = _objectSpread({}, isUppercase && {
     paddingBottom: '3px'
@@ -86,7 +87,9 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     variant: "boxes.chip",
     sx: sx,
     ref: ref
-  }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
+  }, props), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && (0, _react2.jsx)(_Box["default"], {
+    mr: "xs"
+  }, slots.leftIcon), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "label",
     color: textColor,
     sx: isUppercase && {
@@ -103,6 +106,12 @@ Chip.propTypes = {
   /** The background color of the chip. */
   bg: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 
+  /** Provides a way to insert markup in specified places. */
+  slots: _propTypes["default"].shape({
+    /** The given node will be inserted into left side of the chip. */
+    leftIcon: _propTypes["default"].node
+  }),
+
   /** The label of the chip. */
   label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.CountChip = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
+exports["default"] = exports.Default = exports.CountChip = exports.ChipWithLeftSlotAndIcon = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -80,6 +80,33 @@ 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"
+  }, props), (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 Default = function Default(_ref5) {
   var args = (0, _extends2["default"])({}, _ref5);
   return (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
@@ -157,4 +184,26 @@ var ChipWithIcon = function ChipWithIcon() {
   })));
 };
 
-exports.ChipWithIcon = ChipWithIcon;
+exports.ChipWithIcon = ChipWithIcon;
+
+var ChipWithLeftSlotAndIcon = function ChipWithLeftSlotAndIcon() {
+  return (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon Button and Left Slot",
+    bg: "white",
+    variant: "boxes.itemChipWithSlot",
+    slots: {
+      leftIcon: (0, _react2.jsx)(_Icon["default"], {
+        icon: VariableIcon,
+        size: 16
+      })
+    }
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "delete",
+    variant: "buttons.chipWithSlotDeleteButton"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _CloseIcon["default"],
+    size: 14
+  })));
+};
+
+exports.ChipWithLeftSlotAndIcon = ChipWithLeftSlotAndIcon;

package/lib/cjs/components/Chip/Chip.test.js

@@ -8,10 +8,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
+
 var _Chip = _interopRequireDefault(require("../Chip/Chip"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _react3 = require("@emotion/react");
@@ -62,4 +66,17 @@ test('renders Chip component with custom alignment', function () {
   });
   expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
   expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
+});
+test('renders Chip component with left slot', function () {
+  var slots = {
+    leftIcon: (0, _react3.jsx)(_Icon["default"], {
+      icon: _EarthIcon["default"],
+      size: 14,
+      "data-testid": "iconId"
+    })
+  };
+  getComponent({
+    slots: slots
+  });
+  expect(_react2.screen.getByTestId('iconId')).toBeInTheDocument();
 });

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

@@ -414,6 +414,28 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
     return null;
   }));
+
+  var multivaluesFieldChip = function multivaluesFieldChip(item) {
+    return (0, _react2.jsx)(_.Chip, (0, _extends2["default"])({
+      key: item.key,
+      role: "presentation",
+      variant: "boxes.selectedItemChip",
+      bg: "active",
+      label: item.name,
+      slots: item.slots
+    }, item.chipProps), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+      "aria-label": "delete",
+      onPress: function onPress() {
+        return deleteItem(item.key);
+      },
+      variant: "buttons.chipDeleteButton"
+    }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
+      icon: _CloseIcon["default"],
+      color: "white",
+      size: 14
+    })));
+  };
+
   var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context7 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context7, function (key) {
     var _context8, _context9;
 
@@ -422,23 +444,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     });
 
     if (item) {
-      return (0, _react2.jsx)(_.Chip, {
-        key: item.key,
-        role: "presentation",
-        variant: "boxes.selectedItemChip",
-        bg: "active",
-        label: item.name
-      }, (0, _react2.jsx)(_.IconButton, {
-        "aria-label": "delete",
-        onPress: function onPress() {
-          return deleteItem(item.key);
-        },
-        variant: "buttons.chipDeleteButton"
-      }, (0, _react2.jsx)(_.Icon, {
-        icon: _CloseIcon["default"],
-        color: "white",
-        size: 14
-      })));
+      return multivaluesFieldChip(item);
     }
 
     return null;

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

@@ -26,12 +26,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.ReadOnlyField = exports.Error = exports.Default = exports.Controlled = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.IconSlotsInChip = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -124,6 +124,96 @@ 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"
+  }, props), (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"
+  }, props), (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", {
+    id: "clip0_709_18936"
+  }, (0, _react2.jsx)("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  })), (0, _react2.jsx)("clipPath", {
+    id: "clip1_709_18936"
+  }, (0, _react2.jsx)("rect", {
+    width: "10",
+    height: "10",
+    fill: "white",
+    transform: "translate(3 3)"
+  })), (0, _react2.jsx)("clipPath", {
+    id: "clip2_709_18936"
+  }, (0, _react2.jsx)("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  })), (0, _react2.jsx)("clipPath", {
+    id: "clip3_709_18936"
+  }, (0, _react2.jsx)("rect", {
+    width: "10",
+    height: "10",
+    fill: "white",
+    transform: "translate(3 3)"
+  }))));
+};
+
 var items = [{
   id: 1,
   name: 'Aardvark',
@@ -153,6 +243,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: (0, _react2.jsx)(_.Icon, {
+      icon: VariableIcon,
+      size: 16
+    })
+  }
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo',
+  chipProps: {
+    variant: 'boxes.itemChipWithSlot',
+    bg: 'white'
+  },
+  buttonProps: {
+    variant: 'buttons.chipWithSlotDeleteButton'
+  },
+  slots: {
+    leftIcon: (0, _react2.jsx)(_.Icon, {
+      icon: HTMLIcon,
+      size: 16
+    })
+  }
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake',
+  chipProps: {
+    variant: 'boxes.itemChipWithSlot',
+    bg: 'white'
+  },
+  buttonProps: {
+    variant: 'buttons.chipWithSlotDeleteButton'
+  },
+  slots: {
+    leftIcon: (0, _react2.jsx)(_.Icon, {
+      icon: HTMLIcon,
+      size: 16
+    })
+  }
+}];
 
 var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
   return {
@@ -191,7 +333,7 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
-var WithCustomValues = function WithCustomValues(args) {
+var Uncontrolled = function Uncontrolled(args) {
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       isOpen = _useState4[0],
@@ -207,8 +349,8 @@ var WithCustomValues = function WithCustomValues(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    items: items,
-    mode: "non-restrictive"
+    defaultSelectedKeys: ['Aardvark', 'Snake'],
+    items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
@@ -219,18 +361,18 @@ var WithCustomValues = function WithCustomValues(args) {
   }));
 };
 
-exports.WithCustomValues = WithCustomValues;
-WithCustomValues.argTypes = {
-  mode: {
-    defaultValue: 'non-restrictive'
-  }
-};
+exports.Uncontrolled = Uncontrolled;
 
-var WithDisabledKeys = function WithDisabledKeys(args) {
-  var _useState5 = (0, _react.useState)(false),
+var Controlled = function Controlled(args) {
+  var _useState5 = (0, _react.useState)(['Aardvark', 'Snake']),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isOpen = _useState6[0],
-      setIsOpen = _useState6[1];
+      selectedKeys = _useState6[0],
+      setSelectedKeys = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
 
   var direction = args.direction;
 
@@ -242,9 +384,11 @@ var WithDisabledKeys = function WithDisabledKeys(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    disabledKeys: ['Aardvark'],
-    items: items
+    label: "Field Label"
   }, args, {
+    items: items,
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys,
     onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
@@ -254,13 +398,13 @@ var WithDisabledKeys = function WithDisabledKeys(args) {
   }));
 };
 
-exports.WithDisabledKeys = WithDisabledKeys;
+exports.Controlled = Controlled;
 
-var Uncontrolled = function Uncontrolled(args) {
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isOpen = _useState8[0],
-      setIsOpen = _useState8[1];
+var Error = function Error(args) {
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1];
 
   var direction = args.direction;
 
@@ -271,10 +415,10 @@ var Uncontrolled = function Uncontrolled(args) {
   return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    defaultSelectedKeys: ['Aardvark', 'Snake'],
-    items: items
-  }, args, {
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({}, args, {
+    items: items,
+    helperText: "Here is some helpful text...",
+    status: "error",
     onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
@@ -284,14 +428,9 @@ var Uncontrolled = function Uncontrolled(args) {
   }));
 };
 
-exports.Uncontrolled = Uncontrolled;
-
-var Controlled = function Controlled(args) {
-  var _useState9 = (0, _react.useState)(['Aardvark', 'Snake']),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      selectedKeys = _useState10[0],
-      setSelectedKeys = _useState10[1];
+exports.Error = Error;
 
+var ReadOnlyField = function ReadOnlyField(args) {
   var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
       isOpen = _useState12[0],
@@ -307,11 +446,9 @@ var Controlled = function Controlled(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    label: "Field Label"
+    items: items
   }, args, {
-    items: items,
-    onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys,
+    isReadOnly: true,
     onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
@@ -321,9 +458,9 @@ var Controlled = function Controlled(args) {
   }));
 };
 
-exports.Controlled = Controlled;
+exports.ReadOnlyField = ReadOnlyField;
 
-var WithCustomSize = function WithCustomSize(args) {
+var ReadOnlyValues = function ReadOnlyValues(args) {
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
       isOpen = _useState14[0],
@@ -335,18 +472,11 @@ var WithCustomSize = function WithCustomSize(args) {
     setIsOpen(true);
   };
 
-  return (0, _react2.jsx)(_.Box, {
-    sx: {
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, (0, _react2.jsx)(_.Box, {
-    width: 300
-  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return (0, _react2.jsx)(_.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%')
   }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
@@ -355,12 +485,12 @@ var WithCustomSize = function WithCustomSize(args) {
       key: item.key,
       "data-id": item.name
     }, item.name);
-  }))));
+  }));
 };
 
-exports.WithCustomSize = WithCustomSize;
+exports.ReadOnlyValues = ReadOnlyValues;
 
-var WithReadOnlyValues = function WithReadOnlyValues(args) {
+var DisabledKeys = function DisabledKeys(args) {
   var _useState15 = (0, _react.useState)(false),
       _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
       isOpen = _useState16[0],
@@ -376,7 +506,7 @@ var WithReadOnlyValues = function WithReadOnlyValues(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    readOnlyKeys: ['Aardvark', 'Snake'],
+    disabledKeys: ['Aardvark'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
@@ -388,9 +518,9 @@ var WithReadOnlyValues = function WithReadOnlyValues(args) {
   }));
 };
 
-exports.WithReadOnlyValues = WithReadOnlyValues;
+exports.DisabledKeys = DisabledKeys;
 
-var Error = function Error(args) {
+var CustomValues = function CustomValues(args) {
   var _useState17 = (0, _react.useState)(false),
       _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
       isOpen = _useState18[0],
@@ -405,10 +535,10 @@ var Error = function Error(args) {
   return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({}, args, {
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items,
-    helperText: "Here is some helpful text...",
-    status: "error",
+    mode: "non-restrictive"
+  }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
@@ -418,9 +548,14 @@ var Error = function Error(args) {
   }));
 };
 
-exports.Error = Error;
+exports.CustomValues = CustomValues;
+CustomValues.argTypes = {
+  mode: {
+    defaultValue: 'non-restrictive'
+  }
+};
 
-var ReadOnlyField = function ReadOnlyField(args) {
+var IconSlotsInChip = function IconSlotsInChip(args) {
   var _useState19 = (0, _react.useState)(false),
       _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
       isOpen = _useState20[0],
@@ -436,9 +571,8 @@ var ReadOnlyField = function ReadOnlyField(args) {
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    items: items
+    items: itemsWithSlots
   }, args, {
-    isReadOnly: true,
     onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
@@ -448,4 +582,41 @@ var ReadOnlyField = function ReadOnlyField(args) {
   }));
 };
 
-exports.ReadOnlyField = ReadOnlyField;
+exports.IconSlotsInChip = IconSlotsInChip;
+
+var CustomSize = function CustomSize(args) {
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+      isOpen = _useState22[0],
+      setIsOpen = _useState22[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.Box, {
+    sx: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, (0, _react2.jsx)(_.Box, {
+    width: 300
+  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }))));
+};
+
+exports.CustomSize = CustomSize;

package/lib/cjs/styles/variants/boxes.js

@@ -193,7 +193,10 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   cursor: 'default',
   m: 5,
   mr: 10,
-  ml: 0
+  ml: 0,
+  '& span': {
+    mr: '2px'
+  }
 });
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
@@ -208,6 +211,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',
@@ -406,6 +421,7 @@ var _default = {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  itemChipWithSlot: itemChipWithSlot,
   textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,