@vector-im/compound-web 8.2.0 → 8.2.1

package/dist/components/Tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../../../src/components/Tooltip/useTooltip.ts"],"sourcesContent":["/*\n * Copyright 2024 New Vector Ltd.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  OpenChangeReason,\n  Placement,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport {\n  useMemo,\n  useRef,\n  useState,\n  JSX,\n  AriaAttributes,\n  useEffect,\n} from \"react\";\nimport { hoverDelay } from \"./TooltipProvider\";\n\nexport interface CommonUseTooltipProps {\n  /**\n   * The controlled open state of the tooltip.\n   * If provided, the tooltip will be in controlled mode.\n   * When true, the tooltip is always open. When false, the tooltip is always hidden.\n   * When undefined, the tooltip will manage its own open state.\n   * You will mostly want to omit this property. Will be used the vast majority\n   * of the time during development.\n   * @default undefined\n   */\n  open?: boolean;\n  /**\n   * Whether the tooltip should be forced to be in a closed state.\n   */\n  // TODO: Deprecate this? It seems redundant to open: false.\n  disabled?: boolean;\n  /**\n   * The caption of the tooltip.\n   * JSX.Element can be used to provide accessibility content like kbd element.\n   * Keep in mind, the caption should not be used for interactive content.\n   */\n  caption?: string | JSX.Element;\n  /**\n   * The event handler for the open change.\n   */\n  onOpenChange?: (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => void;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: Placement;\n  /**\n   * Whether the trigger element is interactive.\n   * When trigger is interactive:\n   *      - tooltip will be shown after a 300ms delay.\n   * When trigger is not interactive:\n   *      - tooltip will be shown instantly when pointer enters trigger.\n   *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n   */\n  isTriggerInteractive: boolean;\n\n  /**\n   * Additional aria-* attributes to pass through to the floating tooltip for\n   * edge cases which require more user awareness like errors & alerts.\n   */\n  \"aria-atomic\"?: AriaAttributes[\"aria-atomic\"];\n  \"aria-live\"?: AriaAttributes[\"aria-live\"];\n}\n\nexport interface TooltipLabel {\n  /**\n   * A label for the target element.\n   */\n  label: string;\n}\n\nexport interface TooltipDescription {\n  /**\n   * A description for the target element.\n   */\n  description: string;\n}\n\ntype UseTooltipProps = CommonUseTooltipProps &\n  (TooltipLabel | TooltipDescription);\n\nexport function useTooltip({\n  open: controlledOpen,\n  disabled = false,\n  onOpenChange,\n  placement = \"bottom\",\n  isTriggerInteractive,\n  caption,\n  \"aria-atomic\": ariaAtomic,\n  \"aria-live\": ariaLive,\n  ...props\n}: UseTooltipProps) {\n  const labelId = useId();\n  const captionId = useId();\n  const arrowRef = useRef(null);\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  // Use controlledOpen if it is provided, otherwise use uncontrolledOpen\n  const open = disabled ? false : (controlledOpen ?? uncontrolledOpen);\n  const setOpen = (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => {\n    onOpenChange?.(open, event, reason);\n    // we are in uncontrolled mode\n    if (controlledOpen === undefined) setUncontrolledOpen(open);\n  };\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 6px\n      offset(6),\n      flip({\n        crossAxis: placement.includes(\"-\"),\n        fallbackAxisSideDirection: \"start\",\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n      // add the little arrow along with the floating content\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n  });\n\n  const context = data.context;\n  const { delay, initialDelay } = useDelayGroup(context);\n  // We can tell if no delay group has been provided, because the delay will\n  // default to zero\n  if (initialDelay !== hoverDelay)\n    throw new Error(\"Tooltips must be wrapped in a global <TooltipProvider>\");\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen === undefined,\n    // Show tooltip after a delay when trigger is interactive\n    delay: isTriggerInteractive ? delay : {},\n    mouseOnly: true,\n  });\n\n  const focus = useFocus(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  // On touch screens, show the tooltip on a long press\n  const pressTimer = useRef<number | undefined>(undefined);\n  useEffect(() => () => window.clearTimeout(pressTimer.current), []);\n  const press = useMemo(() => {\n    const onTouchEnd = () => {\n      if (pressTimer.current === undefined)\n        pressTimer.current = window.setTimeout(() => {\n          setOpen(false);\n          pressTimer.current = undefined;\n        }, 1500);\n      else window.clearTimeout(pressTimer.current);\n    };\n    return {\n      // Set these props on the anchor element\n      reference: {\n        onTouchStart: () => {\n          if (pressTimer.current !== undefined)\n            window.clearTimeout(pressTimer.current);\n          pressTimer.current = window.setTimeout(() => {\n            setOpen(true);\n            pressTimer.current = undefined;\n          }, 500);\n        },\n        onTouchEnd,\n        onTouchCancel: onTouchEnd,\n      },\n    };\n  }, []);\n\n  const dismiss = useDismiss(context);\n\n  const purpose = \"label\" in props ? \"label\" : \"description\";\n  // A descriptive tooltip should set role=\"tooltip\" and aria-describedby\n  const role = useRole(context, {\n    enabled: purpose === \"description\",\n    role: \"tooltip\",\n  });\n\n  // A label tooltip should set aria-labelledby with no role regardless of\n  // whether the tooltip is visible.\n  // (Source: https://zoebijl.github.io/apg-tooltip/#tooltip-main-label)\n  // useRole doesn't support this use case correctly, so we do it manually.\n  const label = useMemo(\n    () =>\n      purpose === \"label\"\n        ? {\n            // Set these props on the anchor element\n            reference: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": caption ? captionId : undefined,\n            },\n          }\n        : {},\n    [purpose, labelId, captionId],\n  );\n\n  const interactions = useInteractions([\n    hover,\n    focus,\n    press,\n    dismiss,\n    role,\n    label,\n  ]);\n\n  return useMemo(\n    () => ({\n      labelId,\n      captionId: caption ? captionId : undefined,\n      caption,\n      purpose: purpose as \"label\" | \"description\",\n      open,\n      setOpen,\n      tooltipProps: {\n        \"aria-atomic\": ariaAtomic,\n        \"aria-live\": ariaLive,\n      },\n      ...interactions,\n      ...data,\n      arrowRef,\n    }),\n    [\n      labelId,\n      captionId,\n      caption,\n      role,\n      open,\n      setOpen,\n      interactions,\n      data,\n      arrowRef,\n    ],\n  );\n}\n"],"names":["open"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","sources":["../../../src/components/Tooltip/useTooltip.ts"],"sourcesContent":["/*\n * Copyright 2024 New Vector Ltd.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  type OpenChangeReason,\n  type Placement,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport {\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type AriaAttributes,\n  useEffect,\n} from \"react\";\nimport { hoverDelay } from \"./TooltipProvider\";\n\nexport interface CommonUseTooltipProps {\n  /**\n   * The controlled open state of the tooltip.\n   * If provided, the tooltip will be in controlled mode.\n   * When true, the tooltip is always open. When false, the tooltip is always hidden.\n   * When undefined, the tooltip will manage its own open state.\n   * You will mostly want to omit this property. Will be used the vast majority\n   * of the time during development.\n   * @default undefined\n   */\n  open?: boolean;\n  /**\n   * Whether the tooltip should be forced to be in a closed state.\n   */\n  // TODO: Deprecate this? It seems redundant to open: false.\n  disabled?: boolean;\n  /**\n   * The caption of the tooltip.\n   * JSX.Element can be used to provide accessibility content like kbd element.\n   * Keep in mind, the caption should not be used for interactive content.\n   */\n  caption?: string | JSX.Element;\n  /**\n   * The event handler for the open change.\n   */\n  onOpenChange?: (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => void;\n  /**\n   * The placement of the tooltip.\n   * @default \"bottom\"\n   */\n  placement?: Placement;\n  /**\n   * Whether the trigger element is interactive.\n   * When trigger is interactive:\n   *      - tooltip will be shown after a 300ms delay.\n   * When trigger is not interactive:\n   *      - tooltip will be shown instantly when pointer enters trigger.\n   *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n   */\n  isTriggerInteractive: boolean;\n\n  /**\n   * Additional aria-* attributes to pass through to the floating tooltip for\n   * edge cases which require more user awareness like errors & alerts.\n   */\n  \"aria-atomic\"?: AriaAttributes[\"aria-atomic\"];\n  \"aria-live\"?: AriaAttributes[\"aria-live\"];\n}\n\nexport interface TooltipLabel {\n  /**\n   * A label for the target element.\n   */\n  label: string;\n}\n\nexport interface TooltipDescription {\n  /**\n   * A description for the target element.\n   */\n  description: string;\n}\n\ntype UseTooltipProps = CommonUseTooltipProps &\n  (TooltipLabel | TooltipDescription);\n\nexport function useTooltip({\n  open: controlledOpen,\n  disabled = false,\n  onOpenChange,\n  placement = \"bottom\",\n  isTriggerInteractive,\n  caption,\n  \"aria-atomic\": ariaAtomic,\n  \"aria-live\": ariaLive,\n  ...props\n}: UseTooltipProps) {\n  const labelId = useId();\n  const captionId = useId();\n  const arrowRef = useRef(null);\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  // Use controlledOpen if it is provided, otherwise use uncontrolledOpen\n  const open = disabled ? false : (controlledOpen ?? uncontrolledOpen);\n  const setOpen = (\n    open: boolean,\n    event?: Event | undefined,\n    reason?: OpenChangeReason | undefined,\n  ) => {\n    onOpenChange?.(open, event, reason);\n    // we are in uncontrolled mode\n    if (controlledOpen === undefined) setUncontrolledOpen(open);\n  };\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 6px\n      offset(6),\n      flip({\n        crossAxis: placement.includes(\"-\"),\n        fallbackAxisSideDirection: \"start\",\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n      // add the little arrow along with the floating content\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n  });\n\n  const context = data.context;\n  const { delay, initialDelay } = useDelayGroup(context);\n  // We can tell if no delay group has been provided, because the delay will\n  // default to zero\n  if (initialDelay !== hoverDelay)\n    throw new Error(\"Tooltips must be wrapped in a global <TooltipProvider>\");\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen === undefined,\n    // Show tooltip after a delay when trigger is interactive\n    delay: isTriggerInteractive ? delay : {},\n    mouseOnly: true,\n  });\n\n  const focus = useFocus(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  // On touch screens, show the tooltip on a long press\n  const pressTimer = useRef<number | undefined>(undefined);\n  useEffect(() => () => window.clearTimeout(pressTimer.current), []);\n  const press = useMemo(() => {\n    const onTouchEnd = () => {\n      if (pressTimer.current === undefined)\n        pressTimer.current = window.setTimeout(() => {\n          setOpen(false);\n          pressTimer.current = undefined;\n        }, 1500);\n      else window.clearTimeout(pressTimer.current);\n    };\n    return {\n      // Set these props on the anchor element\n      reference: {\n        onTouchStart: () => {\n          if (pressTimer.current !== undefined)\n            window.clearTimeout(pressTimer.current);\n          pressTimer.current = window.setTimeout(() => {\n            setOpen(true);\n            pressTimer.current = undefined;\n          }, 500);\n        },\n        onTouchEnd,\n        onTouchCancel: onTouchEnd,\n      },\n    };\n  }, []);\n\n  const dismiss = useDismiss(context);\n\n  const purpose = \"label\" in props ? \"label\" : \"description\";\n  // A descriptive tooltip should set role=\"tooltip\" and aria-describedby\n  const role = useRole(context, {\n    enabled: purpose === \"description\",\n    role: \"tooltip\",\n  });\n\n  // A label tooltip should set aria-labelledby with no role regardless of\n  // whether the tooltip is visible.\n  // (Source: https://zoebijl.github.io/apg-tooltip/#tooltip-main-label)\n  // useRole doesn't support this use case correctly, so we do it manually.\n  const label = useMemo(\n    () =>\n      purpose === \"label\"\n        ? {\n            // Set these props on the anchor element\n            reference: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": caption ? captionId : undefined,\n            },\n          }\n        : {},\n    [purpose, labelId, captionId],\n  );\n\n  const interactions = useInteractions([\n    hover,\n    focus,\n    press,\n    dismiss,\n    role,\n    label,\n  ]);\n\n  return useMemo(\n    () => ({\n      labelId,\n      captionId: caption ? captionId : undefined,\n      caption,\n      purpose: purpose as \"label\" | \"description\",\n      open,\n      setOpen,\n      tooltipProps: {\n        \"aria-atomic\": ariaAtomic,\n        \"aria-live\": ariaLive,\n      },\n      ...interactions,\n      ...data,\n      arrowRef,\n    }),\n    [\n      labelId,\n      captionId,\n      caption,\n      role,\n      open,\n      setOpen,\n      interactions,\n      data,\n      arrowRef,\n    ],\n  );\n}\n"],"names":["open"],"mappings":"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"}

