etudes 5.2.0 → 5.3.0

package/components/CoverVideo.js

@@ -1,64 +1,21 @@
-"use strict";
-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 __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;
-    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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoverVideo = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useRect_1 = require("../hooks/useRect");
-var utils_1 = require("../utils");
-var Video_1 = require("./Video");
-exports.CoverVideo = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var className = _a.className, children = _a.children, style = _a.style, _c = _a.aspectRatio, externalAspectRatio = _c === void 0 ? NaN : _c, autoLoop = _a.autoLoop, autoPlay = _a.autoPlay, hasControls = _a.hasControls, isMuted = _a.isMuted, playsInline = _a.playsInline, posterSrc = _a.posterSrc, renderViewportContent = _a.renderViewportContent, src = _a.src, onCanPlay = _a.onCanPlay, onEnd = _a.onEnd, onFullscreenChange = _a.onFullscreenChange, onLoadMetadata = _a.onLoadMetadata, onLoadMetadataComplete = _a.onLoadMetadataComplete, onLoadMetadataError = _a.onLoadMetadataError, onPause = _a.onPause, onPlay = _a.onPlay, onSizeChange = _a.onSizeChange, props = __rest(_a, ["className", "children", "style", "aspectRatio", "autoLoop", "autoPlay", "hasControls", "isMuted", "playsInline", "posterSrc", "renderViewportContent", "src", "onCanPlay", "onEnd", "onFullscreenChange", "onLoadMetadata", "onLoadMetadataComplete", "onLoadMetadataError", "onPause", "onPlay", "onSizeChange"]);
-    var handleSizeChange = function (size) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { Size } from 'spase';
+import { useRect } from '../hooks/useRect.js';
+import { asStyleDict, styles } from '../utils/index.js';
+import { Video } from './Video.js';
+export const CoverVideo = forwardRef(({ className, children, style, aspectRatio: externalAspectRatio = NaN, autoLoop, autoPlay, hasControls, isMuted, playsInline, posterSrc, renderViewportContent, src, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, ...props }, ref) => {
+    const handleSizeChange = (size) => {
         setLocalAspectRatio(size ? size.width / size.height : NaN);
-        onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(size);
+        onSizeChange?.(size);
     };
-    var localRef = (0, react_1.useRef)(null);
-    var rootRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
-    var _d = __read((0, react_1.useState)(NaN), 2), localAspectRatio = _d[0], setLocalAspectRatio = _d[1];
-    var aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio;
-    var rootRect = (0, useRect_1.useRect)(rootRef);
-    var rootAspectRatio = rootRect.width / rootRect.height;
-    var videoSize = new spase_1.Size([
+    const localRef = useRef(null);
+    const rootRef = ref ?? localRef;
+    const [localAspectRatio, setLocalAspectRatio] = useState(NaN);
+    const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio;
+    const rootRect = useRect(rootRef);
+    const rootAspectRatio = rootRect.width / rootRect.height;
+    const videoSize = new Size([
         rootAspectRatio > 1
             ? Math.max(rootRect.width, rootRect.height * aspectRatio)
             : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),
@@ -66,17 +23,17 @@ exports.CoverVideo = (0, react_1.forwardRef)(function (_a, ref) {
             ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)
             : Math.max(rootRect.height, rootRect.width / aspectRatio),
     ]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: rootRef, className: className, "data-component": 'cover-video', style: (0, utils_1.styles)(style, FIXED_STYLES.root), children: [(0, jsx_runtime_1.jsx)(Video_1.Video, { autoLoop: autoLoop, autoPlay: autoPlay, "data-child": 'video', hasControls: hasControls, isMuted: isMuted, playsInline: playsInline, posterSrc: posterSrc, src: src, style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
-                    width: "".concat(videoSize.width, "px"),
-                    height: "".concat(videoSize.height, "px"),
-                }), onCanPlay: onCanPlay, onEnd: onEnd, onFullscreenChange: onFullscreenChange, onLoadMetadata: onLoadMetadata, onLoadMetadataComplete: onLoadMetadataComplete, onLoadMetadataError: onLoadMetadataError, onPause: onPause, onPlay: onPlay, onSizeChange: function (size) { return handleSizeChange(size); } }), renderViewportContent && ((0, jsx_runtime_1.jsx)("div", { "data-child": 'viewport', style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
-                    height: "".concat(videoSize.height, "px"),
+    return (_jsxs("div", { ...props, ref: rootRef, className: className, "data-component": 'cover-video', style: styles(style, FIXED_STYLES.root), children: [_jsx(Video, { autoLoop: autoLoop, autoPlay: autoPlay, "data-child": 'video', hasControls: hasControls, isMuted: isMuted, playsInline: playsInline, posterSrc: posterSrc, src: src, style: styles(FIXED_STYLES.viewport, {
+                    width: `${videoSize.width}px`,
+                    height: `${videoSize.height}px`,
+                }), onCanPlay: onCanPlay, onEnd: onEnd, onFullscreenChange: onFullscreenChange, onLoadMetadata: onLoadMetadata, onLoadMetadataComplete: onLoadMetadataComplete, onLoadMetadataError: onLoadMetadataError, onPause: onPause, onPlay: onPlay, onSizeChange: size => handleSizeChange(size) }), renderViewportContent && (_jsx("div", { "data-child": 'viewport', style: styles(FIXED_STYLES.viewport, {
+                    height: `${videoSize.height}px`,
                     pointerEvents: 'none',
-                    width: "".concat(videoSize.width, "px"),
-                }), children: renderViewportContent() })), children] })));
+                    width: `${videoSize.width}px`,
+                }), children: renderViewportContent() })), children] }));
 });
