@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/Switch/Switch.stories.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Variants = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Switch_1 = require("./Switch");
-const helpers_1 = require("../../storybook/helpers");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-exports.default = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Switch } from "./Switch";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export default {
     title: "Switch",
-    component: Switch_1.Switch,
+    component: Switch,
 };
-const Variants = () => {
-    const [switches, setSwitches] = (0, react_1.useState)([
+export const Variants = () => {
+    const [switches, setSwitches] = useState([
         { id: 1, label: "Default colors", value: true },
         { id: 2, label: "disabled", value: false },
         { id: 3, label: "Custom #1", value: true },
@@ -21,6 +18,5 @@ const Variants = () => {
     const handleSwitchChange = (id) => {
         setSwitches((prevSwitches) => prevSwitches.map((sw) => (sw.id === id ? { ...sw, value: !sw.value } : sw)));
     };
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Default State" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Disabled" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Custom Colors 1" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Custom Colors 2" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "white100", trackColorInactive: "red100" })] })] }));
+    return (_jsxs(List, { children: [_jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Default State" }), _jsx(Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Disabled" }), _jsx(Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 1" }), _jsx(Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 2" }), _jsx(Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "white100", trackColorInactive: "red100" })] })] }));
 };
-exports.Variants = Variants;

package/dist/elements/Switch/index.js

@@ -1,17 +1 @@
-"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("./Switch"), exports);
+export * from "./Switch";

package/dist/elements/Tabs/SubTabBar.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubTabBar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const moti_1 = require("moti");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const react_native_reanimated_1 = require("react-native-reanimated");
-const useSpace_1 = require("../../utils/hooks/useSpace");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MotiView } from "moti";
+import { useCurrentTabScrollY, useHeaderMeasurements } from "react-native-collapsible-tab-view";
+import { useAnimatedStyle } from "react-native-reanimated";
+import { useSpace } from "../../utils/hooks/useSpace";
 /**
  * Use to position content directly below the tab bar, and for it to stick while
  * scrolling in the subview.
  *
  * Useful for views where subcontent has a s
  */
