@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

package/dist/cjs/Banner/BannerContent/ActionContainer/ActionContainer.styles.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classes = require("../../../utils/classes.cjs");
+const focusUtils = require("../../../utils/focusUtils.cjs");
+const name = "HvBannerActionContainer";
+const { staticClasses, useClasses } = classes.createClasses(name, {
+  actionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between"
+  },
+  actionsInnerContainer: {
+    flexDirection: "row",
+    marginTop: "8px"
+    // avoid overlap with close button outline focus ring
+  },
+  closeAction: {
+    alignSelf: "flex-end",
+    cursor: "pointer",
+    "&:focus": {
+      ...focusUtils.outlineStyles
+    }
+  },
+  iconContainer: {
+    width: "32px",
+    height: "32px"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=ActionContainer.styles.cjs.map

package/dist/cjs/Banner/BannerContent/ActionContainer/ActionContainer.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionContainer.styles.cjs","sources":["../../../../../src/Banner/BannerContent/ActionContainer/ActionContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../../utils/classes\";\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst name = \"HvBannerActionContainer\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  actionContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  actionsInnerContainer: {\n    flexDirection: \"row\",\n    marginTop: \"8px\", // avoid overlap with close button outline focus ring\n  },\n  closeAction: {\n    alignSelf: \"flex-end\",\n    cursor: \"pointer\",\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n  iconContainer: {\n    width: \"32px\",\n    height: \"32px\",\n  },\n});\n"],"names":["createClasses","outlineStyles"],"mappings":";;;;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,MAAM;AAAA,EAC/D,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,uBAAuB;AAAA,IACrB,eAAe;AAAA,IACf,WAAW;AAAA;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,GAAGC,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;;;"}

package/dist/cjs/Banner/BannerContent/BannerContent.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const SnackbarContent = require("@mui/material/SnackbarContent");
+const iconVariant = require("../../utils/iconVariant.cjs");
+const BannerContent_styles = require("./BannerContent.styles.cjs");
+const MessageContainer = require("./MessageContainer/MessageContainer.cjs");
+const ActionContainer = require("./ActionContainer/ActionContainer.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
+const HvBannerContent = React.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      classes: classesProp,
+      showIcon = false,
+      customIcon,
+      variant = "default",
+      onClose,
+      actions,
+      actionsCallback,
+      actionsPosition = "auto",
+      content,
+      actionProps,
+      ...others
+    } = props;
+    const { classes, cx } = BannerContent_styles.useClasses(classesProp);
+    const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "base_dark");
+    const effectiveActionsPosition = actionsPosition === "auto" ? "inline" : actionsPosition;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      SnackbarContent__default.default,
+      {
+        ref,
+        id,
+        classes: {
+          root: classes.root,
+          message: classes.message,
+          action: classes.action
+        },
+        className: cx(classes?.baseVariant, classes?.[variant]),
+        message: /* @__PURE__ */ jsxRuntime.jsx(
+          MessageContainer.HvMessageContainer,
+          {
+            id,
+            icon,
+            ...effectiveActionsPosition === "inline" && {
+              actionsOnMessage: actions,
+              actionsOnMessageCallback: actionsCallback
+            },
+            message: content
+          }
+        ),
+        action: /* @__PURE__ */ jsxRuntime.jsx(
+          ActionContainer.HvActionContainer,
+          {
+            id,
+            onClose,
+            ...effectiveActionsPosition === "bottom-right" && {
+              action: actions,
+              actionCallback: actionsCallback
+            },
+            ...actionProps
+          }
+        ),
+        ...others
+      }
+    ) });
+  }
+);
+exports.bannerContentClasses = BannerContent_styles.staticClasses;
+exports.HvBannerContent = HvBannerContent;
+//# sourceMappingURL=BannerContent.cjs.map

