jvetrau-ds 0.2.10 → 0.2.12

package/components/calendar-month/calendar-month.css

@@ -1,8 +1,14 @@
 .calendar-month {
   /* color */
   --calendar-month-color: inherit;
-  --calendar-month-note-color: var(--color-text-note);
-  --calendar-month-marker-color: var(--color-primary);
+  --calendar-month-weekday-color:
+    var(--color-text);
+  --calendar-month-marked-bg:
+    var(--color-bg-contrast);
+  --calendar-month-marked-color:
+    var(--color-text-contrast);
+  --calendar-month-marker-color:
+    var(--color-primary);
 
   color: var(--calendar-month-color);
 
@@ -109,7 +115,6 @@
 
 .calendar-month__weekday {
   /* color */
-  color: var(--calendar-month-note-color);
 
   /* typography */
   font-family:
@@ -189,11 +194,10 @@
     var(--calendar-month-date-letter-spacing);
 
   /* size */
-  display: inline-flex;
-  flex-direction: column;
+  position: relative;
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
   width: 100%;
   height: 100%;
 
@@ -206,6 +210,10 @@
 
 .calendar-month__date--marked {
   /* color */
+  background:
+    var(--calendar-month-marked-bg);
+  color:
+    var(--calendar-month-marked-color);
 
   /* typography */
 
@@ -220,13 +228,20 @@
 
 .calendar-month__marker {
   /* color */
-  background: var(--calendar-month-marker-color);
+  background:
+    var(--calendar-month-marker-color);
 
   /* typography */
 
   /* size */
-  width: var(--calendar-month-marker-size);
-  height: var(--calendar-month-marker-size);
+  position: absolute;
+  bottom: 0.25rem;
+  left: 50%;
+  width:
+    var(--calendar-month-marker-size);
+  height:
+    var(--calendar-month-marker-size);
+  transform: translateX(-50%);
 
   /* border */
   border-radius: 999px;

package/components/form-message/form-message.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./form-message.css');
+var classnames = require('../helpers/classnames');
+
+const FormMessageItem = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "form-message__item",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ...props,
+      className: classes,
+      children
+    }
+  );
+};
+const FormMessage = ({
+  status,
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "form-message",
+    className,
+    {
+      "form-message--info": status === "info",
+      "form-message--success": status === "success",
+      "form-message--warning": status === "warning",
+      "form-message--error": status === "error"
+    }
+  );
+  const role = status === "error" ? "alert" : "status";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: classes,
+      role,
+      children
+    }
+  );
+};
+FormMessage.Item = FormMessageItem;
+var form_message_default = FormMessage;
+
+module.exports = form_message_default;
+//# sourceMappingURL=form-message.cjs.map
+//# sourceMappingURL=form-message.cjs.map