-const SubTabBar = ({ children }) => {
-    const { top } = (0, react_native_collapsible_tab_view_1.useHeaderMeasurements)();
-    const scrollY = (0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)();
-    const space = (0, useSpace_1.useSpace)();
-    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+export const SubTabBar = ({ children }) => {
+    const { top } = useHeaderMeasurements();
+    const scrollY = useCurrentTabScrollY();
+    const space = useSpace();
+    const style = useAnimatedStyle(() => {
         return {
             transform: [
                 {
@@ -25,6 +22,5 @@ const SubTabBar = ({ children }) => {
             ],
         };
     }, []);
-    return (0, jsx_runtime_1.jsx)(moti_1.MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
+    return _jsx(MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
 };
-exports.SubTabBar = SubTabBar;

package/dist/elements/Tabs/TabFlashList.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabFlashList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-function TabFlashList(props) {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export function TabFlashList(props) {
+    useListenForTabContentScroll();
+    const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlashList, { contentContainerStyle: {
+    return (_jsx(Tabs.FlashList, { contentContainerStyle: {
             paddingHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props }));
 }
-exports.TabFlashList = TabFlashList;

package/dist/elements/Tabs/TabFlatList.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabFlatList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-function TabFlatList(props) {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export function TabFlatList(props) {
+    useListenForTabContentScroll();
+    const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlatList, { contentContainerStyle: {
+    return (_jsx(Tabs.FlatList, { contentContainerStyle: {
             marginHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props }));
 }
-exports.TabFlatList = TabFlatList;

package/dist/elements/Tabs/TabMasonry.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabMasonry = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-function TabMasonry(props) {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export function TabMasonry(props) {
+    useListenForTabContentScroll();
+    const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.MasonryFlashList, { contentContainerStyle: {
+    return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
             paddingHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props, ref: props.innerRef }));
 }
-exports.TabMasonry = TabMasonry;

package/dist/elements/Tabs/TabScrollView.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabScrollView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-const TabScrollView = (props) => {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export const TabScrollView = (props) => {
+    useListenForTabContentScroll();
+    const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.ScrollView
+    return (_jsx(Tabs.ScrollView
     // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
     // @ts-ignore
     , { 
@@ -20,4 +17,3 @@ const TabScrollView = (props) => {
             ...contentContainerStyle,
         }, ...props }));
 };
-exports.TabScrollView = TabScrollView;

package/dist/elements/Tabs/Tabs.js

@@ -1,29 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const SubTabBar_1 = require("./SubTabBar");
-const TabFlashList_1 = require("./TabFlashList");
-const TabFlatList_1 = require("./TabFlatList");
-const TabMasonry_1 = require("./TabMasonry");
-const TabScrollView_1 = require("./TabScrollView");
-const TabsContainer_1 = require("./TabsContainer");
-const TabsWithHeader_1 = require("./TabsWithHeader");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-exports.Tabs = Object.assign(TabsContainer_1.TabsContainer, {
-    FlatList: TabFlatList_1.TabFlatList,
-    FlashList: TabFlashList_1.TabFlashList,
-    Masonry: TabMasonry_1.TabMasonry,
-    Lazy: react_native_collapsible_tab_view_1.Tabs.Lazy,
-    ScrollView: TabScrollView_1.TabScrollView,
-    SectionList: react_native_collapsible_tab_view_1.Tabs.SectionList,
-    SubTabBar: SubTabBar_1.SubTabBar,
-    Tab: react_native_collapsible_tab_view_1.Tabs.Tab,
-    TabsWithHeader: TabsWithHeader_1.TabsWithHeader,
+import { Tabs as BaseTabs, useAnimatedTabIndex, useCurrentTabScrollY, useFocusedTab, useHeaderMeasurements, } from "react-native-collapsible-tab-view";
+import { SubTabBar } from "./SubTabBar";
+import { TabFlashList } from "./TabFlashList";
+import { TabFlatList } from "./TabFlatList";
+import { TabMasonry } from "./TabMasonry";
+import { TabScrollView } from "./TabScrollView";
+import { TabsContainer } from "./TabsContainer";
+import { TabsWithHeader } from "./TabsWithHeader";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+export const Tabs = Object.assign(TabsContainer, {
+    FlatList: TabFlatList,
+    FlashList: TabFlashList,
+    Masonry: TabMasonry,
+    Lazy: BaseTabs.Lazy,
+    ScrollView: TabScrollView,
+    SectionList: BaseTabs.SectionList,
+    SubTabBar,
+    Tab: BaseTabs.Tab,
+    TabsWithHeader,
     // Hooks
-    useAnimatedTabIndex: react_native_collapsible_tab_view_1.useAnimatedTabIndex,
-    useCurrentTabScrollY: react_native_collapsible_tab_view_1.useCurrentTabScrollY,
-    useListenForTabContentScroll: useListenForTabContentScroll_1.useListenForTabContentScroll,
-    useFocusedTab: react_native_collapsible_tab_view_1.useFocusedTab,
-    useHeaderMeasurements: react_native_collapsible_tab_view_1.useHeaderMeasurements,
+    useAnimatedTabIndex,
+    useCurrentTabScrollY,
+    useListenForTabContentScroll,
+    useFocusedTab,
+    useHeaderMeasurements,
 });

package/dist/elements/Tabs/Tabs.stories.js

@@ -1,13 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const Tabs_1 = require("./Tabs");
-const Flex_1 = require("../Flex");
-const Screen_1 = require("../Screen");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Tabs", module)
-    .add("Simple Tabs", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
-    .add("Tabs with Indicator", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }) }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
-    .add("Tabs with AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] })))
-    .add("Tabs with header", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pointerEvents: "none", p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Artist" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Description" })] })), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) })] })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Tabs } from "./Tabs";
+import { Flex } from "../Flex";
+import { Screen } from "../Screen";
+import { Text } from "../Text";
+storiesOf("Tabs", module)
+    .add("Simple Tabs", () => (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] })))
+    .add("Tabs with Indicator", () => (_jsxs(Tabs, { indicators: [{ tabName: "tab1", Component: () => _jsx(Text, { textAlign: "right", children: "hi" }) }], children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] })))
+    .add("Tabs with AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] })))
+    .add("Tabs with header", () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Artist" }), _jsx(Text, { children: "Description" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] })));

package/dist/elements/Tabs/TabsContainer.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const constants_1 = require("../../constants");
-const useColor_1 = require("../../utils/hooks/useColor");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Platform } from "react-native";
+import { Tabs as BaseTabs, MaterialTabBar, MaterialTabItem, } from "react-native-collapsible-tab-view";
+import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
+import { useColor } from "../../utils/hooks/useColor";
+import { useSpace } from "../../utils/hooks/useSpace";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
 const TAB_BAR_HEIGHT = 50;
-const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
-    const space = (0, useSpace_1.useSpace)();
-    const color = (0, useColor_1.useColor)();
-    const isIOS = react_native_1.Platform.OS === "ios";
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
+export const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
+    const space = useSpace();
+    const color = useColor();
+    const isIOS = Platform.OS === "ios";
+    return (_jsx(BaseTabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
             shadowOpacity: 0,
             shadowRadius: 0,
             elevation: 0,
@@ -22,7 +19,7 @@ const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader
         }, initialTabName: initialTabName, containerStyle: {
             paddingTop: space(2),
         }, renderTabBar: (tabBarProps) => {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabBar, { ...tabBarProps, scrollEnabled: tabScrollEnabled, onTabPress: (tab) => {
+            return (_jsx(_Fragment, { children: _jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: tabScrollEnabled, onTabPress: (tab) => {
                         tabBarProps.onTabPress(tab);
                         onTabPress?.(tab);
                     }, style: {
@@ -33,7 +30,7 @@ const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader
                         const Indicator = indicators.find((indicator) => {
                             return indicator.tabName === props.name;
                         });
-                        return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && (0, jsx_runtime_1.jsx)(Indicator.Component, { ...props }) }), (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabItem, { pressOpacity: constants_1.DEFAULT_ACTIVE_OPACITY, ...props })] }));
+                        return (_jsxs(Box, { flex: 1, children: [_jsx(Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && _jsx(Indicator.Component, { ...props }) }), _jsx(MaterialTabItem, { pressOpacity: DEFAULT_ACTIVE_OPACITY, ...props })] }));
                     }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginHorizontal: 0 }, indicatorStyle: {
                         backgroundColor: color("onBackground"),
                         height: 1,
@@ -46,4 +43,3 @@ const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader
                     } }) }));
         }, children: children }));
 };
