@okta/odyssey-react-mui 0.24.0 → 1.0.1

package/src/Typography.tsx

@@ -0,0 +1,357 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  Typography as MuiTypography,
+  TypographyProps as MuiTypographyProps,
+} from "@mui/material";
+import { ElementType, ReactNode, useMemo } from "react";
+
+export type TypographyVariantValue =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "body"
+  | "subordinate"
+  | "support"
+  | "legend";
+
+export const typographyVariantMapping: Record<
+  TypographyVariantValue,
+  MuiTypographyProps["variant"]
+> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "body1",
+  subordinate: "subtitle1",
+  support: "subtitle2",
+  legend: "legend",
+} as const;
+
+export const typographyColorValues = [
+  "primary",
+  "textPrimary",
+  "secondary",
+  "textSecondary",
+  "error",
+] as const;
+
+export type TypographyProps = {
+  /**
+   * The ID of the element that describes the component.
+   */
+  ariaDescribedBy?: string;
+  /**
+   * The ARIA label for the component.
+   */
+  ariaLabel?: string;
+  /**
+   * The ID of the element that labels the component.
+   */
+  ariaLabelledBy?: string;
+  /**
+   * The text content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Additional classes to add to the component.
+   */
+  classes?: object;
+  /**
+   * The color of the text.
+   */
+  color?: (typeof typographyColorValues)[number];
+  /**
+   * The HTML element the component should render, if different from the default.
+   */
+  component?: ElementType;
+  /**
+   * The variant of Typography to render.
+   */
+  variant?: keyof typeof typographyVariantMapping;
+};
+
+export const Typography = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component: componentProp,
+  variant = "body",
+}: TypographyProps) => {
+  const component = useMemo(() => {
+    if (!componentProp) {
+      if (variant === "body") {
+        return "p";
+      } else if (variant === "subordinate" || variant === "support") {
+        return "h6";
+      } else {
+        return variant;
+      }
+    }
+    return componentProp;
+  }, [componentProp, variant]);
+
+  return (
+    <MuiTypography
+      ariaDescribedBy={ariaDescribedBy}
+      ariaLabel={ariaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      children={children}
+      classes={classes}
+      color={color}
+      component={component}
+      variant={typographyVariantMapping[variant]}
+    />
+  );
+};
+
+Typography.displayName = "Typography";
+
+export const Heading1 = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="h1"
+  />
+);
+
+Heading1.displayName = "Heading1";
+
+export const Heading2 = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="h2"
+  />
+);
+
+Heading2.displayName = "Heading2";
+
+export const Heading3 = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="h3"
+  />
+);
+
+Heading3.displayName = "Heading3";
+
+export const Heading4 = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="h4"
+  />
+);
+
+Heading4.displayName = "Heading4";
+
+export const Heading5 = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="h5"
+  />
+);
+
+Heading5.displayName = "Heading5";
+
+export const Heading6 = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="h6"
+  />
+);
+
+Heading6.displayName = "Heading6";
+
+export const Paragraph = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="body"
+  />
+);
+
+Paragraph.displayName = "Paragraph";
+
+export const Subordinate = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="subordinate"
+  />
+);
+
+Subordinate.displayName = "Subordinate";
+
+export const Support = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="support"
+  />
+);
+
+Support.displayName = "Support";
+
+export const Legend = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  classes,
+  color,
+  component,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    classes={classes}
+    color={color}
+    component={component}
+    variant="legend"
+  />
+);
+
+Legend.displayName = "Legend";

package/src/{iconDictionary → icons.generated}/Add.tsx

