@kaizen/components 1.47.0 → 1.47.1

package/dist/esm/Illustration/Spot/Spot.mjs

@@ -0,0 +1,310 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Base } from '../subcomponents/Base/Base.mjs';
+var SPOT_ILLUSTRATION_BASE_PATH = "illustrations/heart/spot/";
+var createSpotIllustration = function (fileName) {
+  // eslint-disable-next-line react/display-name
+  return function (_a) {
+    var enableAspectRatio = _a.enableAspectRatio,
+      restProps = __rest(_a, ["enableAspectRatio"]);
+    return /*#__PURE__*/React.createElement(Base, __assign({
+      aspectRatio: enableAspectRatio ? "square" : undefined
+    }, restProps, {
+      name: "".concat(SPOT_ILLUSTRATION_BASE_PATH).concat(fileName)
+    }));
+  };
+};
+/**
+ * Template Library / Moods
+ */
+/* prettier-ignore */
+var Cautionary = createSpotIllustration("moods-cautionary.svg");
+/* prettier-ignore */
+var Informative = createSpotIllustration("moods-informative.svg");
+/* prettier-ignore */
+var Negative = createSpotIllustration("moods-negative.svg");
+/* prettier-ignore */
+var Positive = createSpotIllustration("moods-positive.svg");
+/* prettier-ignore */
+var Assertive = createSpotIllustration("moods-assertive.svg");
+/**
+ * Template Library / Engagement
+ */
+/* prettier-ignore */
+var BenefitsSurvey = createSpotIllustration("template-library-benefits-survey.svg");
+/* prettier-ignore */
+var CustomSurvey = createSpotIllustration("template-library-custom-survey.svg");
+/* prettier-ignore */
+var CustomUnattributedSurvey = createSpotIllustration("template-library-custom-unattributed-survey.svg");
+/* prettier-ignore */
+var EngagementSurvey = createSpotIllustration("template-library-engagement-survey.svg");
+/* prettier-ignore */
+var InclusionSurvey = createSpotIllustration("template-library-inclusion-survey.svg");
+/* prettier-ignore */
+var QuickEngagementSurvey = createSpotIllustration("template-library-quick-engagement-survey.svg");
+/* prettier-ignore */
+var ValuesSurvey1 = createSpotIllustration("template-library-values-survey-1.svg");
+/* prettier-ignore */
+var ValuesSurvey2 = createSpotIllustration("template-library-values-survey-2.svg");
+/* prettier-ignore */
+var WellbeingSurvey1 = createSpotIllustration("template-library-wellbeing-survey-1.svg");
+/* prettier-ignore */
+var WellbeingSurvey2 = createSpotIllustration("template-library-wellbeing-survey-2.svg");
+/* prettier-ignore */
+var WellbeingSurvey3 = createSpotIllustration("template-library-wellbeing-survey-3.svg");
+/* prettier-ignore */
+var ChangeReadiness = createSpotIllustration("template-library-change-readiness.svg");
+/* prettier-ignore */
+var ChangeSuccess = createSpotIllustration("template-library-change-success.svg");
+/* prettier-ignore */
+var PerformanceDiagnostics = createSpotIllustration("template-library-performance-diagnostics.svg");
+/* prettier-ignore */
+var LeadingThroughCrisis = createSpotIllustration("template-library-leading-through-crisis.svg");
+/* prettier-ignore */
+var EmergencyResponse = createSpotIllustration("template-library-emergency-response.svg");
+/**
+ * Template Library / Experience
+ */
+/* prettier-ignore */
+var CandidateSurvey = createSpotIllustration("template-library-candidate-survey.svg");
+/* prettier-ignore */
+var CustomOnboardSurvey = createSpotIllustration("template-library-custom-onboard-survey.svg");
+/* prettier-ignore */
+var ExitSurvey = createSpotIllustration("template-library-exit-survey.svg");
+/* prettier-ignore */
+var InternSurvey = createSpotIllustration("template-library-intern-survey.svg");
+/* prettier-ignore */
+var PhasedWeek1OnboardSurvey = createSpotIllustration("template-library-phased-week-1-onboard-survey.svg");
+/* prettier-ignore */
+var PhasedWeek5OnboardSurvey = createSpotIllustration("template-library-phased-week-5-onboard-survey.svg");
+/* prettier-ignore */
+var SinglePointOnboardSurvey = createSpotIllustration("template-library-single-point-onboard-survey.svg");
+/* prettier-ignore */
+var GeneralOnboardSurvey = createSpotIllustration("template-library-general-onboard-survey.svg");
+/* prettier-ignore */
+var RemoteOnboardSurvey = createSpotIllustration("template-library-remote-onboard-survey.svg");
+/* prettier-ignore */
+var HealthAndSafety = createSpotIllustration("template-library-health-and-safety.svg");
+/* prettier-ignore */
+var EndOfProbation = createSpotIllustration("template-library-end-of-probation.svg");
+/* prettier-ignore */
+var NewWaysOfWorking = createSpotIllustration("template-library-new-ways-of-working.svg");
+/* prettier-ignore */
+var ReOnboarding = createSpotIllustration("template-library-re-onboarding.svg");
+/**
+ * Template Library / Performance
+ */
+/* prettier-ignore */
+var Individual360 = createSpotIllustration("template-library-individual-360.svg");
+/* prettier-ignore */
+var Leadership360 = createSpotIllustration("template-library-leadership-360.svg");
+/* prettier-ignore */
+var Manager360 = createSpotIllustration("template-library-manager-360.svg");
+/* prettier-ignore */
+var Individual180 = createSpotIllustration("template-library-individual-180.svg");
+/* prettier-ignore */
+var Leadership180 = createSpotIllustration("template-library-leadership-180.svg");
+/* prettier-ignore */
+var Manager180 = createSpotIllustration("template-library-manager-180.svg");
+/* prettier-ignore */
+var TeamEffectiveness1 = createSpotIllustration("template-library-team-effectiveness-1.svg");
+/* prettier-ignore */
+var TeamEffectiveness2 = createSpotIllustration("template-library-team-effectiveness-2.svg");
+/**
+ * Offices
+ */
+/* prettier-ignore */
+var London = createSpotIllustration("offices-london.svg");
+/* prettier-ignore */
+var Melbourne = createSpotIllustration("offices-melbourne.svg");
+/* prettier-ignore */
+var NewYork = createSpotIllustration("offices-new-york.svg");
+/* prettier-ignore */
+var SanFrancisco = createSpotIllustration("offices-san-francisco.svg");
+/**
+ * Values
+ */
+/* prettier-ignore */
+var AmplifyOthers = createSpotIllustration("values-amplify-others.svg");
+/* prettier-ignore */
+var HaveTheCourageToBeVulnerable = createSpotIllustration("values-have-the-courage-to-be-vulnerable.svg");
+/* prettier-ignore */
+var LearnFasterThroughFeedback = createSpotIllustration("values-learn-faster-through-feedback.svg");
+/* prettier-ignore */
+var TrustOthersToMakeDecisions = createSpotIllustration("values-trust-others-to-make-decisions.svg");
+/**
+ * Template Library / COVID-19
+ */
+/* prettier-ignore */
+var WellbeingSurvey = createSpotIllustration("template-library-wellbeing-survey.svg");
+/* prettier-ignore */
+var Response = createSpotIllustration("template-library-response.svg");
+/* prettier-ignore */
+var RemoteWorkQSet = createSpotIllustration("template-library-remote-work-q-set.svg");
+/* prettier-ignore */
+var ReturnToWorkplace = createSpotIllustration("template-library-return-to-workplace.svg");
+/* prettier-ignore */
+var PulseSurvey = createSpotIllustration("template-library-pulse-survey.svg");
+/**
+ * New Account
+ */
+/* prettier-ignore */
+var AccountBasics = createSpotIllustration("new-account-account-basics.svg");
+/* prettier-ignore */
+var CompanyDetails = createSpotIllustration("new-account-company-details.svg");
+/* prettier-ignore */
+var EmployeeData = createSpotIllustration("new-account-employee-data.svg");
+/* prettier-ignore */
+var Gdpr = createSpotIllustration("new-account-gdpr.svg");
+/* prettier-ignore */
+var Timezone = createSpotIllustration("new-account-timezone.svg");
+/* prettier-ignore */
+var AddUser = createSpotIllustration("new-account-add-user.svg");
+/**
+ * Skills Coach (previously referred to as Manager Learning)
+ */
+/* prettier-ignore */
+var Strategy = createSpotIllustration("skills-coach-strategy.svg");
+/* prettier-ignore */
+var Resilience = createSpotIllustration("skills-coach-resilience.svg");
+/* prettier-ignore */
+var EssentialResilience = createSpotIllustration("skills-coach-essential-resillience.svg");
+/* prettier-ignore */
+var RemoteManager = createSpotIllustration("skills-coach-remote-manager.svg");
+/* prettier-ignore */
+var Productivity = createSpotIllustration("skills-coach-productivity.svg");
+/* prettier-ignore */
+var EssentialProductivity = createSpotIllustration("skills-coach-essential-productivity.svg");
+/* prettier-ignore */
+var InfluentialCommunication = createSpotIllustration("skills-coach-influential-communication.svg");
+/* prettier-ignore */
+var LeadingChange = createSpotIllustration("skills-coach-leading-change.svg");
+/* prettier-ignore */
+var ManagerLearning = createSpotIllustration("skills-coach-manager-learning.svg");
+/* prettier-ignore */
+var Feedback = createSpotIllustration("skills-coach-feedback.svg");
+/* prettier-ignore */
+var Coaching = createSpotIllustration("skills-coach-coaching.svg");
+/* prettier-ignore */
+var OneOnOne = createSpotIllustration("skills-coach-1-on-1.svg");
+/**
+ * Miscellaneous
+ */
+/* prettier-ignore */
+var ActionPlans = createSpotIllustration("miscellaneous-action-plans.svg");
+/* prettier-ignore */
+var BCorp = createSpotIllustration("miscellaneous-b-corp.svg");
+/* prettier-ignore */
+var Behaviour = createSpotIllustration("miscellaneous-behavior.svg");
+/* prettier-ignore */
+var ChangeAgents = createSpotIllustration("miscellaneous-change-agents.svg");
+/* prettier-ignore */
+var Communications = createSpotIllustration("miscellaneous-communications.svg");
+/* prettier-ignore */
+var Community = createSpotIllustration("miscellaneous-community.svg");
+/* prettier-ignore */
+var Company = createSpotIllustration("miscellaneous-company.svg");
+/* prettier-ignore */
+var Conversations = createSpotIllustration("miscellaneous-conversations.svg");
+/* prettier-ignore */
+var DataVisualization = createSpotIllustration("miscellaneous-data-visualization.svg");
+/* prettier-ignore */
+var Goals = createSpotIllustration("miscellaneous-goals.svg");
+/* prettier-ignore */
+var Insights = createSpotIllustration("miscellaneous-insights.svg");
+/* prettier-ignore */
+var Learn = createSpotIllustration("miscellaneous-learn.svg");
+/* prettier-ignore */
+var Microphone = createSpotIllustration("miscellaneous-microphone.svg");
+/* prettier-ignore */
+var PaperPen = createSpotIllustration("miscellaneous-paper-pen.svg");
+/* prettier-ignore */
+var PowerfulInsights = createSpotIllustration("miscellaneous-powerful-insights.svg");
+/* prettier-ignore */
+var Privacy = createSpotIllustration("miscellaneous-privacy.svg");
+/* prettier-ignore */
+var Process = createSpotIllustration("miscellaneous-process.svg");
+/* prettier-ignore */
+var Resources = createSpotIllustration("miscellaneous-resources.svg");
+/* prettier-ignore */
+var ScienceBackedTools = createSpotIllustration("miscellaneous-science-backed-tools.svg");
+/* prettier-ignore */
+var SkillsDevelopment = createSpotIllustration("miscellaneous-skills-development.svg");
+/* prettier-ignore */
+var ViewReports = createSpotIllustration("miscellaneous-view-reports.svg");
+/* prettier-ignore */
+var ReadArticle = createSpotIllustration("miscellaneous-read-article.svg");
+/* prettier-ignore */
+var FastAction = createSpotIllustration("miscellaneous-fast-action.svg");
+/* prettier-ignore */
+var BaselineSurvey = createSpotIllustration("miscellaneous-baseline-survey.svg");
+/* prettier-ignore */
+var SpreadsheetTemplate = createSpotIllustration("miscellaneous-spreadsheet-template.svg");
+/* prettier-ignore */
+var AddImage = createSpotIllustration("miscellaneous-add-image.svg");
+/* prettier-ignore */
+var MeetingVoices = createSpotIllustration("miscellaneous-meeting-voices.svg");
+/* prettier-ignore */
+var Workshop = createSpotIllustration("miscellaneous-workshop.svg");
+/* prettier-ignore */
+var Video = createSpotIllustration("miscellaneous-video.svg");
+/* prettier-ignore */
+var ReportSharing = createSpotIllustration("miscellaneous-report-sharing.svg");
+/* prettier-ignore */
+var BlankSurvey = createSpotIllustration("miscellaneous-blank-survey.svg");
+/* prettier-ignore */
+var TakeAim = createSpotIllustration("miscellaneous-take-aim.svg");
+/* prettier-ignore */
+var Action = createSpotIllustration("miscellaneous-action.svg");
+/* prettier-ignore */
+var Training1 = createSpotIllustration("miscellaneous-training-1.svg");
+/* prettier-ignore */
+var Training2 = createSpotIllustration("miscellaneous-training-2.svg");
+/* prettier-ignore */
+var Training3 = createSpotIllustration("miscellaneous-training-3.svg");
+/* prettier-ignore */
+var ShareReport = createSpotIllustration("miscellaneous-share-report.svg");
+// TODO: Component Name change
+/* prettier-ignore */
+var Team1 = createSpotIllustration("miscellaneous-team-1.svg");
+/* prettier-ignore */
+var Team2 = createSpotIllustration("miscellaneous-team-2.svg");
+/* prettier-ignore */
+var Templates = createSpotIllustration("miscellaneous-templates.svg");
+/* prettier-ignore */
+var ExecutiveReportSharing = createSpotIllustration("miscellaneous-executive-report-sharing.svg");
+/* prettier-ignore */
+var ManagerReportSharing = createSpotIllustration("miscellaneous-manager-report-sharing.svg");
+/* prettier-ignore */
+var LeaderReportSharing = createSpotIllustration("miscellaneous-leader-report-sharing.svg");
+/* prettier-ignore */
+var Alarm = createSpotIllustration("miscellaneous-alarm.svg");
+/* prettier-ignore */
+var Fire = createSpotIllustration("miscellaneous-fire.svg");
+/* prettier-ignore */
+var Fireworks = createSpotIllustration("miscellaneous-fireworks.svg");
+/* prettier-ignore */
+var FullImport = createSpotIllustration("miscellaneous-full-import.svg");
+/* prettier-ignore */
+var HrisImport = createSpotIllustration("miscellaneous-hris-import.svg");
+/* prettier-ignore */
+var PartialImport = createSpotIllustration("miscellaneous-partial-import.svg");
+/* prettier-ignore */
+var Starburst = createSpotIllustration("miscellaneous-starburst.svg");
+/* prettier-ignore */
+var Stop = createSpotIllustration("miscellaneous-stop.svg");
+/* prettier-ignore */
+var TrafficCone = createSpotIllustration("miscellaneous-traffic-cone.svg");
+/* prettier-ignore */
+var Trophy = createSpotIllustration("miscellaneous-trophy.svg");
+/* prettier-ignore */
+var UnderConstruction = createSpotIllustration("miscellaneous-under-construction.svg");
+/* prettier-ignore */
+var ValueAdd = createSpotIllustration("miscellaneous-value-add.svg");
+/* prettier-ignore */
+var Recommendation = createSpotIllustration("miscellaneous-recommendation.svg");
+/* prettier-ignore */
+var Objective = createSpotIllustration("miscellaneous-objective.svg");
+/* prettier-ignore */
+var CalendarSync = createSpotIllustration("miscellaneous-calendar-sync.svg");
+export { AccountBasics, Action, ActionPlans, AddImage, AddUser, Alarm, AmplifyOthers, Assertive, BCorp, BaselineSurvey, Behaviour, BenefitsSurvey, BlankSurvey, CalendarSync, CandidateSurvey, Cautionary, ChangeAgents, ChangeReadiness, ChangeSuccess, Coaching, Communications, Community, Company, CompanyDetails, Conversations, CustomOnboardSurvey, CustomSurvey, CustomUnattributedSurvey, DataVisualization, EmergencyResponse, EmployeeData, EndOfProbation, EngagementSurvey, EssentialProductivity, EssentialResilience, ExecutiveReportSharing, ExitSurvey, FastAction, Feedback, Fire, Fireworks, FullImport, Gdpr, GeneralOnboardSurvey, Goals, HaveTheCourageToBeVulnerable, HealthAndSafety, HrisImport, InclusionSurvey, Individual180, Individual360, InfluentialCommunication, Informative, Insights, InternSurvey, LeaderReportSharing, Leadership180, Leadership360, LeadingChange, LeadingThroughCrisis, Learn, LearnFasterThroughFeedback, London, Manager180, Manager360, ManagerLearning, ManagerReportSharing, MeetingVoices, Melbourne, Microphone, Negative, NewWaysOfWorking, NewYork, Objective, OneOnOne, PaperPen, PartialImport, PerformanceDiagnostics, PhasedWeek1OnboardSurvey, PhasedWeek5OnboardSurvey, Positive, PowerfulInsights, Privacy, Process, Productivity, PulseSurvey, QuickEngagementSurvey, ReOnboarding, ReadArticle, Recommendation, RemoteManager, RemoteOnboardSurvey, RemoteWorkQSet, ReportSharing, Resilience, Resources, Response, ReturnToWorkplace, SanFrancisco, ScienceBackedTools, ShareReport, SinglePointOnboardSurvey, SkillsDevelopment, SpreadsheetTemplate, Starburst, Stop, Strategy, TakeAim, Team1, Team2, TeamEffectiveness1, TeamEffectiveness2, Templates, Timezone, TrafficCone, Training1, Training2, Training3, Trophy, TrustOthersToMakeDecisions, UnderConstruction, ValueAdd, ValuesSurvey1, ValuesSurvey2, Video, ViewReports, WellbeingSurvey, WellbeingSurvey1, WellbeingSurvey2, WellbeingSurvey3, Workshop };

