etudes 2.5.0 → 2.6.0

package/lib/Accordion.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
-import { ListItemProps } from './List';
+import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
+import { type ListItemProps } from './List';
 type Orientation = 'horizontal' | 'vertical';
 export type AccordionItemProps<T> = ListItemProps<T>;
 export type SectionData<T> = {

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref, useEffect, useState } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type SectionData<T> = {\n  label: string\n  items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Data provided to each section.\n   */\n  data: SectionData<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultExpandedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section 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 scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  defaultExpandedSectionIndex = -1,\n  expandIconSvg,\n  isTogglable = true,\n  itemComponentType,\n  itemLength = 50,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  onItemIndexChange,\n  onSectionIndexChange,\n  ...props\n}, ref) => {\n  const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n  const toggleSectionAt = (index: number) => {\n    if (isTogglable && isSectionSelectedAt(index)) {\n      setExpandedSectionIndex(-1)\n    }\n    else {\n      setExpandedSectionIndex(index)\n    }\n  }\n\n  const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n  const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n  const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n  useEffect(() => {\n    onSectionIndexChange?.(expandedSectionIndex)\n  }, [expandedSectionIndex])\n\n  useEffect(() => {\n    onItemIndexChange?.(selectedItemIndex)\n  }, [selectedItemIndex])\n\n  const components = asComponentDict(children, {\n    header: AccordionHeader,\n    expandIcon: AccordionExpandIcon,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n    header: classNames(orientation),\n    expandIcon: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        height: 'auto',\n      } : {\n        flexDirection: 'row',\n        width: 'auto',\n      },\n    },\n    section: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      margin: '0',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        width: '100%',\n      } : {\n        flexDirection: 'row',\n        height: '100%',\n      },\n    },\n    header: {\n      borderWidth: `${borderThickness}px`,\n      margin: '0',\n      outline: 'none',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n    headerLabel: {\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      transition: 'inherit',\n    },\n    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    list: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        transitionProperty: 'height, margin',\n        top: '100%',\n      } : {\n        height: '100%',\n        transitionProperty: 'width, margin',\n        left: '100%',\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    header: {\n      alignItems: 'center',\n      background: '#fff',\n      borderStyle: 'solid',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: '0 10px',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform, opacity, background, color',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        height: '50px',\n      } : {\n        width: '50px',\n      },\n    },\n    expandIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <Each in={data}>\n        {(section, sectionIdx) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !isSectionSelectedAt(sectionIdx)\n\n          return (\n            <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n              marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            } : {\n              marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            })}>\n              {cloneStyledElement(components.header ?? <AccordionHeader style={defaultStyles.header}/>, {\n                className: classNames(fixedClassNames.header, {\n                  collapsed: isCollapsed,\n                  expanded: !isCollapsed,\n                }),\n                style: styles(fixedStyles.header),\n                onClick: () => toggleSectionAt(sectionIdx),\n              }, ...[\n                <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n                cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n                  className: classNames(fixedClassNames.expandIcon),\n                  style: styles(fixedStyles.expandIcon),\n                }),\n              ])}\n              <List\n                style={styles(fixedStyles.list, orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                })}\n                borderThickness={borderThickness}\n                data={section.items}\n                isSelectable={true}\n                isTogglable={isTogglable}\n                itemComponentType={itemComponentType}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                orientation={orientation}\n                selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n                onDeselectAt={() => {\n                  if (selectedSectionIndex !== sectionIdx) return\n                  setSelectedSectionIndex(-1)\n                  setSelectedItemIndex(-1)\n                }}\n                onSelectAt={itemIdx => {\n                  setSelectedSectionIndex(sectionIdx)\n                  setSelectedItemIndex(itemIdx)\n                }}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const AccordionExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type SectionData<T> = {\n  label: string\n  items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Data provided to each section.\n   */\n  data: SectionData<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultExpandedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section 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 scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  defaultExpandedSectionIndex = -1,\n  expandIconSvg,\n  isTogglable = true,\n  itemComponentType,\n  itemLength = 50,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  onItemIndexChange,\n  onSectionIndexChange,\n  ...props\n}, ref) => {\n  const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n  const toggleSectionAt = (index: number) => {\n    if (isTogglable && isSectionSelectedAt(index)) {\n      setExpandedSectionIndex(-1)\n    }\n    else {\n      setExpandedSectionIndex(index)\n    }\n  }\n\n  const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n  const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n  const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n  useEffect(() => {\n    onSectionIndexChange?.(expandedSectionIndex)\n  }, [expandedSectionIndex])\n\n  useEffect(() => {\n    onItemIndexChange?.(selectedItemIndex)\n  }, [selectedItemIndex])\n\n  const components = asComponentDict(children, {\n    header: AccordionHeader,\n    expandIcon: AccordionExpandIcon,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n    header: classNames(orientation),\n    expandIcon: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        height: 'auto',\n      } : {\n        flexDirection: 'row',\n        width: 'auto',\n      },\n    },\n    section: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      margin: '0',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        width: '100%',\n      } : {\n        flexDirection: 'row',\n        height: '100%',\n      },\n    },\n    header: {\n      borderWidth: `${borderThickness}px`,\n      margin: '0',\n      outline: 'none',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n    headerLabel: {\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      transition: 'inherit',\n    },\n    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    list: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        transitionProperty: 'height, margin',\n        top: '100%',\n      } : {\n        height: '100%',\n        transitionProperty: 'width, margin',\n        left: '100%',\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    header: {\n      alignItems: 'center',\n      background: '#fff',\n      borderStyle: 'solid',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: '0 10px',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform, opacity, background, color',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        height: '50px',\n      } : {\n        width: '50px',\n      },\n    },\n    expandIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <Each in={data}>\n        {(section, sectionIdx) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !isSectionSelectedAt(sectionIdx)\n\n          return (\n            <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n              marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            } : {\n              marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            })}>\n              {cloneStyledElement(components.header ?? <AccordionHeader style={defaultStyles.header}/>, {\n                className: classNames(fixedClassNames.header, {\n                  collapsed: isCollapsed,\n                  expanded: !isCollapsed,\n                }),\n                style: styles(fixedStyles.header),\n                onClick: () => toggleSectionAt(sectionIdx),\n              }, ...[\n                <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n                cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n                  className: classNames(fixedClassNames.expandIcon),\n                  style: styles(fixedStyles.expandIcon),\n                }),\n              ])}\n              <List\n                style={styles(fixedStyles.list, orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                })}\n                borderThickness={borderThickness}\n                data={section.items}\n                isSelectable={true}\n                isTogglable={isTogglable}\n                itemComponentType={itemComponentType}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                orientation={orientation}\n                selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n                onDeselectAt={() => {\n                  if (selectedSectionIndex !== sectionIdx) return\n                  setSelectedSectionIndex(-1)\n                  setSelectedItemIndex(-1)\n                }}\n                onSelectAt={itemIdx => {\n                  setSelectedSectionIndex(sectionIdx)\n                  setSelectedItemIndex(itemIdx)\n                }}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const AccordionExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/BurgerButton.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
     height?: number;
     isActive?: boolean;
@@ -14,7 +14,7 @@ export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChi
  * Three-striped burger button component that transforms into an "X" when
  * selected.
  *
- * @exports BurgerButtonBar - Component for each line on the burger button.
+ * @exports BurgerButtonBar Component for each line on the burger button.
  */
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
     height?: number | undefined;

package/lib/BurgerButton.js

@@ -77,7 +77,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
  * Three-striped burger button component that transforms into an "X" when
  * selected.
  *
- * @exports BurgerButtonBar - Component for each line on the burger button.
+ * @exports BurgerButtonBar Component for each line on the burger button.
  */
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, className = _a.className, style = _a.style, _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? 200 : _g, _h = _a.width, width = _h === void 0 ? 20 : _h, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["children", "className", "style", "height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "transitionDuration", "width", "onActivate", "onDeactivate"]);

package/lib/BurgerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAiG;AACjG,oDAA6B;AAC7B,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AAcnC;;;;;GAKG;AACH,kBAAe,IAAA,kBAAU,EAAuC,UAAC,EAchE,EAAE,GAAG;IAbJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,gBAAkC,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EAClC,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EACb,0BAAwB,EAAxB,kBAAkB,mBAAG,GAAG,KAAA,EACxB,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,UAAU,gBAAA,EACV,YAAY,kBAAA,EACT,KAAK,cAbuD,2KAchE,CADS;IAEF,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,IAAA,EAAnD,QAAQ,QAAA,EAAE,WAAW,QAA8B,CAAA;IAE1D,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,KAAK,gBAAgB,EAAE;YACjC,WAAW,CAAC,gBAAgB,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,EAAE;YACZ,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA;SACjB;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,GAAG,EAAE,uBAAe;KACrB,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC;YACf,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,GAAG,EAAE,IAAA,oBAAU,EAAC;YACd,MAAM,EAAE,QAAQ;SACjB,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,UAAG,MAAM,OAAI;YACrB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,UAAG,KAAK,OAAI;SACpB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;SACxC;QACD,MAAM,EAAE;YACN,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;SACT;QACD,MAAM,EAAE;YACN,KAAK,EAAE,GAAG;YACV,GAAG,EAAE,GAAG;SACT;QACD,GAAG,EAAE;YACH,MAAM,EAAE,UAAG,SAAS,OAAI;YACxB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,yBAAsB,CAAC,CAAC,CAAC,mCAAmC;YAClI,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;SAC7D;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,OAAI;YAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B;YACvF,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;SAC7D;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,SAAS,OAAI;YAC9B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,0BAAuB,CAAC,CAAC,CAAC,mCAAmC;YACnI,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;YAC5D,KAAK,EAAE,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAE;SACvF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,0BAAuB,CAAC,CAAC,CAAC,mCAAmC;YACnI,eAAe,EAAE,aAAa;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,OAAI;YAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B;YACvF,eAAe,EAAE,aAAa;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,SAAS,OAAI;YAC9B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,yBAAsB,CAAC,CAAC,CAAC,mCAAmC;YAClI,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;SACtD;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,GAAG,EAAE;YACH,UAAU,EAAE,MAAM;YAClB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,+CAA+C;YACnE,wBAAwB,EAAE,UAAU;SACrC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAtB,CAAsB;QAErC,8BAAC,gBAAM,IAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IACnC,UAAA,CAAC,IAAI,OAAA,CACJ,uCAAK,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,EAAG,WAAmB,CAAC,eAAQ,CAAC,CAAE,CAAC,CAAC;YACtE,8BAAC,gBAAM,IAAC,KAAK,EAAE,CAAC,IACb,UAAA,CAAC;;gBAAI,OAAA,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,GAAG,mCAAI,8BAAC,uBAAe,IAAC,KAAK,EAAE,aAAa,CAAC,GAAG,GAAG,EAAE;oBACvF,WAAW,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,GAAG,CAAC;oBAC5C,OAAO,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,GAAG,EAAG,WAAmB,CAAC,aAAM,CAAC,SAAG,CAAC,CAAE,CAAC,CAAC;oBACrE,YAAY,EAAE,CAAC;iBAChB,CAAC,CAAA;aAAA,CACK,CACL,CACP,EAVK,CAUL,CACM,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,eAAe,GAAG,UAAC,EAA6C;QAAxC,KAAK,cAAV,EAAY,CAAF;IAAwC,OAAA,mDAAU,KAAK,EAAG,CAAA;CAAA,CAAA;AAAvF,QAAA,eAAe,mBAAwE","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useState } from 'react'\nimport Repeat from './Repeat'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  transitionDuration?: number\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}>\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when\n * selected.\n *\n * @exports BurgerButtonBar - Component for each line on the burger button.\n */\nexport default forwardRef<HTMLButtonElement, BurgerButtonProps>(({\n  children,\n  className,\n  style,\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  transitionDuration = 200,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}, ref) => {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  const components = asComponentDict(children, {\n    bar: BurgerButtonBar,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames({\n      active: isActive,\n    }),\n    bar: classNames({\n      active: isActive,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      background: 'transparent',\n      border: 'none',\n      display: 'block',\n      height: `${height}px`,\n      outline: 'none',\n      width: `${width}px`,\n    },\n    joint: {\n      height: '100%',\n      position: 'absolute',\n      width: isDoubleJointed ? '50%' : '100%',\n    },\n    joint0: {\n      left: '0',\n      top: '0',\n    },\n    joint1: {\n      right: '0',\n      top: '0',\n    },\n    bar: {\n      height: `${thickness}px`,\n      margin: '0',\n      padding: '0',\n      position: 'absolute',\n      width: '100%',\n    },\n    bar00: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar01: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar02: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n      width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,\n    },\n    bar10: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n    },\n    bar11: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: 'left center',\n    },\n    bar12: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n      width: isLastBarHalfWidth && !isActive ? '0' : '100%',\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    bar: {\n      background: '#fff',\n      transitionDuration: '100ms',\n      transitionProperty: 'width, height, transform, opacity, background',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n      onClick={() => setIsActive(!isActive)}\n    >\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        {j => (\n          <div style={styles(fixedStyles.joint, (fixedStyles as any)[`joint${j}`])}>\n            <Repeat count={3}>\n              {i => cloneStyledElement(components.bar ?? <BurgerButtonBar style={defaultStyles.bar}/>, {\n                'className': classNames(fixedClassNames.bar),\n                'style': styles(fixedStyles.bar, (fixedStyles as any)[`bar${j}${i}`]),\n                'data-index': i,\n              })}\n            </Repeat>\n          </div>\n        )}\n      </Repeat>\n    </button>\n  )\n})\n\nexport const BurgerButtonBar = ({ ...props }: HTMLAttributes<HTMLSpanElement>) => <span {...props}/>\n"]}
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA2G;AAC3G,oDAA6B;AAC7B,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AAcnC;;;;;GAKG;AACH,kBAAe,IAAA,kBAAU,EAAuC,UAAC,EAchE,EAAE,GAAG;IAbJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,gBAAkC,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EAClC,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EACb,0BAAwB,EAAxB,kBAAkB,mBAAG,GAAG,KAAA,EACxB,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,UAAU,gBAAA,EACV,YAAY,kBAAA,EACT,KAAK,cAbuD,2KAchE,CADS;IAEF,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,IAAA,EAAnD,QAAQ,QAAA,EAAE,WAAW,QAA8B,CAAA;IAE1D,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,KAAK,gBAAgB,EAAE;YACjC,WAAW,CAAC,gBAAgB,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,EAAE;YACZ,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA;SACjB;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,GAAG,EAAE,uBAAe;KACrB,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC;YACf,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,GAAG,EAAE,IAAA,oBAAU,EAAC;YACd,MAAM,EAAE,QAAQ;SACjB,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,UAAG,MAAM,OAAI;YACrB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,UAAG,KAAK,OAAI;SACpB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;SACxC;QACD,MAAM,EAAE;YACN,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;SACT;QACD,MAAM,EAAE;YACN,KAAK,EAAE,GAAG;YACV,GAAG,EAAE,GAAG;SACT;QACD,GAAG,EAAE;YACH,MAAM,EAAE,UAAG,SAAS,OAAI;YACxB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,yBAAsB,CAAC,CAAC,CAAC,mCAAmC;YAClI,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;SAC7D;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,OAAI;YAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B;YACvF,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;SAC7D;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,SAAS,OAAI;YAC9B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,0BAAuB,CAAC,CAAC,CAAC,mCAAmC;YACnI,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;YAC5D,KAAK,EAAE,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAE;SACvF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,0BAAuB,CAAC,CAAC,CAAC,mCAAmC;YACnI,eAAe,EAAE,aAAa;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,OAAI;YAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,+BAA+B;YACvF,eAAe,EAAE,aAAa;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,UAAG,MAAM,GAAG,SAAS,OAAI;YAC9B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,yBAAkB,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,yBAAsB,CAAC,CAAC,CAAC,mCAAmC;YAClI,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;SACtD;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,GAAG,EAAE;YACH,UAAU,EAAE,MAAM;YAClB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,+CAA+C;YACnE,wBAAwB,EAAE,UAAU;SACrC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAtB,CAAsB;QAErC,8BAAC,gBAAM,IAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IACnC,UAAA,CAAC,IAAI,OAAA,CACJ,uCAAK,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,EAAG,WAAmB,CAAC,eAAQ,CAAC,CAAE,CAAC,CAAC;YACtE,8BAAC,gBAAM,IAAC,KAAK,EAAE,CAAC,IACb,UAAA,CAAC;;gBAAI,OAAA,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,GAAG,mCAAI,8BAAC,uBAAe,IAAC,KAAK,EAAE,aAAa,CAAC,GAAG,GAAG,EAAE;oBACvF,WAAW,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,GAAG,CAAC;oBAC5C,OAAO,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,GAAG,EAAG,WAAmB,CAAC,aAAM,CAAC,SAAG,CAAC,CAAE,CAAC,CAAC;oBACrE,YAAY,EAAE,CAAC;iBAChB,CAAC,CAAA;aAAA,CACK,CACL,CACP,EAVK,CAUL,CACM,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,eAAe,GAAG,UAAC,EAA6C;QAAxC,KAAK,cAAV,EAAY,CAAF;IAAwC,OAAA,mDAAU,KAAK,EAAG,CAAA;CAAA,CAAA;AAAvF,QAAA,eAAe,mBAAwE","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport Repeat from './Repeat'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  transitionDuration?: number\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}>\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when\n * selected.\n *\n * @exports BurgerButtonBar Component for each line on the burger button.\n */\nexport default forwardRef<HTMLButtonElement, BurgerButtonProps>(({\n  children,\n  className,\n  style,\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  transitionDuration = 200,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}, ref) => {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  const components = asComponentDict(children, {\n    bar: BurgerButtonBar,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames({\n      active: isActive,\n    }),\n    bar: classNames({\n      active: isActive,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      background: 'transparent',\n      border: 'none',\n      display: 'block',\n      height: `${height}px`,\n      outline: 'none',\n      width: `${width}px`,\n    },\n    joint: {\n      height: '100%',\n      position: 'absolute',\n      width: isDoubleJointed ? '50%' : '100%',\n    },\n    joint0: {\n      left: '0',\n      top: '0',\n    },\n    joint1: {\n      right: '0',\n      top: '0',\n    },\n    bar: {\n      height: `${thickness}px`,\n      margin: '0',\n      padding: '0',\n      position: 'absolute',\n      width: '100%',\n    },\n    bar00: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar01: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar02: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n      width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,\n    },\n    bar10: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n    },\n    bar11: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: 'left center',\n    },\n    bar12: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n      width: isLastBarHalfWidth && !isActive ? '0' : '100%',\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    bar: {\n      background: '#fff',\n      transitionDuration: '100ms',\n      transitionProperty: 'width, height, transform, opacity, background',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n      onClick={() => setIsActive(!isActive)}\n    >\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        {j => (\n          <div style={styles(fixedStyles.joint, (fixedStyles as any)[`joint${j}`])}>\n            <Repeat count={3}>\n              {i => cloneStyledElement(components.bar ?? <BurgerButtonBar style={defaultStyles.bar}/>, {\n                'className': classNames(fixedClassNames.bar),\n                'style': styles(fixedStyles.bar, (fixedStyles as any)[`bar${j}${i}`]),\n                'data-index': i,\n              })}\n            </Repeat>\n          </div>\n        )}\n      </Repeat>\n    </button>\n  )\n})\n\nexport const BurgerButtonBar = ({ ...props }: HTMLAttributes<HTMLSpanElement>) => <span {...props}/>\n"]}

