@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-bundler--local-style-inject-20240522043016

package/dist/cjs/Illustration/Spot/Spot.cjs

@@ -0,0 +1,448 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Base = require('../subcomponents/Base/Base.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+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 = tslib.__rest(_a, ["enableAspectRatio"]);
+    return React__default.default.createElement(Base.Base, tslib.__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");
+exports.AccountBasics = AccountBasics;
+exports.Action = Action;
+exports.ActionPlans = ActionPlans;
+exports.AddImage = AddImage;
+exports.AddUser = AddUser;
+exports.Alarm = Alarm;
+exports.AmplifyOthers = AmplifyOthers;
+exports.Assertive = Assertive;
+exports.BCorp = BCorp;
+exports.BaselineSurvey = BaselineSurvey;
+exports.Behaviour = Behaviour;
+exports.BenefitsSurvey = BenefitsSurvey;
+exports.BlankSurvey = BlankSurvey;
+exports.CalendarSync = CalendarSync;
+exports.CandidateSurvey = CandidateSurvey;
+exports.Cautionary = Cautionary;
+exports.ChangeAgents = ChangeAgents;
+exports.ChangeReadiness = ChangeReadiness;
+exports.ChangeSuccess = ChangeSuccess;
+exports.Coaching = Coaching;
+exports.Communications = Communications;
+exports.Community = Community;
+exports.Company = Company;
+exports.CompanyDetails = CompanyDetails;
+exports.Conversations = Conversations;
+exports.CustomOnboardSurvey = CustomOnboardSurvey;
+exports.CustomSurvey = CustomSurvey;
+exports.CustomUnattributedSurvey = CustomUnattributedSurvey;
+exports.DataVisualization = DataVisualization;
+exports.EmergencyResponse = EmergencyResponse;
+exports.EmployeeData = EmployeeData;
+exports.EndOfProbation = EndOfProbation;
+exports.EngagementSurvey = EngagementSurvey;
+exports.EssentialProductivity = EssentialProductivity;
+exports.EssentialResilience = EssentialResilience;
+exports.ExecutiveReportSharing = ExecutiveReportSharing;
+exports.ExitSurvey = ExitSurvey;
+exports.FastAction = FastAction;
+exports.Feedback = Feedback;
+exports.Fire = Fire;
+exports.Fireworks = Fireworks;
+exports.FullImport = FullImport;
+exports.Gdpr = Gdpr;
+exports.GeneralOnboardSurvey = GeneralOnboardSurvey;
+exports.Goals = Goals;
+exports.HaveTheCourageToBeVulnerable = HaveTheCourageToBeVulnerable;
+exports.HealthAndSafety = HealthAndSafety;
+exports.HrisImport = HrisImport;
+exports.InclusionSurvey = InclusionSurvey;
+exports.Individual180 = Individual180;
+exports.Individual360 = Individual360;
+exports.InfluentialCommunication = InfluentialCommunication;
+exports.Informative = Informative;
+exports.Insights = Insights;
+exports.InternSurvey = InternSurvey;
+exports.LeaderReportSharing = LeaderReportSharing;
+exports.Leadership180 = Leadership180;
+exports.Leadership360 = Leadership360;
+exports.LeadingChange = LeadingChange;
+exports.LeadingThroughCrisis = LeadingThroughCrisis;
+exports.Learn = Learn;
+exports.LearnFasterThroughFeedback = LearnFasterThroughFeedback;
+exports.London = London;
+exports.Manager180 = Manager180;
+exports.Manager360 = Manager360;
+exports.ManagerLearning = ManagerLearning;
+exports.ManagerReportSharing = ManagerReportSharing;
+exports.MeetingVoices = MeetingVoices;
+exports.Melbourne = Melbourne;
+exports.Microphone = Microphone;
+exports.Negative = Negative;
+exports.NewWaysOfWorking = NewWaysOfWorking;
+exports.NewYork = NewYork;
+exports.Objective = Objective;
+exports.OneOnOne = OneOnOne;
+exports.PaperPen = PaperPen;
+exports.PartialImport = PartialImport;
+exports.PerformanceDiagnostics = PerformanceDiagnostics;
+exports.PhasedWeek1OnboardSurvey = PhasedWeek1OnboardSurvey;
+exports.PhasedWeek5OnboardSurvey = PhasedWeek5OnboardSurvey;
+exports.Positive = Positive;
+exports.PowerfulInsights = PowerfulInsights;
+exports.Privacy = Privacy;
+exports.Process = Process;
+exports.Productivity = Productivity;
+exports.PulseSurvey = PulseSurvey;
+exports.QuickEngagementSurvey = QuickEngagementSurvey;
+exports.ReOnboarding = ReOnboarding;
+exports.ReadArticle = ReadArticle;
+exports.Recommendation = Recommendation;
+exports.RemoteManager = RemoteManager;
+exports.RemoteOnboardSurvey = RemoteOnboardSurvey;
+exports.RemoteWorkQSet = RemoteWorkQSet;
+exports.ReportSharing = ReportSharing;
+exports.Resilience = Resilience;
+exports.Resources = Resources;
+exports.Response = Response;
+exports.ReturnToWorkplace = ReturnToWorkplace;
+exports.SanFrancisco = SanFrancisco;
+exports.ScienceBackedTools = ScienceBackedTools;
+exports.ShareReport = ShareReport;
+exports.SinglePointOnboardSurvey = SinglePointOnboardSurvey;
+exports.SkillsDevelopment = SkillsDevelopment;
+exports.SpreadsheetTemplate = SpreadsheetTemplate;
+exports.Starburst = Starburst;
+exports.Stop = Stop;
+exports.Strategy = Strategy;
+exports.TakeAim = TakeAim;
+exports.Team1 = Team1;
+exports.Team2 = Team2;
+exports.TeamEffectiveness1 = TeamEffectiveness1;
+exports.TeamEffectiveness2 = TeamEffectiveness2;
+exports.Templates = Templates;
+exports.Timezone = Timezone;
+exports.TrafficCone = TrafficCone;
+exports.Training1 = Training1;
+exports.Training2 = Training2;
+exports.Training3 = Training3;
+exports.Trophy = Trophy;
+exports.TrustOthersToMakeDecisions = TrustOthersToMakeDecisions;
+exports.UnderConstruction = UnderConstruction;
+exports.ValueAdd = ValueAdd;
+exports.ValuesSurvey1 = ValuesSurvey1;
+exports.ValuesSurvey2 = ValuesSurvey2;
+exports.Video = Video;
+exports.ViewReports = ViewReports;
+exports.WellbeingSurvey = WellbeingSurvey;
+exports.WellbeingSurvey1 = WellbeingSurvey1;
+exports.WellbeingSurvey2 = WellbeingSurvey2;
+exports.WellbeingSurvey3 = WellbeingSurvey3;
+exports.Workshop = Workshop;

package/dist/cjs/Illustration/subcomponents/Base/Base.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var hostedAssets = require('@kaizen/hosted-assets');
+var Base_module = require('./Base.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Base = function (_a) {
+  var name = _a.name,
+    _b = _a.alt,
+    alt = _b === void 0 ? "" : _b,
+    classNameOverride = _a.classNameOverride,
+    aspectRatio = _a.aspectRatio,
+    restProps = tslib.__rest(_a, ["name", "alt", "classNameOverride", "aspectRatio"]);
+  var className = classnames__default.default(Base_module.default.wrapper, classNameOverride);
+  return aspectRatio ? React__default.default.createElement("figure", {
+    className: classnames__default.default(Base_module.default.aspectRatioWrapper, aspectRatio && Base_module.default[aspectRatio])
+  }, React__default.default.createElement("img", tslib.__assign({}, restProps, {
+    className: className,
+    alt: alt,
+    src: hostedAssets.assetUrl(name)
+  }))) : React__default.default.createElement("img", tslib.__assign({}, restProps, {
+    className: className,
+    alt: alt,
+    src: hostedAssets.assetUrl(name)
+  }));
+};
+Base.displayName = "Base";
+exports.Base = Base;

package/dist/cjs/Illustration/subcomponents/Base/Base.module.scss.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+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"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var hostedAssets = require('@kaizen/hosted-assets');
+require('../../../Button/Button/Button.cjs');
+var IconButton = require('../../../Button/IconButton/IconButton.cjs');
+var canPlayWebm = require('../../utils/canPlayWebm.cjs');
+var usePausePlay = require('../../utils/usePausePlay.cjs');
+var Base_module = require('../Base/Base.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+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 = React.useRef(null);
+  var _d = React__default.default.useState(true),
+    prefersReducedMotion = _d[0],
+    setPrefersReducedMotion = _d[1];
+  var _e = React__default.default.useState(false),
+    isWebmCompatible = _e[0],
+    setIsWebmCompatible = _e[1];
+  var _f = React__default.default.useState(false),
+    windowIsAvailable = _f[0],
+    setWindowIsAvailable = _f[1];
+  React.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", "");
+    }
+  }, []);
+  React.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]);
+  React.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);
+    };
+  }, []);
+  React.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]);
+  React.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]);
+  React.useEffect(function () {
+    // SSR does not have a window, which is required for canPlayWebm.
+    if (window !== undefined) setWindowIsAvailable(true);
+  }, []);
+  React.useEffect(function () {
+    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm.canPlayWebm());
+  }, [windowIsAvailable]);
+  var pausePlay = usePausePlay.usePausePlay(videoRef);
+  return React__default.default.createElement("figure", {
+    className: classnames__default.default(Base_module.default.figure, aspectRatio && Base_module.default[aspectRatio], aspectRatio && Base_module.default.aspectRatioWrapper)
+  }, React__default.default.createElement("video", {
+    muted: true,
+    "aria-hidden": true,
+    preload: "metadata",
+    ref: videoRef,
+    width: "100%",
+    "data-testid": "kz-video-player",
+    className: Base_module.default.wrapper,
+    loop: loop,
+    poster: hostedAssets.assetUrl("".concat(fallback, ".png")),
+    autoPlay: prefersReducedMotion ? false : autoplay,
+    playsInline: true,
+    tabIndex: -1
+  }, isWebmCompatible && React__default.default.createElement("source", {
+    src: hostedAssets.assetUrl("".concat(source, ".webm")),
+    type: "video/webm"
+  }), React__default.default.createElement("source", {
+    src: hostedAssets.assetUrl("".concat(source, ".mp4")),
+    type: "video/mp4"
+  })), React__default.default.createElement(IconButton.IconButton, {
+    onClick: function () {
+      return pausePlay.toggle();
+    },
+    icon: pausePlay.icon,
+    label: pausePlay.label,
+    classNameOverride: Base_module.default.pausePlayButton
+  }));
+};
+exports.VideoPlayer = VideoPlayer;