@oracle/oraclejet-preact 14.0.0

package/es/UNSAFE_MeterCircle.js

@@ -0,0 +1,572 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { _ as __rest } from './tslib.es6-8b94ba02.js';
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { useUser } from './hooks/UNSAFE_useUser.js';
+import "./UNSAFE_MeterCircle.css";
+import { useRef, useState, useEffect } from 'preact/hooks';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import { classNames } from './utils/UNSAFE_classNames.js';
+import { CircleWrapper, CircleInner } from './PRIVATE_Meter.js';
+import { getCenterCoord, convertToPolar, getPositiveAngle, getClipPath, validateRange, getCircleSection, getMeterAriaProps, getTrackAndIndicatorColor } from './utils/PRIVATE_meterUtils.js';
+import { usePointerEvents, useKeyboardEvents, useMeterDatatip } from './hooks/PRIVATE_useDvtMeterEvents.js';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import './UNSAFE_Environment.js';
+import 'preact';
+import './UNSAFE_Layer.js';
+import 'preact/compat';
+import './hooks/UNSAFE_useTooltip.js';
+import './hooks/UNSAFE_useId.js';
+import './UNSAFE_Floating.js';
+import './index-14bba6f7.js';
+import './utils/PRIVATE_floatingUtils.js';
+import './utils/PRIVATE_refUtils.js';
+import './hooks/UNSAFE_useOutsideClick.js';
+import './utils/UNSAFE_arrayUtils.js';
+import './hooks/UNSAFE_useHover.js';
+import './hooks/UNSAFE_useToggle.js';
+import './hooks/UNSAFE_useFocus.js';
+import './hooks/UNSAFE_useTouch.js';
+import './hooks/UNSAFE_useAnimation.js';
+
+function CircularReferenceLine({
+  color,
+  angle,
+  radius,
+  length,
+  section = 'full'
+}) {
+  const centerCoord = getCenterCoord(section);
+  const yOffset = `calc(${centerCoord.y * 100}% - ((${Math.sin(angle * 2 * Math.PI / 360)} * ${radius})))`;
+  const xOffset = `calc(${centerCoord.x * 100}%  + ((${Math.cos(angle * 2 * Math.PI / 360)} * ${radius})))`;
+  return jsx("div", {
+    class: referenceLineStyles.base,
+    style: {
+      left: xOffset,
+      top: yOffset,
+      width: `calc(${length})`,
+      transform: `translate(0, -1px) rotate(${360 - angle}deg)`,
+      backgroundColor: color ? color : 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)',
+      borderBottom: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)'
+    }
+  });
+}
+const referenceLineStyles = {
+  base: "xzginw"
+};
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Returns the true dimensions of the meter circle after initial render. All dimensions are 0 for initial render.
+ * @param element The HTML element that wraps the track and indicator div.
+ * @param section The section in which the meter circle lies.
+ * @returns The dimensions of the meter circle.
+ */
+function getDimensions(element, section) {
+    if (!element) {
+        return {
+            width: 0,
+            height: 0,
+            innerRadius: 0,
+            outerRadius: 0
+        };
+    }
+    const circleTrack = element.children[0];
+    const rect = circleTrack.getBoundingClientRect();
+    return Object.assign({ width: Math.round(rect.width), height: Math.round(rect.height) }, getInnerAndOuterRadius(circleTrack, rect, section));
+}
+/**
+ * Returns the inner and outer radius of the meter circle.
+ * @param element The HTML element that wraps the track and indicator div.
+ * @param rect The bounding rect of the wrapper HTML element.
+ * @param section The section in which the meter circle lies.
+ * @returns The inner and outer radius of the meter circle.
+ */
+function getInnerAndOuterRadius(element, rect, section) {
+    const width = element.clientWidth;
+    const height = element.clientHeight;
+    if (section === 'bottom' || section === 'top') {
+        return { outerRadius: rect.width / 2, innerRadius: height };
+    }
+    else if (section === 'left' || section === 'right') {
+        return { outerRadius: rect.height / 2, innerRadius: width };
+    }
+    return { innerRadius: width / 2, outerRadius: rect.width / 2 };
+}
+/**
+ * Returns the value corresponding to clicked point in the meter circle. Returns undefined if the clicked point is
+ * outside the track of the meter circle.
+ * @param pageX The pageX of the click event
+ * @param pageY The pageY of the click event
+ * @param max The max value of the meter circle.
+ * @param min The min value of the meter circle.
+ * @param step The step of the metercircle.
+ * @param dimensionsRef The ref that stores dimensions reference of meter circle.
+ * @param startAngle The startAngle of the meter circle.
+ * @param angleExtent The angleExtent of the meter circle
+ * @returns {number} The value corresponding to clicked point in the meter circle.
+ */
+function getValue(event, min, max, step, dimensionsRef, startAngle, angleExtent, section, isRtl) {
+    const dims = dimensionsRef.current;
+    if (!dims) {
+        return undefined;
+    }
+    const center = getCenterCoord(section);
+    const { angle } = convertToPolar(dims.width * center.x, dims.height * center.y, event.offsetX, event.offsetY);
+    const positiveAngle = getPositiveAngle(angle);
+    let val;
+    if (isRtl && startAngle + angleExtent > positiveAngle) {
+        val = (getPositiveAngle(angle - startAngle) / angleExtent) * (max - min);
+    }
+    if (!isRtl) {
+        const clockwiseArc = getPositiveAngle(startAngle - positiveAngle);
+        if (clockwiseArc <= angleExtent) {
+            val = (clockwiseArc * (max - min)) / angleExtent;
+        }
+    }
+    if (val != undefined) {
+        val = Math.round(val / step) * step;
+    }
+    return val;
+}
+/**
+ * Returns the fraction of angle extent for given delta.
+ * @param delta The delta of metric values.
+ * @param min The minimum value of the meter circle.
+ * @param max The maximum value of the meter circle.
+ * @param angleExtent The angle extent of the meter circle.
+ * @returns The angle extent corresponding to delta in metric value.
+ */
+function getAngleExtentFromDelta(delta, min, max, angleExtent) {
+    return (delta * angleExtent) / (max - min);
+}
+/**
+ * Returns the start angle for given metric value.
+ * @param value The metric value
+ * @param min The minimum value of the meter circle.
+ * @param max The maximum value of the meter circle.
+ * @param startAngle The startAngle of the meter circle.
+ * @param angleExtent The angleExtent of the meter circle.
+ * @param isRtl Whether the reading mode is 'rtl'
+ * @returns The startAngle for the metric value.
+ */
+function getStartAngleForValue(value, min, max, startAngle, angleExtent, isRtl) {
+    const extent = getAngleExtentFromDelta(value - min, min, max, angleExtent);
+    return startAngle + (isRtl ? 1 : -1) * extent;
+}
+/**
+ * Returns the center context of for the meter circle.
+ */
+function getCenterContext(dimensionsRef, section) {
+    const dims = dimensionsRef.current;
+    if (!dims) {
+        return;
+    }
+    const center = getCenterCoord(section);
+    const cx = center.x * dims.width;
+    const cy = center.y * dims.height;
+    const isHoriz = section === 'top' || section === 'bottom';
+    let innerX, innerY, innerW, innerH;
+    let outerX, outerY, outerW, outerH;
+    if (isHoriz || section === 'full') {
+        outerW = 2 * dims.innerRadius;
+        outerH = section === 'full' ? 2 * dims.innerRadius : dims.innerRadius;
+        outerX = cx - dims.innerRadius;
+        outerY = section === 'bottom' ? 0 : cy - dims.innerRadius;
+        innerW = Math.sqrt(2) * dims.innerRadius;
+        innerH = section === 'full' ? innerW : dims.innerRadius / Math.sqrt(2);
+        innerX = cx - dims.innerRadius / Math.sqrt(2);
+        innerY = section === 'bottom' ? 0 : cy - dims.innerRadius / Math.sqrt(2);
+    }
+    else {
+        outerH = 2 * dims.innerRadius;
+        outerW = dims.innerRadius;
+        outerX = section === 'left' ? cx - dims.innerRadius : 0;
+        outerY = cy - dims.innerRadius;
+        innerH = Math.sqrt(2) * dims.innerRadius;
+        innerW = dims.innerRadius / Math.sqrt(2);
+        innerX = section === 'left' ? cx - dims.innerRadius / Math.sqrt(2) : 0;
+        innerY = cy - dims.innerRadius / Math.sqrt(2);
+    }
+    return {
+        outerBounds: {
+            x: outerX,
+            y: outerY,
+            width: outerW,
+            height: outerH
+        },
+        innerBounds: {
+            x: innerX,
+            y: innerY,
+            width: innerW,
+            height: innerH
+        }
+    };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Returns the css variable corresponding to the default size of the meter circle.
+ * @param size The size of the meter circle.
+ * @returns The css variable corresponding to the default size of the meter circle.
+ */
+function getSizeVar(size) {
+    return `var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${size}-size)`;
+}
+/**
+ * Returns the css variable corresponding to the default track size of the meter circle.
+ * @param size The size of the meter circle.
+ * @returns The css variable corresponding to the default track size of the meter circle.
+ */
+function getTrackSizeVar(size) {
+    return `var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${size}-track-size)`;
+}
+/**
+ * Returns the calculated css variable string for the inner radius when given size and innerRadius of meter circle.
+ * @param size The size of the meter circle.
+ * @param innerRadius The inner radius of the meter circle.
+ * @returns {string} CSS varible string for the calculated inner radius of the meter circle.
+ */
+function getInnerRadius(size, innerRadius) {
+    if (innerRadius != undefined) {
+        return `(${getSizeVar(size)} * ${innerRadius / 2})`;
+    }
+    return `(${getSizeVar(size)} * 0.5 - ${getTrackSizeVar(size)})`;
+}
+/**
+ * Returns the calculated css variable string for meter circle track for a given size and innerRadius of meter circle.
+ * @param size The size of the meter circle.
+ * @param innerRadius The inner radius of the meter circle.
+ * @returns {string} CSS variable for the calculated track size of the meter circle.
+ */
+function getTrackSize(size, innerRadius) {
+    if (innerRadius != undefined) {
+        return `(${getSizeVar(size)} * ${1 - innerRadius} / 2)`;
+    }
+    return getTrackSizeVar(size);
+}
+/**
+ * Returns the calculated length of reference line for given size and inner radius of meter circle.
+ * The length of reference line runs from the inner radius to slight outside the outer radius.
+ * The length outside the outer radius depends on size of the meter circle.
+ * @param size The size of the meter circle.
+ * @param innerRadius The inner radius of the meter circle.
+ * @returns The calculated CSS var for the length of reference line.
+ */
+function getRefLineLength(size, innerRadius) {
+    const outerExtent = { sm: '1rem', md: '0.75rem', lg: '0.5rem' };
+    return `${getTrackSize(size, innerRadius)} + ${outerExtent[size]}`;
+}
+/**
+ * Returns the array of calculated props for InnerCircle representing each threshold.
+ * @param meterInfo MeterInfo object containing info about given meter circle.
+ * @param thresholds thresholds array of the meter circle.
+ * @param isTrackRendered Whether track is rendered.
+ * @param trackColor The track color of the meter circle.
+ * @param innerRadius The inner radius of the meter circle.
+ * @returns Array of calculated props object for InnerCircle representing each threshold.
+ */
+function getThresholdsProps(meterInfo, thresholds, isTrackRendered, trackColor, innerRadius) {
+    const { min, max, startAngle, angleExtent, size, section, isRtl, innerRadius: innerDim } = meterInfo;
+    const trackSize = `calc(${getTrackSize(size, innerRadius)})`;
+    const thresholdProps = [];
+    const validThresholds = thresholds
+        .filter((threshold) => threshold.max > min && threshold.max <= max)
+        .sort((a, b) => a.max - b.max);
+    const numOfThreshold = validThresholds.length;
+    for (let i = 0; i < numOfThreshold; i++) {
+        const threshold = validThresholds[i];
+        const startValue = i === 0 ? min : validThresholds[i - 1].max;
+        const diff = i === 0 ? threshold.max : threshold.max - validThresholds[i - 1].max;
+        let thresholdStart = getStartAngleForValue(startValue, min, max, startAngle, angleExtent, isRtl);
+        let thresholdExtent = getAngleExtentFromDelta(diff, min, max, angleExtent);
+        const { startOffset, extentOffset } = getThresholdsBuffer(innerDim, angleExtent, i === 0, threshold.max === max, isRtl);
+        const clipPath = getClipPath(thresholdStart + startOffset, thresholdExtent + extentOffset, isRtl, section);
+        thresholdProps.push({
+            clipPath,
+            color: threshold === null || threshold === void 0 ? void 0 : threshold.color,
+            size: trackSize,
+            section
+        });
+        if (i === numOfThreshold - 1 && threshold.max < max && isTrackRendered) {
+            thresholdStart = thresholdStart + (isRtl ? 1 : -1) * thresholdExtent;
+            thresholdExtent = getAngleExtentFromDelta(max - threshold.max, min, max, angleExtent);
+            const { startOffset, extentOffset } = getThresholdsBuffer(innerDim, angleExtent, false, true, isRtl);
+            thresholdProps.push({
+                clipPath: getClipPath(thresholdStart + startOffset, thresholdExtent + extentOffset, isRtl, section),
+                color: trackColor,
+                size: trackSize,
+                section
+            });
+        }
+    }
+    return thresholdProps;
+}
+/**
+ * Returns the calculated props for CircularReferenceLine.
+ * @param meterInfo MeterInfo object containing info about the meter circle.
+ * @param refLine The CircularRefLine object
+ * @param innerRadius The innerRadius of the meter circle.
+ * @returns An bject with calculated props for CircularReferenceLine.
+ */
+function getReferenceLinesProps(meterInfo, refLine, innerRadius) {
+    const { min, max, startAngle, angleExtent, size, isRtl } = meterInfo;
+    return {
+        radius: getInnerRadius(size, innerRadius),
+        length: getRefLineLength(size, innerRadius),
+        angle: getStartAngleForValue(refLine.value, min, max, startAngle, angleExtent, isRtl),
+        color: refLine.color
+    };
+}
+/**
+ * Returns the calculated props for InnerCircle representing the track.
+ * @param meterInfo MeterInfo object containing info about the meter circle.
+ * @param trackColor The color of the track.
+ * @param istrackRendered Whether the track is rendered.
+ * @param thresholdDisplay Specifies whether the current threshold is displayed in the track, on the indicator, or if all thresholds are displayed in the track.
+ * @param innerRadius The innerRadius of the meter circle.
+ * @param thresholds thresholds array of the meter circle.
+ * @returns An object with calculated props for InnerCircle that represents the track.
+ */
+function getTrackProps(meterInfo, isTrackRendered, thresholdDisplay, trackColor, innerRadius, thresholds) {
+    const { startAngle, angleExtent, size, section, isRtl } = meterInfo;
+    const color = !isTrackRendered
+        ? 'transparent'
+        : thresholdDisplay === 'all' && thresholds
+            ? 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)'
+            : trackColor;
+    return {
+        section,
+        color,
+        clipPath: getClipPath(startAngle, angleExtent, isRtl, section),
+        size: `calc(${getTrackSize(size, innerRadius)})`
+    };
+}
+/**
+ * Returns the calculated props for InnerCircle representing the indicator.
+ * @param meterInfo MeterInfo object containing info about the meter circle.
+ * @param indicatorSize Relative thickness of the indicator to the track.
+ * @param innerRadius The innerRadius of the meter circle.
+ * @returns An object with calculated props for InnerCircle that represents the indicator.
+ */
+function getIndicatorProps(meterInfo, indicatorSize, innerRadius) {
+    const { value, min, max, startAngle, angleExtent, size, section, isRtl } = meterInfo;
+    const valueExtent = ((value - min) * angleExtent) / (max - min);
+    const validIndicatorSize = Math.min(Math.max(0, indicatorSize), 1);
+    const isHoriz = section === 'left' || section === 'right';
+    const isVert = section === 'top' || section === 'bottom';
+    const valueTrackSize = `calc(${getTrackSize(size, innerRadius)} * ${validIndicatorSize})`;
+    const diameter = `${getSizeVar(size)} - ((1 - ${validIndicatorSize}) * ${getTrackSize(size, innerRadius)})`;
+    const radius = `(${diameter}) / 2`;
+    return {
+        section,
+        width: isHoriz ? `calc(${radius})` : `calc(${diameter})`,
+        height: isVert ? `calc(${radius})` : `calc(${diameter})`,
+        size: valueTrackSize,
+        clipPath: getClipPath(startAngle, valueExtent, isRtl, section)
+    };
+}
+/**
+ * Returns the threshold offsets to create the whitespace between the thresholds.
+ * @param innerRadius The innerRadius of the meter circle.
+ * @param angleExtent The angleExtent of the meter circle.
+ * @param firstThreshold Whether the current threshold is the first threshold.
+ * @param lastThreshold  Whether the current threshold is the last threshold.
+ * @param isRtl Whether the document reading mode is 'rtl'
+ * @returns The offsets (startOffset and extentOffset) to add to calculated threshold startAngle and threhsold extent.
+ */
+function getThresholdsBuffer(innerRadius, angleExtent, firstThreshold, lastThreshold, isRtl) {
+    if (!innerRadius) {
+        return { startOffset: 0, extentOffset: 0 };
+    }
+    const offset = 360 / (2 * Math.PI * innerRadius);
+    let startOffset = (offset / 2) * (isRtl ? 1 : -1);
+    let extentOffset = -1 * offset;
+    if (firstThreshold && angleExtent < 360) {
+        startOffset = 0;
+        extentOffset = -0.5 * offset;
+    }
+    if (lastThreshold && angleExtent < 360) {
+        extentOffset = -0.5 * offset;
+    }
+    return { startOffset, extentOffset };
+}
+
+/**
+ * A Meter circle displays information graphically in a circular bar, highlighting a specific metric value's progress in relation to its min, max, or thresholds.
+ */
+
+function MeterCircle(_a) {
+  var _b;
+
+  var {
+    max = 100,
+    min = 0,
+    value = 0,
+    step = 1,
+    size = 'lg',
+    startAngle = 90,
+    angleExtent = 360,
+    isTrackRendered = true,
+    thresholdDisplay = 'all',
+    indicatorSize = 1
+  } = _a,
+      props = __rest(_a, ["max", "min", "value", "step", "size", "startAngle", "angleExtent", "isTrackRendered", "thresholdDisplay", "indicatorSize"]);
+
+  validateRange(min, max, value, step);
+  const {
+    direction
+  } = useUser();
+  const isRtl = direction === 'rtl';
+  const section = getCircleSection(startAngle, angleExtent, isRtl);
+  const dimensionsRef = useRef(getDimensions(null, section));
+  const circleWrapperRef = useRef(null);
+  const [isDimsReady, setDimsReady] = useState(false);
+  useEffect(() => {
+    if (props.onCommit || props.onInput || props.children) {
+      dimensionsRef.current = getDimensions(circleWrapperRef.current, section);
+      setDimsReady(true);
+    }
+  }, [size, props.onCommit, props.onInput, props.children]);
+
+  const getValueFromEvent = event => {
+    const circleContainer = circleWrapperRef.current;
+
+    if (event.target == circleContainer) {
+      return getValue(event, min, max, step, dimensionsRef, startAngle, angleExtent, section, isRtl);
+    }
+
+    return;
+  };
+
+  const pointerEventsProps = usePointerEvents(value, getValueFromEvent, circleWrapperRef, props.onCommit, props.onInput);
+  const keyboardEventsProps = useKeyboardEvents(value, min, max, step, props.onCommit, props.onInput);
+  const {
+    datatipContent,
+    datatipProps
+  } = useMeterDatatip(value, props.datatip, props.ariaDescribedBy);
+  const ariaProps = getMeterAriaProps(value, min, max, `${value}`, props.accessibleLabel, props.ariaLabelledBy, props.thresholds);
+  const mergedProps = mergeProps(pointerEventsProps, keyboardEventsProps, datatipProps, ariaProps);
+  const {
+    trackColor,
+    indicatorColor
+  } = getTrackAndIndicatorColor(value, thresholdDisplay, props.trackColor, props.indicatorColor, props.thresholds);
+  const orientation = section === 'bottom' || section === 'top' ? 'Horizontal' : section === 'left' || section === 'right' ? 'Vertical' : 'Full';
+  const meterInfo = {
+    min,
+    max,
+    value,
+    startAngle,
+    angleExtent,
+    size,
+    section,
+    isRtl,
+    innerRadius: dimensionsRef.current.innerRadius
+  };
+  const isInteractive = props.onCommit || props.onInput;
+  const {
+    isTabbable
+  } = useTabbableMode();
+  const centerContext = getCenterContext(dimensionsRef, section);
+  return jsxs(Fragment, {
+    children: [jsx("div", Object.assign({
+      class: classNames([component.base, isInteractive ? component.interactive : '']),
+      tabIndex: !isTabbable ? -1 : 0,
+      role: "slider"
+    }, mergedProps, {
+      children: jsxs(CircleWrapper, Object.assign({
+        ref: circleWrapperRef,
+        class: classNames([circleWrapper.base, props.referenceLines && props.referenceLines.length > 0 ? styles[`${size}${section}`] : '', styles[`${size}${orientation}`]])
+      }, {
+        children: [jsx(CircleInner, Object.assign({
+          class: classNames([circleTrack.base, styles[section]])
+        }, getTrackProps(meterInfo, isTrackRendered, thresholdDisplay, trackColor, props.innerRadius, props.thresholds))), thresholdDisplay === 'all' && props.thresholds && getThresholdsProps(meterInfo, props.thresholds, isTrackRendered, trackColor, props.innerRadius).map(threshold => {
+          return jsx(CircleInner, Object.assign({
+            class: classNames([circleTrack.base, styles[section], styles.thresholds])
+          }, threshold));
+        }), jsx(CircleInner, Object.assign({
+          color: indicatorColor,
+          class: classNames([circleValue.base, circleValue[section], styles[section]])
+        }, getIndicatorProps(meterInfo, indicatorSize, props.innerRadius))), (_b = props.referenceLines) === null || _b === void 0 ? void 0 : _b.map(refLine => {
+          return jsx(CircularReferenceLine, Object.assign({}, getReferenceLinesProps(meterInfo, refLine, props.innerRadius), {
+            section: section
+          }));
+        }), isDimsReady && props.children && centerContext && jsx("div", Object.assign({
+          class: classNames([styles.centerContent, childrenStyles])
+        }, {
+          children: props.children(centerContext)
+        }))]
+      }))
+    })), datatipContent]
+  });
+}
+const component = {
+  base: "qzvstu",
+  interactive: "_12fy50l"
+};
+const styles = {
+  full: "yubw96",
+  top: "nga9fd",
+  bottom: "vb1bn9",
+  right: "hdf3rj",
+  left: "_4axnr0",
+  smtop: "qyrwrp",
+  mdtop: "mxuybm",
+  lgtop: "o77lss",
+  smbottom: "_679gib",
+  mdbottom: "lut1nu",
+  lgbottom: "_1025ms8",
+  smleft: "wo07db",
+  mdleft: "_16ti7sg",
+  lgleft: "_7q3vzj",
+  smright: "_152e44h",
+  mdright: "_1cdyoiy",
+  lgright: "une35s",
+  smfull: "wzivam",
+  mdfull: "zn2jfg",
+  lgfull: "cq4evr",
+  lgHorizontal: "x42ace",
+  lgVertical: "azdfur",
+  smHorizontal: "_1w26tmx",
+  smVertical: "a2ydch",
+  mdHorizontal: "_5yssj",
+  mdVertical: "i4i31j",
+  smFull: "_1jtwh41",
+  mdFull: "_1pc4ma7",
+  lgFull: "_17kom2q",
+  centerContent: "j5ygrs",
+  thresholds: "_1x0kdjj"
+};
+const childrenStyles = "f48p8g";
+const circleWrapper = {
+  base: "_13wjw02"
+};
+const circleTrack = {
+  base: "c2x535",
+  sm: "_18gcf96",
+  md: "_3fw1y2",
+  lg: "_15b6cuc"
+};
+const circleValue = {
+  base: "_14q5ois",
+  full: "qkjabh",
+  top: "_13z3793",
+  right: "_8vjhmg",
+  left: "lnx6r1",
+  bottom: "zmrwkq"
+};
+
+export { MeterCircle };
+/*  */
+//# sourceMappingURL=UNSAFE_MeterCircle.js.map