package/lib/Conditional.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 export type ConditionalProps = PropsWithChildren<{
     if: boolean | (() => boolean);
 }>;

package/lib/Conditional.js.map

@@ -1 +1 @@
-{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAgD;AAMhD,SAAwB,WAAW,CAAC,EAAoD;QAAlD,QAAQ,cAAA,EAAM,gBAAgB,QAAA;IAClE,QAAQ,OAAO,gBAAgB,EAAE;QAC/B,KAAK,SAAS;YACZ,OAAO,gBAAgB,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACnD,KAAK,UAAU;YACb,OAAO,gBAAgB,EAAE,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACrD;YACE,OAAO,CAAC,KAAK,CAAC,+DAAwD,gBAAgB,uBAAoB,CAAC,CAAA;YAE3G,OAAO,6DAAK,CAAA;KACf;AACH,CAAC;AAXD,8BAWC","sourcesContent":["import React, { PropsWithChildren } from 'react'\n\nexport type ConditionalProps = PropsWithChildren<{\n  if: boolean | (() => boolean)\n}>\n\nexport default function Conditional({ children, if: boolOrExpression }: ConditionalProps) {\n  switch (typeof boolOrExpression) {\n    case 'boolean':\n      return boolOrExpression ? <>{children}</> : <></>\n    case 'function':\n      return boolOrExpression() ? <>{children}</> : <></>\n    default:\n      console.error(`[etudes::Conditional] The type of provided condition ${boolOrExpression} is not supported.`)\n\n      return <></>\n  }\n}\n"]}
+{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAqD;AAMrD,SAAwB,WAAW,CAAC,EAAoD;QAAlD,QAAQ,cAAA,EAAM,gBAAgB,QAAA;IAClE,QAAQ,OAAO,gBAAgB,EAAE;QAC/B,KAAK,SAAS;YACZ,OAAO,gBAAgB,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACnD,KAAK,UAAU;YACb,OAAO,gBAAgB,EAAE,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACrD;YACE,OAAO,CAAC,KAAK,CAAC,+DAAwD,gBAAgB,uBAAoB,CAAC,CAAA;YAE3G,OAAO,6DAAK,CAAA;KACf;AACH,CAAC;AAXD,8BAWC","sourcesContent":["import React, { type PropsWithChildren } from 'react'\n\nexport type ConditionalProps = PropsWithChildren<{\n  if: boolean | (() => boolean)\n}>\n\nexport default function Conditional({ children, if: boolOrExpression }: ConditionalProps) {\n  switch (typeof boolOrExpression) {\n    case 'boolean':\n      return boolOrExpression ? <>{children}</> : <></>\n    case 'function':\n      return boolOrExpression() ? <>{children}</> : <></>\n    default:\n      console.error(`[etudes::Conditional] The type of provided condition ${boolOrExpression} is not supported.`)\n\n      return <></>\n  }\n}\n"]}

package/lib/DebugConsole.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
     align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
     margin?: number;

package/lib/DebugConsole.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport Each from './Each'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\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 default 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  const fixedStyles = 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\n  return (\n    <div\n      {...props}\n      ref={ref}\n      style={styles(style, fixedStyles.root, getStyleByAlignment(align, margin))}\n    >\n      <div style={fixedStyles.title}>{title ?? 'Untitled'}</div>\n      <div ref={messagesRef} style={fixedStyles.messages}>\n        <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n      </div>\n    </div>\n  )\n})\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"]}
+{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from 'react'\nimport Each from './Each'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\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 default 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  const fixedStyles = 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\n  return (\n    <div\n      {...props}\n      ref={ref}\n      style={styles(style, fixedStyles.root, getStyleByAlignment(align, margin))}\n    >\n      <div style={fixedStyles.title}>{title ?? 'Untitled'}</div>\n      <div ref={messagesRef} style={fixedStyles.messages}>\n        <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n      </div>\n    </div>\n  )\n})\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"]}

