jvetrau-ds 0.2.2 → 0.2.4

package/components/flip-list/flip-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":";;;;;AAoEA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,SAAS,mBAAA,CACP,OACA,MAAA,EACY;AACZ,EAAA,IACE,MAAA,KAAW,IAAA,IACX,MAAA,KAAW,MAAA,EACX;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,kBAAkB,KAAA,CAAM,IAAA;AAAA,IAC5B,CAAC,IAAA,KAAS,IAAA,CAAK,EAAA,KAAO;AAAA,GACxB;AAEA,EAAA,OAAO,kBACH,MAAA,GACA,IAAA;AACN;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA,GAAsB,KAAA;AAAA,EACtB,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GAAc,MAAM,KAAA,EAAM;AAEhC,EAAA,MAAM,eACJ,MAAA,KAAW,MAAA;AAEb,EAAA,MAAM,uBACJ,KAAA,CAAM,MAAA;AAAA,IACJ,mBAAA;AAAA,MACE,KAAA;AAAA,MACA,eACI,MAAA,GACA;AAAA;AACN,GACF;AAEF,EAAA,MAAM,wBAAA,GACJ,KAAA,CAAM,MAAA,CAAO,mBAAmB,CAAA;AAElC,EAAA,MAAM,qBACJ,KAAA,CAAM,MAAA;AAAA,IACJ;AAAA,GACF;AAEF,EAAA,MAAM,uBAAA,GACJ,KAAA,CAAM,MAAA,CAAO,KAAK,CAAA;AAEpB,EAAA,MAAM;AAAA,IACJ,sBAAA;AAAA,IACA;AAAA,MACE,KAAA,CAAM,QAAA;AAAA,IAAqB,MAC7B,mBAAA;AAAA,MACE,KAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,kBAAA,GACJ,mBAAA;AAAA,IACE,KAAA;AAAA,IACA,eACI,MAAA,GACA;AAAA,GACN;AAEF,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IACE,uBAAA,CAAwB,OAAA,IACxB,CAAC,wBAAA,CAAyB,OAAA,IAC1B,qBAAqB,OAAA,KAAY,IAAA,IACjC,CAAC,kBAAA,CAAmB,OAAA,EACpB;AACA,MAAA;AAAA,IACF;AAEA,IAAA,uBAAA,CAAwB,OAAA,GAAU,IAAA;AAElC,IAAA,kBAAA,CAAmB,QAAQ,cAAA,CAAe;AAAA,MACxC,QAAA,EAAU,MAAA;AAAA,MACV,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,WAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAA,GAAa,CACjB,MAAA,KACG;AACH,IAAA,MAAM,cAAA,GACJ,kBAAA,KAAuB,MAAA,GACnB,IAAA,GACA,MAAA;AAEN,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,yBAAA;AAAA,QACE;AAAA,OACF;AAAA,IACF;AAEA,IAAA,YAAA,GAAe,cAAc,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,kBAAA,EACZ,gBAAM,GAAA,CAAI,CAAC,MAAM,SAAA,KAAc;AAC9B,QAAA,MAAM,MAAA,GACJ,uBAAuB,IAAA,CAAK,EAAA;AAE9B,QAAA,MAAM,SAAA,GAAY,UAAA;AAAA,UAChB,IAAA,CAAK;AAAA,SACP;AAEA,QAAA,MAAM,OAAA,GAAU,UAAA;AAAA,UACd,IAAA,CAAK;AAAA,SACP;AAEA,QAAA,MAAM,SAAA,GACJ,CAAA,EAAG,WAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA;AAErC,QAAA,MAAM,SAAA,GACJ,CAAA,EAAG,WAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA;AAErC,QAAA,MAAM,WAAA,GAAc,UAAA;AAAA,UAClB,iBAAA;AAAA,UACA,EAAA;AAAA,UACA;AAAA,YACE,uBAAA,EACE;AAAA;AACJ,SACF;AAEA,QAAA,uBACE,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,GAAA,EACE,IAAA,CAAK,EAAA,KACL,oBAAA,CAAqB,UACjB,kBAAA,GACA,MAAA;AAAA,YAEN,SAAA,EAAW,WAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAA,IAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oBAAA;AAAA,kBACV,EAAA,EAAI,SAAA;AAAA,kBACJ,IAAA,EAAK,QAAA;AAAA,kBACL,eAAA,EAAe,MAAA;AAAA,kBACf,eAAA,EAAe,SAAA;AAAA,kBACf,OAAA,EAAS,MACP,UAAA,CAAW,IAAA,CAAK,EAAE,CAAA;AAAA,kBAGnB,QAAA,EAAA;AAAA,oBAAA,SAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EACb,eAAK,MAAA,EACR,CAAA;AAAA,oCAGF,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACd,QAAA,EAAA;AAAA,sCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EACb,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,sBAEC,2BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACb,eAAK,IAAA,EACR;AAAA,qBAAA,EAEJ;AAAA;AAAA;AAAA,eACF;AAAA,8BAEA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oBAAA;AAAA,kBACV,EAAA,EAAI,SAAA;AAAA,kBACJ,iBAAA,EAAiB,SAAA;AAAA,kBACjB,QAAQ,CAAC,MAAA;AAAA,kBAER,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA,WAAA;AAAA,UA7CK,IAAA,CAAK;AAAA,SA8CZ;AAAA,MAEJ,CAAC,CAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,iBAAA,GAAQ","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasStatus = hasContent(\n            item.status,\n          );\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                {hasStatus && (\n                  <span className=\"flip-list__status\">\n                    {item.status}\n                  </span>\n                )}\n\n                <span className=\"flip-list__main\">\n                  <span className=\"flip-list__title\">\n                    {item.title}\n                  </span>\n\n                  {hasMeta && (\n                    <span className=\"flip-list__meta\">\n                      {item.meta}\n                    </span>\n                  )}\n                </span>\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":";;;;;;AAqEA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,SAAS,mBAAA,CACP,OACA,MAAA,EACY;AACZ,EAAA,IACE,MAAA,KAAW,IAAA,IACX,MAAA,KAAW,MAAA,EACX;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,kBAAkB,KAAA,CAAM,IAAA;AAAA,IAC5B,CAAC,IAAA,KAAS,IAAA,CAAK,EAAA,KAAO;AAAA,GACxB;AAEA,EAAA,OAAO,kBACH,MAAA,GACA,IAAA;AACN;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA,GAAsB,KAAA;AAAA,EACtB,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GAAc,MAAM,KAAA,EAAM;AAEhC,EAAA,MAAM,eACJ,MAAA,KAAW,MAAA;AAEb,EAAA,MAAM,uBACJ,KAAA,CAAM,MAAA;AAAA,IACJ,mBAAA;AAAA,MACE,KAAA;AAAA,MACA,eACI,MAAA,GACA;AAAA;AACN,GACF;AAEF,EAAA,MAAM,wBAAA,GACJ,KAAA,CAAM,MAAA,CAAO,mBAAmB,CAAA;AAElC,EAAA,MAAM,qBACJ,KAAA,CAAM,MAAA;AAAA,IACJ;AAAA,GACF;AAEF,EAAA,MAAM,uBAAA,GACJ,KAAA,CAAM,MAAA,CAAO,KAAK,CAAA;AAEpB,EAAA,MAAM;AAAA,IACJ,sBAAA;AAAA,IACA;AAAA,MACE,KAAA,CAAM,QAAA;AAAA,IAAqB,MAC7B,mBAAA;AAAA,MACE,KAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,kBAAA,GACJ,mBAAA;AAAA,IACE,KAAA;AAAA,IACA,eACI,MAAA,GACA;AAAA,GACN;AAEF,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IACE,uBAAA,CAAwB,OAAA,IACxB,CAAC,wBAAA,CAAyB,OAAA,IAC1B,qBAAqB,OAAA,KAAY,IAAA,IACjC,CAAC,kBAAA,CAAmB,OAAA,EACpB;AACA,MAAA;AAAA,IACF;AAEA,IAAA,uBAAA,CAAwB,OAAA,GAAU,IAAA;AAElC,IAAA,kBAAA,CAAmB,QAAQ,cAAA,CAAe;AAAA,MACxC,QAAA,EAAU,MAAA;AAAA,MACV,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,WAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAA,GAAa,CACjB,MAAA,KACG;AACH,IAAA,MAAM,cAAA,GACJ,kBAAA,KAAuB,MAAA,GACnB,IAAA,GACA,MAAA;AAEN,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,yBAAA;AAAA,QACE;AAAA,OACF;AAAA,IACF;AAEA,IAAA,YAAA,GAAe,cAAc,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,kBAAA,EACZ,gBAAM,GAAA,CAAI,CAAC,MAAM,SAAA,KAAc;AAC9B,QAAA,MAAM,MAAA,GACJ,uBAAuB,IAAA,CAAK,EAAA;AAE9B,QAAA,MAAM,SAAA,GAAY,UAAA;AAAA,UAChB,IAAA,CAAK;AAAA,SACP;AAEA,QAAA,MAAM,OAAA,GAAU,UAAA;AAAA,UACd,IAAA,CAAK;AAAA,SACP;AAEA,QAAA,MAAM,SAAA,GACJ,CAAA,EAAG,WAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA;AAErC,QAAA,MAAM,SAAA,GACJ,CAAA,EAAG,WAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA;AAErC,QAAA,MAAM,WAAA,GAAc,UAAA;AAAA,UAClB,iBAAA;AAAA,UACA,EAAA;AAAA,UACA;AAAA,YACE,uBAAA,EACE;AAAA;AACJ,SACF;AAEA,QAAA,uBACE,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,GAAA,EACE,IAAA,CAAK,EAAA,KACL,oBAAA,CAAqB,UACjB,kBAAA,GACA,MAAA;AAAA,YAEN,SAAA,EAAW,WAAA;AAAA,YAEV,QAAA,EAAA;AAAA,cAAA,SAAA,oBACC,GAAA,CAAC,SAAI,SAAA,EAAU,mBAAA,EACb,8BAAC,GAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,QACR,CAAA,EACF,CAAA;AAAA,8BAGF,IAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oBAAA;AAAA,kBACV,EAAA,EAAI,SAAA;AAAA,kBACJ,IAAA,EAAK,QAAA;AAAA,kBACL,eAAA,EAAe,MAAA;AAAA,kBACf,eAAA,EAAe,SAAA;AAAA,kBACf,OAAA,EAAS,MACP,UAAA,CAAW,IAAA,CAAK,EAAE,CAAA;AAAA,kBAGpB,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EACb,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,oBAEC,2BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACb,eAAK,IAAA,EACR;AAAA;AAAA;AAAA,eAEJ;AAAA,8BAEA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oBAAA;AAAA,kBACV,EAAA,EAAI,SAAA;AAAA,kBACJ,iBAAA,EAAiB,SAAA;AAAA,kBACjB,QAAQ,CAAC,MAAA;AAAA,kBAER,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA,WAAA;AAAA,UA7CK,IAAA,CAAK;AAAA,SA8CZ;AAAA,MAEJ,CAAC,CAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,iBAAA,GAAQ","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\nimport Tag from '../tag';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasStatus = hasContent(\n            item.status,\n          );\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              {hasStatus && (\n                <div className=\"flip-list__status\">\n                  <Tag>\n                    {item.status}\n                  </Tag>\n                </div>\n              )}\n\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}

package/components/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var button = require('./button/button');
+var button = require('./button');
 var input = require('./input/input');
 var textarea = require('./textarea/textarea');
 var select = require('./select/select');
@@ -65,6 +65,10 @@ Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () { return button__default.default; }
 });
