@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/labs/AppTile.js

@@ -0,0 +1,258 @@
+import _Skeleton from "@mui/material/Skeleton";
+import _CardActionArea from "@mui/material/CardActionArea";
+import _Card from "@mui/material/Card";
+/*!
+ * Copyright (c) 2024-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 styled from "@emotion/styled";
+import { memo, useMemo } from "react";
+import { Box } from ".././Box.js";
+import { useOdysseyDesignTokens } from ".././OdysseyDesignTokensContext.js";
+import { Heading5, Paragraph, Subordinate } from ".././Typography.js";
+import { Button } from "../Buttons/Button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const APP_TILE_COMPACT_IMAGE_HEIGHT = "2.85714286rem";
+export const APP_TILE_IMAGE_HEIGHT = "4.57142857rem";
+export const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "4.57142857rem";
+export const appTileVariantValues = ["comfortable", "compact"];
+const ImageContainerStyles = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: variant === "compact" ? "center" : "flex-start",
+  maxHeight: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
+  marginBlockEnd: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing3,
+  ["img"]: {
+    height: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
+    width: variant === "compact" ? "100%" : "auto",
+    maxWidth: "100%"
+  }
+}));
+const ActionContainerStyles = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant = "comfortable"
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  minHeight: odysseyDesignTokens.Spacing6,
+  position: "absolute",
+  right: variant === "compact" ? 0 : odysseyDesignTokens.Spacing2,
+  top: variant === "compact" ? 0 : odysseyDesignTokens.Spacing2,
+  gap: odysseyDesignTokens.Spacing1,
+  zIndex: 1,
+  ["& > .MuiTypography-root:last-child"]: {
+    marginInlineEnd: odysseyDesignTokens.Spacing2
+  }
+}));
+const ContentContainerStyles = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasTopSection" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  hasTopSection,
+  variant
+}) => ({
+  alignItems: "flex-start",
+  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,
+  height: "100%",
+  [".MuiTypography-root"]: {
+    fontSize: variant === "compact" ? odysseyDesignTokens.TypographySizeSubordinate : "auto",
+    textAlign: variant === "compact" ? "center" : "left"
+  },
+  ["& :last-child"]: {
+    marginBlockEnd: "0 !important"
+  }
+}));
+const ChildrenContainerStyles = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  ["&:not(:first-child)"]: {
+    marginBlockStart: odysseyDesignTokens.Spacing4
+  }
+}));
+const StyledMuiCardStyles = styled(_Card, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isPlaceholder" && prop !== "isCompact"
+})(({
+  odysseyDesignTokens,
+  isPlaceholder = false,
+  isCompact = false
+}) => ({
+  position: "relative",
+  boxShadow: "none",
+  overflow: "unset",
+  display: "flex",
+  justifyContent: isPlaceholder && isCompact ? "center" : "flex-start",
+  padding: odysseyDesignTokens.Spacing4,
+  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.HueNeutral200} ${odysseyDesignTokens.BorderStyleMain}`,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `border ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  "&::after": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    boxShadow: odysseyDesignTokens.DepthMedium,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+    zIndex: "-1",
+    content: '""'
+  },
+  "&:hover": {
+    borderColor: "transparent",
+    "&::after": {
+      opacity: 1
+    }
+  }
+}));
+const StyledMuiCardActionAreaStyles = styled(_CardActionArea, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  margin: `-${odysseyDesignTokens.Spacing4}`,
+  padding: odysseyDesignTokens.Spacing4
+}));
+const LoadingTile = ({
+  image,
+  title,
+  description,
+  children,
+  hasTopSection,
+  variant
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(StyledMuiCardStyles, {
+    isCompact: variant === "compact",
+    isPlaceholder: true,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: _jsxs(ContentContainerStyles, {
+      hasTopSection: hasTopSection,
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [hasTopSection && _jsx(ActionContainerStyles, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        variant: variant,
+        children: _jsx(Subordinate, {
+          children: variant !== "compact" && _jsx(_Skeleton, {
+            width: 50
+          })
+        })
+      }), _jsxs(Box, {
+        sx: {
+          width: "100%"
+        },
+        children: [image && _jsx(ImageContainerStyles, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          variant: variant,
+          children: _jsx(_Skeleton, {
+            height: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
+            variant: "rectangular",
+            width: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_PLACEHOLDER_IMAGE_WIDTH
+          })
+        }), title && _jsx(Heading5, {
+          children: _jsx(_Skeleton, {})
+        }), description && variant !== "compact" && _jsx(Paragraph, {
+          children: _jsx(_Skeleton, {})
+        }), children && _jsx(ChildrenContainerStyles, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: _jsx(_Skeleton, {
+            height: odysseyDesignTokens.Spacing6,
+            variant: "rounded",
+            width: "100%"
+          })
+        })]
+      })]
+    })
+  });
+};
+const AppTile = ({
+  actionAriaControls,
+  actionAriaHasPopup,
+  actionAriaExpanded,
+  actionLabel,
+  actionIcon,
+  auxiliaryText,
+  children,
+  description,
+  image,
+  isLoading,
+  onActionClick,
+  onClick,
+  title,
+  variant = "comfortable"
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const tileContent = useMemo(() => _jsxs(ContentContainerStyles, {
+    hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
+    odysseyDesignTokens: odysseyDesignTokens,
+    variant: variant,
+    children: [image && _jsx(ImageContainerStyles, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: image
+    }), title && _jsx(Heading5, {
+      component: "div",
+      children: title
+    }), description && variant !== "compact" && _jsx(Paragraph, {
+      color: "textSecondary",
+      children: description
+    }), children && _jsx(ChildrenContainerStyles, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: children
+    })]
+  }), [auxiliaryText, children, description, image, odysseyDesignTokens, onActionClick, title, variant]);
+  return isLoading ? _jsx(LoadingTile, {
+    children: Boolean(children),
+    description: Boolean(description),
+    hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
+    image: Boolean(image),
+    title: Boolean(title),
+    variant: variant
+  }) : _jsxs(StyledMuiCardStyles, {
+    isCompact: variant === "compact",
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [(onActionClick || auxiliaryText) && _jsxs(ActionContainerStyles, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [auxiliaryText && !isLoading && _jsx(Subordinate, {
+        children: auxiliaryText
+      }), onActionClick && !isLoading && _jsx(Button, {
+        ariaControls: actionAriaControls,
+        ariaExpanded: actionAriaExpanded,
+        ariaHasPopup: actionAriaHasPopup,
+        ariaLabel: actionLabel,
+        endIcon: actionIcon,
+        onClick: onActionClick,
+        size: "small",
+        tooltipText: actionLabel,
+        variant: "floating"
+      })]
+    }), _jsx(StyledMuiCardActionAreaStyles, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      children: tileContent
+    })]
+  });
+};
+const MemoizedAppTile = memo(AppTile);
+MemoizedAppTile.displayName = "AppTile";
+export { MemoizedAppTile as AppTile };
+//# sourceMappingURL=AppTile.js.map

package/dist/esm/labs/AppTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTile.js","names":["styled","memo","useMemo","Box","useOdysseyDesignTokens","Heading5","Paragraph","Subordinate","Button","jsx","_jsx","jsxs","_jsxs","APP_TILE_COMPACT_IMAGE_HEIGHT","APP_TILE_IMAGE_HEIGHT","APP_TILE_PLACEHOLDER_IMAGE_WIDTH","appTileVariantValues","ImageContainerStyles","shouldForwardProp","prop","odysseyDesignTokens","variant","display","alignItems","justifyContent","maxHeight","marginBlockEnd","Spacing4","Spacing3","height","width","maxWidth","ActionContainerStyles","minHeight","Spacing6","position","right","Spacing2","top","gap","Spacing1","zIndex","marginInlineEnd","ContentContainerStyles","hasTopSection","paddingBlockStart","fontSize","TypographySizeSubordinate","textAlign","ChildrenContainerStyles","marginBlockStart","StyledMuiCardStyles","_Card","isPlaceholder","isCompact","boxShadow","overflow","padding","border","BorderWidthMain","HueNeutral200","BorderStyleMain","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","TransitionTimingMain","left","opacity","DepthMedium","content","borderColor","StyledMuiCardActionAreaStyles","_CardActionArea","margin","LoadingTile","image","title","description","children","_Skeleton","sx","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","isLoading","onActionClick","onClick","tileContent","Boolean","component","color","ariaControls","ariaExpanded","ariaHasPopup","ariaLabel","endIcon","size","tooltipText","MemoizedAppTile","displayName"],"sources":["../../../src/labs/AppTile.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n  Skeleton as MuiSkeleton,\n} from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\n\nimport { Box } from \".././Box.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \".././OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Subordinate } from \".././Typography.js\";\nimport { Button } from \"../Buttons/Button.js\";\n\nexport const APP_TILE_COMPACT_IMAGE_HEIGHT = \"2.85714286rem\"; // 40px\nexport const APP_TILE_IMAGE_HEIGHT = \"4.57142857rem\"; // 64px\nexport const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = \"4.57142857rem\"; // 64px\n\nexport const appTileVariantValues = [\"comfortable\", \"compact\"] as const;\n\nexport type AppTileProps = {\n  // Text that appears in the upper right corner of the tile\n  auxiliaryText?: string;\n  // Arbitrary content to render underneath any other tile content\n  children?: ReactNode;\n  // A string description\n  description?: string;\n  // An image or icon at the top of the tile\n  image?: ReactElement;\n  // If true, the AppTile is loading\n  isLoading?: boolean;\n  // Event handler for when the user clicks the tile\n  onClick: MouseEventHandler;\n  // A string for the tile title\n  title?: string;\n  // Whether the tile is comfortable or compact\n  variant?: (typeof appTileVariantValues)[number];\n} & (\n  | {\n      // The ID of the element which the button controls (for instance, a drawer or dialog), if any.\n      actionAriaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n      // Should be true if the button controls a popup element that is currently expanded. Should be synced to\n      // the state of the popup element\n      actionAriaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n      // Should be filled if the button controls a popup element such as a Drawer or Dialog\n      actionAriaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n      // An icon for the action button\n      actionIcon: ReactElement;\n      // The label for the button, used as the aria-label and tooltip\n      actionLabel: string;\n      // Event that fires when the user clicks the action button in the upper-right corner\n      // If this isn't set, the other action props can't be set either\n      onActionClick: MouseEventHandler;\n    }\n  | {\n      actionAriaControls?: never;\n      actionAriaExpanded?: never;\n      actionAriaHasPopup?: never;\n      actionIcon?: never;\n      actionLabel?: never;\n      onActionClick?: never;\n    }\n);\n\ntype LoadingTileProps = {\n  children: boolean;\n  description: boolean;\n  hasTopSection: boolean;\n  image: boolean;\n  title: boolean;\n  variant: AppTileProps[\"variant\"];\n};\n\nconst ImageContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: AppTileProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: variant === \"compact\" ? \"center\" : \"flex-start\",\n  maxHeight:\n    variant === \"compact\"\n      ? APP_TILE_COMPACT_IMAGE_HEIGHT\n      : APP_TILE_IMAGE_HEIGHT,\n  marginBlockEnd:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing3,\n\n  [\"img\"]: {\n    height:\n      variant === \"compact\"\n        ? APP_TILE_COMPACT_IMAGE_HEIGHT\n        : APP_TILE_IMAGE_HEIGHT,\n    width: variant === \"compact\" ? \"100%\" : \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst ActionContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{ odysseyDesignTokens: DesignTokens; variant: AppTileProps[\"variant\"] }>(\n  ({ odysseyDesignTokens, variant = \"comfortable\" }) => ({\n    alignItems: \"center\",\n    display: \"flex\",\n    minHeight: odysseyDesignTokens.Spacing6,\n    position: \"absolute\",\n    right: variant === \"compact\" ? 0 : odysseyDesignTokens.Spacing2,\n    top: variant === \"compact\" ? 0 : odysseyDesignTokens.Spacing2,\n    gap: odysseyDesignTokens.Spacing1,\n    zIndex: 1,\n\n    [\"& > .MuiTypography-root:last-child\"]: {\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n    },\n  }),\n);\n\nconst ContentContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasTopSection\" &&\n    prop !== \"variant\",\n})<{\n  hasTopSection: boolean;\n  odysseyDesignTokens: DesignTokens;\n  variant: AppTileProps[\"variant\"];\n}>(({ odysseyDesignTokens, hasTopSection, variant }) => ({\n  alignItems: \"flex-start\",\n  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,\n  height: \"100%\",\n\n  [\".MuiTypography-root\"]: {\n    fontSize:\n      variant === \"compact\"\n        ? odysseyDesignTokens.TypographySizeSubordinate\n        : \"auto\",\n    textAlign: variant === \"compact\" ? \"center\" : \"left\",\n  },\n\n  [\"& :last-child\"]: {\n    marginBlockEnd: \"0 !important\",\n  },\n}));\n\nconst ChildrenContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst StyledMuiCardStyles = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isPlaceholder\" &&\n    prop !== \"isCompact\",\n})<{\n  isCompact: boolean;\n  isPlaceholder?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isPlaceholder = false, isCompact = false }) => ({\n  position: \"relative\",\n  boxShadow: \"none\",\n  overflow: \"unset\",\n  display: \"flex\",\n  justifyContent: isPlaceholder && isCompact ? \"center\" : \"flex-start\",\n  padding: odysseyDesignTokens.Spacing4,\n  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.HueNeutral200} ${odysseyDesignTokens.BorderStyleMain}`,\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `border ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n  \"&::after\": {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n    boxShadow: odysseyDesignTokens.DepthMedium,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    zIndex: \"-1\",\n    content: '\"\"',\n  },\n\n  \"&:hover\": {\n    borderColor: \"transparent\",\n\n    \"&::after\": {\n      opacity: 1,\n    },\n  },\n}));\n\nconst StyledMuiCardActionAreaStyles = styled(MuiCardActionArea, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  margin: `-${odysseyDesignTokens.Spacing4}`,\n  padding: odysseyDesignTokens.Spacing4,\n}));\n\nconst LoadingTile = ({\n  image,\n  title,\n  description,\n  children,\n  hasTopSection,\n  variant,\n}: LoadingTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledMuiCardStyles\n      isCompact={variant === \"compact\"}\n      isPlaceholder\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <ContentContainerStyles\n        hasTopSection={hasTopSection}\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {hasTopSection && (\n          <ActionContainerStyles\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <Subordinate>\n              {variant !== \"compact\" && <MuiSkeleton width={50} />}\n            </Subordinate>\n          </ActionContainerStyles>\n        )}\n        <Box sx={{ width: \"100%\" }}>\n          {image && (\n            <ImageContainerStyles\n              odysseyDesignTokens={odysseyDesignTokens}\n              variant={variant}\n            >\n              <MuiSkeleton\n                height={\n                  variant === \"compact\"\n                    ? APP_TILE_COMPACT_IMAGE_HEIGHT\n                    : APP_TILE_IMAGE_HEIGHT\n                }\n                variant=\"rectangular\"\n                width={\n                  variant === \"compact\"\n                    ? APP_TILE_COMPACT_IMAGE_HEIGHT\n                    : APP_TILE_PLACEHOLDER_IMAGE_WIDTH\n                }\n              />\n            </ImageContainerStyles>\n          )}\n\n          {title && (\n            <Heading5>\n              <MuiSkeleton />\n            </Heading5>\n          )}\n          {description && variant !== \"compact\" && (\n            <Paragraph>\n              <MuiSkeleton />\n            </Paragraph>\n          )}\n          {children && (\n            <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton\n                height={odysseyDesignTokens.Spacing6}\n                variant=\"rounded\"\n                width=\"100%\"\n              />\n            </ChildrenContainerStyles>\n          )}\n        </Box>\n      </ContentContainerStyles>\n    </StyledMuiCardStyles>\n  );\n};\n\nconst AppTile = ({\n  actionAriaControls,\n  actionAriaHasPopup,\n  actionAriaExpanded,\n  actionLabel,\n  actionIcon,\n  auxiliaryText,\n  children,\n  description,\n  image,\n  isLoading,\n  onActionClick,\n  onClick,\n  title,\n  variant = \"comfortable\",\n}: AppTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const tileContent = useMemo(\n    () => (\n      <ContentContainerStyles\n        hasTopSection={\n          typeof onActionClick === \"function\" || Boolean(auxiliaryText)\n        }\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {image && (\n          <ImageContainerStyles\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {image}\n          </ImageContainerStyles>\n        )}\n\n        {title && <Heading5 component=\"div\">{title}</Heading5>}\n        {description && variant !== \"compact\" && (\n          <Paragraph color=\"textSecondary\">{description}</Paragraph>\n        )}\n\n        {children && (\n          <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>\n            {children}\n          </ChildrenContainerStyles>\n        )}\n      </ContentContainerStyles>\n    ),\n    [\n      auxiliaryText,\n      children,\n      description,\n      image,\n      odysseyDesignTokens,\n      onActionClick,\n      title,\n      variant,\n    ],\n  );\n\n  return isLoading ? (\n    <LoadingTile\n      children={Boolean(children)}\n      description={Boolean(description)}\n      hasTopSection={\n        typeof onActionClick === \"function\" || Boolean(auxiliaryText)\n      }\n      image={Boolean(image)}\n      title={Boolean(title)}\n      variant={variant}\n    />\n  ) : (\n    <StyledMuiCardStyles\n      isCompact={variant === \"compact\"}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {(onActionClick || auxiliaryText) && (\n        <ActionContainerStyles\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {auxiliaryText && !isLoading && (\n            <Subordinate>{auxiliaryText}</Subordinate>\n          )}\n\n          {onActionClick && !isLoading && (\n            <Button\n              ariaControls={actionAriaControls}\n              ariaExpanded={actionAriaExpanded}\n              ariaHasPopup={actionAriaHasPopup}\n              ariaLabel={actionLabel}\n              endIcon={actionIcon}\n              onClick={onActionClick}\n              size=\"small\"\n              tooltipText={actionLabel}\n              variant=\"floating\"\n            />\n          )}\n        </ActionContainerStyles>\n      )}\n\n      <StyledMuiCardActionAreaStyles\n        odysseyDesignTokens={odysseyDesignTokens}\n        onClick={onClick}\n      >\n        {tileContent}\n      </StyledMuiCardActionAreaStyles>\n    </StyledMuiCardStyles>\n  );\n};\n\nconst MemoizedAppTile = memo(AppTile);\nMemoizedAppTile.displayName = \"AppTile\";\n\nexport { MemoizedAppTile as AppTile };\n"],"mappings":"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","ignoreList":[]}