@kaizen/components 1.68.9 → 1.68.11

package/dist/cjs/Tag/Tag.cjs

@@ -4,9 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Avatar = require('../Avatar/Avatar.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var LiveIcon = require('../Icon/LiveIcon.cjs');
 var Icon = require('../__future__/Icon/Icon.cjs');
+var LiveIcon = require('./subcomponents/LiveIcon/LiveIcon.cjs');
 var Tag_module = require('./Tag.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -105,37 +104,7 @@ var Tag = function (props) {
     name: "cancel",
     alt: "Dismiss",
     isFilled: true
-  })))), variant === 'statusLive' && React__default.default.createElement("span", {
-    className: Tag_module.liveIcon
-  }, React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_base,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }), React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_1,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }), React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_2,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }), React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_3,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  })))));
+  })))), variant === 'statusLive' && React__default.default.createElement(LiveIcon.LiveIcon, null))));
 };
 Tag.displayName = 'Tag';
 exports.Tag = Tag;

package/dist/cjs/Tag/Tag.module.scss.cjs

@@ -25,13 +25,6 @@ var styles = {
   "statusLive": "Tag-module_statusLive__xG48w",
   "statusAction": "Tag-module_statusAction__woL-O",
   "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv",
-  "liveIcon": "Tag-module_liveIcon__URtak",
-  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
-  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
-  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
-  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
-  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
-  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
+  "statusDraft": "Tag-module_statusDraft__9QZDv"
 };
 module.exports = styles;

package/dist/cjs/Tag/subcomponents/LiveIcon/LiveIcon.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var SVG = require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var LiveIcon_module = require('./LiveIcon.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var LiveIconSvg = function (_a) {
+  var classNameOverride = _a.classNameOverride;
+  return React__default.default.createElement(SVG.SVG, {
+    role: "presentation",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    classNameOverride: classNameOverride
+  }, React__default.default.createElement("path", {
+    stroke: "currentColor",
+    d: "M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }), React__default.default.createElement("path", {
+    fill: "currentColor",
+    d: "M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+  }), React__default.default.createElement("path", {
+    stroke: "currentColor",
+    d: "M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }));
+};
+LiveIconSvg.displayName = 'LiveIconSvg';
+var LiveIcon = function () {
+  return React__default.default.createElement("span", {
+    className: LiveIcon_module.liveIcon
+  }, React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_base
+  }), React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_1
+  }), React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_2
+  }), React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_3
+  }));
+};
+LiveIcon.displayName = 'LiveIcon';
+exports.LiveIcon = LiveIcon;

package/dist/cjs/Tag/subcomponents/LiveIcon/LiveIcon.module.css.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var styles = {
+  "liveIcon": "LiveIcon-module_liveIcon__v6FG-",
+  "liveIcon_base": "LiveIcon-module_liveIcon_base__Kagqm",
+  "liveIcon_1": "LiveIcon-module_liveIcon_1__ye1Qk",
+  "liveIcon_2": "LiveIcon-module_liveIcon_2__p6f55",
+  "liveIcon_3": "LiveIcon-module_liveIcon_3__JmRFR",
+  "pulse-inner": "LiveIcon-module_pulse-inner__EGliV",
+  "pulse-outer": "LiveIcon-module_pulse-outer__bxHMh"
+};
+module.exports = styles;

package/dist/cjs/TextArea/TextArea.cjs

