etudes 1.2.0 → 2.1.0

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProperties } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type ButtonCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isActive: boolean\n}>\n\n/**\n * Type constraint of the data passed to each item in the component.\n */\nexport type DataProps<T = Record<string, any>> = T & {\n  label?: string\n}\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, any>> = ListItemComponentProps<DataProps<T>>\n\nexport type Props<T = Record<string, any>> = {\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 of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: DataProps<T>[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  defaultSelectedItemIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the dropdown button itself.\n   */\n  borderColor?: string\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to the dropdown button.\n   */\n  buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>\n}\n\nexport interface State {\n  /**\n   * Index of the currently selected item. Any value less than 0 indicates that\n   * no item is selected.\n   */\n  selectedItemIndex: number\n\n  /**\n   * Indicates if the dropdown menu is collapsed.\n   */\n  isCollapsed: boolean\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default class Dropdown<T = Record<string, any>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedItemIndex: this.props.defaultSelectedItemIndex ?? -1,\n      isCollapsed: true,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  componentDidMount() {\n    window.addEventListener('click', this.onClickOutside)\n    this.props.onIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('click', this.onClickOutside)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      this.props.onIndexChange?.(this.state.selectedItemIndex)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 1\n    const orientation = this.props.orientation ?? 'vertical'\n    const itemLength = this.props.itemLength ?? (orientation === 'vertical' ? this.rect.height : this.rect.width)\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const isTogglable = this.props.isTogglable ?? true\n    const itemPadding = this.props.itemPadding ?? 0\n    const numItems = this.props.data.length\n    const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n    const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        isInverted={this.props.isInverted ?? false}\n        ref={this.nodeRefs.root}\n        style={this.props.style ?? {}}\n      >\n        <StyledToggle\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          extendedCSS={this.props.buttonCSS ?? (() => css``)}\n          isActive={!this.state.isCollapsed}\n          onClick={() => this.toggle()}\n        >\n          <label>\n            {this.state.selectedItemIndex === -1 ? (this.props.defaultLabel ?? 'Select') : this.props.data[this.state.selectedItemIndex].label}\n          </label>\n          {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n        </StyledToggle>\n        <StyledItemList\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          data={this.props.data}\n          defaultSelectedIndex={this.props.defaultSelectedItemIndex ?? -1}\n          isInverted={this.props.isInverted ?? false}\n          isTogglable={isTogglable}\n          itemComponentType={this.props.itemComponentType as any} // HACK: Generic types cannot be inferred by props, so this is the only way.\n          itemPadding={itemPadding}\n          onDeselectAt={idx => this.selectItemAt(-1)}\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: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          } : {\n            width: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          }}\n        />\n      </StyledRoot>\n    )\n  }\n\n  /**\n   * Indicates if the item at the specified index is selected.\n   *\n   * @param index - The index of the item.\n   *\n   * @returns `true` if the item at the specified index is selected, `false`\n   *          otherwise.\n   */\n  isItemSelectedAt(index: number) {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  /**\n   * Selects the item at the specified index.\n   *\n   * @param index - The index of the item to select.\n   */\n  selectItemAt(index: number) {\n    this.setState({\n      selectedItemIndex: index,\n      isCollapsed: true,\n    })\n  }\n\n  /**\n   * Expands the menu, revealing its items.\n   */\n  expand() {\n    if (!this.state.isCollapsed) return\n    this.setState({ isCollapsed: false })\n  }\n\n  /**\n   * Collapses the menu, concealing its items.\n   */\n  collapse() {\n    if (this.state.isCollapsed) return\n    this.setState({ isCollapsed: true })\n  }\n\n  /**\n   * Toggles the visibility of the menu.\n   */\n  toggle() {\n    if (this.state.isCollapsed) {\n      this.expand()\n    }\n    else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Handler invoked when click input is detected outside of the root element\n   * of the component.\n   *\n   * @param event - The MouseEvent passed to the handler.\n   */\n  private onClickOutside = (event: MouseEvent) => {\n    if (this.state.isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === this.nodeRefs.root.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    this.collapse()\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  isInverted: boolean\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ${props => props.orientation === 'vertical' ? css`\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ${props.isInverted ? css`\n      margin-bottom: ${props.itemPadding - props.borderThickness}px;\n      bottom: 100%;\n    ` : css`\n      top: 100%;\n      margin-top: ${props.itemPadding - props.borderThickness}px;\n    `}\n  ` : css`\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ${props.isInverted ? css`\n      margin-right: ${props.itemPadding - props.borderThickness}px;\n      right: 100%;\n    ` : css`\n      left: 100%;\n      margin-left: ${props.itemPadding - props.borderThickness}px;\n    `}\n  `}\n`\n\nconst StyledToggle = styled.button<ButtonCSSProps & ExtendedCSSProps<ButtonCSSProps>>`\n  > span {\n    height: 15px;\n    width: 15px;\n  }\n\n  > label {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    letter-spacing: inherit;\n    line-height: inherit;\n  }\n\n  ${props => props.extendedCSS(props)}\n\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: space-between;\n  left: 0;\n  margin: 0;\n  outline: none;\n  padding: 0 10px;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n\n  ${props => props.borderThickness > 0 && css`\n    border: ${props.borderThickness}px solid ${props.borderColor};\n  `}\n\n  > span {\n    box-sizing: border-box;\n    display: block;\n    transform-origin: center;\n\n    svg {\n      height: 100%;\n      width: auto;\n    }\n  }\n`\n\nconst StyledRoot = styled.div<{\n  isInverted: boolean\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0;\n  overflow: visible;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: ${props.isInverted ? 'column-reverse' : 'column'};\n    height: 50px;\n    width: 200px;\n  ` : css`\n    flex-direction: ${props.isInverted ? 'row-reverse' : 'row'};\n    height: 200px;\n    width: 50px;\n  `}\n`\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref, useEffect, useRef, useState } from 'react'\nimport FlatSVG from './FlatSVG'\nimport useElementRect from './hooks/useElementRect'\nimport List, { ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type DropdownData = {\n  label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: T[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  selectedIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<DropdownItemProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  defaultLabel = 'Select',\n  expandIconSvg,\n  isInverted = false,\n  isTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onIndexChange,\n  ...props\n}, ref) => {\n  const selectItemAt = (index: number) => {\n    setSelectedIndex(index)\n    setIsCollapsed(true)\n  }\n\n  const expand = () => {\n    if (!isCollapsed) return\n    setIsCollapsed(false)\n  }\n\n  const collapse = () => {\n    if (isCollapsed) return\n    setIsCollapsed(true)\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\n  const clickOutsideHandler = (event: MouseEvent) => {\n    if (isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === bodyRef.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    collapse()\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const [isCollapsed, setIsCollapsed] = useState(true)\n  const rect = useElementRect(bodyRef)\n\n  useEffect(() => {\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    onIndexChange?.(selectedIndex)\n  }, [selectedIndex])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = data.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n  const components = asComponentDict(children, {\n    toggle: DropdownToggle,\n    expandIcon: DropdownExpandIcon,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      borderWidth: `${borderThickness}px`,\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n    },\n    expandIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding - borderThickness}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding - borderThickness}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding - borderThickness}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding - borderThickness}px`,\n        },\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {cloneStyledElement(components.toggle ?? <button style={defaultStyles.toggle}/>, {\n          className: classNames(fixedClassNames.toggle),\n          style: styles(fixedStyles.toggle),\n          onClick: () => toggle(),\n        }, ...[\n          <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndex === -1 ? defaultLabel : data[selectedIndex].label ?? '' }}/>,\n          cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n            className: classNames(fixedClassNames.expandIcon),\n            style: styles(fixedStyles.expandIcon),\n          }),\n        ])}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          borderThickness={borderThickness}\n          data={data}\n          isSelectable={true}\n          isTogglable={false}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          orientation={orientation}\n          selectedIndex={selectedIndex}\n          onDeselectAt={idx => selectItemAt(-1)}\n          onSelectAt={idx => selectItemAt(idx)}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const DropdownExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/Each.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-export declare type Props<T> = {
+export type EachProps<T> = {
     children?: ReactNode | ((value: T, index: number) => ReactNode);
     in?: T[];
     render?: (value: T, index: number) => ReactNode;
 };
-export default function Each<T>({ in: array, children, render, }: Props<T>): JSX.Element;
+export default function Each<T>({ in: array, children, render, }: EachProps<T>): JSX.Element;

package/lib/Each.js.map

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

package/lib/ExtractChild.d.ts

@@ -1,8 +1,9 @@
 import React, { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLElement>;
+export type ExtractChildProps = HTMLAttributes<HTMLElement>;
 /**
- * Extracts a single child of a parent component into its own component. If the parent component has
- * multiple children, only the first one will be extracted, the rest will be ignored.
+ * Extracts a single child of a parent component into its own component. If the
+ * parent component has multiple children, only the first one will be extracted,
+ * the rest will be ignored.
  */
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+declare const _default: React.ForwardRefExoticComponent<ExtractChildProps & React.RefAttributes<HTMLElement>>;
 export default _default;

package/lib/ExtractChild.js

@@ -48,26 +48,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var classnames_1 = __importDefault(require("classnames"));
-var lodash_1 = __importDefault(require("lodash"));
 var react_1 = __importStar(require("react"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
 /**
- * Extracts a single child of a parent component into its own component. If the parent component has
- * multiple children, only the first one will be extracted, the rest will be ignored.
+ * Extracts a single child of a parent component into its own component. If the
+ * parent component has multiple children, only the first one will be extracted,
+ * the rest will be ignored.
  */
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    if (lodash_1.default.isArray(children)) {
-        /* eslint-disable-next-line no-console */
+    var children = _a.children, props = __rest(_a, ["children"]);
+    if (Array.isArray(children)) {
         console.error("[etudes::ExtractChild] Only one child is expected, but found ".concat(children.length, ". Only the first child is extracted while the rest are discarded."));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child, idx) {
-        if (idx > 0)
+        if (idx > 0) {
             return undefined;
-        if ((0, react_1.isValidElement)(child)) {
-            return (0, react_1.cloneElement)(child, __assign(__assign({ className: (0, classnames_1.default)(className, child.props.className) }, props), { ref: ref }));
         }
-        return child;
+        else if ((0, react_1.isValidElement)(child)) {
+            return (0, cloneStyledElement_1.default)(child, __assign(__assign({}, props), { ref: ref }));
+        }
+        else {
+            return child;
+        }
     })));
 });
 //# sourceMappingURL=ExtractChild.js.map

package/lib/ExtractChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,kDAAsB;AACtB,6CAAiG;AAIjG;;;GAGG;AACH,kBAAe,IAAA,kBAAU,EAAqB,UAAC,EAI9C,EAAE,GAAG;IAHJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAHqC,yBAI9C,CADS;IAER,IAAI,gBAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACvB,yCAAyC;QACzC,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC;YAAE,OAAO,SAAS,CAAA;QAE7B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,sBAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;SACvG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { Children, cloneElement, forwardRef, HTMLAttributes, isValidElement } from 'react'\n\nexport type Props = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the parent component has\n * multiple children, only the first one will be extracted, the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, Props>(({\n  children,\n  className,\n  ...props\n}, ref) => {\n  if (_.isArray(children)) {\n    /* eslint-disable-next-line no-console */\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) return undefined\n\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props, ref })\n        }\n\n        return child\n      })}\n    </>\n  )\n})\n"]}
+{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmF;AACnF,kFAA2D;AAI3D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAiC,UAAC,EAG1D,EAAE,GAAG;IAFJ,IAAA,QAAQ,cAAA,EACL,KAAK,cAFiD,YAG1D,CADS;IAER,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC,EAAE;YACX,OAAO,SAAS,CAAA;SACjB;aACI,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAA,4BAAkB,EAAC,KAAK,EAAE,sBAAK,KAAK,KAAE,GAAG,KAAA,GAAS,CAAC,CAAA;SAC3D;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { Children, forwardRef, HTMLAttributes, isValidElement } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the\n * parent component has multiple children, only the first one will be extracted,\n * the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, ExtractChildProps>(({\n  children,\n  ...props\n}, ref) => {\n  if (Array.isArray(children)) {\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) {\n          return undefined\n        }\n        else if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props, ref } as any)\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n})\n"]}

