@hubspot/ui-extensions 0.10.1 → 0.11.0

package/dist/__synced__/types/components/toggleInputs.synced.d.ts

@@ -0,0 +1,191 @@
+/// <reference types="react" />
+/**
+ * The props type for {@link !components.Checkbox}.
+ *
+ * @category Component Props
+ */
+export interface CheckboxProps {
+    /**
+     * A string representing the value of the input. This is not displayed on the client-side,
+     * but on the server this is the value given to the data submitted with the checkbox's name.
+     */
+    value?: string;
+    /**
+     * The current status of the input.
+     */
+    checked?: boolean;
+    /** @deprecated use readOnly instead */
+    readonly?: boolean;
+    /**
+     * When set to `true`, the option cannot be selected.
+     */
+    readOnly?: boolean;
+    /**
+     * The string that displays below the toggle.
+     */
+    description?: string;
+    /**
+     * The unique identifier for the checkbox element.
+     */
+    name?: string;
+    /**
+     * The size variation of the checkbox.
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'default' | 'small';
+    /**
+     * A function that is called when the `checked` input status changes.
+     *
+     * @event
+     */
+    onChange?: (checked: boolean, value: string) => void;
+    /** The text that displays in the dropdown menu. */
+    children?: React.ReactNode;
+    /**
+     * Use the inline prop to arrange checkboxes side-by-side.
+     */
+    inline?: boolean;
+    /**
+     * When set to `true`, the option will be selected by default. Use it to
+     * set the default `checked` state when the component is **uncontrolled**.
+     */
+    initialIsChecked?: boolean;
+    /**
+     * Accessibility label. It should be present when the checkbox has no label(children).
+     */
+    'aria-label'?: string;
+}
+/**
+ * The props type for {@link !components.RadioButton}.
+ * @category Component Props
+ * @interface
+ */
+export type RadioButtonProps = Omit<CheckboxProps, 'aria-label'>;
+export type ToggleGroupOption = {
+    /** The text that displays in the dropdown menu. */
+    label: string;
+    /** The unique value that is submitted with the form. */
+    value: string;
+    /** When set to `true`, the option will be selected by default. */
+    initialIsChecked?: boolean;
+    /** When set to `true`, the option cannot be selected. */
+    readonly?: boolean;
+    /** The string that displays below the toggle. */
+    description?: string;
+};
+interface ToggleGroupListBaseProps {
+    name: ToggleGroupProps['name'];
+    options: ToggleGroupProps['options'];
+    variant: ToggleGroupProps['variant'];
+    inline?: boolean;
+}
+export interface CheckboxListProps extends ToggleGroupListBaseProps {
+    value?: CheckboxGroupProps['value'];
+    onChange?: CheckboxGroupProps['onChange'];
+}
+export interface RadioButtonListProps extends ToggleGroupListBaseProps {
+    value?: RadioButtonGroupProps['value'];
+    onChange?: RadioButtonGroupProps['onChange'];
+}
+type ToggleType = 'checkboxList' | 'radioButtonList';
+export interface CommonGroupProps {
+    /**
+     * Denotes the type of list to render.
+     */
+    toggleType?: ToggleType;
+    /**
+     * The unique identifier for the toggle group element.
+     */
+    name: string;
+    /**
+     * The label that displays above the toggle group.
+     */
+    label: string;
+    /**
+     * The text to display if the input has an error.
+     */
+    validationMessage?: string;
+    /**
+     * When set to `true`, displays a required indicator next to the toggle group.
+     *
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * Text that will appear in a tooltip next to the toggle group label.
+     */
+    tooltip?: string;
+    /**
+     * When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render its error state to let the user know there is an error. If left false, `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * An array of options to display in the dropdown menu.
+     *
+     * @defaultValue `[]`
+     */
+    options: Array<ToggleGroupOption>;
+    /**
+     * When set to `true`, stacks the options horizontally.
+     *
+     * @defaultValue `false`
+     */
+    inline?: boolean;
+    /**
+     * The size variation of the individual options.
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'default' | 'small';
+    value?: string[] | string;
+}
+type CheckboxGroupProps = {
+    /**
+     * Denotes the type of list to render.
+     *
+     * @defaultValue `"checkboxList"`
+     */
+    toggleType: 'checkboxList';
+    /**
+     * A function that is called with the new value or values when the list is updated.
+     *
+     * @event
+     */
+    onChange?: (value: string[]) => void;
+    /**
+     * The value of the toggle group.
+     */
+    value?: string[];
+} & CommonGroupProps;
+type RadioButtonGroupProps = {
+    /**
+     * Denotes the type of list to render.
+     *
+     * @defaultValue `"checkboxList"`
+     */
+    toggleType: 'radioButtonList';
+    /**
+     * A function that is called with the new value or values when the list is updated.
+     *
+     * @event
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The value of the toggle group.
+     */
+    value?: string;
+} & CommonGroupProps;
+type DefaultToggleTypeProps = {
+    toggleType?: never;
+} & CheckboxGroupProps;
+/**
+ * The props type for {@link !components.ToggleGroup}.
+ *
+ * @interface
+ * @category Component Props
+ */
+export type ToggleGroupProps = CheckboxGroupProps | RadioButtonGroupProps | DefaultToggleTypeProps;
+export {};

