etudes 0.37.0 → 0.41.0

package/lib/BurgerButton.d.ts

@@ -1,37 +1,16 @@
-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;
+import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
+export declare type Props = HTMLAttributes<HTMLButtonElement> & {
+    isActive?: boolean;
+    isDoubleJointed?: boolean;
+    isLastBarHalfWidth?: 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;
+    cssBar?: CSSProp<any>;
+};
+export default function BurgerButton({ isActive: externalIsActive, isDoubleJointed, isLastBarHalfWidth, height, thickness, width, tintColor, transitionDuration, onActivate, onDeactivate, cssBar, ...props }: Props): JSX.Element;

package/lib/BurgerButton.js

@@ -1,23 +1,19 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -37,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -53,79 +60,39 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    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 classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var BurgerButton = /** @class */ (function (_super) {
-    __extends(BurgerButton, _super);
-    function BurgerButton(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            isActive: _this.props.isActiveByDefault,
-        };
-        return _this;
-    }
-    BurgerButton.prototype.toggle = function () {
-        if (this.state.isActive) {
-            this.deactivate();
+var Group_1 = __importDefault(require("./Group"));
+function BurgerButton(_a) {
+    var _b = _a.isActive, externalIsActive = _b === void 0 ? false : _b, _c = _a.isDoubleJointed, isDoubleJointed = _c === void 0 ? false : _c, _d = _a.isLastBarHalfWidth, isLastBarHalfWidth = _d === void 0 ? false : _d, _e = _a.height, height = _e === void 0 ? 20 : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.width, width = _g === void 0 ? 20 : _g, _h = _a.tintColor, tintColor = _h === void 0 ? '#000' : _h, _j = _a.transitionDuration, transitionDuration = _j === void 0 ? 200 : _j, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, cssBar = _a.cssBar, props = __rest(_a, ["isActive", "isDoubleJointed", "isLastBarHalfWidth", "height", "thickness", "width", "tintColor", "transitionDuration", "onActivate", "onDeactivate", "cssBar"]);
+    var _k = __read((0, react_1.useState)(externalIsActive), 2), isActive = _k[0], setIsActive = _k[1];
+    (0, react_1.useEffect)(function () {
+        if (isActive !== externalIsActive) {
+            setIsActive(externalIsActive);
+        }
+    }, [externalIsActive]);
+    (0, react_1.useEffect)(function () {
+        if (isActive) {
+            onActivate === null || onActivate === void 0 ? void 0 : onActivate();
         }
         else {
-            this.activate();
+            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
         }
-    };
-    BurgerButton.prototype.activate = function () {
-        if (this.state.isActive)
-            return;
-        this.setState({ isActive: true });
-        if (this.props.onActivate)
-            this.props.onActivate();
-    };
-    BurgerButton.prototype.deactivate = function () {
-        if (!this.state.isActive)
-            return;
-        this.setState({ isActive: false });
-        if (this.props.onDeactivate)
-            this.props.onDeactivate();
-    };
-    BurgerButton.prototype.render = function () {
-        var _this = this;
-        var w = this.props.width * 0.5;
-        var h = this.props.height * 0.5;
-        var t = this.props.thickness * 0.5;
-        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-".concat(i) },
-            react_1.default.createElement("span", null),
-            react_1.default.createElement("span", null),
-            react_1.default.createElement("span", null))); })))));
-    };
-    BurgerButton.defaultProps = {
-        height: 20,
-        isActiveByDefault: false,
-        isDoubleJointed: true,
-        isFunky: false,
-        style: {},
-        thickness: 2,
-        tintColor: '#000',
-        transitionDuration: 200,
-        width: 20,
-    };
-    return BurgerButton;
-}(react_1.PureComponent));
+    }, [isActive]);
+    return (react_1.default.createElement(StyledRoot, __assign({ width: width, height: height, thickness: thickness, onClick: function () { return setIsActive(!isActive); } }, props),
+        react_1.default.createElement(Group_1.default, { count: isDoubleJointed ? 2 : 1 },
+            react_1.default.createElement(StyledJoint, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), height: height, isLastBarHalfWidth: isLastBarHalfWidth, thickness: thickness, width: width },
+                react_1.default.createElement(Group_1.default, { count: 3 },
+                    react_1.default.createElement(StyledBar, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), style: { height: "".concat(thickness, "px") }, css: cssBar }))))));
+}
 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, ".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;
