@canva/cli 0.0.1-beta.8 → 0.0.1-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/package.json

@@ -6,12 +6,12 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.3.0",
-    "@canva/asset": "^2.0.0",
-    "@canva/design": "^2.2.1",
-    "@canva/error": "^2.0.0",
-    "@canva/platform": "^2.0.0",
-    "@canva/user": "^2.0.0",
+    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/asset": "^2.1.0",
+    "@canva/design": "^2.3.0",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -25,7 +25,7 @@
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
-    "@types/node-fetch": "2.6.11",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
@@ -37,10 +37,10 @@
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
     "cssnano": "7.0.6",
-    "debug": "4.3.7",
-    "dotenv": "16.4.5",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
     "exponential-backoff": "3.1.1",
-    "express": "4.21.1",
+    "express": "4.21.2",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",
@@ -50,7 +50,7 @@
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
     "prompts": "2.4.2",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
@@ -59,7 +59,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.96.1",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"

package/templates/base/webpack.config.cjs

@@ -4,6 +4,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin, optimize } = require("webpack");
 const chalk = require("chalk");
 const { transform } = require("@formatjs/ts-transformer");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 /**
  *
@@ -173,7 +174,8 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+      mode === "development" && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }

package/templates/common/conf/eslint-i18n.mjs

@@ -1,9 +1,11 @@
 import formatjs from "eslint-plugin-formatjs";
+import eslintLocalI18nRules from "./eslint-local-i18n-rules/index.mjs";
 
 export default [
   {
     plugins: {
       formatjs,
+      "local-i18n-rules": eslintLocalI18nRules,
     },
     rules: {
       "formatjs/no-invalid-icu": "error",
@@ -33,6 +35,7 @@ export default [
       "formatjs/no-offset": "error",
       "formatjs/blocklist-elements": [2, ["selectordinal"]],
       "formatjs/no-complex-selectors": "error",
+      "local-i18n-rules/enforce-object-property-translation": ["warn"],
     },
   },
 ];

package/templates/common/conf/eslint-local-i18n-rules/index.mjs

@@ -0,0 +1,181 @@
+/**
+ * ESLint rule that identifies and flags untranslated user-facing strings in object properties.
+ *
+ * This rule helps maintain internationalization consistency by detecting untranslated
+ * strings in specific object properties (default: 'label'). It suggests using
+ * intl.formatMessage for proper translation.
+ *
+ * Note: The rule is currently implemented as a local rule, with plans to publish as
+ * an npm package to make it available to the broader development community.
+ *
+ * @example
+ * // ❌ Incorrect - Untranslated strings
+ * const options = [
+ *   { value: "inbox", label: "Inbox" },
+ *   { value: "starred", label: "Starred messages" },
+ *   { value: "spam", label: "Spam folder" }
+ * ];
+ *
+ * // ✅ Correct - Using intl.formatMessage with descriptions
+ * const options = [
+ *   {
+ *     value: "inbox",
+ *     label: intl.formatMessage({
+ *       defaultMessage: "Inbox",
+ *       description: "Label for main message inbox folder option"
+ *     })
+ *   },
+ *   {
+ *     value: "starred",
+ *     label: intl.formatMessage({
+ *       defaultMessage: "Starred messages",
+ *       description: "Label for folder containing messages marked as important"
+ *     })
+ *   },
+ *   {
+ *     value: "spam",
+ *     label: intl.formatMessage({
+ *       defaultMessage: "Spam folder",
+ *       description: "Label for folder containing filtered spam messages"
+ *     })
+ *   }
+ * ];
+ *
+ * @see https://www.canva.dev/docs/apps/localization/
+ */
+export default {
+  rules: {
+    "enforce-object-property-translation": {
+      meta: {
+        type: "problem",
+        docs: {
+          description:
+            "Enforce translation of specific properties using intl.formatMessage",
+          category: "Possible Errors",
+          recommended: true,
+        },
+        fixable: "code",
+        schema: [
+          {
+            type: "object",
+            properties: {
+              properties: {
+                type: "array",
+                items: { type: "string" },
+                default: ["label"],
+              },
+              intlObjectName: {
+                type: "string",
+                default: "intl",
+              },
+            },
+            additionalProperties: false,
+          },
+        ],
+        messages: {
+          untranslatedProperty: `If "{{ originalMessage }}" is a user-facing string, you should translate it using "intl.formatMessage". See https://www.canva.dev/docs/apps/localization/.`,
+        },
+      },
+      create(context) {
+        const config = context.options[0] || {};
+        const propertiesToCheck = config.properties || ["label"];
+        const intlObjectName = config.intlObjectName || "intl";
+
+        function getTemplateLiteralString(node) {
+          const src = context.getSourceCode();
+          return src.getText(node);
+        }
+
+        // Extract string content from different node types
+        function extractStringContent(node) {
+          if (!node) return [];
+
+          switch (node.type) {
+            // label: "Foo"
+            case "Literal":
+              return typeof node.value === "string"
+                ? [{ node, value: node.value }]
+                : [];
+
+            // label: `Foo ${bar}`
+            case "TemplateLiteral":
+              return [{ node, value: getTemplateLiteralString(node) }];
+            // label: foo || "Bar"
+            case "LogicalExpression": {
+              if (node.operator === "||") {
+                return [
+                  ...extractStringContent(node.left),
+                  ...extractStringContent(node.right),
+                ];
+              }
+              return [];
+            }
+            // label: "Foo" + "Bar" + "Baz"
+            case "BinaryExpression":
+              if (node.operator === "+") {
+                return [
+                  ...extractStringContent(node.left),
+                  ...extractStringContent(node.right),
+                ];
+              }
+              return [];
+            // label: foo ? "Foo" : "Bar"
+            case "ConditionalExpression":
+              return [
+                ...extractStringContent(node.consequent),
+                ...extractStringContent(node.alternate),
+              ];
+
+            default:
+              return [];
+          }
+        }
+
+        function isTranslated(node) {
+          return (
+            node.parent.type === "CallExpression" &&
+            node.parent.callee.type === "MemberExpression" &&
+            node.parent.callee.object.name === intlObjectName &&
+            node.parent.callee.property.name === "formatMessage"
+          );
+        }
+
+        return {
+          Property(node) {
+            const keyName = node.key.name || node.key.value;
+            if (propertiesToCheck.includes(keyName)) {
+              const results = extractStringContent(node.value);
+              if (!results) return;
+              results.forEach((result) => {
+                const { node: stringNode, value: stringValue } = result;
+
+                if (!isTranslated(stringNode)) {
+                  context.report({
+                    node: stringNode,
+                    messageId: "untranslatedProperty",
+                    data: {
+                      property: keyName,
+                      originalMessage:
+                        stringValue.length > 40
+                          ? stringValue.split(" ").slice(0, 4).join(" ") + "..."
+                          : stringValue,
+                      intlObjectName,
+                    },
+                    fix(fixer) {
+                      const newText = `${intlObjectName}.formatMessage({
+            defaultMessage: ${JSON.stringify(stringValue)},
+            // TODO: Provide a meaningful description for translators
+            description: ""
+          })`;
+                      return fixer.replaceText(stringNode, newText);
+                    },
+                  });
+                }
+              });
+            }
+          },
+        };
+      },
+    },
+  },
+};

