@zomako/elearning-components 2.0.4 → 2.0.5

package/dist/elearning-components.umd.js

@@ -1,14 +1,14 @@
-(function(O,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],y):(O=typeof globalThis<"u"?globalThis:O||self,y(O.ElearningComponents={},O.React))})(this,(function(O,y){"use strict";var M={exports:{}},Y={};var re;function ke(){if(re)return Y;re=1;var f=y,g=Symbol.for("react.element"),k=Symbol.for("react.fragment"),E=Object.prototype.hasOwnProperty,S=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,w={key:!0,ref:!0,__self:!0,__source:!0};function R(j,o,d){var c,h={},C=null,A=null;d!==void 0&&(C=""+d),o.key!==void 0&&(C=""+o.key),o.ref!==void 0&&(A=o.ref);for(c in o)E.call(o,c)&&!w.hasOwnProperty(c)&&(h[c]=o[c]);if(j&&j.defaultProps)for(c in o=j.defaultProps,o)h[c]===void 0&&(h[c]=o[c]);return{$$typeof:g,type:j,key:C,ref:A,props:h,_owner:S.current}}return Y.Fragment=k,Y.jsx=R,Y.jsxs=R,Y}var L={};var te;function Pe(){return te||(te=1,process.env.NODE_ENV!=="production"&&(function(){var f=y,g=Symbol.for("react.element"),k=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),R=Symbol.for("react.provider"),j=Symbol.for("react.context"),o=Symbol.for("react.forward_ref"),d=Symbol.for("react.suspense"),c=Symbol.for("react.suspense_list"),h=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),A=Symbol.for("react.offscreen"),ae=Symbol.iterator,Ie="@@iterator";function We(e){if(e===null||typeof e!="object")return null;var r=ae&&e[ae]||e[Ie];return typeof r=="function"?r:null}var F=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function b(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];Ye("error",e,t)}}function Ye(e,r,t){{var n=F.ReactDebugCurrentFrame,s=n.getStackAddendum();s!==""&&(r+="%s",t=t.concat([s]));var l=t.map(function(i){return String(i)});l.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,l)}}var Le=!1,Ue=!1,Ve=!1,Me=!1,$e=!1,oe;oe=Symbol.for("react.module.reference");function Je(e){return!!(typeof e=="string"||typeof e=="function"||e===E||e===w||$e||e===S||e===d||e===c||Me||e===A||Le||Ue||Ve||typeof e=="object"&&e!==null&&(e.$$typeof===C||e.$$typeof===h||e.$$typeof===R||e.$$typeof===j||e.$$typeof===o||e.$$typeof===oe||e.getModuleId!==void 0))}function Ke(e,r,t){var n=e.displayName;if(n)return n;var s=r.displayName||r.name||"";return s!==""?t+"("+s+")":t}function ie(e){return e.displayName||"Context"}function P(e){if(e==null)return null;if(typeof e.tag=="number"&&b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case k:return"Portal";case w:return"Profiler";case S:return"StrictMode";case d:return"Suspense";case c:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case j:var r=e;return ie(r)+".Consumer";case R:var t=e;return ie(t._context)+".Provider";case o:return Ke(e,e.render,"ForwardRef");case h:var n=e.displayName||null;return n!==null?n:P(e.type)||"Memo";case C:{var s=e,l=s._payload,i=s._init;try{return P(i(l))}catch{return null}}}return null}var D=Object.assign,U=0,se,ce,le,ue,fe,de,ve;function pe(){}pe.__reactDisabledLog=!0;function Be(){{if(U===0){se=console.log,ce=console.info,le=console.warn,ue=console.error,fe=console.group,de=console.groupCollapsed,ve=console.groupEnd;var e={configurable:!0,enumerable:!0,value:pe,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}U++}}function Ge(){{if(U--,U===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:D({},e,{value:se}),info:D({},e,{value:ce}),warn:D({},e,{value:le}),error:D({},e,{value:ue}),group:D({},e,{value:fe}),groupCollapsed:D({},e,{value:de}),groupEnd:D({},e,{value:ve})})}U<0&&b("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var G=F.ReactCurrentDispatcher,z;function $(e,r,t){{if(z===void 0)try{throw Error()}catch(s){var n=s.stack.trim().match(/\n( *(at )?)/);z=n&&n[1]||""}return`
-`+z+e}}var X=!1,J;{var ze=typeof WeakMap=="function"?WeakMap:Map;J=new ze}function he(e,r){if(!e||X)return"";{var t=J.get(e);if(t!==void 0)return t}var n;X=!0;var s=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var l;l=G.current,G.current=null,Be();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(m){n=m}Reflect.construct(e,[],i)}else{try{i.call()}catch(m){n=m}e.call(i.prototype)}}else{try{throw Error()}catch(m){n=m}e()}}catch(m){if(m&&n&&typeof m.stack=="string"){for(var a=m.stack.split(`
-`),_=n.stack.split(`
-`),v=a.length-1,p=_.length-1;v>=1&&p>=0&&a[v]!==_[p];)p--;for(;v>=1&&p>=0;v--,p--)if(a[v]!==_[p]){if(v!==1||p!==1)do if(v--,p--,p<0||a[v]!==_[p]){var x=`
-`+a[v].replace(" at new "," at ");return e.displayName&&x.includes("<anonymous>")&&(x=x.replace("<anonymous>",e.displayName)),typeof e=="function"&&J.set(e,x),x}while(v>=1&&p>=0);break}}}finally{X=!1,G.current=l,Ge(),Error.prepareStackTrace=s}var W=e?e.displayName||e.name:"",N=W?$(W):"";return typeof e=="function"&&J.set(e,N),N}function Xe(e,r,t){return he(e,!1)}function qe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function K(e,r,t){if(e==null)return"";if(typeof e=="function")return he(e,qe(e));if(typeof e=="string")return $(e);switch(e){case d:return $("Suspense");case c:return $("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case o:return Xe(e.render);case h:return K(e.type,r,t);case C:{var n=e,s=n._payload,l=n._init;try{return K(l(s),r,t)}catch{}}}return""}var V=Object.prototype.hasOwnProperty,ge={},be=F.ReactDebugCurrentFrame;function B(e){if(e){var r=e._owner,t=K(e.type,e._source,r?r.type:null);be.setExtraStackFrame(t)}else be.setExtraStackFrame(null)}function He(e,r,t,n,s){{var l=Function.call.bind(V);for(var i in e)if(l(e,i)){var a=void 0;try{if(typeof e[i]!="function"){var _=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw _.name="Invariant Violation",_}a=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(v){a=v}a&&!(a instanceof Error)&&(B(s),b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof a),B(null)),a instanceof Error&&!(a.message in ge)&&(ge[a.message]=!0,B(s),b("Failed %s type: %s",t,a.message),B(null))}}}var Ze=Array.isArray;function q(e){return Ze(e)}function Qe(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function er(e){try{return _e(e),!1}catch{return!0}}function _e(e){return""+e}function me(e){if(er(e))return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Qe(e)),_e(e)}var ye=F.ReactCurrentOwner,rr={key:!0,ref:!0,__self:!0,__source:!0},Ee,Re;function tr(e){if(V.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function nr(e){if(V.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function ar(e,r){typeof e.ref=="string"&&ye.current}function or(e,r){{var t=function(){Ee||(Ee=!0,b("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function ir(e,r){{var t=function(){Re||(Re=!0,b("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var sr=function(e,r,t,n,s,l,i){var a={$$typeof:g,type:e,key:r,ref:t,props:i,_owner:l};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function cr(e,r,t,n,s){{var l,i={},a=null,_=null;t!==void 0&&(me(t),a=""+t),nr(r)&&(me(r.key),a=""+r.key),tr(r)&&(_=r.ref,ar(r,s));for(l in r)V.call(r,l)&&!rr.hasOwnProperty(l)&&(i[l]=r[l]);if(e&&e.defaultProps){var v=e.defaultProps;for(l in v)i[l]===void 0&&(i[l]=v[l])}if(a||_){var p=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&or(i,p),_&&ir(i,p)}return sr(e,a,_,s,n,ye.current,i)}}var H=F.ReactCurrentOwner,je=F.ReactDebugCurrentFrame;function I(e){if(e){var r=e._owner,t=K(e.type,e._source,r?r.type:null);je.setExtraStackFrame(t)}else je.setExtraStackFrame(null)}var Z;Z=!1;function Q(e){return typeof e=="object"&&e!==null&&e.$$typeof===g}function xe(){{if(H.current){var e=P(H.current.type);if(e)return`
+(function(O,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(O=typeof globalThis<"u"?globalThis:O||self,p(O.ElearningComponents={},O.React))})(this,(function(O,p){"use strict";var G={exports:{}},U={};var ce;function Fe(){if(ce)return U;ce=1;var s=p,g=Symbol.for("react.element"),E=Symbol.for("react.fragment"),h=Object.prototype.hasOwnProperty,w=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,k={key:!0,ref:!0,__self:!0,__source:!0};function x(R,o,u){var d,m={},S=null,N=null;u!==void 0&&(S=""+u),o.key!==void 0&&(S=""+o.key),o.ref!==void 0&&(N=o.ref);for(d in o)h.call(o,d)&&!k.hasOwnProperty(d)&&(m[d]=o[d]);if(R&&R.defaultProps)for(d in o=R.defaultProps,o)m[d]===void 0&&(m[d]=o[d]);return{$$typeof:g,type:R,key:S,ref:N,props:m,_owner:w.current}}return U.Fragment=E,U.jsx=x,U.jsxs=x,U}var V={};var le;function Ye(){return le||(le=1,process.env.NODE_ENV!=="production"&&(function(){var s=p,g=Symbol.for("react.element"),E=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),k=Symbol.for("react.profiler"),x=Symbol.for("react.provider"),R=Symbol.for("react.context"),o=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),m=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),N=Symbol.for("react.offscreen"),D=Symbol.iterator,F="@@iterator";function Q(e){if(e===null||typeof e!="object")return null;var r=D&&e[D]||e[F];return typeof r=="function"?r:null}var A=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function n(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),a=1;a<r;a++)t[a-1]=arguments[a];Y("error",e,t)}}function Y(e,r,t){{var a=A.ReactDebugCurrentFrame,f=a.getStackAddendum();f!==""&&(r+="%s",t=t.concat([f]));var v=t.map(function(l){return String(l)});v.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,v)}}var L=!1,q=!1,Ue=!1,Ve=!1,Xe=!1,fe;fe=Symbol.for("react.module.reference");function Je(e){return!!(typeof e=="string"||typeof e=="function"||e===h||e===k||Xe||e===w||e===u||e===d||Ve||e===N||L||q||Ue||typeof e=="object"&&e!==null&&(e.$$typeof===S||e.$$typeof===m||e.$$typeof===x||e.$$typeof===R||e.$$typeof===o||e.$$typeof===fe||e.getModuleId!==void 0))}function Ge(e,r,t){var a=e.displayName;if(a)return a;var f=r.displayName||r.name||"";return f!==""?t+"("+f+")":t}function de(e){return e.displayName||"Context"}function I(e){if(e==null)return null;if(typeof e.tag=="number"&&n("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case E:return"Portal";case k:return"Profiler";case w:return"StrictMode";case u:return"Suspense";case d:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case R:var r=e;return de(r)+".Consumer";case x:var t=e;return de(t._context)+".Provider";case o:return Ge(e,e.render,"ForwardRef");case m:var a=e.displayName||null;return a!==null?a:I(e.type)||"Memo";case S:{var f=e,v=f._payload,l=f._init;try{return I(l(v))}catch{return null}}}return null}var W=Object.assign,X=0,ve,pe,he,me,_e,ge,be;function ye(){}ye.__reactDisabledLog=!0;function Ke(){{if(X===0){ve=console.log,pe=console.info,he=console.warn,me=console.error,_e=console.group,ge=console.groupCollapsed,be=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ye,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}X++}}function He(){{if(X--,X===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:W({},e,{value:ve}),info:W({},e,{value:pe}),warn:W({},e,{value:he}),error:W({},e,{value:me}),group:W({},e,{value:_e}),groupCollapsed:W({},e,{value:ge}),groupEnd:W({},e,{value:be})})}X<0&&n("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ee=A.ReactCurrentDispatcher,re;function K(e,r,t){{if(re===void 0)try{throw Error()}catch(f){var a=f.stack.trim().match(/\n( *(at )?)/);re=a&&a[1]||""}return`
+`+re+e}}var te=!1,H;{var Ze=typeof WeakMap=="function"?WeakMap:Map;H=new Ze}function Ee(e,r){if(!e||te)return"";{var t=H.get(e);if(t!==void 0)return t}var a;te=!0;var f=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var v;v=ee.current,ee.current=null,Ke();try{if(r){var l=function(){throw Error()};if(Object.defineProperty(l.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(l,[])}catch(T){a=T}Reflect.construct(e,[],l)}else{try{l.call()}catch(T){a=T}e.call(l.prototype)}}else{try{throw Error()}catch(T){a=T}e()}}catch(T){if(T&&a&&typeof T.stack=="string"){for(var c=T.stack.split(`
+`),j=a.stack.split(`
+`),_=c.length-1,b=j.length-1;_>=1&&b>=0&&c[_]!==j[b];)b--;for(;_>=1&&b>=0;_--,b--)if(c[_]!==j[b]){if(_!==1||b!==1)do if(_--,b--,b<0||c[_]!==j[b]){var C=`
+`+c[_].replace(" at new "," at ");return e.displayName&&C.includes("<anonymous>")&&(C=C.replace("<anonymous>",e.displayName)),typeof e=="function"&&H.set(e,C),C}while(_>=1&&b>=0);break}}}finally{te=!1,ee.current=v,He(),Error.prepareStackTrace=f}var M=e?e.displayName||e.name:"",z=M?K(M):"";return typeof e=="function"&&H.set(e,z),z}function $e(e,r,t){return Ee(e,!1)}function Qe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function Z(e,r,t){if(e==null)return"";if(typeof e=="function")return Ee(e,Qe(e));if(typeof e=="string")return K(e);switch(e){case u:return K("Suspense");case d:return K("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case o:return $e(e.render);case m:return Z(e.type,r,t);case S:{var a=e,f=a._payload,v=a._init;try{return Z(v(f),r,t)}catch{}}}return""}var J=Object.prototype.hasOwnProperty,Re={},ke=A.ReactDebugCurrentFrame;function $(e){if(e){var r=e._owner,t=Z(e.type,e._source,r?r.type:null);ke.setExtraStackFrame(t)}else ke.setExtraStackFrame(null)}function qe(e,r,t,a,f){{var v=Function.call.bind(J);for(var l in e)if(v(e,l)){var c=void 0;try{if(typeof e[l]!="function"){var j=Error((a||"React class")+": "+t+" type `"+l+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[l]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw j.name="Invariant Violation",j}c=e[l](r,l,a,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(_){c=_}c&&!(c instanceof Error)&&($(f),n("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",a||"React class",t,l,typeof c),$(null)),c instanceof Error&&!(c.message in Re)&&(Re[c.message]=!0,$(f),n("Failed %s type: %s",t,c.message),$(null))}}}var er=Array.isArray;function ne(e){return er(e)}function rr(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function tr(e){try{return xe(e),!1}catch{return!0}}function xe(e){return""+e}function je(e){if(tr(e))return n("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",rr(e)),xe(e)}var we=A.ReactCurrentOwner,nr={key:!0,ref:!0,__self:!0,__source:!0},Te,Se;function ar(e){if(J.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function ir(e){if(J.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function or(e,r){typeof e.ref=="string"&&we.current}function sr(e,r){{var t=function(){Te||(Te=!0,n("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function cr(e,r){{var t=function(){Se||(Se=!0,n("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var lr=function(e,r,t,a,f,v,l){var c={$$typeof:g,type:e,key:r,ref:t,props:l,_owner:v};return c._store={},Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:f}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function ur(e,r,t,a,f){{var v,l={},c=null,j=null;t!==void 0&&(je(t),c=""+t),ir(r)&&(je(r.key),c=""+r.key),ar(r)&&(j=r.ref,or(r,f));for(v in r)J.call(r,v)&&!nr.hasOwnProperty(v)&&(l[v]=r[v]);if(e&&e.defaultProps){var _=e.defaultProps;for(v in _)l[v]===void 0&&(l[v]=_[v])}if(c||j){var b=typeof e=="function"?e.displayName||e.name||"Unknown":e;c&&sr(l,b),j&&cr(l,b)}return lr(e,c,j,f,a,we.current,l)}}var ae=A.ReactCurrentOwner,Ce=A.ReactDebugCurrentFrame;function B(e){if(e){var r=e._owner,t=Z(e.type,e._source,r?r.type:null);Ce.setExtraStackFrame(t)}else Ce.setExtraStackFrame(null)}var ie;ie=!1;function oe(e){return typeof e=="object"&&e!==null&&e.$$typeof===g}function Pe(){{if(ae.current){var e=I(ae.current.type);if(e)return`
 
-Check the render method of \``+e+"`."}return""}}function lr(e){return""}var Te={};function ur(e){{var r=xe();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+Check the render method of \``+e+"`."}return""}}function fr(e){return""}var Oe={};function dr(e){{var r=Pe();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
 
-Check the top-level render call using <`+t+">.")}return r}}function Se(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=ur(r);if(Te[t])return;Te[t]=!0;var n="";e&&e._owner&&e._owner!==H.current&&(n=" It was passed a child from "+P(e._owner.type)+"."),I(e),b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),I(null)}}function Ce(e,r){{if(typeof e!="object")return;if(q(e))for(var t=0;t<e.length;t++){var n=e[t];Q(n)&&Se(n,r)}else if(Q(e))e._store&&(e._store.validated=!0);else if(e){var s=We(e);if(typeof s=="function"&&s!==e.entries)for(var l=s.call(e),i;!(i=l.next()).done;)Q(i.value)&&Se(i.value,r)}}}function fr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===o||r.$$typeof===h))t=r.propTypes;else return;if(t){var n=P(r);He(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!Z){Z=!0;var s=P(r);b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",s||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function dr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){I(e),b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),I(null);break}}e.ref!==null&&(I(e),b("Invalid attribute `ref` supplied to `React.Fragment`."),I(null))}}var we={};function Oe(e,r,t,n,s,l){{var i=Je(e);if(!i){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var _=lr();_?a+=_:a+=xe();var v;e===null?v="null":q(e)?v="array":e!==void 0&&e.$$typeof===g?(v="<"+(P(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):v=typeof e,b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",v,a)}var p=cr(e,r,t,s,l);if(p==null)return p;if(i){var x=r.children;if(x!==void 0)if(n)if(q(x)){for(var W=0;W<x.length;W++)Ce(x[W],e);Object.freeze&&Object.freeze(x)}else b("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ce(x,e)}if(V.call(r,"key")){var N=P(e),m=Object.keys(r).filter(function(_r){return _r!=="key"}),ee=m.length>0?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}";if(!we[N+ee]){var br=m.length>0?"{"+m.join(": ..., ")+": ...}":"{}";b(`A props object containing a "key" prop is being spread into JSX:
+Check the top-level render call using <`+t+">.")}return r}}function Ne(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=dr(r);if(Oe[t])return;Oe[t]=!0;var a="";e&&e._owner&&e._owner!==ae.current&&(a=" It was passed a child from "+I(e._owner.type)+"."),B(e),n('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,a),B(null)}}function De(e,r){{if(typeof e!="object")return;if(ne(e))for(var t=0;t<e.length;t++){var a=e[t];oe(a)&&Ne(a,r)}else if(oe(e))e._store&&(e._store.validated=!0);else if(e){var f=Q(e);if(typeof f=="function"&&f!==e.entries)for(var v=f.call(e),l;!(l=v.next()).done;)oe(l.value)&&Ne(l.value,r)}}}function vr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===o||r.$$typeof===m))t=r.propTypes;else return;if(t){var a=I(r);qe(t,e.props,"prop",a,e)}else if(r.PropTypes!==void 0&&!ie){ie=!0;var f=I(r);n("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",f||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&n("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function pr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var a=r[t];if(a!=="children"&&a!=="key"){B(e),n("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",a),B(null);break}}e.ref!==null&&(B(e),n("Invalid attribute `ref` supplied to `React.Fragment`."),B(null))}}var Ae={};function Ie(e,r,t,a,f,v){{var l=Je(e);if(!l){var c="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(c+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var j=fr();j?c+=j:c+=Pe();var _;e===null?_="null":ne(e)?_="array":e!==void 0&&e.$$typeof===g?(_="<"+(I(e.type)||"Unknown")+" />",c=" Did you accidentally export a JSX literal instead of a component?"):_=typeof e,n("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",_,c)}var b=ur(e,r,t,f,v);if(b==null)return b;if(l){var C=r.children;if(C!==void 0)if(a)if(ne(C)){for(var M=0;M<C.length;M++)De(C[M],e);Object.freeze&&Object.freeze(C)}else n("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else De(C,e)}if(J.call(r,"key")){var z=I(e),T=Object.keys(r).filter(function(yr){return yr!=="key"}),se=T.length>0?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}";if(!Ae[z+se]){var br=T.length>0?"{"+T.join(": ..., ")+": ...}":"{}";n(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,ee,N,br,N),we[N+ee]=!0}}return e===E?dr(p):fr(p),p}}function vr(e,r,t){return Oe(e,r,t,!0)}function pr(e,r,t){return Oe(e,r,t,!1)}var hr=pr,gr=vr;L.Fragment=E,L.jsx=hr,L.jsxs=gr})()),L}var ne;function De(){return ne||(ne=1,process.env.NODE_ENV==="production"?M.exports=ke():M.exports=Pe()),M.exports}var u=De();const Ne=({cards:f=[]})=>{const[g,k]=y.useState(0),[E,S]=y.useState(!1);if(!f||f.length===0)return u.jsx("div",{className:"flashcard-deck-container",children:u.jsx("p",{className:"flashcard-empty-message",children:"No cards available"})});const w=f[g],R=g>0,j=g<f.length-1,o=()=>{R&&(k(g-1),S(!1))},d=()=>{j&&(k(g+1),S(!1))},c=()=>{S(!E)};return u.jsxs("div",{className:"flashcard-deck-container",children:[u.jsx("div",{className:"flashcard-deck-header",children:u.jsxs("span",{className:"flashcard-counter",children:["Card ",g+1," of ",f.length]})}),u.jsx("div",{className:"flashcard-wrapper",children:u.jsxs("div",{className:`flashcard ${E?"flashcard--flipped":""}`,onClick:c,children:[u.jsx("div",{className:"flashcard-face flashcard-front",children:u.jsx("div",{className:"flashcard-content",children:w.front})}),u.jsx("div",{className:"flashcard-face flashcard-back",children:u.jsx("div",{className:"flashcard-content",children:w.back})})]},g)}),u.jsxs("div",{className:"flashcard-controls",children:[u.jsx("button",{className:"flashcard-button flashcard-button-previous",onClick:o,disabled:!R,"aria-label":"Previous card",children:"Previous"}),u.jsx("button",{className:"flashcard-button flashcard-button-next",onClick:d,disabled:!j,"aria-label":"Next card",children:"Next"})]})]})},T={accordion:"_accordion_1rfb4_1",empty:"_empty_1rfb4_17",item:"_item_1rfb4_31",heading:"_heading_1rfb4_73",trigger:"_trigger_1rfb4_85",title:"_title_1rfb4_145",icon:"_icon_1rfb4_155",panelWrapper:"_panelWrapper_1rfb4_187",panel:"_panel_1rfb4_187",content:"_content_1rfb4_217"};function Ae(f){return f==null?new Set:typeof f=="string"?new Set([f]):new Set(f)}const Fe=({items:f,allowMultiple:g=!1,defaultOpenId:k})=>{const E=y.useId(),[S,w]=y.useState(()=>Ae(k)),R=y.useCallback(o=>{w(d=>{const c=new Set(d);return c.has(o)?c.delete(o):(g||c.clear(),c.add(o)),c})},[g]),j=y.useCallback((o,d)=>{const h=o.currentTarget.closest("[data-accordion]")?.querySelectorAll("[data-accordion-trigger]");if(h?.length)switch(o.key){case"Enter":case" ":o.preventDefault(),f[d]&&R(f[d].id);break;case"ArrowDown":case"ArrowRight":o.preventDefault(),d<f.length-1&&h[d+1]?.focus();break;case"ArrowUp":case"ArrowLeft":o.preventDefault(),d>0&&h[d-1]?.focus();break;case"Home":o.preventDefault(),h[0]?.focus();break;case"End":o.preventDefault(),h[h.length-1]?.focus();break}},[f,R]);return f?.length?u.jsx("div",{className:T.accordion,role:"region","aria-label":"Accordion","data-accordion":!0,children:f.map((o,d)=>{const c=S.has(o.id),h=`${E}-header-${d}`,C=`${E}-panel-${d}`;return u.jsxs("div",{className:T.item,"data-open":c,children:[u.jsx("h3",{className:T.heading,children:u.jsxs("button",{type:"button",id:h,className:T.trigger,"aria-expanded":c,"aria-controls":C,"data-accordion-trigger":!0,onClick:()=>R(o.id),onKeyDown:A=>j(A,d),children:[u.jsx("span",{className:T.title,children:o.title}),u.jsx("span",{className:T.icon,"aria-hidden":!0,children:"▼"})]})}),u.jsx("div",{id:C,role:"region","aria-labelledby":h,"aria-hidden":!c,className:T.panelWrapper,"data-open":c,children:u.jsx("div",{className:T.panel,children:u.jsx("div",{className:T.content,children:o.content})})})]},o.id)})}):u.jsx("div",{className:T.accordion,role:"region","aria-label":"Accordion",children:u.jsx("p",{className:T.empty,children:"No items to display."})})};O.Accordion=Fe,O.FlashcardDeck=Ne,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,se,z,br,z),Ae[z+se]=!0}}return e===h?pr(b):vr(b),b}}function hr(e,r,t){return Ie(e,r,t,!0)}function mr(e,r,t){return Ie(e,r,t,!1)}var _r=mr,gr=hr;V.Fragment=h,V.jsx=_r,V.jsxs=gr})()),V}var ue;function Le(){return ue||(ue=1,process.env.NODE_ENV==="production"?G.exports=Fe():G.exports=Ye()),G.exports}var i=Le();const We=({cards:s=[]})=>{const[g,E]=p.useState(0),[h,w]=p.useState(!1);if(!s||s.length===0)return i.jsx("div",{className:"flashcard-deck-container",children:i.jsx("p",{className:"flashcard-empty-message",children:"No cards available"})});const k=s[g],x=g>0,R=g<s.length-1,o=()=>{x&&(E(g-1),w(!1))},u=()=>{R&&(E(g+1),w(!1))},d=()=>{w(!h)};return i.jsxs("div",{className:"flashcard-deck-container",children:[i.jsx("div",{className:"flashcard-deck-header",children:i.jsxs("span",{className:"flashcard-counter",children:["Card ",g+1," of ",s.length]})}),i.jsx("div",{className:"flashcard-wrapper",children:i.jsxs("div",{className:`flashcard ${h?"flashcard--flipped":""}`,onClick:d,children:[i.jsx("div",{className:"flashcard-face flashcard-front",children:i.jsx("div",{className:"flashcard-content",children:k.front})}),i.jsx("div",{className:"flashcard-face flashcard-back",children:i.jsx("div",{className:"flashcard-content",children:k.back})})]},g)}),i.jsxs("div",{className:"flashcard-controls",children:[i.jsx("button",{className:"flashcard-button flashcard-button-previous",onClick:o,disabled:!x,"aria-label":"Previous card",children:"Previous"}),i.jsx("button",{className:"flashcard-button flashcard-button-next",onClick:u,disabled:!R,"aria-label":"Next card",children:"Next"})]})]})},P={accordion:"_accordion_1rfb4_1",empty:"_empty_1rfb4_17",item:"_item_1rfb4_31",heading:"_heading_1rfb4_73",trigger:"_trigger_1rfb4_85",title:"_title_1rfb4_145",icon:"_icon_1rfb4_155",panelWrapper:"_panelWrapper_1rfb4_187",panel:"_panel_1rfb4_187",content:"_content_1rfb4_217"};function ze(s){return s==null?new Set:typeof s=="string"?new Set([s]):new Set(s)}const Be=({items:s,allowMultiple:g=!1,defaultOpenId:E})=>{const h=p.useId(),[w,k]=p.useState(()=>ze(E)),x=p.useCallback(o=>{k(u=>{const d=new Set(u);return d.has(o)?d.delete(o):(g||d.clear(),d.add(o)),d})},[g]),R=p.useCallback((o,u)=>{const m=o.currentTarget.closest("[data-accordion]")?.querySelectorAll("[data-accordion-trigger]");if(m?.length)switch(o.key){case"Enter":case" ":o.preventDefault(),s[u]&&x(s[u].id);break;case"ArrowDown":case"ArrowRight":o.preventDefault(),u<s.length-1&&m[u+1]?.focus();break;case"ArrowUp":case"ArrowLeft":o.preventDefault(),u>0&&m[u-1]?.focus();break;case"Home":o.preventDefault(),m[0]?.focus();break;case"End":o.preventDefault(),m[m.length-1]?.focus();break}},[s,x]);return s?.length?i.jsx("div",{className:P.accordion,role:"region","aria-label":"Accordion","data-accordion":!0,children:s.map((o,u)=>{const d=w.has(o.id),m=`${h}-header-${u}`,S=`${h}-panel-${u}`;return i.jsxs("div",{className:P.item,"data-open":d,children:[i.jsx("h3",{className:P.heading,children:i.jsxs("button",{type:"button",id:m,className:P.trigger,"aria-expanded":d,"aria-controls":S,"data-accordion-trigger":!0,onClick:()=>x(o.id),onKeyDown:N=>R(N,u),children:[i.jsx("span",{className:P.title,children:o.title}),i.jsx("span",{className:P.icon,"aria-hidden":!0,children:"▼"})]})}),i.jsx("div",{id:S,role:"region","aria-labelledby":m,"aria-hidden":!d,className:P.panelWrapper,"data-open":d,children:i.jsx("div",{className:P.panel,children:i.jsx("div",{className:P.content,children:o.content})})})]},o.id)})}):i.jsx("div",{className:P.accordion,role:"region","aria-label":"Accordion",children:i.jsx("p",{className:P.empty,children:"No items to display."})})},y={wrapper:"_wrapper_ip42z_3",contentPanel:"_contentPanel_ip42z_39",contentSlide:"_contentSlide_ip42z_57",contentYear:"_contentYear_ip42z_87",contentTitle:"_contentTitle_ip42z_107",contentBody:"_contentBody_ip42z_123",timelineSection:"_timelineSection_ip42z_153",navButton:"_navButton_ip42z_165",track:"_track_ip42z_223",dragging:"_dragging_ip42z_247",trackInner:"_trackInner_ip42z_283",marker:"_marker_ip42z_299",markerActive:"_markerActive_ip42z_347",markerYear:"_markerYear_ip42z_375",markerTitle:"_markerTitle_ip42z_387",empty:"_empty_ip42z_409"},Me=({events:s,defaultActiveId:g})=>{const E=p.useRef(null),[h,w]=p.useState(()=>g&&s.some(n=>n.id===g)?g:s.length>0?s[0].id:null),[k,x]=p.useState(!1),R=p.useRef({startX:0,scrollLeft:0}),o=s.find(n=>n.id===h)??s[0],u=s.findIndex(n=>n.id===h),d=p.useCallback(n=>{w(n)},[]),m=p.useCallback(()=>{u>0&&w(s[u-1].id)},[u,s]),S=p.useCallback(()=>{u<s.length-1&&u>=0&&w(s[u+1].id)},[u,s]),N=p.useCallback(n=>{if(!E.current||n.target.closest(`.${y.marker}`))return;const L="touches"in n?n.touches[0].clientX:n.clientX;x(!0),R.current={startX:L,scrollLeft:E.current.scrollLeft}},[]),D=p.useCallback(n=>{if(!k||!E.current)return;n.preventDefault();const Y="touches"in n?n.touches[0].clientX:n.clientX,L=R.current.startX-Y;E.current.scrollLeft=R.current.scrollLeft+L},[k]),F=p.useCallback(()=>{x(!1)},[]);if(p.useEffect(()=>{if(k)return window.addEventListener("mousemove",D,{passive:!1}),window.addEventListener("mouseup",F),window.addEventListener("touchmove",D,{passive:!1}),window.addEventListener("touchend",F),()=>{window.removeEventListener("mousemove",D),window.removeEventListener("mouseup",F),window.removeEventListener("touchmove",D),window.removeEventListener("touchend",F)}},[k,D,F]),p.useEffect(()=>{if(!E.current||!h)return;const n=E.current.querySelector(`[data-event-id="${h}"]`);if(n){const Y=E.current,L=Y.clientWidth/2,q=n.offsetLeft-L+n.offsetWidth/2;Y.scrollTo({left:Math.max(0,q),behavior:"smooth"})}},[h]),!s||s.length===0)return i.jsx("div",{className:y.wrapper,children:i.jsx("p",{className:y.empty,children:"No events to display."})});const Q=u>0,A=u>=0&&u<s.length-1;return i.jsxs("div",{className:y.wrapper,children:[i.jsx("div",{className:y.contentPanel,children:i.jsx("div",{className:y.contentSlide,children:o&&i.jsxs(i.Fragment,{children:[i.jsx("span",{className:y.contentYear,children:o.year}),i.jsx("h2",{className:y.contentTitle,children:o.title}),i.jsx("div",{className:y.contentBody,children:o.content})]})},h)}),i.jsxs("div",{className:y.timelineSection,children:[i.jsx("button",{type:"button",className:y.navButton,onClick:m,disabled:!Q,"aria-label":"Previous event",children:"‹"}),i.jsx("div",{ref:E,className:`${y.track} ${k?y.dragging:""}`,onMouseDown:N,onTouchStart:N,role:"list","aria-label":"Timeline events",children:i.jsx("div",{className:y.trackInner,children:s.map(n=>i.jsxs("button",{type:"button","data-event-id":n.id,className:`${y.marker} ${n.id===h?y.markerActive:""}`,onClick:()=>d(n.id),"aria-pressed":n.id===h,"aria-label":`${n.year}: ${n.title}`,children:[i.jsx("span",{className:y.markerYear,children:n.year}),i.jsx("span",{className:y.markerTitle,children:n.title})]},n.id))})}),i.jsx("button",{type:"button",className:y.navButton,onClick:S,disabled:!A,"aria-label":"Next event",children:"›"})]})]})};O.Accordion=Be,O.FlashcardDeck=We,O.InteractiveTimeline=Me,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zomako/elearning-components",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A library of interactive and SCORM-compliant eLearning components.",
   "main": "dist/index.js",
   "scripts": {

package/src/components/InteractiveTimeline/InteractiveTimeline.tsx

@@ -0,0 +1,191 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import styles from './style.module.css';
+
+export interface TimelineEvent {
+  id: string;
+  year: string;
+  title: string;
+  content: React.ReactNode;
+}
+
+export interface InteractiveTimelineProps {
+  events: TimelineEvent[];
+  defaultActiveId?: string;
+}
+
+const InteractiveTimeline: React.FC<InteractiveTimelineProps> = ({
+  events,
+  defaultActiveId,
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [activeId, setActiveId] = useState<string | null>(() => {
+    if (defaultActiveId && events.some((e) => e.id === defaultActiveId)) {
+      return defaultActiveId;
+    }
+    return events.length > 0 ? events[0].id : null;
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragState = useRef({ startX: 0, scrollLeft: 0 });
+
+  const activeEvent = events.find((e) => e.id === activeId) ?? events[0];
+  const activeIndex = events.findIndex((e) => e.id === activeId);
+
+  const handleMarkerClick = useCallback(
+    (id: string) => {
+      setActiveId(id);
+    },
+    []
+  );
+
+  const goPrevious = useCallback(() => {
+    if (activeIndex > 0) {
+      setActiveId(events[activeIndex - 1].id);
+    }
+  }, [activeIndex, events]);
+
+  const goNext = useCallback(() => {
+    if (activeIndex < events.length - 1 && activeIndex >= 0) {
+      setActiveId(events[activeIndex + 1].id);
+    }
+  }, [activeIndex, events]);
+
+  const handlePointerDown = useCallback(
+    (e: React.MouseEvent | React.TouchEvent) => {
+      if (!scrollRef.current) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(`.${styles.marker}`)) return;
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      setIsDragging(true);
+      dragState.current = {
+        startX: clientX,
+        scrollLeft: scrollRef.current.scrollLeft,
+      };
+    },
+    []
+  );
+
+  const handlePointerMove = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!isDragging || !scrollRef.current) return;
+      e.preventDefault();
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      const dx = dragState.current.startX - clientX;
+      scrollRef.current.scrollLeft = dragState.current.scrollLeft + dx;
+    },
+    [isDragging]
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    window.addEventListener('mousemove', handlePointerMove, { passive: false });
+    window.addEventListener('mouseup', handlePointerUp);
+    window.addEventListener('touchmove', handlePointerMove, { passive: false });
+    window.addEventListener('touchend', handlePointerUp);
+    return () => {
+      window.removeEventListener('mousemove', handlePointerMove);
+      window.removeEventListener('mouseup', handlePointerUp);
+      window.removeEventListener('touchmove', handlePointerMove);
+      window.removeEventListener('touchend', handlePointerUp);
+    };
+  }, [isDragging, handlePointerMove, handlePointerUp]);
+
+  useEffect(() => {
+    if (!scrollRef.current || !activeId) return;
+    const marker = scrollRef.current.querySelector(
+      `[data-event-id="${activeId}"]`
+    ) as HTMLElement | null;
+    if (marker) {
+      const container = scrollRef.current;
+      const half = container.clientWidth / 2;
+      const target =
+        marker.offsetLeft - half + marker.offsetWidth / 2;
+      container.scrollTo({
+        left: Math.max(0, target),
+        behavior: 'smooth',
+      });
+    }
+  }, [activeId]);
+
+  if (!events || events.length === 0) {
+    return (
+      <div className={styles.wrapper}>
+        <p className={styles.empty}>No events to display.</p>
+      </div>
+    );
+  }
+
+  const canGoPrevious = activeIndex > 0;
+  const canGoNext = activeIndex >= 0 && activeIndex < events.length - 1;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.contentPanel}>
+        <div key={activeId} className={styles.contentSlide}>
+          {activeEvent && (
+            <>
+              <span className={styles.contentYear}>{activeEvent.year}</span>
+              <h2 className={styles.contentTitle}>{activeEvent.title}</h2>
+              <div className={styles.contentBody}>{activeEvent.content}</div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.timelineSection}>
+        <button
+          type="button"
+          className={styles.navButton}
+          onClick={goPrevious}
+          disabled={!canGoPrevious}
+          aria-label="Previous event"
+        >
+          ‹
+        </button>
+
+        <div
+          ref={scrollRef}
+          className={`${styles.track} ${isDragging ? styles.dragging : ''}`}
+          onMouseDown={handlePointerDown}
+          onTouchStart={handlePointerDown}
+          role="list"
+          aria-label="Timeline events"
+        >
+          <div className={styles.trackInner}>
+            {events.map((event) => (
+              <button
+                type="button"
+                key={event.id}
+                data-event-id={event.id}
+                className={`${styles.marker} ${
+                  event.id === activeId ? styles.markerActive : ''
+                }`}
+                onClick={() => handleMarkerClick(event.id)}
+                aria-pressed={event.id === activeId}
+                aria-label={`${event.year}: ${event.title}`}
+              >
+                <span className={styles.markerYear}>{event.year}</span>
+                <span className={styles.markerTitle}>{event.title}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className={styles.navButton}
+          onClick={goNext}
+          disabled={!canGoNext}
+          aria-label="Next event"
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InteractiveTimeline;

package/src/components/InteractiveTimeline/index.ts

@@ -0,0 +1,5 @@
+export {
+  default,
+  type TimelineEvent,
+  type InteractiveTimelineProps,
+} from './InteractiveTimeline';

package/src/components/InteractiveTimeline/style.module.css

@@ -0,0 +1,211 @@
+/* ---- Wrapper ---- */
+.wrapper {
+  --timeline-accent: #2563eb;
+  --timeline-accent-hover: #1d4ed8;
+  --timeline-bg: #f8fafc;
+  --timeline-line: #e2e8f0;
+  --timeline-text: #1e293b;
+  --timeline-muted: #64748b;
+  --timeline-radius: 12px;
+  --timeline-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: var(--timeline-text);
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* ---- Content panel ---- */
+.contentPanel {
+  background: var(--timeline-bg);
+  border-radius: var(--timeline-radius);
+  padding: 1.75rem 2rem;
+  box-shadow: var(--timeline-shadow);
+  min-height: 140px;
+  overflow: hidden;
+}
+
+.contentSlide {
+  animation: contentIn 0.35s ease-out forwards;
+}
+
+@keyframes contentIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.contentYear {
+  display: inline-block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--timeline-accent);
+  margin-bottom: 0.35rem;
+}
+
+.contentTitle {
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 0 0 0.75rem 0;
+  color: var(--timeline-text);
+}
+
+.contentBody {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--timeline-muted);
+}
+
+.contentBody p {
+  margin: 0 0 0.5rem 0;
+}
+
+.contentBody p:last-child {
+  margin-bottom: 0;
+}
+
+/* ---- Timeline section ---- */
+.timelineSection {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navButton {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--timeline-line);
+  background: #fff;
+  color: var(--timeline-text);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.navButton:hover:not(:disabled) {
+  border-color: var(--timeline-accent);
+  background: var(--timeline-accent);
+  color: #fff;
+}
+
+.navButton:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---- Track (draggable scroll area) ---- */
+.track {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
+  scrollbar-color: var(--timeline-line) transparent;
+  cursor: grab;
+  padding: 0.5rem 0;
+  margin: 0 -0.5rem;
+}
+
+.track.dragging {
+  cursor: grabbing;
+  scroll-behavior: auto;
+}
+
+.track::-webkit-scrollbar {
+  height: 6px;
+}
+
+.track::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.track::-webkit-scrollbar-thumb {
+  background: var(--timeline-line);
+  border-radius: 3px;
+}
+
+.trackInner {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0 0.25rem;
+  min-width: min-content;
+}
+
+/* ---- Event markers ---- */
+.marker {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  min-width: 100px;
+  border: 2px solid var(--timeline-line);
+  border-radius: var(--timeline-radius);
+  background: #fff;
+  color: var(--timeline-muted);
+  font: inherit;
+  cursor: pointer;
+  text-align: center;
+  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease,
+    color 0.25s ease, box-shadow 0.25s ease;
+}
+
+.marker:hover {
+  border-color: var(--timeline-accent);
+  color: var(--timeline-accent);
+}
+
+.markerActive {
+  border-color: var(--timeline-accent);
+  background: var(--timeline-accent);
+  color: #fff;
+  transform: scale(1.08);
+  box-shadow: var(--timeline-shadow);
+}
+
+.markerActive:hover {
+  background: var(--timeline-accent-hover);
+  border-color: var(--timeline-accent-hover);
+  color: #fff;
+}
+
+.markerYear {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.markerTitle {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ---- Empty state ---- */
+.empty {
+  margin: 0;
+  padding: 2rem;
+  text-align: center;
+  color: var(--timeline-muted);
+  font-size: 1rem;
+}

package/src/index.ts

@@ -1,3 +1,8 @@
 // src/index.ts
 export { default as FlashcardDeck } from './components/FlashcardDeck';
-export { default as Accordion, type AccordionProps, type AccordionItem } from './components/Accordion';
+export { default as Accordion, type AccordionProps, type AccordionItem } from './components/Accordion';
+export {
+  default as InteractiveTimeline,
+  type TimelineEvent,
+  type InteractiveTimelineProps,
+} from './components/InteractiveTimeline';