playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1081exportingtypes1626

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
-  data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
+  metadata.gz: 7ee605d1466a2a7ba9a7b05901fc8b1a083d0ffec0d02dedca675ebe5446cd09
+  data.tar.gz: 136ae5d6bf922f8ba660a633bd86001cc62e5f6db06812bbe281fedebedf8752
 SHA512:
-  metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
-  data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7
+  metadata.gz: 1535ad95338169cda8d1dfea974a6ca5e42e9a68c992dbb1b6ef82f186d39442b0693e3324a0bfe65071b081396b5f448bf7e9b5b1e7d32ad13d824f24b0dd4f
+  data.tar.gz: c49ffebb22ba2f15eff141a070b6c69ba998f7d19830103cb4267633a62489098f48b1d49f42ad801a87c5a102db5f160ee7636255daa0d1f3d121bd06078642

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -3,6 +3,7 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,31 +11,32 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import classnames from "classnames";
 
 type BarGraphProps = {
-  align?: "left" | "right" | "center",
-  axisTitle: string,
-  dark?: boolean,
-  xAxisCategories: [],
-  yAxisMin: number,
-  yAxisMax: number,
-  chartData: { name: string, data: number[] }[],
-  className?: string,
-  id: any,
-  pointStart: number | any,
-  subTitle?: string,
-  title: string,
-  type?: string,
-  legend?: boolean,
-  toggleLegendClick?: boolean,
-  height?: string,
-  colors: string[],
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  aria?: { [key: string]: string },
-  data?: { [key: string]: string },
+  align?: "left" | "right" | "center";
+  axisTitle: string;
+  dark?: boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  chartData: { name: string; data: number[] }[];
+  className?: string;
+  id: any;
+  pointStart: number | any;
+  subTitle?: string;
+  title: string;
+  type?: string;
+  legend?: boolean;
+  toggleLegendClick?: boolean;
+  height?: string;
+  colors: string[];
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
 };
 