package/dist/components/Typography/Body.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.cjs","sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"names":["jsx","Text"],"mappings":";;;;AAcO,MAAM,OAAoD,CAAC;AAAA,EAChE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAQA,2BAAA,IAAAC,KAAA,MAAA,EAAM,GAAG,OAAQ,SAAS,CAAA;AACpC;;"}
+{"version":3,"file":"Body.cjs","sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"names":["jsx","Text"],"mappings":";;;;AAcO,MAAM,OAAoD,CAAC;AAAA,EAChE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAOA,2BAAAA,IAACC,KAAAA,MAAA,EAAM,GAAG,OAAQ,SAAA,CAAS;AACpC;;"}

package/dist/components/Typography/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"names":[],"mappings":";;AAcO,MAAM,OAAoD,CAAC;AAAA,EAChE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAQ,oBAAA,MAAA,EAAM,GAAG,OAAQ,SAAS,CAAA;AACpC;"}
+{"version":3,"file":"Body.js","sources":["../../../src/components/Typography/Body.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Text } from \"./Text\";\n\n/**\n * @deprecated use `Text` instead\n */\nexport const Body: React.FC<React.ComponentProps<typeof Text>> = ({\n  children,\n  ...props\n}) => {\n  return <Text {...props}>{children}</Text>;\n};\n"],"names":[],"mappings":";;AAcO,MAAM,OAAoD,CAAC;AAAA,EAChE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAO,oBAAC,MAAA,EAAM,GAAG,OAAQ,SAAA,CAAS;AACpC;"}