@@ -27,27 +27,27 @@ var TextArea = function (_a) {
     disabled = _a.disabled,
     propsOnChange = _a.onChange,
     restProps = tslib.__rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-  var _h = React.useState(autogrow && !value ? defaultValue : undefined),
+  var _h = React.useState(defaultValue),
     internalValue = _h[0],
     setInternalValue = _h[1];
-  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
-  var controlledValue = value !== null && value !== void 0 ? value : internalValue;
+  // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
   var fallbackRef = React.useRef(null);
   var textAreaRef = propsTextAreaRef !== null && propsTextAreaRef !== void 0 ? propsTextAreaRef : fallbackRef;
   var onChange = function (event) {
     propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(event);
-    setInternalValue(event.target.value);
+    if (!value && autogrow) {
+      setInternalValue(event.target.value);
+    }
   };
   return React__default.default.createElement("div", {
     className: classnames__default.default(TextArea_module.wrapper, (_b = {}, _b[TextArea_module.wrapperAutogrow] = autogrow, _b)),
-    "data-value": autogrow ? controlledValue : undefined
+    "data-value": autogrow ? value !== null && value !== void 0 ? value : internalValue : undefined
   }, React__default.default.createElement("textarea", tslib.__assign({
     className: classnames__default.default(TextArea_module.textarea, TextArea_module[status], reversed ? TextArea_module.reversed : TextArea_module.default, (_c = {}, _c[TextArea_module.disabled] = disabled, _c[TextArea_module.textareaAutogrow] = autogrow, _c)),
     rows: rows,
     onChange: onChange,
-    value: controlledValue,
-    defaultValue: controlledValue ? undefined : defaultValue,
+    value: value,
+    defaultValue: value ? undefined : defaultValue,
     // ^ React throws a warning if you specify both a value and a defaultValue
     ref: textAreaRef,
     disabled: disabled

package/dist/cjs/Tile/TileGrid/TileGrid.cjs

@@ -17,13 +17,30 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */
 var TileGrid = function (_a) {
+  var _b;
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
     restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
-  return React__default.default.createElement("div", tslib.__assign({
+  var isFragment = !Array.isArray(children) && children.type === React__default.default.Fragment;
+  return React__default.default.createElement("ul", tslib.__assign({
     className: classnames__default.default(TileGrid_module.grid, classNameOverride),
     "data-tile-grid": true
-  }, restProps), children);
+  }, restProps), isFragment ? ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.children) ? React__default.default.createElement(TileListItem, {
+    tiles: children.props.children
+  }) : null : React__default.default.createElement(TileListItem, {
+    tiles: children
+  }));
 };
 TileGrid.displayName = 'TileGrid';
+var TileListItem = function (_a) {
+  var tiles = _a.tiles;
+  if (Array.isArray(tiles)) {
+    return React__default.default.createElement(React__default.default.Fragment, null, tiles.map(function (tile, index) {
+      return React__default.default.createElement("li", {
+        key: "".concat(tile.props.title, "-").concat(index)
+      }, tile);
+    }));
+  }
+  return React__default.default.createElement("li", null, tiles);
+};
 exports.TileGrid = TileGrid;

package/dist/esm/Tag/Tag.mjs

@@ -2,9 +2,8 @@ import { __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { LiveIcon } from '../Icon/LiveIcon.mjs';
 import { Icon } from '../__future__/Icon/Icon.mjs';
+import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon.mjs';
 import styles from './Tag.module.scss.mjs';
 var isJSXElement = function (imageElementOrAvatarProps) {
   return 'props' in imageElementOrAvatarProps;
@@ -97,37 +96,7 @@ const Tag = /*#__PURE__*/function () {
       name: "cancel",
       alt: "Dismiss",
       isFilled: true
-    }))))), variant === 'statusLive' && ( /*#__PURE__*/React.createElement("span", {
-      className: styles.liveIcon
-    }, /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_base,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_1,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_2,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_3,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }))))));
+    }))))), variant === 'statusLive' && /*#__PURE__*/React.createElement(LiveIcon, null))));
   };
   Tag.displayName = 'Tag';
   return Tag;

package/dist/esm/Tag/Tag.module.scss.mjs

@@ -23,13 +23,6 @@ var styles = {
   "statusLive": "Tag-module_statusLive__xG48w",
   "statusAction": "Tag-module_statusAction__woL-O",
   "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv",
-  "liveIcon": "Tag-module_liveIcon__URtak",
-  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
-  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
-  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
-  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
-  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
-  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
+  "statusDraft": "Tag-module_statusDraft__9QZDv"
 };
 export { styles as default };

package/dist/esm/Tag/subcomponents/LiveIcon/LiveIcon.mjs

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SVG } from '../../../Icon/subcomponents/SVG/SVG.mjs';
+import styles from './LiveIcon.module.css.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+const LiveIconSvg = /*#__PURE__*/function () {
+  const LiveIconSvg = function (_a) {
+    var classNameOverride = _a.classNameOverride;
+    return /*#__PURE__*/React.createElement(SVG, {
+      role: "presentation",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      classNameOverride: classNameOverride
+    }, /*#__PURE__*/React.createElement("path", {
+      stroke: "currentColor",
+      d: "M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      fill: "currentColor",
+      d: "M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+    }), /*#__PURE__*/React.createElement("path", {
+      stroke: "currentColor",
+      d: "M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }));
+  };
+  LiveIconSvg.displayName = 'LiveIconSvg';
+  return LiveIconSvg;
+}();
+const LiveIcon = /*#__PURE__*/function () {
+  const LiveIcon = function () {
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.liveIcon
+    }, /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_base
+    }), /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_1
+    }), /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_2
+    }), /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_3
+    }));
+  };
+  LiveIcon.displayName = 'LiveIcon';
+  return LiveIcon;
+}();
+export { LiveIcon };

