@kaizen/components 1.47.0 → 1.47.1

package/dist/esm/Icon/UserUpdateIcon.mjs

@@ -0,0 +1,19 @@
+import { __assign } from 'tslib';
+import React, { useId } from 'react';
+import { SVG } from './subcomponents/SVG/SVG.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var UserUpdateIcon = function (props) {
+  var uniqueId = useId();
+  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: uniqueId,
+    d: "m17.519 10.956 1.843-1.921H18.17c-.046-1.523-1.345-2.794-2.876-2.794a2.88 2.88 0 0 0-2.877 2.877c0 .686.247 1.351.7 1.878l.308.305a2.869 2.869 0 0 0 3.33.296l.092-.055-.752-.751-.052.022a1.853 1.853 0 0 1-2.6-1.695c0-1.02.83-1.85 1.85-1.85.993 0 1.807.785 1.85 1.767h-1.62zm-10.019.71C5.275 11.667.834 12.784.834 15v1.666h13.333V15c0-2.217-4.442-3.334-6.667-3.334M7.5 10a3.333 3.333 0 1 0 .001-6.666 3.333 3.333 0 0 0 0 6.666"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "currentColor",
+    href: "#".concat(uniqueId),
+    fillRule: "evenodd"
+  }));
+  return /*#__PURE__*/React.createElement(SVG, __assign({}, props), svgContent);
+};
+export { UserUpdateIcon };

package/dist/esm/Icon/UsersIcon.mjs

@@ -0,0 +1,19 @@
+import { __assign } from 'tslib';
+import React, { useId } from 'react';
+import { SVG } from './subcomponents/SVG/SVG.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var UsersIcon = function (props) {
+  var uniqueId = useId();
+  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: uniqueId,
+    d: "M13.6 9.6a1.994 1.994 0 0 0 1.991-2c0-1.104-.888-2-1.991-2a2 2 0 0 0 0 4m-6-.8a2.39 2.39 0 0 0 2.392-2.4 2.397 2.397 0 1 0-4.793 0c0 1.328 1.073 2.4 2.401 2.4m6 2.4c-1.464 0-4.4.736-4.4 2.2v1.8H18v-1.8c0-1.464-2.937-2.2-4.4-2.2m-6-.8c-1.865 0-5.6.936-5.6 2.8v2h5.6v-1.8c0-.68.264-1.872 1.896-2.776C8.8 10.48 8.128 10.4 7.6 10.4"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "currentColor",
+    href: "#".concat(uniqueId),
+    fillRule: "evenodd"
+  }));
+  return /*#__PURE__*/React.createElement(SVG, __assign({}, props), svgContent);
+};
+export { UsersIcon };

package/dist/esm/Icon/VisibleIcon.mjs

@@ -0,0 +1,19 @@
+import { __assign } from 'tslib';
+import React, { useId } from 'react';
+import { SVG } from './subcomponents/SVG/SVG.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var VisibleIcon = function (props) {
+  var uniqueId = useId();
+  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: uniqueId,
+    d: "M9.831 3.75c-4.09 0-7.583 2.544-8.998 6.135 1.415 3.591 4.908 6.135 8.998 6.135 4.09 0 7.583-2.544 8.998-6.135-1.415-3.591-4.908-6.135-8.998-6.135m0 10.225a4.091 4.091 0 0 1-4.09-4.09 4.091 4.091 0 0 1 4.09-4.09 4.091 4.091 0 0 1 4.09 4.09 4.091 4.091 0 0 1-4.09 4.09m0-6.544a2.45 2.45 0 0 0-2.454 2.454 2.45 2.45 0 0 0 2.454 2.454 2.45 2.45 0 0 0 2.454-2.454 2.45 2.45 0 0 0-2.454-2.454"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "currentColor",
+    href: "#".concat(uniqueId),
+    fillRule: "evenodd"
+  }));
+  return /*#__PURE__*/React.createElement(SVG, __assign({}, props), svgContent);
+};
+export { VisibleIcon };

package/dist/esm/Icon/WritingIcon.mjs

@@ -0,0 +1,19 @@
+import { __assign } from 'tslib';
+import React, { useId } from 'react';
+import { SVG } from './subcomponents/SVG/SVG.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var WritingIcon = function (props) {
+  var uniqueId = useId();
+  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: uniqueId,
+    d: "M1 18.55h18.002V15.7H1zM16.53 4.333a.689.689 0 0 0 0-1.009L14.78 1.66a.78.78 0 0 0-1.061 0L12.25 3.052l2.813 2.673zm-2.216 2.105-2.813-2.672-7.5 7.126v2.672h2.812z"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "currentColor",
+    href: "#".concat(uniqueId),
+    fillRule: "evenodd"
+  }));
+  return /*#__PURE__*/React.createElement(SVG, __assign({}, props), svgContent);
+};
+export { WritingIcon };

package/dist/esm/Icon/ZoomInIcon.mjs

@@ -0,0 +1,14 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { SVG } from './subcomponents/SVG/SVG.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var ZoomInIcon = function (props) {
+  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M13.865 12.32h-.813l-.289-.277A6.66 6.66 0 0 0 14.38 7.69a6.69 6.69 0 1 0-6.69 6.69 6.66 6.66 0 0 0 4.354-1.617l.278.289v.813L17.467 19 19 17.467zm-6.175 0a4.625 4.625 0 0 1-4.632-4.63A4.625 4.625 0 0 1 7.69 3.058a4.625 4.625 0 0 1 4.63 4.632 4.625 4.625 0 0 1-4.63 4.63m.514-7.203H7.175v2.058H5.117v1.03h2.058v2.057h1.03V8.204h2.057V7.175H8.204z"
+  }));
+  return /*#__PURE__*/React.createElement(SVG, __assign({}, props), svgContent);
+};
+export { ZoomInIcon };