package/dist/esm/Illustration/subcomponents/Base/Base.mjs

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { assetUrl } from '@kaizen/hosted-assets';
+import styles from './Base.module.scss.mjs';
+const Base = /*#__PURE__*/function () {
+  const Base = function (_a) {
+    var name = _a.name,
+      _b = _a.alt,
+      alt = _b === void 0 ? "" : _b,
+      classNameOverride = _a.classNameOverride,
+      aspectRatio = _a.aspectRatio,
+      restProps = __rest(_a, ["name", "alt", "classNameOverride", "aspectRatio"]);
+    var className = classnames(styles.wrapper, classNameOverride);
+    return aspectRatio ? ( /*#__PURE__*/React.createElement("figure", {
+      className: classnames(styles.aspectRatioWrapper, aspectRatio && styles[aspectRatio])
+    }, /*#__PURE__*/React.createElement("img", __assign({}, restProps, {
+      className: className,
+      alt: alt,
+      src: assetUrl(name)
+    })))) : ( /*#__PURE__*/React.createElement("img", __assign({}, restProps, {
+      className: className,
+      alt: alt,
+      src: assetUrl(name)
+    })));
+  };
+  Base.displayName = "Base";
+  return Base;
+}();
+export { Base };

package/dist/esm/Illustration/subcomponents/Base/Base.module.scss.mjs

