@tamagui/demos 2.0.0-rc.8 → 2.0.0

package/src/ToastDemo.tsx

@@ -1,121 +1,236 @@
-import { Toast, useToastController, useToastState } from '@tamagui/toast'
-import React from 'react'
-import { Button, Label, Switch, XStack, YStack } from 'tamagui'
+import { isWeb } from 'tamagui'
+import {
+  Toast,
+  toast,
+  useToastItem,
+  type ToastPosition,
+  type ToastT,
+} from '@tamagui/toast/v2'
+import {
+  ArrowDown,
+  ArrowDownLeft,
+  ArrowDownRight,
+  ArrowUp,
+  ArrowUpLeft,
+  ArrowUpRight,
+} from '@tamagui/lucide-icons-2'
+import { useRef, useState } from 'react'
+import { Button, Label, SizableText, Slider, XStack, YStack } from 'tamagui'
 
-/**
- *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
- *    - <ToastProvider> at the root
- *    - <ToastViewport /> where you want to show the toasts
- */
 export const ToastDemo = () => {
-  const [native, setNative] = React.useState(false)
+  const [position, setPosition] = useState<ToastPosition>('bottom-right')
+  const [gap, setGap] = useState(14)
+  const [visibleToasts, setVisibleToasts] = useState(4)
+  const [duration, setDuration] = useState(4000)
+  const count = useRef(0)
+
+  const showToast = (newPosition: ToastPosition) => {
+    setPosition(newPosition)
+    count.current++
+    toast(`Toast #${count.current}`, {
+      description: 'Swipe to dismiss or wait for auto-close.',
+    })
+  }
 
   return (
-    <YStack gap="$4" items="center">
-      <ToastControl native={native} />
-      <CurrentToast />
+    <Toast
+      position={position}
+      gap={Math.round(gap)}
+      visibleToasts={visibleToasts}
+      duration={duration}
+    >
+      <Toast.Viewport offset={16}>
+        <Toast.List
+          renderItem={({ toast: t, index }) => (
+            <Toast.Item key={t.id} toast={t} index={index} testID="toast-item">
+              <ToastContent toast={t} />
+            </Toast.Item>
+          )}
+        />
+      </Toast.Viewport>
+
+      <YStack gap="$3" self="center" width={280}>
+        {/* Position buttons */}
+        <YStack gap="$2" self="center">
+          <XStack gap="$2">
+            <PositionButton
+              position="top-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpLeft}
+            />
+            <PositionButton
+              position="top-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUp}
+            />
+            <PositionButton
+              position="top-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpRight}
+              testID="toast-top-right-button"
+            />
+          </XStack>
+          <XStack gap="$2">
+            <PositionButton
+              position="bottom-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownLeft}
+            />
+            <PositionButton
+              position="bottom-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDown}
+            />
+            <PositionButton
+              position="bottom-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownRight}
+              testID="toast-show-button"
+            />
+          </XStack>
+        </YStack>
 
-      <NativeOptions native={native} setNative={setNative} />
-    </YStack>
+        {/* Controls */}
+        <YStack gap="$1" paddingTop="$1">
+          <DemoSlider
+            label="Gap"
+            value={gap}
+            min={0}
+            max={30}
+            step={0.1}
+            onChange={setGap}
+          />
+          <DemoSlider
+            label="Visible"
+            value={visibleToasts}
+            min={1}
+            max={8}
+            step={1}
+            onChange={setVisibleToasts}
+          />
+          <DemoSlider
+            label="Duration"
+            value={duration}
+            min={1000}
+            max={10000}
+            step={100}
+            onChange={setDuration}
+            format={(v) => `${(v / 1000).toFixed(1)}s`}
+          />
+        </YStack>
+      </YStack>
+    </Toast>
   )
 }
 