-Object.defineProperty(exports.CoverVideo, 'displayName', { value: 'CoverVideo', writable: false });
-var FIXED_STYLES = (0, utils_1.asStyleDict)({
+Object.defineProperty(CoverVideo, 'displayName', { value: 'CoverVideo', writable: false });
+const FIXED_STYLES = asStyleDict({
     root: {
         overflow: 'hidden',
     },
@@ -95,4 +52,3 @@ var FIXED_STYLES = (0, utils_1.asStyleDict)({
         width: '100%',
     },
 });
-//# sourceMappingURL=CoverVideo.js.map

package/components/DebugConsole.js

@@ -1,95 +1,44 @@
-"use strict";
-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 __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;
-    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));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DebugConsole = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Each_1 = require("../operators/Each");
-var utils_1 = require("../utils");
-exports.DebugConsole = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.align, align = _b === void 0 ? 'br' : _b, _c = _a.margin, margin = _c === void 0 ? 0 : _c, _d = _a.maxEntries, maxEntries = _d === void 0 ? -1 : _d, message = _a.message, _e = _a.style, style = _e === void 0 ? {} : _e, title = _a.title, props = __rest(_a, ["align", "margin", "maxEntries", "message", "style", "title"]);
-    var _f = __read((0, react_1.useState)([]), 2), messages = _f[0], setMessages = _f[1];
-    var messagesRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Each } from '../operators/Each.js';
+import { asStyleDict, styles } from '../utils/index.js';
+export const DebugConsole = forwardRef(({ align = 'br', margin = 0, maxEntries = -1, message, style = {}, title, ...props }, ref) => {
+    const [messages, setMessages] = useState([]);
+    const messagesRef = useRef(null);
+    useEffect(() => {
         if (message === undefined) {
             setMessages([]);
         }
         else {
-            var numMessages = messages.length;
-            setMessages(__spreadArray(__spreadArray([], __read(maxEntries < 0
-                ? messages
-                : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages)), false), [
+            const numMessages = messages.length;
+            setMessages([
+                ...maxEntries < 0
+                    ? messages
+                    : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages),
                 message,
-            ], false));
+            ]);
         }
     }, [message]);
-    (0, react_1.useEffect)(function () {
-        var _a, _b;
-        (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, (_b = messagesRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight);
+    useEffect(() => {
+        messagesRef.current?.scrollTo(0, messagesRef.current?.scrollHeight);
     }, [messages]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: ref, "data-component": 'debug-console', style: (0, utils_1.styles)(style, FIXED_STYLES.root, getStyleByAlignment(align, margin)), children: [(0, jsx_runtime_1.jsx)("div", { "data-child": 'header', style: FIXED_STYLES.title, children: title !== null && title !== void 0 ? title : 'Untitled' }), (0, jsx_runtime_1.jsx)("div", { ref: messagesRef, "data-child": 'messages', style: FIXED_STYLES.messages, children: (0, jsx_runtime_1.jsx)(Each_1.Each, { in: messages, render: function (msg) { return (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: msg } }); } }) })] })));