+var StyledBar = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ", "\n"], ["\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ", "\n"])), function (props) { return props.css; });
+var StyledJoint = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ", ":nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ", ":nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ", ":nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      ", ":nth-child(1) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(2) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ", ":nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ", ":nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ", ":nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ", ":nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      ", ":nth-child(1) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(2) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ", ":nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n  }\n"])), StyledBar, StyledBar, function (props) { return props.height * .5 - props.thickness * .5; }, StyledBar, function (props) { return props.height - props.thickness; }, function (props) { return props.isLastBarHalfWidth ? '50%' : '100%'; }, StyledBar, function (props) { return "translate3d(0, ".concat(props.height * .5 - props.thickness * .5, "px, 0) rotate(45deg)"); }, StyledBar, function (props) { return 'translate3d(0, 0, 0) scale(0)'; }, StyledBar, function (props) { return "translate3d(0, ".concat(props.thickness * .5 - props.height * .5, "px, 0) rotate(-45deg)"); }, StyledBar, StyledBar, StyledBar, function (props) { return props.height * .5 - props.thickness * .5; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isLastBarHalfWidth ? 0 : '100%'; }, function (props) { return "translate3d(0, ".concat(props.height * .5 - props.thickness * .5, "px, 0) rotate(-45deg)"); }, function (props) { return "translate3d(0, ".concat(props.thickness * .5 - props.height * .5, "px, 0) rotate(45deg)"); });
+var StyledRoot = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __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  html:not(.touch) &:hover {\n    ", ":not(.half) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n\n    ", ".half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\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  html:not(.touch) &:hover {\n    ", ":not(.half) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n\n    ", ".half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n  }\n"])), function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.width; }, StyledJoint, function (props) { return props.width; }, StyledJoint, function (props) { return props.width * .5; });
+var templateObject_1, templateObject_2, templateObject_3;
 //# 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 classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled, { CSSProp } from 'styled-components'\nimport Group from './Group'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  height?: number\n  thickness?: number\n  width?: number\n  tintColor?: string\n  transitionDuration?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n  cssBar?: CSSProp<any>\n}\n\nexport default function BurgerButton({\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  height = 20,\n  thickness = 2,\n  width = 20,\n  tintColor = '#000',\n  transitionDuration = 200,\n  onActivate,\n  onDeactivate,\n  cssBar,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)} {...props}>\n      <Group count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Group count={3}>\n            <StyledBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }} css={cssBar}/>\n          </Group>\n        </StyledJoint>\n      </Group>\n    </StyledRoot>\n  )\n}\n\nconst StyledBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ${props => props.css}\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${StyledBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${StyledBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${StyledBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${StyledBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${StyledBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: 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  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}

package/lib/Dial.d.ts

@@ -20,27 +20,24 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     radius?: number;
     /**
      * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.
-     * Note that this overwrites the `stroke-width` set inside `knobCSS`.
+     * Note that this overwrites the `stroke-width` set inside `cssKnob`.
      */
     knobThickness?: number;
     /**
      * CSS of the knob, which is a `<path>` element.
      */
-    knobCSS?: CSSProp<any>;
+    cssKnob?: CSSProp<any>;
     /**
      * The thickness of the circular track, which is equivalent to the `stroke-width` of the
-     * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.
+     * `<circle>` element. Note that this overwrites the `stroke-width` set inside `cssTrack`.
      */
     trackThickness?: number;
     /**
      * CSS of the track, which is a `<circle>` element.
      */
-    trackCSS?: CSSProp<any>;
+    cssTrack?: CSSProp<any>;
 };
 /**
  * A circular dial with a knob and a track.
- *
- * @requires react
- * @requires styled-components
  */
-export default function Dial({ angle, radius, knobLength, knobThickness, knobCSS, trackThickness, trackCSS, style, ...props }: Props): JSX.Element;
+export default function Dial({ angle, radius, knobLength, knobThickness, cssKnob, trackThickness, cssTrack, style, ...props }: Props): JSX.Element;

package/lib/Dial.js