package/components/form-message/form-message.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,MAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,MAAA,KAAW,OAAA,GACP,OAAA,GACA,QAAA;AAEN,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.cjs","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  status: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {},\n  );\n\n  return (\n    <p\n      {...props}\n      className={classes}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  status,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {\n      'form-message--info':\n        status === 'info',\n      'form-message--success':\n        status === 'success',\n      'form-message--warning':\n        status === 'warning',\n      'form-message--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : 'status';\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}

package/components/form-message/form-message.css

@@ -0,0 +1,136 @@
+.form-message {
+  /* color */
+  --form-message-color:
+    var(--color-text);
+
+  color: var(--form-message-color);
+
+  /* typography */
+  --form-message-font-family:
+    var(--font-body-family);
+  --form-message-font-size:
+    var(--font-body);
+  --form-message-font-weight:
+    var(--font-body-weight);
+  --form-message-line-height:
+    var(--font-body-line);
+  --form-message-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  font-family:
+    var(--form-message-font-family);
+  font-size:
+    var(--form-message-font-size);
+  font-weight:
+    var(--form-message-font-weight);
+  line-height:
+    var(--form-message-line-height);
+  letter-spacing:
+    var(--form-message-letter-spacing);
+
+  /* size */
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--info {
+  /* color */
+  --form-message-color:
+    var(--color-text);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--success {
+  /* color */
+  --form-message-color:
+    var(--color-text-good);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--warning {
+  /* color */
+  --form-message-color:
+    var(--color-text-med);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--error {
+  /* color */
+  --form-message-color:
+    var(--color-text-bad);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message__item {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font: inherit;
+  letter-spacing: inherit;
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message__item + .form-message__item {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--font-body-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/form-message/form-message.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './form-message.css';
+export type FormMessageStatus = 'info' | 'success' | 'warning' | 'error';
+export interface FormMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    status: FormMessageStatus;
+    children: React.ReactNode;
+}
+export interface FormMessageItemProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    children: React.ReactNode;
+}
+interface FormMessageComponent extends React.FC<FormMessageProps> {
+    Item: React.FC<FormMessageItemProps>;
+}
+declare const FormMessage: FormMessageComponent;
+export default FormMessage;

package/components/form-message/form-message.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import './form-message.css';
+import { classnames } from '../helpers/classnames';
+
+const FormMessageItem = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "form-message__item",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: classes,
+      children
+    }
+  );
+};
+const FormMessage = ({
+  status,
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "form-message",
+    className,
+    {
+      "form-message--info": status === "info",
+      "form-message--success": status === "success",
+      "form-message--warning": status === "warning",
+      "form-message--error": status === "error"
+    }
+  );
+  const role = status === "error" ? "alert" : "status";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: classes,
+      role,
+      children
+    }
+  );
+};
+FormMessage.Item = FormMessageItem;
+var form_message_default = FormMessage;
+
+export { form_message_default as default };
+//# sourceMappingURL=form-message.js.map
+//# sourceMappingURL=form-message.js.map

package/components/form-message/form-message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,MAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,MAAA,KAAW,OAAA,GACP,OAAA,GACA,QAAA;AAEN,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.js","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  status: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {},\n  );\n\n  return (\n    <p\n      {...props}\n      className={classes}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  status,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {\n      'form-message--info':\n        status === 'info',\n      'form-message--success':\n        status === 'success',\n      'form-message--warning':\n        status === 'warning',\n      'form-message--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : 'status';\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}

package/components/form-message/form-message.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const formMessageMeta: ComponentMeta;

package/components/form-message/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formMessage = require('./form-message');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
+
+
+
+Object.defineProperty(exports, "FormMessage", {
+  enumerable: true,
+  get: function () { return formMessage__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return formMessage__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/form-message/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/form-message/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './form-message';
+export { default as FormMessage, } from './form-message';
+export type { FormMessageItemProps, FormMessageProps, FormMessageStatus, } from './form-message';

package/components/form-message/index.js

@@ -0,0 +1,3 @@
+export { default as FormMessage, default } from './form-message';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/form-message/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -8,6 +8,8 @@ var dropdown = require('./dropdown/dropdown');
 var checkbox = require('./checkbox/checkbox');
 var radio = require('./radio/radio');
 var field = require('./field/field');
+var fieldGroup = require('./field-group/field-group');
+var formMessage = require('./form-message');
 var menu = require('./menu/menu');
 var tabs = require('./tabs/tabs');
 var tag = require('./tag/tag');
@@ -19,7 +21,6 @@ var logo = require('./logo/logo');
 var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
 var actionGroup = require('./action-group/action-group');
-var fieldGroup = require('./field-group/field-group');
 var cardGroup = require('./card-group/card-group');
 var breadcrumbs = require('./breadcrumbs/breadcrumbs');
 var markdown = require('./markdown/markdown');
@@ -39,6 +40,8 @@ var dropdown__default = /*#__PURE__*/_interopDefault(dropdown);
 var checkbox__default = /*#__PURE__*/_interopDefault(checkbox);
 var radio__default = /*#__PURE__*/_interopDefault(radio);
 var field__default = /*#__PURE__*/_interopDefault(field);
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
+var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
 var menu__default = /*#__PURE__*/_interopDefault(menu);
 var tabs__default = /*#__PURE__*/_interopDefault(tabs);
 var tag__default = /*#__PURE__*/_interopDefault(tag);
@@ -50,7 +53,6 @@ var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
 var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
-var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 var cardGroup__default = /*#__PURE__*/_interopDefault(cardGroup);
 var breadcrumbs__default = /*#__PURE__*/_interopDefault(breadcrumbs);
 var markdown__default = /*#__PURE__*/_interopDefault(markdown);
@@ -97,6 +99,14 @@ Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return field__default.default; }
 });
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () { return fieldGroup__default.default; }
+});
+Object.defineProperty(exports, "FormMessage", {
+  enumerable: true,
+  get: function () { return formMessage__default.default; }
+});
 Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function () { return menu__default.default; }
@@ -141,10 +151,6 @@ Object.defineProperty(exports, "ActionGroup", {
   enumerable: true,
   get: function () { return actionGroup__default.default; }
 });
-Object.defineProperty(exports, "FieldGroup", {
-  enumerable: true,
-  get: function () { return fieldGroup__default.default; }
-});
 Object.defineProperty(exports, "CardGroup", {
   enumerable: true,
   get: function () { return cardGroup__default.default; }

package/components/index.d.ts

@@ -15,6 +15,10 @@ export { default as Radio } from './radio/radio';
 export type { RadioProps } from './radio/radio';
 export { default as Field } from './field/field';
 export type { FieldProps } from './field/field';
+export { default as FieldGroup } from './field-group/field-group';
+export type { FieldGroupProps } from './field-group/field-group';
+export { default as FormMessage } from './form-message';
+export type { FormMessageItemProps, FormMessageProps, FormMessageStatus, } from './form-message';
 export { default as Menu } from './menu/menu';
 export type { MenuItem, MenuProps, } from './menu/menu';
 export { default as Tabs } from './tabs/tabs';
@@ -37,8 +41,6 @@ export { default as Attach } from './attach/attach';
 export type { AttachItem, AttachProps, } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
 export type { ActionGroupProps } from './action-group/action-group';
-export { default as FieldGroup } from './field-group/field-group';
-export type { FieldGroupProps } from './field-group/field-group';
 export { default as CardGroup } from './card-group/card-group';
 export type { CardGroupProps } from './card-group/card-group';
 export { default as Breadcrumbs } from './breadcrumbs/breadcrumbs';

package/components/index.js

@@ -6,6 +6,8 @@ export { default as Dropdown } from './dropdown/dropdown';
 export { default as Checkbox } from './checkbox/checkbox';
 export { default as Radio } from './radio/radio';
 export { default as Field } from './field/field';
+export { default as FieldGroup } from './field-group/field-group';
+export { default as FormMessage } from './form-message';
 export { default as Menu } from './menu/menu';
 export { default as Tabs } from './tabs/tabs';
 export { default as Tag } from './tag/tag';
@@ -17,7 +19,6 @@ export { default as Logo } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
-export { default as FieldGroup } from './field-group/field-group';
 export { default as CardGroup } from './card-group/card-group';
 export { default as Breadcrumbs } from './breadcrumbs/breadcrumbs';
 export { default as Markdown } from './markdown/markdown';

package/components/video/video.cjs

@@ -22,9 +22,12 @@ function getClampedValue(value, min, max) {
     max
   );
 }
-function formatTime(value) {
+function getTimeParts(value) {
   if (!Number.isFinite(value)) {
-    return "0:00";
+    return {
+      minutes: "0",
+      seconds: "00"
+    };
   }
   const minutes = Math.floor(
     value / 60
@@ -32,9 +35,22 @@ function formatTime(value) {
   const seconds = Math.floor(
     value % 60
   );
-  return `${minutes}:${String(
-    seconds
-  ).padStart(2, "0")}`;
+  return {
+    minutes: String(minutes),
+    seconds: String(
+      seconds
+    ).padStart(2, "0")
+  };
+}
+function renderTimeDigits(value) {
+  return value.split("").map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "video__time-digit",
+      children: digit
+    },
+    `${digit}-${index}`
+  ));
 }
 function getBufferedEnd(video) {
   if (video.buffered.length === 0) {
@@ -131,6 +147,7 @@ const Video = ({
   const effectiveMediaKey = mediaKey ?? videoSrc;
   const qualityOptions = getQualityOptions(qualities);
   const hasQualityOptions = qualityOptions.length > 0;
+  const timeParts = getTimeParts(currentTime);
   react.useEffect(() => {
     onPlaybackErrorRef.current = onPlaybackError;
   }, [onPlaybackError]);
@@ -418,7 +435,15 @@ const Video = ({
               onClick: handlePlayToggle
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__time", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-minutes", children: renderTimeDigits(
+              timeParts.minutes
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-separator", children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-seconds", children: renderTimeDigits(
+              timeParts.seconds
+            ) })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ProgressBar__default.default,
             {