package/dist/esm/Tag/subcomponents/LiveIcon/LiveIcon.module.css.mjs

@@ -0,0 +1,10 @@
+var styles = {
+  "liveIcon": "LiveIcon-module_liveIcon__v6FG-",
+  "liveIcon_base": "LiveIcon-module_liveIcon_base__Kagqm",
+  "liveIcon_1": "LiveIcon-module_liveIcon_1__ye1Qk",
+  "liveIcon_2": "LiveIcon-module_liveIcon_2__p6f55",
+  "liveIcon_3": "LiveIcon-module_liveIcon_3__JmRFR",
+  "pulse-inner": "LiveIcon-module_pulse-inner__EGliV",
+  "pulse-outer": "LiveIcon-module_pulse-outer__bxHMh"
+};
+export { styles as default };

package/dist/esm/TextArea/TextArea.mjs

@@ -19,27 +19,27 @@ const TextArea = /*#__PURE__*/function () {
       disabled = _a.disabled,
       propsOnChange = _a.onChange,
       restProps = __rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-    var _h = useState(autogrow && !value ? defaultValue : undefined),
+    var _h = useState(defaultValue),
       internalValue = _h[0],
       setInternalValue = _h[1];
-    // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-    // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
-    var controlledValue = value !== null && value !== void 0 ? value : internalValue;
+    // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
     var fallbackRef = useRef(null);
     var textAreaRef = propsTextAreaRef !== null && propsTextAreaRef !== void 0 ? propsTextAreaRef : fallbackRef;
     var onChange = function (event) {
       propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(event);
-      setInternalValue(event.target.value);
+      if (!value && autogrow) {
+        setInternalValue(event.target.value);
+      }
     };
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.wrapper, (_b = {}, _b[styles.wrapperAutogrow] = autogrow, _b)),
-      "data-value": autogrow ? controlledValue : undefined
+      "data-value": autogrow ? value !== null && value !== void 0 ? value : internalValue : undefined
     }, /*#__PURE__*/React.createElement("textarea", __assign({
       className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, (_c = {}, _c[styles.disabled] = disabled, _c[styles.textareaAutogrow] = autogrow, _c)),
       rows: rows,
       onChange: onChange,
-      value: controlledValue,
-      defaultValue: controlledValue ? undefined : defaultValue,
+      value: value,
+      defaultValue: value ? undefined : defaultValue,
       // ^ React throws a warning if you specify both a value and a defaultValue
       ref: textAreaRef,
       disabled: disabled

package/dist/esm/Tile/TileGrid/TileGrid.mjs

@@ -9,15 +9,32 @@ import styles from './TileGrid.module.scss.mjs';
  */
 const TileGrid = /*#__PURE__*/function () {
   const TileGrid = function (_a) {
+    var _b;
     var children = _a.children,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["children", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
+    var isFragment = !Array.isArray(children) && children.type === React.Fragment;
+    return /*#__PURE__*/React.createElement("ul", __assign({
       className: classnames(styles.grid, classNameOverride),
       "data-tile-grid": true
-    }, restProps), children);
+    }, restProps), isFragment ? ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.children) ? ( /*#__PURE__*/React.createElement(TileListItem, {
+      tiles: children.props.children
+    })) : null : ( /*#__PURE__*/React.createElement(TileListItem, {
+      tiles: children
+    })));
   };
   TileGrid.displayName = 'TileGrid';
   return TileGrid;
 }();
+var TileListItem = function (_a) {
+  var tiles = _a.tiles;
+  if (Array.isArray(tiles)) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tiles.map(function (tile, index) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: "".concat(tile.props.title, "-").concat(index)
+      }, tile);
+    }));
+  }
+  return /*#__PURE__*/React.createElement("li", null, tiles);
+};
 export { TileGrid };