panelui-native 0.101.0 → 0.102.0

package/lib/module/components/support/index.js

@@ -0,0 +1,842 @@
+"use strict";
+
+/**
+ * Support — the screen a person arrives on when they need help.
+ *
+ * It is the front of a support section, not the conversation itself. What a
+ * reader needs here is four answers, in this order: is anyone there, how do I
+ * reach them, what is this about, and what happened to the thing I already
+ * asked. Each is a part, because an app that has no help centre should not
+ * have to pass `articles={null}` to say so.
+ *
+ * The transcript is deliberately somewhere else. A support thread is a chat
+ * transcript with a name on it, and this library already has the pieces —
+ * compose `MessageScroller`, `Message` and `AIInput` behind whichever channel
+ * the reader picks, rather than growing a second set of bubbles in here that
+ * would drift away from the first.
+ *
+ * `availability` is the one thing the root decides, and everything downstream
+ * reads it from context: the dot beside the status line, the wording it falls
+ * back to, and whether a channel that needs someone at the other end presents
+ * itself as open.
+ *
+ * ```tsx
+ * <Support availability="online">
+ *   <Support.Header title="Support" />
+ *   <Support.Status replyTime="Typically replies in under an hour" />
+ *   <Support.Channels>
+ *     <Support.Channel icon={<MessageCircleIcon />} label="Message us" />
+ *   </Support.Channels>
+ * </Support>
+ * ```
+ */
+import { createContext, forwardRef, useContext, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+
+/** Whether anyone is at the other end. */
+
+/**
+ * Where a request has got to, in the words the person who made it sees.
+ *
+ * Shorter than the set a support desk runs internally, and deliberately: the
+ * states a helpdesk distinguishes for its own routing are not distinctions the
+ * person waiting can act on, and offering them invites a question about the
+ * difference that nobody wants to answer.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const supportVariants = tv({
+  slots: {
+    root: 'w-full gap-5',
+    header: 'w-full flex-row items-center justify-between gap-3',
+    headerText: 'shrink gap-0.5',
+    status: 'w-full flex-row items-center gap-2 rounded-xl bg-muted px-3 py-2.5',
+    statusDot: 'size-2 rounded-full',
+    group: 'w-full gap-2',
+    groupTitle: 'text-xs font-medium text-muted-foreground',
+    channel: 'w-full flex-row items-center gap-3 rounded-xl border border-border bg-card px-3.5 py-3',
+    channelIcon: 'size-9 items-center justify-center rounded-lg bg-muted',
+    channelText: 'shrink grow gap-0.5',
+    topic: 'w-full flex-row items-center gap-3 rounded-xl border px-3.5 py-3',
+    topicText: 'shrink grow gap-0.5',
+    conversation: 'w-full flex-row items-start gap-3 rounded-xl border border-border bg-card px-3.5 py-3',
+    article: 'w-full flex-row items-center gap-3 rounded-xl bg-muted px-3.5 py-3',
+    badge: 'rounded-full px-2 py-0.5',
+    agent: 'w-full flex-row items-center gap-3',
+    ticket: 'w-full flex-row items-center justify-between gap-2 rounded-lg bg-muted px-3 py-2',
+    note: 'w-full text-center',
+    handoff: 'w-full flex-row items-center gap-2 rounded-xl bg-muted px-3 py-2.5',
+    replies: 'w-full flex-row flex-wrap items-center gap-2',
+    reply: 'rounded-full border border-border bg-card px-3 py-1.5',
+    resolution: 'w-full items-center gap-2 rounded-xl border border-border bg-card px-3.5 py-3.5'
+  },
+  variants: {
+    availability: {
+      online: {
+        statusDot: 'bg-success'
+      },
+      away: {
+        statusDot: 'bg-warning'
+      },
+      offline: {
+        statusDot: 'bg-muted-foreground'
+      }
+    },
+    selected: {
+      true: {
+        topic: 'border-primary bg-primary/10'
+      },
+      false: {
+        topic: 'border-border bg-card'
+      }
+    },
+    disabled: {
+      true: {
+        channel: 'opacity-50',
+        topic: 'opacity-50'
+      }
+    }
+  },
+  defaultVariants: {
+    availability: 'online',
+    selected: false
+  }
+});
+
+/** What a status badge says and how it is coloured, per state. */
+const STATUS_STYLE = {
+  open: {
+    label: 'Open',
+    className: 'bg-info/15',
+    textClassName: 'text-info'
+  },
+  pending: {
+    label: 'Waiting on you',
+    className: 'bg-warning/15',
+    textClassName: 'text-warning'
+  },
+  solved: {
+    label: 'Solved',
+    className: 'bg-success/15',
+    textClassName: 'text-success'
+  },
+  closed: {
+    label: 'Closed',
+    className: 'bg-muted',
+    textClassName: 'text-muted-foreground'
+  }
+};
+const SupportContext = /*#__PURE__*/createContext({
+  availability: 'online'
+});
+
+/** The availability set by the nearest Support. */
+export function useSupport() {
+  return useContext(SupportContext);
+}
+const TopicsContext = /*#__PURE__*/createContext(null);
+const SupportRoot = /*#__PURE__*/forwardRef(function SupportRoot({
+  className,
+  availability = 'online',
+  children,
+  ...props
+}, ref) {
+  const {
+    root
+  } = supportVariants();
+  const context = useMemo(() => ({
+    availability
+  }), [availability]);
+  return /*#__PURE__*/_jsx(SupportContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: root({
+        className
+      }),
+      ...props,
+      children: textChildren(children)
+    })
+  });
+});
+SupportRoot.displayName = 'Support';
+/** The screen's title, and room beside it for whoever is answering. */
+const SupportHeader = /*#__PURE__*/forwardRef(function SupportHeader({
+  className,
+  title,
+  description,
+  children,
+  ...props
+}, ref) {
+  const {
+    header,
+    headerText
+  } = supportVariants();
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: header({
+      className
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: headerText(),
+      children: [title ? /*#__PURE__*/_jsx(Text, {
+        size: "xl",
+        weight: "bold",
+        numberOfLines: 1,
+        children: title
+      }) : null, description ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        numberOfLines: 2,
+        children: description
+      }) : null]
+    }), children ? /*#__PURE__*/_jsx(View, {
+      className: "shrink-0",
+      children: textChildren(children)
+    }) : null]
+  });
+});
+SupportHeader.displayName = 'Support.Header';
+/** Whether anyone is there, and how long an answer takes. */
+const SupportStatus = /*#__PURE__*/forwardRef(function SupportStatus({
+  className,
+  availability: availabilityProp,
+  replyTime,
+  children,
+  ...props
+}, ref) {
+  const {
+    availability: inherited
+  } = useSupport();
+  const availability = availabilityProp ?? inherited;
+  const {
+    status,
+    statusDot
+  } = supportVariants({
+    availability
+  });
+  const fallback = availability === 'online' ? 'Someone is here now' : availability === 'away' ? 'Away at the moment' : 'Nobody is here right now';
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: status({
+      className
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsx(View, {
+      className: statusDot()
+    }), children ? textChildren(children) : /*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      numberOfLines: 2,
+      className: "shrink",
+      children: replyTime ?? fallback
+    })]
+  });
+});
+SupportStatus.displayName = 'Support.Status';
+/** A titled run of rows. Shared by Channels, Conversations and Articles. */
+function group(name) {
+  const Group = /*#__PURE__*/forwardRef(function Group({
+    className,
+    title,
+    children,
+    ...props
+  }, ref) {
+    const {
+      group: groupClass,
+      groupTitle
+    } = supportVariants();
+    return /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      className: groupClass({
+        className
+      }),
+      ...props,
+      children: [title ? /*#__PURE__*/_jsx(Text, {
+        className: groupTitle(),
+        children: title
+      }) : null, textChildren(children)]
+    });
+  });
+  Group.displayName = name;
+  return Group;
+}
+const SupportChannels = group('Support.Channels');
+const SupportConversations = group('Support.Conversations');
+const SupportArticles = group('Support.Articles');
+/**
+ * One way of reaching somebody.
+ *
+ * A row rather than a tile. Each channel is a sentence — what it is, and what
+ * it costs you in waiting — and a grid of icons with one word under each puts
+ * the reader in front of a quiz about which one is right.
+ */
+const SupportChannel = /*#__PURE__*/forwardRef(function SupportChannel({
+  className,
+  icon,
+  label,
+  description,
+  detail,
+  disabled = false,
+  onPress,
+  ...props
+}, ref) {
+  const {
+    channel,
+    channelIcon,
+    channelText
+  } = supportVariants({
+    disabled
+  });
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    ref: ref,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    },
+    accessibilityLabel: detail ? `${label}, ${detail}` : label,
+    accessibilityHint: description,
+    disabled: disabled || !onPress,
+    onPress: onPress,
+    className: channel({
+      className
+    }),
+    ...props,
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      className: channelIcon(),
+      children: icon
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: channelText(),
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        weight: "medium",
+        numberOfLines: 1,
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 2,
+        children: description
+      }) : null]
+    }), detail ? /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      numberOfLines: 1,
+      className: "shrink-0",
+      children: detail
+    }) : null]
+  });
+});
+SupportChannel.displayName = 'Support.Channel';
+/**
+ * What the problem is about, as a list of one-line choices.
+ *
+ * Optional, and meant to stay that way — plenty of support screens are better
+ * without one, and the ones that need it are the ones routing to different
+ * teams. Single-select: a request goes to one queue.
+ */
+const SupportTopics = /*#__PURE__*/forwardRef(function SupportTopics({
+  className,
+  title,
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  children,
+  ...props
+}, ref) {
+  const {
+    group: groupClass,
+    groupTitle
+  } = supportVariants();
+  const [internal, setInternal] = useState(defaultValue);
+  const controlled = valueProp !== undefined;
+  const value = controlled ? valueProp : internal;
+  const context = useMemo(() => ({
+    value: value ?? null,
+    select: next => {
+      if (!controlled) setInternal(next);
+      onValueChange?.(next);
+    }
+  }), [value, controlled, onValueChange]);
+  return /*#__PURE__*/_jsx(TopicsContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      accessibilityRole: "radiogroup",
+      className: groupClass({
+        className
+      }),
+      ...props,
+      children: [title ? /*#__PURE__*/_jsx(Text, {
+        className: groupTitle(),
+        children: title
+      }) : null, textChildren(children)]
+    })
+  });
+});
+SupportTopics.displayName = 'Support.Topics';
+/** One thing the problem could be about. */
+const SupportTopic = /*#__PURE__*/forwardRef(function SupportTopic({
+  className,
+  value,
+  icon,
+  label,
+  description,
+  disabled = false,
+  onPress,
+  ...props
+}, ref) {
+  const group = useContext(TopicsContext);
+  const selected = group?.value === value;
+  const {
+    topic,
+    topicText,
+    channelIcon
+  } = supportVariants({
+    selected,
+    disabled
+  });
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    ref: ref,
+    accessibilityRole: "radio",
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    accessibilityLabel: label,
+    accessibilityHint: description,
+    disabled: disabled,
+    onPress: () => {
+      group?.select(value);
+      onPress?.();
+    },
+    className: topic({
+      className
+    }),
+    ...props,
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      className: channelIcon(),
+      children: icon
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: topicText(),
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        weight: "medium",
+        numberOfLines: 1,
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 2,
+        children: description
+      }) : null]
+    })]
+  });
+});
+SupportTopic.displayName = 'Support.Topic';
+/** One request the reader already made, and what has happened to it. */
+const SupportConversation = /*#__PURE__*/forwardRef(function SupportConversation({
+  className,
+  title,
+  preview,
+  status = 'open',
+  timestamp,
+  unread = false,
+  updated = false,
+  reference,
+  onPress,
+  ...props
+}, ref) {
+  const {
+    conversation,
+    badge
+  } = supportVariants();
+  const tone = STATUS_STYLE[status];
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    ref: ref,
+    accessibilityRole: "button",
+    accessibilityLabel: [title, tone.label, unread ? 'unread' : updated ? 'updated' : null, timestamp].filter(Boolean).join(', '),
+    disabled: !onPress,
+    onPress: onPress,
+    className: conversation({
+      className
+    }),
+    ...props,
+    children: [unread || updated ? /*#__PURE__*/_jsx(View, {
+      className: cn('mt-1.5 size-2 shrink-0 rounded-full', unread ? 'bg-primary' : 'bg-muted-foreground')
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: "shrink grow gap-1",
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-baseline gap-2",
+        children: [/*#__PURE__*/_jsx(Text, {
+          size: "sm",
+          weight: unread ? 'semibold' : 'medium',
+          numberOfLines: 1,
+          className: "shrink grow",
+          children: title
+        }), timestamp ? /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          numberOfLines: 1,
+          className: "shrink-0",
+          children: timestamp
+        }) : null]
+      }), preview ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 2,
+        children: preview
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-2 pt-0.5",
+        children: [/*#__PURE__*/_jsx(View, {
+          className: badge({
+            className: tone.className
+          }),
+          children: /*#__PURE__*/_jsx(Text, {
+            size: "xs",
+            weight: "medium",
+            className: tone.textClassName,
+            children: tone.label
+          })
+        }), reference ? /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          numberOfLines: 1,
+          children: reference
+        }) : null]
+      })]
+    })]
+  });
+});
+SupportConversation.displayName = 'Support.Conversation';
+/** A page from the help centre, for the questions that have a written answer. */
+const SupportArticle = /*#__PURE__*/forwardRef(function SupportArticle({
+  className,
+  icon,
+  title,
+  collection,
+  onPress,
+  ...props
+}, ref) {
+  const {
+    article,
+    channelText
+  } = supportVariants();
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    ref: ref,
+    accessibilityRole: "link",
+    accessibilityLabel: collection ? `${title}, in ${collection}` : title,
+    disabled: !onPress,
+    onPress: onPress,
+    className: article({
+      className
+    }),
+    ...props,
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      className: "shrink-0",
+      children: icon
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: channelText(),
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        numberOfLines: 2,
+        children: title
+      }), collection ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 1,
+        children: collection
+      }) : null]
+    })]
+  });
+});
+SupportArticle.displayName = 'Support.Article';
+
+// `role` here is the person's job, not the accessibility role — the component
+// sets that itself, so the prop it would collide with is taken off.
+
+/**
+ * Who the reader is talking to, above the transcript.
+ *
+ * A support thread is the one conversation where the other end is a stranger,
+ * and "someone from Billing, who is here now" is a different thing to talk to
+ * than an unattributed queue. `typing` replaces the status line rather than
+ * sitting beside it, because the two answer the same question and the live one
+ * wins.
+ */
+const SupportAgent = /*#__PURE__*/forwardRef(function SupportAgent({
+  className,
+  avatar,
+  name,
+  role,
+  availability: availabilityProp,
+  typing = false,
+  ...props
+}, ref) {
+  const {
+    availability: inherited
+  } = useSupport();
+  const availability = availabilityProp ?? inherited;
+  const {
+    agent,
+    statusDot
+  } = supportVariants({
+    availability
+  });
+  const state = availability === 'online' ? 'Online' : availability === 'away' ? 'Away' : 'Offline';
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessibilityRole: "header",
+    accessibilityLabel: `${name}${role ? `, ${role}` : ''}, ${typing ? 'typing' : state}`,
+    className: agent({
+      className
+    }),
+    ...props,
+    children: [avatar ? /*#__PURE__*/_jsx(View, {
+      className: "shrink-0",
+      children: avatar
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: "shrink grow gap-0.5",
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        weight: "semibold",
+        numberOfLines: 1,
+        children: name
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-1.5",
+        children: [typing ? null : /*#__PURE__*/_jsx(View, {
+          className: statusDot()
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          numberOfLines: 1,
+          children: typing ? 'Typing…' : role ? `${role} · ${state}` : state
+        })]
+      })]
+    })]
+  });
+});
+SupportAgent.displayName = 'Support.Agent';
+/** The request this thread belongs to, pinned above it. */
+const SupportTicket = /*#__PURE__*/forwardRef(function SupportTicket({
+  className,
+  reference,
+  subject,
+  status = 'open',
+  ...props
+}, ref) {
+  const {
+    ticket,
+    badge
+  } = supportVariants();
+  const tone = STATUS_STYLE[status];
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessibilityLabel: [subject, reference, tone.label].filter(Boolean).join(', '),
+    className: ticket({
+      className
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: "shrink grow gap-0.5",
+      children: [subject ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        weight: "medium",
+        numberOfLines: 1,
+        children: subject
+      }) : null, reference ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 1,
+        children: reference
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      className: badge({
+        className: tone.className
+      }),
+      children: /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        weight: "medium",
+        className: tone.textClassName,
+        children: tone.label
+      })
+    })]
+  });
+});
+SupportTicket.displayName = 'Support.Ticket';
+/**
+ * The moment the thread changes hands.
+ *
+ * Between two turns rather than inside either, because it is not something
+ * anybody said — an assistant's answer followed by a person's, with nothing
+ * between them, leaves the reader working out who they are talking to from the
+ * writing style.
+ */
+const SupportHandoff = /*#__PURE__*/forwardRef(function SupportHandoff({
+  className,
+  icon,
+  children,
+  ...props
+}, ref) {
+  const {
+    handoff
+  } = supportVariants();
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessibilityRole: "alert",
+    className: handoff({
+      className
+    }),
+    ...props,
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      className: "shrink-0",
+      children: icon
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      className: "shrink",
+      children: children
+    })]
+  });
+});
+SupportHandoff.displayName = 'Support.Handoff';
+/**
+ * One quiet line above the composer — what the wait is, or when they are back.
+ *
+ * It belongs here rather than at the top of the screen because this is where
+ * somebody is deciding whether it is worth typing, and an expectation set four
+ * screens ago is not one they still have in mind.
+ */
+const SupportNote = /*#__PURE__*/forwardRef(function SupportNote({
+  className,
+  children,
+  ...props
+}, ref) {
+  const {
+    note
+  } = supportVariants();
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: "w-full",
+    ...props,
+    children: /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      className: note({
+        className
+      }),
+      children: children
+    })
+  });
+});
+SupportNote.displayName = 'Support.Note';
+/** The suggested answers under a turn. */
+const SupportReplies = /*#__PURE__*/forwardRef(function SupportReplies({
+  className,
+  children,
+  ...props
+}, ref) {
+  const {
+    replies
+  } = supportVariants();
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: replies({
+      className
+    }),
+    ...props,
+    children: textChildren(children)
+  });
+});
+SupportReplies.displayName = 'Support.Replies';
+/**
+ * One suggested answer.
+ *
+ * Worth having as a part rather than leaving to a row of buttons because of
+ * what goes in it: the way out to a person is the reply that has to be on the
+ * screen from the first turn, and a component that makes it easy to put there
+ * is a component that gets it put there.
+ */
+const SupportReply = /*#__PURE__*/forwardRef(function SupportReply({
+  className,
+  value,
+  label,
+  disabled = false,
+  onPress,
+  ...props
+}, ref) {
+  const {
+    reply
+  } = supportVariants();
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    ref: ref,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    },
+    accessibilityLabel: label,
+    disabled: disabled,
+    onPress: () => onPress?.(value ?? label),
+    className: reply({
+      className
+    }),
+    ...props,
+    children: /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      weight: "medium",
+      numberOfLines: 1,
+      children: label
+    })
+  });
+});
+SupportReply.displayName = 'Support.Reply';
+/** Whether it actually helped, asked at the end of a thread. */
+const SupportResolution = /*#__PURE__*/forwardRef(function SupportResolution({
+  className,
+  title = 'Did this solve it?',
+  children,
+  ...props
+}, ref) {
+  const {
+    resolution
+  } = supportVariants();
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: resolution({
+      className
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      weight: "medium",
+      children: title
+    }), children ? /*#__PURE__*/_jsx(View, {
+      className: "w-full items-center",
+      children: textChildren(children)
+    }) : null]
+  });
+});
+SupportResolution.displayName = 'Support.Resolution';
+export const Support = Object.assign(SupportRoot, {
+  Header: SupportHeader,
+  Status: SupportStatus,
+  Channels: SupportChannels,
+  Channel: SupportChannel,
+  Topics: SupportTopics,
+  Topic: SupportTopic,
+  Conversations: SupportConversations,
+  Conversation: SupportConversation,
+  Articles: SupportArticles,
+  Article: SupportArticle,
+  Agent: SupportAgent,
+  Ticket: SupportTicket,
+  Handoff: SupportHandoff,
+  Note: SupportNote,
+  Replies: SupportReplies,
+  Reply: SupportReply,
+  Resolution: SupportResolution
+});
+//# sourceMappingURL=index.js.map