package/dist/components/Typography/Heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.cjs","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\nimport { Text } from \"./Text\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A heading component.\n */\nexport const Heading: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xs is not a valid heading size\n    size?: Exclude<TypographyProps[\"size\"], \"xs\">;\n  }\n> = ({ as = \"h1\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"heading\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n\ntype HeadingProps = Omit<\n  React.ComponentProps<typeof Heading>,\n  \"as\" | \"weight\" | \"size\"\n>;\n\n/**\n * A Heading level-1 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H1: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h1\" weight=\"semibold\" size=\"xl\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-2 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H2: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h2\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-3 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H3: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h3\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-4 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H4: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h4\" weight=\"semibold\" size=\"sm\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-5 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H5: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h5\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Text>\n  );\n};\n\n/**\n * A Heading level-6 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H6: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h6\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["Typography","jsx","Text"],"mappings":";;;;;AAiBa,MAAA,UAKT,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,YAAY;AACzC,wCACGA,WAAW,YAAA,EAAA,IAAQ,MAAK,WAAW,GAAG,OACpC,UACH;AAEJ;AAWO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAAC,+BAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAAA,+BAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAAA,+BAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAAA,+BAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAAA,+BAACC,KAAAA,MAAK,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAAD,+BAACC,KAAAA,MAAK,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SACH,CAAA;AAEJ;;;;;;;;"}
+{"version":3,"file":"Heading.cjs","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\nimport { Text } from \"./Text\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A heading component.\n */\nexport const Heading: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xs is not a valid heading size\n    size?: Exclude<TypographyProps[\"size\"], \"xs\">;\n  }\n> = ({ as = \"h1\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"heading\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n\ntype HeadingProps = Omit<\n  React.ComponentProps<typeof Heading>,\n  \"as\" | \"weight\" | \"size\"\n>;\n\n/**\n * A Heading level-1 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H1: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h1\" weight=\"semibold\" size=\"xl\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-2 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H2: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h2\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-3 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H3: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h3\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-4 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H4: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h4\" weight=\"semibold\" size=\"sm\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-5 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H5: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h5\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Text>\n  );\n};\n\n/**\n * A Heading level-6 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H6: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h6\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["Typography","jsx","Text"],"mappings":";;;;;AAiBO,MAAM,UAKT,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,YAAY;AACzC,wCACGA,WAAAA,YAAA,EAAW,IAAQ,MAAK,WAAW,GAAG,OACpC,UACH;AAEJ;AAWO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEC,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACEA,+BAACC,KAAAA,MAAA,EAAK,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACED,+BAACC,KAAAA,MAAA,EAAK,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SAAA,CACH;AAEJ;;;;;;;;"}

package/dist/components/Typography/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\nimport { Text } from \"./Text\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A heading component.\n */\nexport const Heading: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xs is not a valid heading size\n    size?: Exclude<TypographyProps[\"size\"], \"xs\">;\n  }\n> = ({ as = \"h1\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"heading\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n\ntype HeadingProps = Omit<\n  React.ComponentProps<typeof Heading>,\n  \"as\" | \"weight\" | \"size\"\n>;\n\n/**\n * A Heading level-1 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H1: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h1\" weight=\"semibold\" size=\"xl\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-2 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H2: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h2\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-3 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H3: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h3\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-4 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H4: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h4\" weight=\"semibold\" size=\"sm\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-5 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H5: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h5\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Text>\n  );\n};\n\n/**\n * A Heading level-6 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H6: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h6\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Text>\n  );\n};\n"],"names":[],"mappings":";;;AAiBa,MAAA,UAKT,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,YAAY;AACzC,6BACG,YAAW,EAAA,IAAQ,MAAK,WAAW,GAAG,OACpC,UACH;AAEJ;AAWO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAA,oBAAC,MAAK,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SACH,CAAA;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AAElE,SAAA,oBAAC,MAAK,EAAA,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\nimport { Text } from \"./Text\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A heading component.\n */\nexport const Heading: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xs is not a valid heading size\n    size?: Exclude<TypographyProps[\"size\"], \"xs\">;\n  }\n> = ({ as = \"h1\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"heading\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n\ntype HeadingProps = Omit<\n  React.ComponentProps<typeof Heading>,\n  \"as\" | \"weight\" | \"size\"\n>;\n\n/**\n * A Heading level-1 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H1: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h1\" weight=\"semibold\" size=\"xl\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-2 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H2: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h2\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-3 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H3: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h3\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-4 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H4: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Heading as=\"h4\" weight=\"semibold\" size=\"sm\" {...props}>\n      {children}\n    </Heading>\n  );\n};\n\n/**\n * A Heading level-5 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H5: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h5\" weight=\"semibold\" size=\"lg\" {...props}>\n      {children}\n    </Text>\n  );\n};\n\n/**\n * A Heading level-6 styled component. Underlying HTML element can be changed\n * usign the `as` property.\n */\nexport const H6: React.FC<HeadingProps> = ({ children, ...props }) => {\n  return (\n    <Text as=\"h6\" weight=\"semibold\" size=\"md\" {...props}>\n      {children}\n    </Text>\n  );\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,UAKT,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,YAAY;AACzC,6BACG,YAAA,EAAW,IAAQ,MAAK,WAAW,GAAG,OACpC,UACH;AAEJ;AAWO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACE,oBAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACE,oBAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACE,oBAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACE,oBAAC,SAAA,EAAQ,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC9C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACE,oBAAC,MAAA,EAAK,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SAAA,CACH;AAEJ;AAMO,MAAM,KAA6B,CAAC,EAAE,UAAU,GAAG,YAAY;AACpE,SACE,oBAAC,MAAA,EAAK,IAAG,MAAK,QAAO,YAAW,MAAK,MAAM,GAAG,OAC3C,SAAA,CACH;AAEJ;"}

