@oracle/oraclejet-preact 14.0.6 → 14.1.0

package/cjs/MenuItem-0c819d68.js

@@ -0,0 +1,167 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+require('./UNSAFE_Text.js');
+
+var hooks_UNSAFE_useHover = require('./hooks/UNSAFE_useHover.js');
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+require('./utils/PRIVATE_clientHints.js');
+var preact = require('preact');
+var clientHints = require('./clientHints-e821b5ee.js');
+var classNames = require('./classNames-55bceee6.js');
+var Text = require('./Text-cdd6f2fd.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Context used to pass menu information without having to pass it to menu children props.
+ * We want to communicate information down to any interested menu item children.
+ */
+const MenuContext = preact.createContext({
+    onClose: () => null,
+    currentKey: undefined,
+    showFocusRing: false
+});
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Utility hook for consuming the MenuContext
+ *
+ * @returns The value of MenuContext provider
+ */
+function useMenuContext() {
+    return hooks.useContext(MenuContext);
+}
+
+const styles = {
+  menuItemContainer: "_17876eg",
+  focused: "qinu8s",
+  variant: {
+    default: {
+      menuItemContainer: "_8kqhsa",
+      hover: "_1pghquj",
+      pseudohover: "a3k8sy"
+    },
+    destructive: {
+      menuItemContainer: "_18l9dkr",
+      hover: "_123woi2",
+      pseudohover: "gfxxfs"
+    }
+  },
+  iconLabelContainer: "_1homfv4",
+  labelContainer: "_1rmwgrq",
+  iconContainer: "_1hyxnw0",
+  startIconContainer: "cl4q1q",
+  endIconContainer: "yx2cjf",
+  disabledContainer: "_54xf9b"
+};
+function MenuItem(props) {
+  return jsxRuntime.jsx(BaseMenuItem, Object.assign({}, props, {
+    role: "menuitem"
+  }));
+}
+const isHybrid = clientHints.getClientHints().hoverSupport === 'events';
+function BaseMenuItem({
+  label,
+  onAction,
+  startIcon,
+  endIcon,
+  role,
+  isChecked,
+  isDisabled = false,
+  variant = 'default'
+}) {
+  const {
+    onClose,
+    currentKey,
+    showFocusRing
+  } = useMenuContext();
+  const uniqueID = hooks_UNSAFE_useId.useId();
+  const id = hooks.useMemo(() => `oj-menu-item-${uniqueID}`, [uniqueID]);
+  const isCurrent = currentKey === id;
+  const menuItemRef = hooks.useRef(null);
+  const {
+    hoverProps,
+    isHover
+  } = hooks_UNSAFE_useHover.useHover({
+    isDisabled: !isHybrid
+  });
+
+  const handleItemSelection = () => {
+    onClose === null || onClose === void 0 ? void 0 : onClose({
+      reason: 'itemAction'
+    });
+    onAction === null || onAction === void 0 ? void 0 : onAction();
+  };
+
+  const {
+    pressProps
+  } = hooks_UNSAFE_usePress.usePress(handleItemSelection, {
+    isDisabled
+  });
+  hooks.useLayoutEffect(() => {
+    var _a;
+
+    if (isCurrent) {
+      (_a = menuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [isCurrent]);
+  const menuItemContainerClasses = classNames.classNames([styles.menuItemContainer, !isDisabled && styles.variant[variant].menuItemContainer, isDisabled && styles.disabledContainer, !isHybrid && !isDisabled && styles.variant[variant].pseudohover, isHybrid && isHover && !isDisabled && styles.variant[variant].hover, isCurrent && !!showFocusRing && styles.focused]);
+  const startIconContainerClasses = classNames.classNames([styles.iconLabelContainer, styles.iconContainer, styles.startIconContainer]);
+  const labelContainerClasses = classNames.classNames([styles.iconLabelContainer, styles.labelContainer]);
+  const endIconContainerClasses = classNames.classNames([styles.iconLabelContainer, styles.iconContainer, styles.endIconContainer]);
+  return jsxRuntime.jsxs("a", Object.assign({
+    ref: menuItemRef,
+    class: menuItemContainerClasses
+  }, utils_UNSAFE_mergeProps.mergeProps(hoverProps, pressProps), {
+    role: role,
+    "data-oj-menu-item-key": id
+  }, isDisabled && {
+    'aria-disabled': true
+  }, role !== 'menuitem' && {
+    'aria-checked': isChecked
+  }, {
+    tabIndex: isCurrent ? 0 : -1
+  }, {
+    children: [startIcon && jsxRuntime.jsx("span", Object.assign({
+      class: startIconContainerClasses
+    }, {
+      children: startIcon
+    })), jsxRuntime.jsx("span", Object.assign({
+      class: labelContainerClasses
+    }, {
+      children: jsxRuntime.jsx(Text.Text, Object.assign({
+        variant: "inherit",
+        size: "md"
+      }, {
+        children: label
+      }))
+    })), endIcon && jsxRuntime.jsx("span", Object.assign({
+      class: endIconContainerClasses
+    }, {
+      children: endIcon
+    }))]
+  }));
+}
+
+exports.BaseMenuItem = BaseMenuItem;
+exports.MenuContext = MenuContext;
+exports.MenuItem = MenuItem;
+/*  */
+//# sourceMappingURL=MenuItem-0c819d68.js.map

package/cjs/MenuItem-0c819d68.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem-0c819d68.js","sources":["../../src/UNSAFE_Menu/MenuContext.ts","../../src/UNSAFE_Menu/useMenuContext.ts","../../src/UNSAFE_Menu/MenuItem.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { createContext, ComponentProps } from 'preact';\n\nimport { Menu } from './Menu';\n\ntype Props = {\n  onClose: ComponentProps<typeof Menu>['onClose'];\n  currentKey?: string;\n  showFocusRing: boolean;\n};\n\n/**\n * Context used to pass menu information without having to pass it to menu children props.\n * We want to communicate information down to any interested menu item children.\n */\nconst MenuContext = createContext<Props>({\n  onClose: () => null,\n  currentKey: undefined,\n  showFocusRing: false\n});\n\nexport { MenuContext };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useContext } from 'preact/hooks';\n\nimport { MenuContext } from './MenuContext';\n\n/**\n * Utility hook for consuming the MenuContext\n *\n * @returns The value of MenuContext provider\n */\nfunction useMenuContext() {\n  return useContext(MenuContext);\n}\n\nexport { useMenuContext };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useLayoutEffect, useRef, useMemo } from 'preact/hooks';\nimport { ComponentChildren } from 'preact';\n\nimport { Text } from '../UNSAFE_Text';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\n\nimport { useMenuContext } from './useMenuContext';\n\nconst styles = {\n  menuItemContainer: cssProps`${{\n    cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable) !important',\n    width: '100%',\n    paddingTop: 'var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical)',\n    paddingBottom: 'var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical)',\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-edge-to-start-icon-padding)',\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-end-icon-to-end-edge-padding)',\n    boxSizing: 'border-box',\n    minHeight: 'var( --oj-c-PRIVATE-NOT-USE-collection-list-row-height)',\n    display: 'flex',\n    textAlign: 'start',\n    alignItems: 'center',\n    textDecorationLine: 'none !important',\n    outlineStyle: 'none'\n  }}`,\n  focused: cssProps`${{\n    outlineStyle: 'dotted',\n    outlineOffset: '1px',\n    outlineWidth: '1px',\n    outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)'\n  }}`,\n  variant: {\n    default: {\n      menuItemContainer: cssProps`${{\n        /* Color seems to change in active state due to a:active selector added on oj-c enviroment\n        because of this we have to set color here again. Same happens on disabled which\n         can't set pointerEvents as none since disabled items can receive focus */\n        '&:active': {\n          backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-active)',\n          color: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color)'\n        },\n        color: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color)'\n      }}`,\n      hover: cssProps`${{\n        // @ts-ignore\n        '&:not(:active)': {\n          backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover)'\n        }\n      }}`,\n      pseudohover: cssProps`${{\n        // @ts-ignore\n        '@media(hover: hover)': {\n          '&:hover:not(:active)': {\n            backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover)'\n          }\n        }\n      }}`\n    },\n    destructive: {\n      menuItemContainer: cssProps`${{\n        '&:active': {\n          backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover)',\n          color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger)'\n        },\n        color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger-low)'\n      }}`,\n      hover: cssProps`${{\n        backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover)',\n        color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger)'\n      }}`,\n      pseudohover: cssProps`${{\n        // @ts-ignore\n        '@media(hover: hover)': {\n          '&:hover': {\n            backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover)',\n            color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger)'\n          }\n        }\n      }}`\n    }\n  },\n  iconLabelContainer: cssProps`${{\n    display: 'flex',\n    alignItems: 'center',\n    overflowX: 'hidden',\n    overflowY: 'hidden'\n  }}`,\n  labelContainer: cssProps`${{\n    flexGrow: 1,\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size)'\n  }}`,\n  iconContainer: cssProps`${{\n    flexShrink: 0,\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size)'\n  }}`,\n  startIconContainer: cssProps`${{\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-icon-to-label-padding)'\n  }}`,\n  endIconContainer: cssProps`${{\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-menu-label-to-end-icon-padding)'\n  }}`,\n  disabledContainer: cssProps`${{\n    cursor: 'default !important',\n    '&:active': {\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n    },\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n  }}`\n};\n\ntype BaseMenuItemProps = (SimpleMenuItemProps | SelectMenuItemProps) & BaseBaseMenuItemProps;\n\ntype BaseBaseMenuItemProps = {\n  label: string;\n  onAction?: () => void;\n  startIcon?: ComponentChildren;\n  endIcon?: ComponentChildren;\n  isDisabled?: boolean;\n};\n\ntype SimpleMenuItemProps = {\n  role: 'menuitem';\n  variant?: 'default' | 'destructive';\n  isChecked?: never;\n};\n\ntype SelectMenuItemProps = {\n  role: 'menuitemcheckbox' | 'menuitemradio';\n  variant?: never;\n  isChecked?: boolean;\n};\n\ntype MenuItemProps = BaseBaseMenuItemProps & {\n  variant?: 'default' | 'destructive';\n};\n\nexport function MenuItem(props: MenuItemProps) {\n  return <BaseMenuItem {...props} role=\"menuitem\"></BaseMenuItem>;\n}\n\nconst isHybrid = getClientHints().hoverSupport === 'events';\n\nexport function BaseMenuItem({\n  label,\n  onAction,\n  startIcon,\n  endIcon,\n  role,\n  isChecked,\n  isDisabled = false,\n  variant = 'default'\n}: BaseMenuItemProps) {\n  const { onClose, currentKey, showFocusRing } = useMenuContext();\n\n  const uniqueID = useId();\n  const id = useMemo(() => `oj-menu-item-${uniqueID}`, [uniqueID]);\n  const isCurrent = currentKey === id;\n\n  const menuItemRef = useRef<HTMLAnchorElement | null>(null);\n\n  const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });\n\n  const handleItemSelection = () => {\n    onClose?.({ reason: 'itemAction' });\n    onAction?.();\n  };\n\n  const { pressProps } = usePress(handleItemSelection, { isDisabled });\n\n  useLayoutEffect(() => {\n    if (isCurrent) {\n      menuItemRef.current?.focus();\n    }\n  }, [isCurrent]);\n\n  const menuItemContainerClasses = classNames([\n    styles.menuItemContainer,\n    !isDisabled && styles.variant[variant].menuItemContainer,\n    isDisabled && styles.disabledContainer,\n    !isHybrid && !isDisabled && styles.variant[variant].pseudohover,\n    isHybrid && isHover && !isDisabled && styles.variant[variant].hover,\n    isCurrent && !!showFocusRing && styles.focused\n  ]);\n\n  const startIconContainerClasses = classNames([\n    styles.iconLabelContainer,\n    styles.iconContainer,\n    styles.startIconContainer\n  ]);\n\n  const labelContainerClasses = classNames([styles.iconLabelContainer, styles.labelContainer]);\n\n  const endIconContainerClasses = classNames([\n    styles.iconLabelContainer,\n    styles.iconContainer,\n    styles.endIconContainer\n  ]);\n\n  return (\n    <a\n      ref={menuItemRef}\n      class={menuItemContainerClasses}\n      {...mergeProps(hoverProps, pressProps)}\n      role={role}\n      data-oj-menu-item-key={id}\n      {...(isDisabled && { 'aria-disabled': true })}\n      {...(role !== 'menuitem' && { 'aria-checked': isChecked })}\n      tabIndex={isCurrent ? 0 : -1}>\n      {startIcon && <span class={startIconContainerClasses}>{startIcon}</span>}\n      <span class={labelContainerClasses}>\n        <Text variant=\"inherit\" size=\"md\">\n          {label}\n        </Text>\n      </span>\n      {endIcon && <span class={endIconContainerClasses}>{endIcon}</span>}\n    </a>\n  );\n}\n"],"names":["createContext","useContext","styles","variant","default","destructive","MenuItem","props","isHybrid","getClientHints","hoverSupport","BaseMenuItem","label","onAction","startIcon","endIcon","role","isChecked","isDisabled","uniqueID","useId","id","useMemo","isCurrent","currentKey","menuItemRef","useRef","hoverProps","isHover","useHover","pressProps","usePress","handleItemSelection","_a","current","focus","menuItemContainer","pseudohover","hover","showFocusRing","focused","iconLabelContainer","iconContainer","startIconContainer","labelContainerClasses","classNames","labelContainer","endIconContainer"],"mappings":"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"}

package/cjs/Message.types-d5b1820f.js

@@ -0,0 +1,11 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+
+const variants = utils_UNSAFE_arrayUtils.stringLiteralArray(['banner', 'inline', 'toast']);
+const severities = utils_UNSAFE_arrayUtils.stringLiteralArray(['error', 'warning', 'confirmation', 'info', 'none']);
+
+exports.severities = severities;
+/*  */
+//# sourceMappingURL=Message.types-d5b1820f.js.map

package/cjs/Message.types-d5b1820f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.types-d5b1820f.js","sources":["../../src/PRIVATE_Message/Message.types.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\n\nexport const variants = stringLiteralArray(['banner', 'inline', 'toast']);\nexport type MessageVariant = typeof variants[number];\n\nexport const severities = stringLiteralArray(['error', 'warning', 'confirmation', 'info', 'none']);\nexport type MessageSeverity = typeof severities[number];\n\n/**\n * Structure of data item passed to the renderer functions\n */\nexport type MessageRendererDataItem<K, D> = {\n  /**\n   * The data for the current message\n   */\n  data: D;\n\n  /**\n   * The zero-based index of the current message\n   */\n  index: number;\n\n  /**\n   * The key for the current message\n   */\n  key: K;\n\n  /**\n   * The metadata for the current message\n   */\n  metadata?: ItemMetadata<K>;\n};\n"],"names":["stringLiteralArray"],"mappings":";;;;;AAUO,MAAM,QAAQ,GAAGA,0CAAkB,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAG7D,MAAA,UAAU,GAAGA,0CAAkB,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,CAAC;;;;;;;"}

package/cjs/MessageCloseButton-66757186.js

@@ -0,0 +1,51 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+require('./UNSAFE_Button.js');
+require('./index-3651c0e7.js');
+require('./utils/UNSAFE_classNames.js');
+var Button = require('./Button-07d97191.js');
+var UNSAFE_Icons = require('./index-d5067e50.js');
+var classNames = require('./classNames-55bceee6.js');
+
+const messageCloseButtonStyles = {
+  base: "bg894j",
+  banner: "_1xbtxjt",
+  inline: undefined,
+  toast: "_1c43iuh"
+};
+/**
+ * A Component for rendering the message close button
+ */
+
+function MessageCloseButton({
+  onAction,
+  buttonRenderer,
+  title = 'Close',
+  variant = 'banner'
+}) {
+  const renderedButton = buttonRenderer ? buttonRenderer(title, onAction, variant) : jsxRuntime.jsx(Button.Button, {
+    startIcon: jsxRuntime.jsx(UNSAFE_Icons.SvgIcoClose, {}),
+    size: "sm",
+    title: title,
+    variant: "borderless",
+    onAction: onAction
+  }); // TODO: JET-48715 - remove marker classes
+  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+  // testing. This will need to be removed as we work on oj-c-message-banner.
+
+  const markerClassForTests = 'oj-c-messagebanner-close-icon';
+  const classes = classNames.classNames([variant === 'banner' && markerClassForTests, messageCloseButtonStyles.base, messageCloseButtonStyles[variant]]); // Otherwise, render the close icon
+
+  return jsxRuntime.jsx("div", Object.assign({
+    class: classes
+  }, {
+    children: renderedButton
+  }));
+}
+
+exports.MessageCloseButton = MessageCloseButton;
+/*  */
+//# sourceMappingURL=MessageCloseButton-66757186.js.map

package/cjs/MessageCloseButton-66757186.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCloseButton-66757186.js","sources":["../../src/PRIVATE_Message/MessageCloseButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { VNode } from 'preact';\nimport { Button } from '../UNSAFE_Button';\nimport { CloseIcon } from '../UNSAFE_ThemedIcons';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageVariant } from './Message.types';\n\n// TODO: remove usages of margin here\nconst messageCloseButtonStyles = {\n  base: cssProps`${{\n    alignSelf: 'flex-start',\n    display: 'flex'\n  }}`,\n  banner: cssProps`${{\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)',\n    marginInlineEnd: 'calc(-1 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x))',\n    marginTop: 'calc(-1 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x))',\n    marginBottom: 'calc(-1 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x))'\n  }}`,\n  inline: undefined,\n  toast: cssProps`${{\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)',\n    marginInlineEnd: 'calc(-1 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-3x) / 2)',\n    marginTop: 'calc(-1 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-3x) / 2)',\n    marginBottom: 'calc(-1 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-3x) / 2)'\n  }}`\n};\n\n/**\n * Props for the MessageCloseButton component\n */\ntype Props = {\n  /**\n   * The callback function to be called when the close icon is clicked\n   */\n  onAction: (event?: Event) => void;\n\n  /**\n   * Button renderer\n   */\n  buttonRenderer?: (\n    title: string,\n    onAction: (event?: Event) => void,\n    variant?: MessageVariant\n  ) => VNode;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n\n  /**\n   * Close button title\n   */\n  title?: string;\n};\n\n/**\n * A Component for rendering the message close button\n */\nfunction MessageCloseButton({\n  onAction,\n  buttonRenderer,\n  title = 'Close',\n  variant = 'banner'\n}: Props) {\n  const renderedButton = buttonRenderer ? (\n    buttonRenderer(title, onAction, variant)\n  ) : (\n    <Button\n      startIcon={<CloseIcon />}\n      size=\"sm\"\n      title={title}\n      variant=\"borderless\"\n      onAction={onAction}\n    />\n  );\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  const markerClassForTests = 'oj-c-messagebanner-close-icon';\n  const classes = classNames([\n    variant === 'banner' && markerClassForTests,\n    messageCloseButtonStyles.base,\n    messageCloseButtonStyles[variant]\n  ]);\n\n  // Otherwise, render the close icon\n  return <div class={classes}>{renderedButton}</div>;\n}\n\nexport { MessageCloseButton };\n"],"names":["messageCloseButtonStyles","inline","undefined","MessageCloseButton","onAction","buttonRenderer","title","variant","base","_jsx","Object","assign","class","classes","children","renderedButton"],"mappings":";;;;;;;;;;;;AAgBA,MAAAA,wBAAA,GAAA;QAAA,QAAA;UAAA,UAAA;AAWEC,EAAAA,MAAA,EAAAC,SAXF;;AAAA,CAAA,CAAA;AAiDA;;AAEG;;AACH,SAAAC,kBAAA,CAAA;EAAAC,QAAA;EAAAC,cAAA;AAAAC,EAAAA,KAAA,GAAA,OAAA;AAAAC,EAAAA,OAAA,GAAA,QAAA;AAAA,CAAA,EAAA;;;;;;;KAAA;;;;;sFAuBIP,wBAAA,CAAAQ,0CAvBJ;;AA4BE,EAAA,OAAAC,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAC,IAAAA,KAAA,EAAAC,OAAAA;AAAA,GAAA,EAAA;AAAAC,IAAAA,QAAA,EAAAC,cAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AACF;;;;;;;"}