@@ -0,0 +1,14 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".Base-module_wrapper__UMpe0{margin:0;width:100%}.Base-module_figure__k5wH2{margin:0;position:relative}.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX{background-color:var(--color-white,#fff)!important;border:1px solid var(--color-gray-400,#cdcdd0);bottom:1rem;opacity:0;position:absolute;right:1rem;transition:all var(--animation-duration-immediate,.1s)}@media (hover:none) and (pointer:coarse){.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX{opacity:100%}}.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX svg{color:var(--color-purple-800,#2f2438);opacity:70%}.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX:focus,.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX:hover{background-color:var(--color-gray-200,#f4f4f5)!important;opacity:100%}.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX:focus svg,.Base-module_figure__k5wH2 .Base-module_pausePlayButton__XaPFX:hover svg,.Base-module_figure__k5wH2:hover .Base-module_pausePlayButton__XaPFX{opacity:100%}.Base-module_aspectRatioWrapper__bNveS{align-items:center;display:flex;margin:0}.Base-module_landscape__GYpiV{aspect-ratio:4/3}@supports not (aspect-ratio:auto){.Base-module_landscape__GYpiV:before{content:\"\";float:left;padding-top:75%}.Base-module_landscape__GYpiV:after{clear:both;content:\"\";display:block}}.Base-module_portrait__5G-0I{aspect-ratio:3/4}@supports not (aspect-ratio:auto){.Base-module_portrait__5G-0I:before{content:\"\";float:left;padding-top:133.33%}.Base-module_portrait__5G-0I:after{clear:both;content:\"\";display:block}}.Base-module_square__0KWiY{aspect-ratio:auto 1/1}@supports not (aspect-ratio:auto){.Base-module_square__0KWiY:before{content:\"\";float:left;padding-top:100%}.Base-module_square__0KWiY:after{clear:both;content:\"\";display:block}}.Base-module_visuallyHidden__bykhu:not(:focus,:active){clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+var styles = {
+  "wrapper": "Base-module_wrapper__UMpe0",
+  "figure": "Base-module_figure__k5wH2",
+  "pausePlayButton": "Base-module_pausePlayButton__XaPFX",
+  "aspectRatioWrapper": "Base-module_aspectRatioWrapper__bNveS",
+  "landscape": "Base-module_landscape__GYpiV",
+  "portrait": "Base-module_portrait__5G-0I",
+  "square": "Base-module_square__0KWiY",
+  "visuallyHidden": "Base-module_visuallyHidden__bykhu"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs

