etudes 5.2.0 → 5.3.0

package/components/Collection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collection.js","sourceRoot":"/","sources":["components/Collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\n/**\n * Type describing the layout orientation of items in {@link Collection}.\n */\nexport type CollectionOrientation = 'horizontal' | 'vertical'\n\n/**\n * Type describing the layout appearance of {@link Collection}:\n *   - `list`: Items will be laid out in a list.\n *   - `grid`: Items will be laid out in a grid.\n */\nexport type CollectionLayout = 'list' | 'grid'\n\n/**\n *  Type describing the item selection behavior of {@link Collection}:\n *    - `none`: No selection permitted at all.\n *    - `single`: Only one item can be selected at a time (the previously\n *                selected item will be automatically deselected).\n *    - `multiple`: Multiple items can be selected simultaneously.\n */\nexport type CollectionSelectionMode = 'none' | 'single' | 'multiple'\n\n/**\n * Type describing the current item selection of {@link Collection}, composed of\n * an array of indices of items that are selected. If the selection mode of the\n * {@link Collection} is `single`, only one index is expected in this array.\n */\nexport type CollectionSelection = number[]\n\n/**\n * Type describing the props of `ItemComponent` provided to {@link Collection}.\n */\nexport type CollectionItemProps<T> = HTMLAttributes<HTMLElement> & {\n  /**\n   * The index of the item.\n   */\n  index: number\n\n  /**\n   * Indicates whether the item is selected.\n   */\n  isSelected: boolean\n\n  /**\n   * Data provided to the item.\n   */\n  item: T\n\n  /**\n   * Orientation of the parent collection.\n   */\n  orientation: CollectionOrientation\n\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info Optional user-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\n/**\n * Type describing the props of {@link Collection}.\n */\nexport type CollectionProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Indicates if item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\n\n  /**\n   * Optional length (in pixels) of each item. Length refers to the height in\n   * vertical orientation and width in horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  items: T[]\n\n  /**\n   * Specifies the layout appearance of this component.\n   *\n   * @see {@link CollectionLayout}\n   */\n  layout?: CollectionLayout\n\n  /**\n   * Specifies the number of columns of this collection if the orientation is\n   * `vertical` or number of rows if the orientation is `horizontal`. This\n   * property is only used if the layout is set to `grid`.\n   */\n  numSegments?: number\n\n  /**\n   * Orientation of the component.\n   *\n   * @see {@link CollectionOrientation}\n   */\n  orientation?: CollectionOrientation\n\n  /**\n   * The selected indices. If `selectionMode` is `single`, only only the first\n   * value will be used.\n   *\n   * @see {@link CollectionSelection}\n   */\n  selection?: CollectionSelection\n\n  /**\n   * The item selection behavior.\n   *\n   * @see {@link CollectionSelectionMode}\n   */\n  selectionMode?: CollectionSelectionMode\n\n  /**\n   * Handler invoked when an item is activated (i.e. clicked). The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onActivateAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an item is deselected. The order of handlers invoked\n   * when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName User-defined name of the dispatched custom event.\n   * @param eventInfo Optional user-defined info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected. The order of handlers invoked\n   * when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed. The order of handlers\n   * invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param selection Indices of selected items.\n   */\n  onSelectionChange?: (selection: CollectionSelection) => void\n\n  /**\n   * Component type for generating items in this collection.\n   */\n  ItemComponent?: ComponentType<CollectionItemProps<T>>\n}\n\n/**\n * A collection of selectable items with generic data. Items are generated based\n * on the provided `ItemComponent`. This component supports different layouts in\n * both horizontal and vertical orientations.\n */\nexport const Collection = forwardRef(({\n  className,\n  style,\n  isSelectionTogglable = false,\n  itemLength,\n  itemPadding = 0,\n  items,\n  layout = 'list',\n  numSegments = 1,\n  orientation = 'vertical',\n  selection: externalSelection,\n  selectionMode = 'none',\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (isNaN(index)) return true\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizeSelection = (indices: CollectionSelection) => sortIndices(indices).filter(t => !isIndexOutOfRange(t))\n\n  const isSelectedAt = (index: number) => selection.indexOf(index) >= 0\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n\n    let transform: (val: CollectionSelection) => CollectionSelection\n\n    switch (selectionMode) {\n      case 'multiple': {\n        transform = val => sortIndices([...val.filter(t => t !== index), index])\n        break\n      }\n      case 'single': {\n        transform = val => [index]\n        break\n      }\n      default:\n        return\n    }\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n\n    const transform = (val: CollectionSelection) => val.filter(t => t !== index)\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const activateAt = (index: number) => {\n    onActivateAt?.(index)\n\n    if (selectionMode === 'none') return\n\n    if (isSelectionTogglable) {\n      toggleAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const handleSelectionChange = (oldValue: CollectionSelection | undefined, newValue: CollectionSelection) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const deselected = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? []\n    const selected = newValue.filter(t => oldValue?.indexOf(t) === -1)\n\n    deselected.forEach(t => onDeselectAt?.(t))\n    selected.forEach(t => onSelectAt?.(t))\n\n    onSelectionChange?.(newValue)\n  }\n\n  const selection = sanitizeSelection(externalSelection ?? [])\n  const fixedStyles = getFixedStyles({ itemLength, itemPadding, layout, numSegments, orientation })\n  const prevSelectionRef = useRef<CollectionSelection>()\n  const prevSelection = prevSelectionRef.current\n\n  useEffect(() => {\n    prevSelectionRef.current = selection\n\n    if (prevSelection === undefined) return\n\n    handleSelectionChange(prevSelection, selection)\n  }, [JSON.stringify(selection)])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx(className)}\n      data-component='collection'\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={items}>\n          {(val, idx) => (\n            <ItemComponent\n              className={clsx({ selected: isSelectedAt(idx) })}\n              data-child='item'\n              data-index={idx}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              item={val}\n              orientation={orientation}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...idx >= items.length - 1 ? {} : {\n                  ...layout === 'list' ? {\n                    ...orientation === 'vertical' ? {\n                      marginBottom: `${itemPadding}px`,\n                    } : {\n                      marginRight: `${itemPadding}px`,\n                    },\n                  } : {},\n                },\n              })}\n              onClick={() => activateAt(idx)}\n              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: CollectionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Collection, 'displayName', { value: 'Collection', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ itemLength = NaN, itemPadding = 0, layout = 'collection', numSegments = 1, orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      counterReset: 'item-counter',\n      listStyle: 'none',\n      ...layout === 'list' ? {\n        alignItems: 'flex-start',\n        display: 'flex',\n        flex: '0 0 auto',\n        flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n        justifyContent: 'flex-start',\n      } : {\n        display: 'grid',\n        gap: `${itemPadding}px`,\n        ...orientation === 'vertical' ? {\n          gridAutoRows: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          gridTemplateColumns: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'row',\n        } : {\n          gridAutoColumns: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          gridTemplateRows: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'column',\n        },\n      },\n    },\n    item: {\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...layout === 'list' ? {\n        ...orientation === 'vertical' ? {\n          width: '100%',\n          height: isNaN(itemLength) ? undefined : `${itemLength}px`,\n        } : {\n          width: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          height: '100%',\n        },\n      } : {},\n    },\n  })\n}\n"]}