package/dist/components/Typography/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A text component. Underlying HTML element can be changed using the `as`\n * property. Will default to be a paragraph.\n */\nexport const Text: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xl is not a valid text size\n    size?: Exclude<TypographyProps[\"size\"], \"xl\">;\n  }\n> = ({ as = \"p\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"body\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n"],"names":["Typography"],"mappings":";;;;AAiBa,MAAA,OAKT,CAAC,EAAE,KAAK,KAAK,UAAU,GAAG,YAAY;AACxC,wCACGA,WAAW,YAAA,EAAA,IAAQ,MAAK,QAAQ,GAAG,OACjC,UACH;AAEJ;;"}
+{"version":3,"file":"Text.cjs","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A text component. Underlying HTML element can be changed using the `as`\n * property. Will default to be a paragraph.\n */\nexport const Text: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xl is not a valid text size\n    size?: Exclude<TypographyProps[\"size\"], \"xl\">;\n  }\n> = ({ as = \"p\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"body\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n"],"names":["Typography"],"mappings":";;;;AAiBO,MAAM,OAKT,CAAC,EAAE,KAAK,KAAK,UAAU,GAAG,YAAY;AACxC,wCACGA,WAAAA,YAAA,EAAW,IAAQ,MAAK,QAAQ,GAAG,OACjC,UACH;AAEJ;;"}

package/dist/components/Typography/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A text component. Underlying HTML element can be changed using the `as`\n * property. Will default to be a paragraph.\n */\nexport const Text: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xl is not a valid text size\n    size?: Exclude<TypographyProps[\"size\"], \"xl\">;\n  }\n> = ({ as = \"p\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"body\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n"],"names":[],"mappings":";;AAiBa,MAAA,OAKT,CAAC,EAAE,KAAK,KAAK,UAAU,GAAG,YAAY;AACxC,6BACG,YAAW,EAAA,IAAQ,MAAK,QAAQ,GAAG,OACjC,UACH;AAEJ;"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React from \"react\";\nimport { Typography } from \"./Typography\";\n\ntype TypographyProps = React.ComponentProps<typeof Typography>;\n\n/**\n * A text component. Underlying HTML element can be changed using the `as`\n * property. Will default to be a paragraph.\n */\nexport const Text: React.FC<\n  Omit<TypographyProps, \"type\"> & {\n    // xl is not a valid text size\n    size?: Exclude<TypographyProps[\"size\"], \"xl\">;\n  }\n> = ({ as = \"p\", children, ...props }) => {\n  return (\n    <Typography as={as} type=\"body\" {...props}>\n      {children}\n    </Typography>\n  );\n};\n"],"names":[],"mappings":";;AAiBO,MAAM,OAKT,CAAC,EAAE,KAAK,KAAK,UAAU,GAAG,YAAY;AACxC,6BACG,YAAA,EAAW,IAAQ,MAAK,QAAQ,GAAG,OACjC,UACH;AAEJ;"}

package/dist/components/Typography/Typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { PropsWithChildren } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Typography.module.css\";\n\ntype TypographyProps<C extends React.ElementType> = {\n  /**\n   * The HTML tag.\n   * @default \"p\"\n   */\n  as?: C;\n  /**\n   * The type of content.\n   */\n  type?: \"body\" | \"heading\";\n  /**\n   * The font weight.\n   */\n  weight?: \"regular\" | \"semibold\" | \"medium\" | \"bold\";\n  /**\n   * The t-shirt size of the content.\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & React.ComponentPropsWithoutRef<C>;\n\nexport const Typography = <C extends React.ElementType = \"p\">({\n  as,\n  children,\n  type = \"body\",\n  weight = \"regular\",\n  size = \"md\",\n  className,\n  ...restProps\n}: PropsWithChildren<TypographyProps<C>>): React.ReactElement => {\n  const Component = as || \"p\";\n\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        styles.typography,\n        styles[`font-${type}-${size}-${weight}`],\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["jsx","styles"],"mappings":";;;;;AAqCO,MAAM,aAAa,CAAoC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAiE;AAC/D,QAAM,YAAY,MAAM;AAGtB,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACTC,kBAAAA,QAAO;AAAA,QACPA,0BAAO,QAAQ,IAAI,IAAI,IAAI,IAAI,MAAM,EAAE;AAAA,QACvC;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
+{"version":3,"file":"Typography.cjs","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type PropsWithChildren } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Typography.module.css\";\n\ntype TypographyProps<C extends React.ElementType> = {\n  /**\n   * The HTML tag.\n   * @default \"p\"\n   */\n  as?: C;\n  /**\n   * The type of content.\n   */\n  type?: \"body\" | \"heading\";\n  /**\n   * The font weight.\n   */\n  weight?: \"regular\" | \"semibold\" | \"medium\" | \"bold\";\n  /**\n   * The t-shirt size of the content.\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & React.ComponentPropsWithoutRef<C>;\n\nexport const Typography = <C extends React.ElementType = \"p\">({\n  as,\n  children,\n  type = \"body\",\n  weight = \"regular\",\n  size = \"md\",\n  className,\n  ...restProps\n}: PropsWithChildren<TypographyProps<C>>): React.ReactElement => {\n  const Component = as || \"p\";\n\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        styles.typography,\n        styles[`font-${type}-${size}-${weight}`],\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["jsx","styles"],"mappings":";;;;;AAqCO,MAAM,aAAa,CAAoC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAiE;AAC/D,QAAM,YAAY,MAAM;AAExB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACTC,kBAAAA,QAAO;AAAA,QACPA,0BAAO,QAAQ,IAAI,IAAI,IAAI,IAAI,MAAM,EAAE;AAAA,QACvC;AAAA,MAAA;AAAA,MAGD;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/components/Typography/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjD,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI;IAClD;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEtC,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,uEAQnD,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAehD,CAAC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKtD,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI;IAClD;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEtC,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAAE,+DAQ3D,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAehD,CAAC"}

package/dist/components/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { PropsWithChildren } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Typography.module.css\";\n\ntype TypographyProps<C extends React.ElementType> = {\n  /**\n   * The HTML tag.\n   * @default \"p\"\n   */\n  as?: C;\n  /**\n   * The type of content.\n   */\n  type?: \"body\" | \"heading\";\n  /**\n   * The font weight.\n   */\n  weight?: \"regular\" | \"semibold\" | \"medium\" | \"bold\";\n  /**\n   * The t-shirt size of the content.\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & React.ComponentPropsWithoutRef<C>;\n\nexport const Typography = <C extends React.ElementType = \"p\">({\n  as,\n  children,\n  type = \"body\",\n  weight = \"regular\",\n  size = \"md\",\n  className,\n  ...restProps\n}: PropsWithChildren<TypographyProps<C>>): React.ReactElement => {\n  const Component = as || \"p\";\n\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        styles.typography,\n        styles[`font-${type}-${size}-${weight}`],\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":[],"mappings":";;;AAqCO,MAAM,aAAa,CAAoC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAiE;AAC/D,QAAM,YAAY,MAAM;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO,QAAQ,IAAI,IAAI,IAAI,IAAI,MAAM,EAAE;AAAA,QACvC;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"Typography.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type PropsWithChildren } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Typography.module.css\";\n\ntype TypographyProps<C extends React.ElementType> = {\n  /**\n   * The HTML tag.\n   * @default \"p\"\n   */\n  as?: C;\n  /**\n   * The type of content.\n   */\n  type?: \"body\" | \"heading\";\n  /**\n   * The font weight.\n   */\n  weight?: \"regular\" | \"semibold\" | \"medium\" | \"bold\";\n  /**\n   * The t-shirt size of the content.\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & React.ComponentPropsWithoutRef<C>;\n\nexport const Typography = <C extends React.ElementType = \"p\">({\n  as,\n  children,\n  type = \"body\",\n  weight = \"regular\",\n  size = \"md\",\n  className,\n  ...restProps\n}: PropsWithChildren<TypographyProps<C>>): React.ReactElement => {\n  const Component = as || \"p\";\n\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        styles.typography,\n        styles[`font-${type}-${size}-${weight}`],\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":[],"mappings":";;;AAqCO,MAAM,aAAa,CAAoC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAiE;AAC/D,QAAM,YAAY,MAAM;AAExB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO,QAAQ,IAAI,IAAI,IAAI,IAAI,MAAM,EAAE;AAAA,QACvC;AAAA,MAAA;AAAA,MAGD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/VisualList/VisualList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VisualList.cjs","sources":["../../../src/components/VisualList/VisualList.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { JSX, PropsWithChildren } from \"react\";\nimport styles from \"./VisualList.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListProps extends React.HTMLProps<HTMLUListElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n}\n\n/**\n * A list component.\n */\nexport function VisualList({\n  className,\n  children,\n  ...props\n}: PropsWithChildren<VisualListProps>): JSX.Element {\n  return (\n    <ul className={classNames(styles[\"visual-list\"], className)} {...props}>\n      {children}\n    </ul>\n  );\n}\n"],"names":["jsx","styles"],"mappings":";;;;;AAqBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoD;AAEhD,SAAAA,+BAAC,MAAG,EAAA,WAAW,WAAWC,kBAAAA,QAAO,aAAa,GAAG,SAAS,GAAI,GAAG,OAC9D,SACH,CAAA;AAEJ;;"}
+{"version":3,"file":"VisualList.cjs","sources":["../../../src/components/VisualList/VisualList.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type JSX, type PropsWithChildren } from \"react\";\nimport styles from \"./VisualList.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListProps extends React.HTMLProps<HTMLUListElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n}\n\n/**\n * A list component.\n */\nexport function VisualList({\n  className,\n  children,\n  ...props\n}: PropsWithChildren<VisualListProps>): JSX.Element {\n  return (\n    <ul className={classNames(styles[\"visual-list\"], className)} {...props}>\n      {children}\n    </ul>\n  );\n}\n"],"names":["jsx","styles"],"mappings":";;;;;AAqBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoD;AAClD,SACEA,+BAAC,MAAA,EAAG,WAAW,WAAWC,kBAAAA,QAAO,aAAa,GAAG,SAAS,GAAI,GAAG,OAC9D,SAAA,CACH;AAEJ;;"}