@@ -13,15 +13,14 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
 export type AddIconProps = SvgIconNoChildrenProps;
 
 export const AddIcon = forwardRef<SVGSVGElement, AddIconProps>((props, ref) => {
   return (
     <SvgIcon
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       ref={ref}
@@ -29,10 +28,10 @@ export const AddIcon = forwardRef<SVGSVGElement, AddIconProps>((props, ref) => {
     >
       <>
         <path
-          fill="currentColor"
           fillRule="evenodd"
-          d="M7.5 1V7.5H1v1H7.5V15h1V8.5H15v-1H8.5V1h-1Z"
           clipRule="evenodd"
+          d="M11 13v5h2v-5h5v-2h-5V6h-2v5H6v2h5Z"
+          fill="currentColor"
         />
       </>
     </SvgIcon>

package/src/{iconDictionary → icons.generated}/AddCircle.tsx

@@ -13,8 +13,7 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
 export type AddCircleIconProps = SvgIconNoChildrenProps;
 
@@ -22,7 +21,7 @@ export const AddCircleIcon = forwardRef<SVGSVGElement, AddCircleIconProps>(
   (props, ref) => {
     return (
       <SvgIcon
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         ref={ref}
@@ -30,10 +29,10 @@ export const AddCircleIcon = forwardRef<SVGSVGElement, AddCircleIconProps>(
       >
         <>
           <path
-            fill="currentColor"
             fillRule="evenodd"
-            d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7 8A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-.5-5V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1Z"
             clipRule="evenodd"
+            d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm10-1V8h2v3h3v2h-3v3h-2v-3H8v-2h3Z"
+            fill="currentColor"
           />
         </>
       </SvgIcon>

package/src/icons.generated/Apps.tsx

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+import { forwardRef } from "react";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
+
+export type AppsIconProps = SvgIconNoChildrenProps;
+
+export const AppsIcon = forwardRef<SVGSVGElement, AppsIconProps>(
+  (props, ref) => {
+    return (
+      <SvgIcon
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        ref={ref}
+        {...props}
+      >
+        <>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM4 6.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0ZM6.5 13a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM4 17.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Zm9-11a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM17.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm0 9a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM15 17.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z"
+            fill="currentColor"
+          />
+        </>
+      </SvgIcon>
+    );
+  }
+);
+
+AppsIcon.displayName = "AppsIcon";

package/src/{iconDictionary → icons.generated}/ArrowDown.tsx

@@ -13,8 +13,7 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
 export type ArrowDownIconProps = SvgIconNoChildrenProps;
 
@@ -22,7 +21,7 @@ export const ArrowDownIcon = forwardRef<SVGSVGElement, ArrowDownIconProps>(
   (props, ref) => {
     return (
       <SvgIcon
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         ref={ref}
@@ -30,10 +29,10 @@ export const ArrowDownIcon = forwardRef<SVGSVGElement, ArrowDownIconProps>(
       >
         <>
           <path
-            fill="currentColor"
             fillRule="evenodd"
-            d="m8.5 13.293 4.146-4.147.708.708-5 5a.5.5 0 0 1-.708 0l-5-5 .708-.708L7.5 13.293V1h1v12.293Z"
             clipRule="evenodd"
+            d="M13 15.586V5h-2v10.586l-3.293-3.293-1.414 1.414 4.646 4.647a1.5 1.5 0 0 0 2.122 0l4.646-4.647-1.414-1.414L13 15.586Z"
+            fill="currentColor"
           />
         </>
       </SvgIcon>

package/src/{iconDictionary → icons.generated}/ArrowLeft.tsx

@@ -13,8 +13,7 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
 export type ArrowLeftIconProps = SvgIconNoChildrenProps;
 
@@ -22,7 +21,7 @@ export const ArrowLeftIcon = forwardRef<SVGSVGElement, ArrowLeftIconProps>(
   (props, ref) => {
     return (
       <SvgIcon
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         ref={ref}
@@ -30,10 +29,10 @@ export const ArrowLeftIcon = forwardRef<SVGSVGElement, ArrowLeftIconProps>(
       >
         <>
           <path
-            fill="currentColor"
             fillRule="evenodd"
-            d="m2.707 8.5 4.147 4.146-.708.708-5-5a.5.5 0 0 1 0-.708l5-5 .708.708L2.707 7.5H15v1H2.707Z"
             clipRule="evenodd"
+            d="m5.646 13.06 4.647 4.647 1.414-1.414L8.414 13H19v-2H8.414l3.293-3.293-1.414-1.414-4.647 4.646a1.5 1.5 0 0 0 0 2.122Z"
+            fill="currentColor"
           />
         </>
       </SvgIcon>

package/src/{iconDictionary/OverflowVertical.tsx → icons.generated/ArrowLowerLeft.tsx}

@@ -13,18 +13,17 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
-export type OverflowVerticalIconProps = SvgIconNoChildrenProps;
+export type ArrowLowerLeftIconProps = SvgIconNoChildrenProps;
 
-export const OverflowVerticalIcon = forwardRef<
+export const ArrowLowerLeftIcon = forwardRef<
   SVGSVGElement,
-  OverflowVerticalIconProps
+  ArrowLowerLeftIconProps
 >((props, ref) => {
   return (
     <SvgIcon
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       ref={ref}
@@ -32,14 +31,14 @@ export const OverflowVerticalIcon = forwardRef<
     >
       <>
         <path
-          fill="currentColor"
           fillRule="evenodd"
-          d="M8 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-.556 5.168a1 1 0 1 1 1.111 1.663 1 1 0 0 1-1.11-1.662Z"
           clipRule="evenodd"
+          d="m8 14.586 8.293-8.293 1.414 1.414L9.414 16H14v2H7.5A1.5 1.5 0 0 1 6 16.5V10h2v4.586Z"
+          fill="currentColor"
         />
       </>
     </SvgIcon>
   );
 });
 
-OverflowVerticalIcon.displayName = "OverflowVerticalIcon";
+ArrowLowerLeftIcon.displayName = "ArrowLowerLeftIcon";

package/src/icons.generated/ArrowLowerRight.tsx

@@ -0,0 +1,44 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+import { forwardRef } from "react";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
+
+export type ArrowLowerRightIconProps = SvgIconNoChildrenProps;
+
+export const ArrowLowerRightIcon = forwardRef<
+  SVGSVGElement,
+  ArrowLowerRightIconProps
+>((props, ref) => {
+  return (
+    <SvgIcon
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      {...props}
+    >
+      <>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.071 14.657 7.707 6.293 6.293 7.707 14.586 16H10v2h6.571a1.5 1.5 0 0 0 1.5-1.5V9.929h-2v4.728Z"
+          fill="currentColor"
+        />
+      </>
+    </SvgIcon>
+  );
+});
+
+ArrowLowerRightIcon.displayName = "ArrowLowerRightIcon";

package/src/{iconDictionary → icons.generated}/ArrowRight.tsx

@@ -13,8 +13,7 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
 export type ArrowRightIconProps = SvgIconNoChildrenProps;
 
@@ -22,7 +21,7 @@ export const ArrowRightIcon = forwardRef<SVGSVGElement, ArrowRightIconProps>(
   (props, ref) => {
     return (
       <SvgIcon
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         ref={ref}
@@ -30,10 +29,10 @@ export const ArrowRightIcon = forwardRef<SVGSVGElement, ArrowRightIconProps>(
       >
         <>
           <path
-            fill="currentColor"
             fillRule="evenodd"
-            d="M13.293 7.5 9.146 3.354l.708-.708 5 5a.5.5 0 0 1 0 .708l-5 5-.708-.708L13.293 8.5H1v-1h12.293Z"
             clipRule="evenodd"
+            d="m18.354 10.94-4.647-4.647-1.414 1.414L15.586 11H5v2h10.586l-3.293 3.293 1.414 1.414 4.647-4.646a1.5 1.5 0 0 0 0-2.122Z"
+            fill="currentColor"
           />
         </>
       </SvgIcon>

package/src/{iconDictionary/AlertCircleFilled.tsx → icons.generated/ArrowUnsorted.tsx}

@@ -13,18 +13,17 @@
 // Code automatically generated by svgr; DO NOT EDIT.
 
 import { forwardRef } from "react";
-import { SvgIcon } from "./SvgIcon";
-import type { SvgIconNoChildrenProps } from "./types";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
 
-export type AlertCircleFilledIconProps = SvgIconNoChildrenProps;
+export type ArrowUnsortedIconProps = SvgIconNoChildrenProps;
 
-export const AlertCircleFilledIcon = forwardRef<
+export const ArrowUnsortedIcon = forwardRef<
   SVGSVGElement,
-  AlertCircleFilledIconProps
+  ArrowUnsortedIconProps
 >((props, ref) => {
   return (
     <SvgIcon
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       ref={ref}
@@ -32,14 +31,14 @@ export const AlertCircleFilledIcon = forwardRef<
     >
       <>
         <path
-          fill="currentColor"
           fillRule="evenodd"
-          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 9a.5.5 0 0 1-.5-.5V4h1v4.5A.5.5 0 0 1 8 9Zm0 3a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
           clipRule="evenodd"
+          d="M17 15.586V5h-2v10.586l-2.293-2.293-1.414 1.414 3.646 3.646a1.5 1.5 0 0 0 2.122 0l3.646-3.646-1.414-1.414L17 15.586ZM6.94 5.646 3.292 9.293l1.414 1.414L7 8.414V19h2V8.414l2.293 2.293 1.414-1.414-3.646-3.647a1.5 1.5 0 0 0-2.122 0Z"
+          fill="currentColor"
         />
       </>
     </SvgIcon>
   );
 });
 
-AlertCircleFilledIcon.displayName = "AlertCircleFilledIcon";
+ArrowUnsortedIcon.displayName = "ArrowUnsortedIcon";