package/lib/ExtractChildren.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLElement>;
+export type ExtractChildrenProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts all children of a parent component into its own component.
  */
-export default function ExtractChildren({ children, className, ...props }: Props): JSX.Element;
+export default function ExtractChildren({ children, ...props }: ExtractChildrenProps): JSX.Element;

package/lib/ExtractChildren.js

@@ -48,18 +48,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
 /**
  * Extracts all children of a parent component into its own component.
  */
 function ExtractChildren(_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child, idx) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child) {
         if ((0, react_1.isValidElement)(child)) {
-            return (0, react_1.cloneElement)(child, __assign({ className: (0, classnames_1.default)(className, child.props.className) }, props));
+            return (0, cloneStyledElement_1.default)(child, __assign({}, props));
+        }
+        else {
+            return child;
         }
-        return child;
     })));
 }
 exports.default = ExtractChildren;

package/lib/ExtractChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAqF;AAIrF;;GAEG;AACH,SAAwB,eAAe,CAAC,EAIhC;IAHN,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAH8B,yBAIvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,aAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,EAAG,CAAA;SAClG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement } from 'react'\n\nexport type Props = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  className,\n  ...props\n}: Props) {\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props })\n        }\n\n        return child\n      })}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,kFAA2D;AAI3D;;GAEG;AACH,SAAwB,eAAe,CAAC,EAGjB;IAFrB,IAAA,QAAQ,cAAA,EACL,KAAK,cAF8B,YAGvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,4BAAkB,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;SAC/C;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import React, { Children, HTMLAttributes, isValidElement } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildrenProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  ...props\n}: ExtractChildrenProps) {\n  return (\n    <>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props })\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n}\n"]}