package/components/Counter.d.ts

@@ -1,11 +0,0 @@
-import { type ComponentType, type HTMLAttributes } from 'react';
-export declare const Counter: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
-    min?: number;
-    max?: number;
-    quantity?: number;
-    allowsInput?: boolean;
-    usesDefaultStyles?: boolean;
-    onChange?: (quantity: number) => void;
-    AddButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>;
-    SubtractButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/components/Counter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Counter.js","sourceRoot":"/","sources":["components/Counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, type ComponentType, type HTMLAttributes } from 'react'\nimport { usePrevious } from '../hooks/usePrevious'\nimport { asStyleDict } from '../utils/asStyleDict'\nimport { styles } from '../utils/styles'\nimport { TextField } from './TextField'\n\ntype Props = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {\n  min?: number\n  max?: number\n  quantity?: number\n  allowsInput?: boolean\n  usesDefaultStyles?: boolean\n  onChange?: (quantity: number) => void\n  AddButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>\n  SubtractButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>\n}\n\nexport const Counter = forwardRef<HTMLDivElement, Props>(({\n  style,\n  min = NaN,\n  max = NaN,\n  allowsInput = true,\n  quantity = 0,\n  usesDefaultStyles = true,\n  onChange,\n  AddButtonComponent,\n  SubtractButtonComponent,\n  ...props\n}, ref) => {\n  const handleSubtract = () => {\n    onChange?.(isNaN(min) ? quantity - 1 : Math.max(min, quantity - 1))\n  }\n\n  const handleAdd = () => {\n    onChange?.(isNaN(max) ? quantity + 1 : Math.min(max, quantity + 1))\n  }\n\n  const handleQuantityChange = (newValue: number) => {\n    if (newValue === quantity) return\n\n    onChange?.(newValue)\n  }\n\n  const prevQuantity = usePrevious(quantity)\n  const defaultStyles = usesDefaultStyles ? DEFAULT_STYLES : undefined\n  const isAddingDisabled = !isNaN(max) && quantity + 1 > max\n  const isSubtractingDisabled = !isNaN(min) && quantity - 1 < min\n\n  useEffect(() => {\n    if (prevQuantity === undefined) return\n\n    handleQuantityChange(quantity)\n  }, [quantity])\n\n  useEffect(() => {\n    handleQuantityChange(isNaN(min) ? quantity : Math.max(min, quantity))\n  }, [min])\n\n  useEffect(() => {\n    if (isNaN(max)) return\n\n    handleQuantityChange(isNaN(max) ? quantity : Math.min(max, quantity))\n  }, [max])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='counter'\n      style={styles(style, FIXED_STYLES.root, defaultStyles?.root)}\n    >\n      {SubtractButtonComponent && (\n        <SubtractButtonComponent\n          className={clsx({ disabled: isSubtractingDisabled })}\n          data-child='subtract-button'\n          style={styles(FIXED_STYLES.subtract)}\n          onClick={() => handleSubtract()}\n        />\n      ) || (\n        <button\n          className={clsx({ disabled: isSubtractingDisabled })}\n          data-child='subtract-button'\n          style={styles(FIXED_STYLES.subtract, defaultStyles?.subtract)}\n          onClick={() => handleSubtract()}\n        />\n      )}\n      <TextField\n        data-child='text-field'\n        formatter={(oldValue, newValue) => isNaN(Number(`0${newValue}`)) ? oldValue : newValue}\n        isDisabled={!allowsInput}\n        style={styles(FIXED_STYLES.text, defaultStyles?.text)}\n        value={quantity.toString()}\n      />\n      {AddButtonComponent && (\n        <AddButtonComponent\n          className={clsx({ disabled: isAddingDisabled })}\n          data-child='add-button'\n          style={styles(FIXED_STYLES.add)}\n          onClick={() => handleAdd()}\n        />\n      ) || (\n        <button\n          className={clsx({ disabled: isAddingDisabled })}\n          data-child='add-button'\n          style={styles(FIXED_STYLES.add, defaultStyles?.add)}\n          onClick={() => handleAdd()}\n        />\n      )}\n    </div>\n  )\n})\n\nObject.defineProperty(Counter, 'displayName', { value: 'Counter', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: styles({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'stretch',\n  }),\n  subtract: styles({\n    flex: '0 0 auto',\n  }),\n  add: styles({\n    flex: '0 0 auto',\n  }),\n  text: styles({\n    flex: '1 1 auto',\n  }),\n})\n\nconst DEFAULT_STYLES = asStyleDict({\n  root: styles({\n\n  }),\n  subtract: styles({\n    width: '20px',\n    height: '100%',\n    background: '#000',\n  }),\n  add: styles({\n    width: '20px',\n    height: '100%',\n    background: '#000',\n  }),\n  text: styles({\n    height: '100%',\n  }),\n})\n"]}

package/components/CoverImage.d.ts