package/dist/components/VisualList/VisualList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualList.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/VisualList.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,UAAU,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACjE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC,OAAO,CAMlD"}
+{"version":3,"file":"VisualList.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/VisualList.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIhE,UAAU,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACjE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC,OAAO,CAMlD"}

package/dist/components/VisualList/VisualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisualList.js","sources":["../../../src/components/VisualList/VisualList.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { JSX, PropsWithChildren } from \"react\";\nimport styles from \"./VisualList.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListProps extends React.HTMLProps<HTMLUListElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n}\n\n/**\n * A list component.\n */\nexport function VisualList({\n  className,\n  children,\n  ...props\n}: PropsWithChildren<VisualListProps>): JSX.Element {\n  return (\n    <ul className={classNames(styles[\"visual-list\"], className)} {...props}>\n      {children}\n    </ul>\n  );\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoD;AAEhD,SAAA,oBAAC,MAAG,EAAA,WAAW,WAAW,OAAO,aAAa,GAAG,SAAS,GAAI,GAAG,OAC9D,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"VisualList.js","sources":["../../../src/components/VisualList/VisualList.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type JSX, type PropsWithChildren } from \"react\";\nimport styles from \"./VisualList.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListProps extends React.HTMLProps<HTMLUListElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n}\n\n/**\n * A list component.\n */\nexport function VisualList({\n  className,\n  children,\n  ...props\n}: PropsWithChildren<VisualListProps>): JSX.Element {\n  return (\n    <ul className={classNames(styles[\"visual-list\"], className)} {...props}>\n      {children}\n    </ul>\n  );\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoD;AAClD,SACE,oBAAC,MAAA,EAAG,WAAW,WAAW,OAAO,aAAa,GAAG,SAAS,GAAI,GAAG,OAC9D,SAAA,CACH;AAEJ;"}