-const CurrentToast = () => {
-  const currentToast = useToastState()
+function ToastContent({ toast: t }: { toast: ToastT }) {
+  const { handleClose } = useToastItem()
 
-  if (!currentToast || currentToast.isHandledNatively) return null
+  const title = typeof t.title === 'function' ? t.title() : t.title
+  const description =
+    typeof t.description === 'function' ? t.description() : t.description
 
   return (
-    <Toast
-      key={currentToast.id}
-      duration={currentToast.duration}
-      viewportName={currentToast.viewportName}
-      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
-      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
-      opacity={1}
-      scale={1}
-      y={-50}
-      transition="quicker"
-      bg="$color2"
-      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
-    >
-      <XStack gap="$5" items="center" justify="space-between">
-        <YStack gap="$0.5" flex={1}>
-          <Toast.Title>{currentToast.title}</Toast.Title>
-          {!!currentToast.message && (
-            <Toast.Description>{currentToast.message}</Toast.Description>
+    <>
+      <XStack gap="$3" alignItems="flex-start">
+        <Toast.Icon />
+        <YStack flex={1} gap="$0.5">
+          {title && (
+            <Toast.Title fontWeight="600" size="$3">
+              {title}
+            </Toast.Title>
+          )}
+          {description && (
+            <Toast.Description color="$color9" size="$2">
+              {description}
+            </Toast.Description>
           )}
         </YStack>
-        <Toast.Action asChild altText="Dismiss toast">
-          <Button size="$2">Dismiss</Button>
-        </Toast.Action>
       </XStack>
-    </Toast>
+
+      {isWeb && (
+        <Toast.Close
+          testID="toast-close-button"
+          position="absolute"
+          top={-6}
+          left={-6}
+          zIndex={1}
+        />
+      )}
+    </>
   )
 }
 
-const ToastControl = ({ native }: { native: boolean }) => {
-  const toast = useToastController()
-
+function DemoSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  format,
+}: {
+  label: string
+  value: number
+  min: number
+  max: number
+  step?: number
+  onChange: (v: number) => void
+  format?: (v: number) => string
+}) {
   return (
-    <XStack gap="$2" justify="center">
-      <Button
-        onPress={() => {
-          toast.show('Successfully saved!', {
-            message: "Don't worry, we've got your data.",
-            native,
-            demo: true,
-          })
-        }}
-      >
-        Show
-      </Button>
-      <Button
-        onPress={() => {
-          toast.hide()
-        }}
+    <XStack gap="$2" alignItems="center">
+      <Label size="$2" width={55}>
+        {label}
+      </Label>
+      <Slider
+        flex={1}
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]) => onChange(v)}
       >
-        Hide
-      </Button>
+        <Slider.Track>
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb theme="accent" size={16} borderRadius={100} index={0} />
+      </Slider>
+      <SizableText userSelect="none" size="$2" width={35} textAlign="right">
+        {format ? format(value) : Math.round(value)}
+      </SizableText>
     </XStack>
   )
 }
 
