@arc-ui/components 10.8.0 → 11.0.0

package/dist/Icon/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/icon",
+  "types": "./Icon.esm.d.ts",
+  "main": "./Icon.cjs.js",
+  "module": "./Icon.esm.js",
+  "private": true
+}

package/dist/Image/Image.cjs.d.ts

@@ -0,0 +1 @@
+export { Image } from "../_shared/cjs/Image-fe760a06";

package/dist/Image/Image.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Image = require('../_shared/cjs/Image-fe760a06.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+
+
+exports.Image = Image.Image;

package/dist/Image/Image.esm.d.ts

@@ -0,0 +1 @@
+export { Image } from "../_shared/esm/Image-7e4948f6";

package/dist/Image/Image.esm.js

@@ -0,0 +1,5 @@
+export { I as Image } from '../_shared/esm/Image-7e4948f6.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/suffix-modifier-f5e28822.js';

package/dist/Image/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/image",
+  "types": "./Image.esm.d.ts",
+  "main": "./Image.cjs.js",
+  "module": "./Image.esm.js",
+  "private": true
+}

package/dist/Markup/Markup.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+var Markup = function (_a) {
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = index.__rest(_a, ["children", "isMeasured"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
+            "arc-Markup": true,
+            "arc-Markup--measured": isMeasured,
+            "arc-Markup--onDarkSurface": surface === "dark"
+        }) }, index.filterDataAttrs(props)), children));
+};
+
+exports.Markup = Markup;

package/dist/Markup/Markup.esm.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+declare const Markup: FC<MarkupProps>;
+interface MarkupProps {
+    /**
+     * HTML-formatted text to display in Markup.
+     */
+    children: ReactNode;
+    /**
+     * Should the Markup width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+}
+export { Markup };

package/dist/Markup/{index.js → Markup.esm.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React, { useContext } from 'react';
-import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+import { C as Context } from '../_shared/esm/Surface-d515d212.js';
 
 /**
  * Use `Markup` to display HTML-formatted text.

package/dist/Markup/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/markup",
+  "types": "./Markup.esm.d.ts",
+  "main": "./Markup.cjs.js",
+  "module": "./Markup.esm.js",
+  "private": true
+}

package/dist/Poster/{index.d.ts → Poster.cjs.d.ts}

@@ -1,7 +1,7 @@
 import React from "react";
 import { FC, ReactNode } from "react";
-import { anchorPoints } from "../_shared/index-9483ad5f";
-import { loadingOptions } from "../_shared/Image-a3225049";
+import { anchorPoints } from "../_shared/cjs/index-9483ad5f";
+import { loadingOptions } from "../_shared/cjs/Image-fe760a06";
 declare const PosterImage: FC<PosterImageProps>;
 interface PosterImageProps {
     /**

package/dist/Poster/Poster.cjs.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var Image = require('../_shared/cjs/Image-fe760a06.js');
+var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PosterImage = function (_a) {
+    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = index.__rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React__default["default"].createElement(Image.Image, index.__assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
+};
+PosterImage.displayName = "Poster.Image";
+
+var PosterVideo = function (_a) {
+    var _b;
+    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = index.__rest(_a, ["anchor", "autoPlay", "children", "loop"]);
+    return (React__default["default"].createElement("video", index.__assign({ className: index$1.classNames((_b = {
+                "arc-PosterVideo": true
+            },
+            _b[suffixModifier.suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
+            _b)), autoPlay: autoPlay, muted: true, loop: loop }, index.filterDataAttrs(props)), children));
+};
+PosterVideo.displayName = "Poster.Video";
+
+/**
+ * Use `Poster` to compose content on an image or video background.
+ */
+var Poster = function (_a) {
+    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = index.__rest(_a, ["background", "children", "overlay", "surface"]);
+    return (React__default["default"].createElement(Surface.Surface, { background: surface },
+        React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
+                "arc-Poster": true,
+                "arc-Poster--overlay": overlay,
+                "arc-Poster--overlayLight": surface === "lighter"
+            }) }, index.filterDataAttrs(props)),
+            React__default["default"].createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
+            React__default["default"].createElement("div", { className: "arc-Poster-body" }, children))));
+};
+PosterImage.displayName = "Poster.Image";
+Poster.Image = PosterImage;
+PosterVideo.displayName = "Poster.Video";
+Poster.Video = PosterVideo;
+
+exports.Poster = Poster;