@@ -1,28 +0,0 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-import { type ImageProps } from './Image';
-export type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<ImageProps, 'alt' | 'loadingMode' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart' | 'onLoadComplete' | 'onLoadError'> & PropsWithChildren<{
-    /**
-     * The known aspect ratio of the image, expressed by width / height. If
-     * unprovided, it will be inferred after loading the image.
-     */
-    aspectRatio?: number;
-    /**
-     * Content to render in the full-sized viewport (same size as the cover
-     * image).
-     */
-    renderViewportContent?: () => JSX.Element;
-}>;
-export declare const CoverImage: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "onLoadStart"> & Pick<ImageProps, "src" | "srcSet" | "sizes" | "onLoadStart" | "onLoadComplete" | "onLoadError" | "alt" | "loadingMode"> & {
-    /**
-     * The known aspect ratio of the image, expressed by width / height. If
-     * unprovided, it will be inferred after loading the image.
-     */
-    aspectRatio?: number;
-    /**
-     * Content to render in the full-sized viewport (same size as the cover
-     * image).
-     */
-    renderViewportContent?: () => JSX.Element;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/components/CoverImage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CoverImage.js","sourceRoot":"/","sources":["components/CoverImage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiH;AACjH,+BAA4B;AAC5B,4CAA0C;AAC1C,kCAA8C;AAC9C,iCAAgD;AAgBnC,QAAA,UAAU,GAAG,IAAA,kBAAU,EAAkC,UAAC,EActE,EAAE,GAAG;;IAbJ,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,GAAG,SAAA,EACH,mBAAsC,EAAzB,mBAAmB,mBAAG,GAAG,KAAA,EACtC,WAAW,iBAAA,EACX,qBAAqB,2BAAA,EACrB,KAAK,WAAA,EACL,GAAG,SAAA,EACH,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,WAAW,iBAAA,EACR,KAAK,cAb6D,6JActE,CADS;IAER,IAAM,gBAAgB,GAAG,UAAC,IAAW;QACnC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAC5D,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAC7C,IAAM,OAAO,GAAG,MAAA,GAAgC,mCAAI,QAAQ,CAAA;IACtD,IAAA,KAAA,OAA0C,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAtD,gBAAgB,QAAA,EAAE,mBAAmB,QAAiB,CAAA;IAC7D,IAAM,WAAW,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,CAAA;IACvF,IAAM,QAAQ,GAAG,IAAA,iBAAO,EAAC,OAAO,CAAC,CAAA;IACjC,IAAM,eAAe,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAA;IACxD,IAAM,SAAS,GAAG,IAAI,YAAI,CAAC;QACzB,eAAe,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC;YACzD,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,GAAG,WAAW,CAAC;QACrG,eAAe,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,WAAW,CAAC;YAClG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC;KAC5D,CAAC,CAAA;IAEF,OAAO,CACL,4CAAS,KAAK,IAAE,GAAG,EAAE,OAAO,oBAAiB,aAAa,EAAC,KAAK,EAAE,IAAA,cAAM,EAAC,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,aAChG,uBAAC,aAAK,IACJ,GAAG,EAAE,GAAG,gBACG,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,IAAA,cAAM,EAAC,YAAY,CAAC,QAAQ,EAAE;oBACnC,KAAK,EAAE,UAAG,SAAS,CAAC,KAAK,OAAI;oBAC7B,MAAM,EAAE,UAAG,SAAS,CAAC,MAAM,OAAI;iBAChC,CAAC,EACF,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,UAAA,IAAI,IAAI,OAAA,gBAAgB,CAAC,IAAI,CAAC,EAAtB,CAAsB,GAC5C,EACD,qBAAqB,IAAI,CACxB,8CACa,UAAU,EACrB,KAAK,EAAE,IAAA,cAAM,EAAC,YAAY,CAAC,QAAQ,EAAE;oBACnC,MAAM,EAAE,UAAG,SAAS,CAAC,MAAM,OAAI;oBAC/B,aAAa,EAAE,MAAM;oBACrB,KAAK,EAAE,UAAG,SAAS,CAAC,KAAK,OAAI;iBAC9B,CAAC,YAED,qBAAqB,EAAE,GACpB,CACP,EACA,QAAQ,KACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,kBAAU,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAE1F,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;KACnB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,GAAG;QACb,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,SAAS,EAAE,uBAAuB;KACnC;IACD,eAAe,EAAE;QACf,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA","sourcesContent":["import { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren, type RefObject } from 'react'\nimport { Size } from 'spase'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, styles } from '../utils'\nimport { Image, type ImageProps } from './Image'\n\nexport type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<ImageProps, 'alt' | 'loadingMode' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart' | 'onLoadComplete' | 'onLoadError'> & PropsWithChildren<{\n  /**\n   * The known aspect ratio of the image, expressed by width / height. If\n   * unprovided, it will be inferred after loading the image.\n   */\n  aspectRatio?: number\n\n  /**\n   * Content to render in the full-sized viewport (same size as the cover\n   * image).\n   */\n  renderViewportContent?: () => JSX.Element\n}>\n\nexport const CoverImage = forwardRef<HTMLDivElement, CoverImageProps>(({\n  children,\n  style,\n  alt,\n  aspectRatio: externalAspectRatio = NaN,\n  loadingMode,\n  renderViewportContent,\n  sizes,\n  src,\n  srcSet,\n  onLoadStart,\n  onLoadComplete,\n  onLoadError,\n  ...props\n}, ref) => {\n  const handleSizeChange = (size?: Size) => {\n    setLocalAspectRatio(size ? size.width / size.height : NaN)\n  }\n\n  const localRef = useRef<HTMLDivElement>(null)\n  const rootRef = ref as RefObject<HTMLDivElement> ?? localRef\n  const [localAspectRatio, setLocalAspectRatio] = useState(NaN)\n  const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio\n  const rootRect = useRect(rootRef)\n  const rootAspectRatio = rootRect.width / rootRect.height\n  const imageSize = new Size([\n    rootAspectRatio > 1\n      ? Math.max(rootRect.width, rootRect.height * aspectRatio)\n      : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),\n    rootAspectRatio > 1\n      ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)\n      : Math.max(rootRect.height, rootRect.width / aspectRatio),\n  ])\n\n  return (\n    <div {...props} ref={rootRef} data-component='cover-image' style={styles(style, FIXED_STYLES.root)}>\n      <Image\n        alt={alt}\n        data-child='image'\n        sizes={sizes}\n        src={src}\n        srcSet={srcSet}\n        style={styles(FIXED_STYLES.viewport, {\n          width: `${imageSize.width}px`,\n          height: `${imageSize.height}px`,\n        })}\n        onLoadComplete={onLoadComplete}\n        onLoadError={onLoadError}\n        onLoadStart={onLoadStart}\n        onSizeChange={size => handleSizeChange(size)}\n      />\n      {renderViewportContent && (\n        <div\n          data-child='viewport'\n          style={styles(FIXED_STYLES.viewport, {\n            height: `${imageSize.height}px`,\n            pointerEvents: 'none',\n            width: `${imageSize.width}px`,\n          })}\n        >\n          {renderViewportContent()}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(CoverImage, 'displayName', { value: 'CoverImage', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    overflow: 'hidden',\n  },\n  viewport: {\n    fontSize: '0',\n    left: '50%',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translate(-50%, -50%)',\n  },\n  viewportContent: {\n    height: '100%',\n    left: '0',\n    position: 'absolute',\n    top: '0',\n    width: '100%',\n  },\n})\n"]}

