etudes 0.26.0 → 0.30.0

package/lib/AbstractSelectableCollection.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, PureComponent } from 'react';
+export interface Props {
+    className?: string;
+    style?: CSSProperties;
+    isTogglable?: boolean;
+    shouldStaySelected?: boolean;
+    defaultSelectedIndex?: number;
+    onDeselectAt?: (index: number) => void;
+    onSelectAt?: (index: number) => void;
+}
+export interface State {
+    selectedIndex?: number;
+}
+export default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {
+    constructor(props: P);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: P, prevState: S): void;
+    render(): JSX.Element;
+    isIndexOutOfRange(index: number): boolean;
+    isSelectedAt(index: number): boolean;
+    toggleAt(index: number): void;
+    selectAt(index: number): void;
+    deselectAt(index: number): void;
+    deselectCurrent(): void;
+}

package/lib/AbstractSelectableCollection.js

@@ -58,7 +58,7 @@ var AbstractSelectableCollection = (function (_super) {
         var prevSelectedIndex = (_a = prevState.selectedIndex) !== null && _a !== void 0 ? _a : -1;
         var selectedIndex = (_b = this.state.selectedIndex) !== null && _b !== void 0 ? _b : -1;
         if (prevState.selectedIndex !== selectedIndex) {
-            debug("Selected index changed: " + selectedIndex);
+            debug("Selected index changed: ".concat(selectedIndex));
             if (shouldStaySelected === true) {
                 if (!this.isIndexOutOfRange(prevSelectedIndex))
                     onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(prevSelectedIndex);

package/lib/AbstractSelectableCollection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractSelectableCollection.js","sourceRoot":"/","sources":["AbstractSelectableCollection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqE;AAErE,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AA2DhG;IAA4G,gDAAmB;IAC7H,sCAAY,KAAQ;;QAApB,YACE,kBAAM,KAAK,CAAC,SAKb;QAHC,KAAI,CAAC,KAAK,GAAG;YACX,aAAa,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,oBAAoB,mCAAI,CAAC,CAAC;SAC9C,CAAA;;IACV,CAAC;IAED,wDAAiB,GAAjB;;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,EAAE;YAC3E,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,UAAU,mDAAG,MAAA,IAAI,CAAC,KAAK,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAC,CAAA;SACxD;IACH,CAAC;IAED,yDAAkB,GAAlB,UAAmB,SAAY,EAAE,SAAY;;QACrC,IAAA,KAAmD,IAAI,CAAC,KAAK,EAA3D,kBAAkB,wBAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAe,CAAA;QACnE,IAAM,iBAAiB,GAAG,MAAA,SAAS,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAA;QACvD,IAAM,aAAa,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAA;QAEpD,IAAI,SAAS,CAAC,aAAa,KAAK,aAAa,EAAE;YAC7C,KAAK,CAAC,6BAA2B,aAAe,CAAC,CAAA;YAEjD,IAAI,kBAAkB,KAAK,IAAI,EAAE;gBAC/B,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;oBAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,iBAAiB,CAAC,CAAA;gBACjF,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC;oBAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,aAAa,CAAC,CAAA;aACxE;SACF;IACH,CAAC;IAED,6CAAM,GAAN;QACE,OAAO,8BAAC,gBAAQ,OAAE,CAAA;IACpB,CAAC;IASD,wDAAiB,GAAjB,UAAkB,KAAa;QAC7B,IAAI,KAAK,GAAG,CAAC;YAAE,OAAO,IAAI,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC;IASD,mDAAY,GAAZ,UAAa,KAAa;QACxB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,CAAA;IAC7C,CAAC;IAOD,+CAAQ,GAAR,UAAS,KAAa;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YAC/D,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;SACvB;aACI;YACH,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;SACrB;IACH,CAAC;IAOD,+CAAQ,GAAR,UAAS,KAAa;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,EAAE;YAC1C,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBAAE,OAAM;YACpC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAA;SACxC;aACI,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;SAC7B;IACH,CAAC;IAOD,iDAAU,GAAV,UAAW,KAAa;QACtB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAAE,OAAM;QACrC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;IACtC,CAAC;IAKD,sDAAe,GAAf;QACE,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;IACtC,CAAC;IACH,mCAAC;AAAD,CAAC,AAtGD,CAA4G,qBAAa,GAsGxH","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : () => {}\n\nexport interface Props {\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of\n   * a vertical list of selectable rows, being able to toggle a row means it\n   * gets deselected when selected again. Being unable to toggle the row means\n   * it does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of\n   * a 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  shouldStaySelected?: boolean\n\n  /**\n   * The default selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  defaultSelectedIndex?: number\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\nexport interface State {\n  /**\n   * The current selected index. Any value less than 0 indicates that no index\n   * is selected.\n   */\n  selectedIndex?: number\n}\n\n/**\n * An abstract component that mimics and handles index selection in an abstract\n * collection.\n */\nexport default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {\n  constructor(props: P) {\n    super(props)\n\n    this.state = {\n      selectedIndex: this.props.defaultSelectedIndex ?? -1,\n    } as any\n  }\n\n  componentDidMount() {\n    if (this.state.selectedIndex !== undefined && this.state.selectedIndex > -1) {\n      this.props.onSelectAt?.(this.state.selectedIndex ?? -1)\n    }\n  }\n\n  componentDidUpdate(prevProps: P, prevState: S) {\n    const { shouldStaySelected, onSelectAt, onDeselectAt } = this.props\n    const prevSelectedIndex = prevState.selectedIndex ?? -1\n    const selectedIndex = this.state.selectedIndex ?? -1\n\n    if (prevState.selectedIndex !== selectedIndex) {\n      debug(`Selected index changed: ${selectedIndex}`)\n\n      if (shouldStaySelected === true) {\n        if (!this.isIndexOutOfRange(prevSelectedIndex)) onDeselectAt?.(prevSelectedIndex)\n        if (!this.isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n      }\n    }\n  }\n\n  render() {\n    return <Fragment/>\n  }\n\n  /**\n   * Checks if an index is out of range.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is out of range, `false` otherwise.\n   */\n  isIndexOutOfRange(index: number): boolean {\n    if (index < 0) return true\n    return false\n  }\n\n  /**\n   * Checks if an index is selected.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is selected, `false` otherwise.\n   */\n  isSelectedAt(index: number): boolean {\n    return (this.state.selectedIndex === index)\n  }\n\n  /**\n   * Toggles an index, i.e. reverses its selected state.\n   *\n   * @param index - The index to toggle.\n   */\n  toggleAt(index: number) {\n    if (this.props.isTogglable === true && this.isSelectedAt(index)) {\n      this.deselectAt(index)\n    }\n    else {\n      this.selectAt(index)\n    }\n  }\n\n  /**\n   * Selects an index.\n   *\n   * @param index - The index to select.\n   */\n  selectAt(index: number) {\n    if (this.props.shouldStaySelected === true) {\n      if (this.isSelectedAt(index)) return\n      this.setState({ selectedIndex: index })\n    }\n    else if (this.props.onSelectAt) {\n      this.props.onSelectAt(index)\n    }\n  }\n\n  /**\n   * Deselects an index if it is currently selected.\n   *\n   * @param index - The index to deselect.\n   */\n  deselectAt(index: number) {\n    if (!this.isSelectedAt(index)) return\n    this.setState({ selectedIndex: -1 })\n  }\n\n  /**\n   * Deselects the currently selected index.\n   */\n  deselectCurrent() {\n    this.setState({ selectedIndex: -1 })\n  }\n}\n"]}
+{"version":3,"file":"AbstractSelectableCollection.js","sourceRoot":"/","sources":["AbstractSelectableCollection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : () => {}\n\nexport interface Props {\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of\n   * a vertical list of selectable rows, being able to toggle a row means it\n   * gets deselected when selected again. Being unable to toggle the row means\n   * it does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of\n   * a 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  shouldStaySelected?: boolean\n\n  /**\n   * The default selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  defaultSelectedIndex?: number\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\nexport interface State {\n  /**\n   * The current selected index. Any value less than 0 indicates that no index\n   * is selected.\n   */\n  selectedIndex?: number\n}\n\n/**\n * An abstract component that mimics and handles index selection in an abstract\n * collection.\n */\nexport default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {\n  constructor(props: P) {\n    super(props)\n\n    this.state = {\n      selectedIndex: this.props.defaultSelectedIndex ?? -1,\n    } as any\n  }\n\n  componentDidMount() {\n    if (this.state.selectedIndex !== undefined && this.state.selectedIndex > -1) {\n      this.props.onSelectAt?.(this.state.selectedIndex ?? -1)\n    }\n  }\n\n  componentDidUpdate(prevProps: P, prevState: S) {\n    const { shouldStaySelected, onSelectAt, onDeselectAt } = this.props\n    const prevSelectedIndex = prevState.selectedIndex ?? -1\n    const selectedIndex = this.state.selectedIndex ?? -1\n\n    if (prevState.selectedIndex !== selectedIndex) {\n      debug(`Selected index changed: ${selectedIndex}`)\n\n      if (shouldStaySelected === true) {\n        if (!this.isIndexOutOfRange(prevSelectedIndex)) onDeselectAt?.(prevSelectedIndex)\n        if (!this.isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n      }\n    }\n  }\n\n  render() {\n    return <Fragment/>\n  }\n\n  /**\n   * Checks if an index is out of range.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is out of range, `false` otherwise.\n   */\n  isIndexOutOfRange(index: number): boolean {\n    if (index < 0) return true\n    return false\n  }\n\n  /**\n   * Checks if an index is selected.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is selected, `false` otherwise.\n   */\n  isSelectedAt(index: number): boolean {\n    return (this.state.selectedIndex === index)\n  }\n\n  /**\n   * Toggles an index, i.e. reverses its selected state.\n   *\n   * @param index - The index to toggle.\n   */\n  toggleAt(index: number) {\n    if (this.props.isTogglable === true && this.isSelectedAt(index)) {\n      this.deselectAt(index)\n    }\n    else {\n      this.selectAt(index)\n    }\n  }\n\n  /**\n   * Selects an index.\n   *\n   * @param index - The index to select.\n   */\n  selectAt(index: number) {\n    if (this.props.shouldStaySelected === true) {\n      if (this.isSelectedAt(index)) return\n      this.setState({ selectedIndex: index })\n    }\n    else if (this.props.onSelectAt) {\n      this.props.onSelectAt(index)\n    }\n  }\n\n  /**\n   * Deselects an index if it is currently selected.\n   *\n   * @param index - The index to deselect.\n   */\n  deselectAt(index: number) {\n    if (!this.isSelectedAt(index)) return\n    this.setState({ selectedIndex: -1 })\n  }\n\n  /**\n   * Deselects the currently selected index.\n   */\n  deselectCurrent() {\n    this.setState({ selectedIndex: -1 })\n  }\n}\n"]}

package/lib/Accordion.d.ts

@@ -0,0 +1,59 @@
+import React, { ComponentType, CSSProperties, PureComponent } from 'react';
+import List, { ItemComponentProps as ListItemComponentProps } from './List';
+import { ExtendedCSSFunction, Orientation } from './types';
+export declare type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>;
+export declare type SectionHeaderCSSProps = Readonly<{
+    borderColor: string;
+    borderThickness: number;
+    isCollapsed: boolean;
+    orientation: Orientation;
+}>;
+export declare type SectionCSSProps = Readonly<{
+    isCollapsed: boolean;
+    orientation: Orientation;
+}>;
+export interface SectionProps<T = Record<string, never>> {
+    label: string;
+    items: T[];
+}
+export interface Props<T = Record<string, never>> {
+    className?: string;
+    style?: CSSProperties;
+    data: SectionProps<T>[];
+    isTogglable?: boolean;
+    defaultSelectedSectionIndex?: number;
+    itemLength?: number;
+    itemPadding?: number;
+    sectionPadding?: number;
+    maxVisibleItems?: number;
+    orientation?: Orientation;
+    borderColor?: string;
+    borderThickness?: number;
+    expandIconSvg?: string;
+    itemComponentType: ComponentType<ItemComponentProps<T>>;
+    onItemIndexChange?: (index: number) => void;
+    onSectionIndexChange?: (index: number) => void;
+    sectionCSS?: ExtendedCSSFunction<SectionCSSProps>;
+    sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>;
+}
+export interface State {
+    selectedSectionIndex: number;
+    selectedItemIndex: number;
+}
+export default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {
+    nodeRefs: {
+        lists: React.RefObject<List<T>>[];
+    };
+    constructor(props: Props<T>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props<T>, prevState: State): void;
+    render(): JSX.Element;
+    private isSectionSelectedAt;
+    private toggleSectionAt;
+    private selectSectionAt;
+    private deselectSectionAt;
+    private isItemSelectedAt;
+    private toggleItemAt;
+    private selectItemAt;
+    private deselectItemAt;
+}

package/lib/Accordion.js

@@ -89,11 +89,11 @@ var Accordion = (function (_super) {
     Accordion.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a, _b, _c, _d;
         if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {
-            debug("Changing section index to " + this.state.selectedSectionIndex + "... OK");
+            debug("Changing section index to ".concat(this.state.selectedSectionIndex, "... OK"));
             (_b = (_a = this.props).onSectionIndexChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.selectedSectionIndex);
         }
         if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {
-            debug("Changing item index to " + this.state.selectedItemIndex + "... OK");
+            debug("Changing item index to ".concat(this.state.selectedItemIndex, "... OK"));
             (_d = (_c = this.props).onItemIndexChange) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.selectedItemIndex);
         }
     };
@@ -121,26 +121,26 @@ var Accordion = (function (_super) {
             var isCollapsed = !_this.isSectionSelectedAt(i);
             var ref = (0, react_1.createRef)();
             _this.nodeRefs.lists.push(ref);
-            return (react_1.default.createElement(StyledSection, { key: "section-" + i, isCollapsed: isCollapsed, orientation: orientation, extendedCSS: (_a = _this.props.sectionCSS) !== null && _a !== void 0 ? _a : (function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); }), style: orientation === 'vertical' ? {
-                    marginTop: i === 0 ? '0px' : sectionPadding - borderThickness + "px",
+            return (react_1.default.createElement(StyledSection, { key: "section-".concat(i), isCollapsed: isCollapsed, orientation: orientation, extendedCSS: (_a = _this.props.sectionCSS) !== null && _a !== void 0 ? _a : (function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); }), style: orientation === 'vertical' ? {
+                    marginTop: i === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 } : {
-                    marginLeft: i === 0 ? '0px' : sectionPadding - borderThickness + "px",
+                    marginLeft: i === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 } },
                 react_1.default.createElement(StyledSectionHeader, { borderColor: borderColor, borderThickness: borderThickness, orientation: orientation, isCollapsed: isCollapsed, onClick: function () { return _this.toggleSectionAt(i); }, extendedCSS: (_b = _this.props.sectionHeaderCSS) !== null && _b !== void 0 ? _b : (function () { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))); }) },
                     react_1.default.createElement("label", null, section.label),
                     _this.props.expandIconSvg && react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: _this.props.expandIconSvg } })),
                 react_1.default.createElement(StyledItemList, { ref: ref, borderColor: borderColor, borderThickness: borderThickness, data: section.items, defaultSelectedIndex: -1, isTogglable: isTogglable, itemComponentType: _this.props.itemComponentType, itemPadding: itemPadding, onDeselectAt: function (idx) { return _this.deselectItemAt(idx); }, onSelectAt: function (idx) { return _this.selectItemAt(idx); }, orientation: orientation, shouldStaySelected: true, itemStyle: orientation === 'vertical' ? {
-                        height: itemLength + "px",
+                        height: "".concat(itemLength, "px"),
                     } : {
-                        width: itemLength + "px",
+                        width: "".concat(itemLength, "px"),
                     }, style: orientation === 'vertical' ? {
-                        height: isCollapsed ? '0px' : menuLength + "px",
-                        marginTop: isCollapsed ? '0px' : itemPadding - borderThickness + "px",
+                        height: isCollapsed ? '0px' : "".concat(menuLength, "px"),
+                        marginTop: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
                         overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
                     } : {
-                        marginLeft: isCollapsed ? '0px' : itemPadding - borderThickness + "px",
+                        marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
                         overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
-                        width: isCollapsed ? '0px' : menuLength + "px",
+                        width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
                     } })));
         })));
     };

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, CSSProperties, PureComponent, RefObject } from 'react'\nimport styled, { css } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : () => {}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>\n\nexport type SectionHeaderCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport type SectionCSSProps = Readonly<{\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport interface SectionProps<T = Record<string, never>> {\n  label: string\n  items: T[]\n}\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data provided to each section.\n   */\n  data: SectionProps<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  defaultSelectedSectionIndex?: 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   * Color of the border of every item and the section header itself.\n   */\n  borderColor?: string\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<ItemComponentProps<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  /**\n   * Additional CSS to be provided to each section element.\n   */\n  sectionCSS?: ExtendedCSSFunction<SectionCSSProps>\n\n  /**\n   * Additional CSS to be provided to each section header element.\n   */\n  sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>\n}\n\nexport interface State {\n  /**\n   * Current selected section index.\n   */\n  selectedSectionIndex: number\n\n  /**\n   * Current selected item index of the expanded section.\n   */\n  selectedItemIndex: number\n}\n\nexport default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    lists: [] as RefObject<List<T>>[],\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedSectionIndex: props.defaultSelectedSectionIndex ?? -1,\n      selectedItemIndex: -1,\n    }\n  }\n\n  componentDidMount() {\n    this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {\n      debug(`Changing section index to ${this.state.selectedSectionIndex}... OK`)\n      this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    }\n\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      debug(`Changing item index to ${this.state.selectedItemIndex}... OK`)\n      this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const isTogglable = this.props.isTogglable ?? true\n    const itemLength = this.props.itemLength ?? 50\n    const itemPadding = this.props.itemPadding ?? 0\n    const sectionPadding = this.props.sectionPadding ?? 0\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const orientation = this.props.orientation ?? 'vertical'\n\n    this.nodeRefs.lists = []\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        style={{\n          ...this.props.style ?? {},\n          ...(orientation === 'vertical' ? {\n            height: 'auto',\n          } : {\n            width: 'auto',\n          }),\n        }}\n      >\n        {this.props.data.map((section, i) => {\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 = !this.isSectionSelectedAt(i)\n          const ref = createRef<List<T>>()\n\n          this.nodeRefs.lists.push(ref)\n\n          return (\n            <StyledSection\n              key={`section-${i}`}\n              isCollapsed={isCollapsed}\n              orientation={orientation}\n              extendedCSS={this.props.sectionCSS ?? (() => css``)}\n              style={orientation === 'vertical' ? {\n                marginTop: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              } : {\n                marginLeft: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              }}\n            >\n              <StyledSectionHeader\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                orientation={orientation}\n                isCollapsed={isCollapsed}\n                onClick={() => this.toggleSectionAt(i) }\n                extendedCSS={this.props.sectionHeaderCSS ?? (() => css``)}\n              >\n                <label>{section.label}</label>\n                {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n              </StyledSectionHeader>\n              <StyledItemList\n                ref={ref as any}\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                data={section.items}\n                defaultSelectedIndex={-1}\n                isTogglable={isTogglable}\n                itemComponentType={this.props.itemComponentType as any}\n                itemPadding={itemPadding}\n                onDeselectAt={idx => this.deselectItemAt(idx)}\n                onSelectAt={idx => this.selectItemAt(idx)}\n                orientation={orientation}\n                shouldStaySelected={true}\n                itemStyle={orientation === 'vertical' ? {\n                  height: `${itemLength}px`,\n                } : {\n                  width: `${itemLength}px`,\n                }}\n                style={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              />\n            </StyledSection>\n          )\n        })}\n      </StyledRoot>\n    )\n  }\n\n  private isSectionSelectedAt(index: number): boolean {\n    return this.state.selectedSectionIndex === index\n  }\n\n  private toggleSectionAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isSectionSelectedAt(index)) {\n      this.deselectSectionAt(index)\n    }\n    else {\n      this.selectSectionAt(index)\n    }\n  }\n\n  private selectSectionAt(index: number) {\n    if (this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: index,\n    })\n  }\n\n  private deselectSectionAt(index: number) {\n    if (!this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: -1,\n    })\n  }\n\n  private isItemSelectedAt(index: number): boolean {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  private toggleItemAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isItemSelectedAt(index)) {\n      this.deselectItemAt(index)\n    }\n    else {\n      this.selectItemAt(index)\n    }\n  }\n\n  private selectItemAt(index: number) {\n    if (this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: index,\n    })\n  }\n\n  private deselectItemAt(index: number) {\n    if (!this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: -1,\n    })\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  ` : css`\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  `}\n`\n\nconst StyledSectionHeader = styled.button<SectionHeaderCSSProps & ExtendedCSSProps<SectionHeaderCSSProps>>`\n  align-items: center;\n  background: #fff;\n  border-color: ${props => props.borderColor};\n  border-style: solid;\n  border-width: ${props => props.borderThickness};\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    height: 50px;\n    width: 100%;\n    ` : css`\n    height: 100%;\n    width: 50px;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledSection = styled.section<SectionCSSProps & ExtendedCSSProps<SectionCSSProps>>`\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    flex-direction: column;\n    ` : css`\n    height: 100%;\n    flex-direction: row;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: column;\n    ` : css`\n    flex-direction: row;\n  `}\n`\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, CSSProperties, PureComponent, RefObject } from 'react'\nimport styled, { css } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : () => {}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>\n\nexport type SectionHeaderCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport type SectionCSSProps = Readonly<{\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport interface SectionProps<T = Record<string, never>> {\n  label: string\n  items: T[]\n}\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data provided to each section.\n   */\n  data: SectionProps<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  defaultSelectedSectionIndex?: 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   * Color of the border of every item and the section header itself.\n   */\n  borderColor?: string\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<ItemComponentProps<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  /**\n   * Additional CSS to be provided to each section element.\n   */\n  sectionCSS?: ExtendedCSSFunction<SectionCSSProps>\n\n  /**\n   * Additional CSS to be provided to each section header element.\n   */\n  sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>\n}\n\nexport interface State {\n  /**\n   * Current selected section index.\n   */\n  selectedSectionIndex: number\n\n  /**\n   * Current selected item index of the expanded section.\n   */\n  selectedItemIndex: number\n}\n\nexport default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    lists: [] as RefObject<List<T>>[],\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedSectionIndex: props.defaultSelectedSectionIndex ?? -1,\n      selectedItemIndex: -1,\n    }\n  }\n\n  componentDidMount() {\n    this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {\n      debug(`Changing section index to ${this.state.selectedSectionIndex}... OK`)\n      this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    }\n\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      debug(`Changing item index to ${this.state.selectedItemIndex}... OK`)\n      this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const isTogglable = this.props.isTogglable ?? true\n    const itemLength = this.props.itemLength ?? 50\n    const itemPadding = this.props.itemPadding ?? 0\n    const sectionPadding = this.props.sectionPadding ?? 0\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const orientation = this.props.orientation ?? 'vertical'\n\n    this.nodeRefs.lists = []\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        style={{\n          ...this.props.style ?? {},\n          ...(orientation === 'vertical' ? {\n            height: 'auto',\n          } : {\n            width: 'auto',\n          }),\n        }}\n      >\n        {this.props.data.map((section, i) => {\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 = !this.isSectionSelectedAt(i)\n          const ref = createRef<List<T>>()\n\n          this.nodeRefs.lists.push(ref)\n\n          return (\n            <StyledSection\n              key={`section-${i}`}\n              isCollapsed={isCollapsed}\n              orientation={orientation}\n              extendedCSS={this.props.sectionCSS ?? (() => css``)}\n              style={orientation === 'vertical' ? {\n                marginTop: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              } : {\n                marginLeft: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              }}\n            >\n              <StyledSectionHeader\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                orientation={orientation}\n                isCollapsed={isCollapsed}\n                onClick={() => this.toggleSectionAt(i) }\n                extendedCSS={this.props.sectionHeaderCSS ?? (() => css``)}\n              >\n                <label>{section.label}</label>\n                {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n              </StyledSectionHeader>\n              <StyledItemList\n                ref={ref as any}\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                data={section.items}\n                defaultSelectedIndex={-1}\n                isTogglable={isTogglable}\n                itemComponentType={this.props.itemComponentType as any}\n                itemPadding={itemPadding}\n                onDeselectAt={idx => this.deselectItemAt(idx)}\n                onSelectAt={idx => this.selectItemAt(idx)}\n                orientation={orientation}\n                shouldStaySelected={true}\n                itemStyle={orientation === 'vertical' ? {\n                  height: `${itemLength}px`,\n                } : {\n                  width: `${itemLength}px`,\n                }}\n                style={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              />\n            </StyledSection>\n          )\n        })}\n      </StyledRoot>\n    )\n  }\n\n  private isSectionSelectedAt(index: number): boolean {\n    return this.state.selectedSectionIndex === index\n  }\n\n  private toggleSectionAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isSectionSelectedAt(index)) {\n      this.deselectSectionAt(index)\n    }\n    else {\n      this.selectSectionAt(index)\n    }\n  }\n\n  private selectSectionAt(index: number) {\n    if (this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: index,\n    })\n  }\n\n  private deselectSectionAt(index: number) {\n    if (!this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: -1,\n    })\n  }\n\n  private isItemSelectedAt(index: number): boolean {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  private toggleItemAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isItemSelectedAt(index)) {\n      this.deselectItemAt(index)\n    }\n    else {\n      this.selectItemAt(index)\n    }\n  }\n\n  private selectItemAt(index: number) {\n    if (this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: index,\n    })\n  }\n\n  private deselectItemAt(index: number) {\n    if (!this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: -1,\n    })\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  ` : css`\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  `}\n`\n\nconst StyledSectionHeader = styled.button<SectionHeaderCSSProps & ExtendedCSSProps<SectionHeaderCSSProps>>`\n  align-items: center;\n  background: #fff;\n  border-color: ${props => props.borderColor};\n  border-style: solid;\n  border-width: ${props => props.borderThickness};\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    height: 50px;\n    width: 100%;\n    ` : css`\n    height: 100%;\n    width: 50px;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledSection = styled.section<SectionCSSProps & ExtendedCSSProps<SectionCSSProps>>`\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    flex-direction: column;\n    ` : css`\n    height: 100%;\n    flex-direction: row;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: column;\n    ` : css`\n    flex-direction: row;\n  `}\n`\n"]}