package/cjs/MessageDetail-9ab2fec2.js

@@ -0,0 +1,66 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var preact = require('preact');
+require('./utils/UNSAFE_classNames.js');
+var MessageFormattingUtils = require('./MessageFormattingUtils-fac29bd4.js');
+var classNames = require('./classNames-55bceee6.js');
+
+const messageDetailStyles = {
+  // TODO: Reevaluate once the TEXT component is available (JET-46891)
+  base: "_140qy4i",
+  banner: "srfqqn",
+  inline: undefined,
+  toast: "_4f55qt"
+};
+/**
+ * Default renderer for rendering the detail content.
+ *
+ * @param item The data item object
+ * @returns Rendered detail content
+ */
+
+function defaultDetailRenderer(item) {
+  const {
+    detail
+  } = item.data; // If the detail is null or an empty string, do not render the
+  // content row
+
+  if (!MessageFormattingUtils.isValidValueForProp(detail)) {
+    return null;
+  }
+
+  return jsxRuntime.jsx(preact.Fragment, {
+    children: detail
+  });
+}
+/**
+ * Detail Component for rendering the detail content of the Message
+ */
+
+
+function MessageDetail({
+  item,
+  renderer = defaultDetailRenderer,
+  variant = 'banner'
+}) {
+  const renderedContent = renderer(item);
+  if (renderedContent == null) return null; // If detail content is rendered, then wrap it in a div with specified style classes
+  // TODO: JET-48715 - remove marker classes
+  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+  // testing. This will need to be removed as we work on oj-c-message-banner.
+
+  const markerClassForTests = 'oj-c-messagebanner-detail';
+  const classes = classNames.classNames([variant === 'banner' && markerClassForTests, messageDetailStyles.base, messageDetailStyles[variant]]);
+  return jsxRuntime.jsx("div", Object.assign({
+    class: classes
+  }, {
+    children: renderedContent
+  }));
+}
+
+exports.MessageDetail = MessageDetail;
+/*  */
+//# sourceMappingURL=MessageDetail-9ab2fec2.js.map