@@ -50,21 +50,18 @@ function arcPath(x, y, radius, startAngle, endAngle) {
 }
 /**
  * A circular dial with a knob and a track.
- *
- * @requires react
- * @requires styled-components
  */
 function Dial(_a) {
-    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, knobCSS = _a.knobCSS, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, trackCSS = _a.trackCSS, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "knobCSS", "trackThickness", "trackCSS", "style"]);
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, cssKnob = _a.cssKnob, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, cssTrack = _a.cssTrack, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "cssKnob", "trackThickness", "cssTrack", "style"]);
     var diameter = radius * 2;
     var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
     return (react_1.default.createElement(StyledRoot, __assign({ style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) }, props),
         react_1.default.createElement(StyledTrack, null,
             react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
-                react_1.default.createElement(StyledTrackCircle, { cx: radius, cy: radius, r: radius - trackThickness / 2, css: trackCSS, strokeWidth: trackThickness }))),
+                react_1.default.createElement(StyledTrackCircle, { cx: radius, cy: radius, r: radius - trackThickness / 2, css: cssTrack, strokeWidth: trackThickness }))),
         react_1.default.createElement(StyledKnob, { style: { transform: "rotate(".concat((angle + 360) % 360, "deg)") } },
             react_1.default.createElement("svg", { viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg' },
-                react_1.default.createElement(StyledKnobPath, { css: knobCSS, strokeWidth: knobThickness, d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2) })))));
+                react_1.default.createElement(StyledKnobPath, { css: cssKnob, strokeWidth: knobThickness, d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2) })))));
 }
 exports.default = Dial;
 var StyledTrack = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"], ["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"])));

package/lib/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n *\n * @requires react\n * @requires styled-components\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `cssKnob`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  cssKnob?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `cssTrack`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  cssTrack?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  cssKnob,\n  trackThickness = 2,\n  cssTrack,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={cssTrack}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={cssKnob} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}

package/lib/FlatSVG.d.ts