-exports.TabsContainer = TabsContainer;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsWithHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TabsContainer_1 = require("./TabsContainer");
-const Flex_1 = require("../Flex");
-const Screen_1 = require("../Screen");
-const Text_1 = require("../Text");
-const TabsWithHeader = ({ children, BelowTitleHeaderComponent, headerProps = {}, showLargeHeaderText = true, title, ...rest }) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabsContainer } from "./TabsContainer";
+import { Flex } from "../Flex";
+import { Screen } from "../Screen";
+import { Text } from "../Text";
+export const TabsWithHeader = ({ children, BelowTitleHeaderComponent, headerProps = {}, showLargeHeaderText = true, title, ...rest }) => {
     const showTitle = showLargeHeaderText && !!title;
-    return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: title, ...headerProps }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, { ...rest, renderHeader: () => {
-                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!showTitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && (0, jsx_runtime_1.jsx)(BelowTitleHeaderComponent, {})] }));
+    return (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: title, ...headerProps }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(TabsContainer, { ...rest, renderHeader: () => {
+                        return (_jsxs(_Fragment, { children: [!!showTitle && (_jsx(Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: _jsx(Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && _jsx(BelowTitleHeaderComponent, {})] }));
                     }, children: children }) })] }));
 };
-exports.TabsWithHeader = TabsWithHeader;

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenForTabContentScroll = void 0;
-const react_1 = require("react");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const ScreenScrollContext_1 = require("../../Screen/ScreenScrollContext");
-const useAnimatedHeaderScrolling_1 = require("../../Screen/hooks/useAnimatedHeaderScrolling");
-const useListenForTabContentScroll = () => {
-    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)(), scrollYOffset);
-    (0, react_1.useEffect)(() => {
+import { useEffect } from "react";
+import { useCurrentTabScrollY } from "react-native-collapsible-tab-view";
+import { useScreenScrollContext } from "../../Screen/ScreenScrollContext";
+import { useAnimatedHeaderScrolling } from "../../Screen/hooks/useAnimatedHeaderScrolling";
+export const useListenForTabContentScroll = () => {
+    const { updateCurrentScrollY, scrollYOffset } = useScreenScrollContext();
+    const scrollY = useAnimatedHeaderScrolling(useCurrentTabScrollY(), scrollYOffset);
+    useEffect(() => {
         updateCurrentScrollY(scrollY);
     }, [scrollY, updateCurrentScrollY]);
 };
-exports.useListenForTabContentScroll = useListenForTabContentScroll;

package/dist/elements/Tabs/index.js

@@ -1,17 +1 @@
-"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("./Tabs"), exports);
+export * from "./Tabs";

package/dist/elements/Text/LinkText.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkText = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("./Text");
-const LinkText = ({ style, ...props }) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { ...props, style: [style, { textDecorationLine: "underline" }] }));
-exports.LinkText = LinkText;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "./Text";
+export const LinkText = ({ style, ...props }) => (_jsx(Text, { ...props, style: [style, { textDecorationLine: "underline" }] }));