package/cjs/MessageDetail-9ab2fec2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageDetail-9ab2fec2.js","sources":["../../src/PRIVATE_Message/MessageDetail.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, Fragment } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageRendererDataItem, MessageVariant } from './Message.types';\nimport { isValidValueForProp } from './MessageFormattingUtils';\n\nconst messageDetailStyles = {\n  // TODO: Reevaluate once the TEXT component is available (JET-46891)\n  base: cssProps`${{\n    overflowWrap: 'anywhere'\n  }}`,\n\n  banner: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'\n  }}`,\n\n  inline: undefined,\n\n  toast: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-detail-text-color)'\n  }}`\n};\n\ntype MessageWithDetailText = {\n  /**\n   * The detail text for the message\n   */\n  detail?: string;\n};\n\n/**\n * Props for the Detail component\n */\ntype Props<K, D> = {\n  /**\n   * The data item for rendering the detail content\n   */\n  item: MessageRendererDataItem<K, D>;\n\n  /**\n   * A custom renderer for rendering the detail content\n   */\n  renderer?: (item: MessageRendererDataItem<K, D>) => ComponentChildren;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * Default renderer for rendering the detail content.\n *\n * @param item The data item object\n * @returns Rendered detail content\n */\nfunction defaultDetailRenderer<D extends MessageWithDetailText>(\n  item: MessageRendererDataItem<unknown, D>\n): ComponentChildren {\n  const { detail } = item.data;\n  // If the detail is null or an empty string, do not render the\n  // content row\n  if (!isValidValueForProp(detail)) {\n    return null;\n  }\n  return <Fragment>{detail}</Fragment>;\n}\n\n/**\n * Detail Component for rendering the detail content of the Message\n */\nfunction MessageDetail<K, D extends MessageWithDetailText>({\n  item,\n  renderer = defaultDetailRenderer,\n  variant = 'banner'\n}: Props<K, D>) {\n  const renderedContent = renderer(item);\n\n  if (renderedContent == null) return null;\n\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  const markerClassForTests = 'oj-c-messagebanner-detail';\n  const classes = classNames([\n    variant === 'banner' && markerClassForTests,\n    messageDetailStyles.base,\n    messageDetailStyles[variant]\n  ]);\n  return <div class={classes}>{renderedContent}</div>;\n}\n\nexport { MessageDetail };\n"],"names":["messageDetailStyles","inline","undefined","defaultDetailRenderer","item","detail","data","isValidValueForProp","_jsx","Fragment","children","MessageDetail","renderer","variant","renderedContent","base","Object","assign","class","classes"],"mappings":";;;;;;;;;;AAcA,MAAAA,mBAAA,GAAA;;QAAA,UAAA;UAAA,QAAA;AAWEC,EAAAA,MAAA,EAAAC,SAXF;;AAAA,CAAA,CAAA;AA8CA;;;;;AAKG;;AACH,SAAAC,qBAAA,CAAAC,IAAA,EAAA;EAGE,MAAA;AAAAC,IAAAA,MAAAA;AAAA,GAAA,GAAAD,IAAA,CAAAE,IAAA,CAHF;;;AAME,EAAA,IAAA,CAAAC,0CAAA,CAAAF,MAAA,CAAA,EAAA;AACE,IAAA,OAAA,IAAA,CAAA;AACD,GAAA;;EACD,OAAAG,cAAA,CAAAC,eAAA,EAAA;AAAAC,IAAAA,QAAA,EAAAL,MAAAA;AAAA,GAAA,CAAA,CAAA;AACF,CAAA;AAEA;;AAEG;;;AACH,SAAAM,aAAA,CAAA;EAAAP,IAAA;AAAAQ,EAAAA,QAAA,GAAAT,qBAAA;AAAAU,EAAAA,OAAA,GAAA,QAAA;AAAA,CAAA,EAAA;AAKE,EAAA,MAAAC,eAAA,GAAAF,QAAA,CAAAR,IAAA,CAAA,CAAA;+BAE6B,OAAA,IAAA,CAP/B;;;;;;sFAgBIJ,mBAAA,CAAAe;AAGF,EAAA,OAAAP,cAAA,CAAA,KAAA,EAAAQ,MAAA,CAAAC,MAAA,CAAA;AAAAC,IAAAA,KAAA,EAAAC,OAAAA;AAAA,GAAA,EAAA;AAAAT,IAAAA,QAAA,EAAAI,eAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AACF;;;;;;;"}

package/cjs/MessageFormattingUtils-fac29bd4.js

@@ -0,0 +1,106 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var utils_UNSAFE_getLocale = require('./utils/UNSAFE_getLocale.js');
+require('./utils/UNSAFE_stringUtils.js');
+var Message_types = require('./Message.types-d5b1820f.js');
+var stringUtils = require('./stringUtils-dad38408.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Options for creating an Intl.DateTimeFormat instance.
+ */
+const DATE_FORMAT_OPTIONS = Object.freeze({
+    TODAY: {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    },
+    DEFAULT: {
+        day: '2-digit',
+        month: '2-digit',
+        year: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    }
+});
+/**
+ * Regex for validating ISO timestamp
+ */
+const ISO_DATE_REGEX = /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;
+/**
+ * Checks if the provided date is today
+ *
+ * @param isoDate Date to be tested for today
+ *
+ * @returns boolean indicating if the provided date is today
+ */
+function isDateToday(isoDate) {
+    const today = new Date();
+    const provided = new Date(isoDate);
+    return (today.getUTCFullYear() === provided.getUTCFullYear() &&
+        today.getUTCMonth() === provided.getUTCMonth() &&
+        today.getUTCDate() === provided.getUTCDate());
+}
+/**
+ * Creates an instance of Intl.DateTimeFormat
+ *
+ * @param isToday A boolean to indicate whether a formatter is needed for the date
+ *                that is the current day.
+ *
+ * @returns the formatter instance
+ */
+function getDateTimeFormatter(isToday) {
+    const locale = utils_UNSAFE_getLocale.getLocale();
+    const { DateTimeFormat } = Intl;
+    if (isToday) {
+        return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.TODAY);
+    }
+    return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.DEFAULT);
+}
+/**
+ * Checks if the provided value is valid for the prop specified.
+ * By default, this method just checks for the value to be a valid string.
+ *
+ * @param value The value to be checked
+ * @param prop The property for which the value needs to be evaluated
+ *
+ * @returns the result of the validation
+ */
+function isValidValueForProp(value, prop = 'string') {
+    switch (prop) {
+        case 'severity':
+            // Should be one of the allowed severity
+            return typeof value === 'string' && Message_types.severities.includes(value);
+        case 'timestamp':
+            // Should be a valid ISO Datetime string
+            return typeof value === 'string' && ISO_DATE_REGEX.test(value);
+        case 'string':
+        default:
+            // anything other than null, undefined and '' is a valid string
+            return typeof value === 'string' && !stringUtils.isEmptyOrUndefined(value);
+    }
+}
+/**
+ * Formats the timestamp in the required format based on the current
+ * locale.
+ *
+ * @param isoTime Timestamp in ISO format
+ */
+function formatTimestamp(isoTime) {
+    const isToday = isDateToday(isoTime);
+    const formatter = getDateTimeFormatter(isToday);
+    return formatter.format(new Date(isoTime));
+}
+
+exports.formatTimestamp = formatTimestamp;
+exports.isValidValueForProp = isValidValueForProp;
+/*  */
+//# sourceMappingURL=MessageFormattingUtils-fac29bd4.js.map