package/lib/BurgerButton.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties, PureComponent } from 'react';
+export interface Props {
+    className?: string;
+    style: CSSProperties;
+    isActiveByDefault: boolean;
+    isDoubleJointed: boolean;
+    isFunky: boolean;
+    height: number;
+    thickness: number;
+    width: number;
+    tintColor: string;
+    transitionDuration: number;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+}
+export interface State {
+    isActive: boolean;
+}
+declare class BurgerButton extends PureComponent<Props, State> {
+    static defaultProps: {
+        height: number;
+        isActiveByDefault: boolean;
+        isDoubleJointed: boolean;
+        isFunky: boolean;
+        style: {};
+        thickness: number;
+        tintColor: string;
+        transitionDuration: number;
+        width: number;
+    };
+    constructor(props: Props);
+    toggle(): void;
+    activate(): void;
+    deactivate(): void;
+    render(): JSX.Element;
+}
+export default BurgerButton;

package/lib/BurgerButton.js

@@ -107,7 +107,7 @@ var BurgerButton = (function (_super) {
         var d = 45;
         var r = d * Math.PI / 180;
         var n = this.props.isDoubleJointed ? 2 : 1;
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, height: this.props.height, isActive: this.state.isActive, isDoubleJointed: this.props.isDoubleJointed, isFunky: this.props.isFunky, onClick: function () { return _this.toggle(); }, style: this.props.style, thickness: this.props.thickness, tintColor: this.props.tintColor, transitionDuration: this.props.transitionDuration, width: this.props.width, w: w, h: h, t: t, d: d, r: r }, this.props.isDoubleJointed && (react_1.default.createElement(react_1.Fragment, null, __spreadArray([], __read(new Array(n)), false).map(function (v, i) { return (react_1.default.createElement("div", { key: "joint-" + i },
+        return (react_1.default.createElement(StyledRoot, { className: this.props.className, height: this.props.height, isActive: this.state.isActive, isDoubleJointed: this.props.isDoubleJointed, isFunky: this.props.isFunky, onClick: function () { return _this.toggle(); }, style: this.props.style, thickness: this.props.thickness, tintColor: this.props.tintColor, transitionDuration: this.props.transitionDuration, width: this.props.width, w: w, h: h, t: t, d: d, r: r }, this.props.isDoubleJointed && (react_1.default.createElement(react_1.Fragment, null, __spreadArray([], __read(new Array(n)), false).map(function (v, i) { return (react_1.default.createElement("div", { key: "joint-".concat(i) },
             react_1.default.createElement("span", null),
             react_1.default.createElement("span", null),
             react_1.default.createElement("span", null))); })))));
@@ -126,6 +126,6 @@ var BurgerButton = (function (_super) {
     return BurgerButton;
 }(react_1.PureComponent));
 exports.default = BurgerButton;
-var StyledRoot = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ", "px;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(3) {\n      top: ", ";\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ", ";\n      width: ", ";\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ", "px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ", ";\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ", ";\n        width: ", ";\n        left: 0;\n        top: ", "px;\n      }\n    }\n  }\n\n  span {\n    background: ", ";\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    transition-duration: ", "ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ", "px;\n      width: ", "px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ", "px;\n      width: ", "px;\n    }\n  }\n"], ["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ", "px;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(3) {\n      top: ", ";\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ", ";\n      width: ", ";\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ", "px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ", ";\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ", ";\n        width: ", ";\n        left: 0;\n        top: ", "px;\n      }\n    }\n  }\n\n  span {\n    background: ", ";\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    transition-duration: ", "ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ", "px;\n      width: ", "px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ", "px;\n      width: ", "px;\n    }\n  }\n"])), function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.width; }, function (props) { return props.isActive ? "translate3d(0, " + (props.h - props.t) + "px, 0) rotate(" + props.d + "deg)" : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isActive ? "translate3d(0, " + (props.t - props.h) + "px, 0) rotate(" + -props.d + "deg)" : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? '100%' : (props.isFunky ? '50%' : '100%'); }, function (props) { return props.isActive ? "translate3d(0, " + (props.h - props.t) + "px, 0) rotate(" + props.d + "deg)" : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isActive ? "translate3d(0, " + (props.t - props.h) + "px, 0) rotate(" + -props.d + "deg)" : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? "translate3d(" + 0 + "px, " + (props.h - props.t) + "px, 0) rotate(" + -props.d + "deg)" : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.isActive ? "translate3d(0, " + (props.t - props.h) + "px, 0) rotate(" + props.d + "deg)" : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? '100%' : (props.isFunky ? 0 : '100%'); }, function (props) { return props.height - props.thickness; }, function (props) { return props.tintColor; }, function (props) { return props.thickness; }, function (props) { return props.transitionDuration; }, function (props) { return props.thickness; }, function (props) { return props.w; }, function (props) { return props.thickness; }, function (props) { return props.width; });
+var StyledRoot = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ", "px;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(3) {\n      top: ", ";\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ", ";\n      width: ", ";\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ", "px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ", ";\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ", ";\n        width: ", ";\n        left: 0;\n        top: ", "px;\n      }\n    }\n  }\n\n  span {\n    background: ", ";\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    transition-duration: ", "ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ", "px;\n      width: ", "px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ", "px;\n      width: ", "px;\n    }\n  }\n"], ["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ", "px;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(3) {\n      top: ", ";\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ", ";\n      width: ", ";\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ", "px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ", ";\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ", ";\n        width: ", ";\n        left: 0;\n        top: ", "px;\n      }\n    }\n  }\n\n  span {\n    background: ", ";\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    transition-duration: ", "ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ", "px;\n      width: ", "px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ", "px;\n      width: ", "px;\n    }\n  }\n"])), function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.width; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.h - props.t, "px, 0) rotate(").concat(props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.t - props.h, "px, 0) rotate(").concat(-props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? '100%' : (props.isFunky ? '50%' : '100%'); }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.h - props.t, "px, 0) rotate(").concat(props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.t - props.h, "px, 0) rotate(").concat(-props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? "translate3d(".concat(0, "px, ").concat(props.h - props.t, "px, 0) rotate(").concat(-props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.t - props.h, "px, 0) rotate(").concat(props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? '100%' : (props.isFunky ? 0 : '100%'); }, function (props) { return props.height - props.thickness; }, function (props) { return props.tintColor; }, function (props) { return props.thickness; }, function (props) { return props.transitionDuration; }, function (props) { return props.thickness; }, function (props) { return props.w; }, function (props) { return props.thickness; }, function (props) { return props.width; });
 var templateObject_1;
 //# sourceMappingURL=BurgerButton.js.map

package/lib/BurgerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  isActiveByDefault: boolean\n  isDoubleJointed: boolean\n  isFunky: boolean\n  height: number\n  thickness: number\n  width: number\n  tintColor: string\n  transitionDuration: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}\n\nexport interface State {\n  isActive: boolean\n}\n\nclass BurgerButton extends PureComponent<Props, State> {\n  static defaultProps = {\n    height: 20,\n    isActiveByDefault: false,\n    isDoubleJointed: true,\n    isFunky: false,\n    style: {},\n    thickness: 2,\n    tintColor: '#000',\n    transitionDuration: 200,\n    width: 20,\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      isActive: this.props.isActiveByDefault,\n    }\n  }\n\n  toggle() {\n    if (this.state.isActive) {\n      this.deactivate()\n    }\n    else {\n      this.activate()\n    }\n  }\n\n  activate() {\n    if (this.state.isActive) return\n    this.setState({ isActive: true })\n    if (this.props.onActivate) this.props.onActivate()\n  }\n\n  deactivate() {\n    if (!this.state.isActive) return\n    this.setState({ isActive: false })\n    if (this.props.onDeactivate) this.props.onDeactivate()\n  }\n\n  render() {\n    const w = this.props.width * 0.5\n    const h = this.props.height * 0.5\n    const t = this.props.thickness * 0.5\n    const d = 45\n    const r = d * Math.PI / 180\n    const n = this.props.isDoubleJointed ? 2 : 1\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        height={this.props.height}\n        isActive={this.state.isActive}\n        isDoubleJointed={this.props.isDoubleJointed}\n        isFunky={this.props.isFunky}\n        onClick={() => this.toggle()}\n        style={this.props.style}\n        thickness={this.props.thickness}\n        tintColor={this.props.tintColor}\n        transitionDuration={this.props.transitionDuration}\n        width={this.props.width}\n        w={w}\n        h={h}\n        t={t}\n        d={d}\n        r={r}\n      >\n        {this.props.isDoubleJointed && (\n          <Fragment>\n            {[...new Array(n)].map((v, i) => (\n              <div key={`joint-${i}`}>\n                <span/>\n                <span/>\n                <span/>\n              </div>\n            ))}\n          </Fragment>\n        )}\n      </StyledRoot>\n    )\n  }\n}\n\nexport default BurgerButton\n\nconst StyledRoot = styled.button<{\n  isActive: boolean\n  width: number\n  height: number\n  thickness: number\n  tintColor: string\n  isDoubleJointed: boolean\n  isFunky: boolean\n  transitionDuration: number\n  w: number\n  h: number\n  t: number\n  d: number\n  r: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ${props => props.isActive ? `translate3d(0, ${props.h - props.t}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ${props => props.h - props.t}px;\n      transform-origin: center;\n      transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n    }\n\n    span:nth-child(3) {\n      top: ${props => props.height - props.thickness};\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      width: ${props => props.isActive ? '100%' : (props.isFunky ? '50%' : '100%')};\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.h - props.t}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ${props => props.h - props.t}px;\n        transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ${props => props.height - props.thickness}px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ${props => props.isActive ? `translate3d(${0}px, ${props.h - props.t}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ${props => props.h - props.t}px;\n        transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n        width: ${props => props.isActive ? '100%' : (props.isFunky ? 0 : '100%')};\n        left: 0;\n        top: ${props => props.height - props.thickness}px;\n      }\n    }\n  }\n\n  span {\n    background: ${props => props.tintColor};\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ${props => props.thickness}px;\n    transition-duration: ${props => props.transitionDuration}ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ${props => props.thickness}px;\n      width: ${props => props.w}px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ${props => props.thickness}px;\n      width: ${props => props.width}px;\n    }\n  }\n`\n"]}
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  isActiveByDefault: boolean\n  isDoubleJointed: boolean\n  isFunky: boolean\n  height: number\n  thickness: number\n  width: number\n  tintColor: string\n  transitionDuration: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}\n\nexport interface State {\n  isActive: boolean\n}\n\nclass BurgerButton extends PureComponent<Props, State> {\n  static defaultProps = {\n    height: 20,\n    isActiveByDefault: false,\n    isDoubleJointed: true,\n    isFunky: false,\n    style: {},\n    thickness: 2,\n    tintColor: '#000',\n    transitionDuration: 200,\n    width: 20,\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      isActive: this.props.isActiveByDefault,\n    }\n  }\n\n  toggle() {\n    if (this.state.isActive) {\n      this.deactivate()\n    }\n    else {\n      this.activate()\n    }\n  }\n\n  activate() {\n    if (this.state.isActive) return\n    this.setState({ isActive: true })\n    if (this.props.onActivate) this.props.onActivate()\n  }\n\n  deactivate() {\n    if (!this.state.isActive) return\n    this.setState({ isActive: false })\n    if (this.props.onDeactivate) this.props.onDeactivate()\n  }\n\n  render() {\n    const w = this.props.width * 0.5\n    const h = this.props.height * 0.5\n    const t = this.props.thickness * 0.5\n    const d = 45\n    const r = d * Math.PI / 180\n    const n = this.props.isDoubleJointed ? 2 : 1\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        height={this.props.height}\n        isActive={this.state.isActive}\n        isDoubleJointed={this.props.isDoubleJointed}\n        isFunky={this.props.isFunky}\n        onClick={() => this.toggle()}\n        style={this.props.style}\n        thickness={this.props.thickness}\n        tintColor={this.props.tintColor}\n        transitionDuration={this.props.transitionDuration}\n        width={this.props.width}\n        w={w}\n        h={h}\n        t={t}\n        d={d}\n        r={r}\n      >\n        {this.props.isDoubleJointed && (\n          <Fragment>\n            {[...new Array(n)].map((v, i) => (\n              <div key={`joint-${i}`}>\n                <span/>\n                <span/>\n                <span/>\n              </div>\n            ))}\n          </Fragment>\n        )}\n      </StyledRoot>\n    )\n  }\n}\n\nexport default BurgerButton\n\nconst StyledRoot = styled.button<{\n  isActive: boolean\n  width: number\n  height: number\n  thickness: number\n  tintColor: string\n  isDoubleJointed: boolean\n  isFunky: boolean\n  transitionDuration: number\n  w: number\n  h: number\n  t: number\n  d: number\n  r: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ${props => props.isActive ? `translate3d(0, ${props.h - props.t}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ${props => props.h - props.t}px;\n      transform-origin: center;\n      transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n    }\n\n    span:nth-child(3) {\n      top: ${props => props.height - props.thickness};\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      width: ${props => props.isActive ? '100%' : (props.isFunky ? '50%' : '100%')};\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.h - props.t}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ${props => props.h - props.t}px;\n        transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ${props => props.height - props.thickness}px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ${props => props.isActive ? `translate3d(${0}px, ${props.h - props.t}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ${props => props.h - props.t}px;\n        transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n        width: ${props => props.isActive ? '100%' : (props.isFunky ? 0 : '100%')};\n        left: 0;\n        top: ${props => props.height - props.thickness}px;\n      }\n    }\n  }\n\n  span {\n    background: ${props => props.tintColor};\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ${props => props.thickness}px;\n    transition-duration: ${props => props.transitionDuration}ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ${props => props.thickness}px;\n      width: ${props => props.w}px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ${props => props.thickness}px;\n      width: ${props => props.width}px;\n    }\n  }\n`\n"]}

package/lib/Compass.d.ts

@@ -0,0 +1,20 @@
+import { PureComponent } from 'react';
+import { CSSProperties } from 'styled-components';
+export interface Props {
+    className?: string;
+    style: CSSProperties;
+    angle: number;
+    fov: number;
+    radius: number;
+    highlightThickness: number;
+    highlightColor: string;
+    trackColor: string;
+    trackDasharray: string;
+    trackThickness: number;
+}
+export default class Compass extends PureComponent<Props> {
+    static defaultProps: Partial<Props>;
+    render(): JSX.Element;
+    private polarToCartesian;
+    private describeArc;
+}

package/lib/Compass.js

@@ -62,14 +62,14 @@ var Compass = (function (_super) {
     Compass.prototype.render = function () {
         var _a = this.props, className = _a.className, highlightColor = _a.highlightColor, highlightThickness = _a.highlightThickness, radius = _a.radius, trackColor = _a.trackColor, trackDasharray = _a.trackDasharray, trackThickness = _a.trackThickness, style = _a.style;
         var diameter = radius * 2;
-        return (react_1.default.createElement(StyledRoot, { className: className, style: __assign(__assign({}, style), { width: diameter + "px", height: diameter + "px" }) },
+        return (react_1.default.createElement(StyledRoot, { className: className, style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) },
             react_1.default.createElement(StyledCircle, null,
-                react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: diameter, height: diameter, viewBox: "0 0 " + diameter + " " + diameter },
+                react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
                     react_1.default.createElement("circle", { cx: radius, cy: radius, r: radius - trackThickness / 2, fill: 'none', stroke: trackColor, strokeWidth: trackThickness, strokeDasharray: trackDasharray }))),
             react_1.default.createElement(StyledHighlight, { style: {
-                    transform: "rotate(" + (this.props.angle + 360) % 360 + "deg)",
+                    transform: "rotate(".concat((this.props.angle + 360) % 360, "deg)"),
                 } },
-                react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: diameter, height: diameter, viewBox: "0 0 " + diameter + " " + diameter },
+                react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
                     react_1.default.createElement("path", { fill: 'none', stroke: highlightColor, strokeWidth: highlightThickness, d: this.describeArc(radius, radius, radius - highlightThickness / 2 - (trackThickness - highlightThickness) / 2, -this.props.fov / 2, this.props.fov / 2) })))));
     };
     Compass.prototype.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {

package/lib/Compass.js.map

@@ -1 +1 @@
-{"version":3,"file":"Compass.js","sourceRoot":"/","sources":["Compass.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4C;AAC5C,wEAAyD;AAmEzD;IAAqC,2BAAoB;IAAzD;;IAqFA,CAAC;IA1EC,wBAAM,GAAN;QACQ,IAAA,KAA+G,IAAI,CAAC,KAAK,EAAvH,SAAS,eAAA,EAAE,cAAc,oBAAA,EAAE,kBAAkB,wBAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,cAAc,oBAAA,EAAE,cAAc,oBAAA,EAAE,KAAK,WAAe,CAAA;QAC/H,IAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,CAAA;QAE3B,OAAO,CACL,8BAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,KAAK,wBACA,KAAK,KACR,KAAK,EAAK,QAAQ,OAAI,EACtB,MAAM,EAAK,QAAQ,OAAI;YAGzB,8BAAC,YAAY;gBACX,uCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE,SAAO,QAAQ,SAAI,QAAU;oBAEtC,0CACE,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,CAAC,EAC9B,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,cAAc,EAC3B,eAAe,EAAE,cAAc,GAC/B,CACE,CACO;YACf,8BAAC,eAAe,IACd,KAAK,EAAE;oBACL,SAAS,EAAE,YAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,SAAM;iBAC1D;gBAED,uCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE,SAAO,QAAQ,SAAI,QAAU;oBAEtC,wCACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,cAAc,EACtB,WAAW,EAAE,kBAAkB,EAC/B,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,kBAAkB,GAAG,CAAC,GAAG,CAAC,cAAc,GAAG,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,GACzJ,CACE,CACU,CACP,CACd,CAAA;IACH,CAAC;IAEO,kCAAgB,GAAxB,UAAyB,OAAe,EAAE,OAAe,EAAE,MAAc,EAAE,cAAsB;QAC/F,IAAM,cAAc,GAAG,CAAC,cAAc,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAA;QAE9D,OAAO;YACL,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YAChD,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACjD,CAAA;IACH,CAAC;IAEO,6BAAW,GAAnB,UAAoB,CAAS,EAAE,CAAS,EAAE,MAAc,EAAE,UAAkB,EAAE,QAAgB;QAC5F,IAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;QAC3D,IAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,CAAA;QAC3D,IAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;QAC7D,IAAM,CAAC,GAAG;YACR,GAAG,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;YACrB,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;SACtD,CAAA;QAED,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpB,CAAC;IAnFM,oBAAY,GAAmB;QACpC,cAAc,EAAE,MAAM;QACtB,kBAAkB,EAAE,EAAE;QACtB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,UAAU,EAAE,MAAM;QAClB,cAAc,EAAE,GAAG;QACnB,cAAc,EAAE,CAAC;KAClB,CAAA;IA4EH,cAAC;CAAA,AArFD,CAAqC,qBAAa,GAqFjD;kBArFoB,OAAO;AAuF5B,IAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,mLAAA,gHAO9B,IAAA,CAAA;AAED,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,2WAAA,wSAiBjC,IAAA,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,qHAAA,kDAG5B,IAAA,CAAA","sourcesContent":["import React, { PureComponent } from 'react'\nimport styled, { CSSProperties } from 'styled-components'\n\nexport interface Props {\n  /**\n   * Class attribute of the component.\n   * @optional\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   * @optional\n   */\n  style: CSSProperties\n\n  /**\n   * Current angle reading of the compass, between 0 - 360 (degrees), inclusive.\n   */\n  angle: number\n\n  /**\n   * Field of view expressed in angles, must be between 0 and 360, exclusive.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of\n   *          an image that is 1000 x 500, and the window size is 500 x 500,\n   *          that would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n   */\n  fov: number\n\n  /**\n   * Radius of the component.\n   * @optional\n   */\n  radius: number\n\n  /**\n   * The thickness of the highlight indicator.\n   * @optional\n   */\n  highlightThickness: number\n\n  /**\n   * Color of the highlight indicator.\n   * @optional\n   */\n  highlightColor: string\n\n  /**\n   * The color of the circular compass track.\n   * @optional\n   */\n  trackColor: string\n\n  /**\n   * The `stroke-dasharray` attribute provided to the circular compass track.\n   * @optional\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray}\n   */\n  trackDasharray: string\n\n  /**\n   * The thickness of the circular compass track.\n   * @optional\n   */\n  trackThickness: number\n}\n\nexport default class Compass extends PureComponent<Props> {\n  static defaultProps: Partial<Props> = {\n    highlightColor: '#fff',\n    highlightThickness: 10,\n    radius: 50,\n    style: {},\n    trackColor: '#fff',\n    trackDasharray: '4',\n    trackThickness: 2,\n  }\n\n  render() {\n    const { className, highlightColor, highlightThickness, radius, trackColor, trackDasharray, trackThickness, style } = this.props\n    const diameter = radius * 2\n\n    return (\n      <StyledRoot\n        className={className}\n        style={{\n          ...style,\n          width: `${diameter}px`,\n          height: `${diameter}px`,\n        }}\n      >\n        <StyledCircle>\n          <svg\n            xmlns='http://www.w3.org/2000/svg'\n            width={diameter}\n            height={diameter}\n            viewBox={`0 0 ${diameter} ${diameter}`}\n          >\n            <circle\n              cx={radius}\n              cy={radius}\n              r={radius - trackThickness / 2}\n              fill='none'\n              stroke={trackColor}\n              strokeWidth={trackThickness}\n              strokeDasharray={trackDasharray}\n            />\n          </svg>\n        </StyledCircle>\n        <StyledHighlight\n          style={{\n            transform: `rotate(${(this.props.angle + 360) % 360}deg)`,\n          }}\n        >\n          <svg\n            xmlns='http://www.w3.org/2000/svg'\n            width={diameter}\n            height={diameter}\n            viewBox={`0 0 ${diameter} ${diameter}`}\n          >\n            <path\n              fill='none'\n              stroke={highlightColor}\n              strokeWidth={highlightThickness}\n              d={this.describeArc(radius, radius, radius - highlightThickness / 2 - (trackThickness - highlightThickness) / 2, -this.props.fov / 2, this.props.fov / 2)}\n            />\n          </svg>\n        </StyledHighlight>\n      </StyledRoot>\n    )\n  }\n\n  private 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\n  private describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n    const start = this.polarToCartesian(x, y, radius, endAngle)\n    const end = this.polarToCartesian(x, y, radius, startAngle)\n    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n    const d = [\n      'M', start.x, start.y,\n      'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n    ]\n\n    return d.join(' ')\n  }\n}\n\nconst StyledCircle = styled.div`\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  transform-origin: center;\n`\n\nconst StyledHighlight = styled.div`\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  transform-origin: center;\n\n  svg {\n    top: 0;\n    right: 0;\n    overflow: visible;\n    position: absolute;\n  }\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}
+{"version":3,"file":"Compass.js","sourceRoot":"/","sources":["Compass.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { PureComponent } from 'react'\nimport styled, { CSSProperties } from 'styled-components'\n\nexport interface Props {\n  /**\n   * Class attribute of the component.\n   * @optional\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   * @optional\n   */\n  style: CSSProperties\n\n  /**\n   * Current angle reading of the compass, between 0 - 360 (degrees), inclusive.\n   */\n  angle: number\n\n  /**\n   * Field of view expressed in angles, must be between 0 and 360, exclusive.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of\n   *          an image that is 1000 x 500, and the window size is 500 x 500,\n   *          that would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n   */\n  fov: number\n\n  /**\n   * Radius of the component.\n   * @optional\n   */\n  radius: number\n\n  /**\n   * The thickness of the highlight indicator.\n   * @optional\n   */\n  highlightThickness: number\n\n  /**\n   * Color of the highlight indicator.\n   * @optional\n   */\n  highlightColor: string\n\n  /**\n   * The color of the circular compass track.\n   * @optional\n   */\n  trackColor: string\n\n  /**\n   * The `stroke-dasharray` attribute provided to the circular compass track.\n   * @optional\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray}\n   */\n  trackDasharray: string\n\n  /**\n   * The thickness of the circular compass track.\n   * @optional\n   */\n  trackThickness: number\n}\n\nexport default class Compass extends PureComponent<Props> {\n  static defaultProps: Partial<Props> = {\n    highlightColor: '#fff',\n    highlightThickness: 10,\n    radius: 50,\n    style: {},\n    trackColor: '#fff',\n    trackDasharray: '4',\n    trackThickness: 2,\n  }\n\n  render() {\n    const { className, highlightColor, highlightThickness, radius, trackColor, trackDasharray, trackThickness, style } = this.props\n    const diameter = radius * 2\n\n    return (\n      <StyledRoot\n        className={className}\n        style={{\n          ...style,\n          width: `${diameter}px`,\n          height: `${diameter}px`,\n        }}\n      >\n        <StyledCircle>\n          <svg\n            xmlns='http://www.w3.org/2000/svg'\n            width={diameter}\n            height={diameter}\n            viewBox={`0 0 ${diameter} ${diameter}`}\n          >\n            <circle\n              cx={radius}\n              cy={radius}\n              r={radius - trackThickness / 2}\n              fill='none'\n              stroke={trackColor}\n              strokeWidth={trackThickness}\n              strokeDasharray={trackDasharray}\n            />\n          </svg>\n        </StyledCircle>\n        <StyledHighlight\n          style={{\n            transform: `rotate(${(this.props.angle + 360) % 360}deg)`,\n          }}\n        >\n          <svg\n            xmlns='http://www.w3.org/2000/svg'\n            width={diameter}\n            height={diameter}\n            viewBox={`0 0 ${diameter} ${diameter}`}\n          >\n            <path\n              fill='none'\n              stroke={highlightColor}\n              strokeWidth={highlightThickness}\n              d={this.describeArc(radius, radius, radius - highlightThickness / 2 - (trackThickness - highlightThickness) / 2, -this.props.fov / 2, this.props.fov / 2)}\n            />\n          </svg>\n        </StyledHighlight>\n      </StyledRoot>\n    )\n  }\n\n  private 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\n  private describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n    const start = this.polarToCartesian(x, y, radius, endAngle)\n    const end = this.polarToCartesian(x, y, radius, startAngle)\n    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n    const d = [\n      'M', start.x, start.y,\n      'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n    ]\n\n    return d.join(' ')\n  }\n}\n\nconst StyledCircle = styled.div`\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  transform-origin: center;\n`\n\nconst StyledHighlight = styled.div`\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  transform-origin: center;\n\n  svg {\n    top: 0;\n    right: 0;\n    overflow: visible;\n    position: absolute;\n  }\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}

package/lib/DebugConsole.d.ts

@@ -0,0 +1,25 @@
+import React, { CSSProperties, PureComponent } from 'react';
+export interface Props {
+    className?: string;
+    style: CSSProperties;
+    margin: number;
+    maxEntries: number;
+    align: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
+    message?: string;
+    title?: string;
+}
+export interface State {
+    messages: string[];
+}
+export default class DebugConsole extends PureComponent<Props, State> {
+    static defaultProps: Partial<Props>;
+    nodeRefs: {
+        messages: React.RefObject<HTMLDivElement>;
+    };
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    push(message: string): void;
+    clear(): void;
+    render(): JSX.Element;
+    private getStyleByAlignment;
+}

package/lib/DebugConsole.js

@@ -123,19 +123,19 @@ var DebugConsole = (function (_super) {
         var _a;
         return (react_1.default.createElement(StyledRoot, { className: this.props.className, style: __assign(__assign(__assign({}, this.props.style), { margin: 0, position: 'fixed' }), this.getStyleByAlignment(this.props.align)) },
             react_1.default.createElement("h6", null, (_a = this.props.title) !== null && _a !== void 0 ? _a : 'Untitled'),
-            react_1.default.createElement("div", { ref: this.nodeRefs.messages }, this.state.messages.map(function (v, i) { return (react_1.default.createElement("span", { key: "item-" + i, dangerouslySetInnerHTML: { __html: v } })); }))));
+            react_1.default.createElement("div", { ref: this.nodeRefs.messages }, this.state.messages.map(function (v, i) { return (react_1.default.createElement("span", { key: "item-".concat(i), dangerouslySetInnerHTML: { __html: v } })); }))));
     };
     DebugConsole.prototype.getStyleByAlignment = function (align) {
         switch (align) {
-            case 'tl': return { top: this.props.margin + "px", left: this.props.margin + "px" };
-            case 'tc': return { top: this.props.margin + "px", left: 0, right: 0, margin: '0 auto' };
-            case 'tr': return { top: this.props.margin + "px", right: this.props.margin + "px" };
-            case 'cl': return { top: 0, left: this.props.margin + "px", bottom: 0, margin: 'auto 0' };
+            case 'tl': return { top: "".concat(this.props.margin, "px"), left: "".concat(this.props.margin, "px") };
+            case 'tc': return { top: "".concat(this.props.margin, "px"), left: 0, right: 0, margin: '0 auto' };
+            case 'tr': return { top: "".concat(this.props.margin, "px"), right: "".concat(this.props.margin, "px") };
+            case 'cl': return { top: 0, left: "".concat(this.props.margin, "px"), bottom: 0, margin: 'auto 0' };
             case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' };
-            case 'cr': return { top: 0, bottom: 0, right: this.props.margin + "px", margin: 'auto 0' };
-            case 'bl': return { bottom: this.props.margin + "px", left: this.props.margin + "px" };
-            case 'bc': return { bottom: this.props.margin + "px", left: 0, right: 0, margin: '0 auto' };
-            default: return { bottom: this.props.margin + "px", right: this.props.margin + "px" };
+            case 'cr': return { top: 0, bottom: 0, right: "".concat(this.props.margin, "px"), margin: 'auto 0' };
+            case 'bl': return { bottom: "".concat(this.props.margin, "px"), left: "".concat(this.props.margin, "px") };
+            case 'bc': return { bottom: "".concat(this.props.margin, "px"), left: 0, right: 0, margin: '0 auto' };
+            default: return { bottom: "".concat(this.props.margin, "px"), right: "".concat(this.props.margin, "px") };
         }
     };
     DebugConsole.defaultProps = {