package/dist/Poster/Poster.esm.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { FC, ReactNode } from "react";
+import { anchorPoints } from "../_shared/esm/index-9483ad5f";
+import { loadingOptions } from "../_shared/esm/Image-7e4948f6";
+declare const PosterImage: FC<PosterImageProps>;
+interface PosterImageProps {
+    /**
+     * Alternative text for the Poster.Image, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Poster.Image.
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Loading behaviour of the Poster.Image.
+     */
+    loading?: typeof loadingOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute for the Poster.Image. Required if `srcSet` is defined.
+     */
+    sizes?: string;
+    /**
+     * The `src` for the Poster.Image. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet?: string;
+    /**
+     * Contents of the PosterImage.
+     */
+    children?: React.ReactNode;
+}
+declare const PosterVideo: FC<PosterVideoProps>;
+interface PosterVideoProps {
+    /**
+     * Anchor point for the Poster.Video,
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Should the Poster.Video autoplay?
+     */
+    autoPlay?: boolean;
+    /**
+     * HTML video sources for the Poster.Video. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
+     */
+    children: ReactNode;
+    /**
+     * Should the Poster.Video loop?
+     */
+    loop?: boolean;
+}
+/**
+ * Use `Poster` to compose content on an image or video background.
+ */
+declare const Poster: FC<PosterProps> & {
+    Image: typeof PosterImage;
+    Video: typeof PosterVideo;
+};
+interface PosterProps {
+    /**
+     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
+     */
+    background: ReactNode;
+    /**
+     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
+     */
+    children: ReactNode;
+    /**
+     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
+     */
+    overlay?: boolean;
+    /**
+     * The background surface colour to show behind the Poster content before it loads.
+     * If using `overlay`, the gradient will match the surface.
+     */
+    surface?: "darker" | "lighter";
+}
+export { Poster };

package/dist/Poster/{index.js → Poster.esm.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React from 'react';
-import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
-import { I as Image } from '../_shared/Image-a3225049.js';
-import { s as suffixModifier } from '../_shared/suffix-modifier-2a93822c.js';
+import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { I as Image } from '../_shared/esm/Image-7e4948f6.js';
+import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
 
 var PosterImage = function (_a) {
     var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);

package/dist/Poster/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/poster",
+  "types": "./Poster.esm.d.ts",
+  "main": "./Poster.cjs.js",
+  "module": "./Poster.esm.js",
+  "private": true
+}