package/cjs/MessageFormattingUtils-fac29bd4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFormattingUtils-fac29bd4.js","sources":["../../src/PRIVATE_Message/MessageFormattingUtils.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { getLocale } from '../utils/UNSAFE_getLocale';\nimport { isEmptyOrUndefined } from '../utils/UNSAFE_stringUtils';\nimport { severities } from './Message.types';\n\n// Types of properties that can be formatted\ntype PropFormat = 'severity' | 'string' | 'timestamp';\n\n/**\n * Options for creating an Intl.DateTimeFormat instance.\n */\nconst DATE_FORMAT_OPTIONS = Object.freeze({\n  TODAY: {\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true\n  },\n  DEFAULT: {\n    day: '2-digit',\n    month: '2-digit',\n    year: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true\n  }\n});\n\n/**\n * Regex for validating ISO timestamp\n */\nconst ISO_DATE_REGEX =\n  /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;\n\n/**\n * Checks if the provided date is today\n *\n * @param isoDate Date to be tested for today\n *\n * @returns boolean indicating if the provided date is today\n */\nfunction isDateToday(isoDate: string) {\n  const today = new Date();\n  const provided = new Date(isoDate);\n\n  return (\n    today.getUTCFullYear() === provided.getUTCFullYear() &&\n    today.getUTCMonth() === provided.getUTCMonth() &&\n    today.getUTCDate() === provided.getUTCDate()\n  );\n}\n\n/**\n * Creates an instance of Intl.DateTimeFormat\n *\n * @param isToday A boolean to indicate whether a formatter is needed for the date\n *                that is the current day.\n *\n * @returns the formatter instance\n */\nfunction getDateTimeFormatter(isToday: boolean) {\n  const locale = getLocale();\n  const { DateTimeFormat } = Intl;\n  if (isToday) {\n    return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.TODAY as Intl.DateTimeFormatOptions);\n  }\n\n  return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.DEFAULT as Intl.DateTimeFormatOptions);\n}\n\n/**\n * Checks if the provided value is valid for the prop specified.\n * By default, this method just checks for the value to be a valid string.\n *\n * @param value The value to be checked\n * @param prop The property for which the value needs to be evaluated\n *\n * @returns the result of the validation\n */\nfunction isValidValueForProp<T>(\n  value: T | null | undefined,\n  prop: PropFormat = 'string'\n): value is T {\n  switch (prop) {\n    case 'severity':\n      // Should be one of the allowed severity\n      return typeof value === 'string' && severities.includes(value as any);\n\n    case 'timestamp':\n      // Should be a valid ISO Datetime string\n      return typeof value === 'string' && ISO_DATE_REGEX.test(value);\n\n    case 'string':\n    default:\n      // anything other than null, undefined and '' is a valid string\n      return typeof value === 'string' && !isEmptyOrUndefined(value);\n  }\n}\n\n/**\n * Formats the timestamp in the required format based on the current\n * locale.\n *\n * @param isoTime Timestamp in ISO format\n */\nfunction formatTimestamp(isoTime: string) {\n  const isToday = isDateToday(isoTime);\n  const formatter = getDateTimeFormatter(isToday);\n\n  return formatter.format(new Date(isoTime));\n}\n\nexport { formatTimestamp, isValidValueForProp };\n"],"names":["getLocale","severities","isEmptyOrUndefined"],"mappings":";;;;;;;;AAAA;;;;;;AAMG;AAQH;;AAEG;AACH,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC;AACxC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,IAAI;AACb,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,IAAI;AACb,KAAA;AACF,CAAA,CAAC,CAAC;AAEH;;AAEG;AACH,MAAM,cAAc,GAClB,oIAAoI,CAAC;AAEvI;;;;;;AAMG;AACH,SAAS,WAAW,CAAC,OAAe,EAAA;AAClC,IAAA,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;AACzB,IAAA,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IAEnC,QACE,KAAK,CAAC,cAAc,EAAE,KAAK,QAAQ,CAAC,cAAc,EAAE;AACpD,QAAA,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,WAAW,EAAE;QAC9C,KAAK,CAAC,UAAU,EAAE,KAAK,QAAQ,CAAC,UAAU,EAAE,EAC5C;AACJ,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,oBAAoB,CAAC,OAAgB,EAAA;AAC5C,IAAA,MAAM,MAAM,GAAGA,gCAAS,EAAE,CAAC;AAC3B,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;AAChC,IAAA,IAAI,OAAO,EAAE;QACX,OAAO,IAAI,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,KAAmC,CAAC,CAAC;AAC5F,KAAA;IAED,OAAO,IAAI,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,OAAqC,CAAC,CAAC;AAC/F,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,mBAAmB,CAC1B,KAA2B,EAC3B,OAAmB,QAAQ,EAAA;AAE3B,IAAA,QAAQ,IAAI;AACV,QAAA,KAAK,UAAU;;YAEb,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAIC,wBAAU,CAAC,QAAQ,CAAC,KAAY,CAAC,CAAC;AAExE,QAAA,KAAK,WAAW;;YAEd,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAEjE,QAAA,KAAK,QAAQ,CAAC;AACd,QAAA;;YAEE,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,CAACC,8BAAkB,CAAC,KAAK,CAAC,CAAC;AAClE,KAAA;AACH,CAAC;AAED;;;;;AAKG;AACH,SAAS,eAAe,CAAC,OAAe,EAAA;AACtC,IAAA,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AACrC,IAAA,MAAM,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAEhD,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;AAC7C;;;;;;;;"}