package/dist/elements/Text/Text.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const styled_system_1 = require("styled-system");
-const helpers_1 = require("./helpers");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps = false, weight = "regular", underline = false, maxWidth = false, selectable = true, style, children, ...restProps }, ref) => {
-    const { theme } = (0, useTheme_1.useTheme)();
-    const fontFamily = (0, helpers_1.useFontFamilyFor)({ italic, weight });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Text as RNText } from "react-native";
+import styled from "styled-components/native";
+import { color, space, typography, } from "styled-system";
+import { useFontFamilyFor } from "./helpers";
+import { useTheme } from "../../utils/hooks/useTheme";
+export const Text = forwardRef(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps = false, weight = "regular", underline = false, maxWidth = false, selectable = true, style, children, ...restProps }, ref) => {
+    const { theme } = useTheme();
+    const fontFamily = useFontFamilyFor({ italic, weight });
     const nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
-    return ((0, jsx_runtime_1.jsx)(InnerStyledText, { ref: ref, selectable: selectable, style: [
+    return (_jsx(InnerStyledText, { ref: ref, selectable: selectable, style: [
             ...nativeTextStyle,
             { textAlignVertical: "center" },
             { textDecorationLine: !!underline ? "underline" : "none" },
@@ -30,8 +24,8 @@ const fixTextTreatmentForStyledComponent = (treatment) => {
     }
     return treatmentWithUnits;
 };
-const InnerStyledText = (0, native_1.default)(react_native_1.Text) `
-  ${styled_system_1.color}
-  ${styled_system_1.space}
-  ${styled_system_1.typography}
+const InnerStyledText = styled(RNText) `
+  ${color}
+  ${space}
+  ${typography}
 `;

package/dist/elements/Text/Text.stories.js

@@ -1,37 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontCenteringPalette = exports.FontCenteringRaw = exports.Misc = exports.BasicProps = exports.VariantsInBoxes = exports.Variants = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const helpers_1 = require("../../storybook/helpers");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Platform, Text as RNText, View } from "react-native";
+import { DataList, List } from "../../storybook/helpers";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { LinkText, Text } from "../Text";
 const TextMeta = {
     title: "Theme/Text",
-    component: Text_1.Text,
+    component: Text,
 };
-exports.default = TextMeta;
+export default TextMeta;
 const variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
-const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => (0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) }));
-exports.Variants = Variants;
-const VariantsInBoxes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black", width: 100, children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) }));
-exports.VariantsInBoxes = VariantsInBoxes;
-const BasicProps = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "regular ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { children: "LinkText." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { caps: true, children: "caps ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { italic: true, children: "italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] }));
-exports.BasicProps = BasicProps;
-const Misc = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { borderWidth: 1, borderColor: "black" }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] }));
-exports.Misc = Misc;
+export const Variants = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => _jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] }) }));
+export const VariantsInBoxes = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Box, { borderWidth: 1, borderColor: "black", width: 100, children: _jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) }));
+export const BasicProps = () => (_jsxs(List, { children: [_jsx(Text, { children: "regular ~~ This is a text." }), _jsx(LinkText, { children: "LinkText." }), _jsx(Text, { caps: true, children: "caps ~~ This is a text." }), _jsx(Text, { italic: true, children: "italics ~~ This is a text." }), _jsx(Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), _jsx(Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), _jsx(Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] }));
+export const Misc = () => (_jsxs(List, { children: [_jsx(View, { style: { borderWidth: 1, borderColor: "black" }, children: _jsx(Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), _jsx(View, {}), _jsx(Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] }));
 // this is useful for making sure our custom fonts are rendering at the same height for ios and android
-const FontCenteringRaw = () => {
+export const FontCenteringRaw = () => {
     const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
-    const systemFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
-    const unicaFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Unica custom font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
+    const systemFontStyle = Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
+    const unicaFontStyle = Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
+    return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "System font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, systemFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), _jsx(Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), _jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "Unica custom font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
 };
-exports.FontCenteringRaw = FontCenteringRaw;
 // this is useful for making sure our custom fonts are rendering at the same height for ios and android
-const FontCenteringPalette = () => {
+export const FontCenteringPalette = () => {
     const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { style: style, children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { style: style, children: "ALL CAPS text." })] })] }));
+    return (_jsxs(Flex, { flex: 1, children: [_jsx(Text, { children: "System font" }), _jsxs(List, { children: [_jsx(Text, { style: style, children: "regular TEXT." }), _jsx(Text, { style: style, children: "ALL CAPS text." })] })] }));
 };
-exports.FontCenteringPalette = FontCenteringPalette;

package/dist/elements/Text/Text.tests.js

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const text_1 = require("../../utils/text");
+import { endash, range } from "../../utils/text";
 describe("Text", () => {
     it("uses endash in ranges", () => {
-        const usingHelper = (0, text_1.range)("10", "20");
-        const usingEndash = `10 ${text_1.endash} 20`;
+        const usingHelper = range("10", "20");
+        const usingEndash = `10 ${endash} 20`;
         expect(usingHelper).toEqual(usingEndash);
         expect(usingHelper).toEqual("10 – 20"); // endash
         expect(usingHelper).not.toEqual("10 - 20"); // minus