package/dist/__synced__/types/components/toggleInputs.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/tooltip.synced.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface TooltipProps {
+    /**
+     * Sets the content to render on the screen, and serves as the trigger for the tooltip. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+    /**
+     * Sets the position of the tooltip relative to its trigger element.
+     * @default 'top'
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+}

package/dist/__synced__/types/components/tooltip.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/context.synced.d.ts

@@ -0,0 +1,82 @@
+import type { ExtensionPoints } from './extension-points.synced';
+/** @ignore */
+interface Team {
+    id: number;
+    name: string;
+    teammates: number[];
+}
+/** @ignore */
+export type Permission = 'integrations-management-write';
+/** @ignore */
+export interface UserContext {
+    id: number;
+    emails: string[];
+    email: string;
+    firstName: string;
+    lastName: string;
+    /** @deprecated Roles will always be empty. Please use teams instead */
+    roles: string[];
+    teams: Team[];
+    locale?: string;
+    permissions: Permission[];
+}
+/** @ignore */
+export interface PortalContext {
+    id: number;
+    timezone: string;
+}
+/** @ignore */
+export interface CrmRecordContext {
+    objectId: number;
+    objectTypeId: string;
+}
+/** @ignore */
+export interface AppContext {
+    appId: number | string;
+    appName?: string;
+    cardTitle?: string;
+}
+type ProfileVariableValue = string | number | bigint | boolean;
+/** @ignore */
+export interface BaseContext {
+    user: UserContext;
+    portal: PortalContext;
+    variables?: Record<string, ProfileVariableValue>;
+}
+/** @ignore */
+export interface CrmContext extends BaseContext {
+    location: 'crm.record.tab' | 'crm.record.sidebar' | 'crm.preview' | 'helpdesk.sidebar';
+    crm: CrmRecordContext;
+    extension?: AppContext;
+}
+/** @ignore */
+export interface SettingsContext extends BaseContext {
+    location: 'settings';
+}
+/** @ignore */
+export interface AppHomeContext extends BaseContext {
+    location: 'home';
+}
+/** @ignore */
+export interface GenericContext extends BaseContext {
+    location: 'uie.playground.middle';
+}
+/** @ignore */
+export interface BaseExtensionContextData {
+    appId: number | string;
+    appName?: string;
+    cardId: string;
+    cardTitle?: string;
+    location: keyof ExtensionPoints;
+    sourceId?: string | null;
+    appAccessLevel: 'PUBLIC' | 'PRIVATE';
+    additionalProperties?: {
+        [key: string]: string;
+    } | null;
+}
+/** @ignore */
+export interface CrmExtensionContextData extends BaseExtensionContextData {
+    objectId: number | string;
+    objectTypeId: string;
+}
+export {};

package/dist/__synced__/types/context.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/crm.synced.d.ts

@@ -0,0 +1,248 @@
+import { ReactNode } from 'react';
+import { TShirtSizes } from './shared.synced';
+/** @ignore */
+export interface CrmDataHighlightProps {
+    properties: Array<string>;
+    objectTypeId?: string;
+    objectId?: number;
+}
+/** @ignore */
+export interface CrmReportProps {
+    reportId: string;
+    use?: 'associations' | 'subject' | 'unfiltered';
+}
+/** @ignore */
+export interface CrmPropertyListProps {
+    properties: Array<string>;
+    direction?: string;
+    objectTypeId?: string;
+    objectId?: number;
+}
+/** @ignore */
+type CrmSortDescriptor = {
+    columnName: string;
+    direction: 1 | -1;
+};
+/** @ignore */
+interface CrmSearchFilter {
+    operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
+    value?: string | number;
+    values?: string | number;
+    highValue?: string | number;
+    property: string;
+}
+/** @ignore */
+export interface CrmAssociationTableProps {
+    objectTypeId: string;
+    propertyColumns: Array<string>;
+    quickFilterProperties?: Array<string>;
+    searchable?: boolean;
+    pagination?: boolean;
+    associationLabelFilter?: boolean;
+    pageSize?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
+/** @ignore */
+export interface CrmAssociationPivotProps {
+    objectTypeId: string;
+    associationLabels?: Array<string>;
+    maxAssociations?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
+/** @ignore */
+export interface CrmAssociationStageTrackerProps {
+    objectTypeId: string;
+    properties: Array<string>;
+    associationLabels?: Array<string>;
+    filters?: Array<CrmSearchFilter>;
+    showProperties?: boolean;
+    sort?: Array<CrmSortDescriptor>;
+}
+/** @ignore */
+export interface CrmSimpleDeadlineProps {
+    endDatePropertyName: string;
+    properties: Array<string>;
+    progressTheme?: ProgressTheme;
+    showProperties?: boolean;
+    startDatePropertyName: string;
+}
+/** @ignore */
+export interface CrmRelativeTimelineProps {
+    properties: Array<string>;
+}
+/** @ignore */
+interface BaseCrmStatisticItem {
+    label: string;
+}
+/** @ignore */
+interface FilterGroup {
+    filters: Array<CrmSearchFilter>;
+}
+/** @ignore */
+interface ProgressTheme {
+    backgroundColor?: string;
+    completedColor?: string;
+    upcomingColor?: string;
+    borderRadius?: string | number;
+    height?: string | number;
+    completedGradient?: Gradient;
+    upcomingGradient?: Gradient;
+}
+/** @ignore */
+interface PercentileMetricItem extends BaseCrmStatisticItem {
+    statisticType: 'PERCENTILES';
+    propertyName: string;
+    percentile: number;
+    filterGroups?: Array<FilterGroup>;
+}
+/** @ignore */
+type CrmStatisticItem = BasicMetricItem | PercentileMetricItem;
+/** @ignore */
+export interface CrmStatisticsProps {
+    objectTypeId: string;
+    statistics: Array<CrmStatisticItem>;
+}
+/** @ignore */
+interface BasicMetricItem extends BaseCrmStatisticItem {
+    statisticType: 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'DISTINCT_APPROX' | 'COUNT';
+    propertyName: string;
+    filterGroups?: Array<FilterGroup>;
+}
+/** @ignore */
+interface Gradient {
+    startColor: string;
+    endColor: string;
+}
+/** @ignore */
+export interface CrmStageTrackerProps {
+    objectId?: number;
+    objectTypeId?: string;
+    properties: Array<string>;
+    showProperties?: boolean;
+}
+/** @ignore */
+export interface CrmAssociationPropertyListProps {
+    objectTypeId: string;
+    properties: Array<string>;
+    associationLabels?: Array<string>;
+    filters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
+/** @ignore */
+interface ObjectCoordinates {
+    objectTypeId: string;
+    objectId: number;
+}
+/** @ignore */
+interface OpenRecordAssociationFormArgs {
+    objectTypeId: string;
+    association: {
+        objectTypeId: string;
+        objectId: number;
+    };
+}
+/** @ignore */
+interface ActivityCreatorActionArgs {
+    objectTypeId: string;
+    objectId: number;
+    windowVariant?: 'windowed' | 'fullscreen';
+    initialEmailBody?: string;
+    initialEmailSubject?: string;
+}
+/** @ignore */
+interface EngagementAppLinkArgs {
+    objectId: number | string;
+    objectTypeId: string;
+    engagementId: number | string;
+    external?: boolean;
+}
+/** @ignore */
+interface RecordAppLinkArgs {
+    includeEschref?: boolean;
+    objectId: number;
+    objectTypeId: string;
+    external?: boolean;
+}
+/** @ignore */
+interface PageAppLinkArgs {
+    path: string;
+    external?: boolean;
+}
+/** @ignore */
+interface ExternalUrlArgs {
+    href: string;
+}
+/** @ignore */
+interface OpenRecordCreatorFormArgs {
+    objectTypeId: string;
+}
+/** @ignore */
+interface ActionArgs {
+    PREVIEW_OBJECT: ObjectCoordinates;
+    ADD_NOTE: ActivityCreatorActionArgs;
+    ADD_TASK: ActivityCreatorActionArgs;
+    SEND_EMAIL: ActivityCreatorActionArgs;
+    SCHEDULE_MEETING: ActivityCreatorActionArgs;
+    OPEN_RECORD_CREATOR_FORM: OpenRecordCreatorFormArgs;
+    OPEN_RECORD_ASSOCIATION_FORM: OpenRecordAssociationFormArgs;
+    ENGAGEMENT_APP_LINK: EngagementAppLinkArgs;
+    RECORD_APP_LINK: RecordAppLinkArgs;
+    PAGE_APP_LINK: PageAppLinkArgs;
+    EXTERNAL_URL: ExternalUrlArgs;
+    OPEN_WORKFLOW_ENROLLMENT_MODAL: ObjectCoordinates;
+}
+/** @ignore */
+export type ArgsFor<SpecificActionType extends ActionType> = ActionArgs[SpecificActionType];
+export type ActionType = 'PREVIEW_OBJECT' | 'ADD_NOTE' | 'ADD_TASK' | 'SEND_EMAIL' | 'SCHEDULE_MEETING' | 'OPEN_RECORD_CREATOR_FORM' | 'OPEN_RECORD_ASSOCIATION_FORM' | 'ENGAGEMENT_APP_LINK' | 'RECORD_APP_LINK' | 'PAGE_APP_LINK' | 'EXTERNAL_URL' | 'OPEN_WORKFLOW_ENROLLMENT_MODAL';
+/** @ignore */
+interface BaseActionComponent {
+    children: ReactNode;
+    actionType: ActionType;
+    actionContext: ArgsFor<ActionType>;
+    onError?: (errors: string[]) => void;
+}
+/** @ignore */
+export interface CrmActionButtonProps extends BaseActionComponent {
+    variant?: 'primary' | 'secondary' | 'destructive';
+    type?: 'button' | 'reset' | 'submit';
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    onClick?: () => void;
+}
+/** @ignore */
+export interface CrmActionLinkProps extends BaseActionComponent {
+    variant?: 'primary' | 'light' | 'dark' | 'destructive';
+}
+/** @ignore */
+export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
+    type: 'action-library-button';
+    actionType: SpecificActionType;
+    actionContext: ArgsFor<SpecificActionType>;
+    label?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+/** @ignore */
+export type DropdownCardActionConfigOptions = [
+    ActionLibraryButtonCardActionConfig,
+    ...ActionLibraryButtonCardActionConfig[]
+];
+/** @ignore */
+export interface DropdownCardActionConfig {
+    type: 'dropdown';
+    options: DropdownCardActionConfigOptions;
+    label?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+/** @ignore */
+type ErrorHandler = (errors: string[]) => void;
+/** @ignore */
+type CardActionConfig = ActionLibraryButtonCardActionConfig | DropdownCardActionConfig;
+/** @ignore */
+export type CrmCardActionsProps = {
+    actionConfigs: Array<CardActionConfig>;
+    onError?: ErrorHandler;
+};
+export {};

package/dist/__synced__/types/crm.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/extension-points.synced.d.ts

@@ -0,0 +1,122 @@
+import { ComponentType } from 'react';
+import { TypesOfReadOnlyArray } from './shared.synced';
+import type { AppHomeContext, BaseContext, CrmContext } from './context.synced';
+import type { AppHomeActions, CrmHostActions, SettingsActions, UiePlatformActions } from './actions.synced';
+import type { CrmPropertyListProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmReportProps, CrmAssociationPivotProps, CrmAssociationPropertyListProps, CrmAssociationStageTrackerProps, CrmSimpleDeadlineProps, CrmRelativeTimelineProps, CrmStageTrackerProps, CrmStatisticsProps, CrmActionButtonProps, CrmActionLinkProps, CrmCardActionsProps } from './crm.synced';
+import type { SettingsContext, GenericContext } from './context.synced';
+import type { ServerlessFuncRunner } from './http-requests.synced';
+/** @ignore */
+export type ExtensionPointAction = (...args: any[]) => Promise<any> | void;
+/** @ignore */
+export interface ExtensionPointContract {
+    actions?: {
+        [k: string]: ExtensionPointAction;
+    } | {};
+    context: BaseContext;
+    customComponents: Record<string, ComponentType<any>>;
+}
+/** @ignore */
+export interface StandardCrmExtensionPoint extends ExtensionPointContract {
+    actions: CrmHostActions & UiePlatformActions;
+    context: CrmContext;
+    customComponents: {
+        CrmPropertyList: ComponentType<CrmPropertyListProps>;
+        CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
+        CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
+        CrmReport: ComponentType<CrmReportProps>;
+        CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
+        CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
+        CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
+        CrmSimpleDeadline?: ComponentType<CrmSimpleDeadlineProps>;
+        CrmRelativeTimeline?: ComponentType<CrmRelativeTimelineProps>;
+        CrmStageTracker: ComponentType<CrmStageTrackerProps>;
+        CrmStatistics?: ComponentType<CrmStatisticsProps>;
+        CrmActionButton?: ComponentType<CrmActionButtonProps>;
+        CrmActionLink?: ComponentType<CrmActionLinkProps>;
+        CrmCardActions?: ComponentType<CrmCardActionsProps>;
+    };
+}
+/** @deprecated this interface has been replaced by StandardCrmExtensionPoint */
+export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
+    actions: CrmHostActions;
+    context: CrmContext;
+    customComponents: {
+        CrmPropertyList: ComponentType<CrmPropertyListProps>;
+        CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
+        CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
+        CrmReport: ComponentType<CrmReportProps>;
+        CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
+        CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
+        CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
+        CrmSimpleDeadline?: ComponentType<CrmSimpleDeadlineProps>;
+        CrmRelativeTimeline?: ComponentType<CrmRelativeTimelineProps>;
+        CrmStageTracker: ComponentType<CrmStageTrackerProps>;
+        CrmStatistics?: ComponentType<CrmStatisticsProps>;
+        CrmActionButton?: ComponentType<CrmActionButtonProps>;
+        CrmActionLink?: ComponentType<CrmActionLinkProps>;
+        CrmCardActions?: ComponentType<CrmCardActionsProps>;
+    };
+}
+/** @ignore */
+export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
+    actions: CrmHostActions & UiePlatformActions;
+    context: CrmContext;
+    customComponents: {
+        CrmActionButton?: ComponentType<CrmActionButtonProps>;
+        CrmActionLink?: ComponentType<CrmActionLinkProps>;
+    };
+}
+/** @ignore */
+export interface SettingsExtensionPoint extends ExtensionPointContract {
+    actions: SettingsActions & UiePlatformActions;
+    context: SettingsContext;
+}
+/** @ignore */
+export interface AppHomeExtensionPoint extends ExtensionPointContract {
+    actions: AppHomeActions & UiePlatformActions;
+    context: AppHomeContext;
+}
+export interface ExampleCrmComponentProps {
+    name: string;
+    size: 'sm' | 'md' | 'lg';
+    count: number;
+}
+/** @ignore */
+interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
+    actions: {
+        warn: () => void;
+    };
+    context: GenericContext;
+    customComponents: {
+        ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
+    };
+}
+export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home"];
+export type ExtensionPointLocation = TypesOfReadOnlyArray<typeof EXTENSION_POINT_LOCATIONS>;
+/** @ignore */
+interface LocationToExtensionPoint {
+    'uie.playground.middle': RemotePlaygroundExtensionPoint;
+    'crm.record.tab': StandardCrmExtensionPoint;
+    'crm.preview': StandardCrmExtensionPoint;
+    'crm.record.sidebar': CrmSidebarExtensionPoint;
+    'helpdesk.sidebar': StandardCrmExtensionPoint;
+    settings: SettingsExtensionPoint;
+    home: AppHomeExtensionPoint;
+}
+/**
+ * While this resolves to the same result as LocationToExtensionPoint, it ensures that every location
+ * from ExtensionPointLocation is explicitly included. This way, EXTENSION_POINT_LOCATIONS becomes
+ * the single source of truth for defining all locations.
+ */
+type _ExtensionPoints = {
+    [key in ExtensionPointLocation]: LocationToExtensionPoint[key];
+};
+export interface ExtensionPoints extends _ExtensionPoints {
+}
+/** @ignore */
+export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoints> {
+    runServerlessFunction: ServerlessFuncRunner;
+    actions: ExtensionPoints[ExtensionPointName]['actions'];
+    context: ExtensionPoints[ExtensionPointName]['context'];
+}
+export {};

package/dist/__synced__/types/extension-points.synced.js

@@ -0,0 +1,9 @@
+export const EXTENSION_POINT_LOCATIONS = [
+    'crm.preview',
+    'crm.record.sidebar',
+    'crm.record.tab',
+    'helpdesk.sidebar',
+    'uie.playground.middle',
+    'settings',
+    'home',
+];