+    return (_jsxs("div", { ...props, ref: ref, "data-component": 'debug-console', style: styles(style, FIXED_STYLES.root, getStyleByAlignment(align, margin)), children: [_jsx("div", { "data-child": 'header', style: FIXED_STYLES.title, children: title ?? 'Untitled' }), _jsx("div", { ref: messagesRef, "data-child": 'messages', style: FIXED_STYLES.messages, children: _jsx(Each, { in: messages, render: msg => _jsx("div", { dangerouslySetInnerHTML: { __html: msg } }) }) })] }));
 });
-Object.defineProperty(exports.DebugConsole, 'displayName', { value: 'DebugConsole', writable: false });
+Object.defineProperty(DebugConsole, 'displayName', { value: 'DebugConsole', writable: false });
 function getStyleByAlignment(align, margin) {
     switch (align) {
-        case 'tl': return { top: "".concat(margin, "px"), left: "".concat(margin, "px") };
-        case 'tc': return { top: "".concat(margin, "px"), left: 0, right: 0, margin: '0 auto' };
-        case 'tr': return { top: "".concat(margin, "px"), right: "".concat(margin, "px") };
-        case 'cl': return { top: 0, left: "".concat(margin, "px"), bottom: 0, margin: 'auto 0' };
+        case 'tl': return { top: `${margin}px`, left: `${margin}px` };
+        case 'tc': return { top: `${margin}px`, left: 0, right: 0, margin: '0 auto' };
+        case 'tr': return { top: `${margin}px`, right: `${margin}px` };
+        case 'cl': return { top: 0, left: `${margin}px`, bottom: 0, margin: 'auto 0' };
         case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' };
-        case 'cr': return { top: 0, bottom: 0, right: "".concat(margin, "px"), margin: 'auto 0' };
-        case 'bl': return { bottom: "".concat(margin, "px"), left: "".concat(margin, "px") };
-        case 'bc': return { bottom: "".concat(margin, "px"), left: 0, right: 0, margin: '0 auto' };
-        default: return { bottom: "".concat(margin, "px"), right: "".concat(margin, "px") };
+        case 'cr': return { top: 0, bottom: 0, right: `${margin}px`, margin: 'auto 0' };
+        case 'bl': return { bottom: `${margin}px`, left: `${margin}px` };
+        case 'bc': return { bottom: `${margin}px`, left: 0, right: 0, margin: '0 auto' };
+        default: return { bottom: `${margin}px`, right: `${margin}px` };
     }
 }
-var FIXED_STYLES = (0, utils_1.asStyleDict)({
+const FIXED_STYLES = asStyleDict({
     root: {
         background: '#000',
         fontFamily: 'monospace',
@@ -125,4 +74,3 @@ var FIXED_STYLES = (0, utils_1.asStyleDict)({
         width: '100%',
     },
 });
-//# sourceMappingURL=DebugConsole.js.map

package/components/Dial.js

@@ -1,81 +1,46 @@
-"use strict";
-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 __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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialKnob = exports.DialTrack = exports.Dial = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var utils_1 = require("../utils");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
 /**
  * A circular dial with a knob and a track.
  *
  * @exports DialKnob
  * @exports DialTrack
  */
-exports.Dial = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var children = _a.children, style = _a.style, _d = _a.angle, angle = _d === void 0 ? 0 : _d, _e = _a.knobLength, knobLength = _e === void 0 ? 30 : _e, _f = _a.knobThickness, knobThickness = _f === void 0 ? 10 : _f, _g = _a.radius, radius = _g === void 0 ? 50 : _g, _h = _a.trackThickness, trackThickness = _h === void 0 ? 2 : _h, _j = _a.usesDefaultStyles, usesDefaultStyles = _j === void 0 ? false : _j, props = __rest(_a, ["children", "style", "angle", "knobLength", "knobThickness", "radius", "trackThickness", "usesDefaultStyles"]);
-    var diameter = radius * 2;
-    var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
-    var components = (0, utils_1.asComponentDict)(children, {
-        track: exports.DialTrack,
-        knob: exports.DialKnob,
+export const Dial = forwardRef(({ children, style, angle = 0, knobLength = 30, knobThickness = 10, radius = 50, trackThickness = 2, usesDefaultStyles = false, ...props }, ref) => {
+    const diameter = radius * 2;
+    const clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
+    const components = asComponentDict(children, {
+        track: DialTrack,
+        knob: DialKnob,
     });
-    var fixedStyles = getFixedStyles({ angle: angle, diameter: diameter });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: ref, "data-component": 'dial', style: (0, utils_1.styles)(style, fixedStyles.root), children: [(0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackContainer, children: (0, jsx_runtime_1.jsx)("svg", { height: diameter, style: fixedStyles.svgContainer, viewBox: "0 0 ".concat(diameter, " ").concat(diameter), width: diameter, children: (0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(exports.DialTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
+    const fixedStyles = getFixedStyles({ angle, diameter });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
+    return (_jsxs("div", { ...props, ref: ref, "data-component": 'dial', style: styles(style, fixedStyles.root), children: [_jsx("div", { style: fixedStyles.trackContainer, children: _jsx("svg", { height: diameter, style: fixedStyles.svgContainer, viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, children: cloneStyledElement(components.track ?? _jsx(DialTrack, { style: defaultStyles?.track }), {
                         cx: radius,
                         cy: radius,
                         r: radius - trackThickness / 2,
                         strokeWidth: trackThickness,
-                    }) }) }), (0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.styles)(fixedStyles.knobContainer), children: (0, jsx_runtime_1.jsx)("svg", { style: fixedStyles.svgContainer, viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg', children: (0, utils_1.cloneStyledElement)((_c = components.knob) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(exports.DialKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
+                    }) }) }), _jsx("div", { style: styles(fixedStyles.knobContainer), children: _jsx("svg", { style: fixedStyles.svgContainer, viewBox: `0 0 ${diameter} ${diameter}`, xmlns: 'http://www.w3.org/2000/svg', children: cloneStyledElement(components.knob ?? _jsx(DialKnob, { style: defaultStyles?.knob }), {
                         strokeWidth: knobThickness,
                         d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),
-                    }) }) })] })));
+                    }) }) })] }));
 });
