@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/RadioCard/RadioCard.styles.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContainer = exports.StyledWrapper = exports.StyledRadioInputDot = exports.StyledRadioInput = exports.StyledRadioInputWrapper = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+exports.StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      margin-top: ${(0, element_core_1.numToPx)(theme.space[200])};
+    `;
+});
+exports.StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+    `;
+});
+exports.StyledRadioInputDot = styled_native_1.default.View(({ theme, checked }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[300])};
+      height: ${(0, element_core_1.numToPx)(theme.space[300])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+exports.StyledWrapper = styled_native_1.default.View(({ theme, checked, invalid, alignment }) => (0, styled_native_1.css) `
+    align-items: center;
+    text-align: center;
+    justify-content: ${alignment === 'center' ? 'center' : 'flex-end'};
+    flex-direction: ${alignment === 'left'
+    ? 'row-reverse'
+    : alignment === 'right'
+        ? 'row'
+        : 'column'};
+    background: ${theme.color.surface.bright};
+    padding: ${alignment === 'center'
+    ? (0, element_core_1.numToPx)(theme.space[200])
+    : (0, element_core_1.numToPx)(theme.space[400])};
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+    border-color: ${invalid
+    ? theme.input.color.borderError
+    : checked
+        ? theme.input.color.selected
+        : 'transparent'};
+    gap: ${alignment === 'center' ? 0 : (0, element_core_1.numToPx)(theme.space[400])};
+  `);
+exports.TextContainer = styled_native_1.default.View(({ alignment }) => (0, styled_native_1.css) `
+    flex-direction: column;
+    flex-grow: 1;
+    text-align: ${alignment === 'center' ? 'center' : 'left'};
+  `);

package/dist/components/RadioCard/index.js

@@ -1 +1,5 @@
-export { RadioCard } from './RadioCard';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioCard = void 0;
+var RadioCard_1 = require("./RadioCard");
+Object.defineProperty(exports, "RadioCard", { enumerable: true, get: function () { return RadioCard_1.RadioCard; } });

package/dist/components/RemoteImage/RemoteImage.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Animated, Image, StyleSheet, View } from 'react-native';
-import { SvgUri } from 'react-native-svg';
-import { theme } from '@ovotech/element-core';
-const AnimatedImage = Animated.createAnimatedComponent(Image);
-const styles = StyleSheet.create({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoteImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const AnimatedImage = react_native_1.Animated.createAnimatedComponent(react_native_1.Image);
+const styles = react_native_1.StyleSheet.create({
     image: {
         width: '100%',
         height: '100%',
@@ -21,10 +24,10 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
     },
     placeholder: {
-        backgroundColor: theme.color.neutral['40'],
+        backgroundColor: element_core_1.theme.color.neutral['40'],
     },
 });
-const animate = (animated, newValue) => Animated.timing(animated, {
+const animate = (animated, newValue) => react_native_1.Animated.timing(animated, {
     toValue: newValue,
     useNativeDriver: false,
 });
@@ -32,34 +35,34 @@ const animate = (animated, newValue) => Animated.timing(animated, {
 /**
  * @experimental The signature of this component is likely to change, use with caution.
  */
-export const RemoteImage = memo(function RemoteImage({ uri, style, accessible, accessibilityRole, accessibilityLabel, resizeMode = 'cover', placeholderColor, reportError, testID, shouldDisplayThumbnail = true, }) {
-    const [loadedImage, setLoadedImage] = useState(false);
+exports.RemoteImage = (0, react_1.memo)(function RemoteImage({ uri, style, accessible, accessibilityRole, accessibilityLabel, resizeMode = 'cover', placeholderColor, reportError, testID, shouldDisplayThumbnail = true, }) {
+    const [loadedImage, setLoadedImage] = (0, react_1.useState)(false);
     /*
       Don't modify the animated value directly. You can use the useRef Hook to return a mutable ref object.
       This ref object's current property is initialized as the given argument and persists throughout the
       component lifecycle.
     */
-    const animatedPlaceholder = useRef(new Animated.Value(1)).current;
-    const animatedThumbnailImage = useRef(new Animated.Value(0)).current;
-    const animatedImage = useRef(new Animated.Value(0)).current;
-    const onThumbnailLoad = useCallback(() => {
+    const animatedPlaceholder = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const animatedThumbnailImage = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const animatedImage = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const onThumbnailLoad = (0, react_1.useCallback)(() => {
         animate(animatedPlaceholder, 0).start();
         if (!loadedImage) {
             animate(animatedThumbnailImage, 1).start();
         }
     }, [loadedImage]);
-    const onImageLoad = useCallback(() => {
+    const onImageLoad = (0, react_1.useCallback)(() => {
         setLoadedImage(true);
         animate(animatedThumbnailImage, 0).start(() => {
             animatedThumbnailImage.setValue(0); // Reset thumbnail opacity
         });
         animate(animatedImage, 1).start();
     }, [animatedThumbnailImage]);
-    const reportImageLoadingError = useCallback(() => {
-        reportError?.();
+    const reportImageLoadingError = (0, react_1.useCallback)(() => {
+        reportError === null || reportError === void 0 ? void 0 : reportError();
     }, [reportError]);
     const thumbUri = getThumbUri(uri);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (thumbUri)
             return;
         if (shouldDisplayThumbnail) {
@@ -68,18 +71,18 @@ export const RemoteImage = memo(function RemoteImage({ uri, style, accessible, a
     }, [thumbUri, uri, shouldDisplayThumbnail, reportImageLoadingError]);
     const isSvg = uri.endsWith('.svg');
     if (isSvg) {
-        return _jsx(SvgUri, { uri: uri, style: style });
+        return (0, jsx_runtime_1.jsx)(react_native_svg_1.SvgUri, { uri: uri, style: style });
     }
-    return (_jsxs(View, { style: style, children: [_jsx(Animated.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style, children: [(0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
                     styles.absoluteCenter,
                     styles.placeholder,
                     {
                         opacity: animatedPlaceholder,
                         backgroundColor: placeholderColor,
                     },
-                ] }), thumbUri && shouldDisplayThumbnail ? (_jsx(AnimatedImage, { source: {
+                ] }), thumbUri && shouldDisplayThumbnail ? ((0, jsx_runtime_1.jsx)(AnimatedImage, { source: {
                     uri: thumbUri,
-                }, style: [styles.absoluteCenter, { opacity: animatedThumbnailImage }], onLoad: onThumbnailLoad, onError: () => reportImageLoadingError() })) : null, _jsx(AnimatedImage, { accessible: accessible, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, source: {
+                }, style: [styles.absoluteCenter, { opacity: animatedThumbnailImage }], onLoad: onThumbnailLoad, onError: () => reportImageLoadingError() })) : null, (0, jsx_runtime_1.jsx)(AnimatedImage, { accessible: accessible, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, source: {
                     uri,
                 }, testID: testID, resizeMode: resizeMode, style: [
                     styles.image,

package/dist/components/RemoteImage/index.js

@@ -1 +1,5 @@
-export { RemoteImage } from './RemoteImage';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoteImage = void 0;
+var RemoteImage_1 = require("./RemoteImage");
+Object.defineProperty(exports, "RemoteImage", { enumerable: true, get: function () { return RemoteImage_1.RemoteImage; } });

package/dist/components/RemoteImage/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ScreenView/ScreenView.js

@@ -1,21 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useWindowDimensions, View } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import styled, { useTheme } from '../../styled.native';
-const BackgroundWrapper = styled(View)({
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const BackgroundWrapper = (0, styled_native_1.default)(react_native_1.View)({
     width: '100%',
     alignItems: 'center',
 });
-const ContentContainer = styled(View)(({ paddingHorizontal, minWidth, maxWidth }) => ({
+const ContentContainer = (0, styled_native_1.default)(react_native_1.View)(({ paddingHorizontal, minWidth, maxWidth }) => ({
     width: '100%',
     paddingHorizontal,
     minWidth,
     maxWidth,
 }));
-export const ScreenView = ({ children }) => {
-    const { xsmallAndUp, smallAndUp, mediumAndUp } = useBreakpoint();
-    const { width } = useWindowDimensions();
-    const theme = useTheme();
+const ScreenView = ({ children }) => {
+    const { xsmallAndUp, smallAndUp, mediumAndUp } = (0, hooks_1.useBreakpoint)();
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    const theme = (0, styled_native_1.useTheme)();
     let maxWidth = width;
     let paddingHorizontal = theme.space[400];
     if (mediumAndUp) {
@@ -29,5 +65,6 @@ export const ScreenView = ({ children }) => {
     else if (width < 359) {
         paddingHorizontal = theme.space[400];
     }
-    return (_jsx(BackgroundWrapper, { children: _jsx(ContentContainer, { paddingHorizontal: paddingHorizontal, maxWidth: maxWidth, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(BackgroundWrapper, { children: (0, jsx_runtime_1.jsx)(ContentContainer, { paddingHorizontal: paddingHorizontal, maxWidth: maxWidth, children: children }) }));
 };
+exports.ScreenView = ScreenView;

package/dist/components/ScreenView/index.js

@@ -1 +1,17 @@
-export * from './ScreenView';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ScreenView"), exports);

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -1,19 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
-import styled, { useTheme } from '../../styled.native';
-import { SegmentButton } from './components/SegmentButton';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const styled_native_1 = __importStar(require("../../styled.native"));
+const SegmentButton_1 = require("./components/SegmentButton");
 /* These settings were found to be nice and fast whilst maintaining spring */
 const springSettings = {
     damping: 25,
     mass: 0.25,
 };
-export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large', ...rest }) => {
-    const animatedX = useSharedValue(0);
-    const animatedY = useSharedValue(0);
-    const animatedHeight = useSharedValue(0);
-    const animatedWidth = useSharedValue(0);
-    const theme = useTheme();
-    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+const SegmentedControls = (_a) => {
+    var { activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large' } = _a, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
+    const animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    const animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
+    const theme = (0, styled_native_1.useTheme)();
+    const animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         position: 'absolute',
         left: animatedX.value,
         top: animatedY.value + theme.space[size === 'small' ? 200 : 300],
@@ -22,20 +70,24 @@ export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, i
         borderRadius: theme.border.radius['2xl'],
         backgroundColor: theme.color.surface.bright,
     }), [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, ...rest, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(segment => (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
-                    animatedX.value = withSpring(x, springSettings);
-                    animatedY.value = withSpring(y, springSettings);
-                    animatedWidth.value = width;
-                }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
-                    if (activeSegment.key === segment.key) {
-                        animatedX.value = x;
-                        animatedY.value = y;
-                        animatedHeight.value = height;
+    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, Object.assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(segment => {
+                var _a, _b;
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
+                        animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
+                        animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
                         animatedWidth.value = width;
-                    }
-                }, multipleRows: multipleRows, size: size, inline: inline, testID: `${rest.testID ?? 'segment'}-${segment.key}`, segmentCount: segments.length ?? 0 }, segment.key)))] }));
+                    }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            animatedY.value = y;
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: `${(_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment'}-${segment.key}`, segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0 }, segment.key));
+            })] })));
 };
-const SegmentsContainer = styled.View(({ theme, $inline, $multipleRows }) => `
+exports.SegmentedControls = SegmentedControls;
+const SegmentsContainer = styled_native_1.default.View(({ theme, $inline, $multipleRows }) => `
   flex-direction: row;
   flex-wrap: ${$multipleRows ? '' : 'no-'}wrap;
   justify-content: ${$multipleRows ? 'space-between' : 'space-around'};

package/dist/components/SegmentedControls/components/SegmentButton.js

@@ -1,40 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { Pressable, useWindowDimensions, } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import styled from '../../../styled.native';
-import { P } from '../../P';
-const AnimatedP = Animated.createAnimatedComponent(P);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const P_1 = require("../../P");
+const AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
 const textSizeProps = {
     numberOfLines: 1,
     adjustsFontSizeToFit: true,
     minimumFontScale: 0.95,
     maxFontSizeMultiplier: 1.75,
 };
-export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size = 'large', testID, }) => {
-    const xRef = useRef(0);
-    const yRef = useRef(0);
-    const widthRef = useRef(0);
-    const heightRef = useRef(0);
+const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size = 'large', testID, }) => {
+    const xRef = (0, react_1.useRef)(0);
+    const yRef = (0, react_1.useRef)(0);
+    const widthRef = (0, react_1.useRef)(0);
+    const heightRef = (0, react_1.useRef)(0);
     const hitslopVal = size === 'small' ? 8 : 4;
-    const fontScale = useWindowDimensions().fontScale;
-    const fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
-    const animatedStyleNormal = useAnimatedStyle(() => {
+    const fontScale = (0, react_native_1.useWindowDimensions)().fontScale;
+    const fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
+    const animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
             opacity: 1 - fontWeightAnim.value,
             position: 'absolute',
         };
     }, [fontWeightAnim]);
-    const animatedStyleBold = useAnimatedStyle(() => {
+    const animatedStyleBold = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
             opacity: fontWeightAnim.value,
             position: 'absolute',
         };
     }, [fontWeightAnim]);
-    useEffect(() => {
-        fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
+    (0, react_1.useEffect)(() => {
+        fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!isSelected) {
             return;
         }
@@ -52,25 +91,26 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
         widthRef.current = width;
         onLayout(width, height, x, yRef.current);
     };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: {
             flexGrow: inline || multipleRows ? undefined : 1,
             width: inline || multipleRows ? 'auto' : `${100 / segmentCount}%`,
-        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, { style: {
+        }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [(0, jsx_runtime_1.jsx)(SSegmentText, Object.assign({ style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, ...textSizeProps, children: label })] }) }));
+                    }, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, Object.assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, Object.assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
 };
-const SSegmentsWrapper = styled.View(({ theme, $size, multiline }) => `
+exports.SegmentButton = SegmentButton;
+const SSegmentsWrapper = styled_native_1.default.View(({ theme, $size, multiline }) => `
   ${multiline
     ? `padding: 4px ${theme.space[$size === 'small' ? 400 : 600]}px;`
     : `padding: ${$size === 'small' ? 2 : 8}px ${theme.space[$size === 'small' ? 300 : 400]}px;`}
   align-items: center;
   justify-content: center;
 `);
-const SSegmentText = styled(AnimatedP)(({ $isSelected, theme }) => `
+const SSegmentText = (0, styled_native_1.default)(AnimatedP)(({ $isSelected, theme }) => `
     font-family: ${$isSelected
     ? theme.native.font.family.bold
     : theme.native.font.family.book};

package/dist/components/SegmentedControls/index.js

@@ -1,2 +1,5 @@
-import { SegmentedControls } from './SegmentedControls';
-export { SegmentedControls };
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControls = void 0;
+const SegmentedControls_1 = require("./SegmentedControls");
+Object.defineProperty(exports, "SegmentedControls", { enumerable: true, get: function () { return SegmentedControls_1.SegmentedControls; } });