package/dist/components/VisualList/VisualListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VisualListItem.cjs","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { ComponentType, JSX, PropsWithChildren } from \"react\";\nimport styles from \"./VisualListItem.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListItemProps extends React.HTMLProps<HTMLLIElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon component.\n   */\n  Icon: ComponentType<React.SVGAttributes<SVGElement>>;\n\n  success?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * A list component.\n */\nexport function VisualListItem({\n  className,\n  children,\n  Icon,\n  success = false,\n  destructive = false,\n  ...props\n}: PropsWithChildren<VisualListItemProps>): JSX.Element {\n  return (\n    <li\n      className={classNames(styles[\"visual-list-item\"], className)}\n      {...props}\n    >\n      <Icon\n        className={classNames(styles[\"visual-list-item-icon\"], {\n          [styles[\"visual-list-item-icon-success\"]]: success,\n          [styles[\"visual-list-item-icon-destructive\"]]: destructive,\n        })}\n        width=\"24px\"\n        height=\"24px\"\n        aria-hidden={true}\n      />\n      {children}\n    </li>\n  );\n}\n"],"names":["jsxs","styles","jsx"],"mappings":";;;;;AA4BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GAAwD;AAEpD,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAWC,sBAAAA,QAAO,kBAAkB,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,WAAWD,8BAAO,uBAAuB,GAAG;AAAA,cACrD,CAACA,sBAAA,QAAO,+BAA+B,CAAC,GAAG;AAAA,cAC3C,CAACA,sBAAAA,QAAO,mCAAmC,CAAC,GAAG;AAAA,YAAA,CAChD;AAAA,YACD,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
+{"version":3,"file":"VisualListItem.cjs","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentType,\n  type JSX,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./VisualListItem.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListItemProps extends React.HTMLProps<HTMLLIElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon component.\n   */\n  Icon: ComponentType<React.SVGAttributes<SVGElement>>;\n\n  success?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * A list component.\n */\nexport function VisualListItem({\n  className,\n  children,\n  Icon,\n  success = false,\n  destructive = false,\n  ...props\n}: PropsWithChildren<VisualListItemProps>): JSX.Element {\n  return (\n    <li\n      className={classNames(styles[\"visual-list-item\"], className)}\n      {...props}\n    >\n      <Icon\n        className={classNames(styles[\"visual-list-item-icon\"], {\n          [styles[\"visual-list-item-icon-success\"]]: success,\n          [styles[\"visual-list-item-icon-destructive\"]]: destructive,\n        })}\n        width=\"24px\"\n        height=\"24px\"\n        aria-hidden={true}\n      />\n      {children}\n    </li>\n  );\n}\n"],"names":["jsxs","styles","jsx"],"mappings":";;;;;AAgCO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GAAwD;AACtD,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAWC,sBAAAA,QAAO,kBAAkB,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,WAAWD,8BAAO,uBAAuB,GAAG;AAAA,cACrD,CAACA,sBAAAA,QAAO,+BAA+B,CAAC,GAAG;AAAA,cAC3C,CAACA,sBAAAA,QAAO,mCAAmC,CAAC,GAAG;AAAA,YAAA,CAChD;AAAA,YACD,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/components/VisualList/VisualListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualListItem.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrE,UAAU,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IAErD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBtD"}
+{"version":3,"file":"VisualListItem.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,GAAG,EACR,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAIf,UAAU,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IAErD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBtD"}

package/dist/components/VisualList/VisualListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisualListItem.js","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { ComponentType, JSX, PropsWithChildren } from \"react\";\nimport styles from \"./VisualListItem.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListItemProps extends React.HTMLProps<HTMLLIElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon component.\n   */\n  Icon: ComponentType<React.SVGAttributes<SVGElement>>;\n\n  success?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * A list component.\n */\nexport function VisualListItem({\n  className,\n  children,\n  Icon,\n  success = false,\n  destructive = false,\n  ...props\n}: PropsWithChildren<VisualListItemProps>): JSX.Element {\n  return (\n    <li\n      className={classNames(styles[\"visual-list-item\"], className)}\n      {...props}\n    >\n      <Icon\n        className={classNames(styles[\"visual-list-item-icon\"], {\n          [styles[\"visual-list-item-icon-success\"]]: success,\n          [styles[\"visual-list-item-icon-destructive\"]]: destructive,\n        })}\n        width=\"24px\"\n        height=\"24px\"\n        aria-hidden={true}\n      />\n      {children}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;AA4BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GAAwD;AAEpD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,OAAO,kBAAkB,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,WAAW,OAAO,uBAAuB,GAAG;AAAA,cACrD,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,cAC3C,CAAC,OAAO,mCAAmC,CAAC,GAAG;AAAA,YAAA,CAChD;AAAA,YACD,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"VisualListItem.js","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentType,\n  type JSX,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./VisualListItem.module.css\";\nimport classNames from \"classnames\";\n\ninterface VisualListItemProps extends React.HTMLProps<HTMLLIElement> {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon component.\n   */\n  Icon: ComponentType<React.SVGAttributes<SVGElement>>;\n\n  success?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * A list component.\n */\nexport function VisualListItem({\n  className,\n  children,\n  Icon,\n  success = false,\n  destructive = false,\n  ...props\n}: PropsWithChildren<VisualListItemProps>): JSX.Element {\n  return (\n    <li\n      className={classNames(styles[\"visual-list-item\"], className)}\n      {...props}\n    >\n      <Icon\n        className={classNames(styles[\"visual-list-item-icon\"], {\n          [styles[\"visual-list-item-icon-success\"]]: success,\n          [styles[\"visual-list-item-icon-destructive\"]]: destructive,\n        })}\n        width=\"24px\"\n        height=\"24px\"\n        aria-hidden={true}\n      />\n      {children}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;AAgCO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GAAwD;AACtD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,OAAO,kBAAkB,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,WAAW,OAAO,uBAAuB,GAAG;AAAA,cACrD,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,cAC3C,CAAC,OAAO,mCAAmC,CAAC,GAAG;AAAA,YAAA,CAChD;AAAA,YACD,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/{style.css.css → style.css}