@@ -0,0 +1,146 @@
+import React, { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { assetUrl } from '@kaizen/hosted-assets';
+import '../../../Button/Button/Button.mjs';
+import { IconButton } from '../../../Button/IconButton/IconButton.mjs';
+import { canPlayWebm } from '../../utils/canPlayWebm.mjs';
+import { usePausePlay } from '../../utils/usePausePlay.mjs';
+import styles from '../Base/Base.module.scss.mjs';
+var VideoPlayer = function (_a) {
+  var _b = _a.autoplay,
+    autoplay = _b === void 0 ? true : _b,
+    _c = _a.loop,
+    loop = _c === void 0 ? false : _c,
+    fallback = _a.fallback,
+    source = _a.source,
+    aspectRatio = _a.aspectRatio,
+    onEnded = _a.onEnded;
+  var videoRef = useRef(null);
+  var _d = React.useState(true),
+    prefersReducedMotion = _d[0],
+    setPrefersReducedMotion = _d[1];
+  var _e = React.useState(false),
+    isWebmCompatible = _e[0],
+    setIsWebmCompatible = _e[1];
+  var _f = React.useState(false),
+    windowIsAvailable = _f[0],
+    setWindowIsAvailable = _f[1];
+  useEffect(function () {
+    /**
+     * Setting `muted` on the player is required in Safari/Webkit and older
+     * versions of Chome for the video to autoplay (regardless of whether
+     * the format contains an audio stream or not).
+     *
+     * React does not guarentee the `muted` attribute is set on the
+     * `video` element. So on load we force set this attribute. See issue:
+     * https://github.com/facebook/react/issues/10389
+     */
+    var videoElement = videoRef.current;
+    if (videoElement !== null) {
+      videoElement.setAttribute("muted", "");
+    }
+  }, []);
+  useEffect(function () {
+    // when the source of the animation is updated, we need to reload the asset
+    // to ensure the video player is in sync with the new source.
+    var videoElement = videoRef.current;
+    if (videoElement !== null) {
+      videoElement.load();
+    }
+  }, [source]);
+  useEffect(function () {
+    if (!window) return;
+    var reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(reducedMotionQuery.matches);
+    var updateMotionPreferences = function () {
+      var _a = window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+        matches = _a === void 0 ? false : _a;
+      setPrefersReducedMotion(matches);
+    };
+    var isLegacyEdge = navigator.userAgent.match(/Edge/);
+    var isUnsupportedSafari = window.matchMedia("").addEventListener === undefined;
+    if (isLegacyEdge || isUnsupportedSafari) return;
+    reducedMotionQuery.addEventListener("change", updateMotionPreferences, true);
+    return function cleanup() {
+      reducedMotionQuery.removeEventListener("change", updateMotionPreferences);
+    };
+  }, []);
+  useEffect(function () {
+    var _a;
+    var videoElement = videoRef.current;
+    if (!videoElement) return;
+    if (prefersReducedMotion) {
+      videoElement.pause();
+    } else if (autoplay && !prefersReducedMotion) {
+      try {
+        // Older browsers may not return a promise, so .play could return undefined
+        (_a = videoElement.play()) === null || _a === void 0 ? void 0 : _a.catch(function () {
+          /*
+           * An DOMException _may_ be raised by some browsers if we
+           * programatically interact with the video before the
+           * user has interacted with the page. This is okay - so
+           * we're going to catch this error without handling it. See:
+           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability
+           */
+        });
+      } catch (e) {
+        /**
+         * Older browsers will raise a synchronous error because their first implementation
+         * of `.play` was not a promise.
+         */
+      }
+    }
+    /**
+     * Chrome seems to have an issue with changes to autoplay after the video
+     * has been mounted. If there is a change in autoplay we need to force the
+     * play() method to be called.
+     */
+  }, [prefersReducedMotion, autoplay]);
+  useEffect(function () {
+    // Add event listeners for the video element
+    var videoElement = videoRef.current;
+    if (!videoElement || !onEnded) return;
+    videoElement.addEventListener("ended", onEnded);
+    return function cleanup() {
+      videoElement.removeEventListener("ended", onEnded);
+    };
+  }, [videoRef]);
+  useEffect(function () {
+    // SSR does not have a window, which is required for canPlayWebm.
+    if (window !== undefined) setWindowIsAvailable(true);
+  }, []);
+  useEffect(function () {
+    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm());
+  }, [windowIsAvailable]);
+  var pausePlay = usePausePlay(videoRef);
+  return /*#__PURE__*/React.createElement("figure", {
+    className: classnames(styles.figure, aspectRatio && styles[aspectRatio], aspectRatio && styles.aspectRatioWrapper)
+  }, /*#__PURE__*/React.createElement("video", {
+    muted: true,
+    "aria-hidden": true,
+    preload: "metadata",
+    ref: videoRef,
+    width: "100%",
+    "data-testid": "kz-video-player",
+    className: styles.wrapper,
+    loop: loop,
+    poster: assetUrl("".concat(fallback, ".png")),
+    autoPlay: prefersReducedMotion ? false : autoplay,
+    playsInline: true,
+    tabIndex: -1
+  }, isWebmCompatible && ( /*#__PURE__*/React.createElement("source", {
+    src: assetUrl("".concat(source, ".webm")),
+    type: "video/webm"
+  })), /*#__PURE__*/React.createElement("source", {
+    src: assetUrl("".concat(source, ".mp4")),
+    type: "video/mp4"
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function () {
+      return pausePlay.toggle();
+    },
+    icon: pausePlay.icon,
+    label: pausePlay.label,
+    classNameOverride: styles.pausePlayButton
+  }));
+};
+export { VideoPlayer };

package/dist/esm/Illustration/utils/canPlayWebm.mjs

@@ -0,0 +1,18 @@
+/**
+ * Detect whether the current browser can play webm files
+ */
+var canPlayWebm = function () {
+  if (typeof window === "undefined") return false;
+  // Don't trust Safari's canPlayType implementation, as there is partial support for webm
+  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  if (isSafari) {
+    return false;
+  }
+  // Attempt webm feature detection
+  var video = document.createElement("video");
+  if (video.canPlayType("video/webm; codecs=vp9") === "probably") {
+    return true;
+  }
+  return false;
+};
+export { canPlayWebm };

package/dist/esm/Illustration/utils/usePausePlay.mjs

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import 'tslib';
+import '../../Icon/subcomponents/SVG/SVG.mjs';
+import { LaunchIcon } from '../../Icon/LaunchIcon.mjs';
+import { PauseIcon } from '../../Icon/PauseIcon.mjs';
+var usePausePlay = function (videoRef) {
+  var _a = useState(false),
+    isPaused = _a[0],
+    setPaused = _a[1];
+  return {
+    toggle: function () {
+      if (!videoRef.current) return;
+      if (videoRef.current.paused) {
+        setPaused(false);
+        videoRef.current.play();
+      } else {
+        setPaused(true);
+        videoRef.current.pause();
+      }
+    },
+    icon: isPaused ? ( /*#__PURE__*/React.createElement(LaunchIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(PauseIcon, {
+      role: "presentation"
+    })),
+    label: isPaused ? "Play animation" : "Pause animation"
+  };
+};
+export { usePausePlay };

package/dist/esm/Input/Input/Input.mjs

@@ -0,0 +1,41 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Input.module.scss.mjs';
+const Input = /*#__PURE__*/function () {
+  const Input = function (_a) {
+    var inputRef = _a.inputRef,
+      _b = _a.status,
+      status = _b === void 0 ? "default" : _b,
+      startIconAdornment = _a.startIconAdornment,
+      endIconAdornment = _a.endIconAdornment,
+      _c = _a.reversed,
+      reversed = _c === void 0 ? false : _c,
+      _d = _a.type,
+      type = _d === void 0 ? "text" : _d,
+      value = _a.value,
+      defaultValue = _a.defaultValue,
+      classNameOverride = _a.classNameOverride,
+      disabled = _a.disabled,
+      restProps = __rest(_a, ["inputRef", "status", "startIconAdornment", "endIconAdornment", "reversed", "type", "value", "defaultValue", "classNameOverride", "disabled"]);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.wrapper, reversed && styles.withReversed, disabled && styles.withDisabled, startIconAdornment && styles.withStartIconAdornment, endIconAdornment && styles.withEndIconAdornment, status != "default" && styles.hasStatus)
+    }, startIconAdornment && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.startIconAdornment
+    }, startIconAdornment)), /*#__PURE__*/React.createElement("input", __assign({
+      ref: inputRef,
+      type: type,
+      value: value,
+      defaultValue: defaultValue,
+      disabled: disabled,
+      className: classnames(styles.input, styles[status], classNameOverride, reversed ? styles.reversed : styles.default, disabled && styles.disabled)
+    }, restProps)), /*#__PURE__*/React.createElement("div", {
+      className: styles.focusRing
+    }), endIconAdornment && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.endIconAdornment
+    }, endIconAdornment)));
+  };
+  Input.displayName = "Input";
+  return Input;
+}();
+export { Input };