package/components/CoverVideo.d.ts

@@ -1,28 +0,0 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-import { type VideoProps } from './Video';
-export type CoverVideoProps = HTMLAttributes<HTMLDivElement> & Pick<VideoProps, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'playsInline' | 'posterSrc' | 'src' | 'onPause' | 'onPlay' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onSizeChange'> & PropsWithChildren<{
-    /**
-     * The known aspect ratio of the video, expressed by width / height. If
-     * unprovided, it will be inferred after loading the video.
-     */
-    aspectRatio?: number;
-    /**
-     * Content to render in the full-sized viewport (same size as the cover
-     * video).
-     */
-    renderViewportContent?: () => JSX.Element;
-}>;
-export declare const CoverVideo: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & Pick<VideoProps, "src" | "onCanPlay" | "onPause" | "onPlay" | "onSizeChange" | "autoPlay" | "playsInline" | "autoLoop" | "hasControls" | "isMuted" | "posterSrc" | "onEnd" | "onFullscreenChange" | "onLoadMetadata" | "onLoadMetadataComplete" | "onLoadMetadataError"> & {
-    /**
-     * The known aspect ratio of the video, expressed by width / height. If
-     * unprovided, it will be inferred after loading the video.
-     */
-    aspectRatio?: number;
-    /**
-     * Content to render in the full-sized viewport (same size as the cover
-     * video).
-     */
-    renderViewportContent?: () => JSX.Element;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/components/CoverVideo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CoverVideo.js","sourceRoot":"/","sources":["components/CoverVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren, type RefObject } from 'react'\nimport { Size } from 'spase'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, styles } from '../utils'\nimport { Video, type VideoProps } from './Video'\n\nexport type CoverVideoProps = HTMLAttributes<HTMLDivElement> & Pick<VideoProps, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'playsInline' | 'posterSrc' | 'src' | 'onPause' | 'onPlay' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onSizeChange'> & PropsWithChildren<{\n  /**\n   * The known aspect ratio of the video, expressed by width / height. If\n   * unprovided, it will be inferred after loading the video.\n   */\n  aspectRatio?: number\n\n  /**\n   * Content to render in the full-sized viewport (same size as the cover\n   * video).\n   */\n  renderViewportContent?: () => JSX.Element\n}>\n\nexport const CoverVideo = forwardRef<HTMLDivElement, CoverVideoProps>(({\n  className,\n  children,\n  style,\n  aspectRatio: externalAspectRatio = NaN,\n  autoLoop,\n  autoPlay,\n  hasControls,\n  isMuted,\n  playsInline,\n  posterSrc,\n  renderViewportContent,\n  src,\n  onCanPlay,\n  onEnd,\n  onFullscreenChange,\n  onLoadMetadata,\n  onLoadMetadataComplete,\n  onLoadMetadataError,\n  onPause,\n  onPlay,\n  onSizeChange,\n  ...props\n}, ref) => {\n  const handleSizeChange = (size?: Size) => {\n    setLocalAspectRatio(size ? size.width / size.height : NaN)\n    onSizeChange?.(size)\n  }\n\n  const localRef = useRef<HTMLDivElement>(null)\n  const rootRef = ref as RefObject<HTMLDivElement> ?? localRef\n  const [localAspectRatio, setLocalAspectRatio] = useState(NaN)\n  const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio\n  const rootRect = useRect(rootRef)\n  const rootAspectRatio = rootRect.width / rootRect.height\n  const videoSize = new Size([\n    rootAspectRatio > 1\n      ? Math.max(rootRect.width, rootRect.height * aspectRatio)\n      : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),\n    rootAspectRatio > 1\n      ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)\n      : Math.max(rootRect.height, rootRect.width / aspectRatio),\n  ])\n\n  return (\n    <div {...props} ref={rootRef} className={className} data-component='cover-video' style={styles(style, FIXED_STYLES.root)}>\n      <Video\n        autoLoop={autoLoop}\n        autoPlay={autoPlay}\n        data-child='video'\n        hasControls={hasControls}\n        isMuted={isMuted}\n        playsInline={playsInline}\n        posterSrc={posterSrc}\n        src={src}\n        style={styles(FIXED_STYLES.viewport, {\n          width: `${videoSize.width}px`,\n          height: `${videoSize.height}px`,\n        })}\n        onCanPlay={onCanPlay}\n        onEnd={onEnd}\n        onFullscreenChange={onFullscreenChange}\n        onLoadMetadata={onLoadMetadata}\n        onLoadMetadataComplete={onLoadMetadataComplete}\n        onLoadMetadataError={onLoadMetadataError}\n        onPause={onPause}\n        onPlay={onPlay}\n        onSizeChange={size => handleSizeChange(size)}\n      />\n      {renderViewportContent && (\n        <div\n          data-child='viewport'\n          style={styles(FIXED_STYLES.viewport, {\n            height: `${videoSize.height}px`,\n            pointerEvents: 'none',\n            width: `${videoSize.width}px`,\n          })}\n        >\n          {renderViewportContent()}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(CoverVideo, 'displayName', { value: 'CoverVideo', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    overflow: 'hidden',\n  },\n  viewport: {\n    fontSize: '0',\n    left: '50%',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translate(-50%, -50%)',\n  },\n  viewportContent: {\n    height: '100%',\n    left: '0',\n    position: 'absolute',\n    top: '0',\n    width: '100%',\n  },\n})\n"]}