package/lib/Dial.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PropsWithChildren, SVGAttributes } from 'react';
+import React, { 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,

package/lib/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren, SVGAttributes } from 'react'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\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. Note that this overwrites the `stroke-width` set inside\n   * `cssKnob`.\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. Note that this overwrites the\n   * `stroke-width` set inside `cssTrack`.\n   */\n  trackThickness?: number\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport default forwardRef<HTMLDivElement, DialProps>(({\n  angle = 0,\n  children,\n  knobLength = 30,\n  knobThickness = 10,\n  radius = 50,\n  trackThickness = 2,\n  style,\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 = 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  const defaultStyles = asStyleDict({\n    knob: {\n      stroke: '#fff',\n    },\n    track: {\n      strokeDasharray: '4',\n      stroke: '#fff',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref} style={styles(style, fixedStyles.root)}>\n      <div style={fixedStyles.trackContainer}>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`} style={fixedStyles.svgContainer}>\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 viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg' style={fixedStyles.svgContainer}>\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\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props}/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props}/>\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"]}
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\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. Note that this overwrites the `stroke-width` set inside\n   * `cssKnob`.\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. Note that this overwrites the\n   * `stroke-width` set inside `cssTrack`.\n   */\n  trackThickness?: number\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport default forwardRef<HTMLDivElement, DialProps>(({\n  angle = 0,\n  children,\n  knobLength = 30,\n  knobThickness = 10,\n  radius = 50,\n  trackThickness = 2,\n  style,\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 = 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  const defaultStyles = asStyleDict({\n    knob: {\n      stroke: '#fff',\n    },\n    track: {\n      strokeDasharray: '4',\n      stroke: '#fff',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref} style={styles(style, fixedStyles.root)}>\n      <div style={fixedStyles.trackContainer}>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`} style={fixedStyles.svgContainer}>\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 viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg' style={fixedStyles.svgContainer}>\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\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props}/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props}/>\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"]}

package/lib/Dropdown.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
-import { ListItemProps } from './List';
+import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
+import { type ListItemProps } from './List';
 type Orientation = 'horizontal' | 'vertical';
 export type DropdownData = {
     label?: string;

package/lib/Dropdown.js

@@ -77,8 +77,8 @@ exports.DropdownExpandIcon = exports.DropdownToggle = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var FlatSVG_1 = __importDefault(require("./FlatSVG"));
-var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 var List_1 = __importDefault(require("./List"));
+var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
 var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
 var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref, useEffect, useRef, useState } from 'react'\nimport FlatSVG from './FlatSVG'\nimport useElementRect from './hooks/useElementRect'\nimport List, { ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type DropdownData = {\n  label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: T[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  selectedIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\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 scroll to\n   * 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   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<DropdownItemProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  defaultLabel = 'Select',\n  expandIconSvg,\n  isInverted = false,\n  isTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onIndexChange,\n  ...props\n}, ref) => {\n  const selectItemAt = (index: number) => {\n    setSelectedIndex(index)\n    setIsCollapsed(true)\n  }\n\n  const expand = () => {\n    if (!isCollapsed) return\n    setIsCollapsed(false)\n  }\n\n  const collapse = () => {\n    if (isCollapsed) return\n    setIsCollapsed(true)\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\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  const bodyRef = useRef<HTMLDivElement>(null)\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const [isCollapsed, setIsCollapsed] = useState(true)\n  const rect = useElementRect(bodyRef)\n\n  useEffect(() => {\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    onIndexChange?.(selectedIndex)\n  }, [selectedIndex])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = data.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n  const components = asComponentDict(children, {\n    toggle: DropdownToggle,\n    expandIcon: DropdownExpandIcon,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n\n  const fixedStyles = 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      borderWidth: `${borderThickness}px`,\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\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    expandIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding - borderThickness}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding - borderThickness}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding - borderThickness}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding - borderThickness}px`,\n        },\n      },\n    },\n  })\n\n  const defaultStyles = 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  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {cloneStyledElement(components.toggle ?? <button style={defaultStyles.toggle}/>, {\n          className: classNames(fixedClassNames.toggle),\n          style: styles(fixedStyles.toggle),\n          onClick: () => toggle(),\n        }, ...[\n          <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndex === -1 ? defaultLabel : data[selectedIndex].label ?? '' }}/>,\n          cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n            className: classNames(fixedClassNames.expandIcon),\n            style: styles(fixedStyles.expandIcon),\n          }),\n        ])}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          borderThickness={borderThickness}\n          data={data}\n          isSelectable={true}\n          isTogglable={false}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          orientation={orientation}\n          selectedIndex={selectedIndex}\n          onDeselectAt={idx => selectItemAt(-1)}\n          onSelectAt={idx => selectItemAt(idx)}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const DropdownExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type DropdownData = {\n  label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: T[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  selectedIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\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 scroll to\n   * 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   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<DropdownItemProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  defaultLabel = 'Select',\n  expandIconSvg,\n  isInverted = false,\n  isTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onIndexChange,\n  ...props\n}, ref) => {\n  const selectItemAt = (index: number) => {\n    setSelectedIndex(index)\n    setIsCollapsed(true)\n  }\n\n  const expand = () => {\n    if (!isCollapsed) return\n    setIsCollapsed(false)\n  }\n\n  const collapse = () => {\n    if (isCollapsed) return\n    setIsCollapsed(true)\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\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  const bodyRef = useRef<HTMLDivElement>(null)\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const [isCollapsed, setIsCollapsed] = useState(true)\n  const rect = useElementRect(bodyRef)\n\n  useEffect(() => {\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    onIndexChange?.(selectedIndex)\n  }, [selectedIndex])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = data.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n  const components = asComponentDict(children, {\n    toggle: DropdownToggle,\n    expandIcon: DropdownExpandIcon,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n\n  const fixedStyles = 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      borderWidth: `${borderThickness}px`,\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\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    expandIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding - borderThickness}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding - borderThickness}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding - borderThickness}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding - borderThickness}px`,\n        },\n      },\n    },\n  })\n\n  const defaultStyles = 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  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {cloneStyledElement(components.toggle ?? <button style={defaultStyles.toggle}/>, {\n          className: classNames(fixedClassNames.toggle),\n          style: styles(fixedStyles.toggle),\n          onClick: () => toggle(),\n        }, ...[\n          <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndex === -1 ? defaultLabel : data[selectedIndex].label ?? '' }}/>,\n          cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n            className: classNames(fixedClassNames.expandIcon),\n            style: styles(fixedStyles.expandIcon),\n          }),\n        ])}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          borderThickness={borderThickness}\n          data={data}\n          isSelectable={true}\n          isTogglable={false}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          orientation={orientation}\n          selectedIndex={selectedIndex}\n          onDeselectAt={idx => selectItemAt(-1)}\n          onSelectAt={idx => selectItemAt(idx)}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const DropdownExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/Each.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export type EachProps<T> = {
     children?: ReactNode | ((value: T, index: number) => ReactNode);
     in?: T[];

package/lib/Each.js.map

@@ -1 +1 @@
-{"version":3,"file":"Each.js","sourceRoot":"/","sources":["Each.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAQlD,SAAwB,IAAI,CAAI,EAIjB;QAHT,KAAK,QAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,6DAAK,CAAA;IACvD,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,MAAM,SAAS,CAAC,yBAAkB,KAAK,sBAAmB,CAAC,CAAA;IAE1F,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACnB,8BAAC,gBAAQ,IAAC,GAAG,EAAE,eAAQ,CAAC,CAAE,IACvB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC1E,CACZ,EAJoB,CAIpB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAjBD,uBAiBC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type EachProps<T> = {\n  children?: ReactNode | ((value: T, index: number) => ReactNode)\n  in?: T[]\n  render?: (value: T, index: number) => ReactNode\n}\n\nexport default function Each<T>({\n  in: array,\n  children,\n  render,\n}: EachProps<T>) {\n  if (array === undefined || array === null) return <></>\n  if (!(array instanceof Array)) throw TypeError(`Provided list <${array}> is not an array`)\n\n  return (\n    <>\n      {array.map((v, i) => (\n        <Fragment key={`item-${i}`}>\n          {render ? render(v, i) : typeof children === 'function' ? children(v, i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"Each.js","sourceRoot":"/","sources":["Each.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuD;AAQvD,SAAwB,IAAI,CAAI,EAIjB;QAHT,KAAK,QAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,6DAAK,CAAA;IACvD,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,MAAM,SAAS,CAAC,yBAAkB,KAAK,sBAAmB,CAAC,CAAA;IAE1F,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACnB,8BAAC,gBAAQ,IAAC,GAAG,EAAE,eAAQ,CAAC,CAAE,IACvB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC1E,CACZ,EAJoB,CAIpB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAjBD,uBAiBC","sourcesContent":["import React, { Fragment, type ReactNode } from 'react'\n\nexport type EachProps<T> = {\n  children?: ReactNode | ((value: T, index: number) => ReactNode)\n  in?: T[]\n  render?: (value: T, index: number) => ReactNode\n}\n\nexport default function Each<T>({\n  in: array,\n  children,\n  render,\n}: EachProps<T>) {\n  if (array === undefined || array === null) return <></>\n  if (!(array instanceof Array)) throw TypeError(`Provided list <${array}> is not an array`)\n\n  return (\n    <>\n      {array.map((v, i) => (\n        <Fragment key={`item-${i}`}>\n          {render ? render(v, i) : typeof children === 'function' ? children(v, i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}

package/lib/ExtractChild.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type ExtractChildProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts a single child of a parent component into its own component. If the

package/lib/ExtractChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmF;AACnF,kFAA2D;AAI3D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAiC,UAAC,EAG1D,EAAE,GAAG;IAFJ,IAAA,QAAQ,cAAA,EACL,KAAK,cAFiD,YAG1D,CADS;IAER,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC,EAAE;YACX,OAAO,SAAS,CAAA;SACjB;aACI,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAA,4BAAkB,EAAC,KAAK,EAAE,sBAAK,KAAK,KAAE,GAAG,KAAA,GAAS,CAAC,CAAA;SAC3D;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { Children, forwardRef, HTMLAttributes, isValidElement } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the\n * parent component has multiple children, only the first one will be extracted,\n * the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, ExtractChildProps>(({\n  children,\n  ...props\n}, ref) => {\n  if (Array.isArray(children)) {\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) {\n          return undefined\n        }\n        else if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props, ref } as any)\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n})\n"]}
+{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwF;AACxF,kFAA2D;AAI3D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAiC,UAAC,EAG1D,EAAE,GAAG;IAFJ,IAAA,QAAQ,cAAA,EACL,KAAK,cAFiD,YAG1D,CADS;IAER,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC,EAAE;YACX,OAAO,SAAS,CAAA;SACjB;aACI,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAA,4BAAkB,EAAC,KAAK,EAAE,sBAAK,KAAK,KAAE,GAAG,KAAA,GAAS,CAAC,CAAA;SAC3D;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { Children, forwardRef, isValidElement, type HTMLAttributes } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the\n * parent component has multiple children, only the first one will be extracted,\n * the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, ExtractChildProps>(({\n  children,\n  ...props\n}, ref) => {\n  if (Array.isArray(children)) {\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) {\n          return undefined\n        }\n        else if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props, ref } as any)\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n})\n"]}

package/lib/ExtractChildren.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type ExtractChildrenProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts all children of a parent component into its own component.

package/lib/ExtractChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,kFAA2D;AAI3D;;GAEG;AACH,SAAwB,eAAe,CAAC,EAGjB;IAFrB,IAAA,QAAQ,cAAA,EACL,KAAK,cAF8B,YAGvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,4BAAkB,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;SAC/C;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import React, { Children, HTMLAttributes, isValidElement } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildrenProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  ...props\n}: ExtractChildrenProps) {\n  return (\n    <>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props })\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4E;AAC5E,kFAA2D;AAI3D;;GAEG;AACH,SAAwB,eAAe,CAAC,EAGjB;IAFrB,IAAA,QAAQ,cAAA,EACL,KAAK,cAF8B,YAGvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,4BAAkB,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;SAC/C;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import React, { Children, isValidElement, type HTMLAttributes } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildrenProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  ...props\n}: ExtractChildrenProps) {\n  return (\n    <>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props })\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n}\n"]}

package/lib/FlatSVG.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * The SVG string markup, i.e. "<svg>...</svg>".

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,6CAAyD;AAyCzD;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAA+B,UAAC,EAQxD,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,iCAAgC,EAAhC,yBAAyB,mBAAG,IAAI,KAAA,EAChC,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAP+C,wGAQxD,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,WAAW,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAEpD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE;wBAA7B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC7F,IAAI,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACpG,IAAI,WAAW,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;qBACpG;;;;;;;;;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,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,IACtD,CACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport React, { HTMLAttributes, forwardRef } 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  stripClasses?: 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  stripExtraneousAttributes?: 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  stripIds?: 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  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `stripExtraneousAttributes` 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 default forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = 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 (stripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (stripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (stripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (stripStyles && 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    />\n  )\n})\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,6CAA8D;AAyC9D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAA+B,UAAC,EAQxD,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,iCAAgC,EAAhC,yBAAyB,mBAAG,IAAI,KAAA,EAChC,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAP+C,wGAQxD,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,WAAW,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAEpD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE;wBAA7B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC7F,IAAI,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACpG,IAAI,WAAW,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;qBACpG;;;;;;;;;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,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,IACtD,CACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport React, { 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  stripClasses?: 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  stripExtraneousAttributes?: 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  stripIds?: 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  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `stripExtraneousAttributes` 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 default forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = 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 (stripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (stripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (stripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (stripStyles && 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    />\n  )\n})\n"]}

package/lib/List.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, HTMLAttributes, ReactElement, Ref } from 'react';
+import React, { type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
     data: T;

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, ReactElement, Ref, useEffect, useState } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Thickness of item borders (in pixels). 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * The selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  selectedIndex?: number\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Optional length of each item.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of a\n   * vertical list of clickable rows, being able to retain a selection means\n   * when the row is clicked, it becomes and stays selected. Being unable to\n   * retain a selection means when the row is clicked, it does not become\n   * selected. It is simply clicked and the subsequent event is dispatched.\n   */\n  isSelectable?: boolean\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of a\n   * vertical list of selectable rows, being able to toggle a row means it gets\n   * deselected when selected again. Being unable to toggle the row means it\n   * does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Orientation of the list.\n   */\n  orientation?: Orientation\n\n  /**\n   * Handler invoked when an index is activated.\n   */\n  onActivate?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is deselected.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is selected.\n   */\n  onSelectAt?: (index: number) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  isSelectable,\n  isTogglable,\n  itemComponentType: ItemComponentType,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onActivate,\n  onDeselectAt,\n  onSelectAt,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const isSelectedAt = (index: number) => selectedIndex === index\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    setSelectedIndex(index)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n    setSelectedIndex(-1)\n  }\n\n  const onClick = (index: number) => {\n    if (isSelectable) {\n      if (isTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivate?.(index)\n  }\n\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const prevSelectedIndex = usePrevious(selectedIndex)\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    if (!isSelectable) return\n\n    if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n    if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n  }, [selectedIndex])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'flex-start',\n      counterReset: 'item-counter',\n      display: 'flex',\n      flex: '0 0 auto',\n      flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n      justifyContent: 'flex-start',\n      listStyle: 'none',\n    },\n    item: {\n      borderWidth: `${borderThickness}px`,\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponentType && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponentType\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...orientation === 'vertical' ? {\n                  height: itemLength !== undefined ? `${itemLength}px` : undefined,\n                  marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n                } : {\n                  marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n                  width: itemLength !== undefined ? `${itemLength}px` : undefined,\n                },\n                ...idx >= data.length - 1 ? {} : {\n                  ...orientation === 'vertical' ? {\n                    marginBottom: `${itemPadding}px`,\n                  } : {\n                    marginRight: `${itemPadding}px`,\n                  },\n                },\n              })}\n              data-index={idx}\n              data={val}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              orientation={orientation}\n              onClick={() => onClick(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
+{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Thickness of item borders (in pixels). 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * The selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  selectedIndex?: number\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Optional length of each item.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of a\n   * vertical list of clickable rows, being able to retain a selection means\n   * when the row is clicked, it becomes and stays selected. Being unable to\n   * retain a selection means when the row is clicked, it does not become\n   * selected. It is simply clicked and the subsequent event is dispatched.\n   */\n  isSelectable?: boolean\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of a\n   * vertical list of selectable rows, being able to toggle a row means it gets\n   * deselected when selected again. Being unable to toggle the row means it\n   * does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Orientation of the list.\n   */\n  orientation?: Orientation\n\n  /**\n   * Handler invoked when an index is activated.\n   */\n  onActivate?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is deselected.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is selected.\n   */\n  onSelectAt?: (index: number) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  isSelectable,\n  isTogglable,\n  itemComponentType: ItemComponentType,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onActivate,\n  onDeselectAt,\n  onSelectAt,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const isSelectedAt = (index: number) => selectedIndex === index\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    setSelectedIndex(index)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n    setSelectedIndex(-1)\n  }\n\n  const onClick = (index: number) => {\n    if (isSelectable) {\n      if (isTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivate?.(index)\n  }\n\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const prevSelectedIndex = usePrevious(selectedIndex)\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    if (!isSelectable) return\n\n    if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n    if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n  }, [selectedIndex])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'flex-start',\n      counterReset: 'item-counter',\n      display: 'flex',\n      flex: '0 0 auto',\n      flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n      justifyContent: 'flex-start',\n      listStyle: 'none',\n    },\n    item: {\n      borderWidth: `${borderThickness}px`,\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponentType && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponentType\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...orientation === 'vertical' ? {\n                  height: itemLength !== undefined ? `${itemLength}px` : undefined,\n                  marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n                } : {\n                  marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n                  width: itemLength !== undefined ? `${itemLength}px` : undefined,\n                },\n                ...idx >= data.length - 1 ? {} : {\n                  ...orientation === 'vertical' ? {\n                    marginBottom: `${itemPadding}px`,\n                  } : {\n                    marginRight: `${itemPadding}px`,\n                  },\n                },\n              })}\n              data-index={idx}\n              data={val}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              orientation={orientation}\n              onClick={() => onClick(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}

package/lib/MasonryGrid.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {
     areSectionsAligned?: boolean;