@@ -617,7 +617,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._menu_19sse_8 {
+._menu_1glhz_8 {
   border-radius: var(--cpd-space-3x);
   background: var(--cpd-color-bg-canvas-default);
 
@@ -627,7 +627,7 @@ Please see LICENSE files in the repository root for full details.
   outline: var(--cpd-border-width-1) solid
     var(--cpd-color-border-interactive-secondary) !important;
   outline-offset: calc(-1 * var(--cpd-border-width-1));
-  box-shadow: 0 4px 24px 0 rgba(0 0 0 / 10%);
+  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
   inline-size: fit-content;
   max-inline-size: 320px;
   display: flex;
@@ -639,51 +639,51 @@ Please see LICENSE files in the repository root for full details.
   --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-@keyframes _slide-in_19sse_1 {
+@keyframes _slide-in_1glhz_1 {
   from {
     opacity: 0;
     transform: translate(0, var(--cpd-space-3x));
   }
 }
 
-@keyframes _slide-out_19sse_1 {
+@keyframes _slide-out_1glhz_1 {
   to {
     opacity: 0;
     transform: translate(0, var(--cpd-space-2x));
   }
 }
 
-._menu_19sse_8[data-state="open"] {
-  animation: _slide-in_19sse_1 180ms;
+._menu_1glhz_8[data-state="open"] {
+  animation: _slide-in_1glhz_1 180ms;
 }
 
-._menu_19sse_8[data-state="closed"] {
-  animation: _slide-out_19sse_1 110ms;
+._menu_1glhz_8[data-state="closed"] {
+  animation: _slide-out_1glhz_1 110ms;
 }
 
-@keyframes _fade-in_19sse_1 {
+@keyframes _fade-in_1glhz_1 {
   from {
     opacity: 0;
   }
 }
 
-@keyframes _fade-out_19sse_1 {
+@keyframes _fade-out_1glhz_1 {
   to {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion) {
-  ._menu_19sse_8[data-state="open"] {
-    animation-name: _fade-in_19sse_1;
+  ._menu_1glhz_8[data-state="open"] {
+    animation-name: _fade-in_1glhz_1;
   }
 
-  ._menu_19sse_8[data-state="closed"] {
-    animation-name: _fade-out_19sse_1;
+  ._menu_1glhz_8[data-state="closed"] {
+    animation-name: _fade-out_1glhz_1;
   }
 }
 
-._title_19sse_74 {
+._title_1glhz_74 {
   /** Override MenuTitle margin top **/
   margin-block-start: 0 !important;
 }
@@ -708,16 +708,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._bg_1y38p_8 {
+._bg_610zp_8 {
   position: fixed;
   inset: 0;
 
   /* TODO: This value is used across modals and menu drawers, so would be worth
   tokenizing */
-  background: rgba(3 12 27 / 52.8%);
+  background: rgb(3 12 27 / 52.8%);
 }
 
-._drawer_1y38p_17 {
+._drawer_610zp_17 {
   position: fixed;
   background: var(--cpd-color-bg-canvas-default);
   inset-block-end: 0;
@@ -743,7 +743,7 @@ Please see LICENSE files in the repository root for full details.
   );
 }
 
-._drawer_1y38p_17[data-platform="ios"] {
+._drawer_610zp_17[data-platform="ios"] {
   --border-radius: 10px;
   --handle-block-size: 5px;
   --handle-inline-size: 36px;
@@ -751,7 +751,7 @@ Please see LICENSE files in the repository root for full details.
   --handle-inset-block-end: 1px;
 }
 
-._body_1y38p_51 {
+._body_610zp_51 {
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-2x);
@@ -770,7 +770,7 @@ Please see LICENSE files in the repository root for full details.
   --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-._body_1y38p_51::before {
+._body_610zp_51::before {
   content: "";
   position: absolute;
   block-size: var(--handle-block-size);

package/dist/utils/__ComponentTemplate__/__ComponentTemplate__.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"__ComponentTemplate__.d.ts","sourceRoot":"","sources":["../../../src/utils/__ComponentTemplate__/__ComponentTemplate__.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,eAAO,MAAM,qBAAqB;gBAHpB,MAAM;+EAqBlB,CAAC"}
+{"version":3,"file":"__ComponentTemplate__.d.ts","sourceRoot":"","sources":["../../../src/utils/__ComponentTemplate__/__ComponentTemplate__.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAOlE,eAAO,MAAM,qBAAqB;gBAHpB,MAAM;+EAqBlB,CAAC"}

package/dist/utils/platform.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"platform.cjs","sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"names":[],"mappings":";;AAWO,SAAS,cAA2C;AAMnD,QAAA,YAAY,WAAW,WAAW;AAEpC,MAAA,WAAW,KAAK,SAAS,GAAG;AACvB,WAAA;AAAA,EAAA,WAIP,uBAAuB,KAAK,SAAS,KACrC,gBAAgB,UAChB;AACO,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EAAA;AAEX;;"}
+{"version":3,"file":"platform.cjs","sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"names":[],"mappings":";;AAWO,SAAS,cAA2C;AAMzD,QAAM,YAAY,WAAW,WAAW;AAExC,MAAI,WAAW,KAAK,SAAS,GAAG;AAC9B,WAAO;AAAA,EAGT,WACE,uBAAuB,KAAK,SAAS,KACrC,gBAAgB,UAChB;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;;"}

package/dist/utils/platform.js.map

@@ -1 +1 @@
-{"version":3,"file":"platform.js","sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"names":[],"mappings":"AAWO,SAAS,cAA2C;AAMnD,QAAA,YAAY,WAAW,WAAW;AAEpC,MAAA,WAAW,KAAK,SAAS,GAAG;AACvB,WAAA;AAAA,EAAA,WAIP,uBAAuB,KAAK,SAAS,KACrC,gBAAgB,UAChB;AACO,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"platform.js","sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"names":[],"mappings":"AAWO,SAAS,cAA2C;AAMzD,QAAM,YAAY,WAAW,WAAW;AAExC,MAAI,WAAW,KAAK,SAAS,GAAG;AAC9B,WAAO;AAAA,EAGT,WACE,uBAAuB,KAAK,SAAS,KACrC,gBAAgB,UAChB;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;"}

package/dist/utils/string.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"string.cjs","sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"names":[],"mappings":";;AAOO,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAE/B,MAAM,oBAAoB,IAAI,KAAK,UAAU;AAQtC,SAAS,iBAAiB,MAAsB;AACjD,MAAA,KAAK,SAAS,GAAG;AACZ,WAAA;AAAA,EAAA;AAGH,QAAA,UAAU,KAAK,CAAC;AACtB,MAAI,CAAC,oBAAoB,gBAAgB,eAAe,EAAE,SAAS,OAAO,GAAG;AACpE,WAAA,KAAK,UAAU,CAAC;AAAA,EAAA;AAInB,QAAA,SAAS,kBAAkB,QAAQ,IAAI,EAAE,OAAO,QAAQ,EAAE,EAAE,KAAK;AACvE,SAAO,OAAO,OAAO,KAAK,OAAO,MAAM;AACzC;;;;;"}
+{"version":3,"file":"string.cjs","sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"names":[],"mappings":";;AAOO,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAE/B,MAAM,oBAAoB,IAAI,KAAK,UAAA;AAQ5B,SAAS,iBAAiB,MAAsB;AACrD,MAAI,KAAK,SAAS,GAAG;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,KAAK,CAAC;AACtB,MAAI,CAAC,oBAAoB,gBAAgB,eAAe,EAAE,SAAS,OAAO,GAAG;AAC3E,WAAO,KAAK,UAAU,CAAC;AAAA,EACzB;AAGA,QAAM,SAAS,kBAAkB,QAAQ,IAAI,EAAE,OAAO,QAAQ,EAAA,EAAI,KAAA;AAClE,SAAO,OAAO,OAAO,KAAK,OAAO,MAAM;AACzC;;;;;"}

package/dist/utils/string.js.map

@@ -1 +1 @@
-{"version":3,"file":"string.js","sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"names":[],"mappings":"AAOO,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAE/B,MAAM,oBAAoB,IAAI,KAAK,UAAU;AAQtC,SAAS,iBAAiB,MAAsB;AACjD,MAAA,KAAK,SAAS,GAAG;AACZ,WAAA;AAAA,EAAA;AAGH,QAAA,UAAU,KAAK,CAAC;AACtB,MAAI,CAAC,oBAAoB,gBAAgB,eAAe,EAAE,SAAS,OAAO,GAAG;AACpE,WAAA,KAAK,UAAU,CAAC;AAAA,EAAA;AAInB,QAAA,SAAS,kBAAkB,QAAQ,IAAI,EAAE,OAAO,QAAQ,EAAE,EAAE,KAAK;AACvE,SAAO,OAAO,OAAO,KAAK,OAAO,MAAM;AACzC;"}
+{"version":3,"file":"string.js","sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"names":[],"mappings":"AAOO,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAE/B,MAAM,oBAAoB,IAAI,KAAK,UAAA;AAQ5B,SAAS,iBAAiB,MAAsB;AACrD,MAAI,KAAK,SAAS,GAAG;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,KAAK,CAAC;AACtB,MAAI,CAAC,oBAAoB,gBAAgB,eAAe,EAAE,SAAS,OAAO,GAAG;AAC3E,WAAO,KAAK,UAAU,CAAC;AAAA,EACzB;AAGA,QAAM,SAAS,kBAAkB,QAAQ,IAAI,EAAE,OAAO,QAAQ,EAAA,EAAI,KAAA;AAClE,SAAO,OAAO,OAAO,KAAK,OAAO,MAAM;AACzC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,10 +8,10 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js",
+      "style": "./dist/style.css",
       "types": "./dist/index.d.ts",
-      "style": "./dist/style.css"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
     "./dist/style.css": "./dist/style.css"
   },
@@ -27,8 +27,9 @@
     "lint:ts": "tsc --noEmit -p .",
     "lint:styles": "npx stylelint 'src/**/*.css'",
     "test": "vitest",
-    "e2e": "playwright test",
-    "e2e:docker": "docker run --rm --network host --ipc=host --security-opt seccomp=playwright/seccomp_profile.json -v $(pwd)/../:/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ --init -it $(docker build --build-arg UID=$(id -u) --build-arg GID=$(id -g) -q playwright)",
+    "e2e": "yarn build-storybook && playwright test",
+    "e2e:docker": "yarn build-storybook && docker run --rm --network host --ipc=host --security-opt seccomp=playwright/seccomp_profile.json -v $(pwd)/../:/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ --init -it $(docker build --build-arg UID=$(id -u) --build-arg GID=$(id -g) -q playwright)",
+    "e2e:podman": "yarn build-storybook && podman run --rm --network host --ipc=host --security-opt seccomp=playwright/seccomp_profile.json -v $(pwd)/../:/work/ -v /tmp/:/tmp/ --userns=keep-id --init -it $(podman build --build-arg UID=$(id -u) --build-arg GID=$(id -g) -q playwright)",
     "build-storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
     "gen:component": "node scripts/genComponent.js"
@@ -54,54 +55,50 @@
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
-    "@storybook/addon-a11y": "^8.1.1",
-    "@storybook/addon-designs": "8.0.4",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/addon-themes": "^8.1.1",
-    "@storybook/manager-api": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-vite": "^8.1.1",
-    "@storybook/test": "^8.1.1",
+    "@storybook/addon-a11y": "^9.0.16",
+    "@storybook/addon-designs": "10.0.2",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-links": "^9.0.16",
+    "@storybook/addon-themes": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/node20": "^20.1.4",
-    "@tsconfig/vite-react": "^3.0.0",
+    "@tsconfig/vite-react": "^7.0.0",
     "@types/eslint": "^9.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vector-im/compound-design-tokens": "^5.0.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^3.0.0",
+    "@vector-im/compound-design-tokens": "^6.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "browserslist-to-esbuild": "^2.0.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-matrix-org": "^1.2.1",
+    "eslint-plugin-matrix-org": "^2.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.11.0",
-    "jsdom": "^26.0.0",
-    "prettier": "3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "eslint-plugin-storybook": "^9.0.16",
+    "jsdom": "^26.1.0",
+    "prettier": "3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^6.0.0",
     "serve": "^14.2.1",
-    "storybook": "^8.1.1",
+    "storybook": "^9.0.16",
     "stylelint": "^16.13.2",
-    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard": "^39.0.0",
     "stylelint-plugin-defensive-css": "^1.0.0",
     "stylelint-use-logical": "^2.1.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.0",
     "typescript": "^5.2.2",
-    "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.0.0",
-    "vitest": "^3.0.0"
+    "vite": "^7.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.0",
@@ -118,7 +115,7 @@
     "@fontsource/inconsolata": "^5",
     "@fontsource/inter": "^5",
     "@types/react": "*",
-    "@vector-im/compound-design-tokens": ">=1.6.1 <6.0.0",
+    "@vector-im/compound-design-tokens": ">=1.6.1 <7.0.0",
     "react": "^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {

package/src/components/ActivityMarker/Pill.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { HTMLProps, JSX } from "react";
+import React, { type HTMLProps, type JSX } from "react";
 import styles from "./Pill.module.css";
 
 export function Pill({

package/src/components/ActivityMarker/Unread.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { HTMLProps } from "react";
+import React, { type HTMLProps } from "react";
 import styles from "./Unread.module.css";
 
 export function Unread(props: HTMLProps<HTMLDivElement>) {

package/src/components/ActivityMarker/UnreadCounter.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { HTMLProps } from "react";
+import React, { type HTMLProps } from "react";
 import styles from "./UnreadCounter.module.css";
 
 interface UnreadCounterProps extends HTMLProps<HTMLDivElement> {

package/src/components/Alert/Alert.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { PropsWithChildren, useCallback } from "react";
+import React, { type PropsWithChildren, useCallback } from "react";
 
 import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";

package/src/components/Avatar/Avatar.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { ComponentProps, forwardRef } from "react";
+import React, { type ComponentProps, forwardRef } from "react";
 import { getInitialLetter } from "../../utils/string";
 import styles from "./Avatar.module.css";
 import { useIdColorHash } from "./useIdColorHash";

package/src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import React, { type PropsWithChildren } from "react";
 import styles from "./Badge.module.css";
 import { Typography } from "../Typography/Typography";