package/components/DebugConsole.d.ts

@@ -1,15 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
-    align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
-    margin?: number;
-    maxEntries?: number;
-    message?: string;
-    title?: string;
-};
-export declare const DebugConsole: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    align?: "tl" | "tc" | "tr" | "cl" | "cc" | "cr" | "bl" | "bc" | "br";
-    margin?: number;
-    maxEntries?: number;
-    message?: string;
-    title?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/components/DebugConsole.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["components/DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\nexport type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {\n  align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  margin?: number\n  maxEntries?: number\n  message?: string\n  title?: string\n}\n\nexport const DebugConsole = forwardRef<HTMLDivElement, DebugConsoleProps>(({\n  align = 'br',\n  margin = 0,\n  maxEntries = -1,\n  message,\n  style = {},\n  title,\n  ...props\n}, ref) => {\n  const [messages, setMessages] = useState<string[]>([])\n  const messagesRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (message === undefined) {\n      setMessages([])\n    }\n    else {\n      const numMessages = messages.length\n\n      setMessages([\n        ...maxEntries < 0\n          ? messages\n          : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages),\n        message,\n      ])\n    }\n  }, [message])\n\n  useEffect(() => {\n    messagesRef.current?.scrollTo(0, messagesRef.current?.scrollHeight)\n  }, [messages])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='debug-console'\n      style={styles(style, FIXED_STYLES.root, getStyleByAlignment(align, margin))}\n    >\n      <div data-child='header' style={FIXED_STYLES.title}>{title ?? 'Untitled'}</div>\n      <div ref={messagesRef} data-child='messages' style={FIXED_STYLES.messages}>\n        <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(DebugConsole, 'displayName', { value: 'DebugConsole', writable: false })\n\nfunction getStyleByAlignment(align: DebugConsoleProps['align'], margin: number): CSSProperties {\n  switch (align) {\n    case 'tl': return { top: `${margin}px`, left: `${margin}px` }\n    case 'tc': return { top: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${margin}px`, right: `${margin}px` }\n    case 'cl': return { top: 0, left: `${margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${margin}px`, left: `${margin}px` }\n    case 'bc': return { bottom: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${margin}px`, right: `${margin}px` }\n  }\n}\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    background: '#000',\n    fontFamily: 'monospace',\n    position: 'fixed',\n    width: '300px',\n  },\n  title: {\n    background: '#fff',\n    boxSizing: 'border-box',\n    color: '#000',\n    fontSize: '14px',\n    fontWeight: '700',\n    height: '30px',\n    lineHeight: '30px',\n    overflow: 'hidden',\n    padding: '0 10px',\n    textOverflow: 'ellipsis',\n    textTransform: 'uppercase',\n    whiteSpace: 'nowrap',\n    width: '100%',\n  },\n  messages: {\n    boxSizing: 'border-box',\n    color: '#fff',\n    fontSize: '12px',\n    lineHeight: '150%',\n    maxHeight: '200px',\n    minHeight: '100px',\n    overflowX: 'hidden',\n    overflowY: 'scroll',\n    padding: '10px',\n    WebkitOverflowScrolling: 'touch',\n    width: '100%',\n  },\n})\n"]}

package/components/Dial.d.ts