package/dist/esm/Icon/ZoomOutIcon.mjs

@@ -0,0 +1,14 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { SVG } from './subcomponents/SVG/SVG.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var ZoomOutIcon = function (props) {
+  var svgContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M13.865 12.32h-.813l-.289-.277A6.66 6.66 0 0 0 14.38 7.69a6.69 6.69 0 1 0-6.69 6.69 6.66 6.66 0 0 0 4.354-1.617l.278.289v.813L17.467 19 19 17.467zm-6.175 0a4.625 4.625 0 0 1-4.632-4.63A4.625 4.625 0 0 1 7.69 3.058a4.625 4.625 0 0 1 4.63 4.632 4.625 4.625 0 0 1-4.63 4.63M5.117 7.176h5.145v1.03H5.117z"
+  }));
+  return /*#__PURE__*/React.createElement(SVG, __assign({}, props), svgContent);
+};
+export { ZoomOutIcon };

package/dist/esm/Icon/subcomponents/SVG/SVG.mjs

@@ -0,0 +1,37 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './SVG.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.design/?path=/docs/components-icon--meaningful-kaizen-site-demo Storybook}
+ */
+const SVG = /*#__PURE__*/function () {
+  const SVG = function (_a) {
+    var _b = _a.inheritSize,
+      inheritSize = _b === void 0 ? false : _b,
+      role = _a.role,
+      _c = _a.viewBox,
+      viewBox = _c === void 0 ? "0 0 20 20" : _c,
+      classNameOverride = _a.classNameOverride,
+      children = _a.children,
+      restProps = __rest(_a, ["inheritSize", "role", "viewBox", "classNameOverride", "children"]);
+    var classes = classnames(styles.icon, classNameOverride, inheritSize && styles.inheritSize);
+    if (role === "presentation") {
+      return /*#__PURE__*/React.createElement("svg", __assign({
+        className: classes,
+        viewBox: viewBox,
+        role: role,
+        "aria-hidden": true
+      }, restProps), children);
+    }
+    return /*#__PURE__*/React.createElement("svg", __assign({
+      role: role,
+      className: classes,
+      viewBox: viewBox
+    }, restProps), children);
+  };
+  SVG.displayName = "SVG";
+  return SVG;
+}();
+export { SVG };

package/dist/esm/Icon/subcomponents/SVG/SVG.module.scss.mjs

@@ -0,0 +1,8 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}";
+var styles = {
+  "icon": "SVG-module_icon__8J5Ev",
+  "inheritSize": "SVG-module_inheritSize__Q8iam"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs

@@ -0,0 +1,50 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState } from 'react';
+import { Base } from '../../subcomponents/Base/Base.mjs';
+import { VideoPlayer } from '../../subcomponents/VideoPlayer/VideoPlayer.mjs';
+
+/**
+ * This component is a snowflake. It plays two assets one after the other:
+ *  - An "initial" animation that is only ever played once, never looping
+ *  - An "ambient" animation that can be looped, depending on the props passed into it
+ */
+const BrandMomentCaptureIntro = /*#__PURE__*/function () {
+  const BrandMomentCaptureIntro = function (_a) {
+    var isAnimated = _a.isAnimated,
+      alt = _a.alt,
+      enableAspectRatio = _a.enableAspectRatio,
+      otherProps = __rest(_a, ["isAnimated", "alt", "enableAspectRatio"]);
+    var _b = useState(false),
+      firstAnimationComplete = _b[0],
+      setFirstAnimationComplete = _b[1];
+    var aspectRatio = enableAspectRatio ? "landscape" : undefined;
+    if (!isAnimated) {
+      return /*#__PURE__*/React.createElement(Base, __assign({
+        aspectRatio: aspectRatio,
+        alt: alt || ""
+      }, otherProps, {
+        name: "illustrations/heart/scene/brand-moments-capture-intro-loop.png"
+      }));
+    }
+    if (firstAnimationComplete) {
+      return /*#__PURE__*/React.createElement(VideoPlayer, __assign({}, otherProps, {
+        aspectRatio: aspectRatio,
+        fallback: "illustrations/heart/scene/brand-moments-capture-intro-loop",
+        source: "illustrations/heart/scene/brand-moments-capture-intro-loop",
+        autoplay: firstAnimationComplete ? otherProps.autoplay : false
+      }));
+    }
+    return /*#__PURE__*/React.createElement(VideoPlayer, __assign({}, otherProps, {
+      aspectRatio: aspectRatio,
+      fallback: "illustrations/heart/scene/brand-moments-capture-intro",
+      source: "illustrations/heart/scene/brand-moments-capture-intro",
+      onEnded: function () {
+        return setFirstAnimationComplete(true);
+      },
+      loop: false
+    }));
+  };
+  BrandMomentCaptureIntro.displayName = "BrandMomentCaptureIntro";
+  return BrandMomentCaptureIntro;
+}();
+export { BrandMomentCaptureIntro };