-const NativeOptions = ({
-  native,
-  setNative,
+const PositionButton = ({
+  position,
+  current,
+  onPress,
+  Icon,
+  testID,
 }: {
-  native: boolean
-  setNative: (native: boolean) => void
+  position: ToastPosition
+  current: ToastPosition
+  onPress: (p: ToastPosition) => void
+  Icon: any
+  testID?: string
 }) => {
-  return (
-    <XStack gap="$3">
-      <Label size="$1" onPress={() => setNative(false)}>
-        Custom
-      </Label>
-      <Switch
-        theme="surface2"
-        id="native-toggle"
-        size="$1"
-        checked={!!native}
-        onCheckedChange={(val) => setNative(val)}
-      >
-        <Switch.Thumb
-          theme="accent"
-          transition={[
-            'quickest',
-            {
-              transform: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-        />
-      </Switch>
+  const isActive = position === current
 
-      <Label size="$1" onPress={() => setNative(true)}>
-        Native
-      </Label>
-    </XStack>
+  return (
+    <Button
+      icon={Icon}
+      circular
+      theme={isActive ? 'accent' : undefined}
+      onPress={() => onPress(position)}
+      testID={testID}
+    />
   )
 }

package/src/ToastDuplicateDemo.tsx

@@ -1,47 +1,57 @@
-import { CheckCircle2 } from '@tamagui/lucide-icons'
-import { Toast } from '@tamagui/toast'
-import React from 'react'
+import { CheckCircle2 } from '@tamagui/lucide-icons-2'
+import { Toast, toast, useToasts } from '@tamagui/toast/v2'
 import { Button, XStack, YStack } from 'tamagui'
 
 /**
- *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the ToastProvider and ToastViewport as well.
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
  */
 export const ToastDuplicateDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0)
-
   return (
-    <YStack items="center">
-      <Button
-        onPress={() => {
-          setSavedCount((old) => old + 1)
-        }}
-      >
-        Show toast
-      </Button>
-      {[...Array(savedCount)].map((_, index) => (
-        <Toast
-          viewportName="viewport-multiple" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop
-          key={index}
-          duration={4000}
-          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
-          exitStyle={{ opacity: 0, scale: 1, y: -20 }}
-          y={0}
-          opacity={1}
-          scale={1}
-          transition="100ms"
+    <Toast>
+      <Toast.Viewport>
+        <ToastList />
+      </Toast.Viewport>
+
+      <YStack items="center">
+        <Button
+          onPress={() => {
+            toast('Successfully saved!', {
+              description: "Don't worry... We've got your data.",
+            })
+          }}
         >
+          Show toast
+        </Button>
+      </YStack>
+    </Toast>
+  )
+}
+
+const ToastList = () => {
+  const { toasts } = useToasts()
+
+  return (
+    <>
+      {toasts.map((t, index) => (
+        <Toast.Item key={t.id} toast={t} index={index}>
           <XStack gap="$4" items="center">
             <YStack>
               <CheckCircle2 />
             </YStack>
 
             <YStack>
-              <Toast.Title>Successfully saved!</Toast.Title>
-              <Toast.Description>Don't worry... We've got your data.</Toast.Description>
+              <Toast.Title>
+                {typeof t.title === 'function' ? t.title() : t.title}
+              </Toast.Title>
+              {t.description && (
+                <Toast.Description>
+                  {typeof t.description === 'function' ? t.description() : t.description}
+                </Toast.Description>
+              )}
             </YStack>
           </XStack>
-        </Toast>
+        </Toast.Item>
       ))}
-    </YStack>
+    </>
   )
 }

package/src/ToastV1Demo.tsx

@@ -0,0 +1,121 @@
+import { Toast, useToastController, useToastState } from '@tamagui/toast'
+import React from 'react'
+import { Button, Label, Switch, XStack, YStack } from 'tamagui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
+ *    - <ToastProvider> at the root
+ *    - <ToastViewport /> where you want to show the toasts
+ */
+export const ToastV1Demo = () => {
+  const [native, setNative] = React.useState(false)
+
+  return (
+    <YStack gap="$4" items="center">
+      <ToastControl native={native} />
+      <CurrentToast />
+
+      <NativeOptions native={native} setNative={setNative} />
+    </YStack>
+  )
+}
+
+const CurrentToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) return null
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      opacity={1}
+      scale={1}
+      y={-50}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
+    >
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
+    </Toast>
+  )
+}
+
+const ToastControl = ({ native }: { native: boolean }) => {
+  const toast = useToastController()
+
+  return (
+    <XStack gap="$2" justify="center">
+      <Button
+        onPress={() => {
+          toast.show('Successfully saved!', {
+            message: "Don't worry, we've got your data.",
+            native,
+            demo: true,
+          })
+        }}
+      >
+        Show
+      </Button>
+      <Button
+        onPress={() => {
+          toast.hide()
+        }}
+      >
+        Hide
+      </Button>
+    </XStack>
+  )
+}
+
+const NativeOptions = ({
+  native,
+  setNative,
+}: {
+  native: boolean
+  setNative: (native: boolean) => void
+}) => {
+  return (
+    <XStack gap="$3">
+      <Label size="$1" onPress={() => setNative(false)}>
+        Custom
+      </Label>
+      <Switch
+        theme="surface2"
+        id="native-toggle"
+        size="$1"
+        checked={!!native}
+        onCheckedChange={(val) => setNative(val)}
+      >
+        <Switch.Thumb
+          theme="accent"
+          transition={[
+            'quickest',
+            {
+              transform: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        />
+      </Switch>
+
+      <Label size="$1" onPress={() => setNative(true)}>
+        Native
+      </Label>
+    </XStack>
+  )
+}

package/src/ToggleGroupDemo.tsx

@@ -1,4 +1,4 @@
-import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'
+import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons-2'
 import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'tamagui'
 
 export function ToggleGroupDemo() {

package/src/TooltipDemo.tsx

@@ -4,7 +4,7 @@ import {
   ChevronRight,
   ChevronUp,
   Circle,
-} from '@tamagui/lucide-icons'
+} from '@tamagui/lucide-icons-2'
 import type { TooltipProps } from 'tamagui'
 import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from 'tamagui'
 
@@ -48,6 +48,7 @@ function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {
         y={0}
         opacity={1}
         py="$2"
+        px="$3"
         transition={[
           'quick',
           {

package/src/index.tsx

@@ -11,6 +11,7 @@ export * from './AnimationsHoverDemo'
 export * from './AnimationsPresenceDemo'
 export * from './AnimationsTimingDemo'
 export * from './AvatarDemo'
+export * from './BoxShadowTokenDemo'
 export * from './BuildAButtonDemo'
 export * from './ButtonDemo'
 export * from './ThemeBuilderDemo'
@@ -56,6 +57,7 @@ export * from './TextDemo'
 export * from './ThemeInverseDemo'
 export * from './ToastDemo'
 export * from './ToastDuplicateDemo'
+export * from './ToastV1Demo'
 export * from './ToggleGroupDemo'
 export * from './TokensDemo'
 export * from './TooltipDemo'

package/dist/cjs/AccordionDemo.js

@@ -1,77 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: !0 });
-}, __copyProps = (to, from, except, desc) => {
-  if (from && typeof from == "object" || typeof from == "function")
-    for (let key of __getOwnPropNames(from))
-      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
-var AccordionDemo_exports = {};
-__export(AccordionDemo_exports, {
-  AccordionDemo: () => AccordionDemo
-});
-module.exports = __toCommonJS(AccordionDemo_exports);
-var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
-function AccordionDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion, { overflow: "hidden", width: "$20", type: "multiple", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, { value: "a1", mb: -1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_tamagui.Accordion.Trigger,
-        {
-          flexDirection: "row",
-          justify: "space-between",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "1. Take a cold shower" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { transparent: !0, transition: "quick", rotate: open ? "180deg" : "0deg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: "$1", color: "$color" }) })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.HeightAnimator, { transition: "300ms", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_tamagui.Accordion.Content,
-        {
-          transition: "300ms",
-          exitStyle: { opacity: 0 },
-          borderWidth: 1,
-          borderTopWidth: 0,
-          borderColor: "$borderColor",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, { value: "a2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_tamagui.Accordion.Trigger,
-        {
-          flexDirection: "row",
-          justify: "space-between",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "2. Eat 4 eggs" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { transparent: !0, transition: "quick", rotate: open ? "180deg" : "0deg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: "$1", color: "$color" }) })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.HeightAnimator, { transition: "300ms", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_tamagui.Accordion.Content,
-        {
-          transition: "300ms",
-          exitStyle: { opacity: 0 },
-          borderWidth: 1,
-          borderTopWidth: 0,
-          borderColor: "$borderColor",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there's good reason for their continued presence in our menus and meals." })
-        }
-      ) })
-    ] })
-  ] });
-}
-//# sourceMappingURL=AccordionDemo.js.map

package/dist/cjs/AccordionDemo.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/AccordionDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B,kCAC5B,iBAA6C,oBAcjC;AAZL,SAAS,gBAAgB;AAC9B,SACE,6CAAC,4BAAU,UAAS,UAAS,OAAM,OAAM,MAAK,YAE5C;AAAA,iDAAC,yBAAU,MAAV,EAAe,OAAM,MAAK,IAAI,IAC7B;AAAA;AAAA,QAAC,yBAAU;AAAA,QAAV;AAAA,UACC,eAAc;AAAA,UACd,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,aAAY;AAAA,UAEX,WAAC,EAAE,KAAK,MACP,4EACE;AAAA,wDAAC,4BAAU,mCAAqB;AAAA,YAChC,4CAAC,yBAAO,aAAW,IAAC,YAAW,SAAQ,QAAQ,OAAO,WAAW,QAC/D,sDAAC,mCAAY,MAAK,MAAK,OAAM,UAAS,GACxC;AAAA,aACF;AAAA;AAAA,MAEJ;AAAA,MACA,4CAAC,yBAAU,gBAAV,EAAyB,YAAW,SACnC;AAAA,QAAC,yBAAU;AAAA,QAAV;AAAA,UACC,YAAW;AAAA,UACX,WAAW,EAAE,SAAS,EAAE;AAAA,UACxB,aAAa;AAAA,UACb,gBAAgB;AAAA,UAChB,aAAY;AAAA,UAEZ,sDAAC,4BAAU,wJAGX;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAU,MAAV,EAAe,OAAM,MACpB;AAAA;AAAA,QAAC,yBAAU;AAAA,QAAV;AAAA,UACC,eAAc;AAAA,UACd,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,aAAY;AAAA,UAEX,WAAC,EAAE,KAAK,MACP,4EACE;AAAA,wDAAC,4BAAU,2BAAa;AAAA,YACxB,4CAAC,yBAAO,aAAW,IAAC,YAAW,SAAQ,QAAQ,OAAO,WAAW,QAC/D,sDAAC,mCAAY,MAAK,MAAK,OAAM,UAAS,GACxC;AAAA,aACF;AAAA;AAAA,MAEJ;AAAA,MACA,4CAAC,yBAAU,gBAAV,EAAyB,YAAW,SACnC;AAAA,QAAC,yBAAU;AAAA,QAAV;AAAA,UACC,YAAW;AAAA,UACX,WAAW,EAAE,SAAS,EAAE;AAAA,UACxB,aAAa;AAAA,UACb,gBAAgB;AAAA,UAChB,aAAY;AAAA,UAEZ,sDAAC,4BAAU,gJAGX;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
-  "names": []
-}