+
 const BarGraph = ({
   aria = {},
   data = {},
@@ -63,6 +65,12 @@ const BarGraph = ({
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
 
   const staticOptions = {
     title: {
@@ -115,24 +123,12 @@ const BarGraph = ({
   }
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false)
 
   useEffect(() => {
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme)
-          : window.Highcharts.setOptions(highchartsTheme)
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
         containerProps={{
           className: classnames(globalProps(props), className),
@@ -140,7 +136,7 @@ const BarGraph = ({
           ...ariaProps,
           ...dataProps,
         }}
-        highcharts={window.Highcharts}
+        highcharts={Highcharts}
         options={options}
     />
   );

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -3,6 +3,8 @@ import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
 import highchartsMore from "highcharts/highcharts-more";
 
+import Highcharts from "highcharts";
+
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,35 +12,35 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 type CircleChartProps = {
-  align?: "left" | "right" | "center",
-  aria: { [key: string]: string },
-  chartData?: [],
-  children?: Node,
-  className?: string,
-  colors?: string[],
-  dark?: Boolean,
-  data?: Object,
-  dataLabelHtml?: string,
-  dataLabels?: boolean,
-  height?: string,
-  id?: string,
-  innerSize?: "sm" | "md" | "lg" | "none",
-  legend?: boolean,
-  maxPointSize?: number,
-  minPointSize?: number,
-  rounded?: boolean,
-  startAngle?: number,
-  style?: string,
-  title?: string,
-  tooltipHtml: string,
-  useHtml?: boolean,
-  zMin?: number,
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  borderColor?: string,
-  borderWidth?: number,
+  align?: "left" | "right" | "center";
+  aria: { [key: string]: string };
+  chartData?: [];
+  children?: Node;
+  className?: string;
+  colors?: string[];
+  dark?: Boolean;
+  data?: Object;
+  dataLabelHtml?: string;
+  dataLabels?: boolean;
+  height?: string;
+  id?: string;
+  innerSize?: "sm" | "md" | "lg" | "none";
+  legend?: boolean;
+  maxPointSize?: number;
+  minPointSize?: number;
+  rounded?: boolean;
+  startAngle?: number;
+  style?: string;
+  title?: string;
+  tooltipHtml: string;
+  useHtml?: boolean;
+  zMin?: number;
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  borderColor?: string;
+  borderWidth?: number;
 };
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -88,11 +90,29 @@ const CircleChart = ({
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  highchartsMore(Highcharts);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  Highcharts.setOptions({
+    tooltip: {
+      headerFormat: null,
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
+      useHTML: useHtml,
+    },
+  });
+
   const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
+    innerSizes[size];
+
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -149,50 +169,26 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme)
-          : window.Highcharts.setOptions(highchartsTheme)
-        
-        highchartsMore(window.Highcharts);
-
-        window.Highcharts.setOptions({
-          tooltip: {
-            headerFormat: null,
-            pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-            useHTML: useHtml,
-          },
-        });
-
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
+
   return (
     <>
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
-          {
-            isHighchartsLoaded &&
-            <HighchartsReact
-              containerProps={{
-                className: classnames("pb_circle_chart", globalProps(props)),
-                id: id,
-                ...ariaProps,
-                ...dataProps,
-              }}
-              highcharts={window.Highcharts}
-              options={options}
-            />
-          }
+          <HighchartsReact
+            containerProps={{
+              className: classnames("pb_circle_chart", globalProps(props)),
+              id: id,
+              ...ariaProps,
+              ...dataProps,
+            }}
+            highcharts={Highcharts}
+            options={options}
+          />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
-        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
@@ -200,7 +196,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={window.Highcharts}
+          highcharts={Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -13,26 +14,26 @@ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 type GaugeProps = {
-  aria: { [key: string]: string },
-  className?: string,
-  chartData?: { name: string, value: number[] | number }[],
-  dark?: Boolean,
-  data?: { [key: string]: string },
-  disableAnimation?: boolean,
-  fullCircle?: boolean,
-  height?: string,
-  id?: string,
-  max?: number,
-  min?: number,
-  prefix?: string,
-  showLabels?: boolean,
-  style?: string,
-  suffix?: string,
-  title?: string,
-  tooltipHtml?: string,
-  colors: string[],
-  minorTickInterval: any,
-  circumference: number[],
+  aria: { [key: string]: string };
+  className?: string;
+  chartData?: { name: string; value: number[] | number }[];
+  dark?: Boolean;
+  data?: { [key: string]: string };
+  disableAnimation?: boolean;
+  fullCircle?: boolean;
+  height?: string;
+  id?: string;
+  max?: number;
+  min?: number;
+  prefix?: string;
+  showLabels?: boolean;
+  style?: string;
+  suffix?: string;
+  title?: string;
+  tooltipHtml?: string;
+  colors: string[];
+  minorTickInterval: any;
+  circumference: number[];
 };
 
 const Gauge = ({
@@ -61,13 +62,28 @@ const Gauge = ({
 }: GaugeProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  highchartsMore(Highcharts);
+  solidGauge(Highcharts);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  //set tooltip directly to prevent being overriden by Highcharts defaults
+  Highcharts.setOptions({
+    tooltip: {
+      pointFormat: tooltipHtml,
+      followPointer: true,
+    },
+  });
 
   const css = buildCss({
     pb_gauge_kit: true,
   });
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -158,45 +174,18 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        
-        const gaugeInterval = setInterval(() => {
-          if (document.querySelector(".prefix")) {
-            clearInterval(gaugeInterval)
-            document.querySelectorAll(".prefix").forEach((prefix) => {
-              prefix.setAttribute("y", "28");
-            });
-            document
-              .querySelectorAll(".fix")
-              .forEach((fix) => fix.setAttribute("y", "38"));
-          }
-        }, 0)
-
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme)
-          : window.Highcharts.setOptions(highchartsTheme)
-        
-        highchartsMore(window.Highcharts);
-        solidGauge(window.Highcharts);
-      
-        //set tooltip directly to prevent being overriden by window.Highcharts defaults
-        window.Highcharts.setOptions({
-          tooltip: {
-            pointFormat: tooltipHtml,
-            followPointer: true,
-          },
-        });
-
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
+    if (document.querySelector(".prefix")) {
+      document.querySelectorAll(".prefix").forEach((prefix) => {
+        prefix.setAttribute("y", "28");
+      });
+      document
+        .querySelectorAll(".fix")
+        .forEach((fix) => fix.setAttribute("y", "38"));
+    }
 
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
@@ -204,7 +193,7 @@ const Gauge = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -4,38 +4,39 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 
 type LineGraphProps = {
-  align?: "left" | "right" | "center",
-  axisTitle?: string,
-  dark?: Boolean,
-  xAxisCategories: [],
-  yAxisMin: number,
-  yAxisMax: number,
-  className?: string,
+  align?: "left" | "right" | "center";
+  axisTitle?: string;
+  dark?: Boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  className?: string;
   chartData: {
-    name: string,
-    data: number[],
-  }[],
-  gradient?: boolean,
-  id: string,
-  pointStart: number,
-  subTitle?: string,
-  title: string,
-  type?: string,
-  legend?: boolean,
-  toggleLegendClick?: boolean,
-  height?: string,
-  colors: string[],
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  aria?: { [key: string]: string },
-  data?: { [key: string]: string },
+    name: string;
+    data: number[];
+  }[];
+  gradient?: boolean;
+  id: string;
+  pointStart: number;
+  subTitle?: string;
+  title: string;
+  type?: string;
+  legend?: boolean;
+  toggleLegendClick?: boolean;
+  height?: string;
+  colors: string[];
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
 };
 
 const LineGraph = ({
@@ -67,6 +68,12 @@ const LineGraph = ({
 }: LineGraphProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
 
   const staticOptions = {
     title: {
@@ -119,24 +126,12 @@ const LineGraph = ({
   }
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme)
-          : window.Highcharts.setOptions(highchartsTheme)
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
@@ -144,7 +139,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-default](https://github.com/powerhome/playbook/assets/92755007/73dffd55-14f7-468e-b6ea-4e700980183d)
+
+```swift
+
+let twoUsers = [andrew, picAndrew]
+
+PBDoc(title: "xSmall") {
+  PBMultipleUsers(users: twoUsers, size: .xSmall)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `AvatarSize` | Changes the size of the avatars  | `.small` | `.xSmall` `.small` |
+| **Reversed** | `Bool` | Changes the order of the avatars | `false` | `true` `false` |
+| **Max Displayed Users** | `Int` | Limits the number of avatars displayed | `4` |  |

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md

@@ -0,0 +1,13 @@
+![multiple-users-reverse](https://github.com/powerhome/playbook/assets/92755007/be3f6f7d-f699-40f2-bbb6-8a99144a8744)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+let twoUsers = [andrew, picAndrew]
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBMultipleUsers(users: multipleUsers, size: .small, reversed: true)
+  PBMultipleUsers(users: twoUsers, size: .small, reversed: true)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-size](https://github.com/powerhome/playbook/assets/92755007/5c15b862-fb32-4e0a-a826-bc25b1db555e)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+PBDoc(title: "Small") {
+  PBMultipleUsers(users: multipleUsers, size: .small)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml

@@ -10,3 +10,9 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+
+  swift:
+  - multiple_users_default_swift: Default
+  - multiple_users_reverse_swift: Reverse
+  - multiple_users_size_swift: Small
+  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-default](https://github.com/powerhome/playbook/assets/92755007/180e1275-3eb6-4b28-b1ef-bdde45ab3c2e)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .default)
+  PBMultipleUsersStacked(users: twoUsers, size: .default)
+  PBMultipleUsersStacked(users: multipleUsers, size: .default)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `Size` | Changes the size of the avatars | `.small` | `.default` `.small` `.xSmall` |

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-small](https://github.com/powerhome/playbook/assets/92755007/277fd685-6302-462e-a02a-18a8fcb57715)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser)
+  PBMultipleUsersStacked(users: twoUsers)
+  PBMultipleUsersStacked(users: multipleUsers)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-xsmall](https://github.com/powerhome/playbook/assets/92755007/4f31976f-a41b-4923-9230-5015f6ad75f8)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+ HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .xSmall)
+  PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
+  PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
+}
+
+```