package/lib/FlatSVG.d.ts

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

package/lib/FlatSVG.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -73,12 +69,36 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+/**
+ * A component whose root element wraps an SVG markup. When wrapping the SVG, it
+ * will attempt to sanitize the markup (i.e. stripping useless attributes)
+ * according to the props specified.
+ */
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var svg = _a.svg, _b = _a.stripClasses, stripClasses = _b === void 0 ? true : _b, _c = _a.stripExtraneousAttributes, stripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.stripIds, stripIds = _d === void 0 ? true : _d, _e = _a.stripStyles, stripStyles = _e === void 0 ? true : _e, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["svg", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "whitelistedAttributes"]);
+    var sanitizedMarkup = function () {
+        var mockContainer = document.createElement('div');
+        mockContainer.innerHTML = svg;
+        var elements = mockContainer.getElementsByTagName('svg');
+        if (elements.length > 1)
+            throw new Error('More than one SVG element found in provided markup');
+        var svgElement = elements[0];
+        if (!svgElement)
+            throw new Error('No SVG in provided markup');
+        if (stripExtraneousAttributes)
+            removeAttributes(svgElement, undefined, false, __spreadArray(__spreadArray([], __read(whitelistedAttributes), false), ['style', 'class', 'id'], false));
+        if (stripIds)
+            removeAttributes(svgElement, ['id'], true);
+        if (stripClasses)
+            removeAttributes(svgElement, ['class'], true);
+        if (stripStyles)
+            removeStyles(svgElement);
+        return svgElement.outerHTML;
+    };
+    return (react_1.default.createElement("figure", __assign({}, props, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() } })));
+});
 function removeStyles(element) {
     element.removeAttribute('style');
     var inlineStyles = element.getElementsByTagName('style');
@@ -111,33 +131,4 @@ function removeAttributes(element, attributes, recursive, whitelist) {
         }
     }
 }