-Object.defineProperty(exports.Dial, 'displayName', { value: 'Dial', writable: false });
-var DialTrack = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("circle", __assign({}, props, { "data-child": 'track' }));
-};
-exports.DialTrack = DialTrack;
-var DialKnob = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("path", __assign({}, props, { "data-child": 'knob' }));
-};
-exports.DialKnob = DialKnob;
+Object.defineProperty(Dial, 'displayName', { value: 'Dial', writable: false });
+export const DialTrack = ({ ...props }) => _jsx("circle", { ...props, "data-child": 'track' });
+export const DialKnob = ({ ...props }) => _jsx("path", { ...props, "data-child": 'knob' });
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+    const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
     return {
         x: centerX + radius * Math.cos(angleInRadians),
         y: centerY + radius * Math.sin(angleInRadians),
     };
 }
 function arcPath(x, y, radius, startAngle, endAngle) {
-    var start = polarToCartesian(x, y, radius, endAngle);
-    var end = polarToCartesian(x, y, radius, startAngle);
-    var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    var d = [
+    const start = polarToCartesian(x, y, radius, endAngle);
+    const end = polarToCartesian(x, y, radius, startAngle);
+    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+    const d = [
         'M',
         start.x,
         start.y,
@@ -90,12 +55,11 @@ function arcPath(x, y, radius, startAngle, endAngle) {
     ];
     return d.join(' ');
 }
-function getFixedStyles(_a) {
-    var _b = _a.diameter, diameter = _b === void 0 ? 0 : _b, _c = _a.angle, angle = _c === void 0 ? 0 : _c;
-    return (0, utils_1.asStyleDict)({
+function getFixedStyles({ diameter = 0, angle = 0 }) {
+    return asStyleDict({
         root: {
-            height: "".concat(diameter, "px"),
-            width: "".concat(diameter, "px"),
+            height: `${diameter}px`,
+            width: `${diameter}px`,
         },
         knobContainer: {
             backgroundPosition: 'center',
@@ -107,7 +71,7 @@ function getFixedStyles(_a) {
             top: '0',
             transformOrigin: 'center',
             width: '100%',
-            transform: "rotate(".concat((angle + 360) % 360, "deg)"),
+            transform: `rotate(${(angle + 360) % 360}deg)`,
         },
         trackContainer: {
             height: '100%',
@@ -126,7 +90,7 @@ function getFixedStyles(_a) {
     });
 }
 function getDefaultStyles() {
-    return (0, utils_1.asStyleDict)({
+    return asStyleDict({
         knob: {
             stroke: '#fff',
         },
@@ -136,4 +100,3 @@ function getDefaultStyles() {
         },
     });
 }
-//# sourceMappingURL=Dial.js.map