@@ -1,14 +1,42 @@
 import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
 export declare type Props = HTMLAttributes<HTMLDivElement> & {
-    isAnimated?: boolean;
-    fillColor?: string;
-    strokeColor?: string;
-    svgMarkup: string;
+    /**
+     * The SVG string markup, i.e. "<svg>...</svg>".
+     */
+    markup: string;
+    /**
+     * 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.
+     */
+    stripExtraneousAttributes?: boolean;
+    /**
+     * 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.
+     */
+    stripStyles?: boolean;
+    /**
+     * Extended CSS to be provided to the SVG root node.
+     */
+    cssSVG?: CSSProp<any>;
+    /**
+     * 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.
- *
- * @requires react
- * @requires styled-component
+ * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
+ * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
  */
-export default function FlatSVG({ isAnimated, fillColor, strokeColor, svgMarkup, ...props }: Props): JSX.Element;
+export default function FlatSVG({ markup, stripClasses, stripExtraneousAttributes, stripIds, stripStyles, cssSVG, whitelistedAttributes, ...props }: Props): JSX.Element;

package/lib/FlatSVG.js

@@ -14,25 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -44,23 +25,97 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    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 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function removeStyles(element) {
+    element.removeAttribute('style');
+    var inlineStyles = element.getElementsByTagName('style');
+    var numInlineStyles = inlineStyles.length;
+    for (var i = 0; i < numInlineStyles; i++) {
+        var inlineStyle = inlineStyles[i];
+        inlineStyle.remove();
+    }
+    var numChildren = element.children.length;
+    for (var i = 0; i < numChildren; i++) {
+        removeStyles(element.children[i]);
+    }
+}
+function removeAttributes(element, attributes, recursive, whitelist) {
+    if (attributes === void 0) { attributes = undefined; }
+    if (recursive === void 0) { recursive = false; }
+    if (whitelist === void 0) { whitelist = []; }
+    var attrs = attributes !== null && attributes !== void 0 ? attributes : element.getAttributeNames();
+    var numAttrs = attrs.length;
+    for (var i = 0; i < numAttrs; i++) {
+        var attr = attrs[i];
+        var keep = whitelist.indexOf(attr) > -1;
+        if (!keep)
+            element.removeAttribute(attr);
+    }
+    if (recursive) {
+        var numChildren = element.children.length;
+        for (var i = 0; i < numChildren; i++) {
+            removeAttributes(element.children[i], attributes, recursive, whitelist);
+        }
+    }
+}
 /**
- * A component whose root element wraps an SVG markup.
- *
- * @requires react
- * @requires styled-component
+ * 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.
  */
 function FlatSVG(_a) {
-    var _b = _a.isAnimated, isAnimated = _b === void 0 ? false : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor, svgMarkup = _a.svgMarkup, props = __rest(_a, ["isAnimated", "fillColor", "strokeColor", "svgMarkup"]);
-    return (react_1.default.createElement(StyledRoot, __assign({ dangerouslySetInnerHTML: { __html: svgMarkup }, isAnimated: isAnimated, fillColor: fillColor, strokeColor: strokeColor }, props)));
+    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, cssSVG = _a.cssSVG, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["markup", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "cssSVG", "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({ dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, cssSVG: cssSVG }, props)));
 }
 exports.default = FlatSVG;
-var StyledRoot = styled_components_1.default.figure(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ", "\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ", "\n\n      ", "\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ", "\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ", "\n\n      ", "\n    }\n  }\n"])), function (props) { return props.isAnimated && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    "], ["\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    "]))); }, function (props) { return props.fillColor !== undefined && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        fill: ", " !important;\n      "], ["\n        fill: ", " !important;\n      "])), props.fillColor); }, function (props) { return props.strokeColor !== undefined && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        stroke: ", " !important;\n      "], ["\n        stroke: ", " !important;\n      "])), props.strokeColor); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+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  }\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    ", "\n  }\n"])), function (props) { return props.cssSVG; });
+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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA6C;AAC7C,qEAA+C;AAS/C;;;;;GAKG;AACH,SAAwB,OAAO,CAAC,EAMxB;IALN,IAAA,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,KAAK,cALsB,uDAM/B,CADS;IAER,OAAO,CACL,8BAAC,UAAU,aACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC9C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,KAAK,EACT,CACH,CAAA;AACH,CAAC;AAhBD,0BAgBC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,gmBAI9B,4UAgBI,EAID,+KAQG,EAED,YAEC,EAED,gBAGN,KArBK,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,QAAI,uBAAG,iNAAA,6IAIjC,IAAA,EAJU,CAIV,EAQG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,KAAK,SAAS,QAAI,uBAAG,8GAAA,kBACrC,EAAe,sBACxB,KADS,KAAK,CAAC,SAAS,CACxB,EAFU,CAEV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,SAAS,QAAI,uBAAG,gHAAA,oBACrC,EAAiB,sBAC5B,KADW,KAAK,CAAC,WAAW,CAC5B,EAFU,CAEV,CAGN,CAAA","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { css } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  isAnimated?: boolean\n  fillColor?: string\n  strokeColor?: string\n  svgMarkup: string\n}\n\n/**\n * A component whose root element wraps an SVG markup.\n *\n * @requires react\n * @requires styled-component\n */\nexport default function FlatSVG({\n  isAnimated = false,\n  fillColor,\n  strokeColor,\n  svgMarkup,\n  ...props\n}: Props) {\n  return (\n    <StyledRoot\n      dangerouslySetInnerHTML={{ __html: svgMarkup }}\n      isAnimated={isAnimated}\n      fillColor={fillColor}\n      strokeColor={strokeColor}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{\n  fillColor?: string\n  strokeColor?: string\n  isAnimated: boolean\n}>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ${props => props.isAnimated && css`\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    `}\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ${props => props.fillColor !== undefined && css`\n        fill: ${props.fillColor} !important;\n      `}\n\n      ${props => props.strokeColor !== undefined && css`\n        stroke: ${props.strokeColor} !important;\n      `}\n    }\n  }\n`\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } 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   * Extended CSS to be provided to the SVG root node.\n   */\n  cssSVG?: CSSProp<any>\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 function FlatSVG({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  cssSVG,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}: Props) {\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      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      cssSVG={cssSVG}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{ cssSVG: Props['cssSVG'] }>`\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    ${props => props.cssSVG}\n  }\n`\n"]}