@@ -1,79 +0,0 @@
-import { type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react';
-export type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
-    /**
-     * Current angle reading of the compass, between 0.0 - 360.0 degrees,
-     * inclusive.
-     */
-    angle?: number;
-    /**
-     * Length of the knob along the track expressed in degrees, between 0.0 and
-     * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.
-     *
-     * @example Suppose the compass were to be used to control a photosphere of an
-     *          image that is 1000 x 500, and the window size is 500 x 500, that
-     *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.
-     */
-    knobLength?: number;
-    /**
-     * Radius of the compass.
-     */
-    radius?: number;
-    /**
-     * The thickness of the knob, which is equivalent to the `stroke-width` of the
-     * `<path>` element.
-     */
-    knobThickness?: number;
-    /**
-     * The thickness of the circular track, which is equivalent to the
-     * `stroke-width` of the `<circle>` element.
-     */
-    trackThickness?: number;
-    /**
-     * Specifies if the component should use default styles.
-     */
-    usesDefaultStyles?: boolean;
-}>;
-/**
- * A circular dial with a knob and a track.
- *
- * @exports DialKnob
- * @exports DialTrack
- */
-export declare const Dial: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Current angle reading of the compass, between 0.0 - 360.0 degrees,
-     * inclusive.
-     */
-    angle?: number;
-    /**
-     * Length of the knob along the track expressed in degrees, between 0.0 and
-     * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.
-     *
-     * @example Suppose the compass were to be used to control a photosphere of an
-     *          image that is 1000 x 500, and the window size is 500 x 500, that
-     *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.
-     */
-    knobLength?: number;
-    /**
-     * Radius of the compass.
-     */
-    radius?: number;
-    /**
-     * The thickness of the knob, which is equivalent to the `stroke-width` of the
-     * `<path>` element.
-     */
-    knobThickness?: number;
-    /**
-     * The thickness of the circular track, which is equivalent to the
-     * `stroke-width` of the `<circle>` element.
-     */
-    trackThickness?: number;
-    /**
-     * Specifies if the component should use default styles.
-     */
-    usesDefaultStyles?: boolean;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialTrack: ({ ...props }: SVGAttributes<SVGCircleElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const DialKnob: ({ ...props }: SVGAttributes<SVGPathElement>) => import("react/jsx-runtime").JSX.Element;

package/components/Dial.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["components/Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react'\nimport { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\nexport type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees,\n   * inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and\n   * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an\n   *          image that is 1000 x 500, and the window size is 500 x 500, that\n   *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the\n   * `<path>` element.\n   */\n  knobThickness?: number\n\n  /**\n   * The thickness of the circular track, which is equivalent to the\n   * `stroke-width` of the `<circle>` element.\n   */\n  trackThickness?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport const Dial = forwardRef<HTMLDivElement, DialProps>(({\n  children,\n  style,\n  angle = 0,\n  knobLength = 30,\n  knobThickness = 10,\n  radius = 50,\n  trackThickness = 2,\n  usesDefaultStyles = false,\n  ...props\n}, ref) => {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  const components = asComponentDict(children, {\n    track: DialTrack,\n    knob: DialKnob,\n  })\n\n  const fixedStyles = getFixedStyles({ angle, diameter })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined\n\n  return (\n    <div {...props} ref={ref} data-component='dial' style={styles(style, fixedStyles.root)}>\n      <div style={fixedStyles.trackContainer}>\n        <svg height={diameter} style={fixedStyles.svgContainer} viewBox={`0 0 ${diameter} ${diameter}`} width={diameter}>\n          {cloneStyledElement(components.track ?? <DialTrack style={defaultStyles?.track}/>, {\n            cx: radius,\n            cy: radius,\n            r: radius - trackThickness / 2,\n            strokeWidth: trackThickness,\n          })}\n        </svg>\n      </div>\n      <div style={styles(fixedStyles.knobContainer)}>\n        <svg style={fixedStyles.svgContainer} viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          {cloneStyledElement(components.knob ?? <DialKnob style={defaultStyles?.knob}/>, {\n            strokeWidth: knobThickness,\n            d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),\n          })}\n        </svg>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(Dial, 'displayName', { value: 'Dial', writable: false })\n\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props} data-child='track'/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props} data-child='knob'/>\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + radius * Math.cos(angleInRadians),\n    y: centerY + radius * Math.sin(angleInRadians),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M',\n    start.x,\n    start.y,\n    'A',\n    radius,\n    radius,\n    0,\n    largeArcFlag,\n    0,\n    end.x,\n    end.y,\n  ]\n\n  return d.join(' ')\n}\n\nfunction getFixedStyles({ diameter = 0, angle = 0 }) {\n  return asStyleDict({\n    root: {\n      height: `${diameter}px`,\n      width: `${diameter}px`,\n    },\n    knobContainer: {\n      backgroundPosition: 'center',\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: '100%',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n      transform: `rotate(${(angle + 360) % 360}deg)`,\n    },\n    trackContainer: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n    },\n    svgContainer: {\n      overflow: 'visible',\n      position: 'absolute',\n      right: '0',\n      top: '0',\n    },\n  })\n}\n\nfunction getDefaultStyles() {\n  return asStyleDict({\n    knob: {\n      stroke: '#fff',\n    },\n    track: {\n      strokeDasharray: '4',\n      stroke: '#fff',\n    },\n  })\n}\n"]}

package/components/Dropdown.d.ts