package/dist/cjs/Banner/BannerContent/BannerContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.cjs","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvActionGeneric } from \"../../ActionsGeneric\";\n\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { useClasses, staticClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes?.baseVariant, classes?.[variant])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actionsOnMessage: actions,\n                actionsOnMessageCallback: actionsCallback,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useClasses","iconVariant","jsx","SnackbarContent","HvMessageContainer","HvActionContainer"],"mappings":";;;;;;;;;;;AA+CO,MAAM,kBAAkBA,MAAA;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAS,GAAG,IAAIC,gCAAW,WAAW;AAC9C,UAAM,OAAO,cAAe,YAAYC,YAAAA,YAAY,SAAS,WAAW;AAMlE,UAAA,2BACJ,oBAAoB,SAAS,WAAW;AAE1C,WACGC,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,cACtB,UAAAA,2BAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,SAAS,QAAQ;AAAA,UACjB,QAAQ,QAAQ;AAAA,QAClB;AAAA,QACA,WAAW,GAAG,SAAS,aAAa,UAAU,OAAO,CAAC;AAAA,QACtD,SACED,2BAAA;AAAA,UAACE,iBAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,YAAY;AAAA,cAC5C,kBAAkB;AAAA,cAClB,0BAA0B;AAAA,YAC5B;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEF,QACEF,2BAAA;AAAA,UAACG,gBAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,kBAAkB;AAAA,cAClD,QAAQ;AAAA,cACR,gBAAgB;AAAA,YAClB;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;;;"}

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../utils/classes.cjs");
+const { useClasses, staticClasses } = classes.createClasses("HvBannerContent", {
+  root: {
+    minWidth: "100%",
+    position: "relative",
+    display: "flex",
+    flexWrap: "nowrap",
+    boxShadow: "none",
+    borderRadius: uikitStyles.theme.radii.none
+  },
+  message: {
+    display: "flex",
+    alignItems: "center",
+    padding: uikitStyles.theme.spacing("xs", 0),
+    paddingLeft: uikitStyles.theme.space.sm
+  },
+  action: {
+    padding: uikitStyles.theme.spacing("xs"),
+    marginRight: 0,
+    flex: "0 0 auto",
+    placeSelf: "stretch"
+  },
+  baseVariant: {
+    padding: 0
+  },
+  success: {
+    backgroundColor: uikitStyles.theme.colors.positive_20
+  },
+  warning: {
+    backgroundColor: uikitStyles.theme.colors.warning_20
+  },
+  error: {
+    backgroundColor: uikitStyles.theme.colors.negative_20
+  },
+  default: {
+    backgroundColor: uikitStyles.theme.colors.neutral_20
+  },
+  outContainer: {
+    width: "100%",
+    position: "relative"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=BannerContent.styles.cjs.map

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.styles.cjs","sources":["../../../../src/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    boxShadow: \"none\",\n    borderRadius: theme.radii.none,\n  },\n  message: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n  },\n  action: {\n    padding: theme.spacing(\"xs\"),\n    marginRight: 0,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  baseVariant: {\n    padding: 0,\n  },\n  success: {\n    backgroundColor: theme.colors.positive_20,\n  },\n  warning: {\n    backgroundColor: theme.colors.warning_20,\n  },\n  error: {\n    backgroundColor: theme.colors.negative_20,\n  },\n  default: {\n    backgroundColor: theme.colors.neutral_20,\n  },\n  outContainer: {\n    width: \"100%\",\n    position: \"relative\",\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,YAAY,kBAAkBA,QAAAA,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,cAAcC,YAAAA,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAASA,YAAA,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,aAAaA,YAAAA,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,IACN,SAASA,YAAAA,MAAM,QAAQ,IAAI;AAAA,IAC3B,aAAa;AAAA,IACb,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AACF,CAAC;;;"}

package/dist/cjs/Banner/BannerContent/MessageContainer/MessageContainer.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const setId = require("../../../utils/setId.cjs");
+const MessageContainer_styles = require("./MessageContainer.styles.cjs");
+const Typography = require("../../../Typography/Typography.cjs");
+const ActionsGeneric = require("../../../ActionsGeneric/ActionsGeneric.cjs");
+const HvMessageContainer = ({
+  id,
+  classes: classesProp,
+  icon,
+  actionsOnMessage,
+  actionsOnMessageCallback,
+  message
+}) => {
+  const { classes } = MessageContainer_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { id: setId.setId(id, "message-text"), className: classes.message, children: message }),
+    actionsOnMessage && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: setId.setId(id, "message-actions"),
+        className: classes.actionMessageContainer,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ActionsGeneric.HvActionsGeneric,
+          {
+            id,
+            category: "semantic",
+            actions: actionsOnMessage,
+            actionsCallback: actionsOnMessageCallback
+          }
+        )
+      }
+    )
+  ] });
+};
+exports.messageContainerClasses = MessageContainer_styles.staticClasses;
+exports.HvMessageContainer = HvMessageContainer;
+//# sourceMappingURL=MessageContainer.cjs.map