package/dist/RadioGroup/{index.d.ts → RadioGroup.cjs.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/FormControl-9dc9ecc3";
+import { FormControlProps } from "../_shared/cjs/FormControl-a1b7421b";
 /**
  * Radio Button component.
  */

package/dist/RadioGroup/RadioGroup.cjs.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React = require('react');
+var FormControl = require('../_shared/cjs/FormControl-a1b7421b.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var RadioContext = React.createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = React.useContext(RadioContext);
+    return context;
+};
+
+/**
+ * Radio Button component.
+ */
+var RadioButton = React.forwardRef(function (_a, ref) {
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = index.__rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
+    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var surface = React.useContext(Surface.Context).surface;
+    var idLabel = "".concat(id, "-label");
+    var checked = checkedValue === value ? true : false;
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
+            "arc-RadioButton": true,
+            "arc-RadioButton--disabled": isDisabled || groupDisabled,
+            "arc-RadioButton--small": size === "s",
+            "arc-RadioButton--smallLabel": labelSize === "s",
+            "arc-RadioButton--onDarkSurface": surface === "dark"
+        }) }, index.filterDataAttrs(props)),
+        React__default["default"].createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React__default["default"].createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React__default["default"].createElement("span", null,
+                label,
+                helper && React__default["default"].createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
+});
+
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+var RadioGroup = function (_a) {
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = index.__rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== RadioButton) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
+    return (React__default["default"].createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            labelSize: labelSize,
+            name: name,
+            size: size
+        } },
+        React__default["default"].createElement("div", index.__assign({ className: "arc-RadioGroup" }, index.filterDataAttrs(props)),
+            React__default["default"].createElement(FormControl.FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+};
+RadioButton.displayName = "RadioGroup.RadioButton";
+RadioGroup.RadioButton = RadioButton;
+
+exports.RadioGroup = RadioGroup;

package/dist/RadioGroup/RadioGroup.esm.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "../_shared/esm/FormControl-feedc495";
+/**
+ * Radio Button component.
+ */
+declare const RadioButton: FC<RadioButtonProps>;
+interface RadioButtonProps {
+    /**
+     * ID for the Radio Button.
+     */
+    id: string;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the RadioButton, shown below the label.
+     */
+    helper?: string;
+    /**
+     * Label for the RadioButton.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+}
+type EventType = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+declare const RadioGroup: FC<RadioGroupProps> & {
+    RadioButton: typeof RadioButton;
+};
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus"> {
+    /**
+     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
+     */
+    children?: React.ReactNode;
+    /**
+     * Value of the RadioButton that should be checked by default.
+     */
+    checkedValue: string;
+    /**
+     * Should all controls be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper message for the RadioGroup.
+     */
+    helper?: string;
+    /**
+     * ID for the RadioGroup.
+     */
+    id: string;
+    /**
+     * Label for the RadioGroup.
+     */
+    label: string;
+    /**
+     * Label size for the RadioGroup
+     */
+    labelSize?: "s" | "l";
+    /**
+     * Name for the RadioGroup.
+     */
+    name: string;
+    /**
+     * Function to call when the RadioGroup loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
+     * for example `e => setCheckedValue(e.target.value)`.
+     */
+    onChange?: (event: EventType) => void;
+    /**
+     * Size of the RadioGroup.
+     */
+    size?: "s" | "l";
+}
+export { RadioGroup };

package/dist/RadioGroup/{index.js → RadioGroup.esm.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import React, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from '../_shared/FormControl-9dc9ecc3.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
-import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+import { F as FormControl } from '../_shared/esm/FormControl-feedc495.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { C as Context } from '../_shared/esm/Surface-d515d212.js';
 
 var RadioContext = createContext({});
 var Provider = RadioContext.Provider;

package/dist/RadioGroup/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/radiogroup",
+  "types": "./RadioGroup.esm.d.ts",
+  "main": "./RadioGroup.cjs.js",
+  "module": "./RadioGroup.esm.js",
+  "private": true
+}

package/dist/Rule/Rule.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Rule` to display a horizontal rule.
+ */
+var Rule = function (props) {
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("hr", index.__assign({ className: index$1.classNames({
+            "arc-Rule": true,
+            "arc-Rule--onDarkSurface": surface === "dark"
+        }) }, index.filterDataAttrs(props))));
+};
+
+exports.Rule = Rule;

package/dist/Rule/Rule.esm.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+/**
+ * Use `Rule` to display a horizontal rule.
+ */
+declare const Rule: FC<RuleProps>;
+interface RuleProps {
+}
+export { Rule };

package/dist/Rule/{index.js → Rule.esm.js}

@@ -1,7 +1,7 @@
-import { a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+import { a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React, { useContext } from 'react';
-import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+import { C as Context } from '../_shared/esm/Surface-d515d212.js';
 
 /**
  * Use `Rule` to display a horizontal rule.

package/dist/Rule/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/rule",
+  "types": "./Rule.esm.d.ts",
+  "main": "./Rule.cjs.js",
+  "module": "./Rule.esm.js",
+  "private": true
+}

package/dist/Section/Section.cjs.d.ts

@@ -0,0 +1 @@
+export { Section } from "../_shared/cjs/Section-780f2377";

package/dist/Section/Section.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Section = require('../_shared/cjs/Section-780f2377.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+
+
+
+exports.Section = Section.Section;

package/dist/Section/Section.esm.d.ts

@@ -0,0 +1 @@
+export { Section } from "../_shared/esm/Section-f1256c87";

package/dist/Section/Section.esm.js

@@ -0,0 +1,4 @@
+export { S as Section } from '../_shared/esm/Section-f1256c87.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';

package/dist/Section/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/section",
+  "types": "./Section.esm.d.ts",
+  "main": "./Section.cjs.js",
+  "module": "./Section.esm.js",
+  "private": true
+}