@@ -1,109 +0,0 @@
-import { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
-import { type CollectionItemProps, type CollectionProps, type CollectionSelection } from './Collection';
-/**
- * Base extendable type describing the data provided to each item in
- * {@link Dropdown}.
- */
-export type DropdownItemData = {
-    label?: string;
-};
-/**
- * Type describing the current item selection of {@link Dropdown}, composed of
- * an array of indices of items that are selected. If the selection mode of the
- * {@link Dropdown} is `single`, only one index is expected in this array.
- */
-export type DropdownSelection = CollectionSelection;
-/**
- * Type describing the props of `ToggleComponent` provided to {@link Dropdown}.
- */
-export type DropdownToggleProps = HTMLAttributes<HTMLElement> & {
-    /**
-     * Handler invoked to dispatch a custom event.
-     *
-     * @param name User-defined name of the custom event.
-     * @param info User-defined info of the custom event.
-     */
-    onCustomEvent?: (name: string, info?: any) => void;
-};
-/**
- * Type describing the props of `ItemComponent` provided to {@link Dropdown}.
- */
-export type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = CollectionItemProps<T>;
-/**
- * Type describing the props of {@link Dropdown}.
- */
-export type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & CollectionProps<T> & PropsWithChildren<{
-    /**
-     * SVG markup to use as the collapse icon when a toggle button is
-     * automatically generated (when `ToggleComponent` is absent).
-     */
-    collapseIconSvg?: string;
-    /**
-     * Specifies if the internal collection collapses when an item is selected.
-     * This only works if `selectionMode` is `single`.
-     */
-    collapsesOnSelect?: boolean;
-    /**
-     * Padding (in pixels) between the toggle button and the internal collection.
-     */
-    collectionPadding?: number;
-    /**
-     * The label to appear on the toggle button.
-     *
-     * @param selection The current selection.
-     */
-    label?: (selection: DropdownSelection) => string;
-    /**
-     * SVG markup to use as the expand icon when a toggle button is automatically
-     * generated (when {@link ToggleComponent} is absent).
-     */
-    expandIconSvg?: string;
-    /**
-     * Specifies if the internal collection is collapsed.
-     */
-    isCollapsed?: boolean;
-    /**
-     * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
-     */
-    isInverted?: boolean;
-    /**
-     * Maximum number of items that are viside when the component expands. When a
-     * value greater than or equal to 0 is specified, only that number of items
-     * will be visible at a time and a scrollbar will appear to enable scrolling
-     * to remaining items. Any value less than 0 indicates that all items will be
-     * visible when the component expands.
-     */
-    maxVisibleItems?: number;
-    /**
-     * Specifies if the component should use default styles.
-     */
-    usesDefaultStyles?: boolean;
-    /**
-     * Handler invoked when the component is collapsed.
-     */
-    onCollapse?: () => void;
-    /**
-     * Handler invoked when the component is expanded.
-     */
-    onExpand?: () => void;
-    /**
-     * Handler invoked when the toggle dispatches a custom event.
-     *
-     * @param eventName User-defined name of the dispatched custom event.
-     * @param eventInfo Optional user-defined info of the dispatched custom event.
-     */
-    onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void;
-    /**
-     * React component type to be used for generating the toggle button inside the
-     * component. When absent, one will be generated automatically.
-     */
-    ToggleComponent?: ComponentType<DropdownToggleProps>;
-}>;
-/**
- * A dropdown component that is invertible (i.e. can "dropup" instead) and
- * supports both horizontal and vertical orientations. Provide `items` and
- * `ItemComponent` props to populate.
- */
-export declare const Dropdown: <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReactElement;

package/components/Dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["components/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, cloneStyledElement, styles } from '../utils'\nimport { Collection, type CollectionItemProps, type CollectionProps, type CollectionSelection } from './Collection'\nimport { FlatSVG } from './FlatSVG'\n\n/**\n * Base extendable type describing the data provided to each item in\n * {@link Dropdown}.\n */\nexport type DropdownItemData = {\n  label?: string\n}\n\n/**\n * Type describing the current item selection of {@link Dropdown}, composed of\n * an array of indices of items that are selected. If the selection mode of the\n * {@link Dropdown} is `single`, only one index is expected in this array.\n */\nexport type DropdownSelection = CollectionSelection\n\n/**\n * Type describing the props of `ToggleComponent` provided to {@link Dropdown}.\n */\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info User-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\n/**\n * Type describing the props of `ItemComponent` provided to {@link Dropdown}.\n */\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = CollectionItemProps<T>\n\n/**\n * Type describing the props of {@link Dropdown}.\n */\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & CollectionProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to use as the collapse icon when a toggle button is\n   * automatically generated (when `ToggleComponent` is absent).\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the internal collection collapses when an item is selected.\n   * This only works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * Padding (in pixels) between the toggle button and the internal collection.\n   */\n  collectionPadding?: number\n\n  /**\n   * The label to appear on the toggle button.\n   *\n   * @param selection The current selection.\n   */\n  label?: (selection: DropdownSelection) => string\n\n  /**\n   * SVG markup to use as the expand icon when a toggle button is automatically\n   * generated (when {@link ToggleComponent} is absent).\n   */\n  expandIconSvg?: string\n\n  /**\n   * Specifies if the internal collection is collapsed.\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time and a scrollbar will appear to enable scrolling\n   * to remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when the component is collapsed.\n   */\n  onCollapse?: () => void\n\n  /**\n   * Handler invoked when the component is expanded.\n   */\n  onExpand?: () => void\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName User-defined name of the dispatched custom event.\n   * @param eventInfo Optional user-defined info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void\n\n  /**\n   * React component type to be used for generating the toggle button inside the\n   * component. When absent, one will be generated automatically.\n   */\n  ToggleComponent?: ComponentType<DropdownToggleProps>\n}>\n\n/**\n * A dropdown component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide `items` and\n * `ItemComponent` props to populate.\n */\nexport const Dropdown = forwardRef(({\n  children,\n  className,\n  style,\n  collapseIconSvg,\n  collapsesOnSelect = true,\n  collectionPadding = 0,\n  expandIconSvg,\n  isCollapsed = true,\n  isInverted = false,\n  label,\n  layout,\n  isSelectionTogglable = false,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  items,\n  maxVisibleItems = -1,\n  numSegments,\n  orientation = 'vertical',\n  selection: externalSelection = [],\n  selectionMode = 'single',\n  usesDefaultStyles = false,\n  onActivateAt,\n  onCollapse,\n  onDeselectAt,\n  onExpand,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\n  ItemComponent,\n  ToggleComponent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (isNaN(index)) return true\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizedSelection = (selection: DropdownSelection) => sortIndices(selection).filter(t => !isIndexOutOfRange(t))\n\n  const expand = () => {\n    if (!isCollapsed) return\n\n    onExpand?.()\n  }\n\n  const collapse = () => {\n    if (isCollapsed) return\n\n    onCollapse?.()\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\n  const selectAtHandler = (index: number) => {\n    onSelectAt?.(index)\n\n    if (selectionMode === 'single' && collapsesOnSelect) collapse()\n  }\n\n  const selectionChangeHandler = (value: DropdownSelection) => {\n    onSelectionChange?.(value)\n  }\n\n  const selection = sanitizedSelection(externalSelection)\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const bodyRect = useRect(bodyRef)\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? bodyRect.height : bodyRect.width)\n  const numItems = items.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1)\n\n  const fixedStyles = getFixedStyles({ isCollapsed, isInverted, maxVisibleItems, menuLength, numItems, orientation })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined\n\n  const ExpandIcon = expandIconSvg ? <FlatSVG style={defaultStyles?.expandIcon} svg={expandIconSvg}/> : <></>\n  const CollapseIcon = collapseIconSvg ? <FlatSVG style={defaultStyles?.collapseIcon} svg={collapseIconSvg}/> : ExpandIcon\n\n  useEffect(() => {\n    const clickOutsideHandler = (event: MouseEvent) => {\n      if (isCollapsed) return\n      if (!(event.target instanceof Node)) return\n\n      let isOutside = true\n      let node = event.target\n\n      while (node) {\n        if (node === bodyRef.current) {\n          isOutside = false\n          break\n        }\n\n        if (!node.parentNode) break\n\n        node = node.parentNode\n      }\n\n      if (!isOutside) return\n\n      collapse()\n    }\n\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx(className, { collapsed: isCollapsed, expanded: !isCollapsed })}\n      data-component='dropdown'\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            data-child='toggle'\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            data-child='toggle'\n            style={styles(fixedStyles.toggle, defaultStyles?.toggle)}\n            onClick={() => toggle()}\n          >\n            <span dangerouslySetInnerHTML={{ __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') }} style={fixedStyles.toggleLabel}/>\n            {cloneStyledElement(isCollapsed ? ExpandIcon : CollapseIcon)}\n          </button>\n        )}\n        <Collection\n          data-child='collection'\n          isSelectionTogglable={isSelectionTogglable}\n          ItemComponent={ItemComponent}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          items={items}\n          layout={layout}\n          numSegments={numSegments}\n          orientation={orientation}\n          selection={selection}\n          selectionMode={selectionMode}\n          style={styles(fixedStyles.collection, defaultStyles?.collection)}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Dropdown, 'displayName', { value: 'Dropdown', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ isCollapsed = true, isInverted = false, collectionPadding = 0, maxVisibleItems = 0, menuLength = NaN, numItems = 0, orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      height: '100%',\n      left: '0',\n      margin: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n    },\n    collection: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${collectionPadding}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${collectionPadding}px`,\n        },\n      } : {\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${collectionPadding}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${collectionPadding}px`,\n        },\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ orientation = 'vertical' }) {\n  return asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collapseIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collection: {\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n      } : {\n        transition: 'width 100ms ease-out',\n      },\n    },\n  })\n}\n"]}