+Object.defineProperty(exports, "buttonLink", {
+  enumerable: true,
+  get: function () { return button.buttonLink; }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function () { return input__default.default; }

package/components/index.d.ts

@@ -1,5 +1,6 @@
-export { default as Button } from './button/button';
-export type { ButtonProps } from './button/button';
+export { default as Button } from './button';
+export { buttonLink, } from './button';
+export type { ButtonProps, } from './button';
 export { default as Input } from './input/input';
 export type { InputProps } from './input/input';
 export { default as Textarea } from './textarea/textarea';

package/components/index.js

@@ -1,4 +1,4 @@
-export { default as Button } from './button/button';
+export { default as Button, buttonLink } from './button';
 export { default as Input } from './input/input';
 export { default as Textarea } from './textarea/textarea';
 export { default as Select } from './select/select';

package/components/tag/tag.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('../helpers/classnames');
+require('./tag.css');
 
 const Tag = ({
   context = "success",
@@ -9,11 +10,15 @@ const Tag = ({
   children,
   ...props
 }) => {
-  const classes = classnames.classnames("tag", className, {
-    [`tag--context-${context}`]: Boolean(context)
-  });
+  const classes = classnames.classnames(
+    "tag",
+    className,
+    {
+      [`tag--context-${context}`]: Boolean(context)
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "span",
     {
       className: classes,
       ...props,

package/components/tag/tag.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tag/tag.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,MAA0B,CAAC;AAAA,EAC/B,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,KAAA,EAAO,SAAA,EAAW;AAAA,IAC3C,CAAC,CAAA,aAAA,EAAgB,OAAO,CAAA,CAAE,GAAG,QAAQ,OAAO;AAAA,GAC7C,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,WAAA,GAAQ","file":"tag.cjs","sourcesContent":["import React from 'react';\n//import './tag.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TagProps\n  extends React.HTMLAttributes<HTMLElement> {\n  context?: 'success' | 'error' | 'warning';\n}\n\nconst Tag: React.FC<TagProps> = ({\n  context = 'success',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('tag', className, {\n    [`tag--context-${context}`]: Boolean(context),\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Tag;\n"]}
+{"version":3,"sources":["../../../src/components/tag/tag.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAUA,MAAM,MAA0B,CAAC;AAAA,EAC/B,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,KAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,CAAC,CAAA,aAAA,EAAgB,OAAO,CAAA,CAAE,GACxB,QAAQ,OAAO;AAAA;AACnB,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,WAAA,GAAQ","file":"tag.cjs","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\nimport './tag.css';\n\nexport interface TagProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  context?: 'success' | 'error' | 'warning';\n}\n\nconst Tag: React.FC<TagProps> = ({\n  context = 'success',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'tag',\n    className,\n    {\n      [`tag--context-${context}`]:\n        Boolean(context),\n    },\n  );\n\n  return (\n    <span\n      className={classes}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"]}

package/components/tag/tag.css

@@ -10,34 +10,43 @@
   --tag-font-family: var(--font-note-family);
   --tag-font-weight: var(--font-note-weight);
   --tag-font-size: var(--font-note-size);
-  --tag-line-height: var(--font-note-line-height);
-  --tag-letter-spacing: var(--font-note-letter-spacing);
+  --tag-line-height:
+    var(--font-note-line-height);
+  --tag-letter-spacing:
+    var(--font-note-letter-spacing);
 
   font-family: var(--tag-font-family);
   font-size: var(--tag-font-size);
   font-weight: var(--tag-font-weight);
   line-height: var(--tag-line-height);
-  letter-spacing: var(--tag-letter-spacing);
+  letter-spacing:
+    var(--tag-letter-spacing);
 
   /* size */
   --tag-gap: 0;
   --tag-height: auto;
-  --tag-padding-x: var(--padding-tag-horz);
-  --tag-padding-y: var(--padding-tag-vert);
+  --tag-padding-x:
+    var(--padding-tag-horz);
+  --tag-padding-y:
+    var(--padding-tag-vert);
 
   display: inline-flex;
   align-items: center;
   gap: var(--tag-gap);
   min-height: var(--tag-height);
-  padding: var(--tag-padding-y) var(--tag-padding-x);
+  padding:
+    var(--tag-padding-y)
+    var(--tag-padding-x);
 
   /* border */
   --tag-border-width: 0;
-  --tag-border-radius: var(--radius-control);
+  --tag-border-radius:
+    var(--radius-control);
   --tag-border-color: transparent;
 
   border: none;
-  border-radius: var(--radius-control);
+  border-radius:
+    var(--tag-border-radius);
   outline: none;
 
   /* depth */
@@ -46,14 +55,23 @@
   --tag-transition-duration: 0.2s;
 
   transition:
-    border-color var(--tag-transition-duration) ease,
-    background-color var(--tag-transition-duration) ease,
-    color var(--tag-transition-duration) ease,
-    opacity var(--tag-transition-duration) ease;
+    border-color
+      var(--tag-transition-duration)
+      ease,
+    background-color
+      var(--tag-transition-duration)
+      ease,
+    color
+      var(--tag-transition-duration)
+      ease,
+    opacity
+      var(--tag-transition-duration)
+      ease;
 }
 
-.tag__content {
+.tag--context-error {
   /* color */
+  --tag-bg: var(--color-bad);
 
   /* typography */
 
@@ -66,22 +84,17 @@
   /* motion */
 }
 
-.tag:hover {
-}
+.tag--context-warning {
+  /* color */
+  --tag-bg: var(--color-med);
 
-.tag:focus {
-}
+  /* typography */
 
-.tag:focus-visible {
-}
+  /* size */
 
-.tag:active {
-}
+  /* border */
 
-.tag--context-error {
-  --tag-bg: var(--color-bad);
-}
+  /* depth */
 
-.tag--context-warning {
-  --tag-bg: var(--color-med);
-}
+  /* motion */
+}

package/components/tag/tag.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface TagProps extends React.HTMLAttributes<HTMLElement> {
+import './tag.css';
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     context?: 'success' | 'error' | 'warning';
 }
 declare const Tag: React.FC<TagProps>;

package/components/tag/tag.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { classnames } from '../helpers/classnames';
+import './tag.css';
 
 const Tag = ({
   context = "success",
@@ -7,11 +8,15 @@ const Tag = ({
   children,
   ...props
 }) => {
-  const classes = classnames("tag", className, {
-    [`tag--context-${context}`]: Boolean(context)
-  });
+  const classes = classnames(
+    "tag",
+    className,
+    {
+      [`tag--context-${context}`]: Boolean(context)
+    }
+  );
   return /* @__PURE__ */ jsx(
-    "div",
+    "span",
     {
       className: classes,
       ...props,

package/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":";;;AASA,MAAM,MAA0B,CAAC;AAAA,EAC/B,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,KAAA,EAAO,SAAA,EAAW;AAAA,IAC3C,CAAC,CAAA,aAAA,EAAgB,OAAO,CAAA,CAAE,GAAG,QAAQ,OAAO;AAAA,GAC7C,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,WAAA,GAAQ","file":"tag.js","sourcesContent":["import React from 'react';\n//import './tag.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TagProps\n  extends React.HTMLAttributes<HTMLElement> {\n  context?: 'success' | 'error' | 'warning';\n}\n\nconst Tag: React.FC<TagProps> = ({\n  context = 'success',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('tag', className, {\n    [`tag--context-${context}`]: Boolean(context),\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Tag;\n"]}
+{"version":3,"sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":";;;;AAUA,MAAM,MAA0B,CAAC;AAAA,EAC/B,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,KAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,CAAC,CAAA,aAAA,EAAgB,OAAO,CAAA,CAAE,GACxB,QAAQ,OAAO;AAAA;AACnB,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,WAAA,GAAQ","file":"tag.js","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\nimport './tag.css';\n\nexport interface TagProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  context?: 'success' | 'error' | 'warning';\n}\n\nconst Tag: React.FC<TagProps> = ({\n  context = 'success',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'tag',\n    className,\n    {\n      [`tag--context-${context}`]:\n        Boolean(context),\n    },\n  );\n\n  return (\n    <span\n      className={classes}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"]}

package/components/video/video.cjs

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Hls = require('hls.js');
 require('./video.css');
-var Icon = require('../../icons/icon');
 var Button = require('../button');
 var Dropdown = require('../dropdown');
 var classnames = require('../helpers/classnames');
@@ -13,7 +12,6 @@ var ProgressBar = require('../progressbar');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Hls__default = /*#__PURE__*/_interopDefault(Hls);
-var Icon__default = /*#__PURE__*/_interopDefault(Icon);
 var Button__default = /*#__PURE__*/_interopDefault(Button);
 var Dropdown__default = /*#__PURE__*/_interopDefault(Dropdown);
 var ProgressBar__default = /*#__PURE__*/_interopDefault(ProgressBar);
@@ -404,7 +402,7 @@ const Video = ({
             {
               mode: "toolbar",
               className: "video__main-action",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Icon__default.default, { name: "play" }),
+              icon: "play",
               "aria-label": "Play video",
               onClick: handlePlayToggle
             }
@@ -415,12 +413,7 @@ const Video = ({
             Button__default.default,
             {
               mode: "toolbar",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(
-                Icon__default.default,
-                {
-                  name: isPlaying ? "pause" : "play"
-                }
-              ),
+              icon: isPlaying ? "pause" : "play",
               "aria-label": isPlaying ? "Pause video" : "Play video",
               onClick: handlePlayToggle
             }
@@ -443,7 +436,7 @@ const Video = ({
             Button__default.default,
             {
               mode: "toolbar",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Icon__default.default, { name: "fullscreen" }),
+              icon: "fullscreen",
               "aria-label": "Fullscreen",
               onClick: handleFullscreen
             }
@@ -460,12 +453,7 @@ const Video = ({
                   Button__default.default,
                   {
                     mode: "toolbar",
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(
-                      Icon__default.default,
-                      {
-                        name: isMuted ? "sound-off" : "sound"
-                      }
-                    ),
+                    icon: isMuted ? "sound-off" : "sound",
                     "aria-label": isMuted ? "Unmute video" : "Mute video",
                     onClick: handleSoundToggle,
                     onMouseEnter: () => setIsVolumeOpen(
@@ -502,7 +490,7 @@ const Video = ({
                 Button__default.default,
                 {
                   mode: "toolbar",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icon__default.default, { name: "settings" }),
+                  icon: "settings",
                   "aria-label": "Video quality"
                 }
               )

package/components/video/video.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/video/video.tsx"],"names":["useRef","useState","useEffect","Hls","classnames","jsxs","jsx","Button","Icon","ProgressBar","Dropdown"],"mappings":"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","file":"video.cjs","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Hls from 'hls.js';\n\nimport './video.css';\nimport Icon from '../../icons/icon';\nimport Button from '../button';\nimport Dropdown, { type DropdownOption } from '../dropdown';\nimport { classnames } from '../helpers/classnames';\nimport ProgressBar from '../progressbar';\n\nexport interface VideoQuality {\n  value: string;\n  label: string;\n  src?: string;\n  disabled?: boolean;\n}\n\nexport interface VideoProgressState {\n  currentTime: number;\n  duration: number;\n  completed: boolean;\n}\n\nexport interface VideoPlaybackError {\n  type: 'media' | 'hls';\n  fatal: boolean;\n  error: unknown;\n}\n\nexport interface VideoProps\n  extends Omit<\n    React.VideoHTMLAttributes<HTMLVideoElement>,\n    'controls' | 'src' | 'poster'\n  > {\n  src?: string;\n  mediaKey?: string;\n  cover?: string;\n  qualities?: VideoQuality[];\n  defaultQuality?: string;\n  label?: string;\n  initialVolume?: number;\n  initialMuted?: boolean;\n  initialTime?: number;\n  progressCommitIntervalSec?: number;\n  onProgressCommit?: (\n    state: VideoProgressState,\n  ) => void;\n  onQualityChange?: (\n    quality: string,\n  ) => void;\n  onPlaybackError?: (\n    error: VideoPlaybackError,\n  ) => void;\n}\n\nfunction getClampedValue(\n  value: number,\n  min: number,\n  max: number,\n) {\n  return Math.min(\n    Math.max(value, min),\n    max,\n  );\n}\n\nfunction formatTime(value: number) {\n  if (!Number.isFinite(value)) {\n    return '0:00';\n  }\n\n  const minutes = Math.floor(\n    value / 60,\n  );\n\n  const seconds = Math.floor(\n    value % 60,\n  );\n\n  return `${minutes}:${String(\n    seconds,\n  ).padStart(2, '0')}`;\n}\n\nfunction getBufferedEnd(\n  video: HTMLVideoElement,\n) {\n  if (video.buffered.length === 0) {\n    return 0;\n  }\n\n  return video.buffered.end(\n    video.buffered.length - 1,\n  );\n}\n\nfunction getVideoSource(\n  src: string | undefined,\n  qualities: VideoQuality[],\n  selectedQuality: string,\n) {\n  const selectedQualityItem =\n    qualities.find(\n      (quality) =>\n        quality.value ===\n        selectedQuality,\n    );\n\n  return selectedQualityItem?.src ?? src;\n}\n\nfunction getQualityOptions(\n  qualities: VideoQuality[],\n): DropdownOption[] {\n  return qualities.map((quality) => ({\n    value: quality.value,\n    label: quality.label,\n    disabled: quality.disabled,\n  }));\n}\n\nfunction getVideoProgressState(\n  video: HTMLVideoElement,\n): VideoProgressState {\n  const duration = video.duration || 0;\n\n  const currentTime =\n    video.currentTime || 0;\n\n  return {\n    currentTime,\n    duration,\n\n    completed:\n      video.ended ||\n      (duration > 0 &&\n        currentTime >=\n          duration * 0.9),\n  };\n}\n\nconst defaultQualities: VideoQuality[] = [];\n\nconst Video: React.FC<VideoProps> = ({\n  src,\n  mediaKey,\n  cover,\n  qualities = defaultQualities,\n  defaultQuality = '',\n  label = 'Video player',\n  initialVolume = 1,\n  initialMuted = false,\n  initialTime = 0,\n  progressCommitIntervalSec = 15,\n  className = '',\n  autoPlay,\n  loop,\n  muted,\n  playsInline = true,\n  preload = 'metadata',\n  onQualityChange,\n  onPlaybackError,\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onLoadedMetadata,\n  onTimeUpdate,\n  onProgress,\n  onVolumeChange,\n  onProgressCommit,\n  children,\n  ...props\n}) => {\n  const videoRef =\n    useRef<HTMLVideoElement>(null);\n\n  const [isPlaying, setIsPlaying] =\n    useState(false);\n\n  const [\n    isVolumeOpen,\n    setIsVolumeOpen,\n  ] = useState(false);\n\n  const [\n    selectedQuality,\n    setSelectedQuality,\n  ] = useState(defaultQuality);\n\n  const [\n    currentTime,\n    setCurrentTime,\n  ] = useState(0);\n\n  const [duration, setDuration] =\n    useState(0);\n\n  const [buffered, setBuffered] =\n    useState(0);\n\n  const [volume, setVolume] =\n    useState(initialVolume);\n\n  const [isMuted, setIsMuted] =\n    useState(\n      muted ?? initialMuted,\n    );\n\n  const hasAppliedInitialTimeRef =\n    useRef(false);\n\n  const lastProgressCommitAtRef =\n    useRef(0);\n\n  const loadedMediaKeyRef =\n    useRef<\n      string | undefined\n    >(undefined);\n\n  const pendingRestoreTimeRef =\n    useRef<number | null>(null);\n\n  const onPlaybackErrorRef =\n    useRef(onPlaybackError);\n\n  const videoSrc = getVideoSource(\n    src,\n    qualities,\n    selectedQuality,\n  );\n\n  const effectiveMediaKey =\n    mediaKey ?? videoSrc;\n\n  const qualityOptions =\n    getQualityOptions(qualities);\n\n  const hasQualityOptions =\n    qualityOptions.length > 0;\n\n  useEffect(() => {\n    onPlaybackErrorRef.current =\n      onPlaybackError;\n  }, [onPlaybackError]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (!video || !videoSrc) {\n      return;\n    }\n\n    const isSameMedia =\n      loadedMediaKeyRef.current !==\n        undefined &&\n      loadedMediaKeyRef.current ===\n        effectiveMediaKey;\n\n    if (isSameMedia) {\n      pendingRestoreTimeRef.current =\n        video.currentTime;\n    } else {\n      pendingRestoreTimeRef.current =\n        null;\n\n      hasAppliedInitialTimeRef.current =\n        false;\n\n      lastProgressCommitAtRef.current =\n        0;\n\n      setCurrentTime(0);\n      setDuration(0);\n      setBuffered(0);\n      setIsPlaying(false);\n    }\n\n    loadedMediaKeyRef.current =\n      effectiveMediaKey;\n\n    video.removeAttribute('src');\n    video.load();\n\n    if (\n      video.canPlayType(\n        'application/vnd.apple.mpegurl',\n      )\n    ) {\n      video.src = videoSrc;\n      return;\n    }\n\n    if (!Hls.isSupported()) {\n      video.src = videoSrc;\n      return;\n    }\n\n    const hls = new Hls();\n\n    hls.on(\n      Hls.Events.ERROR,\n      (_, data) => {\n        console.error(\n          'HLS error',\n          data,\n        );\n\n        onPlaybackErrorRef.current?.({\n          type: 'hls',\n          fatal: data.fatal,\n          error: data,\n        });\n      },\n    );\n\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n\n    return () => {\n      hls.destroy();\n    };\n  }, [videoSrc, effectiveMediaKey]);\n\n  const hasStarted =\n    currentTime > 0 || isPlaying;\n\n  const hasControls = hasStarted;\n\n  const hasVolume = isVolumeOpen;\n\n  const classes = classnames(\n    'video',\n    className,\n    {\n      'video--with-controls':\n        hasControls,\n      'video--with-volume':\n        hasVolume,\n    },\n  );\n\n  const syncMediaState = () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    setCurrentTime(video.currentTime);\n\n    setDuration(\n      video.duration || 0,\n    );\n\n    setBuffered(\n      getBufferedEnd(video),\n    );\n\n    setVolume(video.volume);\n\n    setIsMuted(video.muted);\n\n    setIsPlaying(!video.paused);\n  };\n\n  const commitProgress = (\n    video: HTMLVideoElement,\n  ) => {\n    if (!onProgressCommit) {\n      return;\n    }\n\n    onProgressCommit(\n      getVideoProgressState(video),\n    );\n  };\n\n  const handlePlayToggle = async () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    console.log('play click', {\n      paused: video.paused,\n      readyState: video.readyState,\n      src: video.currentSrc,\n      networkState:\n        video.networkState,\n      error: video.error,\n    });\n\n    if (video.paused) {\n      try {\n        await video.play();\n\n        console.log(\n          'play success',\n        );\n      } catch (error) {\n        console.error(\n          'play failed',\n          error,\n        );\n      }\n\n      return;\n    }\n\n    video.pause();\n  };\n\n  const handleSeek = (\n    nextValue: number,\n  ) => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    video.currentTime =\n      getClampedValue(\n        nextValue,\n        0,\n        duration,\n      );\n\n    setCurrentTime(\n      video.currentTime,\n    );\n  };\n\n  const handleVolumeChange = (\n    nextValue: number,\n  ) => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    const nextVolume =\n      getClampedValue(\n        nextValue,\n        0,\n        1,\n      );\n\n    video.volume = nextVolume;\n\n    video.muted =\n      nextVolume === 0;\n\n    setVolume(nextVolume);\n\n    setIsMuted(video.muted);\n  };\n\n  const handleSoundToggle = () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    video.muted = !video.muted;\n\n    setIsMuted(video.muted);\n  };\n\n  const handleFullscreen = () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    video.requestFullscreen?.();\n  };\n\n  const handleQualityChange = (\n    quality: string,\n  ) => {\n    setSelectedQuality(quality);\n\n    onQualityChange?.(quality);\n  };\n\n  const handleLoadedMetadata = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video =\n      event.currentTarget;\n\n    if (\n      pendingRestoreTimeRef.current !==\n      null\n    ) {\n      video.currentTime = Math.min(\n        pendingRestoreTimeRef.current,\n        video.duration ||\n          pendingRestoreTimeRef.current,\n      );\n\n      pendingRestoreTimeRef.current =\n        null;\n    } else if (\n      !hasAppliedInitialTimeRef.current &&\n      initialTime > 0\n    ) {\n      video.currentTime = Math.min(\n        initialTime,\n        video.duration ||\n          initialTime,\n      );\n\n      hasAppliedInitialTimeRef.current =\n        true;\n    }\n\n    syncMediaState();\n\n    onLoadedMetadata?.(event);\n  };\n\n  const handleTimeUpdate = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video =\n      event.currentTarget;\n\n    syncMediaState();\n\n    if (\n      onProgressCommit &&\n      video.currentTime -\n        lastProgressCommitAtRef.current >=\n        progressCommitIntervalSec\n    ) {\n      lastProgressCommitAtRef.current =\n        video.currentTime;\n\n      commitProgress(video);\n    }\n\n    onTimeUpdate?.(event);\n  };\n\n  const handleProgress = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    onProgress?.(event);\n  };\n\n  const handlePlay = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(true);\n\n    onPlay?.(event);\n  };\n\n  const handlePause = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(false);\n\n    commitProgress(\n      event.currentTarget,\n    );\n\n    onPause?.(event);\n  };\n\n  const handleEnded = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    commitProgress(\n      event.currentTarget,\n    );\n\n    onEnded?.(event);\n  };\n\n  const handleNativeError = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    onPlaybackError?.({\n      type: 'media',\n      fatal: true,\n      error:\n        event.currentTarget.error ??\n        event,\n    });\n\n    onError?.(event);\n  };\n\n  const handleNativeVolumeChange = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    onVolumeChange?.(event);\n  };\n\n  return (\n    <div\n      className={classes}\n      aria-label={label}\n    >\n      <div className=\"video__surface\">\n        {cover && !hasStarted ? (\n          <img\n            className=\"video__cover\"\n            src={cover}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n\n        <video\n          {...props}\n          ref={videoRef}\n          className=\"video__media\"\n          poster={cover}\n          autoPlay={autoPlay}\n          loop={loop}\n          muted={isMuted}\n          playsInline={\n            playsInline\n          }\n          preload={preload}\n          controls={false}\n          onLoadedMetadata={\n            handleLoadedMetadata\n          }\n          onTimeUpdate={\n            handleTimeUpdate\n          }\n          onProgress={\n            handleProgress\n          }\n          onPlay={handlePlay}\n          onPause={handlePause}\n          onEnded={handleEnded}\n          onError={\n            handleNativeError\n          }\n          onVolumeChange={\n            handleNativeVolumeChange\n          }\n        >\n          {children}\n        </video>\n\n        {!hasStarted && (\n          <Button\n            mode=\"toolbar\"\n            className=\"video__main-action\"\n            icon={\n              <Icon name=\"play\" />\n            }\n            aria-label=\"Play video\"\n            onClick={\n              handlePlayToggle\n            }\n          />\n        )}\n      </div>\n\n      {hasControls && (\n        <div className=\"video__controls\">\n          <Button\n            mode=\"toolbar\"\n            icon={\n              <Icon\n                name={\n                  isPlaying\n                    ? 'pause'\n                    : 'play'\n                }\n              />\n            }\n            aria-label={\n              isPlaying\n                ? 'Pause video'\n                : 'Play video'\n            }\n            onClick={\n              handlePlayToggle\n            }\n          />\n\n          <div className=\"video__time\">\n            {formatTime(currentTime)}\n          </div>\n\n          <ProgressBar\n            className=\"video__progress\"\n            mode=\"player\"\n            value={currentTime}\n            buffered={buffered}\n            max={duration || 1}\n            step={1}\n            label=\"Video progress\"\n            onValueChange={\n              handleSeek\n            }\n          />\n\n          <Button\n            mode=\"toolbar\"\n            icon={\n              <Icon name=\"fullscreen\" />\n            }\n            aria-label=\"Fullscreen\"\n            onClick={\n              handleFullscreen\n            }\n          />\n\n          <div\n            className=\"video__sound-control\"\n            onMouseLeave={() =>\n              setIsVolumeOpen(\n                false,\n              )\n            }\n          >\n            <Button\n              mode=\"toolbar\"\n              icon={\n                <Icon\n                  name={\n                    isMuted\n                      ? 'sound-off'\n                      : 'sound'\n                  }\n                />\n              }\n              aria-label={\n                isMuted\n                  ? 'Unmute video'\n                  : 'Mute video'\n              }\n              onClick={\n                handleSoundToggle\n              }\n              onMouseEnter={() =>\n                setIsVolumeOpen(\n                  true,\n                )\n              }\n              onFocus={() =>\n                setIsVolumeOpen(\n                  true,\n                )\n              }\n            />\n\n            {hasVolume && (\n              <div className=\"video__volume\">\n                <ProgressBar\n                  mode=\"level\"\n                  value={\n                    isMuted\n                      ? 0\n                      : volume\n                  }\n                  max={1}\n                  step={0.05}\n                  label=\"Volume\"\n                  onValueChange={\n                    handleVolumeChange\n                  }\n                />\n              </div>\n            )}\n          </div>\n\n          {hasQualityOptions && (\n            <Dropdown\n              align=\"top-end\"\n              value={\n                selectedQuality\n              }\n              options={\n                qualityOptions\n              }\n              label=\"Video quality\"\n              onChange={\n                handleQualityChange\n              }\n              trigger={\n                <Button\n                  mode=\"toolbar\"\n                  icon={\n                    <Icon name=\"settings\" />\n                  }\n                  aria-label=\"Video quality\"\n                />\n              }\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Video;\n"]}
+{"version":3,"sources":["../../../src/components/video/video.tsx"],"names":["useRef","useState","useEffect","Hls","classnames","jsxs","jsx","Button","ProgressBar","Dropdown"],"mappings":"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","file":"video.cjs","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Hls from 'hls.js';\n\nimport './video.css';\nimport Button from '../button';\nimport Dropdown, { type DropdownOption } from '../dropdown';\nimport { classnames } from '../helpers/classnames';\nimport ProgressBar from '../progressbar';\n\nexport interface VideoQuality {\n  value: string;\n  label: string;\n  src?: string;\n  disabled?: boolean;\n}\n\nexport interface VideoProgressState {\n  currentTime: number;\n  duration: number;\n  completed: boolean;\n}\n\nexport interface VideoPlaybackError {\n  type: 'media' | 'hls';\n  fatal: boolean;\n  error: unknown;\n}\n\nexport interface VideoProps\n  extends Omit<\n    React.VideoHTMLAttributes<HTMLVideoElement>,\n    'controls' | 'src' | 'poster'\n  > {\n  src?: string;\n  mediaKey?: string;\n  cover?: string;\n  qualities?: VideoQuality[];\n  defaultQuality?: string;\n  label?: string;\n  initialVolume?: number;\n  initialMuted?: boolean;\n  initialTime?: number;\n  progressCommitIntervalSec?: number;\n  onProgressCommit?: (\n    state: VideoProgressState,\n  ) => void;\n  onQualityChange?: (\n    quality: string,\n  ) => void;\n  onPlaybackError?: (\n    error: VideoPlaybackError,\n  ) => void;\n}\n\nfunction getClampedValue(\n  value: number,\n  min: number,\n  max: number,\n) {\n  return Math.min(\n    Math.max(value, min),\n    max,\n  );\n}\n\nfunction formatTime(value: number) {\n  if (!Number.isFinite(value)) {\n    return '0:00';\n  }\n\n  const minutes = Math.floor(\n    value / 60,\n  );\n\n  const seconds = Math.floor(\n    value % 60,\n  );\n\n  return `${minutes}:${String(\n    seconds,\n  ).padStart(2, '0')}`;\n}\n\nfunction getBufferedEnd(\n  video: HTMLVideoElement,\n) {\n  if (video.buffered.length === 0) {\n    return 0;\n  }\n\n  return video.buffered.end(\n    video.buffered.length - 1,\n  );\n}\n\nfunction getVideoSource(\n  src: string | undefined,\n  qualities: VideoQuality[],\n  selectedQuality: string,\n) {\n  const selectedQualityItem =\n    qualities.find(\n      (quality) =>\n        quality.value ===\n        selectedQuality,\n    );\n\n  return selectedQualityItem?.src ?? src;\n}\n\nfunction getQualityOptions(\n  qualities: VideoQuality[],\n): DropdownOption[] {\n  return qualities.map((quality) => ({\n    value: quality.value,\n    label: quality.label,\n    disabled: quality.disabled,\n  }));\n}\n\nfunction getVideoProgressState(\n  video: HTMLVideoElement,\n): VideoProgressState {\n  const duration = video.duration || 0;\n\n  const currentTime =\n    video.currentTime || 0;\n\n  return {\n    currentTime,\n    duration,\n\n    completed:\n      video.ended ||\n      (duration > 0 &&\n        currentTime >=\n          duration * 0.9),\n  };\n}\n\nconst defaultQualities: VideoQuality[] = [];\n\nconst Video: React.FC<VideoProps> = ({\n  src,\n  mediaKey,\n  cover,\n  qualities = defaultQualities,\n  defaultQuality = '',\n  label = 'Video player',\n  initialVolume = 1,\n  initialMuted = false,\n  initialTime = 0,\n  progressCommitIntervalSec = 15,\n  className = '',\n  autoPlay,\n  loop,\n  muted,\n  playsInline = true,\n  preload = 'metadata',\n  onQualityChange,\n  onPlaybackError,\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onLoadedMetadata,\n  onTimeUpdate,\n  onProgress,\n  onVolumeChange,\n  onProgressCommit,\n  children,\n  ...props\n}) => {\n  const videoRef =\n    useRef<HTMLVideoElement>(null);\n\n  const [isPlaying, setIsPlaying] =\n    useState(false);\n\n  const [\n    isVolumeOpen,\n    setIsVolumeOpen,\n  ] = useState(false);\n\n  const [\n    selectedQuality,\n    setSelectedQuality,\n  ] = useState(defaultQuality);\n\n  const [\n    currentTime,\n    setCurrentTime,\n  ] = useState(0);\n\n  const [duration, setDuration] =\n    useState(0);\n\n  const [buffered, setBuffered] =\n    useState(0);\n\n  const [volume, setVolume] =\n    useState(initialVolume);\n\n  const [isMuted, setIsMuted] =\n    useState(\n      muted ?? initialMuted,\n    );\n\n  const hasAppliedInitialTimeRef =\n    useRef(false);\n\n  const lastProgressCommitAtRef =\n    useRef(0);\n\n  const loadedMediaKeyRef =\n    useRef<\n      string | undefined\n    >(undefined);\n\n  const pendingRestoreTimeRef =\n    useRef<number | null>(null);\n\n  const onPlaybackErrorRef =\n    useRef(onPlaybackError);\n\n  const videoSrc = getVideoSource(\n    src,\n    qualities,\n    selectedQuality,\n  );\n\n  const effectiveMediaKey =\n    mediaKey ?? videoSrc;\n\n  const qualityOptions =\n    getQualityOptions(qualities);\n\n  const hasQualityOptions =\n    qualityOptions.length > 0;\n\n  useEffect(() => {\n    onPlaybackErrorRef.current =\n      onPlaybackError;\n  }, [onPlaybackError]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (!video || !videoSrc) {\n      return;\n    }\n\n    const isSameMedia =\n      loadedMediaKeyRef.current !==\n        undefined &&\n      loadedMediaKeyRef.current ===\n        effectiveMediaKey;\n\n    if (isSameMedia) {\n      pendingRestoreTimeRef.current =\n        video.currentTime;\n    } else {\n      pendingRestoreTimeRef.current =\n        null;\n\n      hasAppliedInitialTimeRef.current =\n        false;\n\n      lastProgressCommitAtRef.current =\n        0;\n\n      setCurrentTime(0);\n      setDuration(0);\n      setBuffered(0);\n      setIsPlaying(false);\n    }\n\n    loadedMediaKeyRef.current =\n      effectiveMediaKey;\n\n    video.removeAttribute('src');\n    video.load();\n\n    if (\n      video.canPlayType(\n        'application/vnd.apple.mpegurl',\n      )\n    ) {\n      video.src = videoSrc;\n      return;\n    }\n\n    if (!Hls.isSupported()) {\n      video.src = videoSrc;\n      return;\n    }\n\n    const hls = new Hls();\n\n    hls.on(\n      Hls.Events.ERROR,\n      (_, data) => {\n        console.error(\n          'HLS error',\n          data,\n        );\n\n        onPlaybackErrorRef.current?.({\n          type: 'hls',\n          fatal: data.fatal,\n          error: data,\n        });\n      },\n    );\n\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n\n    return () => {\n      hls.destroy();\n    };\n  }, [videoSrc, effectiveMediaKey]);\n\n  const hasStarted =\n    currentTime > 0 || isPlaying;\n\n  const hasControls = hasStarted;\n\n  const hasVolume = isVolumeOpen;\n\n  const classes = classnames(\n    'video',\n    className,\n    {\n      'video--with-controls':\n        hasControls,\n      'video--with-volume':\n        hasVolume,\n    },\n  );\n\n  const syncMediaState = () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    setCurrentTime(video.currentTime);\n\n    setDuration(\n      video.duration || 0,\n    );\n\n    setBuffered(\n      getBufferedEnd(video),\n    );\n\n    setVolume(video.volume);\n\n    setIsMuted(video.muted);\n\n    setIsPlaying(!video.paused);\n  };\n\n  const commitProgress = (\n    video: HTMLVideoElement,\n  ) => {\n    if (!onProgressCommit) {\n      return;\n    }\n\n    onProgressCommit(\n      getVideoProgressState(video),\n    );\n  };\n\n  const handlePlayToggle = async () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    console.log('play click', {\n      paused: video.paused,\n      readyState: video.readyState,\n      src: video.currentSrc,\n      networkState:\n        video.networkState,\n      error: video.error,\n    });\n\n    if (video.paused) {\n      try {\n        await video.play();\n\n        console.log(\n          'play success',\n        );\n      } catch (error) {\n        console.error(\n          'play failed',\n          error,\n        );\n      }\n\n      return;\n    }\n\n    video.pause();\n  };\n\n  const handleSeek = (\n    nextValue: number,\n  ) => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    video.currentTime =\n      getClampedValue(\n        nextValue,\n        0,\n        duration,\n      );\n\n    setCurrentTime(\n      video.currentTime,\n    );\n  };\n\n  const handleVolumeChange = (\n    nextValue: number,\n  ) => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    const nextVolume =\n      getClampedValue(\n        nextValue,\n        0,\n        1,\n      );\n\n    video.volume = nextVolume;\n\n    video.muted =\n      nextVolume === 0;\n\n    setVolume(nextVolume);\n\n    setIsMuted(video.muted);\n  };\n\n  const handleSoundToggle = () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    video.muted = !video.muted;\n\n    setIsMuted(video.muted);\n  };\n\n  const handleFullscreen = () => {\n    const video = videoRef.current;\n\n    if (!video) {\n      return;\n    }\n\n    video.requestFullscreen?.();\n  };\n\n  const handleQualityChange = (\n    quality: string,\n  ) => {\n    setSelectedQuality(quality);\n\n    onQualityChange?.(quality);\n  };\n\n  const handleLoadedMetadata = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video =\n      event.currentTarget;\n\n    if (\n      pendingRestoreTimeRef.current !==\n      null\n    ) {\n      video.currentTime = Math.min(\n        pendingRestoreTimeRef.current,\n        video.duration ||\n          pendingRestoreTimeRef.current,\n      );\n\n      pendingRestoreTimeRef.current =\n        null;\n    } else if (\n      !hasAppliedInitialTimeRef.current &&\n      initialTime > 0\n    ) {\n      video.currentTime = Math.min(\n        initialTime,\n        video.duration ||\n          initialTime,\n      );\n\n      hasAppliedInitialTimeRef.current =\n        true;\n    }\n\n    syncMediaState();\n\n    onLoadedMetadata?.(event);\n  };\n\n  const handleTimeUpdate = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video =\n      event.currentTarget;\n\n    syncMediaState();\n\n    if (\n      onProgressCommit &&\n      video.currentTime -\n        lastProgressCommitAtRef.current >=\n        progressCommitIntervalSec\n    ) {\n      lastProgressCommitAtRef.current =\n        video.currentTime;\n\n      commitProgress(video);\n    }\n\n    onTimeUpdate?.(event);\n  };\n\n  const handleProgress = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    onProgress?.(event);\n  };\n\n  const handlePlay = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(true);\n\n    onPlay?.(event);\n  };\n\n  const handlePause = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(false);\n\n    commitProgress(\n      event.currentTarget,\n    );\n\n    onPause?.(event);\n  };\n\n  const handleEnded = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    commitProgress(\n      event.currentTarget,\n    );\n\n    onEnded?.(event);\n  };\n\n  const handleNativeError = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    onPlaybackError?.({\n      type: 'media',\n      fatal: true,\n      error:\n        event.currentTarget.error ??\n        event,\n    });\n\n    onError?.(event);\n  };\n\n  const handleNativeVolumeChange = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    onVolumeChange?.(event);\n  };\n\n  return (\n    <div\n      className={classes}\n      aria-label={label}\n    >\n      <div className=\"video__surface\">\n        {cover && !hasStarted ? (\n          <img\n            className=\"video__cover\"\n            src={cover}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n\n        <video\n          {...props}\n          ref={videoRef}\n          className=\"video__media\"\n          poster={cover}\n          autoPlay={autoPlay}\n          loop={loop}\n          muted={isMuted}\n          playsInline={\n            playsInline\n          }\n          preload={preload}\n          controls={false}\n          onLoadedMetadata={\n            handleLoadedMetadata\n          }\n          onTimeUpdate={\n            handleTimeUpdate\n          }\n          onProgress={\n            handleProgress\n          }\n          onPlay={handlePlay}\n          onPause={handlePause}\n          onEnded={handleEnded}\n          onError={\n            handleNativeError\n          }\n          onVolumeChange={\n            handleNativeVolumeChange\n          }\n        >\n          {children}\n        </video>\n\n        {!hasStarted && (\n          <Button\n            mode=\"toolbar\"\n            className=\"video__main-action\"\n            icon=\"play\"\n            aria-label=\"Play video\"\n            onClick={\n              handlePlayToggle\n            }\n          />\n        )}\n      </div>\n\n      {hasControls && (\n        <div className=\"video__controls\">\n          <Button\n            mode=\"toolbar\"\n            icon={\n              isPlaying\n                ? 'pause'\n                : 'play'\n            }\n            aria-label={\n              isPlaying\n                ? 'Pause video'\n                : 'Play video'\n            }\n            onClick={\n              handlePlayToggle\n            }\n          />\n\n          <div className=\"video__time\">\n            {formatTime(currentTime)}\n          </div>\n\n          <ProgressBar\n            className=\"video__progress\"\n            mode=\"player\"\n            value={currentTime}\n            buffered={buffered}\n            max={duration || 1}\n            step={1}\n            label=\"Video progress\"\n            onValueChange={\n              handleSeek\n            }\n          />\n\n          <Button\n            mode=\"toolbar\"\n            icon=\"fullscreen\"\n            aria-label=\"Fullscreen\"\n            onClick={\n              handleFullscreen\n            }\n          />\n\n          <div\n            className=\"video__sound-control\"\n            onMouseLeave={() =>\n              setIsVolumeOpen(\n                false,\n              )\n            }\n          >\n            <Button\n              mode=\"toolbar\"\n              icon={\n                isMuted\n                  ? 'sound-off'\n                  : 'sound'\n              }\n              aria-label={\n                isMuted\n                  ? 'Unmute video'\n                  : 'Mute video'\n              }\n              onClick={\n                handleSoundToggle\n              }\n              onMouseEnter={() =>\n                setIsVolumeOpen(\n                  true,\n                )\n              }\n              onFocus={() =>\n                setIsVolumeOpen(\n                  true,\n                )\n              }\n            />\n\n            {hasVolume && (\n              <div className=\"video__volume\">\n                <ProgressBar\n                  mode=\"level\"\n                  value={\n                    isMuted\n                      ? 0\n                      : volume\n                  }\n                  max={1}\n                  step={0.05}\n                  label=\"Volume\"\n                  onValueChange={\n                    handleVolumeChange\n                  }\n                />\n              </div>\n            )}\n          </div>\n\n          {hasQualityOptions && (\n            <Dropdown\n              align=\"top-end\"\n              value={\n                selectedQuality\n              }\n              options={\n                qualityOptions\n              }\n              label=\"Video quality\"\n              onChange={\n                handleQualityChange\n              }\n              trigger={\n                <Button\n                  mode=\"toolbar\"\n                  icon=\"settings\"\n                  aria-label=\"Video quality\"\n                />\n              }\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Video;\n"]}

package/components/video/video.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import Hls from 'hls.js';
 import './video.css';
-import Icon from '../../icons/icon';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import { classnames } from '../helpers/classnames';
@@ -394,7 +393,7 @@ const Video = ({
             {
               mode: "toolbar",
               className: "video__main-action",
-              icon: /* @__PURE__ */ jsx(Icon, { name: "play" }),
+              icon: "play",
               "aria-label": "Play video",
               onClick: handlePlayToggle
             }
@@ -405,12 +404,7 @@ const Video = ({
             Button,
             {
               mode: "toolbar",
-              icon: /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: isPlaying ? "pause" : "play"
-                }
-              ),
+              icon: isPlaying ? "pause" : "play",
               "aria-label": isPlaying ? "Pause video" : "Play video",
               onClick: handlePlayToggle
             }
@@ -433,7 +427,7 @@ const Video = ({
             Button,
             {
               mode: "toolbar",
-              icon: /* @__PURE__ */ jsx(Icon, { name: "fullscreen" }),
+              icon: "fullscreen",
               "aria-label": "Fullscreen",
               onClick: handleFullscreen
             }
@@ -450,12 +444,7 @@ const Video = ({
                   Button,
                   {
                     mode: "toolbar",
-                    icon: /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        name: isMuted ? "sound-off" : "sound"
-                      }
-                    ),
+                    icon: isMuted ? "sound-off" : "sound",
                     "aria-label": isMuted ? "Unmute video" : "Mute video",
                     onClick: handleSoundToggle,
                     onMouseEnter: () => setIsVolumeOpen(
@@ -492,7 +481,7 @@ const Video = ({
                 Button,
                 {
                   mode: "toolbar",
-                  icon: /* @__PURE__ */ jsx(Icon, { name: "settings" }),
+                  icon: "settings",
                   "aria-label": "Video quality"
                 }
               )