package/cjs/MessageLayer-2d31300d.js

@@ -0,0 +1,88 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var hooks_UNSAFE_useUser = require('./hooks/UNSAFE_useUser.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+require('./utils/UNSAFE_classNames.js');
+require('./UNSAFE_Flex.js');
+var UNSAFE_WindowOverlay = require('./UNSAFE_WindowOverlay.js');
+var classNames = require('./classNames-55bceee6.js');
+var Flex = require('./Flex-b113edd5.js');
+
+const positions = utils_UNSAFE_arrayUtils.stringLiteralArray(['top', 'top-left', 'top-right', 'top-start', 'top-end', 'bottom', 'bottom-left', 'bottom-right', 'bottom-start', 'bottom-end']);
+const styles = {
+  notificationPosition: "_16ik9hw",
+  ['top-left']: "akd4h6",
+  top: "urs9gb",
+  ['top-right']: "_40to3k",
+  ['bottom-left']: "i8j16y",
+  bottom: "_183xiko",
+  ['bottom-right']: "_1q3l9t"
+};
+
+const MessageLayer = ({
+  children,
+  offset,
+  testId,
+  position = 'bottom'
+}) => {
+  var _a, _b;
+
+  const {
+    direction
+  } = hooks_UNSAFE_useUser.useUser();
+  const isLtr = direction === 'ltr';
+  let logicalPosition;
+
+  switch (position) {
+    case 'top-start':
+      logicalPosition = isLtr ? styles['top-left'] : styles['top-right'];
+      break;
+
+    case 'top-end':
+      logicalPosition = isLtr ? styles['top-right'] : styles['top-left'];
+      break;
+
+    case 'bottom-start':
+      logicalPosition = isLtr ? styles['bottom-left'] : styles['bottom-right'];
+      break;
+
+    case 'bottom-end':
+      logicalPosition = isLtr ? styles['bottom-right'] : styles['bottom-left'];
+      break;
+
+    default:
+      logicalPosition = styles[position];
+      break;
+  }
+
+  const positionClasses = classNames.classNames([styles.notificationPosition, logicalPosition]);
+  const offsetStyle = typeof offset === 'number' ? {
+    '--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset': `${offset}px`,
+    '--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset': `${offset}px`
+  } : {
+    '--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset': `${(_a = offset === null || offset === void 0 ? void 0 : offset.vertical) !== null && _a !== void 0 ? _a : 0}px`,
+    '--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset': `${(_b = offset === null || offset === void 0 ? void 0 : offset.horizontal) !== null && _b !== void 0 ? _b : 0}px`
+  };
+  return jsxRuntime.jsx(UNSAFE_WindowOverlay.WindowOverlay, {
+    children: jsxRuntime.jsx("div", Object.assign({
+      class: positionClasses,
+      "data-testid": testId,
+      style: offset !== undefined ? offsetStyle : undefined
+    }, {
+      children: jsxRuntime.jsx(Flex.Flex, Object.assign({
+        direction: "column",
+        gap: "2x"
+      }, {
+        children: children
+      }))
+    }))
+  });
+};
+
+exports.MessageLayer = MessageLayer;
+exports.positions = positions;
+/*  */
+//# sourceMappingURL=MessageLayer-2d31300d.js.map

package/cjs/MessageLayer-2d31300d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLayer-2d31300d.js","sources":["../../src/PRIVATE_MessageLayer/MessageLayer.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { Flex } from '../UNSAFE_Flex';\nimport { WindowOverlay } from '../UNSAFE_WindowOverlay';\n\nconst positions = stringLiteralArray([\n  'top',\n  'top-left',\n  'top-right',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n  'bottom-start',\n  'bottom-end'\n]);\n\ntype Position = typeof positions[number];\n\ntype Offset =\n  | number\n  | {\n      horizontal?: number;\n      vertical?: number;\n    };\n\ntype Props = {\n  children: ComponentChildren;\n\n  /**\n   * Defines the fixed position where the notifications will to be placed on the screen.\n   * - top-start resolves to top-left in LTR (top-right in RTL)\n   * - top-end resolves to top-right in LTR (top-left in RTL)\n   * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n   * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n   *\n   * default bottom\n   */\n  position?: Position;\n\n  /**\n   * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n   * an object with horizontal and vertical values.\n   *\n   * default 0\n   */\n  offset?: Offset;\n\n  /**\n   * The test id which is assigned to the \"data-testid\" for the component's element.\n   * Used for test automation, it is assigned to the wrapper element rendered by the component.\n   */\n  testId?: string;\n};\n\nconst styles = {\n  notificationPosition: cssProps`${{\n    position: 'absolute',\n    pointerEvents: 'initial',\n    width: 'max-content'\n  }}`,\n  ['top-left']: cssProps`${{\n    left: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset)',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset)'\n  }}`,\n  top: cssProps`${{\n    left: 'calc(50% + var(--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset))',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset)',\n    transform: 'translateX(-50%)'\n  }}`,\n  ['top-right']: cssProps`${{\n    right: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset)',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset)'\n  }}`,\n  ['bottom-left']: cssProps`${{\n    left: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset)',\n    bottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset)'\n  }}`,\n  bottom: cssProps`${{\n    left: 'calc(50% + var(--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset))',\n    bottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset)',\n    transform: 'translateX(-50%)'\n  }}`,\n  ['bottom-right']: cssProps`${{\n    right: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset)',\n    bottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset)'\n  }}`\n} as const;\n\nconst MessageLayer = ({ children, offset, testId, position = 'bottom' }: Props) => {\n  const { direction } = useUser();\n  const isLtr = direction === 'ltr';\n\n  let logicalPosition;\n  switch (position) {\n    case 'top-start':\n      logicalPosition = isLtr ? styles['top-left'] : styles['top-right'];\n      break;\n    case 'top-end':\n      logicalPosition = isLtr ? styles['top-right'] : styles['top-left'];\n      break;\n    case 'bottom-start':\n      logicalPosition = isLtr ? styles['bottom-left'] : styles['bottom-right'];\n      break;\n    case 'bottom-end':\n      logicalPosition = isLtr ? styles['bottom-right'] : styles['bottom-left'];\n      break;\n    default:\n      logicalPosition = styles[position];\n      break;\n  }\n\n  const positionClasses = classNames([styles.notificationPosition, logicalPosition]);\n\n  const offsetStyle =\n    typeof offset === 'number'\n      ? {\n          '--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset': `${offset}px`,\n          '--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset': `${offset}px`\n        }\n      : {\n          '--oj-c-PRIVATE-DO-NOT-USE-notification-vertical-offset': `${offset?.vertical ?? 0}px`,\n          '--oj-c-PRIVATE-DO-NOT-USE-notification-horizontal-offset': `${offset?.horizontal ?? 0}px`\n        };\n\n  return (\n    <WindowOverlay>\n      <div\n        class={positionClasses}\n        data-testid={testId}\n        style={offset !== undefined ? offsetStyle : undefined}>\n        <Flex direction=\"column\" gap=\"2x\">\n          {children}\n        </Flex>\n      </div>\n    </WindowOverlay>\n  );\n};\n\nexport type { Position, Offset };\nexport { MessageLayer, positions };\n"],"names":["positions","stringLiteralArray","styles","MessageLayer","children","offset","testId","position","direction","useUser","isLtr","logicalPosition","positionClasses","classNames","notificationPosition","offsetStyle","_a","vertical","_b","horizontal","_jsx","WindowOverlay","Object","assign","class","style","undefined","Flex","gap"],"mappings":"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"}

package/cjs/MessageStartIcon-5cdb8fbe.js

@@ -0,0 +1,70 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+require('./utils/UNSAFE_classNames.js');
+require('./index-3651c0e7.js');
+require('./UNSAFE_Flex.js');
+var UNSAFE_Icons = require('./index-d5067e50.js');
+var Flex = require('./Flex-b113edd5.js');
+var classNames = require('./classNames-55bceee6.js');
+
+const messageStartIconStyles = "pucbe";
+const severityIconStyles = {
+  banner: "_15njxlu",
+  inline: "_1h49bz2",
+  toast: "_19uxs4j"
+};
+const severityIcons = {
+  confirmation: UNSAFE_Icons.SvgIcoSuccessS,
+  error: UNSAFE_Icons.SvgIcoErrorS,
+  info: UNSAFE_Icons.SvgIcoInformationS,
+  warning: UNSAFE_Icons.SvgIcoWarningS
+};
+const containerStyles = "_4joqqy";
+/**
+ * StartIcon Component for rendering the severity based icon in Message
+ */
+
+function MessageStartIcon({
+  severity,
+  variant = 'banner',
+  translations
+}) {
+  const IconComponent = severityIcons[severity]; // TODO: JET-50793
+
+  const iconContent = variant !== 'inline' ? jsxRuntime.jsx(Flex.Flex, Object.assign({
+    align: "center",
+    height: "100%"
+  }, {
+    children: jsxRuntime.jsx("span", Object.assign({
+      class: containerStyles,
+      role: "img",
+      title: translations === null || translations === void 0 ? void 0 : translations[severity]
+    }, {
+      children: jsxRuntime.jsx(IconComponent, {})
+    }))
+  })) : jsxRuntime.jsx("span", Object.assign({
+    class: containerStyles,
+    role: "img",
+    title: translations === null || translations === void 0 ? void 0 : translations[severity]
+  }, {
+    children: jsxRuntime.jsx(IconComponent, {})
+  })); // If detail content is rendered, then wrap it in a div with specified style classes
+  // TODO: JET-48715 - remove marker classes
+  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+  // testing. This will need to be removed as we work on oj-c-message-banner.
+
+  const markerClassForTests = 'oj-c-messagebanner-start-icon';
+  return jsxRuntime.jsx("div", Object.assign({
+    class: classNames.classNames([variant === 'banner' && markerClassForTests, messageStartIconStyles, severityIconStyles[variant]]),
+    role: "presentation"
+  }, {
+    children: iconContent
+  }));
+}
+
+exports.MessageStartIcon = MessageStartIcon;
+/*  */
+//# sourceMappingURL=MessageStartIcon-5cdb8fbe.js.map