package/components/FlatSVG.d.ts

@@ -1,72 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The SVG string markup, i.e. "<svg>...</svg>".
-     */
-    svg: string;
-    /**
-     * Specifies whether the 'class' should be removed in the SVG root node and
-     * all of its child nodes.
-     */
-    shouldStripClasses?: boolean;
-    /**
-     * Specifies whether extraneous attributes should be removed from the SVG root
-     * node. The `whitelistedAttributes` prop defines what attributes should be
-     * kept.
-     */
-    shouldStripExtraneousAttributes?: boolean;
-    /**
-     * Specifies whether the 'id' attribute should be removed in the SVG root node
-     * and all of its child nodes.
-     */
-    shouldStripIds?: boolean;
-    /**
-     * Specifies whether the 'style' atribute and any <style> nodes should be
-     * removed in the SVG root node and all of its child nodes.
-     */
-    shouldStripStyles?: boolean;
-    /**
-     * Specifies attribute names to exclude from being stripped if
-     * `shouldStripExtraneousAttributes` is enabled. By default, only `viewBox` is
-     * whitelisted.
-     */
-    whitelistedAttributes?: string[];
-};
-/**
- * A component whose root element wraps an SVG markup. When wrapping the SVG, it
- * will attempt to sanitize the markup (i.e. stripping useless attributes)
- * according to the props specified.
- */
-export declare const FlatSVG: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The SVG string markup, i.e. "<svg>...</svg>".
-     */
-    svg: string;
-    /**
-     * Specifies whether the 'class' should be removed in the SVG root node and
-     * all of its child nodes.
-     */
-    shouldStripClasses?: boolean;
-    /**
-     * Specifies whether extraneous attributes should be removed from the SVG root
-     * node. The `whitelistedAttributes` prop defines what attributes should be
-     * kept.
-     */
-    shouldStripExtraneousAttributes?: boolean;
-    /**
-     * Specifies whether the 'id' attribute should be removed in the SVG root node
-     * and all of its child nodes.
-     */
-    shouldStripIds?: boolean;
-    /**
-     * Specifies whether the 'style' atribute and any <style> nodes should be
-     * removed in the SVG root node and all of its child nodes.
-     */
-    shouldStripStyles?: boolean;
-    /**
-     * Specifies attribute names to exclude from being stripped if
-     * `shouldStripExtraneousAttributes` is enabled. By default, only `viewBox` is
-     * whitelisted.
-     */
-    whitelistedAttributes?: string[];
-} & import("react").RefAttributes<HTMLDivElement>>;

package/components/FlatSVG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["components/FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,+BAAuD;AAyCvD;;;;GAIG;AACU,QAAA,OAAO,GAAG,IAAA,kBAAU,EAA+B,UAAC,EAQhE,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,0BAAyB,EAAzB,kBAAkB,mBAAG,IAAI,KAAA,EACzB,uCAAsC,EAAtC,+BAA+B,mBAAG,IAAI,KAAA,EACtC,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAPuD,gIAQhE,CADS;IAER,IAAM,mBAAmB,GAAG,IAAI,CAAA;IAEhC,IAAM,eAAe,GAAG;QACtB,IAAM,MAAM,GAAG,IAAI,2BAAS,CAAC;YAC3B,mBAAmB,qBAAA;YACnB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,IAAI;YACvB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,UAAC,OAAO,EAAE,KAAK,EAAE,KAAK;;gBAC/B,IAAI,iBAAiB,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAE1D,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE,CAAC;wBAA9B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,cAAc,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACnG,IAAI,kBAAkB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC1G,IAAI,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;oBAC3G,CAAC;;;;;;;;;gBAED,OAAO,OAAO,CAAA;YAChB,CAAC;SACF,CAAC,CAAA;QAEF,IAAM,OAAO,GAAG,IAAI,4BAAU,CAAC;YAC7B,mBAAmB,qBAAA;YACnB,MAAM,EAAE,IAAI;YACZ,gBAAgB,EAAE,KAAK;SACxB,CAAC,CAAA;QAEF,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CACL,8CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,oBACvC,UAAU,IACzB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,eAAO,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport { forwardRef, type HTMLAttributes } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  svg: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and\n   * all of its child nodes.\n   */\n  shouldStripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root\n   * node. The `whitelistedAttributes` prop defines what attributes should be\n   * kept.\n   */\n  shouldStripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node\n   * and all of its child nodes.\n   */\n  shouldStripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be\n   * removed in the SVG root node and all of its child nodes.\n   */\n  shouldStripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `shouldStripExtraneousAttributes` is enabled. By default, only `viewBox` is\n   * whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport const FlatSVG = forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  shouldStripClasses = true,\n  shouldStripExtraneousAttributes = true,\n  shouldStripIds = true,\n  shouldStripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  const attributeNamePrefix = '@_'\n\n  const sanitizedMarkup = () => {\n    const parser = new XMLParser({\n      attributeNamePrefix,\n      ignoreAttributes: false,\n      ignoreDeclaration: true,\n      ignorePiTags: true,\n      removeNSPrefix: true,\n      trimValues: true,\n      updateTag: (tagName, jPath, attrs) => {\n        if (shouldStripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (shouldStripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (shouldStripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (shouldStripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`) delete attrs[attrName]\n        }\n\n        return tagName\n      },\n    })\n\n    const builder = new XMLBuilder({\n      attributeNamePrefix,\n      format: true,\n      ignoreAttributes: false,\n    })\n\n    const xml = parser.parse(svg)\n\n    return builder.build(xml)\n  }\n\n  return (\n    <figure\n      {...props}\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      data-component='flat-svg'\n    />\n  )\n})\n\nObject.defineProperty(FlatSVG, 'displayName', { value: 'FlatSVG', writable: false })\n"]}