etudes 5.2.0 → 5.3.0

package/components/Dropdown.js

@@ -1,47 +1,17 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var useRect_1 = require("../hooks/useRect");
-var utils_1 = require("../utils");
-var Collection_1 = require("./Collection");
-var FlatSVG_1 = require("./FlatSVG");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect, useRef } from 'react';
+import { useRect } from '../hooks/useRect.js';
+import { asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+import { Collection } from './Collection.js';
+import { FlatSVG } from './FlatSVG.js';
 /**
  * A dropdown component that is invertible (i.e. can "dropup" instead) and
  * supports both horizontal and vertical orientations. Provide `items` and
  * `ItemComponent` props to populate.
  */
-exports.Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, style = _a.style, collapseIconSvg = _a.collapseIconSvg, _c = _a.collapsesOnSelect, collapsesOnSelect = _c === void 0 ? true : _c, _d = _a.collectionPadding, collectionPadding = _d === void 0 ? 0 : _d, expandIconSvg = _a.expandIconSvg, _e = _a.isCollapsed, isCollapsed = _e === void 0 ? true : _e, _f = _a.isInverted, isInverted = _f === void 0 ? false : _f, label = _a.label, layout = _a.layout, _g = _a.isSelectionTogglable, isSelectionTogglable = _g === void 0 ? false : _g, externalItemLength = _a.itemLength, _h = _a.itemPadding, itemPadding = _h === void 0 ? 0 : _h, items = _a.items, _j = _a.maxVisibleItems, maxVisibleItems = _j === void 0 ? -1 : _j, numSegments = _a.numSegments, _k = _a.orientation, orientation = _k === void 0 ? 'vertical' : _k, _l = _a.selection, externalSelection = _l === void 0 ? [] : _l, _m = _a.selectionMode, selectionMode = _m === void 0 ? 'single' : _m, _o = _a.usesDefaultStyles, usesDefaultStyles = _o === void 0 ? false : _o, onActivateAt = _a.onActivateAt, onCollapse = _a.onCollapse, onDeselectAt = _a.onDeselectAt, onExpand = _a.onExpand, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, onToggleCustomEvent = _a.onToggleCustomEvent, ItemComponent = _a.ItemComponent, ToggleComponent = _a.ToggleComponent, props = __rest(_a, ["children", "className", "style", "collapseIconSvg", "collapsesOnSelect", "collectionPadding", "expandIconSvg", "isCollapsed", "isInverted", "label", "layout", "isSelectionTogglable", "itemLength", "itemPadding", "items", "maxVisibleItems", "numSegments", "orientation", "selection", "selectionMode", "usesDefaultStyles", "onActivateAt", "onCollapse", "onDeselectAt", "onExpand", "onSelectAt", "onSelectionChange", "onToggleCustomEvent", "ItemComponent", "ToggleComponent"]);
-    var isIndexOutOfRange = function (index) {
+export const Dropdown = forwardRef(({ children, className, style, collapseIconSvg, collapsesOnSelect = true, collectionPadding = 0, expandIconSvg, isCollapsed = true, isInverted = false, label, layout, isSelectionTogglable = false, itemLength: externalItemLength, itemPadding = 0, items, maxVisibleItems = -1, numSegments, orientation = 'vertical', selection: externalSelection = [], selectionMode = 'single', usesDefaultStyles = false, onActivateAt, onCollapse, onDeselectAt, onExpand, onSelectAt, onSelectionChange, onToggleCustomEvent, ItemComponent, ToggleComponent, ...props }, ref) => {
+    const isIndexOutOfRange = (index) => {
         if (isNaN(index))
             return true;
         if (index >= items.length)
@@ -50,18 +20,18 @@ exports.Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             return true;
         return false;
     };
-    var sanitizedSelection = function (selection) { return sortIndices(selection).filter(function (t) { return !isIndexOutOfRange(t); }); };
-    var expand = function () {
+    const sanitizedSelection = (selection) => sortIndices(selection).filter(t => !isIndexOutOfRange(t));
+    const expand = () => {
         if (!isCollapsed)
             return;
-        onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+        onExpand?.();
     };
-    var collapse = function () {
+    const collapse = () => {
         if (isCollapsed)
             return;
-        onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+        onCollapse?.();
     };
-    var toggle = function () {
+    const toggle = () => {
         if (isCollapsed) {
             expand();
         }
@@ -69,33 +39,33 @@ exports.Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             collapse();
         }
     };
-    var selectAtHandler = function (index) {
-        onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(index);
+    const selectAtHandler = (index) => {
+        onSelectAt?.(index);
         if (selectionMode === 'single' && collapsesOnSelect)
             collapse();
     };
-    var selectionChangeHandler = function (value) {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(value);
+    const selectionChangeHandler = (value) => {
+        onSelectionChange?.(value);
     };
-    var selection = sanitizedSelection(externalSelection);
-    var bodyRef = (0, react_1.useRef)(null);
-    var bodyRect = (0, useRect_1.useRect)(bodyRef);
-    var itemLength = externalItemLength !== null && externalItemLength !== void 0 ? externalItemLength : (orientation === 'vertical' ? bodyRect.height : bodyRect.width);
-    var numItems = items.length;
-    var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
-    var menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1);
-    var fixedStyles = getFixedStyles({ isCollapsed: isCollapsed, isInverted: isInverted, maxVisibleItems: maxVisibleItems, menuLength: menuLength, numItems: numItems, orientation: orientation });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation: orientation }) : undefined;
-    var ExpandIcon = expandIconSvg ? (0, jsx_runtime_1.jsx)(FlatSVG_1.FlatSVG, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.expandIcon, svg: expandIconSvg }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    var CollapseIcon = collapseIconSvg ? (0, jsx_runtime_1.jsx)(FlatSVG_1.FlatSVG, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collapseIcon, svg: collapseIconSvg }) : ExpandIcon;
-    (0, react_1.useEffect)(function () {
-        var clickOutsideHandler = function (event) {
+    const selection = sanitizedSelection(externalSelection);
+    const bodyRef = useRef(null);
+    const bodyRect = useRect(bodyRef);
+    const itemLength = externalItemLength ?? (orientation === 'vertical' ? bodyRect.height : bodyRect.width);
+    const numItems = items.length;
+    const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
+    const menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1);
+    const fixedStyles = getFixedStyles({ isCollapsed, isInverted, maxVisibleItems, menuLength, numItems, orientation });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined;
+    const ExpandIcon = expandIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.expandIcon, svg: expandIconSvg }) : _jsx(_Fragment, {});
+    const CollapseIcon = collapseIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.collapseIcon, svg: collapseIconSvg }) : ExpandIcon;
+    useEffect(() => {
+        const clickOutsideHandler = (event) => {
             if (isCollapsed)
                 return;
             if (!(event.target instanceof Node))
                 return;
-            var isOutside = true;
-            var node = event.target;
+            let isOutside = true;
+            let node = event.target;
             while (node) {
                 if (node === bodyRef.current) {
                     isOutside = false;
@@ -110,24 +80,29 @@ exports.Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             collapse();
         };
         window.addEventListener('click', clickOutsideHandler);
-        return function () {
+        return () => {
             window.removeEventListener('click', clickOutsideHandler);
         };
     }, [isCollapsed]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, { collapsed: isCollapsed, expanded: !isCollapsed }), "data-component": 'dropdown', style: (0, utils_1.styles)(style, fixedStyles.root), children: (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, style: (0, utils_1.styles)(fixedStyles.body), children: [ToggleComponent ? ((0, jsx_runtime_1.jsx)(ToggleComponent, { "data-child": 'toggle', style: (0, utils_1.styles)(fixedStyles.toggle), onClick: function () { return toggle(); }, onCustomEvent: function (name, info) { return onToggleCustomEvent === null || onToggleCustomEvent === void 0 ? void 0 : onToggleCustomEvent(name, info); } })) : ((0, jsx_runtime_1.jsxs)("button", { "data-child": 'toggle', style: (0, utils_1.styles)(fixedStyles.toggle, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.toggle), onClick: function () { return toggle(); }, children: [(0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selection)) !== null && _b !== void 0 ? _b : (selection.length > 0 ? selection.map(function (t) { return items[t].label; }).join(', ') : '') }, style: fixedStyles.toggleLabel }), (0, utils_1.cloneStyledElement)(isCollapsed ? ExpandIcon : CollapseIcon)] })), (0, jsx_runtime_1.jsx)(Collection_1.Collection, { "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, style: (0, utils_1.styles)(fixedStyles.collection, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collection), onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler })] }) })));
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, { collapsed: isCollapsed, expanded: !isCollapsed }), "data-component": 'dropdown', style: styles(style, fixedStyles.root), children: _jsxs("div", { ref: bodyRef, style: styles(fixedStyles.body), children: [ToggleComponent ? (_jsx(ToggleComponent, { "data-child": 'toggle', style: styles(fixedStyles.toggle), onClick: () => toggle(), onCustomEvent: (name, info) => onToggleCustomEvent?.(name, info) })) : (_jsxs("button", { "data-child": 'toggle', style: styles(fixedStyles.toggle, defaultStyles?.toggle), onClick: () => toggle(), children: [_jsx("span", { dangerouslySetInnerHTML: { __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') }, style: fixedStyles.toggleLabel }), cloneStyledElement(isCollapsed ? ExpandIcon : CollapseIcon)] })), _jsx(Collection, { "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, style: styles(fixedStyles.collection, defaultStyles?.collection), onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler })] }) }));
 });
-Object.defineProperty(exports.Dropdown, 'displayName', { value: 'Dropdown', writable: false });
+Object.defineProperty(Dropdown, 'displayName', { value: 'Dropdown', writable: false });
 function sortIndices(indices) {
-    return indices.sort(function (a, b) { return a - b; });
+    return indices.sort((a, b) => a - b);
 }
-function getFixedStyles(_a) {
-    var _b = _a.isCollapsed, isCollapsed = _b === void 0 ? true : _b, _c = _a.isInverted, isInverted = _c === void 0 ? false : _c, _d = _a.collectionPadding, collectionPadding = _d === void 0 ? 0 : _d, _e = _a.maxVisibleItems, maxVisibleItems = _e === void 0 ? 0 : _e, _f = _a.menuLength, menuLength = _f === void 0 ? NaN : _f, _g = _a.numItems, numItems = _g === void 0 ? 0 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h;
-    return (0, utils_1.asStyleDict)({
-        root: __assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', overflow: 'visible' }, orientation === 'vertical' ? {
-            flexDirection: isInverted ? 'column-reverse' : 'column',
-        } : {
-            flexDirection: isInverted ? 'row-reverse' : 'row',
-        }),
+function getFixedStyles({ isCollapsed = true, isInverted = false, collectionPadding = 0, maxVisibleItems = 0, menuLength = NaN, numItems = 0, orientation = 'vertical' }) {
+    return asStyleDict({
+        root: {
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            overflow: 'visible',
+            ...orientation === 'vertical' ? {
+                flexDirection: isInverted ? 'column-reverse' : 'column',
+            } : {
+                flexDirection: isInverted ? 'row-reverse' : 'row',
+            },
+        },
         body: {
             height: '100%',
             width: '100%',
@@ -148,24 +123,36 @@ function getFixedStyles(_a) {
             letterSpacing: 'inherit',
             lineHeight: 'inherit',
         },
-        collection: __assign({ position: 'absolute' }, orientation === 'vertical' ? __assign({ width: '100%', height: isCollapsed ? '0px' : "".concat(menuLength, "px"), overflowY: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
-            marginBottom: "".concat(collectionPadding, "px"),
-            bottom: '100%',
-        } : {
-            top: '100%',
-            marginTop: "".concat(collectionPadding, "px"),
-        }) : __assign({ width: isCollapsed ? '0px' : "".concat(menuLength, "px"), height: '100%', overflowX: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
-            marginRight: "".concat(collectionPadding, "px"),
-            right: '100%',
-        } : {
-            left: '100%',
-            marginLeft: "".concat(collectionPadding, "px"),
-        })),
+        collection: {
+            position: 'absolute',
+            ...orientation === 'vertical' ? {
+                width: '100%',
+                height: isCollapsed ? '0px' : `${menuLength}px`,
+                overflowY: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',
+                ...isInverted ? {
+                    marginBottom: `${collectionPadding}px`,
+                    bottom: '100%',
+                } : {
+                    top: '100%',
+                    marginTop: `${collectionPadding}px`,
+                },
+            } : {
+                width: isCollapsed ? '0px' : `${menuLength}px`,
+                height: '100%',
+                overflowX: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',
+                ...isInverted ? {
+                    marginRight: `${collectionPadding}px`,
+                    right: '100%',
+                } : {
+                    left: '100%',
+                    marginLeft: `${collectionPadding}px`,
+                },
+            },
+        },
     });
 }
-function getDefaultStyles(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b;
-    return (0, utils_1.asStyleDict)({
+function getDefaultStyles({ orientation = 'vertical' }) {
+    return asStyleDict({
         toggle: {
             alignItems: 'center',
             background: '#fff',
@@ -190,11 +177,12 @@ function getDefaultStyles(_a) {
             padding: '0',
             width: '15px',
         },
-        collection: __assign({}, orientation === 'vertical' ? {
-            transition: 'height 100ms ease-out',
-        } : {
-            transition: 'width 100ms ease-out',
-        }),
+        collection: {
+            ...orientation === 'vertical' ? {
+                transition: 'height 100ms ease-out',
+            } : {
+                transition: 'width 100ms ease-out',
+            },
+        },
     });
 }
-//# sourceMappingURL=Dropdown.js.map

package/components/FlatSVG.js

@@ -1,93 +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 __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlatSVG = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var fast_xml_parser_1 = require("fast-xml-parser");
-var react_1 = require("react");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XMLBuilder, XMLParser } from 'fast-xml-parser';
+import { forwardRef } from 'react';
 /**
  * A component whose root element wraps an SVG markup. When wrapping the SVG, it
  * will attempt to sanitize the markup (i.e. stripping useless attributes)
  * according to the props specified.
  */
-exports.FlatSVG = (0, react_1.forwardRef)(function (_a, ref) {
-    var svg = _a.svg, _b = _a.shouldStripClasses, shouldStripClasses = _b === void 0 ? true : _b, _c = _a.shouldStripExtraneousAttributes, shouldStripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.shouldStripIds, shouldStripIds = _d === void 0 ? true : _d, _e = _a.shouldStripStyles, shouldStripStyles = _e === void 0 ? true : _e, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["svg", "shouldStripClasses", "shouldStripExtraneousAttributes", "shouldStripIds", "shouldStripStyles", "whitelistedAttributes"]);
-    var attributeNamePrefix = '@_';
-    var sanitizedMarkup = function () {
-        var parser = new fast_xml_parser_1.XMLParser({
-            attributeNamePrefix: attributeNamePrefix,
+export const FlatSVG = forwardRef(({ svg, shouldStripClasses = true, shouldStripExtraneousAttributes = true, shouldStripIds = true, shouldStripStyles = true, whitelistedAttributes = ['viewBox'], ...props }, ref) => {
+    const attributeNamePrefix = '@_';
+    const sanitizedMarkup = () => {
+        const parser = new XMLParser({
+            attributeNamePrefix,
             ignoreAttributes: false,
             ignoreDeclaration: true,
             ignorePiTags: true,
             removeNSPrefix: true,
             trimValues: true,
-            updateTag: function (tagName, jPath, attrs) {
-                var e_1, _a;
+            updateTag: (tagName, jPath, attrs) => {
                 if (shouldStripStyles && tagName === 'style')
                     return false;
-                var attrNames = Object.keys(attrs);
-                try {
-                    for (var attrNames_1 = __values(attrNames), attrNames_1_1 = attrNames_1.next(); !attrNames_1_1.done; attrNames_1_1 = attrNames_1.next()) {
-                        var attrName = attrNames_1_1.value;
-                        if (shouldStripIds && attrName.toLowerCase() === "".concat(attributeNamePrefix, "id"))
-                            delete attrs[attrName];
-                        if (shouldStripClasses && attrName.toLowerCase() === "".concat(attributeNamePrefix, "class"))
-                            delete attrs[attrName];
-                        if (shouldStripStyles && attrName.toLowerCase() === "".concat(attributeNamePrefix, "style"))
-                            delete attrs[attrName];
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (attrNames_1_1 && !attrNames_1_1.done && (_a = attrNames_1.return)) _a.call(attrNames_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
+                const attrNames = Object.keys(attrs);
+                for (const attrName of attrNames) {
+                    if (shouldStripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`)
+                        delete attrs[attrName];
+                    if (shouldStripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`)
+                        delete attrs[attrName];
+                    if (shouldStripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`)
+                        delete attrs[attrName];
                 }
                 return tagName;
             },
         });
-        var builder = new fast_xml_parser_1.XMLBuilder({
-            attributeNamePrefix: attributeNamePrefix,
+        const builder = new XMLBuilder({
+            attributeNamePrefix,
             format: true,
             ignoreAttributes: false,
         });
-        var xml = parser.parse(svg);
+        const xml = parser.parse(svg);
         return builder.build(xml);
     };
-    return ((0, jsx_runtime_1.jsx)("figure", __assign({}, props, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, "data-component": 'flat-svg' })));
+    return (_jsx("figure", { ...props, ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, "data-component": 'flat-svg' }));
 });
-Object.defineProperty(exports.FlatSVG, 'displayName', { value: 'FlatSVG', writable: false });
-//# sourceMappingURL=FlatSVG.js.map
+Object.defineProperty(FlatSVG, 'displayName', { value: 'FlatSVG', writable: false });

package/components/Image.js

@@ -1,76 +1,47 @@
-"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.Image = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useImageSize_1 = require("../hooks/useImageSize");
-exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
-    var alt = _a.alt, _b = _a.loadingMode, loadingMode = _b === void 0 ? 'preload' : _b, sizes = _a.sizes, fallbackSrc = _a.src, srcSet = _a.srcSet, onLoadStart = _a.onLoadStart, onLoadComplete = _a.onLoadComplete, onLoadError = _a.onLoadError, onSizeChange = _a.onSizeChange, props = __rest(_a, ["alt", "loadingMode", "sizes", "src", "srcSet", "onLoadStart", "onLoadComplete", "onLoadError", "onSizeChange"]);
-    var srcSetValue = srcSet === null || srcSet === void 0 ? void 0 : srcSet.map(function (_a) {
-        var pixelDensity = _a.pixelDensity, src = _a.src, width = _a.width;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { useImageSize } from '../hooks/useImageSize.js';
+export const Image = forwardRef(({ alt, loadingMode = 'preload', sizes, src: fallbackSrc, srcSet, onLoadStart, onLoadComplete, onLoadError, onSizeChange, ...props }, ref) => {
+    const srcSetValue = srcSet?.map(({ pixelDensity, src, width }) => {
         if (sizes && width === undefined)
             throw Error('`width` must be specified if `sizes` is specified');
         if (width !== undefined && pixelDensity !== undefined)
             throw Error('Only one of `width` or `pixelDensity` can be specified.');
-        var t = src;
+        let t = src;
         if (width !== undefined) {
-            var w = Math.floor(width);
+            const w = Math.floor(width);
             if (!isFinite(w) || String(w) !== String(width) || w <= 0)
                 throw Error('The specified width must be a positive integer greater than 0');
-            t += " ".concat(w, "w");
+            t += ` ${w}w`;
         }
         else if (pixelDensity !== undefined) {
             if (!isFinite(pixelDensity) || pixelDensity <= 0)
                 throw Error('The specified pixel density must be a positive floating number than 0');
-            t += " ".concat(pixelDensity, "x");
+            t += ` ${pixelDensity}x`;
         }
         return t;
     }).join(', ');
-    var sizesValue = sizes === null || sizes === void 0 ? void 0 : sizes.map(function (_a, idx) {
-        var mediaCondition = _a.mediaCondition, width = _a.width;
-        var isLast = idx === sizes.length - 1;
-        var t = width;
+    const sizesValue = sizes?.map(({ mediaCondition, width }, idx) => {
+        const isLast = idx === sizes.length - 1;
+        let t = width;
         if (isLast && mediaCondition)
             throw Error('The last item in `sizes` must not have a `mediaCondition` specified.');
         if (mediaCondition)
-            t = "".concat(mediaCondition, " ").concat(t);
+            t = `${mediaCondition} ${t}`;
         return t;
     }).join(', ');
-    var size = (0, useImageSize_1.useImageSize)({
+    const size = useImageSize({
         src: fallbackSrc,
         srcSet: srcSetValue,
         sizes: sizesValue,
     }, {
-        onLoadStart: onLoadStart,
-        onLoadComplete: onLoadComplete,
-        onLoadError: onLoadError,
+        onLoadStart,
+        onLoadComplete,
+        onLoadError,
     });
-    (0, react_1.useEffect)(function () {
-        onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(size);
+    useEffect(() => {
+        onSizeChange?.(size);
     }, [size]);
-    return ((0, jsx_runtime_1.jsx)("img", __assign({}, props, { ref: ref, alt: alt, "data-component": 'image', loading: loadingMode === 'lazy' ? 'lazy' : 'eager', sizes: sizesValue, src: fallbackSrc, srcSet: srcSetValue })));
+    return (_jsx("img", { ...props, ref: ref, alt: alt, "data-component": 'image', loading: loadingMode === 'lazy' ? 'lazy' : 'eager', sizes: sizesValue, src: fallbackSrc, srcSet: srcSetValue }));
 });
-Object.defineProperty(exports.Image, 'displayName', { value: 'Image', writable: false });
-//# sourceMappingURL=Image.js.map
+Object.defineProperty(Image, 'displayName', { value: 'Image', writable: false });