-/**
- * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
- * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
- */
-exports.default = (0, react_1.forwardRef)(function (_a, ref) {
-    var markup = _a.markup, _b = _a.stripClasses, stripClasses = _b === void 0 ? true : _b, _c = _a.stripExtraneousAttributes, stripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.stripIds, stripIds = _d === void 0 ? true : _d, _e = _a.stripStyles, stripStyles = _e === void 0 ? true : _e, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["markup", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "whitelistedAttributes"]);
-    function sanitizedMarkup() {
-        var mockContainer = document.createElement('div');
-        mockContainer.innerHTML = markup;
-        var elements = mockContainer.getElementsByTagName('svg');
-        if (elements.length > 1)
-            throw new Error('More than one SVG element found in provided markup');
-        var svgElement = elements[0];
-        if (!svgElement)
-            throw new Error('No SVG in provided markup');
-        if (stripExtraneousAttributes)
-            removeAttributes(svgElement, undefined, false, __spreadArray(__spreadArray([], __read(whitelistedAttributes), false), ['style', 'class', 'id'], false));
-        if (stripIds)
-            removeAttributes(svgElement, ['id'], true);
-        if (stripClasses)
-            removeAttributes(svgElement, ['class'], true);
-        if (stripStyles)
-            removeStyles(svgElement);
-        return svgElement.outerHTML;
-    }
-    return (react_1.default.createElement(StyledRoot, __assign({ ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() } }, props)));
-});
-var StyledRoot = styled_components_1.default.figure(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n  }\n"])));
-var templateObject_1;
 //# sourceMappingURL=FlatSVG.js.map

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  markup: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and all of its child\n   * nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root node. The\n   * `whitelistedAttributes` prop defines what attributes should be kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its\n   * child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root\n   * node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is\n   * enabled. By default, only `viewBox` is whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to\n * sanitize the markup (i.e. stripping useless attributes) according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, Props>(({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  function sanitizedMarkup(): string {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = markup\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <StyledRoot\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      {...props}\n    />\n  )\n})\n\nconst StyledRoot = styled.figure`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n  }\n`\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  svg: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and\n   * all of its child nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root\n   * node. The `whitelistedAttributes` prop defines what attributes should be\n   * kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node\n   * and all of its child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be\n   * removed in the SVG root node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `stripExtraneousAttributes` is enabled. By default, only `viewBox` is\n   * whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  const sanitizedMarkup = () => {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = svg\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <figure\n      {...props}\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n    />\n  )\n})\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n"]}