@okta/odyssey-contribution-tooling 1.47.0

package/dist/cjs/Card.cjs

@@ -0,0 +1,341 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cardVariantValues = exports.Card = exports.CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE = void 0;
+var _CardActions2 = _interopRequireWildcard(require("@mui/material/CardActions"));
+var _Skeleton2 = _interopRequireWildcard(require("@mui/material/Skeleton"));
+var _CardActionArea2 = _interopRequireDefault(require("@mui/material/CardActionArea"));
+var _Card2 = _interopRequireDefault(require("@mui/material/Card"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = require("@mui/material/Typography");
+var _react = require("react");
+var _ButtonContext = require("./Buttons/ButtonContext.cjs");
+var _MenuButton = require("./Buttons/MenuButton.cjs");
+var _i18n = require("./i18n.generated/i18n.cjs");
+var _More = require("./icons.generated/More.cjs");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _Typography2 = require("./Typography.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+const cardVariantValues = exports.cardVariantValues = ["tile", "stack", "compact"];
+const CARD_IMAGE_SIZE = exports.CARD_IMAGE_SIZE = "64px";
+const CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE_COMPACT = "48px";
+const StyledCard = (0, _styled.default)(_Card2.default, {
+  shouldForwardProp: prop => prop !== "cardVariant" && prop !== "isClickable" && prop !== "odysseyDesignTokens"
+})(({
+  cardVariant,
+  isClickable,
+  odysseyDesignTokens
+}) => ({
+  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderColorDisplay} ${odysseyDesignTokens.BorderStyleMain}`,
+  boxShadow: "none",
+  padding: 0,
+  display: "flex",
+  ...(cardVariant === "compact" && {
+    marginBlockEnd: odysseyDesignTokens.Spacing2
+  }),
+  ["&:hover"]: isClickable ? {
+    borderColor: odysseyDesignTokens.HueNeutralWhite,
+    boxShadow: odysseyDesignTokens.DepthMedium
+  } : {},
+  [`& .${_Skeleton2.skeletonClasses.root}`]: {
+    transform: "none"
+  },
+  [`& .${_CardActions2.cardActionsClasses.root} .${_Skeleton2.skeletonClasses.root}`]: {
+    height: odysseyDesignTokens.Spacing7
+  }
+}));
+const StyledCardActionArea = (0, _styled.default)(_CardActionArea2.default)(() => ({
+  margin: 0,
+  padding: 0
+}));
+const AccessoriesContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  display: "flex",
+  flexDirection: variant === "compact" ? "row" : "column",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing1,
+  marginBlockStart: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing5,
+  marginInlineStart: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing4,
+  marginInlineEnd: `-${odysseyDesignTokens.Spacing2}`,
+  height: variant === "compact" ? odysseyDesignTokens.Spacing8 : "auto",
+  [`& .${_Skeleton2.skeletonClasses.root}`]: {
+    width: odysseyDesignTokens.Spacing5,
+    height: odysseyDesignTokens.Spacing5
+  }
+}));
+const InnerContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "hasDetailPanel" && prop !== "numberOfChildNodes" && prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  hasDetailPanel,
+  numberOfChildNodes = 0,
+  odysseyDesignTokens,
+  variant
+}) => ({
+  alignItems: variant === "compact" && !hasDetailPanel && numberOfChildNodes <= 2 ? "center" : "flex-start",
+  display: "flex",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  padding: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing5,
+  flexDirection: variant === "tile" ? "column" : "row",
+  gap: odysseyDesignTokens.Spacing4,
+  width: "100%"
+}));
+const ImageContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant" && prop !== "hasMenuButton"
+})(({
+  odysseyDesignTokens,
+  variant,
+  hasMenuButton
+}) => ({
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  paddingInlineEnd: variant === "tile" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,
+  [`& > .${_Skeleton2.skeletonClasses.root}`]: {
+    height: "100%",
+    aspectRatio: 1
+  }
+}));
+const ContentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4,
+  width: "100%",
+  "& > *": {
+    marginBlock: 0
+  },
+  [`& .${_Skeleton2.skeletonClasses.root} + .${_Skeleton2.skeletonClasses.root}`]: {
+    marginBlockStart: odysseyDesignTokens.Spacing1
+  }
+}));
+const UpperContentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant" && prop !== "hasMenuButton"
+})(({
+  odysseyDesignTokens,
+  variant,
+  hasMenuButton
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing4,
+  paddingInlineEnd: variant !== "tile" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,
+  [`& > .${_Typography.typographyClasses.root}`]: {
+    marginBlockEnd: 0
+  }
+}));
+const OverlineTitleContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing1,
+  [`& > .${_Typography.typographyClasses.root}`]: {
+    marginBlockEnd: 0
+  }
+}));
+const Content = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite
+}));
+const MenuButtonContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing2,
+  top: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing2,
+  height: variant === "compact" ? odysseyDesignTokens.Spacing8 : "auto",
+  display: "flex",
+  alignItems: "center",
+  [`& .${_Skeleton2.skeletonClasses.root}`]: {
+    width: odysseyDesignTokens.Spacing5,
+    height: odysseyDesignTokens.Spacing5,
+    margin: odysseyDesignTokens.Spacing1
+  }
+}));
+const getNumberOfDefinedReactNodes = props => _react.Children.toArray(props).length;
+const Card = ({
+  children,
+  description,
+  detailPanel,
+  image,
+  isLoading,
+  overline,
+  title,
+  titleId,
+  variant,
+  accessory,
+  button,
+  menuButtonChildren,
+  onClick,
+  __role: role
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const loadingContent = (0, _react.useMemo)(() => (0, _jsxRuntime.jsxs)(InnerContainer, {
+    numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
+    odysseyDesignTokens: odysseyDesignTokens,
+    variant: variant,
+    children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
+      hasMenuButton: Boolean(menuButtonChildren),
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+        variant: "circular"
+      })
+    }), (0, _jsxRuntime.jsxs)(ContentContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(0, _jsxRuntime.jsxs)(UpperContentContainer, {
+        hasMenuButton: Boolean(menuButtonChildren),
+        odysseyDesignTokens: odysseyDesignTokens,
+        variant: variant,
+        children: [(0, _jsxRuntime.jsxs)(OverlineTitleContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [overline && (0, _jsxRuntime.jsx)(_Typography2.Support, {
+            children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+              width: "50%"
+            })
+          }), title && (0, _jsxRuntime.jsx)(_Typography2.Typography, {
+            component: "div",
+            variant: variant === "tile" ? "h4" : "h5",
+            children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+              width: "33%"
+            })
+          })]
+        }), description && (0, _jsxRuntime.jsxs)(_Typography2.Paragraph, {
+          children: [(0, _jsxRuntime.jsx)(_Skeleton2.default, {
+            width: "100%"
+          }), (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+            width: "50%"
+          })]
+        })]
+      }), children && (0, _jsxRuntime.jsx)(Content, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+          width: "50%"
+        })
+      }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
+        children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+          variant: "rounded",
+          width: "100%"
+        })
+      })]
+    })]
+  }), [button, children, description, image, menuButtonChildren, odysseyDesignTokens, overline, title, variant]);
+  const cardContent = (0, _react.useMemo)(() => {
+    const buttonProviderValue = {
+      isFullWidth: true
+    };
+    return (0, _jsxRuntime.jsxs)(InnerContainer, {
+      hasDetailPanel: Boolean(detailPanel),
+      numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
+        hasMenuButton: Boolean(menuButtonChildren),
+        odysseyDesignTokens: odysseyDesignTokens,
+        variant: variant,
+        children: image
+      }), (0, _jsxRuntime.jsxs)(ContentContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [(0, _jsxRuntime.jsxs)(UpperContentContainer, {
+          hasMenuButton: Boolean(menuButtonChildren),
+          odysseyDesignTokens: odysseyDesignTokens,
+          variant: variant,
+          children: [(0, _jsxRuntime.jsxs)(OverlineTitleContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: [overline && (0, _jsxRuntime.jsx)(_Typography2.Support, {
+              component: "div",
+              children: overline
+            }), title && (0, _jsxRuntime.jsx)(_Typography2.Typography, {
+              component: "div",
+              id: titleId,
+              variant: variant === "tile" ? "h4" : "h5",
+              children: title
+            })]
+          }), description && (0, _jsxRuntime.jsx)(_Typography2.Paragraph, {
+            color: "textSecondary",
+            children: description
+          })]
+        }), children && (0, _jsxRuntime.jsx)(Content, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: children
+        }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
+          children: (0, _jsxRuntime.jsx)(_ButtonContext.ButtonContext.Provider, {
+            value: buttonProviderValue,
+            children: button
+          })
+        }), detailPanel && (0, _jsxRuntime.jsx)(Content, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: detailPanel
+        })]
+      })]
+    });
+  }, [button, children, description, detailPanel, image, menuButtonChildren, odysseyDesignTokens, overline, title, titleId, variant]);
+  return (0, _jsxRuntime.jsxs)(StyledCard, {
+    cardVariant: variant,
+    isClickable: Boolean(onClick),
+    odysseyDesignTokens: odysseyDesignTokens,
+    role: role,
+    children: [Boolean(accessory) && (0, _jsxRuntime.jsx)(AccessoriesContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: isLoading ? (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+        variant: "circular"
+      }) : accessory
+    }), isLoading ? loadingContent : onClick ? (0, _jsxRuntime.jsx)(StyledCardActionArea, {
+      onClick: onClick,
+      children: cardContent
+    }) : cardContent, menuButtonChildren && (0, _jsxRuntime.jsx)(MenuButtonContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: isLoading ? (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+        variant: "circular"
+      }) : (0, _jsxRuntime.jsx)(_MenuButton.MenuButton, {
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "floating",
+        endIcon: (0, _jsxRuntime.jsx)(_More.MoreIcon, {}),
+        menuAlignment: "right",
+        size: "small",
+        tooltipText: t("table.actions"),
+        children: menuButtonChildren
+      })
+    })]
+  });
+};
+const MemoizedCard = exports.Card = (0, _react.memo)(Card);
+MemoizedCard.displayName = "Card";
+//# sourceMappingURL=Card.cjs.map

package/dist/cjs/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.cjs","names":["_CardActions2","_interopRequireWildcard","require","_Skeleton2","_CardActionArea2","_interopRequireDefault","_Card2","_styled","_Typography","_react","_ButtonContext","_MenuButton","_i18n","_More","_OdysseyDesignTokensContext","_Typography2","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","cardVariantValues","exports","CARD_IMAGE_SIZE","CARD_IMAGE_SIZE_COMPACT","StyledCard","styled","shouldForwardProp","prop","cardVariant","isClickable","odysseyDesignTokens","border","BorderWidthMain","BorderColorDisplay","BorderStyleMain","boxShadow","padding","display","marginBlockEnd","Spacing2","borderColor","HueNeutralWhite","DepthMedium","skeletonClasses","root","transform","cardActionsClasses","height","Spacing7","StyledCardActionArea","margin","AccessoriesContainer","variant","flexDirection","alignItems","gap","Spacing1","marginBlockStart","Spacing4","Spacing5","marginInlineStart","marginInlineEnd","Spacing8","width","InnerContainer","hasDetailPanel","numberOfChildNodes","backgroundColor","ImageContainer","hasMenuButton","paddingInlineEnd","aspectRatio","ContentContainer","marginBlock","UpperContentContainer","typographyClasses","OverlineTitleContainer","Content","MenuButtonContainer","position","right","top","getNumberOfDefinedReactNodes","props","Children","toArray","length","Card","children","description","detailPanel","image","isLoading","overline","title","titleId","accessory","button","menuButtonChildren","onClick","__role","role","useOdysseyDesignTokens","useTranslation","loadingContent","useMemo","jsxs","jsx","Boolean","Support","Typography","component","Paragraph","cardContent","buttonProviderValue","isFullWidth","id","color","ButtonContext","Provider","value","MenuButton","ariaLabel","buttonVariant","endIcon","MoreIcon","menuAlignment","size","tooltipText","MemoizedCard","memo","displayName"],"sources":["../../src/Card.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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  CardActions as MuiCardActions,\n  Skeleton as MuiSkeleton,\n} from \"@mui/material\";\nimport { cardActionsClasses } from \"@mui/material/CardActions\";\nimport { skeletonClasses } from \"@mui/material/Skeleton\";\nimport { typographyClasses } from \"@mui/material/Typography\";\nimport {\n  AriaRole,\n  Children,\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\n\nimport { Button } from \"./Buttons/Button.js\";\nimport { ButtonContext } from \"./Buttons/ButtonContext.js\";\nimport { MenuButton, MenuButtonProps } from \"./Buttons/MenuButton.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { MoreIcon } from \"./icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Paragraph, Support, Typography } from \"./Typography.js\";\n\nexport const cardVariantValues = [\"tile\", \"stack\", \"compact\"] as const;\n\nexport const CARD_IMAGE_SIZE = \"64px\";\nexport const CARD_IMAGE_SIZE_COMPACT = \"48px\";\n\nexport type CardProps = {\n  /** @experimental: Temporary internal property, do not use. */\n  __role?: AriaRole;\n  children?: ReactNode;\n  description?: string;\n  detailPanel?: ReactNode;\n  image?: ReactElement;\n  isLoading?: boolean;\n  overline?: string;\n  title?: string;\n  titleId?: string;\n  variant?: (typeof cardVariantValues)[number];\n} & (\n  | {\n      accessory?: ReactNode;\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      accessory?: ReactNode;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\nconst StyledCard = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== \"cardVariant\" &&\n    prop !== \"isClickable\" &&\n    prop !== \"odysseyDesignTokens\",\n})<{\n  cardVariant: CardProps[\"variant\"];\n  isClickable: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ cardVariant, isClickable, odysseyDesignTokens }) => ({\n  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderColorDisplay} ${odysseyDesignTokens.BorderStyleMain}`,\n  boxShadow: \"none\",\n  padding: 0,\n  display: \"flex\",\n\n  ...(cardVariant === \"compact\" && {\n    marginBlockEnd: odysseyDesignTokens.Spacing2,\n  }),\n\n  [\"&:hover\"]: isClickable\n    ? {\n        borderColor: odysseyDesignTokens.HueNeutralWhite,\n        boxShadow: odysseyDesignTokens.DepthMedium,\n      }\n    : {},\n\n  [`& .${skeletonClasses.root}`]: {\n    transform: \"none\",\n  },\n\n  [`& .${cardActionsClasses.root} .${skeletonClasses.root}`]: {\n    height: odysseyDesignTokens.Spacing7,\n  },\n}));\n\nconst StyledCardActionArea = styled(MuiCardActionArea)(() => ({\n  margin: 0,\n  padding: 0,\n}));\n\nconst AccessoriesContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"compact\" ? \"row\" : \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing1,\n  marginBlockStart:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing5,\n  marginInlineStart:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing4,\n  marginInlineEnd: `-${odysseyDesignTokens.Spacing2}`,\n  height: variant === \"compact\" ? odysseyDesignTokens.Spacing8 : \"auto\",\n\n  [`& .${skeletonClasses.root}`]: {\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n  },\n}));\n\nconst InnerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"hasDetailPanel\" &&\n    prop !== \"numberOfChildNodes\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"variant\",\n})<{\n  hasDetailPanel?: boolean;\n  numberOfChildNodes?: number;\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(\n  ({\n    hasDetailPanel,\n    numberOfChildNodes = 0,\n    odysseyDesignTokens,\n    variant,\n  }) => ({\n    alignItems:\n      variant === \"compact\" && !hasDetailPanel && numberOfChildNodes <= 2\n        ? \"center\"\n        : \"flex-start\",\n    display: \"flex\",\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    padding:\n      variant === \"compact\"\n        ? odysseyDesignTokens.Spacing4\n        : odysseyDesignTokens.Spacing5,\n    flexDirection: variant === \"tile\" ? \"column\" : \"row\",\n    gap: odysseyDesignTokens.Spacing4,\n    width: \"100%\",\n  }),\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"variant\" &&\n    prop !== \"hasMenuButton\",\n})<{\n  hasMenuButton: boolean;\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant, hasMenuButton }) => ({\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  paddingInlineEnd:\n    variant === \"tile\" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,\n  [`& > .${skeletonClasses.root}`]: {\n    height: \"100%\",\n    aspectRatio: 1,\n  },\n}));\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n  width: \"100%\",\n\n  \"& > *\": {\n    marginBlock: 0,\n  },\n\n  [`& .${skeletonClasses.root} + .${skeletonClasses.root}`]: {\n    marginBlockStart: odysseyDesignTokens.Spacing1,\n  },\n}));\n\nconst UpperContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"variant\" &&\n    prop !== \"hasMenuButton\",\n})<{\n  hasMenuButton: boolean;\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant, hasMenuButton }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing1\n      : odysseyDesignTokens.Spacing4,\n  paddingInlineEnd:\n    variant !== \"tile\" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,\n\n  [`& > .${typographyClasses.root}`]: {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst OverlineTitleContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing1,\n\n  [`& > .${typographyClasses.root}`]: {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst Content = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"flex-start\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing2,\n  top:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing2,\n  height: variant === \"compact\" ? odysseyDesignTokens.Spacing8 : \"auto\",\n  display: \"flex\",\n  alignItems: \"center\",\n\n  [`& .${skeletonClasses.root}`]: {\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n    margin: odysseyDesignTokens.Spacing1,\n  },\n}));\n\nconst getNumberOfDefinedReactNodes = (props: Array<ReactNode>) =>\n  Children.toArray(props).length;\n\nconst Card = ({\n  children,\n  description,\n  detailPanel,\n  image,\n  isLoading,\n  overline,\n  title,\n  titleId,\n  variant,\n  accessory,\n  button,\n  menuButtonChildren,\n  onClick,\n  __role: role,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const loadingContent = useMemo(\n    () => (\n      <InnerContainer\n        numberOfChildNodes={getNumberOfDefinedReactNodes([\n          button,\n          children,\n          description,\n          overline,\n          title,\n        ])}\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {image && (\n          <ImageContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <MuiSkeleton variant=\"circular\" />\n          </ImageContainer>\n        )}\n\n        <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <UpperContentContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <OverlineTitleContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {overline && (\n                <Support>\n                  <MuiSkeleton width=\"50%\" />\n                </Support>\n              )}\n\n              {title && (\n                <Typography\n                  component=\"div\"\n                  variant={variant === \"tile\" ? \"h4\" : \"h5\"}\n                >\n                  <MuiSkeleton width=\"33%\" />\n                </Typography>\n              )}\n            </OverlineTitleContainer>\n\n            {description && (\n              <Paragraph>\n                <MuiSkeleton width=\"100%\" />\n                <MuiSkeleton width=\"50%\" />\n              </Paragraph>\n            )}\n          </UpperContentContainer>\n\n          {children && (\n            <Content odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton width=\"50%\" />\n            </Content>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <MuiSkeleton variant=\"rounded\" width=\"100%\" />\n            </MuiCardActions>\n          )}\n        </ContentContainer>\n      </InnerContainer>\n    ),\n    [\n      button,\n      children,\n      description,\n      image,\n      menuButtonChildren,\n      odysseyDesignTokens,\n      overline,\n      title,\n      variant,\n    ],\n  );\n\n  const cardContent = useMemo(() => {\n    const buttonProviderValue = { isFullWidth: true };\n    return (\n      <InnerContainer\n        hasDetailPanel={Boolean(detailPanel)}\n        numberOfChildNodes={getNumberOfDefinedReactNodes([\n          button,\n          children,\n          description,\n          overline,\n          title,\n        ])}\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {image && (\n          <ImageContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {image}\n          </ImageContainer>\n        )}\n\n        <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <UpperContentContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <OverlineTitleContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {overline && <Support component=\"div\">{overline}</Support>}\n\n              {title && (\n                <Typography\n                  component=\"div\"\n                  id={titleId}\n                  variant={variant === \"tile\" ? \"h4\" : \"h5\"}\n                >\n                  {title}\n                </Typography>\n              )}\n            </OverlineTitleContainer>\n\n            {description && (\n              <Paragraph color=\"textSecondary\">{description}</Paragraph>\n            )}\n          </UpperContentContainer>\n\n          {children && (\n            <Content odysseyDesignTokens={odysseyDesignTokens}>\n              {children}\n            </Content>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <ButtonContext.Provider value={buttonProviderValue}>\n                {button}\n              </ButtonContext.Provider>\n            </MuiCardActions>\n          )}\n\n          {detailPanel && (\n            <Content odysseyDesignTokens={odysseyDesignTokens}>\n              {detailPanel}\n            </Content>\n          )}\n        </ContentContainer>\n      </InnerContainer>\n    );\n  }, [\n    button,\n    children,\n    description,\n    detailPanel,\n    image,\n    menuButtonChildren,\n    odysseyDesignTokens,\n    overline,\n    title,\n    titleId,\n    variant,\n  ]);\n\n  return (\n    <StyledCard\n      cardVariant={variant}\n      isClickable={Boolean(onClick)}\n      odysseyDesignTokens={odysseyDesignTokens}\n      role={role}\n    >\n      {Boolean(accessory) && (\n        <AccessoriesContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {isLoading ? <MuiSkeleton variant=\"circular\" /> : accessory}\n        </AccessoriesContainer>\n      )}\n\n      {isLoading ? (\n        loadingContent\n      ) : onClick ? (\n        <StyledCardActionArea onClick={onClick}>\n          {cardContent}\n        </StyledCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {isLoading ? (\n            <MuiSkeleton variant=\"circular\" />\n          ) : (\n            <MenuButton\n              ariaLabel={t(\"table.moreactions.arialabel\")}\n              buttonVariant=\"floating\"\n              endIcon={<MoreIcon />}\n              menuAlignment=\"right\"\n              size=\"small\"\n              tooltipText={t(\"table.actions\")}\n            >\n              {menuButtonChildren}\n            </MenuButton>\n          )}\n        </MenuButtonContainer>\n      )}\n    </StyledCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\nexport { MemoizedCard as Card };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Checkbox.cjs

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkboxValidityValues = exports.Checkbox = void 0;
+var _FormHelperText2 = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _FormControlLabel2 = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Checkbox2 = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _i18n = require("./i18n.generated/i18n.cjs");
+var _inputUtils = require("./inputUtils.cjs");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _Typography = require("./Typography.cjs");
+var _useUniqueId = require("./useUniqueId.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+const checkboxValidityValues = exports.checkboxValidityValues = ["valid", "invalid", "inherit"];
+const HintContainerWithInlineStartSpacing = _styled.default.div(({
+  odysseyDesignTokens
+}) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,
+  marginBlockEnd: odysseyDesignTokens.Spacing2,
+  ".Mui-error": {
+    color: odysseyDesignTokens.TypographyColorSubordinate
+  }
+}));
+const Checkbox = ({
+  ariaLabel,
+  ariaLabelledBy,
+  id: idOverride,
+  inputRef,
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  isIndeterminate,
+  isReadOnly = false,
+  isRequired,
+  label: labelProp,
+  hint,
+  name: nameOverride,
+  onChange: onChangeProp,
+  onBlur: onBlurProp,
+  testId,
+  translate,
+  validity = "inherit",
+  value
+}) => {
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const id = (0, _useUniqueId.useUniqueId)(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const controlledStateRef = (0, _react.useRef)((0, _inputUtils.getControlState)({
+    controlledValue: isChecked,
+    uncontrolledValue: isDefaultChecked
+  }));
+  const inputValues = (0, _react.useMemo)(() => {
+    if (controlledStateRef.current === _inputUtils.ComponentControlledState.CONTROLLED) {
+      return {
+        checked: isChecked
+      };
+    }
+    return {
+      defaultChecked: isDefaultChecked
+    };
+  }, [isDefaultChecked, isChecked]);
+  const localInputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(inputRef, () => ({
+    focus: () => {
+      localInputRef.current?.focus();
+    }
+  }), []);
+  const label = (0, _react.useMemo)(() => {
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(_Typography.Typography, {
+        component: "span",
+        children: labelProp
+      }), isRequired && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [" ", (0, _jsxRuntime.jsxs)(_Typography.Typography, {
+          color: "textSecondary",
+          component: "span",
+          children: ["(", t("fieldlabel.required.text"), ")"]
+        })]
+      })]
+    });
+  }, [isRequired, labelProp, t]);
+  const onChange = (0, _react.useCallback)((event, checked) => {
+    onChangeProp?.(event, checked);
+  }, [onChangeProp]);
+  const onClick = (0, _react.useCallback)(event => {
+    if (isReadOnly) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [isReadOnly]);
+  const onBlur = (0, _react.useCallback)(event => {
+    onBlurProp?.(event);
+  }, [onBlurProp]);
+  const checkboxStyles = (0, _react.useMemo)(() => ({
+    alignItems: "flex-start",
+    ...(isReadOnly && {
+      cursor: "default",
+      "& .MuiTypography-root": {
+        cursor: "default"
+      }
+    }),
+    ...(hint && {
+      ":not(:last-child)": {
+        marginBlockEnd: "0"
+      }
+    })
+  }), [hint, isReadOnly]);
+  const checkboxInputStyles = (0, _react.useMemo)(() => ({
+    marginBlockStart: "2px"
+  }), []);
+  const inputProps = (0, _react.useMemo)(() => ({
+    "aria-describedby": hintId,
+    "aria-readonly": isReadOnly,
+    "data-se": testId,
+    readOnly: isReadOnly
+  }), [hintId, isReadOnly, testId]);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_FormControlLabel2.default, {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      className: validity === "invalid" ? "Mui-error" : validity === "valid" ? "Mui-valid" : "",
+      control: (0, _jsxRuntime.jsx)(_Checkbox2.default, {
+        ...inputValues,
+        disabled: isDisabled,
+        indeterminate: isIndeterminate,
+        inputProps: inputProps,
+        inputRef: localInputRef,
+        onChange: onChange,
+        onClick: onClick,
+        required: isRequired,
+        sx: checkboxInputStyles
+      }),
+      disabled: isDisabled,
+      id: idOverride,
+      label: label,
+      name: nameOverride ?? idOverride,
+      onBlur: onBlur,
+      required: isRequired,
+      sx: checkboxStyles,
+      translate: translate,
+      value: value
+    }), hint && (0, _jsxRuntime.jsx)(HintContainerWithInlineStartSpacing, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: (0, _jsxRuntime.jsx)(_FormHelperText2.default, {
+        id: hintId,
+        translate: translate,
+        children: hint
+      })
+    })]
+  });
+};
+const MemoizedCheckbox = exports.Checkbox = (0, _react.memo)(Checkbox);
+MemoizedCheckbox.displayName = "Checkbox";
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/cjs/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","names":["_styled","_interopRequireDefault","require","_react","_i18n","_inputUtils","_OdysseyDesignTokensContext","_Typography","_useUniqueId","_jsxRuntime","e","__esModule","default","checkboxValidityValues","exports","HintContainerWithInlineStartSpacing","styled","div","odysseyDesignTokens","paddingInlineStart","TypographyLineHeightUi","Spacing2","marginBlockEnd","color","TypographyColorSubordinate","Checkbox","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isReadOnly","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","useTranslation","useOdysseyDesignTokens","useUniqueId","hintId","undefined","controlledStateRef","useRef","getControlState","controlledValue","uncontrolledValue","inputValues","useMemo","current","ComponentControlledState","CONTROLLED","checked","defaultChecked","localInputRef","useImperativeHandle","focus","jsxs","Fragment","children","jsx","Typography","component","useCallback","event","onClick","stopPropagation","preventDefault","checkboxStyles","alignItems","cursor","checkboxInputStyles","marginBlockStart","inputProps","readOnly","_FormControlLabel2","className","control","_Checkbox2","disabled","indeterminate","required","sx","_FormHelperText2","MemoizedCheckbox","memo","displayName"],"sources":["../../src/Checkbox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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  FormControlLabel,\n  FormHelperText,\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabelProps as MuiFormControlLabelProps,\n} from \"@mui/material\";\nimport {\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { CheckedFieldProps } from \"./FormCheckedProps.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n} from \"./inputUtils.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nconst HintContainerWithInlineStartSpacing = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,\n  marginBlockEnd: odysseyDesignTokens.Spacing2,\n\n  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red\n  // We want to keep the hint text gray in the error state\n  \".Mui-error\": {\n    color: odysseyDesignTokens.TypographyColorSubordinate,\n  },\n}));\n\nexport type CheckboxProps = {\n  /**\n   * The ref forwarded to the Checkbox\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  Pick<HtmlProps, \"ariaLabel\" | \"ariaLabelledBy\" | \"testId\" | \"translate\">;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isReadOnly = false,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => ({\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography color=\"textSecondary\" component=\"span\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n      </>\n    );\n  }, [isRequired, labelProp, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onClick = useCallback<NonNullable<MuiCheckboxProps[\"onClick\"]>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  const checkboxStyles = useMemo(\n    () => ({\n      alignItems: \"flex-start\",\n\n      ...(isReadOnly && {\n        cursor: \"default\",\n        \"& .MuiTypography-root\": {\n          cursor: \"default\",\n        } as CSSStyleDeclaration,\n      }),\n\n      ...(hint && {\n        // needed to override specific :not(:last-child) selector\n        \":not(:last-child)\": {\n          marginBlockEnd: \"0\",\n        } as CSSStyleDeclaration,\n      }),\n    }),\n    [hint, isReadOnly],\n  );\n\n  // TODO: Is there a better way to handle these styles? Why pixels? Isn't this tying Checkbox to the label's font size? -Kevin\n  const checkboxInputStyles = useMemo(\n    () => ({\n      marginBlockStart: \"2px\",\n    }),\n    [],\n  );\n\n  const inputProps = useMemo<InputHTMLAttributes<HTMLInputElement>>(\n    () => ({\n      \"aria-describedby\": hintId,\n      \"aria-readonly\": isReadOnly,\n      \"data-se\": testId,\n      readOnly: isReadOnly,\n    }),\n    [hintId, isReadOnly, testId],\n  );\n\n  return (\n    <>\n      <FormControlLabel\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={\n          validity === \"invalid\"\n            ? \"Mui-error\"\n            : validity === \"valid\"\n              ? \"Mui-valid\"\n              : \"\"\n        }\n        control={\n          <MuiCheckbox\n            {...inputValues}\n            disabled={isDisabled}\n            indeterminate={isIndeterminate}\n            inputProps={inputProps}\n            inputRef={localInputRef}\n            onChange={onChange}\n            onClick={onClick}\n            required={isRequired}\n            sx={checkboxInputStyles}\n          />\n        }\n        disabled={isDisabled}\n        id={idOverride}\n        label={label}\n        name={nameOverride ?? idOverride}\n        onBlur={onBlur}\n        required={isRequired}\n        sx={checkboxStyles}\n        translate={translate}\n        value={value}\n      />\n\n      {hint && (\n        <HintContainerWithInlineStartSpacing\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <FormHelperText id={hintId} translate={translate}>\n            {hint}\n          </FormHelperText>\n        </HintContainerWithInlineStartSpacing>\n      )}\n    </>\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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","ignoreList":[]}