package/templates/common/jest.config.mjs

@@ -1,8 +1,35 @@
+import { pathsToModuleNameMapper } from "ts-jest";
+import tsconfig from "./tsconfig.json" assert { type: "json" };
+
+const { compilerOptions } = tsconfig;
+
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 
 export default {
   preset: "ts-jest",
-  testEnvironment: "node",
-  testRegex: "(/tests/.*|(\\.|/)(tests))\\.ts?$",
+  testEnvironment: "jsdom",
+  testRegex: "(/tests/.*|(\\.|/)(tests))\\.tsx?$",
   modulePathIgnorePatterns: ["./internal/", "./node_modules/"],
+  modulePaths: [compilerOptions.baseUrl],
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
+  transform: {
+    ".+\\.(css)$": "jest-css-modules-transform",
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        astTransformers: {
+          before: [
+            {
+              path: "@formatjs/ts-transformer/ts-jest-integration",
+              options: {
+                overrideIdFn: "[sha512:contenthash:base64:6]",
+                ast: true,
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+  setupFiles: ["<rootDir>/jest.setup.ts"],
 };

package/templates/common/jest.setup.ts

@@ -0,0 +1,19 @@
+// Import testing sub-packages
+import * as asset from "@canva/asset/test";
+import * as design from "@canva/design/test";
+import * as error from "@canva/error/test";
+import * as platform from "@canva/platform/test";
+import * as user from "@canva/user/test";
+
+// Initialize the test environments
+asset.initTestEnvironment();
+design.initTestEnvironment();
+error.initTestEnvironment();
+platform.initTestEnvironment();
+user.initTestEnvironment();
+
+// Once they're initialized, mock the SDKs
+jest.mock("@canva/asset");
+jest.mock("@canva/design");
+jest.mock("@canva/platform");
+jest.mock("@canva/user");

package/templates/dam/package.json

@@ -18,12 +18,13 @@
   },
   "dependencies": {
     "@canva/app-components": "^1.0.0-beta.29",
-    "@canva/app-i18n-kit": "^1.0.1",
-    "@canva/app-ui-kit": "^4.3.0",
-    "@canva/asset": "^2.0.0",
-    "@canva/design": "^2.2.1",
-    "@canva/platform": "^2.0.0",
-    "@canva/user": "^2.0.0",
+    "@canva/app-i18n-kit": "^1.0.2",
+    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/asset": "^2.1.0",
+    "@canva/design": "^2.3.0",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
     "react": "18.3.1",
@@ -31,12 +32,14 @@
     "react-intl": "6.8.7"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.14.0",
-    "@formatjs/cli": "6.3.8",
-    "@formatjs/ts-transformer": "3.13.22",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.16.0",
+    "@formatjs/cli": "6.3.14",
+    "@formatjs/ts-transformer": "3.13.26",
     "@ngrok/ngrok": "1.4.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
+    "@testing-library/react": "16.1.0",
     "@types/cors": "2.8.17",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
@@ -44,30 +47,32 @@
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
-    "@types/node-fetch": "2.6.11",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.13.0",
-    "@typescript-eslint/parser": "8.13.0",
+    "@typescript-eslint/eslint-plugin": "8.18.0",
+    "@typescript-eslint/parser": "8.18.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
     "cssnano": "7.0.6",
-    "debug": "4.3.7",
-    "dotenv": "16.4.5",
-    "eslint": "9.14.0",
-    "eslint-plugin-formatjs": "5.2.2",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
+    "eslint": "9.16.0",
+    "eslint-plugin-formatjs": "5.2.8",
     "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-react": "7.37.2",
     "exponential-backoff": "3.1.1",
-    "express": "4.21.1",
+    "express": "4.21.2",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
+    "jest-css-modules-transform": "4.4.2",
+    "jest-environment-jsdom": "29.7.0",
     "jsonwebtoken": "9.0.2",
     "jwks-rsa": "3.1.0",
     "mini-css-extract-plugin": "2.9.2",
@@ -75,8 +80,9 @@
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
     "prompts": "2.4.2",
+    "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.2.5",
@@ -84,7 +90,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.96.1",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"

package/templates/dam/webpack.config.cjs

@@ -4,6 +4,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin, optimize } = require("webpack");
 const chalk = require("chalk");
 const { transform } = require("@formatjs/ts-transformer");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 /**
  *
@@ -173,7 +174,8 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+      mode === "development" && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }

package/templates/gen_ai/package.json

@@ -17,16 +17,17 @@
     "postinstall": "ts-node ./scripts/copy-env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^1.0.1",
-    "@canva/app-ui-kit": "^4.3.0",
-    "@canva/asset": "^2.0.0",
-    "@canva/design": "^2.2.1",
-    "@canva/platform": "^2.0.0",
-    "@canva/user": "^2.0.0",
+    "@canva/app-i18n-kit": "^1.0.2",
+    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/asset": "^2.1.0",
+    "@canva/design": "^2.3.0",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.1.18",
-    "obscenity": "0.4.0",
+    "html-react-parser": "5.2.0",
+    "obscenity": "0.4.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.1.2",
@@ -34,42 +35,46 @@
     "react-router-dom": "6.28.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.14.0",
-    "@formatjs/cli": "6.3.8",
-    "@formatjs/ts-transformer": "3.13.22",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.16.0",
+    "@formatjs/cli": "6.3.14",
+    "@formatjs/ts-transformer": "3.13.26",
     "@ngrok/ngrok": "1.4.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
+    "@testing-library/react": "16.1.0",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
     "@types/express-serve-static-core": "4.19.6",
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
-    "@types/node-fetch": "2.6.11",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.13.0",
-    "@typescript-eslint/parser": "8.13.0",
+    "@typescript-eslint/eslint-plugin": "8.18.0",
+    "@typescript-eslint/parser": "8.18.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
     "cssnano": "7.0.6",
-    "debug": "4.3.7",
-    "dotenv": "16.4.5",
-    "eslint": "9.14.0",
-    "eslint-plugin-formatjs": "5.2.2",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
+    "eslint": "9.16.0",
+    "eslint-plugin-formatjs": "5.2.8",
     "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-react": "7.37.2",
     "exponential-backoff": "3.1.1",
-    "express": "4.21.1",
+    "express": "4.21.2",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
+    "jest-css-modules-transform": "4.4.2",
+    "jest-environment-jsdom": "29.7.0",
     "jsonwebtoken": "9.0.2",
     "jwks-rsa": "3.1.0",
     "mini-css-extract-plugin": "2.9.2",
@@ -77,8 +82,9 @@
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
     "prompts": "2.4.2",
+    "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.2.5",
@@ -86,7 +92,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.96.1",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"

package/templates/gen_ai/src/app.tsx

@@ -1,13 +1,19 @@
-import { Outlet } from "react-router-dom";
-import { Rows } from "@canva/app-ui-kit";
-import { Footer } from "./components";
-import * as styles from "styles/components.css";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { ContextProvider } from "./context";
+import { routes } from "./routes";
+import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { AppUiProvider } from "@canva/app-ui-kit";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorPage } from "./pages";
 
 export const App = () => (
-  <div className={styles.scrollContainer}>
-    <Rows spacing="3u">
-      <Outlet />
-      <Footer />
-    </Rows>
-  </div>
+  <AppI18nProvider>
+    <AppUiProvider>
+      <ErrorBoundary fallback={<ErrorPage />}>
+        <ContextProvider>
+          <RouterProvider router={createHashRouter(routes)} />
+        </ContextProvider>
+      </ErrorBoundary>
+    </AppUiProvider>
+  </AppI18nProvider>
 );

package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+import type { RenderResult } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { RemainingCredits } from "../remaining_credits";
+import { requestOpenExternalUrl } from "@canva/platform";
+
+function renderInTestProvider(node: React.ReactNode): RenderResult {
+  return render(
+    // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
+    <TestAppI18nProvider>
+      <TestAppUiProvider>{node}</TestAppUiProvider>,
+    </TestAppI18nProvider>,
+  );
+}
+
+// This test demonstrates how to test code that uses functions from the Canva Apps SDK
+// For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
+describe("Remaining Credit Tests", () => {
+  const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should call requestOpenExternalUrl when the link is clicked", () => {
+    // assert that the mock is in the expected clean state
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+
+    const result = renderInTestProvider(<RemainingCredits />);
+
+    // get a reference to the link to purchase more credits
+    const purchaseMoreLink = result.getByRole("button");
+
+    // programmatically simulate clicking the button
+    fireEvent.click(purchaseMoreLink);
+
+    // we expect that requestOpenExternalUrl has been called
+    expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
+  });
+});

package/templates/gen_ai/src/home.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import { Rows } from "@canva/app-ui-kit";
+import { Footer } from "./components";
+import * as styles from "styles/components.css";
+
+export const Home = () => (
+  <div className={styles.scrollContainer}>
+    <Rows spacing="3u">
+      <Outlet />
+      <Footer />
+    </Rows>
+  </div>
+);