@multiplatform.one/components 0.7.0 → 0.7.1

package/dist/jsx/table/TableCell/{index.mjs → index.native.js}

@@ -15,7 +15,7 @@ const TableCell = styled(Paragraph, {
   p: "$2",
   px: "$3",
   size: "$5",
-  ellipse: true,
+  ellipse: !0,
   variants: {
     head: {
       true: {
@@ -32,4 +32,4 @@ const TableCell = styled(Paragraph, {
 export {
   TableCell
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/jsx/table/TableCol/{index.mjs → index.native.js}

@@ -12,4 +12,4 @@ const TableCol = styled(ThemeableStack, {
 export {
   TableCol
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/jsx/table/{TableContext.mjs → TableContext.native.js}

@@ -3,4 +3,4 @@ const TableContext = createStyledContext({});
 export {
   TableContext
 };
-//# sourceMappingURL=TableContext.mjs.map
+//# sourceMappingURL=TableContext.js.map

package/dist/jsx/table/{index.mjs → index.native.js}

@@ -1,4 +1,4 @@
 export * from "./Table";
 export * from "./TableCell";
 export * from "./TableCol";
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/jsx/utils/setTinted.js

@@ -1,12 +1,9 @@
-let isTinted = true;
+let isTinted = !0;
 const setTinted = (next) => {
-  isTinted = next;
-  listeners.forEach((cb) => cb(next));
-};
-const toggleTinted = () => {
+  isTinted = next, listeners.forEach((cb) => cb(next));
+}, toggleTinted = () => {
   setTinted(!isTinted);
-};
-const listeners = /* @__PURE__ */ new Set();
+}, listeners = /* @__PURE__ */ new Set();
 export {
   isTinted,
   listeners,

package/dist/jsx/utils/setTinted.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/setTinted.ts"],
-  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW;AACX,YAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC;AAEO,MAAM,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB;AAEO,MAAM,YAAY,oBAAI,IAAc;",
+  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW,MACX,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,GAEa,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB,GAEa,YAAY,oBAAI,IAAc;",
   "names": []
 }

package/dist/jsx/utils/setTinted.native.js

@@ -0,0 +1,13 @@
+let isTinted = !0;
+const setTinted = (next) => {
+  isTinted = next, listeners.forEach((cb) => cb(next));
+}, toggleTinted = () => {
+  setTinted(!isTinted);
+}, listeners = /* @__PURE__ */ new Set();
+export {
+  isTinted,
+  listeners,
+  setTinted,
+  toggleTinted
+};
+//# sourceMappingURL=setTinted.js.map

package/dist/jsx/utils/{setTinted.mjs.map → setTinted.native.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/setTinted.ts"],
-  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW;AACX,YAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC;AAEO,MAAM,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB;AAEO,MAAM,YAAY,oBAAI,IAAc;",
+  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW,MACX,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,GAEa,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB,GAEa,YAAY,oBAAI,IAAc;",
   "names": []
 }

package/dist/jsx/utils/unwrapText.js

@@ -1,8 +1,6 @@
 import React from "react";
 function unwrapText(children) {
-  return React.Children.toArray(children).map((x) => {
-    return x?.props?.children ? x.props.children : x;
-  });
+  return React.Children.toArray(children).map((x) => x?.props?.children ? x.props.children : x);
 }
 export {
   unwrapText

package/dist/jsx/utils/unwrapText.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/unwrapText.ts"],
-  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAEjD,WAAO,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
+  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAEpC,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW,CAChD;AACH;",
   "names": []
 }

package/dist/jsx/utils/{unwrapText.mjs → unwrapText.native.js}

@@ -1,10 +1,11 @@
 import React from "react";
 function unwrapText(children) {
   return React.Children.toArray(children).map((x) => {
-    return x?.props?.children ? x.props.children : x;
+    var _a;
+    return (_a = x == null ? void 0 : x.props) != null && _a.children ? x.props.children : x;
   });
 }
 export {
   unwrapText
 };
-//# sourceMappingURL=unwrapText.mjs.map
+//# sourceMappingURL=unwrapText.js.map

package/dist/jsx/utils/{unwrapText.mjs.map → unwrapText.native.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/unwrapText.ts"],
-  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAEjD,WAAO,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
+  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAHrD;AAKI,YAAO,4BAAG,UAAH,WAAU,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "sideEffects": [
     "*.css"
   ],
@@ -40,29 +40,29 @@
   "dependencies": {
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@tamagui/font-inter": "^1.35.8",
-    "@tamagui/logo": "^1.35.8",
-    "@tamagui/react-native-media-driver": "^1.35.8",
-    "@tamagui/shorthands": "^1.35.8",
-    "@tamagui/themes": "^1.35.8",
+    "@tamagui/font-inter": "^1.68.1",
+    "@tamagui/logo": "^1.68.1",
+    "@tamagui/react-native-media-driver": "^1.68.1",
+    "@tamagui/shorthands": "^1.68.1",
+    "@tamagui/themes": "^1.68.1",
     "burnt": "^0.11.7",
-    "expo-asset": "^8.10.0",
-    "expo-image": "^1.3.0",
-    "fast-xml-parser": "^4.2.5",
+    "expo-asset": "^8.11.0",
+    "expo-image": "^1.4.1",
+    "fast-xml-parser": "^4.2.7",
     "gray-matter": "^4.0.3",
-    "hast-util-to-html": "^8.0.4",
+    "hast-util-to-html": "8.0.4",
     "immer": "^10.0.2",
     "parse-numeric-range": "^1.3.0",
-    "react-hook-form": "^7.45.0",
-    "react-native-svg": "13.9.0",
+    "react-hook-form": "^7.45.4",
+    "react-native-svg": "13.11.0",
     "refractor": "^4.8.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-parse": "^8.0.4",
     "rehype-slug": "^5.1.0",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^3.0.0",
-    "tamagui": "^1.35.8",
-    "unist-util-visit": "^4.1.2"
+    "tamagui": "^1.68.1",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
     "moti": "^0.25.3",
@@ -70,10 +70,10 @@
     "solito": "^3.2.6"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.35.8",
-    "moti": "^0.25.3",
-    "react-native-reanimated": "2.14.4",
-    "solito": "^3.2.9",
+    "@tamagui/build": "^1.68.1",
+    "moti": "^0.26.0",
+    "react-native-reanimated": "3.4.2",
+    "solito": "^4.0.1",
     "ui": "workspace:^"
   },
   "jest": {
@@ -82,7 +82,7 @@
     "testPathIgnorePatterns": []
   },
   "jestSonar": {
-    "reportPath": ".mkpm/.tmp/reports",
+    "reportPath": "node_modules",
     "reportFile": "test-report.xml",
     "indent": 4
   }

package/src/code/Code/index.ts

@@ -6,9 +6,11 @@ export const Code = styled(Paragraph, {
   name: 'Code',
   borderRadius: '$4',
   cursor: 'inherit',
+  // @ts-ignore
   fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
   lineHeight: 18,
   padding: '$1',
+  // @ts-ignore
   size: '$3',
   tag: 'code',
   whiteSpace: 'pre',
@@ -28,7 +30,9 @@ export const CodeInline = styled(Paragraph, {
   borderRadius: '$3',
   color: '$colorHover',
   cursor: 'inherit',
+  // @ts-ignore
   fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
+  // @ts-ignore
   fontSize: '85%',
   padding: '$1.5',
   tag: 'code',

package/src/component/SimpleInput/SimpleInput.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SimpleInput } from '.';
+import { YStack } from 'tamagui';
+import { Key, Eye } from '@tamagui/lucide-icons';
+
+export default {
+  title: 'components/SimpleInput',
+  component: SimpleInput,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const password = () => (
+  <YStack justifyContent="center" alignItems="center">
+    <SimpleInput password size="$3" iconAfter={Key} passwordWithoutIcon />
+  </YStack>
+);
+
+export const iconBefore = () => <SimpleInput password width={800} height={50} iconBefore={Key} />;
+
+export const iconAfter = () => (
+  <SimpleInput width={250} height={50} iconAfter={Eye} placeholder="icon after input box" />
+);
+
+export const circular = () => <SimpleInput placeholder="icon after input box" circular password />;
+
+export const passwordWithoutIcon = () => <SimpleInput password passwordWithoutIcon />;

package/src/component/SimpleInput/index.tsx

@@ -0,0 +1,168 @@
+import type { ButtonProps, ColorTokens, InputProps, SizeTokens, ThemeTokens, XStackProps } from 'tamagui';
+import { Button, Input, XGroup, XStack } from 'tamagui';
+import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import React, { useEffect } from 'react';
+import type { SvgProps } from 'react-native-svg';
+
+export interface BaseIconProps {
+  size?: number | SizeTokens;
+  strokeWidth?: number | SizeTokens;
+  color?: (ColorTokens | ThemeTokens | (string & {})) | null;
+  disableTheme?: boolean;
+  style?: any;
+}
+
+interface CustomProps {
+  password?: boolean;
+  iconBefore?: React.NamedExoticComponent<IconProps>;
+  iconAfter?: React.NamedExoticComponent<IconProps>;
+  iconStyle?: ButtonProps;
+  circular?: boolean;
+  iconBeforeScale?: number;
+  iconAfterScale?: number;
+  iconPasswordScale?: number;
+  iconsAsButton?: boolean;
+  iconBeforeAsButton?: boolean;
+  iconAfterAsButton?: boolean;
+  passwordWithoutIcon?: boolean;
+}
+
+type IconProps = SvgProps & BaseIconProps;
+
+export type SimpleInputProps = InputProps & CustomProps & XStackProps;
+
+export function SimpleInput({
+  value,
+  size,
+  password,
+  iconBefore,
+  iconAfter,
+  height,
+  width,
+  iconStyle,
+  circular,
+  placeholder,
+  iconAfterScale,
+  iconBeforeScale,
+  iconPasswordScale,
+  iconAfterAsButton,
+  iconBeforeAsButton,
+  iconsAsButton,
+  passwordWithoutIcon,
+  paddingHorizontal,
+  onChangeText,
+  ...props
+}: SimpleInputProps) {
+  const [show, setShow] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState<string | undefined>(value ?? '');
+  const [borderWidth, setBorderWidth] = React.useState(1);
+  const [secureTextEntry, setSecureTextEntry] = React.useState(password);
+  const totalIcons = (iconBefore ? 1 : 0) + (iconAfter || (password && !passwordWithoutIcon) ? 1 : 0);
+  const inputValuePadding = iconBefore ? 0 : 24;
+  const iconPercentage = totalIcons === 1 ? '20%' : totalIcons === 2 ? '10%' : undefined;
+  const inputPercentage = iconPercentage ? '80%' : '100%';
+
+  useEffect(() => {
+    if (!inputValue) return;
+    if (onChangeText) onChangeText(inputValue);
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (!password) return;
+    if (show) {
+      setSecureTextEntry(!!false);
+      return;
+    }
+    if (!show && password) {
+      setSecureTextEntry(!!true);
+      return;
+    }
+  }, [password, show]);
+
+  function handleValueChange(text: string) {
+    setInputValue(text);
+    if (onChangeText) onChangeText(text);
+  }
+
+  return (
+    <XStack>
+      <XGroup
+        {...props}
+        height={size}
+        // @ts-ignore
+        borderRadius={circular ? 9999999 : props.borderRadius || size}
+        borderWidth={borderWidth}
+        borderColor="$backgroundFocus"
+        minHeight={height || '$5'}
+        width={width || '$20'}
+      >
+        {iconBefore && (
+          <Button
+            icon={iconBefore}
+            unstyled={!(iconsAsButton || iconBeforeAsButton)}
+            {...iconStyle}
+            jc="center"
+            ai="center"
+            scaleIcon={iconBeforeScale}
+            width={iconPercentage}
+            height="100%"
+            padding={0}
+          />
+        )}
+        <Input
+          onChangeText={handleValueChange}
+          value={inputValue}
+          {...props}
+          size={size}
+          onFocus={(e) => {
+            setBorderWidth(2);
+            props.onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setBorderWidth(1);
+            props.onBlur?.(e);
+          }}
+          height="100%"
+          placeholder={placeholder}
+          width={inputPercentage}
+          paddingLeft={inputValuePadding}
+          paddingRight={inputValuePadding}
+          unstyled
+          borderWidth={0}
+          paddingHorizontal={paddingHorizontal}
+          secureTextEntry={secureTextEntry}
+        />
+        {!!password && !passwordWithoutIcon && (
+          <Button
+            icon={show ? Eye : EyeOff}
+            scaleIcon={iconPasswordScale}
+            height="100%"
+            {...iconStyle}
+            width={iconPercentage}
+            onPress={(e) => {
+              setShow((prev) => !prev);
+              setBorderWidth(2);
+              props.onPress?.(e);
+            }}
+            jc="center"
+            ai="center"
+            padding={0}
+          />
+        )}
+        {!!iconAfter && (!password || passwordWithoutIcon) && (
+          <Button
+            icon={iconAfter}
+            {...iconStyle}
+            jc="center"
+            ai="center"
+            scaleIcon={iconBeforeScale}
+            width={iconPercentage}
+            unstyled={!(iconsAsButton || iconAfterAsButton)}
+            height="100%"
+            padding={0}
+          />
+        )}
+      </XGroup>
+    </XStack>
+  );
+}

package/src/forms/FormProgress/index.tsx

@@ -29,7 +29,6 @@ export function FormProgress({
   const id = useId();
   const propSize = typeof size === 'number' ? (`$${size}` as SizeTokens) : (size as SizeTokens);
   if (!formContext) {
-    console.log('FormProgress', progressProps);
     return (
       <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
         <Progress

package/src/forms/FormSwitch/index.tsx

@@ -1,15 +1,18 @@
 import React, { useId } from 'react';
-import type { SwitchProps, SwitchThumbProps } from 'tamagui';
-import { Switch } from 'tamagui';
+import type { ComponentProps } from 'react';
 import type { FormControllerProps } from '../types';
 import type { FormFieldProps } from '../FormField';
+import type { SwitchProps } from 'tamagui';
 import { Controller, useFormContext } from 'react-hook-form';
 import { FormField } from '../FormField';
+import { Switch } from 'tamagui';
 
 export type FormSwitchProps = SwitchProps &
   FormControllerProps & {
     fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
-  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'> & { ThumbStyle?: SwitchThumbProps };
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'> & {
+    thumbStyle?: ComponentProps<typeof Switch.Thumb>;
+  };
 
 export function FormSwitch({
   control,
@@ -21,7 +24,7 @@ export function FormSwitch({
   name,
   required,
   rules,
-  ThumbStyle,
+  thumbStyle,
   ...switchProps
 }: FormSwitchProps) {
   const formContext = useFormContext();
@@ -30,7 +33,7 @@ export function FormSwitch({
     return (
       <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
         <Switch {...switchProps}>
-          <Switch.Thumb {...ThumbStyle} />
+          <Switch.Thumb {...(thumbStyle as any)} />
         </Switch>
       </FormField>
     );
@@ -63,7 +66,7 @@ export function FormSwitch({
               if (switchProps.onPress) switchProps.onPress(e);
             }}
           >
-            <Switch.Thumb {...ThumbStyle} />
+            <Switch.Thumb {...(thumbStyle as any)} />
           </Switch>
         </FormField>
       )}

package/src/forms/SelectSimple/index.tsx

@@ -8,19 +8,20 @@ const StyledSelectTrigger = styled(Select.Trigger, {
 });
 
 export type SelectSimpleProps = SelectTriggerProps &
-  Pick<SelectProps, 'onOpenChange' | 'onValueChange' | 'id' | 'value'> & { placeholder?: ReactNode };
+  Pick<SelectProps, 'onOpenChange' | 'onValueChange' | 'id' | 'value' | 'defaultValue'> & { placeholder?: ReactNode };
 
 export function SelectSimple({
   children,
   placeholder,
   onOpenChange,
   onValueChange,
+  defaultValue,
   value,
   id,
   ...triggerProps
 }: SelectSimpleProps) {
   return (
-    <Select id={id} onOpenChange={onOpenChange} onValueChange={onValueChange} value={value}>
+    <Select id={id} onOpenChange={onOpenChange} onValueChange={onValueChange} value={value} defaultValue={defaultValue}>
       <StyledSelectTrigger {...triggerProps}>
         <Select.Value placeholder={placeholder} />
       </StyledSelectTrigger>

package/src/hooks/useAssets/index.native.ts

@@ -1,5 +1,5 @@
 import type { Asset } from 'expo-asset';
-import type { StaticImageData } from 'next/dist/client/image';
+import type { StaticImageData } from 'next/image';
 import { useAssets as expoUseAssets } from 'expo-asset';
 
 const logger = console;

package/src/hooks/useAssets/index.ts

@@ -1,4 +1,4 @@
-import type { StaticImageData } from 'next/dist/client/image';
+import type { StaticImageData } from 'next/image';
 
 export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
   const modulesArr: (StaticImageData | undefined)[] = (Array.isArray(modules) ? modules : [modules]).map(

package/src/images/SimpleImage/index.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps, Ref } from 'react';
 import type { Image } from 'expo-image';
 import type { SolitoImageProps } from 'solito/build/image/image.types';
 import type { StackProps } from 'tamagui';
-import type { StaticImageData } from 'next/dist/client/image';
+import type { StaticImageData } from 'next/image';
 import { SolitoImage } from 'solito/image';
 import { Stack, createComponent } from 'tamagui';
 import { StyleSheet } from 'react-native';
@@ -132,13 +132,10 @@ const SimpleImageComponent = forwardRef<Image, Props>(
   },
 );
 
-export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>(
-  {
-    Component: SimpleImageComponent as any,
-    acceptsClassName: true,
-  },
-  SimpleImageComponent,
-);
+export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>({
+  Component: SimpleImageComponent as any,
+  acceptsClassName: true,
+});
 
 export interface StaticRequire {
   default: StaticImageData;

package/src/mdx/components.tsx

@@ -51,6 +51,7 @@ export const mdxComponents: Components = {
   a: ({ href = '', children, ...props }) => {
     return (
       <Link href={href}>
+        {/* @ts-ignore */}
         <Paragraph fontSize="inherit" display="inline" cursor="pointer" {...sanitizeProps(props)}>
           {children}
           {/* {typeof href === 'string' && href.startsWith('http') ? (
@@ -67,6 +68,7 @@ export const mdxComponents: Components = {
   },
   hr: (props) => <HR {...sanitizeProps(props)} />,
   ul: ({ children }) => (
+    // @ts-ignore
     <UL marginVertical="$4">{React.Children.toArray(children).map((x) => (typeof x === 'string' ? null : x))}</UL>
   ),
   ol: (props) => <YStack {...sanitizeProps(props)} marginBottom="$3" />,
@@ -75,6 +77,7 @@ export const mdxComponents: Components = {
       {props.children}
     </LI>
   ),
+  // @ts-ignore
   strong: (props) => <Paragraph fontSize="inherit" {...sanitizeProps(props)} fontWeight="700" />,
   img: ({ ...props }) => (
     <YStack marginVertical="$6">
@@ -98,6 +101,7 @@ export const mdxComponents: Components = {
         fontFamily="$silkscreen"
         fontWeight="300"
         lineHeight="$9"
+        // @ts-ignore
         letterSpacing="$0"
         opacity={0.65}
         size="$8"

package/src/organize/SimpleAccordion/SimpleAccordion.stories.tsx

@@ -0,0 +1,14 @@
+import { SimpleAccordion } from '.';
+import React from 'react';
+
+export default {
+  title: 'organize/SimpleAccordion',
+  component: SimpleAccordion,
+  parameters: {
+    status: {
+      type: 'beta',
+    },
+  },
+};
+
+export const simpleAccordion = (args) => <SimpleAccordion {...args} />;

package/src/organize/SimpleAccordion/index.tsx

@@ -0,0 +1,6 @@
+import { Text } from 'tamagui';
+import React from 'react';
+
+export function SimpleAccordion() {
+  return <Text>SimpleAccordion</Text>;
+}