package/dist/cjs/Banner/BannerContent/MessageContainer/MessageContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContainer.cjs","sources":["../../../../../src/Banner/BannerContent/MessageContainer/MessageContainer.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\nimport { HvActionGeneric, HvActionsGeneric } from \"../../../ActionsGeneric\";\nimport { HvTypography } from \"../../../Typography\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./MessageContainer.styles\";\n\nexport { staticClasses as messageContainerClasses };\n\nexport type HvMessageContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMessageContainerProps extends HvBaseProps {\n  /** Icon to be presented. */\n  icon?: React.ReactNode;\n  /** The message to display. */\n  message?: React.ReactNode;\n  /** Actions to display on message. */\n  actionsOnMessage?: React.ReactNode | HvActionGeneric[];\n  /** The callback function ran when an action is triggered, receiving `actionsOnMessage` as param */\n  actionsOnMessageCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMessageContainerClasses;\n}\n\nexport const HvMessageContainer = ({\n  id,\n  classes: classesProp,\n  icon,\n  actionsOnMessage,\n  actionsOnMessageCallback,\n  message,\n}: HvMessageContainerProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <>\n      {icon && <div className={classes.iconContainer}>{icon}</div>}\n      <HvTypography id={setId(id, \"message-text\")} className={classes.message}>\n        {message}\n      </HvTypography>\n      {actionsOnMessage && (\n        <div\n          id={setId(id, \"message-actions\")}\n          className={classes.actionMessageContainer}\n        >\n          <HvActionsGeneric\n            id={id}\n            category=\"semantic\"\n            actions={actionsOnMessage}\n            actionsCallback={actionsOnMessageCallback}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["useClasses","jsxs","Fragment","jsx","HvTypography","setId","HvActionsGeneric"],"mappings":";;;;;;;AA6BO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,EAAE,QAAA,IAAYA,wBAAA,WAAW,WAAW;AAE1C,SAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAA,QAASC,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,IACtDA,2BAAAA,IAACC,WAAAA,cAAa,EAAA,IAAIC,MAAAA,MAAM,IAAI,cAAc,GAAG,WAAW,QAAQ,SAC7D,UACH,QAAA,CAAA;AAAA,IACC,oBACCF,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIE,MAAAA,MAAM,IAAI,iBAAiB;AAAA,QAC/B,WAAW,QAAQ;AAAA,QAEnB,UAAAF,2BAAA;AAAA,UAACG,eAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAS;AAAA,YACT,SAAS;AAAA,YACT,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/Banner/BannerContent/MessageContainer/MessageContainer.styles.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../../utils/classes.cjs");
+const name = "HvBannerMessageContainer";
+const { staticClasses, useClasses } = classes.createClasses(name, {
+  message: {
+    color: uikitStyles.theme.colors.base_dark,
+    wordBreak: "break-word",
+    maxWidth: "700px",
+    overflow: "hidden",
+    marginRight: 10
+  },
+  iconContainer: {
+    marginRight: uikitStyles.theme.space.xs,
+    marginLeft: -uikitStyles.theme.space.xs
+  },
+  actionMessageContainer: {
+    flex: "0 0 auto"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=MessageContainer.styles.cjs.map

package/dist/cjs/Banner/BannerContent/MessageContainer/MessageContainer.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContainer.styles.cjs","sources":["../../../../../src/Banner/BannerContent/MessageContainer/MessageContainer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nconst name = \"HvBannerMessageContainer\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  message: {\n    color: theme.colors.base_dark,\n    wordBreak: \"break-word\",\n    maxWidth: \"700px\",\n    overflow: \"hidden\",\n    marginRight: 10,\n  },\n  iconContainer: {\n    marginRight: theme.space.xs,\n    marginLeft: -theme.space.xs,\n  },\n  actionMessageContainer: {\n    flex: \"0 0 auto\",\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,OAAOC,YAAAA,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,aAAaA,YAAAA,MAAM,MAAM;AAAA,IACzB,YAAY,CAACA,kBAAM,MAAM;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,IACtB,MAAM;AAAA,EACR;AACF,CAAC;;;"}

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const MuiCheckbox = require("@mui/material/Checkbox");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
+const getSelectorIcons = (options, classes) => {
+  const { disabled, semantic } = options;
+  const color = disabled && ["atmo3", "secondary_60"] || semantic && ["base_light", "base_dark"] || void 0;
+  const checkedColor = disabled && ["atmo3", "secondary_60"] || semantic && ["base_dark", "base_light"] || void 0;
+  return {
+    checkbox: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { color, className: classes.icon }),
+    checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxPartial, { color, className: classes.icon }),
+    checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: checkedColor, className: classes.icon })
+  };
+};
+const HvBaseCheckBox = React.forwardRef((props, ref) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    name,
+    inputProps,
+    onChange,
+    onFocusVisible,
+    onBlur,
+    checked,
+    indeterminate,
+    defaultChecked,
+    value = "on",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    semantic = false,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvBaseCheckBox", props);
+  const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const icons = getSelectorIcons({ disabled, semantic }, classes);
+  const onChangeCallback = React.useCallback(
+    (event) => {
+      if (readOnly) {
+        return;
+      }
+      onChange?.(event, event.target.checked, value);
+    },
+    [onChange, readOnly, value]
+  );
+  const onBlurCallback = React.useCallback(
+    (event) => {
+      setFocusVisible(false);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  const onFocusVisibleCallback = React.useCallback(
+    (event) => {
+      setFocusVisible(true);
+      onFocusVisible?.(event);
+    },
+    [onFocusVisible]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MuiCheckbox__default.default,
+    {
+      ref,
+      id,
+      name,
+      value,
+      className: cx(
+        classes.root,
+        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },
+        className
+      ),
+      icon: icons.checkbox,
+      indeterminateIcon: icons.checkboxPartial,
+      checkedIcon: icons.checkboxChecked,
+      disabled,
+      required,
+      readOnly,
+      checked,
+      defaultChecked,
+      indeterminate,
+      inputProps,
+      onChange: onChangeCallback,
+      onFocusVisible: onFocusVisibleCallback,
+      onBlur: onBlurCallback,
+      color: "default",
+      disableRipple: true,
+      ...others
+    }
+  );
+});
+exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
+exports.HvBaseCheckBox = HvBaseCheckBox;
+//# sourceMappingURL=BaseCheckBox.cjs.map

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["jsx","CheckboxIcon","CheckboxPartialIcon","CheckboxCheckIcon","forwardRef","useDefaultProps","useClasses","useState","useCallback","MuiCheckbox"],"mappings":";;;;;;;;;;AA6FA,MAAM,mBAAmB,CACvB,SAIA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAGK,SAAA;AAAA,IACL,UAAWA,2BAAA,IAAAC,0BAAA,EAAa,OAAc,WAAW,QAAQ,MAAM;AAAA,IAC/D,iBACGD,2BAAA,IAAAE,iCAAA,EAAoB,OAAc,WAAW,QAAQ,MAAM;AAAA,IAE9D,iBACGF,2BAAAA,IAAAG,gBAAAA,eAAA,EAAkB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGvE;AAQO,MAAM,iBAAiBC,MAAA,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAIC,+BAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,QAAM,mBAAmBC,MAAA;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiBA,MAAA;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyBA,MAAA;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAAR,2BAAA;AAAA,IAACS,qBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,QACrE;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;;;"}

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const focusUtils = require("../utils/focusUtils.cjs");
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
+  root: {
+    padding: 0,
+    borderRadius: uikitStyles.theme.radii.base,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    }
+  },
+  disabled: {
+    "&$root": {
+      cursor: "not-allowed",
+      pointerEvents: "initial"
+    },
+    "& svg": {
+      "& path:nth-of-type(2)": {
+        fill: uikitStyles.theme.colors.secondary_60
+      }
+    }
+  },
+  focusVisible: {
+    "& svg": {
+      ...focusUtils.outlineStyles
+    }
+  },
+  icon: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=BaseCheckBox.styles.cjs.map

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,cAAcC,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvB,MAAMA,YAAAA,MAAM,OAAO;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AACT,CAAC;;;"}